/* --- RESET Y BASES --- */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     background: transparent;
     color: #fff;
     font-family: 'Segoe UI', Roboto, Arial, sans-serif;
     line-height: 1.6;
     overflow-x: hidden;
 }

 /* --- ESTRUCTURA GLOBAL DE SECCIONES --- */
section {
    position: relative;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow: hidden;
    box-sizing: border-box;
}

/* SOLO SECCIONES NORMALES */

 /* Clase maestra para fondos */
 .section-bg {
     position: absolute;
     inset: 0;

     width: 100%;
     height: 100%;

     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

     z-index: -1;

     transform: scale(1.01);
 }

 /* Capa oscura para legibilidad */
 .overlay-dark {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.3);
     /* Ajusta la opacidad según necesites */
     z-index: 1;
 }

 .content-relative {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: 1200px;
 }

 section:not(.hero):not(.memoria-cordoba) {
     padding: 80px 20px;
 }

 /* --- HERO RESPONSIVE --- */

 /* ================= HERO RESPONSIVE ================= */

 /* ELIMINAR ESPACIO SOLO EN HERO Y MEMORIA */

/* ================= HERO RESPONSIVE CORREGIDO ================= */

.hero {

    width: 100%;

    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.hero-container {
    width: 100%;
    line-height: 0;
}

.hero-container .overlay-img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: bottom;
}


 /* ================= TABLET ================= */

 @media (max-width: 992px) {

     .hero-container .overlay-img {
         width: 100%;
         height: auto;
     }

 }

 /* ================= MÓVIL ================= */

 @media (max-width: 768px) {

     .hero-container {
         width: 100%;
     }

     .hero-container .overlay-img {

         /* IMPORTANTE */
         width: 100%;
         height: auto;

         /* mejora nitidez */
         object-fit: contain;
     }

 }

 /* ================= MÓVILES PEQUEÑOS ================= */

 @media (max-width: 480px) {

     .hero-container .overlay-img {
         width: 100%;
         height: auto;
     }

 }

 /* ================= CONTEXTO CÓRDOBA ================= */

 /* ======================================================
   SECCIÓN MEMORIA CÓRDOBA — SIN FONDO NEGRO
====================================================== */

 .memoria-cordoba {

     position: relative;
     margin-top: 0;

     width: 100%;

     overflow: hidden;

     background-image: url('/es/Paginas/CompareSer/2026/Proceso-Cordoba/img/imagenes/Fondos/Contexto_1920_1080.jpg');

     background-size: cover;
     background-position: center top;
     background-repeat: no-repeat;

     /* IMPORTANTE */
     height: auto;
 }

 /* CONTENEDOR */

 .memoria-wrapper {

     position: relative;

     width: 100%;
     max-width: 1200px;

     margin: 0 auto;

     padding: 120px 25px;

     text-align: center;
 }

 /* TÍTULO */

 .memoria-title {

     font-size: clamp(2.5rem, 5vw, 5rem);

     color: #06B68E;

     margin-bottom: 40px;

     font-weight: 700;

     line-height: 1.2;

     text-shadow: 0 4px 15px rgba(0, 0, 0, .15);
 }

 /* TEXTO */

 .memoria-text {

     font-size: clamp(1.15rem, 1.7vw, 1.65rem);

     line-height: 1.9;

     margin-bottom: 28px;

     color: #750362;

     font-style: italic;

     text-shadow: 0 2px 8px rgba(255, 255, 255, .12);
 }

 /* ================= TABLET ================= */

 @media (max-width: 992px) {

     .memoria-cordoba {

         background-position: center top;
     }

     .memoria-wrapper {

         padding: 110px 40px;
     }

 }

 /* ================= MÓVIL ================= */

 @media (max-width: 768px) {

     .memoria-cordoba {

         background-size: cover;

         background-position: center center;
     }

     .memoria-wrapper {

         padding: 90px 25px;
     }

     .memoria-title {

         margin-bottom: 25px;
     }

     .memoria-text {

         line-height: 1.7;

         margin-bottom: 20px;
     }

 }

 /* ================= MÓVILES PEQUEÑOS ================= */

 @media (max-width: 480px) {

     .memoria-wrapper {

         padding: 70px 18px;
     }

     .memoria-title {

         font-size: 2.2rem;
     }

     .memoria-text {

         font-size: 1rem;
     }

 }

 /* --- TIMELINE --- */
 .timeline-embed {
     width: 100%;
     height: 600px;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
     background: #fff;
 }

 /* --- CARRUSEL --- */
 .carousel-container {
     overflow: hidden;
     margin-top: 40px;
     width: 100%;
 }

 .carousel-track {
     display: flex;
     transition: transform 0.5s ease;
     align-items: flex-start;
 }

 /* Cards */
 .card {
     flex: 0 0 50%;
     box-sizing: border-box;
     padding: 15px;
 }

 /* Imagen */
 .card img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 15px;
     object-fit: cover;
     max-width: 100%;
     transition: transform 0.3s ease;
 }

 /* Hover */
 .card:hover img {
     transform: scale(1.02);
 }

 /* Botones */
 .nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(109, 1, 86, 0.9);
     border: 2px solid rgba(255, 255, 255, 0.5);
     color: white;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     z-index: 100;
 }

 .nav-btn svg {
     width: 30px;
     height: 30px;
     fill: currentColor;
 }

 .nav-btn:hover {
     background: #6d0156;
     transform: translateY(-50%) scale(1.08);
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
 }

 .nav-btn.prev {
     left: -70px;
 }

 .nav-btn.next {
     right: -70px;
 }

 /* -------- TABLET -------- */
 @media (max-width: 992px) {
     .card {
         flex: 0 0 50%;
     }

     .nav-btn.prev {
         left: 10px;
     }

     .nav-btn.next {
         right: 10px;
     }
 }

 /* -------- MÓVIL -------- */
 @media (max-width: 768px) {

     .card {
         flex: 0 0 100%;
         padding: 10px;
     }

     .card img {
         border-radius: 12px;
     }

     .nav-btn {
         width: 40px;
         height: 40px;
     }

     .nav-btn svg {
         width: 24px;
         height: 24px;
     }

     .contenido-seguro {
         padding: 0 20px;
     }

     h2 {
         font-size: 2rem !important;
     }

     p {
         font-size: 1rem !important;
     }
 }

 /* --- AUDIOS --- */

 .audio-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 25px;
     margin-top: 30px;
 }

 /* --- CARD --- */

 .audio-card {
     width: 100%;
     aspect-ratio: 16 / 9;
     /* mantiene proporción */
     position: relative;
     border-radius: 15px;
     overflow: hidden;

     /* IMPORTANTE */
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     background-color: #000;

     border: 1px solid rgba(255, 255, 255, 0.1);

     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 /* --- HOVER --- */

 .audio-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
 }

 /* --- BOTÓN PLAY --- */

 .play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 50px;
     cursor: pointer;
     text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
 }

 /* --- CONTENIDO --- */

 .audio-item {
     display: flex;
     flex-direction: column;
     text-align: center;
 }

 .audio-content {
     margin-top: 18px;
     padding: 0 5px;
 }

 .audio-title {
     margin-top: 15px;
     font-size: 1.5rem;
     font-weight: bold;
     color: #0ca77f;
     line-height: 1.4;
     text-align: center;
 }

 .audio-summary {
     margin-top: 15px;
     font-size: 1.3rem;
     color: #4d0140;
     line-height: 1.9;
     text-align: center;
 }

 /* --- RESPONSIVE --- */

 @media (max-width: 768px) {

     .audio-grid {
         grid-template-columns: 1fr;
     }

     .audio-card {
         aspect-ratio: 16 / 9;
     }

     .audio-title {
         font-size: 1.2rem;
     }

     .audio-summary {
         font-size: 1rem;
         line-height: 1.7;
     }

     .play-btn {
         font-size: 40px;
     }

 }

 /* ===== SECCIÓN GALERÍA ===== */

 .gallery-section {
     background-image: url('/es/Paginas/CompareSer/2026/Proceso-Cordoba/img/imagenes/Fondos/Galeria_1920_1080.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     padding: 120px 20px;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 /* ===== CAPA ===== */

 .gallery-section::before {
     content: "";
     position: absolute;
     inset: 0;
 }

 .gallery-section>* {
     position: relative;
     z-index: 2;
 }

 /* ===== TÍTULO ===== */

 .gallery-title {
     font-size: 38px;
     color: #4d0140;
     margin-bottom: 40px;
     text-align: center;
 }

 /* ===== CARRUSEL ===== */

 .gallery-carousel {
     position: relative;
     width: 100%;
     max-width: 1100px;
     margin: auto;
     overflow: hidden;
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.95);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 /* ===== TRACK ===== */

 .gallery-track {
     display: flex;
     width: 100%;
     transition: transform 0.6s ease;
 }

 /* ===== ITEM ===== */

 .gallery-item {
     min-width: 100%;
     width: 100%;
     flex: 0 0 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     box-sizing: border-box;
 }

 /* ===== IMAGEN ===== */

 .gallery-item img {
     width: 100%;
     height: auto;
     max-height: 500px;
     object-fit: cover;
     display: block;
 }

 /* ===== PIE DE FOTO ===== */

 .gallery-caption {
     width: 100%;
     padding: 25px 30px;
     font-size: 1rem;
     line-height: 1.8;
     color: #4d0140;
     font-style: italic;
     text-align: center;
     box-sizing: border-box;
 }

 /* ===== FLECHAS ===== */

 .gallery-arrow {
     position: absolute;
     top: 40%;
     transform: translateY(-50%);
     font-size: 32px;
     color: white;
     background: rgba(0, 0, 0, 0.5);
     border: none;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     cursor: pointer;
     transition: 0.3s ease;
     z-index: 10;
 }

 .gallery-arrow:hover {
     background: #2e7d32;
 }

 .gallery-arrow.left {
     left: 15px;
 }

 .gallery-arrow.right {
     right: 15px;
 }

 /* ===== RESPONSIVE ===== */

 @media (max-width: 992px) {

     .gallery-carousel {
         border-radius: 18px;
     }

     .gallery-item img {
         max-height: 420px;
     }

 }

 @media (max-width: 768px) {

     .gallery-section {
         padding: 70px 12px;
     }

     .gallery-title {
         font-size: 26px;
         margin-bottom: 25px;
     }

     .gallery-carousel {
         border-radius: 15px;
     }

     .gallery-item img {
         width: 100%;
         height: auto;
         max-height: 300px;
     }

     .gallery-caption {
         font-size: 0.95rem;
         line-height: 1.6;
         padding: 18px 15px 22px;
     }

     .gallery-arrow {
         width: 40px;
         height: 40px;
         font-size: 22px;
     }

     .gallery-arrow.left {
         left: 10px;
     }

     .gallery-arrow.right {
         right: 10px;
     }

 }

 @media (max-width: 480px) {

     .gallery-section {
         padding: 60px 10px;
     }

     .gallery-item img {
         max-height: 230px;
     }

     .gallery-caption {
         font-size: 0.88rem;
         line-height: 1.5;
         padding: 15px 12px 20px;
     }

     .gallery-arrow {
         width: 35px;
         height: 35px;
         font-size: 18px;
     }

 }

 /* --- TIPOGRAFÍA GLOBAL --- */
 h2 {
     font-size: clamp(2rem, 4vw, 2.5rem);
     font-weight: 700;
     margin-bottom: 20px;
     line-height: 1.3;
 }

 h3 {
     font-size: clamp(1.2rem, 2vw, 1.5rem);
     font-weight: 700;
     line-height: 1.4;
 }

 p {
     font-size: clamp(1rem, 1.5vw, 1.3rem);
     line-height: 1.9;
     margin-bottom: 20px;
 }

 /* Colores semánticos reutilizables */
 .color-verde {
     color: #06B68E;
 }

 .color-morado {
     color: #70005d;
 }

 .color-magenta {
     color: #4d0140;
 }

 .color-teal {
     color: #0ca77f;
 }

 /* --- FOOTER --- */
 footer {
     background: #6d0058;
     text-align: center;
     padding: 40px;
     font-size: 1.2rem;
     border-top: 1px solid #1e293b;
 }

 /* --- RESPONSIVE --- */
 @media (max-width: 992px) {
     .card {
         min-width: 50%;
     }

     .panel {
         width: 100%;
     }
 }

 @media (max-width: 768px) {
     section {
         padding: 60px 5%;
     }

     .card {
         min-width: 100%;
     }

     .hero-container {
         aspect-ratio: unset;
         width: 100%;
     }

     /* Opcional: Proporción vertical en móvil */
     .panel {
         align-self: center !important;
     }

     .timeline-embed {
         height: 450px;
     }
 }

 .apoyo-final {
     width: 100%;
     text-align: center;
     padding: 70px 20px 50px;
     margin-top: 70px;

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .apoyo-texto {
     font-size: 2rem;
     font-weight: 700;
     color: #06B68E;

     margin-bottom: 30px;

     letter-spacing: 1px;
     line-height: 1.4;

     position: relative;

 }

 /* Línea decorativa */
 .apoyo-texto::after {
     content: "";
     display: block;

     width: 90px;
     height: 4px;

     margin: 14px auto 0;

     background: linear-gradient(90deg, #06B68E, #70005d);

     border-radius: 20px;
 }

 .logo-apoyo img {
     max-width: 240px;
     width: 100%;
     height: auto;
     object-fit: contain;

     transition: transform 0.3s ease;
 }

 .logo-apoyo img:hover {
     transform: scale(1.03);
 }

 /* Responsive */
 @media (max-width: 768px) {

     .apoyo-final {
         padding: 50px 15px 35px;
         margin-top: 50px;
     }

     .apoyo-texto {
         font-size: 1.4rem;
     }

     .apoyo-texto::after {
         width: 70px;
         height: 3px;
     }

     .logo-apoyo img {
         max-width: 170px;
     }
 }