/* ==========================================================================
   SECCIÓN REDES SOCIALES
========================================================================== */

.social-media-section {
    background-color: #ffffff; /* Mantiene el fondo limpio de la imagen */
    overflow: hidden; /* Evita que la animación de entrada genere una barra de scroll */
}

/* Estilo del texto */
.social-title {
    color: #1a1a1a;
    font-size: 2.2rem;
    line-height: 1.3;
    max-width: 400px; /* Evita que el texto se estire demasiado a lo ancho */
}

/* --- Imágenes de Redes Sociales --- */
.social-img {
    width: 75px;  /* Ancho uniforme para las 3 imágenes */
    height: 75px; /* Alto uniforme */
    object-fit: contain; /* Asegura que la imagen no se deforme */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Efecto Hover: Las redes saltan un poquito y proyectan sombra al pasar el mouse */
.social-icon-link:hover .social-img {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
}

/* --- Imagen de la Derecha (Mascota) --- */
.mascot-img {
    max-width: 70%; /* Para que no sea gigantesca en PC */
    animation: floatMascot 4s ease-in-out infinite; /* Le da el efecto de flotar */
}

/* Animación de flotación suave para la ilustración */
@keyframes floatMascot {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); } /* Sube 15px */
    100% { transform: translateY(0px); }
}

/* --- Ajustes para Celulares --- */
@media (max-width: 768px) {
    .social-title {
        font-size: 1.8rem;
    }
    
    .social-img {
        width: 60px; /* Iconos un poco más pequeños en celular */
        height: 60px;
    }
    
    .mascot-img {
        max-width: 90%; /* En celular usamos más espacio para la imagen */
        margin-top: 20px;
    }
}