/* 1. RESET B�SICO (Para quitar márgenes por defecto) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* 2. ESTILOS DE LA BARRA SUPERIOR */
.barra-superior {
    text-align: right;
    padding: 10px 40px;
    font-size: 12px;
    color: #666; /* Color gris del texto */
    border-bottom: 1px solid #ddd; /* La línea delgada debajo del texto */
}

/* 3. ESTILOS DEL HEADER PRINCIPAL */
.header-principal {
    display: flex;
    justify-content: space-between; /* Separa el logo a la izquierda y el menú a la derecha */
    align-items: center;
    padding: 15px 40px;
    background-color: #ffffff;
    position: sticky; /* Hace que se pegue al hacer scroll */
    top: 0; /* Indica que se debe pegar justo en el tope de la pantalla */
    z-index: 1000; /* Asegura que el menú siempre esté por encima de las fotos y otros elementos */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Le da una sombra elegante para separarlo del contenido al bajar */
}

.logo img {
    height: 80px; /* Ajusta este valor dependiendo del tamaño de tu logo */
}

/* 4. ESTILOS DEL MENÚ DE NAVEGACIÓN */
.navegacion > ul {
    list-style: none; /* Quita los puntos de la lista */
    display: flex;
    align-items: center;
}

.navegacion > ul > li {
    margin-left: 5px;
}

.navegacion ul li a {
    text-decoration: none;
    color: #666;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

/* 5. ESTILO DEL BOTÓN ACTIVO (Azul) */
.navegacion ul li a.activo {
    background-color: #1a5b9e; /* Color azul aproximado de tu imagen */
    color: white;
}

/* Efecto al pasar el mouse por los otros enlaces */
.navegacion ul li a:hover:not(.activo) {
    color: #1a5b9e;
}

/* 6. ESTILOS DEL SUBMENÚ DESPLEGABLE */
/* Preparamos al elemento padre para que el submenú se posicione en base a él */
.navegacion ul li.dropdown {
    position: relative;
}

/* Ocultamos el submenú y le damos diseño */
.submenu {
    list-style: none; /* ¡Exacto! Aquí quitamos los puntos del submenú */
    display: none; /* Oculto por defecto */
    position: absolute; /* Para que "flote" debajo del menú principal */
    top: 100%; /* Aparece justo debajo del texto "Nuestra Labor" */
    left: 0;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1); /* Sombra suave para que resalte */
    min-width: 230px; /* Ancho para que quepan los textos largos */
    z-index: 100; /* Asegura que se muestre por encima de otros elementos */
    padding: 10px 0;
}

/* Mostramos el submenú al pasar el mouse por el 'li' principal */
.navegacion ul li.dropdown:hover .submenu {
    display: flex;
    flex-direction: column;
}

/* Ajustamos los elementos dentro del submenú */
.submenu li {
    margin-left: 0; /* Quitamos el margen que le dimos al menú principal */
    width: 100%;
}

.submenu li a {
    display: block;
    padding: 10px 20px;
    font-weight: 500; /* Letra un poco menos gruesa */
    color: #666;
    text-transform: none; /* Para respetar las mayúsculas y minúsculas */
}

/* Color de fondo al pasar el mouse sobre las opciones del submenú */
.submenu li a:hover {
    background-color: #f5f5f5;
    color: #1a5b9e;
}

/* =========================================
   7. ESTILOS DEL CARRUSEL / HERO
   ========================================= */

.carrusel-hero {
    position: relative; /* Para poder posicionar las flechas y el botón de dona */
    width: 100%;
    min-height: 500px;
    background-color: #f7ddef; /* Color base rosado de tu imagen */
    /* Nota: Cuando tengas la imagen del fondo de cuadritos, quita la doble diagonal de abajo y pon el nombre de tu imagen */
    /* background-image: url('fondo-cuadricula.jpg'); */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
}

/* El contenedor que agrupa todas las imágenes */
.contenedor-slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Diseño base para CADA imagen (Slide) */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Las ocultamos todas por defecto */
    transition: opacity 0.5s ease-in-out; /* Efecto de transición suave */
    z-index: 1;
}

/* Solo mostramos la que tenga la clase "activo" */
.slide.activo {
    opacity: 1;
    z-index: 2; /* Lo ponemos por encima de las ocultas */
}

/* Aseguramos que las flechas y botones estén por encima de las imágenes */
.flecha, .btn-dona, .contenido-hero {
    position: relative;
    z-index: 10;
}

/* Contenedor del texto y botón central */
.contenido-hero {
    text-align: center;
    max-width: 800px; /* Para que el texto de abajo no se alargue de más */
}

/* Título gigante (Escuela de Buentrato) */
.titulo-escuela {
    font-size: 60px; /* Tamaño grande */
    color: #ff99cc; /* Color rosado del texto */
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Efecto de borde negro */
    margin-bottom: 30px;
    letter-spacing: 2px;
}

/* Botón central morado */
.btn-info {
    display: inline-block;
    background-color: #8c68a6; /* Morado del botón */
    color: white;
    text-decoration: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 40px;
    transition: 0.3s;
}

.btn-info:hover {
    background-color: #724e8c;
}

/* Texto naranja del final */
.texto-hero {
    color: #d18a1a;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.5;
}

/* Flechas moradas de los lados */
.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #8c68a6;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Las hace circulares */
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.flecha-izq { left: 20px; }
.flecha-der { right: 20px; }

/* Botón flotante turquesa de ¡DONA! */
.btn-dona {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: #38b2a5; /* Turquesa */
    color: white;
    text-decoration: none;
    padding: 10px 25px;
    font-weight: bold;
    border-radius: 20px; /* Bordes redondeados */
    border: 2px solid white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* =========================================
   8. SECCIÓN CONÓCENOS
   ========================================= */

.seccion-conocenos {
    padding: 80px 20px; /* Mucho espacio arriba y abajo para que respire el diseño */
    background-color: #ffffff;
}

.contenedor-conocenos {
    max-width: 1100px; /* Ancho máximo para que no se estire demasiado en pantallas gigantes */
    margin: 0 auto; /* Esto centra todo el bloque */
    display: flex;
    align-items: center; /* Centra la imagen y el texto verticalmente */
    gap: 60px; /* Separa la imagen del texto de forma elegante */
}

/* --- Mitad de la Imagen --- */
.conocenos-imagen {
    flex: 1; /* Ocupa el 50% del espacio */
}

.conocenos-imagen img {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Aquí está el toque moderno: bordes redondeados */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra difuminada muy elegante */
    transition: transform 0.3s ease; /* Prepara la imagen para un efecto */
}

/* Efecto sutil al pasar el mouse por la imagen */
.conocenos-imagen img:hover {
    transform: translateY(-5px); /* Se levanta un poquito */
}

/* --- Mitad del Texto --- */
.conocenos-texto {
    flex: 1; /* Ocupa el otro 50% del espacio */
}

.conocenos-texto h2 {
    font-size: 38px;
    color: #222;
    margin-bottom: 20px;
    line-height: 1.2; /* Espaciado entre líneas del título */
}

.conocenos-texto p {
    font-size: 16px;
    color: #555;
    line-height: 1.7; /* Hace el texto mucho más fácil de leer */
    margin-bottom: 30px;
}

/* --- Botón Modernizado --- */
.btn-primario {
    display: inline-block;
    background-color: #1a5b9e; /* El azul GENDES */
    color: white;
    padding: 12px 32px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px; /* Bordes redondeados en el botón */
    box-shadow: 0 4px 10px rgba(26, 91, 158, 0.3); /* Sombra que combina con el botón */
    transition: all 0.3s ease;
}

.btn-primario:hover {
    background-color: #124375; /* Se oscurece al pasar el mouse */
    transform: translateY(-3px); /* Da la sensación de ser un botón real que se aprieta */
    box-shadow: 0 6px 15px rgba(26, 91, 158, 0.4);
}

/* --- RESPONSIVO (Para Celulares) --- */
@media (max-width: 768px) {
    .contenedor-conocenos {
        flex-direction: column; /* Pone los elementos uno debajo del otro */
        gap: 30px;
    }
    .conocenos-texto h2 {
        font-size: 28px; /* Achica un poco el título en celular */
    }
}

/* =========================================
   9. SECCIÓN HOMBRES TRABAJANDO(SE)
   ========================================= */

.seccion-programa {
    padding: 80px 20px;
    background-color: #f9f9fc; /* Un gris muuuy suave para diferenciar secciones */
}

.contenedor-programa {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
}

/* --- Lado Izquierdo (Textos) --- */
.programa-encabezado {
    flex: 1; /* Ocupa un 35-40% del espacio */
}

.programa-encabezado h2 {
    font-size: 42px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.1;
}

.programa-encabezado p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.btn-secundario {
    display: inline-block;
    background-color: #8c68a6; /* Morado GENDES */
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-secundario:hover {
    background-color: #724e8c;
    box-shadow: 0 4px 12px rgba(140, 104, 166, 0.4);
    transform: translateY(-2px);
}

/* --- Lado Derecho (Tarjetas con iconos) --- */
.programa-tarjetas {
    flex: 2; /* Ocupa más espacio que los textos */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas exactas */
    gap: 20px; /* Separación entre tarjetas */
}

.tarjeta {
    background-color: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Sombra súper suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el ratón por las tarjetas */
.tarjeta:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

/* Estilos de los Iconos SVG */
.icono-contenedor {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    background-color: #f0e6f5; /* Fondo morado clarito para el icono */
    border-radius: 50%; /* Lo hace un círculo perfecto */
    display: flex;
    justify-content: center;
    align-items: center;
}

.icono-contenedor svg {
    width: 30px;
    height: 30px;
    color: #8c68a6; /* Color de la línea del icono */
}

.tarjeta h4 {
    font-size: 15px;
    color: #333;
    margin-bottom: 15px;
}

.tarjeta p {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.5;
}

.tarjeta .texto-chico {
    font-size: 12px;
    color: #888;
}

/* --- RESPONSIVO (Para Celulares) --- */
@media (max-width: 900px) {
    .contenedor-programa {
        flex-direction: column; /* Apila el título y las tarjetas */
        text-align: center;
    }
    .programa-tarjetas {
        grid-template-columns: 1fr; /* Pone las 3 tarjetas en una sola columna hacia abajo */
        width: 100%;
    }
}

/* =========================================
   10. SECCIÓN DONACIONES (Llamado a la acción)
   ========================================= */

.seccion-donaciones {
    position: relative;
    width: 100%;
    /* Asegúrate de guardar la foto de los niños en tu carpeta 'img' con este nombre */
    background-image: url('img/foto-donaciones.jpg'); 
    background-size: cover;
    background-position: center;
    /* ¡Aquí está el truco Parallax! */
    background-attachment: fixed; 
}

/* El degradado sobre la imagen para que el texto blanco resalte */
.donaciones-overlay {
    /* Mezclamos teal y morado oscuro de tu marca al 90% de opacidad */
    background: linear-gradient(135deg, rgba(56, 178, 165, 0.9) 0%, rgba(114, 78, 140, 0.9) 100%);
    padding: 120px 20px; /* Mucho espacio para que se vea imponente */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.contenedor-donaciones {
    max-width: 850px;
    color: #ffffff;
}

.contenedor-donaciones h2 {
    font-size: 50px;
    margin-bottom: 25px;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* Sombrilla para que no se pierda en fondos claros */
}

.contenedor-donaciones p {
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 45px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* Botón de donación IMPACTANTE */
.btn-donar-grande {
    display: inline-block;
    background-color: #f5a623; /* Naranja/Dorado que llama a la acción */
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    padding: 18px 50px;
    border-radius: 50px; /* Botón en forma de píldora (muy moderno) */
    box-shadow: 0 10px 25px rgba(245, 166, 35, 0.4); /* Resplandor naranja */
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Preparamos el corazón para la animación */
.btn-donar-grande .corazon {
    margin-left: 10px;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Efecto al pasar el ratón por el botón */
.btn-donar-grande:hover {
    background-color: #ffb84d; /* Se aclara un poco */
    transform: translateY(-5px) scale(1.05); /* Flota y crece ligeramente */
    box-shadow: 0 15px 35px rgba(245, 166, 35, 0.6);
}

/* El corazón "late" al pasar el ratón */
.btn-donar-grande:hover .corazon {
    transform: scale(1.4);
    color: #ff4d4d; /* Se pone rojo */
}

/* --- RESPONSIVO (Para Celulares) --- */
@media (max-width: 768px) {
    .donaciones-overlay {
        padding: 80px 20px; /* Reducimos el espacio en móvil */
        background-attachment: scroll; /* En celulares es mejor quitar el parallax por rendimiento */
    }
    .contenedor-donaciones h2 {
        font-size: 36px;
    }
    .contenedor-donaciones p {
        font-size: 18px;
    }
    .btn-donar-grande {
        font-size: 18px;
        padding: 15px 35px;
    }
}

/* =========================================
   11. SECCIÓN L�NEA GENDES (CORREGIDA Y DOMADA)
   ========================================= */

.seccion-linea-ayuda {
    background-color: #0a0a0a; /* Casi negro puro */
    color: #ffffff;
    /* ¡CAMBIO! Agregamos padding vertical para dar espacio y contener visualmente */
    padding: 80px 0;
}

.contenedor-linea {
    display: flex;
    align-items: center; /* Centra todo verticalmente */
    /* ¡CAMBIO! Limitamos la altura del contenedor flexbox para contener la imagen */
    max-height: 600px; /* Prueba con un valor que te guste (p.ej., 500px o 600px) */
    /* ¡CAMBIO! Limitamos el ancho para que sea cohesivo con el resto del sitio */
    max-width: 1200px;
    margin: 0 auto;
    /* ¡NUEVO! Overflow hidden para asegurar que NADA se salga */
    overflow: hidden;
    /* Aseguramos que los flex items tengan base 0 para el flex-grow */
    width: 100%;
}

/* --- Mitad de la Imagen --- */
.linea-imagen {
    flex: 1; /* Ocupa el 50% */
    /* Aseguramos que este flex item ocupe toda la altura limitada */
    height: 100%;
}

.linea-imagen img {
    width: 100%;
    /* ¡CAMBIO! height 100% ahora se refiere a la altura limitada del flex item */
    height: 100%;
    object-fit: cover; /* ¡CLAVE! Recorta la imagen elegantemente para que quepa sin estirarse */
    display: block;
    /* Efecto Pro: Un gradiente que desvanece el borde derecho de la imagen hacia el negro */
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

/* --- Mitad del Texto --- */
.linea-texto {
    flex: 1; /* Ocupa el otro 50% */
    padding: 60px 50px; /* Ajustamos el padding */
    max-width: 700px;
    /* Aseguramos que este flex item ocupe toda la altura */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical del texto */
}

/* (El resto de las reglas del texto y botón se mantienen igual) */
.linea-texto h2 {
    font-size: 40px;
    margin-bottom: 25px;
    color: #ffffff;
    letter-spacing: 1px;
}

.linea-texto p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #d1d1d1; /* Gris claro para que la lectura descanse */
}

.linea-texto p strong {
    color: #ffffff;
}

.destacado-blanco {
    color: #ffffff !important;
    font-weight: 500;
    margin-bottom: 40px !important; /* Más espacio antes del botón */
}

/* --- Botón Naranja con Pulso --- */
.btn-llamar {
    display: inline-flex;
    align-items: center;
    background-color: #ff8c00; /* Naranja de alerta/ayuda */
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    text-decoration: none;
    padding: 16px 35px;
    border-radius: 6px;
    transition: all 0.3s ease;
    /* Llamamos a nuestra animación creada abajo */
    animation: latido 2s infinite; 
}

.btn-llamar .icono-tel {
    width: 24px;
    height: 24px;
    margin-right: 12px; /* Separa el icono del número */
}

.btn-llamar:hover {
    background-color: #ffa533; /* Naranja más clarito al pasar el mouse */
    animation: none; /* Detenemos el latido para que el usuario pueda hacer clic en paz */
    transform: scale(1.05); /* Lo agrandamos un poquito */
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.6);
}

/* Animación personalizada para que el botón "lata" */
@keyframes latido {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.7); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(255, 140, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); }
}

/* --- RESPONSIVO (Para Celulares) --- */
@media (max-width: 900px) {
    .contenedor-linea {
        flex-direction: column; /* Apila la imagen arriba y el texto abajo */
        max-height: none; /* Quitamos el límite de altura en móvil */
        height: auto;
    }
    .seccion-linea-ayuda {
        padding: 80px 20px;
    }
    .linea-imagen img {
        /* Cambiamos el desvanecido hacia abajo en celulares */
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
        height: 300px; /* Altura fija razonable para la imagen en móvil */
    }
    .linea-texto {
        padding: 30px 20px;
        text-align: center;
    }
}

/* =========================================
   12. SECCIÓN NUESTRAS PUBLICACIONES
   ========================================= */

.seccion-publicaciones {
    padding: 100px 20px;
    background-color: #ffffff;
}

.contenedor-publicaciones {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Cabecera --- */
.cabecera-publicaciones {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cabecera-publicaciones h2 {
    font-size: 42px;
    color: #1a5b9e; /* Azul GENDES */
    margin-bottom: 20px;
}

.cabecera-publicaciones p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
}

/* --- Cuadrícula de Publicaciones --- */
.grid-publicaciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 40px; /* Separación amplia y elegante */
    margin-bottom: 60px;
}

/* --- Tarjeta Individual --- */
.tarjeta-pub {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden; /* Clave para que la imagen no se salga al hacer zoom */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra difuminada */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tarjeta-pub:hover {
    transform: translateY(-10px); /* Flota hacia arriba */
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* Contenedor de la foto de portada */
.imagen-pub {
    position: relative;
    width: 100%;
    height: 260px; /* Altura de la portada */
    overflow: hidden;
}

.imagen-pub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* Transición suave para el zoom */
}

/* Efecto mágico de zoom en la foto al pasar el ratón por la tarjeta */
.tarjeta-pub:hover .imagen-pub img {
    transform: scale(1.08); /* Crece un 8% */
}

/* Etiqueta flotante (Ej. "Manual", "Investigación") */
.etiqueta-pub {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #8c68a6; /* Morado GENDES */
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Textos de la tarjeta */
.contenido-pub {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Hace que el contenido ocupe el resto del espacio y empuje el enlace abajo */
}

.contenido-pub h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.3;
}

.contenido-pub p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Enlace "Leer documento" */
.enlace-leer {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #1a5b9e;
    text-decoration: none;
    transition: color 0.3s ease;
}

.enlace-leer .flechita {
    margin-left: 8px;
    transition: transform 0.3s ease; /* Transición para mover la flecha */
}

.tarjeta-pub:hover .enlace-leer {
    color: #d18a1a; /* Cambia a dorado/naranja al pasar el ratón */
}

.tarjeta-pub:hover .enlace-leer .flechita {
    transform: translateX(8px); /* La flecha se mueve a la derecha como invitando a entrar */
}

/* --- Botón Central --- */
.boton-contenedor-centro {
    text-align: center;
}

.btn-ver-todas {
    display: inline-block;
    background-color: transparent;
    color: #1a5b9e;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    padding: 15px 40px;
    border: 2px solid #1a5b9e; /* Botón estilo "Outline" */
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-ver-todas:hover {
    background-color: #1a5b9e;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(26, 91, 158, 0.2);
    transform: translateY(-3px);
}

/* --- RESPONSIVO (Para Celulares y Tablets) --- */
@media (max-width: 900px) {
    .grid-publicaciones {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }
}

@media (max-width: 600px) {
    .grid-publicaciones {
        grid-template-columns: 1fr; /* 1 sola columna en celulares */
    }
    .cabecera-publicaciones h2 {
        font-size: 32px;
    }
}

/* =========================================
   13. FOOTER PRINCIPAL
   ========================================= */

.footer-principal {
    background-color: #1b1425; /* Fondo oscuro y elegante */
    color: #e0dced; /* Texto gris/morado clarito */
    padding-top: 80px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.contenedor-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 1fr; /* 4 columnas (el boletín es un poco más ancho) */
    gap: 40px;
    margin-bottom: 60px;
}

.footer-columna h4 {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Pequeña línea decorativa debajo de los títulos */
.footer-columna h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #ff8c00; /* Toque naranja */
    border-radius: 2px;
}

/* --- Menús de Enlaces --- */
.footer-menu {
    list-style: none;
    padding: 0;
}

.footer-menu li {
    margin-bottom: 12px;
}

.footer-menu a {
    color: #b8b1c9;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Efecto al pasar el mouse por los enlaces */
.footer-menu a:hover {
    color: #ff8c00;
    transform: translateX(5px); /* Se mueve un poquito a la derecha */
}

/* --- Boletín --- */
.columna-boletin p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #b8b1c9;
}

.formulario-boletin {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.formulario-boletin input {
    padding: 12px 15px;
    border: none;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
    color: #ffffff;
    font-size: 15px;
    outline: none;
    transition: background-color 0.3s ease;
}

.formulario-boletin input::placeholder {
    color: #8c82a6;
}

.formulario-boletin input:focus {
    background-color: rgba(255, 255, 255, 0.2);
}

.formulario-boletin button {
    background-color: #8c68a6; /* Morado claro GENDES */
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.formulario-boletin button:hover {
    background-color: #a482bd;
    transform: translateY(-2px);
}

/* --- Redes Sociales y Logos --- */
.iconos-redes {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.iconos-redes a {
    color: #b8b1c9;
    transition: all 0.3s ease;
}

.iconos-redes a svg {
    width: 24px;
    height: 24px;
}

.iconos-redes a:hover {
    color: #ffffff;
    transform: scale(1.15); /* Crecen al pasar el ratón */
}

.logo-footer img {
    max-width: 150px;
    filter: brightness(0) invert(1); /* Truco Pro: Vuelve blanco el logo de Cemefi si es negro */
    opacity: 0.8;
}

/* --- Barra de Créditos Inferior --- */
.footer-creditos {
    background-color: #120d1a; /* Un tono aún más oscuro para el fondo final */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.creditos-contenido {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; /* Separa los textos a los extremos */
    align-items: center;
    font-size: 14px;
    color: #8c82a6;
}

.firma-dev {
    color: #ff8c00;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* --- RESPONSIVO (Para Celulares y Tablets) --- */
@media (max-width: 900px) {
    .contenedor-footer {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }
}

@media (max-width: 600px) {
    .contenedor-footer {
        grid-template-columns: 1fr; /* 1 columna en celulares */
        gap: 30px;
    }
    .creditos-contenido {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* =========================================
   14. P�GINA INTERNA: CONÓCENOS (Misión y Visión)
   ========================================= */

/* Damos un espacio extra para que el menú no tape el contenido */
.pagina-interna {
    padding-top: 40px; 
    background-color: #fcfbfe; /* Un fondo con un toque micro-morado muy elegante */
}

.seccion-mision-vision {
    padding: 60px 20px 100px 20px;
}

.contenedor-mv {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 70px; /* Gran separación para que respire el diseño */
}

/* --- Lado Izquierdo: Textos --- */
.mv-textos {
    flex: 1.2; /* Toma un poquito más de la mitad del espacio */
}

.titulo-mv {
    font-size: 45px;
    color: #222;
    margin-bottom: 40px;
    line-height: 1.2;
}

.titulo-mv .resalte-azul {
    color: #1a5b9e; /* Destacamos una parte del título */
}

/* Las Tarjetas de Misión y Visión */
.tarjeta-mv {
    display: flex;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
    border-left: 5px solid #8c68a6; /* Una línea lateral morada muy corporativa */
}

.tarjeta-mv:hover {
    transform: translateX(10px); /* Se mueve ligeramente a la derecha al pasar el ratón */
}

.tarjeta-mv:last-child {
    border-left-color: #ff8c00; /* La tarjeta de visión le ponemos línea naranja para diferenciar */
}

/* Iconos de las tarjetas */
.icono-mv {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: #f4eff7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 25px;
    color: #8c68a6;
}

.icono-vision {
    background-color: #fff4e6;
    color: #ff8c00;
}

.icono-mv svg {
    width: 30px;
    height: 30px;
}

/* Textos dentro de las tarjetas */
.texto-mv h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.texto-mv p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

/* --- Lado Derecho: Imagen con Diseño --- */
.mv-imagen-contenedor {
    flex: 1; /* Toma el resto del espacio */
    position: relative;
    /* Le damos altura para que la imagen se acomode padre */
    min-height: 500px; 
}

/* El cuadro decorativo que va detrás de la foto */
.cuadro-decorativo {
    position: absolute;
    top: 30px;
    right: -30px; /* Lo desfasamos hacia la derecha */
    width: 100%;
    height: 100%;
    border: 3px solid #1a5b9e; /* Borde azul */
    border-radius: 20px;
    z-index: 1;
}

.img-mv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    z-index: 2; /* Para que la foto quede encima del cuadro */
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* --- RESPONSIVO (Móviles y Tablets) --- */
@media (max-width: 950px) {
    .contenedor-mv {
        flex-direction: column;
    }
    .cuadro-decorativo {
        right: 15px;
        top: 15px;
    }
    .mv-imagen-contenedor {
        width: 100%;
        min-height: 400px;
        margin-top: 30px;
        padding-right: 20px; /* Espacio para el cuadro decorativo en móvil */
    }
    .titulo-mv {
        font-size: 34px;
        text-align: center;
    }
    .tarjeta-mv {
        flex-direction: column; /* Apilamos el icono arriba del texto en celulares */
        text-align: center;
        align-items: center;
    }
    .icono-mv {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* =========================================
   15. SECCIÓN EQUIPO (Conócenos)
   ========================================= */

.seccion-equipo {
    padding: 80px 20px;
    background-color: #ffffff;
}

.contenedor-equipo {
    max-width: 1200px;
    margin: 0 auto;
}

.cabecera-equipo {
    text-align: center;
    margin-bottom: 60px;
}

.cabecera-equipo h2 {
    font-size: 42px;
    color: #333;
    margin-bottom: 10px;
}

.cabecera-equipo p {
    font-size: 18px;
    color: #666;
}

/* La cuadrícula inteligente: crea columnas automáticamente dependiendo del tamaño de la pantalla */
.grid-equipo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

/* --- Tarjeta Individual del Colaborador --- */
.tarjeta-colaborador {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra súper sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0; /* Un borde gris muy clarito */
}

.tarjeta-colaborador:hover {
    transform: translateY(-8px); /* Se levanta un poco */
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

/* Contenedor de la foto */
.colaborador-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Obliga a que la foto sea un cuadrado perfecto */
    overflow: hidden;
    background-color: #f5f5f5;
}

.colaborador-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; /* Enfoca las caras por si la foto es muy alta */
    /* EL TRUCO PRO: Blanco y negro por defecto */
    filter: grayscale(100%); 
    transition: filter 0.5s ease, transform 0.5s ease;
}

/* Al pasar el ratón: Vuelve a color y hace un micro-zoom */
.tarjeta-colaborador:hover .colaborador-img img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Información del colaborador */
.colaborador-info {
    padding: 20px;
}

.colaborador-info h4 {
    font-size: 18px;
    color: #222;
    margin-bottom: 5px;
}

.puesto {
    font-size: 14px;
    color: #1a5b9e; /* Azul GENDES para el puesto */
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Enlace de correo electrónico */
.email-colaborador {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
    word-break: break-all; /* Evita que correos largos rompan la tarjeta */
}

.email-colaborador svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
    color: #8c68a6; /* Morado para el icono de sobre */
}

.email-colaborador:hover {
    color: #8c68a6;
    text-decoration: underline;
}

/* =========================================
   16. SECCIÓN INFORMES ANUALES (Transparencia)
   ========================================= */

.seccion-informes {
    padding: 80px 20px 100px 20px;
    background-color: #f7f8fa; /* Fondo gris súper sutil */
}

.contenedor-informes {
    max-width: 1200px;
    margin: 0 auto;
}

.cabecera-informes {
    text-align: center;
    margin-bottom: 50px;
}

.cabecera-informes h2 {
    font-size: 38px;
    color: #222;
    margin-bottom: 15px;
}

.cabecera-informes p {
    font-size: 18px;
    color: #666;
}

/* Cuadrícula para las tarjetas de informes */
.grid-informes {
    display: grid;
    /* Esto crea columnas que se adaptan solas (mínimo 180px de ancho) */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Diseño de la tarjeta (Enlace) */
.tarjeta-informe {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    text-decoration: none; /* Quitamos el subrayado del enlace */
    border: 1px solid #eaeaea; /* Borde muy discreto */
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

/* Textos dentro de la tarjeta */
.anio-informe {
    font-size: 36px;
    font-weight: 800;
    color: #1a5b9e; /* Azul corporativo */
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.texto-informe {
    font-size: 14px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Icono de descarga SVG */
.icono-descarga {
    width: 40px;
    height: 40px;
    background-color: #f0f4f8; /* Un circulito azul muy claro */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1a5b9e;
    transition: all 0.3s ease;
}

.icono-descarga svg {
    width: 20px;
    height: 20px;
}

/* LA MAGIA DEL HOVER (Al pasar el ratón) */
.tarjeta-informe:hover {
    transform: translateY(-8px); /* La tarjeta flota */
    box-shadow: 0 15px 30px rgba(26, 91, 158, 0.15); /* Sombra azulada */
    border-color: #1a5b9e; /* El borde se pinta de azul */
}

.tarjeta-informe:hover .anio-informe {
    color: #ff8c00; /* El año cambia a Naranja para llamar la atención */
}

.tarjeta-informe:hover .icono-descarga {
    background-color: #1a5b9e; /* El círculo se rellena de azul */
    color: #ffffff; /* El icono se vuelve blanco */
    transform: scale(1.1); /* El circulito crece un poco */
}

/* --- RESPONSIVO --- */
@media (max-width: 600px) {
    .grid-informes {
        grid-template-columns: repeat(2, 1fr); /* En celulares forzamos 2 columnas para que no queden muy gigantes */
        gap: 15px;
    }
    .anio-informe {
        font-size: 28px;
    }
    .tarjeta-informe {
        padding: 20px 15px;
    }
}

/* =========================================
   17. P�GINA: NUESTRA LABOR (Sección Atención)
   ========================================= */

.seccion-labor-hero {
    padding: 80px 20px;
    background-color: #f4f5f7; /* Fondo clarito para resaltar la tarjeta principal */
    display: flex;
    justify-content: center;
}

/* La Macro-Tarjeta Flotante */
.contenedor-labor-tarjeta {
    display: flex;
    max-width: 1200px;
    width: 100%;
    background-color: #1a5b9e; /* Azul profundo GENDES */
    border-radius: 20px;
    overflow: hidden; /* Clave: hace que la imagen respete las esquinas redondeadas */
    box-shadow: 0 25px 50px rgba(26, 91, 158, 0.2); /* Sombra azulada espectacular */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Efecto al pasar el ratón sobre toda la tarjeta */
.contenedor-labor-tarjeta:hover {
    transform: translateY(-8px);
    box-shadow: 0 35px 60px rgba(26, 91, 158, 0.35);
}

/* --- Mitad de la imagen --- */
.labor-imagen {
    flex: 1; /* Ocupa el 50% */
    position: relative;
    overflow: hidden;
}

.labor-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Micro-zoom a la imagen al pasar el ratón por la tarjeta */
.contenedor-labor-tarjeta:hover .labor-imagen img {
    transform: scale(1.06);
}

/* --- Mitad del texto --- */
.labor-contenido {
    flex: 1; /* Ocupa el otro 50% */
    padding: 70px 60px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.labor-contenido h2 {
    font-size: 40px;
    margin-bottom: 25px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.labor-contenido p {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #d1e2f3; /* Un blanco azulado para que la lectura sea suave */
}

.labor-contenido p strong {
    color: #ffffff;
}

/* Botón Blanco Invertido */
.btn-blanco {
    align-self: flex-start; /* Evita que el botón se estire a todo lo ancho */
    margin-top: 20px;
    background-color: #ffffff;
    color: #8c68a6; /* Texto morado GENDES */
    font-weight: bold;
    font-size: 16px;
    padding: 16px 35px;
    border-radius: 50px; /* Forma de píldora */
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.btn-blanco:hover {
    background-color: #f4eff7;
    color: #724e8c;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

/* --- RESPONSIVO (Celulares y Tablets) --- */
@media (max-width: 950px) {
    .contenedor-labor-tarjeta {
        flex-direction: column; /* Apila la imagen arriba y el texto abajo */
    }
    .labor-imagen {
        min-height: 350px; /* Le da una altura fija a la imagen en móvil */
    }
    .labor-contenido {
        padding: 40px 30px;
    }
    .labor-contenido h2 {
        font-size: 32px;
    }
}

/* =========================================
   18. P�GINA: NUESTRA LABOR (Sección Prevención)
   ========================================= */

.seccion-prevencion {
    padding: 100px 20px;
    background-color: #ffffff; /* Fondo blanco limpio para dar respiro */
}

.contenedor-prevencion {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px; /* Mucho espacio entre el texto y la foto */
}

/* --- Lado Izquierdo: Textos --- */
.prevencion-textos {
    flex: 1;
}

.prevencion-textos h2 {
    font-size: 42px;
    color: #222222;
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.prevencion-textos p {
    font-size: 16px;
    color: #555555;
    line-height: 1.8; /* Texto muy fácil de leer */
    margin-bottom: 25px;
}

/* Botón Morado con flecha animada */
.btn-morado-solido {
    display: inline-flex;
    align-items: center;
    background-color: #8c68a6; /* Morado GENDES */
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    padding: 14px 35px;
    border-radius: 6px; /* Bordes ligeramente redondeados, más serio */
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-morado-solido .flecha-btn {
    margin-left: 10px;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.btn-morado-solido:hover {
    background-color: #724e8c;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(140, 104, 166, 0.3);
}

.btn-morado-solido:hover .flecha-btn {
    transform: translateX(5px); /* La flechita empuja hacia la derecha */
}

/* --- Lado Derecho: Imagen Editorial --- */
.prevencion-imagen-wrapper {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Cuadro morado claro que va detrás de la foto */
.fondo-decorativo-morado {
    position: absolute;
    top: 25px;
    left: -25px; /* Se desfasa hacia la izquierda y abajo */
    width: 100%;
    height: 100%;
    background-color: #f4eff7; /* Morado muy clarito */
    border-radius: 12px;
    z-index: -1; /* Lo manda detrás de la foto */
    transition: transform 0.4s ease;
}

.img-prevencion {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Sombra elegante */
    display: block;
    transition: transform 0.4s ease;
}

/* Efecto al pasar el ratón por la foto */
.prevencion-imagen-wrapper:hover .img-prevencion {
    transform: translate(5px, -5px); /* La foto se mueve sutilmente */
}

.prevencion-imagen-wrapper:hover .fondo-decorativo-morado {
    transform: translate(-5px, 5px); /* El fondo se mueve al lado contrario (Efecto parallax falso) */
}

/* --- RESPONSIVO (Celulares y Tablets) --- */
@media (max-width: 950px) {
    .contenedor-prevencion {
        flex-direction: column-reverse; /* En celulares pasamos la foto arriba y el texto abajo */
        gap: 50px;
    }
    .fondo-decorativo-morado {
        left: 15px; /* Ajustamos el desfase para pantallas pequeñas */
        top: 15px;
    }
    .prevencion-textos {
        text-align: center;
    }
    .prevencion-textos h2 {
        font-size: 34px;
    }
}

/* =========================================
   19. P�GINA: NUESTRA LABOR (Sección Formación)
   ========================================= */

.seccion-formacion {
    padding: 100px 20px;
    background-color: #1e1e24; /* Un tono carbón/grafito profundo, más elegante que el negro puro */
    color: #ffffff;
}

.contenedor-formacion {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px; /* Separación amplia */
}

/* --- Lado Izquierdo: Imagen --- */
.formacion-imagen-wrapper {
    flex: 1;
    position: relative;
    /* Le damos un poco de margen abajo e izquierda para que el efecto de sombra quepa bien */
    margin-bottom: 20px; 
    margin-left: 20px;
}

.img-formacion {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    /* EL TOQUE PRO: Una sombra sólida desfasada en morado GENDES */
    box-shadow: -20px 20px 0px rgba(140, 104, 166, 0.8); 
    display: block;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Efecto al pasar el ratón: La foto se empuja hacia su propia sombra */
.formacion-imagen-wrapper:hover .img-formacion {
    transform: translate(-5px, 5px);
    box-shadow: -10px 10px 0px rgba(140, 104, 166, 0.8);
}

/* --- Lado Derecho: Textos --- */
.formacion-textos {
    flex: 1;
}

.etiqueta-pequena {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ff8c00; /* Naranja para contrastar con el fondo oscuro */
    font-weight: 700;
    margin-bottom: 15px;
}

.formacion-textos h2 {
    font-size: 42px;
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.formacion-textos p {
    font-size: 15px;
    color: #c9c9d1; /* Gris clarito para que no canse la vista */
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Botón Fantasma (Ghost Button) */
.btn-fantasma-blanco {
    display: inline-block;
    background-color: transparent;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 35px;
    border: 2px solid #ffffff;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 15px;
}

/* Al pasar el ratón, se rellena de blanco y el texto se vuelve morado */
.btn-fantasma-blanco:hover {
    background-color: #ffffff;
    color: #1e1e24; /* Color del fondo oscuro */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

/* --- RESPONSIVO (Celulares y Tablets) --- */
@media (max-width: 950px) {
    .contenedor-formacion {
        /* Volvemos a apilar: en móvil siempre es mejor foto arriba, texto abajo */
        flex-direction: column; 
        gap: 60px;
    }
    .formacion-imagen-wrapper {
        margin-left: 0;
        margin-right: 20px; /* Ajustamos el margen para que no se salga la sombra */
        width: 90%;
    }
    .img-formacion {
        box-shadow: 15px 15px 0px rgba(140, 104, 166, 0.8); /* Cambiamos la dirección de la sombra para móvil */
    }
    .formacion-imagen-wrapper:hover .img-formacion {
        transform: translate(5px, 5px);
        box-shadow: 5px 5px 0px rgba(140, 104, 166, 0.8);
    }
    .formacion-textos {
        text-align: center;
    }
    .formacion-textos h2 {
        font-size: 34px;
    }
}

/* =========================================
   20. P�GINA: NUESTRA LABOR (Sección Investigación)
   ========================================= */

.seccion-investigacion {
    padding: 100px 20px;
    background-color: #fcfbfe; /* Un lavanda/blanco muuuy sutil para dar luz */
}

.contenedor-investigacion {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 70px;
}

/* --- Lado Izquierdo: Textos y Botones --- */
.investigacion-textos {
    flex: 1.1; /* Toma un poquito más de espacio que la imagen para acomodar bien los textos */
}

.investigacion-textos h2 {
    font-size: 42px;
    color: #333333;
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.investigacion-textos p {
    font-size: 15.5px;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Zona de botones */
.acciones-investigacion {
    margin-top: 35px;
}

.destacado-investigacion {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e5e0eb; /* Una línea divisoria sutil */
}

.destacado-investigacion p {
    font-size: 14px;
    color: #888888;
    margin-bottom: 15px;
    font-style: italic;
}

/* Botón Amarillo Especial */
.btn-amarillo-brillante {
    display: inline-block;
    background-color: #ffb700; /* Amarillo/Dorado vibrante */
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    padding: 14px 30px;
    border-radius: 6px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(255, 183, 0, 0.3);
}

.btn-amarillo-brillante:hover {
    background-color: #e6a500;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 183, 0, 0.4);
}

/* --- Lado Derecho: Imagen --- */
.investigacion-imagen-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Un resplandor difuminado detrás de los libros para simular "conocimiento" */
.resplandor-fondo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(140, 104, 166, 0.15) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    border-radius: 50%;
}

.img-investigacion {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px; /* Evita que se haga gigante */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12); /* Sombra elegante estilo revista */
    transition: transform 0.5s ease;
}

/* La imagen flota suavemente al pasar el ratón */
.investigacion-imagen-wrapper:hover .img-investigacion {
    transform: translateY(-10px);
}

/* --- RESPONSIVO (Celulares y Tablets) --- */
@media (max-width: 950px) {
    .contenedor-investigacion {
        flex-direction: column; /* Apila todo en móvil */
        gap: 50px;
    }
    .investigacion-textos {
        text-align: center;
    }
    .investigacion-textos h2 {
        font-size: 34px;
    }
    .acciones-investigacion {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* =========================================
   21. P�GINA: NUESTRA LABOR (Sección Incidencia)
   ========================================= */

.seccion-incidencia {
    padding: 100px 20px;
    background-color: #ffffff; /* Fondo blanco puro */
}

.contenedor-incidencia {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* No usamos gap aquí porque vamos a superponer los elementos */
}

/* --- Lado Izquierdo: Imagen --- */
.incidencia-imagen-wrapper {
    flex: 1.3; /* Le damos un poco más de ancho a la foto */
    position: relative;
    z-index: 1; /* Se queda en el fondo */
}

.img-incidencia {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    display: block;
    transition: filter 0.4s ease;
}

/* Oscurecemos un micro-tono la foto al pasar el ratón para que la tarjeta resalte más */
.contenedor-incidencia:hover .img-incidencia {
    filter: brightness(0.95); 
}

/* --- Lado Derecho: Tarjeta de Textos --- */
.incidencia-textos-tarjeta {
    flex: 1;
    background-color: #ffffff;
    padding: 50px 40px;
    border-radius: 15px;
    /* EL TRUCO: Jalamos la tarjeta hacia la izquierda para que pise la foto */
    margin-left: -80px; 
    position: relative;
    z-index: 2; /* Para que quede por encima de la foto */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); /* Sombra difuminada para despegarla de la foto */
    border: 1px solid #f0f0f5; /* Borde súper sutil */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Efecto hover en la tarjeta */
.incidencia-textos-tarjeta:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.incidencia-textos-tarjeta h2 {
    font-size: 42px;
    color: #222222;
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.incidencia-textos-tarjeta p {
    font-size: 15.5px;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* --- RESPONSIVO (Celulares y Tablets) --- */
@media (max-width: 950px) {
    .contenedor-incidencia {
        flex-direction: column; /* Apila imagen arriba, tarjeta abajo */
    }
    .incidencia-imagen-wrapper {
        width: 100%;
    }
    .incidencia-textos-tarjeta {
        width: 90%; /* Hace la tarjeta un poco más angosta que la foto */
        margin-left: 0;
        /* En móvil, hacemos que la tarjeta se monte hacia arriba sobre la foto */
        margin-top: -50px; 
        padding: 40px 30px;
        text-align: center;
    }
    .incidencia-textos-tarjeta h2 {
        font-size: 34px;
    }
}

/* =========================================
   22. P�GINA: NUESTRA LABOR (Sección Consultoría)
   ========================================= */

.seccion-consultoria {
    padding: 100px 20px;
    background-color: #f7f8fa; /* Un gris muuuy clarito para que resalte el panel azul */
}

.contenedor-consultoria {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* --- Lado Izquierdo: Textos --- */
.consultoria-textos {
    flex: 1;
    padding-right: 20px;
}

.consultoria-textos h2 {
    font-size: 42px;
    color: #222222;
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.consultoria-textos p {
    font-size: 16px;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* --- Lado Derecho: Panel Azul --- */
.consultoria-panel-azul {
    flex: 1.4; /* Le damos más espacio al bloque azul para acomodar el grid de iconos */
    background-color: #1a5b9e; /* Azul GENDES */
    padding: 50px 40px;
    border-radius: 20px; /* Bordes suaves modernos */
    box-shadow: 0 20px 40px rgba(26, 91, 158, 0.25); /* Sombra elegante */
}

/* Grid de los 4 servicios dentro del panel */
.grid-servicios {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: 40px;
}

/* Cada ítem individual */
.item-servicio {
    display: flex;
    align-items: flex-start; /* Alinea icono y texto arriba */
    gap: 20px;
    transition: transform 0.3s ease;
}

/* Efecto hover sobre el servicio individual */
.item-servicio:hover {
    transform: translateX(5px); /* Se mueve un poquito a la derecha */
}

/* El círculo que envuelve al icono */
.icono-circulo {
    flex-shrink: 0; /* Evita que el círculo se aplaste */
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.15); /* Círculo blanco semitransparente */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.item-servicio:hover .icono-circulo {
    background-color: #ff8c00; /* Se pinta de naranja GENDES al pasar el ratón */
    transform: scale(1.1); /* Crece un 10% */
}

.icono-circulo svg {
    width: 30px;
    height: 30px;
}

/* El texto al lado del icono */
.item-servicio p {
    font-size: 14px;
    color: #dceaf8; /* Texto azul muy claro para contraste */
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s ease;
}

.item-servicio:hover p {
    color: #ffffff; /* Se vuelve blanco puro al pasar el ratón */
}

/* --- RESPONSIVO (Celulares y Tablets) --- */
@media (max-width: 1000px) {
    .contenedor-consultoria {
        flex-direction: column; /* Apila textos arriba, panel azul abajo */
        gap: 50px;
    }
    .consultoria-textos {
        text-align: center;
        padding-right: 0;
    }
}

@media (max-width: 650px) {
    .consultoria-panel-azul {
        padding: 40px 25px;
    }
    .grid-servicios {
        grid-template-columns: 1fr; /* Se hace 1 sola columna hacia abajo en celulares */
        gap: 30px;
    }
}

/* =========================================
   23. P�GINA: CONTACTO
   ========================================= */

/* Header Pequeño e Impactante */
.contacto-header {
    background-color: #1a5b9e; /* Azul GENDES */
    color: white;
    padding: 60px 20px;
    text-align: center;
}

.contenedor-contacto-header h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

.contenedor-contacto-header p {
    font-size: 20px;
    opacity: 0.9;
}

/* Sección de Formulario y Grupos */
.seccion-formulario {
    padding: 80px 20px;
    background-color: #ffffff;
}

.contenedor-formulario {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
}

/* --- Lado Izquierdo: Info de Grupos --- */
.info-grupos {
    flex: 1;
}

.info-grupos h2 {
    font-size: 32px;
    color: #333;
    margin-bottom: 40px;
}

.tarjeta-info-grupo {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.icono-grupo {
    width: 50px;
    height: 50px;
    background-color: #f4eff7;
    color: #8c68a6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    flex-shrink: 0;
}

.icono-grupo svg {
    width: 24px;
    height: 24px;
}

.tarjeta-info-grupo p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 5px;
}

.tarjeta-info-grupo .texto-chico {
    font-size: 13px;
    color: #888;
}

/* --- Lado Derecho: Formulario --- */
.area-formulario {
    flex: 1.5; /* El formulario necesita más espacio */
}

/* Banner morado de teléfono */
.banner-telefono {
    background-color: #8c68a6; /* Morado GENDES */
    color: white;
    text-align: center;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(140, 104, 166, 0.2);
}

.banner-telefono p {
    margin-bottom: 5px;
    font-size: 16px;
}

/* Estilos del Formulario */
.formulario-contacto {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fila-inputs {
    display: flex;
    gap: 20px;
}

.grupo-input {
    flex: 1;
}

/* Diseño de los inputs (cajas de texto) */
.formulario-contacto input,
.formulario-contacto select,
.formulario-contacto textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    color: #333;
    background-color: #fafafa;
    transition: all 0.3s ease;
}

/* Efecto al escribir o seleccionar (Foco) */
.formulario-contacto input:focus,
.formulario-contacto select:focus,
.formulario-contacto textarea:focus {
    outline: none;
    border-color: #1a5b9e; /* Borde azul */
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(26, 91, 158, 0.1); /* Resplandor suave */
}

.formulario-contacto select {
    cursor: pointer;
    color: #666; /* Un poco más claro por defecto */
}

/* Botón de enviar */
.btn-enviar-form {
    align-self: flex-end; /* Lo alinea a la derecha */
    background-color: #1a5b9e; /* Azul GENDES */
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-enviar-form:hover {
    background-color: #124375;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26, 91, 158, 0.3);
}

/* Sección del Mapa Ocupando todo el ancho */
.seccion-mapa {
    width: 100%;
    /* Quitamos cualquier margen/padding para que el mapa toque los bordes */
    line-height: 0; /* Quita el espacio fantasma debajo del iframe */
}

/* --- RESPONSIVO --- */
@media (max-width: 900px) {
    .contenedor-formulario {
        flex-direction: column; /* Pone info arriba y formulario abajo */
    }
    .fila-inputs {
        flex-direction: column; /* Los campos de nombre/apellido se ponen uno sobre otro */
        gap: 20px;
    }
    .btn-enviar-form {
        width: 100%; /* Botón ancho en móviles */
    }
}

/* =========================================
   24. P�GINA: PUBLICACIONES (Biblioteca Pro)
   ========================================= */

.publicaciones-header {
    background-color: #f7f8fa; /* Fondo gris sutil para dar respiro visual */
    padding: 80px 20px;
    text-align: center;
}

.contenedor-pub-header {
    max-width: 800px;
    margin: 0 auto;
}

.contenedor-pub-header h1 {
    font-size: 42px;
    color: #333333;
    margin-bottom: 20px;
}

.contenedor-pub-header p {
    font-size: 18px;
    color: #666666;
    line-height: 1.6;
}

.seccion-biblioteca {
    padding: 80px 20px 100px 20px;
    background-color: #ffffff;
}

.contenedor-biblioteca {
    max-width: 1200px;
    margin: 0 auto;
}

/* Cuadrícula para las tarjetas editoriales */
.grid-biblioteca {
    display: grid;
    /* Esto crea 3 columnas automáticamente y se adapta en tablets */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* --- Tarjeta Editorial de Publicación --- */
.tarjeta-publicacion {
    position: relative;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden; /* CLAVE para el efecto hover */
    box-shadow: 0 5px 20px rgba(0,0,0,0.06); /* Sombra suave flotante */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-publicacion:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* Contenedor de la foto de portada */
.portada-wrapper {
    width: 100%;
    /* Altura fija de portada para que todo el grid sea uniforme */
    aspect-ratio: 3 / 4; 
    overflow: hidden;
}

.img-portada {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

/* Efecto hover: Micro-zoom a la portada */
.tarjeta-publicacion:hover .img-portada {
    transform: scale(1.06);
}

/* --- El Efecto Hover de Título Deslizante --- */
.hover-publicacion {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(140, 104, 166, 0.1) 0%, rgba(26, 91, 158, 0.95) 100%);
    color: white;
    padding: 30px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-start; /* Alinea el texto y botón a la izquierda */
    transition: bottom 0.4s ease;
    z-index: 2;
}

.tarjeta-publicacion:hover .hover-publicacion {
    bottom: 0; /* El título se desliza hacia arriba */
}

.hover-publicacion h3 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 15px; /* Le da espacio antes del botón */
}

.btn-descarga-hover {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff; /* Botón estilo contorno */
    padding: 8px 25px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Evita que el clic en el botón interfiera con el clic de la tarjeta */
    pointer-events: none; 
}

/* Al pasar el ratón por la tarjeta, el botón brilla */
.tarjeta-publicacion:hover .btn-descarga-hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- ESTILOS DEL MODAL (Ventana Emergente Premium) --- */
.modal-biblioteca {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 20, 37, 0.85); /* Fondo oscuro profundo */
    backdrop-filter: blur(10px); /* Efecto de desenfoque esmerilado moderno */
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0; /* El modal empieza invisible */
    visibility: hidden;
    transition: all 0.4s ease;
}

/* Cuando el modal está abierto */
.modal-abierto {
    opacity: 1;
    visibility: visible;
}

.modal-contenido {
    position: relative;
    max-width: 500px;
    width: 90%;
}

/* Botón Cerrar (X) */
.btn-cerrar-modal {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.3s ease;
}

.btn-cerrar-modal:hover {
    color: #ff8c00; /* Se vuelve naranja al pasar el mouse */
}

.btn-cerrar-modal svg {
    width: 30px;
    height: 30px;
}

/* La tarjeta blanca dentro del modal */
.modal-tarjeta {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.modal-header-tarjeta {
    text-align: center;
    margin-bottom: 30px;
}

.modal-header-tarjeta h3 {
    font-size: 24px;
    color: #333333;
    margin-bottom: 8px;
}

.modal-header-tarjeta p {
    font-size: 15px;
    color: #777777;
}

/* Formulario dentro del modal */
.formulario-modal {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Estilos de los inputs */
.formulario-modal input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    color: #333;
    background-color: #fafafa;
    transition: all 0.3s ease;
}

.formulario-modal input:focus {
    outline: none;
    border-color: #1a5b9e;
    box-shadow: 0 0 0 3px rgba(26, 91, 158, 0.1);
}

/* Botón Descargar con Icono */
.btn-descargar-final {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1a5b9e; /* Azul GENDES */
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    padding: 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-descargar-final:hover {
    background-color: #124375;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26, 91, 158, 0.3);
}

.btn-descargar-final svg {
    width: 18px;
    height: 18px;
    margin-right: 10px; /* Separa el icono del texto */
}

/* --- RESPONSIVO --- */
@media (max-width: 768px) {
    .contenedor-biblioteca {
        padding: 0 15px;
    }
    .grid-biblioteca {
        grid-template-columns: 1fr; /* En móvil, 1 sola columna hacia abajo */
    }
    .modal-tarjeta {
        padding: 30px;
    }
}

/* =========================================
   25. P�GINA: DONACIÓN
   ========================================= */

.fondo-gris-suave {
    background-color: #f4f5f7; /* Un fondo gris claro ayuda a que la tarjeta blanca resalte mucho más */
}

.seccion-donar {
    padding: 80px 20px 100px 20px;
    display: flex;
    justify-content: center;
}

.contenedor-donar {
    max-width: 1200px;
    width: 100%;
    display: flex;
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.08); /* Sombra elegante para toda la caja */
}

/* --- Lado Izquierdo: Imagen --- */
.donar-imagen-wrapper {
    flex: 1;
    position: relative;
    min-height: 500px;
}

.img-donar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.etiqueta-flotante-donar {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    font-weight: bold;
    color: #1a5b9e;
    backdrop-filter: blur(5px);
}

.etiqueta-flotante-donar svg {
    width: 20px;
    height: 20px;
    color: #ff4d4d; /* Corazón rojo */
    margin-right: 10px;
}

/* --- Lado Derecho: Panel de Donación --- */
.donar-panel {
    flex: 1.2; /* Le damos más espacio al área de pago */
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titulo-donar {
    font-size: 34px;
    color: #1a5b9e;
    line-height: 1.2;
    margin-bottom: 15px;
    font-weight: 800;
}

.intro-donar {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* --- Tarjetas de Métodos de Pago --- */
.metodos-pago {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

.tarjeta-metodo {
    border: 2px solid #edf0f5;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

.tarjeta-metodo:hover {
    border-color: #1a5b9e;
    box-shadow: 0 10px 25px rgba(26, 91, 158, 0.1);
    transform: translateY(-2px);
}

.metodo-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.icono-metodo {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
}

.icono-metodo.banco {
    background-color: #e8f0fe;
    color: #1a5b9e;
}

.icono-metodo.paypal {
    background-color: #e5f1ff;
    color: #003087; /* Azul oscuro de PayPal */
}

.icono-metodo svg {
    width: 24px;
    height: 24px;
}

.metodo-header h3 {
    font-size: 20px;
    color: #333;
}

/* Datos Bancarios */
.metodo-datos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dato-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #555;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}

.dato-fila:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dato-label {
    color: #888;
}

.dato-valor {
    font-weight: 600;
    color: #333;
}

/* Destacamos la CLABE para que sea fácil de copiar */
.clabe-destacada {
    background-color: #f9fbff;
    padding: 15px;
    border-radius: 8px;
    border-bottom: none;
    margin-top: 5px;
}

.numero-clabe {
    font-family: monospace; /* Tipografía tipo código para números de cuenta */
    font-size: 18px;
    color: #1a5b9e;
    letter-spacing: 1px;
}

/* Info PayPal */
.tarjeta-paypal {
    background-color: #fafbfc;
}

.texto-paypal {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

/* Botón de PayPal Pro */
.btn-paypal-gigante {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #ffc439; /* Amarillo oficial de PayPal */
    color: #003087; /* Letra azul oscuro */
    font-weight: 800;
    font-size: 18px;
    padding: 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 196, 57, 0.4);
}

.btn-paypal-gigante:hover {
    background-color: #f2b724;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 196, 57, 0.5);
}

.correo-paypal-nota {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 15px;
}

/* Footer de dudas */
.donar-footer {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 25px;
}

.donar-footer p {
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

.donar-footer a {
    color: #1a5b9e;
    text-decoration: none;
    font-weight: bold;
}

.donar-footer .agradecimiento {
    font-size: 16px;
    color: #8c68a6; /* Morado GENDES */
    font-weight: bold;
    margin-top: 15px;
}

/* --- RESPONSIVO --- */
@media (max-width: 950px) {
    .contenedor-donar {
        flex-direction: column; /* Apila foto arriba, pago abajo */
    }
    .donar-imagen-wrapper {
        min-height: 300px;
    }
    .donar-panel {
        padding: 40px 25px;
    }
    .titulo-donar {
        font-size: 28px;
    }
}

/* =========================================
   26. BOTÓN FLOTANTE DE DONACIÓN
   ========================================= */

.btn-flotante-dona {
    position: fixed; /* Esto es lo que lo mantiene pegado a la pantalla */
    bottom: 30px; /* Separación desde abajo */
    right: 30px; /* Separación desde la derecha */
    background-color: #38b2a5; /* Color turquesa de tu marca */
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 50px; /* Forma redondita de píldora */
    display: flex;
    align-items: center;
    box-shadow: 0 10px 25px rgba(56, 178, 165, 0.4); /* Resplandor turquesa */
    z-index: 9999; /* Nivel Dios: Asegura que esté por encima del footer, imágenes y todo lo demás */
    transition: all 0.3s ease;
    animation: latido-suave 2.5s infinite; /* Llama a la animación de abajo */
}

.btn-flotante-dona svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* Efecto al pasar el ratón */
.btn-flotante-dona:hover {
    transform: translateY(-5px) scale(1.05); /* Sube y crece un poquito */
    background-color: #2c968b; /* Se oscurece ligeramente */
    box-shadow: 0 15px 35px rgba(56, 178, 165, 0.6);
    animation: none; /* Detenemos el latido para que el usuario pueda hacer clic a gusto */
}

/* Animación sutil para llamar la atención (late cada 2.5 segundos) */
@keyframes latido-suave {
    0% { transform: scale(1); }
    10% { transform: scale(1.05); }
    20% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* --- RESPONSIVO --- */
/* En celulares lo hacemos un poco más pequeño para que no estorbe la lectura */
@media (max-width: 600px) {
    .btn-flotante-dona {
        bottom: 20px;
        right: 20px;
        padding: 12px 25px;
        font-size: 14px;
    }
    .btn-flotante-dona svg {
        width: 18px;
        height: 18px;
    }
}

/* =========================================
   27. CARRUSEL INFINITO (Página de Inicio)
   ========================================= */

.hero-infinito {
    padding: 80px 0 60px 0;
    background-color: #f7f8fa; /* Fondo gris súper claro para que resalten las portadas */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contenedor-hero-textos {
    max-width: 800px;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 50px;
}

.contenedor-hero-textos h1 {
    font-size: 46px;
    color: #222222;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
}

.contenedor-hero-textos h1 span {
    color: #1a5b9e; /* Azul GENDES */
}

.contenedor-hero-textos p {
    font-size: 18px;
    color: #555555;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* --- El contenedor que enmascara las orillas --- */
.carrusel-enmascarado {
    width: 100%;
    max-width: 1400px; /* Ancho máximo para que no se estire demasiado en pantallas gigantes */
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    /* Efecto Pro: Desvanece la izquierda y la derecha para que las fotos "aparezcan" y "desaparezcan" suavemente */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* --- La pista que se mueve --- */
.carrusel-track {
    display: inline-flex;
    gap: 30px; /* Separación entre portadas */
    padding-left: 30px;
    /* La animación dura 35 segundos. Si quieres que vaya más rápido, bájale el número */
    animation: scroll-infinito 35s linear infinite; 
}

/* Pausa la animación si el usuario pone el ratón encima */
.carrusel-track:hover {
    animation-play-state: paused;
}

/* --- Las portadas --- */
.portada-slide {
    height: 350px; /* Altura fija */
    aspect-ratio: 3 / 4; /* Mantenemos la proporción perfecta de libro */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.portada-slide:hover {
    transform: scale(1.05); /* Crece un poquito al pasar el ratón */
}

/* --- La animación clave --- */
@keyframes scroll-infinito {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se desplaza exactamente la mitad (porque duplicamos las imágenes) */
        transform: translateX(-50%); 
    }
}

/* --- RESPONSIVO --- */
@media (max-width: 768px) {
    .contenedor-hero-textos h1 {
        font-size: 34px;
    }
    .portada-slide {
        height: 250px; /* Portadas más chicas en celulares */
    }
}
/* =========================================
   13. PRELOADER Y ANIMACIONES (NUEVO)
   ========================================= */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#preloader.oculto {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    width: 120px;
    margin-bottom: 20px;
    animation: pulso-loader 1.5s infinite alternate ease-in-out;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1a5b9e;
    border-radius: 50%;
    animation: giro-loader 1s linear infinite;
}

@keyframes pulso-loader {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}

@keyframes giro-loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animaciones de Scroll */
.animar-elemento {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animar-elemento.visible {
    opacity: 1;
    transform: translateY(0);
}

.retraso-1 { transition-delay: 0.1s; }
.retraso-2 { transition-delay: 0.2s; }
.retraso-3 { transition-delay: 0.3s; }

/* =========================================
   14. MENÚ RESPONSIVO (NUEVO)
   ========================================= */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: #1a5b9e;
    cursor: pointer;
    z-index: 1001;
}

@media (max-width: 900px) {
    .menu-toggle {
        display: block;
    }
    
    .navegacion {
        position: fixed;
        top: 0;
        right: -100%;
        width: 250px;
        height: 100vh;
        background-color: #ffffff;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        padding-top: 80px;
    }
    
    .navegacion.abierto {
        right: 0;
    }
    
    .navegacion > ul {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .navegacion > ul > li {
        width: 100%;
        margin-left: 0;
    }
    
    .navegacion ul li a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .navegacion ul li.dropdown {
        position: relative;
        width: 100%;
    }
    
    .submenu {
        position: static;
        box-shadow: none;
        background-color: #f9f9f9;
        display: none;
        padding-left: 15px;
    }
    
    .navegacion ul li.dropdown:hover .submenu {
        display: block;
    }
}