@font-face {
    font-family: 'GFS_Didot';
    src: url('../../fuentes/GFS_Didot/GFSDidot-Regular.ttf');
}

@font-face {
    font-family: 'Playfair_Display';
    src: url('../../fuentes/Playfair_Display/static/PlayfairDisplay-Regular.ttf');
}

/* === BUENAS PRÁCTICAS: Box-Sizing Global === 
* {
    box-sizing: border-box;
}*/

/* === KEYFRAMES para el efecto reluciente === */
@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* === FOOTER GENERAL === */

#redes-sociales {
    background-color: #1a1a1a;
    color: white;
    padding: 25px 25px; /* PADDING REDUCIDO MÁS PARA SUBIR TODO (WEB) */
    text-align: center;
}

/* Contenedor para centrar y limitar el ancho */
.contenido-redes {
    max-width: 900px; 
    margin: 0 auto;
    width: 100%; 
}

/* Título principal del footer */
#redes-sociales h3 {
    font-family: 'GFS_Didot';
    font-size: 3rem;
    margin-bottom: 20px;
    color: #8A0303;
    letter-spacing: 1px;
}

/* === ÍCONOS DE REDES === */

.iconos-redes {
    display: flex;
    justify-content: center;
    gap: 40px; 
    flex-wrap: wrap;
    margin-bottom: 20px; 
}

.iconos-redes a img {
    width: 50px; 
    height: 50px;
    transition: transform 0.3s ease;
    /* Recordatorio: Elimina este filtro si tus PNG son oscuros y quieres que se vean. */
    /* filter: brightness(0) invert(1); */ 
}

.iconos-redes a:hover img {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(138, 3, 3, 0.8); 
    border-radius: 5px; 
}

/* === NOMBRE DE AUTORA CON EFECTO RELUCIENTE === */

.nombre-autora {
    font-family: 'Playfair_Display';
    margin-top: 1.5rem; 
    font-size: 4.5rem; /* TAMAÑO AUMENTADO FINAL (WEB) */
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;

    /* Propiedades de la animación (se mantienen) */
    background: linear-gradient(
        to right,
        #8A0303 0%,
        #ffda44 20%,
        #8A0303 40%,
        #8A0303 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine 7s linear infinite;
}


/* === ENLACES LEGALES (WEB) === */

.footer-links {
    margin-top: 0rem; /* SUBIDO MÁS (WEB) */
    font-size: 1.25rem;
    color: #ccc;
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap; 
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #8A0303;
    text-decoration: underline;
}

/* Separador "|" entre enlaces (VISTA WEB) */
.separator {
    color: #8A0303;
    font-weight: bold;
    font-size: 1.1rem;
    user-select: none; 
    display: inline-block; /* Asegura que la barra vertical se muestre en web */
}


/* ---------------------------------------------------------------------------------- */
/* === RESPONSIVE AJUSTES (Media Query) === */
/* ---------------------------------------------------------------------------------- */

@media (max-width: 768px) {
    #redes-sociales {
        padding: 20px 20px; /* PADDING REDUCIDO */
    }

    .nombre-autora {
        font-size: 2.8rem; /* TAMAÑO AUMENTADO */
    }
    
    .footer-links {
        margin-top: 0.8rem; /* SUBIDO MÁS */
    }

    /* Mantenemos el separador vertical en esta vista, si cabe */
    .separator {
        display: inline-block;
    }
}


@media (max-width: 480px) {
    #redes-sociales {
        padding: 15px 15px; /* PADDING REDUCIDO MÁS EN MÓVIL (Sube todo) */
    }

    #redes-sociales h3 {
        font-size: 1.8rem; 
        margin-bottom: 15px;
    }

    /* TAMAÑO AUMENTADO FINAL (MÓVIL) */
    .nombre-autora {
        font-size: 2.5rem; 
        margin-top: 1rem;
    }

    /* === AJUSTE DE ÍCONOS MÓVIL (3x3) === */
    .iconos-redes {
        gap: 15px;
        margin-bottom: 15px;
        max-width: 250px;
        margin-left: auto;
        margin-right: auto;
    }

    /* === AJUSTE DE ENLACES LEGALES MÓVIL (Uno arriba del otro) === */
    .footer-links {
        margin-top: -1rem; /* SUBIDO MÁS (MÓVIL) */
        font-size: 0.98rem; 
        flex-direction: column; 
        align-items: center; 
        gap: 0; 
    }
    
    .footer-links a {
        padding: 3px 0;
    }

    /* === LÍNEA HORIZONTAL GRANDE EN MÓVIL (Reemplazando la vertical) === */
    .separator {
        /* ELIMINA LA LÍNEA VERTICAL Y FUERZA SÓLO LA HORIZONTAL */
        display: block; 
        color: transparent; /* Oculta el texto "|" si por alguna razón se renderiza */
        
        /* PROPIEDADES DE LA LÍNEA HORIZONTAL */
        content: ""; 
        height: 2px;
        width: 50%; 
        max-width: 150px;
        background-color: #8A0303;
        margin: 5px 0; 
    }
}