:root {
  --color-primary: #8a0755;
  --color-secondary: #5b148f;
  --color-light: #f8f9fa;
  --color-dark: #2c3e50;
}

/* --- CORRECCIÓN DE ANCLAS Y SCROLL --- */

html {
    /* 1. Hace que el viaje sea suave en lugar de un salto brusco */
    scroll-behavior: smooth;
}

/* 2. La magia: Aplica esto a cualquier elemento que tenga un ID */
/* (Títulos, notas al pie, referencias, acordeones) */
[id] {
    /* Este valor debe ser: Altura de tu menú + 20px de aire */
    scroll-margin-top: 120px; 
}

/* ========== HERO SECTION ========== */
.hero {
  /* 1. Color base crema claro (Exacto al fondo de tu imagen) */
  background-color: #f7f3ea;

  /* 2. Capas de textura */
  background-image:
    /* Capa 1 (Superior): Un gradiente vertical MUY sutil en café para dar un poco de "cuerpo" hacia abajo */
    linear-gradient(to bottom, rgba(91, 54, 0, 0.0), rgba(91, 54, 0, 0.08)),

    /* Capa 2 (Inferior): Las líneas diagonales finas en color CAFÉ (con transparencia) */
    /* Cambié los rgba(255,255,255,...) por rgba(91, 54, 0, ...) */
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(91, 54, 0, 0.07) 2px, rgba(91, 54, 0, 0.07) 4px);

  /* 3. (Opcional pero recomendado) Borde inferior rosa para conectar con la cenefa de la imagen */
  border-bottom: 5px solid #e70d85;

  /* Estilos necesarios */
  position: relative;
  overflow: hidden;
  /* Asegura que el contenedor tenga altura si la imagen no carga o es pequeña */
  min-height: 150px;
  /* Centrar la imagen si es necesario */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0%;

}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.05)" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,144C960,149,1056,139,1152,133.3C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
  background-size: cover;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero p {
  font-size: 18px;
  margin-bottom: 30px;
  opacity: 0.95;
}

.hero-image {
  max-width: 100%;
  height: auto;
  margin-top: 0px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}


/* ========== CONTENT SECTIONS ========== */
section {
  padding: 30px 0;
}

section h2 {
  color: #5b3600;
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 10px;
  border-bottom: 4px solid #e70d85;
  padding-bottom: 15px;
  display: inline-block;
}

section h3 {
  color: #bc8355;
}

section p {
  text-align: justify;
  font-size: 16px;
  line-height: 1.8;
  color: #332d2b;
  margin-bottom: 20px;
}

.section-description {
  font-size: 16px;
  color: #332d2b;
  margin-top: 10px;
  line-height: 1.8;
}

.bg-white {
  background-color: #fff;
}

.bg-light-gray {
  background-color: #f5f5f5;
}

.section {
  padding-top: 30px;
  margin-top: 20px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 16px;
  }

  section h2 {
    font-size: 28px;
  }

  .navbar-custom .navbar-brand {
    font-size: 16px;
  }
}



/* --- Estilos encapsulados para el menú secundario --- */

#menu-elegante-wrapper {
  /* FONDO: El beige claro de la imagen para que se funda con el banner */
  background-color: #f7f3ea;
  border-bottom: 1px solid #dcd6cc;
  padding: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Fuente moderna */
 box-shadow: 0 4px 6px -1px rgba(91, 54, 0, 0.05);
  /* Sombra sutil elegante */
  position: relative;
  z-index: 10;
}

#menu-elegante-wrapper .menu-elegante-list {
  display: flex;
  justify-content: center;
  /* Centrado (o usa flex-start para alinear a la izq) */
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  /* Para que se adapte en móviles */
}

#menu-elegante-wrapper .menu-elegante-list li {
  margin: 0;
}

#menu-elegante-wrapper .menu-elegante-list li a {
  display: block;
  padding: 18px 25px;
  text-decoration: none;
  /* TEXTO: Café Oscuro (Como la palabra "ACCIONES") */
  color: #5b3600;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  position: relative;
  border-bottom: 3px solid transparent;
  /* Reserva espacio para el borde */
}

/* Iconos de FontAwesome (ajuste sutil) */
#menu-elegante-wrapper .menu-elegante-list li a i {
  margin-right: 8px;
 /* ICONOS: Bronce/Dorado (Como la palabra "AFIRMATIVAS") */
  color: #bc8355;
  transition: color 0.3s ease;
}

/* --- ESTADO HOVER (Al pasar el mouse) --- */
#menu-elegante-wrapper .menu-elegante-list li a:hover,
#menu-elegante-wrapper .menu-elegante-list li a.active {
  /* HOVER: Usamos el Rosa de la cenefa para resaltar */
  color: #e70d85; 
  
  /* Fondo blanco puro para limpiar la lectura al seleccionar */
  background-color: #ffffff;
  /* Borde inferior moderno en lugar de subrayado clásico */
  /*border-bottom: 3px solid #e70d85;*/
}

#menu-elegante-wrapper .menu-elegante-list li a:hover i,
#menu-elegante-wrapper .menu-elegante-list li a.active i {
  color: #e70d85;
}

/* --- RESPONSIVE (Móviles) --- */
@media (max-width: 768px) {
  #menu-elegante-wrapper .menu-elegante-list {
    flex-direction: column;
    text-align: center;
  }

  #menu-elegante-wrapper .menu-elegante-list li a {
    border-bottom: 1px solid #e0dcd0;
    /* Borde simple en móvil */
    padding: 12px;
  }

  #menu-elegante-wrapper .menu-elegante-list li a:hover {
    border-bottom: 1px solid #e70d85;
    background-color: #fff0f7; /* Un rosa muuuuy pálido de fondo */
    /* Fondo morado muy suave en móvil */
  }
}

/* --- ESTILOS PARA EL SUBMENÚ --- */

/* 1. Posicionamiento relativo al padre para que el hijo sepa dónde anclarse */
#menu-elegante-wrapper .menu-elegante-list li.has-submenu {
  position: relative;
}

/* 2. Estilo inicial del submenú (Oculto) */
#menu-elegante-wrapper .submenu {
  display: none;
  /* Oculto por defecto */
  position: absolute;
  top: 100%;
  /* Justo debajo del botón principal */
  left: 0;
  min-width: 280px;
  /* Ancho mínimo para que el texto no se rompa feo */
  
  padding: 10px 0;
  list-style: none;
  z-index: 100;
  /* Borde superior morado elegante */
  border-radius: 0 0 4px 4px;
  background-color: #ffffff;
  box-shadow: 0 5px 15px rgba(91, 54, 0, 0.1); /* Sombra café suave */
  /* Sombra más pronunciada para efecto flotante */
    border-top: 3px solid #e70d85;
}

/* 3. Mostrar el submenú al pasar el mouse (Hover) */
#menu-elegante-wrapper .menu-elegante-list li.has-submenu:hover .submenu {
  display: block;
  animation: fadeIn 0.3s ease;
  /* Pequeña animación de entrada */
}

/* 4. Estilos de los enlaces DENTRO del submenú (Sobreescribimos los del padre) */
#menu-elegante-wrapper .submenu li a {
  padding: 10px 20px;
  font-size: 16px;
  /* Un poco más pequeño que el menú principal */
  color: #5b3600;
  border-bottom: none;
  /* Quitamos la línea inferior gruesa del menú principal */
  border-left: 3px solid transparent;
  /* Preparamos un borde lateral */
  display: block;
  border-bottom-style:groove;
  border-bottom-width:thin;
  border-bottom-color:#5b360029 ;
}

/* 5. Hover dentro del submenú */
#menu-elegante-wrapper .submenu li a:hover {
  background-color: #fff0f7; /* Fondo rosado muy tenue */
  color: #e70d85; /* Texto Rosa */
  border-left: 3px solid #e70d85; /* Borde lateral Rosa */
  /* Efecto elegante al costado */
  border-bottom: none;
  /* Aseguramos que no salga la línea de abajo */
}

/* Pequeña animación opcional para que no aparezca de golpe */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- AJUSTE RESPONSIVE PARA SUBMENÚ (Móviles) --- */
@media (max-width: 768px) {

  /* En móvil, quitamos la posición absoluta para que empuje el contenido hacia abajo */
  #menu-elegante-wrapper .submenu {
    position: static;
    box-shadow: none;
    border-top: none;
    background-color: #fcfbf9; /* Beige muy claro interno */
    padding-left: 20px;
    /* Indentación para jerarquía */
  }

  /* En móvil suele ser mejor usar JS para abrir/cerrar, 
     pero con CSS puro al hacer hover/tap se abrirá */
}



/* 
---------------------------------------------
Services Style - Tarjetas en el inicio
--------------------------------------------- 
*/


/* 1. REGLA NUEVA: Esto asegura que las columnas de bootstrap
   se comporten como contenedores flexibles para igualar alturas */
.services .row>[class*='col-'] {
  display: flex;
  /* IMPORTANTE: Espacio vertical para que la fila de arriba 
     no se encime con la de abajo */
  margin-bottom: 60px;
}

/* 2. CONTENEDOR PRINCIPAL DEL ITEM */
.services .service-item {
  position: relative;
  margin-top: 95px;
  /* Espacio reservado para el icono flotante */
  width: 100%;
  /* Asegura que ocupe el ancho disponible */
  display: flex;
  /* Activa flexbox interno */
  flex-direction: column;
  /* Apila el contenido verticalmente */
  height: auto;
  /* Permite crecer si hay mucho texto */
}

/* 1. EL CONTENEDOR */
.services .service-item .icon {
  width: 190px;
  height: 190px;
  position: absolute;
  right: 0;
  top: -95px;
  z-index: 10;
  background-color: transparent; /* Sin fondo */
  border-radius: 50%;
  /* Importante: overflow hidden para que nada se salga del círculo */
  overflow: hidden; 
}

/* 2. ESTILO COMÚN PARA AMBAS IMÁGENES */
.services .service-item .icon img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajuste perfecto */
  border-radius: 50%;
  
  /* CLAVE: Posición absoluta para encimarlas */
  position: absolute;
  top: 0;
  left: 0;
  
  /* Transición suave para el efecto fade */
  transition: opacity 0.4s ease-in-out, transform 0.4s ease;
}

/* 3. ESTADO INICIAL */

/* La imagen normal se ve (opacidad 1) */
.services .service-item .icon .img-default {
  opacity: 1;
  z-index: 1; /* Abajo */
}

/* La imagen hover está invisible (opacidad 0) */
.services .service-item .icon .img-hover {
  opacity: 0;
  z-index: 2; /* Arriba */
}

/* 4. EL EFECTO MÁGICO (HOVER) */

/* Al pasar el mouse sobre EL ITEM COMPLETO, mostramos la imagen hover */
.services .service-item:hover .icon .img-hover {
  opacity: 1; /* Aparece */
}

/* Opcional: Ocultar la de abajo suavemente (o dejarla, da igual si la de arriba es opaca) */
.services .service-item:hover .icon .img-default {
  opacity: 0; 
}

/* Opcional: Un pequeño movimiento hacia arriba para dar vida */
.services .service-item:hover .icon img {
    transform: scale(1); /* Crece un poquito */
}

/* 4. LA CAJA BLANCA/GRIS (Aquí estaba el problema de altura) */
.services .service-item .main-content {
  border-radius: 25px;
  padding: 80px 30px 50px 30px;
  background-color: #eff0de;
  /*border: 2px solid #5b3600;*/
  margin-right: 80px;
  /* Deja espacio a la derecha para el icono */
  transition: all .4s;

  /* NUEVO: Lógica de crecimiento */
  flex-grow: 1;
  /* Obliga a la caja a estirarse hasta llenar la altura de la columna */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Títulos (Sin cambios) */
.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 30px;
  transition: all .4s;
  color: #5b3600;
}

/* Párrafos */
.services .service-item p {
  color: #030000;
  margin-bottom: 25px;
  /* Opcional: Esto empuja el botón "Conocer más" siempre al fondo */
  flex-grow: 1;
}

/* Botón (Contenedor) */
.services .service-item .main-button {
  /* Aseguramos que no tenga márgenes raros que rompan el layout */
  margin-top: auto;
}

/* Ajuste general de la sección */
.section {
  padding-top: 30px;
  margin-top: 20px;
}

.main-button a {
  text-decoration: none;
  display: inline-block;
  background-color: #fff;
  color: #b87d4d;
  font-size: 18px;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  padding: 0px 25px;
  border-radius: 20px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #b87d4d;
  color: #fff;
}

/* 
---------------------------------------------
PROCESOS ELECTORALES - MENÚ CON COLUMNAS Y ENLACES DOCS
--------------------------------------------- 
*/

/* Títulos de los Procesos (Color Dorado/Ocre) */
.proceso-title {
  color: #5b3600;
  /* Tono tomado de la imagen */
  font-weight: 700;
  /* Negrita */
  margin-bottom: 20px;
  font-size: 1.8rem;
  border-bottom: 1px solid #eee;
  /* Opcional: línea sutil separadora */
  padding-bottom: 10px;
}

/* Enlaces de descarga */
.doc-link {
  color: #000000;
  /* Texto negro por defecto */
  text-decoration: none;
  /* Sin subrayado feo */
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  /* Para alinear icono y texto perfectamente */
  align-items: flex-start;
  /* Alinea arriba por si el texto es largo */
  transition: all 0.3s ease;
  padding: 5px 0;
}

/* El Icono del PDF */
.doc-link i {
  color: #bc8355;
  /* Icono dorado igual que el título */
  margin-right: 10px;
  font-size: 1.2rem;
  /* Icono un poco más grande */
  margin-top: 2px;
  /* Pequeño ajuste visual */
  transition: color 0.3s ease;
}

/* EFECTO HOVER (Al pasar el mouse) */
.doc-link:hover {
  color: #e70d85;
  /* Texto cambia a Morado Institucional */
  text-decoration: none;
}

.doc-link:hover i {
  color: #e70d85;
  /* El icono también cambia a morado */
  transform: scale(1.1);
  /* Pequeño efecto de "pop" */
}


/* 
---------------------------------------------
PROCESOS ELECTORALES - SECCIÓN CON MENÚ LATERAL
--------------------------------------------- 
*/


/* MENU LATERAL */
/* Estilo del contenedor del menú */
.menu-lateral {
  background-color: #f8f9fa;
  /* Fondo gris claro */
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #eee;
}

/* Estilo de los botones del menú */
.menu-lateral .nav-link {
  color: #5b3600;
  /* Texto gris oscuro */
  text-align: left;
  /* Alinear texto a la izquierda */
  font-weight: 500;
  padding: 12px 10px;
  border-radius: 8px;
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.menu-lateral .nav-link:hover {
  background-color: #e9ecef;
  color: #e70d85;
  /* Morado al pasar el mouse */
}

/* Estilo del Botón ACTIVO (Seleccionado) */
.menu-lateral .nav-link.active {
  background-color: #e70d85;
  /* Fondo Morado Institucional */
  color: #ffffff;
  /* Texto blanco */
  box-shadow: 0 4px 6px rgba(125, 33, 129, 0.3);
  /* Sombra suave */
}

/* Título de la sección derecha */
.seccion-titulo {
  color: #e70d85;
  border-bottom: 2px solid #d69825;
  /* Línea dorada abajo */
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* Estilo para los títulos de las columnas (H5) */
.grupo-titulo {
  color: #444;
  /* Gris oscuro, no negro */
  font-weight: 700;
  font-size: 1.1rem;
  border-left: 4px solid #bc8355;
  /* Línea dorada a la izquierda */
  padding-left: 10px;
  margin-bottom: 15px;

  /* --- AGREGADO PARA ALINEACIÓN --- */
  /* Reservamos altura suficiente para 2 líneas (aprox 50-60px dependiendo de la fuente) */
  min-height: 45px;

  /* Opcional: Esto ayuda a que si el texto es corto, se vea centrado verticalmente 
       o alineado arriba. Si lo quieres arriba, quita estas 2 líneas de flex */
  display: flex;
  align-items: center;
  /* Alinea el texto abajo, pegado a los archivos */
  /* O usa align-items: flex-start; para que queden arriba */
}

/* Estilo para cada enlace de archivo */
.archivo-link {
  display: block;
  /* Ocupa el ancho */
  padding: 8px 0;
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px dashed #eee;
  /* Separador sutil */
  transition: all 0.2s ease;
}

.archivo-link:hover {
  color: #e70d85;
  /* Morado institucional */
  padding-left: 5px;
  /* Pequeño movimiento a la derecha */
}

.archivo-link i {
  color: #888;
}

.archivo-link:hover i {
  color: #e70d85;
}

/* Para el contenedor de texto simple */
.contenido-texto {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #555;
}

/* Ajustes para el Menú Híbrido */

/* En móvil (pantallas pequeñas), el menú es una tira horizontal */
@media (max-width: 768px) {
  .menu-lateral {
    background-color: #fff;
    /* Fondo blanco en móvil para destacar */
    padding: 10px 5px;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    /* Sin bordes redondos en móvil */

    /* Truco para scroll suave en iOS */
    -webkit-overflow-scrolling: touch;

    /* Opcional: Sombra para indicar que flota */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .menu-lateral .nav-link {
    margin-right: 10px;
    /* Espacio entre botones horizontales */
    margin-bottom: 0;
    /* Quitamos el margen de abajo */
    border: 1px solid #eee;
    /* Un bordecito para que parezcan botones */
    padding: 8px 15px;
    font-size: 0.9rem;
  }

  /* Ocultar la barra de scroll (Scrollbar) pero permitir scroll */
  .menu-lateral::-webkit-scrollbar {
    height: 0px;
    /* Chrome, Safari, Opera */
    background: transparent;
  }

  .menu-lateral {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}

/* En escritorio, mantenemos el estilo que ya tenías */
@media (min-width: 769px) {
  .sticky-md-top {
    top: 20px;
    /* Un poco de margen si usas sticky */
  }
}


/* SELECTOR */
.text-selector {
  color: #7D2181 !important;
  /* Tu morado */
}

/* Estado Focus (Clic) del Select */
.form-select:focus {
  border-color: #7D2181;
  /* Borde morado sólido */
  /* El brillo exterior (es el mismo morado pero con transparencia 0.25) */
  box-shadow: 0 0 0 0.25rem rgba(125, 33, 129, 0.25);
  outline: 0;
}



/* --- ESTILOS ACORDEÓN (Bootstrap 5) --- */

.accordion-institucional .accordion-item {
    background-color: transparent;
    border: none;
    margin-bottom: 15px;
}

/* EL BOTÓN (ENCABEZADO) */
.accordion-institucional .accordion-button {
    background-color: #f7f3ea; /* Beige Papel */
    color: #5b3600; /* Café Oscuro */
    font-weight: 700;
    border: 1px solid #dcd6cc;
    border-radius: 8px !important; /* Forzamos bordes redondos */
    box-shadow: 0 2px 5px rgba(91, 54, 0, 0.05);
}

/* ESTADO ACTIVO (ABIERTO) */
/* Bootstrap usa esta clase extraña para cuando está abierto */
.accordion-institucional .accordion-button:not(.collapsed) {
    background-color: #5b3600; /* Café Oscuro */
    color: #ffffff; /* Texto Blanco */
    border-color: #5b3600;
    box-shadow: 0 4px 8px rgba(91, 54, 0, 0.2);
}

/* LA FLECHITA (Icono del acordeón) */
/* Flecha Café cuando está cerrado */
.accordion-institucional .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b3600'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* Flecha Blanca cuando está abierto */
.accordion-institucional .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Quitar el borde azul feo al hacer clic */
.accordion-institucional .accordion-button:focus {
    box-shadow: none;
    border-color: #bc8355;
}

/* EL CUERPO (CONTENIDO BLANCO) */
.accordion-institucional .accordion-body {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 0 0 8px 8px;
    padding: 20px;
}

/* --- ESTILOS DE LOS DOCUMENTOS --- */
.doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.doc-item:last-child { border-bottom: none; }

.doc-title {
    color: #bc8355; /* Título Dorado/Bronce */
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 5px 0;
}
.doc-desc {
    color: #555;
    margin: 0;
    font-size: 0.9rem;
}

/* BOTÓN DESCARGA (ROSA) */
.btn-descarga {
    background-color: #fff;
    color: #e70d85; /* Rosa */
    border: 1px solid #e70d85;
    padding: 5px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s;
}
.btn-descarga:hover {
    background-color: #e70d85;
    color: #fff;
}

/* --- ENLACE SUPERIOR (FUERA DEL ACORDEÓN) --- */
.enlace-superior {
    color: #bc8355; /* Dorado/Bronce para elegancia */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.enlace-superior:hover {
    color: #e70d85; /* Cambia a Rosa al pasar el mouse */
    border-bottom: 1px solid #e70d85; /* Aparece una línea rosa abajo */
    transform: translateX(5px); /* Se mueve un poquito a la derecha */
}


/* --- CAMBIOS EN LA FILA DE DOCUMENTOS --- */
.doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Alineación vertical centrada */
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    gap: 20px; /* Espacio entre el texto y los botones */
}

/* El contenedor de los botones */
.doc-action {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre "Fuente" y "Descargar" */
    white-space: nowrap; /* Que no se rompan en dos líneas */
}

/* --- ESTILO DEL ENLACE "FUENTE" --- */
.link-fuente {
    color: #888; /* Gris neutro por defecto */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s;
}

.link-fuente i {
    margin-right: 5px;
    font-size: 0.8rem;
}

.link-fuente:hover {
    color: #bc8355; /* Se pone Dorado/Bronce al pasar el mouse */
    text-decoration: underline;
}

/* --- MANTENEMOS TU BOTÓN DE DESCARGA (ROSA) --- */
.btn-descarga {
    /* (Tus estilos anteriores) */
    background-color: #fff;
    color: #e70d85;
    border: 1px solid #e70d85;
    padding: 6px 16px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    display: inline-flex;     /* Asegura alineación icono-texto */
    align-items: center;
    gap: 6px;                 /* Espacio entre icono y texto */
}

.btn-descarga:hover {
    background-color: #e70d85;
    color: #fff;
    box-shadow: 0 4px 6px rgba(231, 13, 133, 0.2);
}




/* --- CUERPO DEL ACORDEÓN (El contenedor) --- */
.accordion-institucional .accordion-body {
    background-color: #fcfbf9; /* Un beige casi blanco, muy sutil */
    border: 1px solid #eee;
    padding: 25px; /* Más espacio alrededor */
}

/* --- EL ITEM DE DOCUMENTO (La Tarjeta) --- */
.doc-item {
    background-color: #ffffff; /* Fondo blanco puro */
    border: 1px solid #eee; /* Borde muy sutil */
    border-radius: 12px; /* Bordes redondeados modernos */
    padding: 20px;
    margin-bottom: 15px; /* Separación entre tarjetas */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animación suave */
    position: relative;
    overflow: hidden; /* Para contener efectos */
}

/* Decoración lateral invisible por defecto */
.doc-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0; /* Empieza oculto */
    background-color: #e70d85; /* Tu Rosa Institucional */
    transition: width 0.3s ease;
}

/* --- EFECTO HOVER (La Magia) --- */
.doc-item:hover {
    transform: translateY(-3px); /* Se levanta un poquito */
    box-shadow: 0 10px 20px rgba(91, 54, 0, 0.08); /* Sombra elegante café */
    border-color: transparent; /* El borde desaparece para dejar ver la sombra */
}

.doc-item:hover::before {
    width: 6px; /* Aparece una línea rosa a la izquierda */
}

/* --- ICONO DEL DOCUMENTO (Visual) --- */
.doc-icon-box {
    width: 50px;
    height: 50px;
    background-color: #fdf2f8; /* Fondo rosa muy pálido */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: #e70d85; /* Icono rosa */
    font-size: 1.4rem;
    flex-shrink: 0; /* Que no se aplaste en móviles */
}

/* --- TEXTOS --- */
.doc-info {
    flex-grow: 1; /* Ocupa todo el espacio disponible */
    padding-right: 20px;
}

.doc-title {
    color: #5b3600; /* Café oscuro para el título */
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 5px;
}

.doc-desc {
    color: #666; /* Gris medio */
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- BOTONES --- */
.doc-action {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* --- AJUSTE PARA MÓVILES (Icono alineado al texto) --- */
@media (max-width: 768px) {
    
    .doc-item {
        display: grid;
        /* Definimos 2 columnas: 
           1. Auto (tamaño del icono) 
           2. 1fr (el resto del espacio para el título) */
        grid-template-columns: auto 1fr;
        
        /* DIBUJAMOS EL LAYOUT:
           "icon title" -> Icono y Título en la primera fila
           "desc desc"  -> Descripción ocupa las 2 columnas en la segunda fila
           "btn  btn"   -> Botones ocupan las 2 columnas al final
        */
        grid-template-areas: 
            "icon title"
            "desc desc"
            "btn  btn";
            
        gap: 10px; /* Espacio entre elementos */
        padding: 15px;
        align-items: center; /* Centra verticalmente el icono con el título */
    }

    /* --- EL TRUCO MAESTRO --- */
    /* Esto hace que el div .doc-info desaparezca para el layout 
       y sus hijos (h4 y p) pasen a ser controlados por el Grid padre */
    .doc-info {
        display: contents; 
    }

    /* 1. EL ICONO */
    .doc-icon-box {
        grid-area: icon; /* Lo mandamos al área 'icon' */
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin: 0; /* Quitamos márgenes viejos */
    }

    /* 2. EL TÍTULO */
    .doc-title {
        grid-area: title; /* Lo mandamos al área 'title' */
        margin: 0;
        font-size: 0.95rem; /* Ajuste de tamaño para móvil */
        line-height: 1.2;
        padding-left: 10px; /* Un poco de aire con el icono */
    }

    /* 3. LA DESCRIPCIÓN (Ahora se va abajo de todo) */
    .doc-desc {
        grid-area: desc; /* Lo mandamos al área 'desc' */
        margin-top: 5px;
        font-size: 0.9rem;
        color: #666;
        /* Opcional: Si quieres que el texto justifique o se alinee */
        text-align: left; 
    }

    /* 4. LOS BOTONES */
    .doc-action {
        grid-area: btn; /* Lo mandamos al área 'btn' */
        width: 100%;
        margin-top: 10px;
        border-top: 1px dashed #eee;
        padding-top: 15px;
        display: flex;
        justify-content: center; /* Botón centrado */
    }

    .btn-descarga {
        width: 100%;
        justify-content: center;
    }
}


/* --- ESTILOS DEL MODAL INSTITUCIONAL --- */

/* El contenedor principal del modal */
.modal-institucional {
    border: none; /* Sin bordes grises de Bootstrap */
    border-radius: 12px; /* Esquinas redondeadas suaves */
    overflow: hidden; /* Asegura que el header respete el redondeo */
    box-shadow: 0 20px 40px rgba(91, 54, 0, 0.3); /* Sombra profunda elegante */
}

/* ENCABEZADO (Café sólido) */
.modal-institucional .modal-header {
    background-color: #5b3600; /* Café Oscuro */
    color: #ffffff; /* Texto blanco */
    border-bottom: 3px solid #bc8355; /* Línea de acento Dorada abajo */
    padding: 10px 15px;
}

.modal-institucional .modal-title {
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 1.1rem;
}

/* CUERPO (Fondo Beige) */
.modal-institucional .modal-body {
    background-color: #f7f3ea; /* Beige institucional */
    padding: 10x;
}

/* --- ESTILO DE LA IMAGEN VERTICAL --- */
.coming-soon-img {
    /* IMPORTANTE: Limitamos la altura para que una imagen vertical 
       no haga el modal demasiado alto en pantallas pequeñas */
    max-height: 450px; 
    width: auto; /* Mantiene la proporción */
    
    border-radius: 8px;
    /* Un borde blanco grueso hace que parezca una fotografía impresa */
    border: 5px solid #ffffff; 
    /* Sombra suave para que "flote" */
    box-shadow: 0 10px 25px rgba(91, 54, 0, 0.15) !important;
}

/* TEXTOS */
.coming-soon-title {
    color: #bc8355; /* Dorado/Bronce */
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.coming-soon-text {
    color: #5b3600; /* Café */
    font-size: 1.1rem;
    line-height: 1.5;
}

/* PIE DEL MODAL */
.modal-institucional .modal-footer {
    background-color: #f7f3ea; /* Mismo beige del cuerpo */
    border-top: none; /* Quitamos la línea de separación por defecto */
    padding-bottom: 10px;
}

/* BOTÓN PERSONALIZADO GRANDE */
.btn-institucional-lg {
    background-color: #5b3600; /* Café */
    color: #fff;
    padding: 12px 40px; /* Más grande y ancho */
    border-radius: 50px; /* Forma de píldora */
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #5b3600;
    transition: all 0.3s ease;
}

/* Efecto Hover del botón (Se vuelve Rosa) */
.btn-institucional-lg:hover {
    background-color: #e70d85; /* Rosa institucional */
    border-color: #e70d85;
    color: #fff;
    transform: translateY(-2px); /* Se levanta un poquito */
    box-shadow: 0 5px 15px rgba(231, 13, 133, 0.3);
}

/* --- BOTÓN INSTITUCIONAL (TAMAÑO NORMAL) --- */
.btn-institucional {
    background-color: #5b3600; /* Café Institucional */
    color: #ffffff;
    border: 2px solid #5b3600;
    
    /* AJUSTES DE TAMAÑO: Más compacto que el LG */
    padding: 8px 24px;  /* Antes era 12px 40px */
    font-size: 0.9rem;  /* Un poco más chico que 1rem */
    
    border-radius: 50px; /* Mantiene forma de píldora */
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* EFECTO HOVER (Igual que el grande) */
.btn-institucional:hover {
    background-color: #e70d85; /* Rosa */
    border-color: #e70d85;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(231, 13, 133, 0.2); /* Sombra un poco más pequeña */
    transform: translateY(-2px);
}


/* --- ESTILOS PARA EL TEXTO --- */
.contenido-legal h2 {
    color: #5b3600; /* Café Título */
    margin-bottom: 20px;
}
.contenido-legal h3 {
    color: #bc8355; /* Dorado Subtítulo */
    margin-top: 25px;
}

/* --- SUPERÍNDICES EN EL TEXTO [1] --- */
.footnote-ref a {
    color: #e70d85; /* Rosa Institucional */
    font-weight: 700;
    text-decoration: none;
    font-size: 0.8em;
    margin-left: 2px;
    transition: all 0.2s;
}

.footnote-ref a:hover {
    color: #5b3600; /* Cambia a café al pasar el mouse */
    text-decoration: underline;
}

/* --- CONTENEDOR DE NOTAS AL PIE (Footer) --- */
.footnotes-area {
    margin-top: 50px; /* Separación del texto principal */
    padding-top: 20px;
    border-top: 1px solid #eaddcf; /* Línea divisoria sutil */
    background-color: #fcfbf9; /* Fondo muy pálido para diferenciarlo */
    padding: 20px;
    border-radius: 8px;
}

.footnotes-title {
    color: #bc8355; /* Título Dorado "REFERENCIAS" */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* LA LISTA ORDENADA */
.footnotes-list {
    padding-left: 20px;
    margin-bottom: 0;
    font-size: 0.9rem; /* Letra un poco más chica que el texto normal */
    color: #555; /* Gris oscuro para lectura cómoda */
}

.footnotes-list li {
    margin-bottom: 10px;
}

/* LA FLECHITA DE RETORNO ↩ */
.footnote-backref {
    color: #e70d85;
    text-decoration: none;
    font-size: 1.2em;
    margin-left: 5px;
    display: inline-block;
}

.footnote-backref:hover {
    transform: translateY(-2px); /* Saltito al pasar el mouse */
    color: #5b3600;
}


/* --- TÍTULO DE LA SUBSECCIÓN (Dorado/Bronce) --- */
.subseccion-title {
    color: #bc8355; /* Color secundario para diferenciar del título principal */
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- TARJETA DEL DOCUMENTO (Estilo Card) --- */
.doc-card {
    display: flex;
    align-items: center; /* Centra el icono y texto verticalmente */
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Borde sutil gris */
    border-radius: 8px;
    padding: 12px 15px; /* Espaciado interno cómodo */
    text-decoration: none; /* Quita el subrayado del enlace */
    transition: all 0.2s ease-in-out; /* Animación suave */
    height: 100%; /* CLAVE: Hace que todas las tarjetas midan lo mismo de alto */
}

/* El Icono (Cuadrito Rosa) */
.doc-card-icon {
    width: 36px;
    height: 36px;
    background-color: #fdf2f8; /* Fondo rosa muy pálido */
    color: #e70d85; /* Icono rosa */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-right: 12px;
    flex-shrink: 0; /* Evita que el icono se aplaste si el texto es largo */
    transition: background-color 0.3s;
}

/* El Texto */
.doc-card-text {
    color: #333333; /* Gris oscuro casi negro */
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
}

/* --- EFECTOS AL PASAR EL MOUSE (HOVER) --- */
.doc-card:hover {
    transform: translateY(-3px); /* Se levanta un poquito */
    border-color: #bc8355; /* El borde cambia a Dorado */
    box-shadow: 0 4px 10px rgba(91, 54, 0, 0.08); /* Sombra suave café */
}

.doc-card:hover .doc-card-text {
    color: #5b3600; /* El texto cambia a Café Institucional */
}

.doc-card:hover .doc-card-icon {
    background-color: #e70d85; /* El fondo del icono se vuelve Rosa sólido */
    color: #ffffff; /* El icono se vuelve blanco */
}


/* --- ANIMACIÓN DE SCROLL --- */

/* 1. Estado inicial: Invisible y desplazado 50px hacia abajo */
.scroll-hidden {
    opacity: 0;
    transform: translateY(50px); /* Se mueve un poco abajo */
    transition: all 1s ease-out; /* La magia: tarda 1 segundo en aparecer suave */
    
    /* Opcional: para que no parpadee al cargar si está muy arriba */
    will-change: opacity, transform; 
}

/* 2. Estado visible: Opacidad 1 y regresa a su posición original */
.scroll-show {
    opacity: 1;
    transform: translateY(0);
}


/* --- TARJETA DE GALERÍA LIMPIA --- */
.gallery-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #f0f0f0;
}

/* CONTENEDOR DE IMAGEN */
.gallery-img-wrapper {
    position: relative;
    overflow: hidden;
    /* CAMBIO CLAVE: Usamos formato vertical (Portrait) 
       porque las infografías suelen ser altas. 
       Si prefieres cuadrado usa 1/1 */
    aspect-ratio: 3/4; 
    background-color: #f7f3ea;
}

.gallery-img-wrapper img {
    width: 100%;
    height: 100%;
   /*  object-fit: cover; /* Recorta para llenar */
    object-fit: contain; /* <--- USA ESTE si quieres ver la imagen completa con bordes beige */
    transition: transform 0.5s ease;
}

/* OVERLAY ROSA */
.gallery-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(231, 13, 133, 0.7); /* Rosa semitransparente */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-overlay i {
    color: #fff;
    font-size: 2.5rem; /* Icono grande */
    transform: scale(0.8);
    transition: transform 0.3s;
}

/* CUERPO (Solo Título) */
.gallery-body {
    padding: 15px 10px; /* Un poco más compacto */
    flex-grow: 1;
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    border-top: 3px solid transparent;
}

.gallery-title {
    color: #5b3600;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 0; /* Sin margen extra */
}

/* --- HOVER --- */
.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(91, 54, 0, 0.15);
}

.gallery-card:hover .gallery-img-wrapper img {
    transform: scale(1.1); /* Zoom */
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-card:hover .gallery-overlay i {
    transform: scale(1);
}

/* --- ACCESIBILIDAD (FOCUS) --- */
/* Esto se activa cuando llegas al elemento usando el teclado (Tab) */
.gallery-card:focus {
    outline: none; /* Quitamos el borde azul o negro por defecto del navegador */
    
    /* Creamos un "anillo" resplandeciente color Rosa Institucional */
    box-shadow: 0 0 0 4px rgba(231, 13, 133, 0.6) !important; 
    
    /* Opcional: También aplicamos el efecto de elevación para que sea igual al hover */
    transform: translateY(-5px); 
    border-color: #e70d85;
}



/* --- ESTILO 1: TARJETA DE LIBRO (Investigación) --- */
/* 1. La tarjeta principal ahora es Flex Column */
.book-card {
    display: flex;       /* ACTIVAMOS FLEXBOX */
    flex-direction: column; /* Dirección vertical */
    height: 100%;        /* Asegura que ocupe toda la altura de la columna */
    
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}


/* Contenedor de la portada */
.book-cover-wrapper {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #fbf9f5; /* Beige muy suave */
    border-radius: 8px;
}

/* Efecto de sombra para que parezca un libro real */
.book-cover-wrapper img {
    max-height: 250px; /* Control de altura */
    width: auto;
    border-radius: 4px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.15); /* Sombra ladeada 3D */
    transition: transform 0.3s ease;
}

/* 2. El contenedor de info (título y desc) crece para llenar huecos */
.book-info {
    display: flex;       /* También lo hacemos flex */
    flex-direction: column; 
    flex-grow: 1;        /* MAGIA: Esto hace que este div crezca hasta llenar el espacio vacío */
}

/* Etiqueta "Nuevo" */
.badge-new {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #e70d85; /* Rosa */
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Textos */
.book-title {
    color: #5b3600; /* Café */
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
    line-height: 1.3;
}
.book-desc {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: -webkit-box;
    line-clamp: inherit;
    -webkit-line-clamp: 2; /* Corta el texto a 2 líneas si es muy largo */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botón falso de "Leer más" */
/* 3. El botón se empuja solito hacia el final */
.btn-read-more {
    margin-top: auto;    /* MAGIA: "Empújame lo más abajo posible" */
    
    color: #bc8355; 
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    padding-top: 15px;   /* Un poco de aire arriba */
}

/* --- INTERACCIÓN HOVER LIBRO --- */
.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(91, 54, 0, 0.1);
    border-color: #bc8355;
}
.book-card:hover .book-cover-wrapper img {
    transform: scale(1.05) rotate(2deg); /* Pequeño giro divertido */
}
.book-card:hover .btn-read-more {
    color: #e70d85; /* Cambia a rosa */
    padding-left: 5px;
}


/* --- ESTILO 2: BANNER DEL REPOSITORIO (Adornado) --- */
.repo-banner {
    display: block;
    position: relative;
    background: linear-gradient(135deg, #5b3600 0%, #7a4900 100%); /* Degradado Café */
    border-radius: 12px;
    padding: 30px 40px;
    text-decoration: none;
    overflow: hidden;
    color: #fff;
    transition: all 0.3s ease;
    border-left: 6px solid #bc8355; /* Borde dorado a la izquierda */
}

/* Icono gigante de fondo (Decoración) */
.repo-bg-icon {
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-size: 10rem;
    color: rgba(255, 255, 255, 0.05); /* Muy transparente */
    transform: rotate(-15deg);
    pointer-events: none;
}

/* Textos del Banner */
.repo-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
}
.repo-sub {
    font-size: 1rem;
    color: rgba(255,255,255, 0.8);
    margin: 0;
}

/* Botón dentro del banner */
.btn-repo {
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-block;
}

/* Hover del Banner Completo */
.repo-banner:hover {
    background: linear-gradient(135deg, #e70d85 0%, #b00b66 100%); /* Cambia a ROSA vibrante */
    transform: scale(1.01);
}
.repo-banner:hover .btn-repo {
    background-color: #fff;
    color: #e70d85;
}