/* Contenedor principal de la sección */
.social-media-section {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    width: 90%;
}

.social-media-section h2 {
    margin-top: 0;
    font-size: 24px;
    color: #333;
}

.social-media-section p {
    color: #666;
    margin-bottom: 30px;
}

/* Contenedor de los enlaces/iconos */
.social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Para que los iconos se ajusten en pantallas pequeñas */
    gap: 15px; /* Espacio entre los iconos */
}

/* Estilo individual de cada icono */
.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #e9e9e9;
    border-radius: 50%; /* Para que sean circulares */
    color: #333; /* Color del icono */
    font-size: 22px;
    text-decoration: none;
    transition: all 0.3s ease-in-out; /* Animación suave */
}

.social-icon svg {
    height: 35px;
    transition: all 0.3s ease-in-out;
}

/* Efecto al pasar el cursor (hover) */
.social-icon:hover, .social-icon:focus {
    transform: translateY(-5px); /* Eleva el icono */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #fff; /* Color del icono al pasar el cursor */
}

/* Colores específicos para cada red social al hacer hover */
.social-icon.facebook:hover, .social-icon.facebook:focus {
    background-color: #1877F2;
}

.social-icon.instagram:hover, .social-icon.instagram:focus {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.social-icon.youtube:hover, .social-icon.youtube:focus {
    background-color: #FF0000;
}

.social-icon.tiktok:hover, .social-icon.tiktok:focus {
    background-color: #000000;
}

.social-icon.google-maps:hover, .social-icon.google-maps:focus {
    background-color: #4285F4;
}

.social-icon.google-maps:hover svg,
.social-icon.tiktok:hover svg,
.social-icon.youtube:hover svg,
.social-icon.instagram:hover svg,
.social-icon.facebook:hover svg {
    fill: #fff;
}

.social-icon.google-maps:focus svg,
.social-icon.tiktok:focus svg,
.social-icon.youtube:focus svg,
.social-icon.instagram:focus svg,
.social-icon.facebook:focus svg {
    fill: #fff;
}


/* Gracias */
.gracias {
    margin-top: 35px;
    margin-bottom: 35px;
}