/**
* Plaza de Armas de Encarnación — Proyecto académico UNAE SZ16
* Paleta: ámbar dorado, coral cívico, azul Paraná, pergamino cálido
*/

/* ── Sistema tipográfico (3 familias, contraste genuino) ───────────────────────────────────
   Playfair Display → display y títulos (hero, banners, encabezados de sección)
   Source Sans 3    → cuerpo, navegación, etiquetas y metadata
   Cinzel           → cifras y fechas destacadas: inscripción romana "tallada en piedra"      */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,600&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ── Fuentes tipográficas ─────────────────────────────────────────── */
:root {
  --default-font:  "Source Sans 3", system-ui, sans-serif;      /* cuerpo                                 */
  --heading-font:  "Playfair Display", Georgia, serif;          /* display y títulos (un solo serif)      */
  --nav-font:      "Source Sans 3", system-ui, sans-serif;      /* navegación                             */
  --display-font:  "Source Sans 3", system-ui, sans-serif;      /* valores con texto (legado)             */
  --num-font:      "Cinzel", Georgia, serif;                    /* cifras y fechas                        */
  --label-font:    "Source Sans 3", system-ui, sans-serif;      /* etiquetas, metadata, chips             */
}

/* ── Paleta principal ──────────────────────────────────────────────── */
:root {
  --background-color: #f6f7f8;   /* off-white frío neutro — sin crema (la calidez la dan dorado/fotos) */
  --default-color:    #3a2815;   /* marrón oscuro cálido */
  --heading-color:    #1c1208;   /* espresso profundo */
  --accent-color:     #e7bc23;   /* ámbar dorado — identidad principal */
  --flag-gold:        #d8b24a;   /* amarillo sobrio bandera de Encarnación — hero */
  --flag-red:         #d83b2b;   /* bandera de Encarnación — tokens canónicos */
  --flag-yellow:      #ecc63f;
  --flag-blue:        #2358ad;
  --flag-segments:    linear-gradient(90deg, var(--flag-red) 0 33.33%, var(--flag-yellow) 33.33% 66.66%, var(--flag-blue) 66.66% 100%);
  --accent2-color:    #ad120d;   /* coral / rojo cívico — Encarnación/Itapúa */
  --surface-color:    #ffffff;   /* arena cálida */
  --contrast-color:   #ffffff;
  --blue-accent:      #1a4a80;   /* azul Paraná */
  --green-accent:     #2d7a3a;   /* verde natural */
}

/* ── Nav ──────────────────────────────────────────────────────────── */
:root {
  --nav-color:                    rgba(44,28,10,0.78);
  --nav-hover-color:              #1c1208;
  --nav-mobile-background-color:  #eef0f3;
  --nav-dropdown-background-color:#ffffff;
  --nav-dropdown-color:           rgba(44,28,10,0.78);
  --nav-dropdown-hover-color:     #1c1208;
}

/* ── Secciones modificadas ────────────────────────────────────────── */
.light-background {
  --background-color: #eceef1;   /* gris frío suave — sección alterna */
  --surface-color:    #ffffff;
  border-top: 3px solid transparent;
  border-image: var(--flag-segments) 1;
}
.dark-background {
  --background-color: #1e1208;
  --default-color:    #f2e8d0;
  --heading-color:    #ffffff;
  --surface-color:    #2e1e0c;
  --contrast-color:   #ffffff;
}

/* ── Reset base ───────────────────────────────────────────────────── */
:root { scroll-behavior: smooth; }
body { color:var(--default-color); background-color:var(--background-color); font-family:var(--default-font); }
a { color:var(--accent-color); text-decoration:none; transition:.3s; }
a:hover { color:color-mix(in srgb, var(--accent-color), transparent 20%); }
h1,h2,h3,h4,h5,h6 { color:var(--heading-color); font-family:var(--heading-font); }

/* ── PHP Form ─────────────────────────────────────────────────────── */
.php-email-form .error-message  { display:none; background:#df1529; color:#fff; text-align:left; padding:15px; margin-bottom:24px; font-weight:600; }
.php-email-form .sent-message   { display:none; color:#fff; background:#059652; text-align:center; padding:15px; margin-bottom:24px; font-weight:600; }
.php-email-form .loading        { display:none; background:var(--surface-color); text-align:center; padding:15px; margin-bottom:24px; }
.php-email-form .loading:before { content:""; display:inline-block; border-radius:50%; width:24px; height:24px; margin:0 10px -6px 0; border:3px solid var(--accent-color); border-top-color:var(--surface-color); animation:form-loading 1s linear infinite; }
@keyframes form-loading { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* ── Header ───────────────────────────────────────────────────────── */
.header {
  color:var(--default-color);
background-color:#ffffff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:12px 0;
  transition:all .4s;
  z-index:997;
  border-bottom:2px solid transparent;
  border-image:var(--flag-segments) 1;
  box-shadow:none;
}
.header .logo { line-height:1; }
.header .logo img { max-height:36px; margin-right:8px; }
/* Selector doble: h1 en portada, span.sitename en páginas internas (corrección de jerarquía h1) */
.header .logo h1,
.header .logo span.sitename { font-size:26px; margin:0; font-weight:400; color:var(--heading-color); font-family:var(--heading-font); letter-spacing:.01em; display:block; }
.header .logo i { font-size:24px; margin-right:8px; color:var(--accent-color); }
/* Emblema original — obelisco/monolito de la Plaza de Armas (SVG inline) */
.header .logo .logo-mark { height:34px; width:auto; margin-right:11px; color:var(--accent-color); flex-shrink:0; display:block; transition:color .35s, transform .45s cubic-bezier(.22,1,.36,1); }
.header .logo:hover .logo-mark { color:var(--accent2-color); transform:translateY(-1px); }
@media (max-width:1200px) { .header .logo .logo-mark { height:28px; margin-right:9px; } }
.header .header-social-links { padding-right:15px; }
.header .header-social-links a { color:color-mix(in srgb,var(--default-color),transparent 40%); padding-left:8px; display:inline-block; transition:.3s; font-size:16px; }
.header .header-social-links a:hover { color:var(--accent-color); }
.header .header-social-links a i { line-height:0; }
@media (max-width:1200px) { .header .logo h1{font-size:22px;} .header .logo i{font-size:20px;} }

/* ── Scroll top ───────────────────────────────────────────────────── */
.scroll-top { position:fixed; visibility:hidden; opacity:0; right:15px; bottom:15px; z-index:99999; background:var(--accent-color); width:40px; height:40px; border-radius:4px; transition:all .4s; }
.scroll-top i { font-size:24px; color:#1c1208; line-height:0; }   /* ícono oscuro sobre dorado: AA ~8:1 */
.scroll-top:hover { filter:brightness(1.08); }
.scroll-top.active { visibility:visible; opacity:1; }

/* ── Preloader ────────────────────────────────────────────────────── */
#preloader { position:fixed; inset:0; z-index:999999; overflow:hidden; background:#14131a; transition:all .6s ease-out; }
#preloader:before, #preloader:after { content:""; background-color:#14131a; position:absolute; inset:0; width:50%; height:100%; transition:all .3s ease 0s; z-index:-1; }
#preloader:after { right:0; left:auto; }
/* Estandarte vertical = bandera de Encarnación (rojo · amarillo · azul) que se despliega */
#preloader .line {
  position:absolute; inset:0; margin:auto; width:4px; height:0%; z-index:100000; border-radius:3px;
  background:linear-gradient(to bottom,
    var(--flag-red) 0%,    var(--flag-red) 33.3%,
    var(--flag-yellow) 33.3%, var(--flag-yellow) 66.6%,
    var(--flag-blue) 66.6%, var(--flag-blue) 100%);
  animation:preload 1.5s ease infinite;
}
#preloader .line:before { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--flag-yellow); top:-3px; left:-1.5px; box-shadow:0 0 10px rgba(236,198,74,.55); }
#preloader .line:after { content:""; position:absolute; width:15px; height:15px; border-radius:50%; background:rgba(236,198,74,.28); top:-6px; left:-5.5px; animation:preload-pulse 1.5s ease infinite; }
@keyframes preload { 0%{height:0%;top:50%} 50%{height:100%;top:0} 100%{height:0%;top:50%} }
@keyframes preload-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.6)} }
#preloader.loaded .line { animation:none; opacity:0; }
#preloader.loaded .line:after { animation:none; }
#preloader.loaded:before, #preloader.loaded:after { animation:preloaderfinish 300ms ease-in-out 500ms forwards; }
@keyframes preloaderfinish { 0%{width:5%} 100%{width:0;visibility:hidden} }

/* ── Enlace de salto de navegación — visible solo al recibir foco con teclado ─── */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  background: var(--accent-color);
  color: #fff;
  padding: .6rem 1.4rem;
  border-radius: 0 0 4px 4px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: top .2s;
}
.skip-nav:focus { top: 0; color: #fff; }

/* ── Accesibilidad: indicadores de foco visibles para navegación con teclado ─── */
:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  border-radius: 2px;
}
.navmenu a:focus-visible { outline-offset: 2px; }
.btn-gold:focus-visible,
.btn-get-started:focus-visible,
.btn-secondary-cta:focus-visible { outline-offset: 4px; }
.mon-card a:focus-visible,
.mc-link:focus-visible { outline-offset: 2px; }

/* ── Desactivar animaciones AOS en móvil ─────────────────────────── */
@media (max-width:768px) { [data-aos-delay] { transition-delay:0!important; } }

/* ── Breadcrumbs ──────────────────────────────────────────────────── */
.breadcrumbs { padding:12px 0; font-size:14px; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.breadcrumbs ol a { color:var(--accent-color); }
.breadcrumbs ol li+li { padding-left:10px; }
.breadcrumbs ol li+li::before { content:"/"; padding-right:10px; color:color-mix(in srgb,var(--default-color),transparent 60%); }

/* ── Sección global ───────────────────────────────────────────────── */
section,.section { color:var(--default-color); background-color:var(--background-color); padding:72px 0; scroll-margin-top:90px; overflow:clip; }
/* Secciones crema: gradiente de profundidad sutil para dar cuerpo al fondo */
section:not(.light-background):not(.dark-background):not(.cta-section):not(.hero):not(.gallery):not(.footer),
.section:not(.light-background):not(.dark-background):not(.cta-section):not(.hero):not(.gallery) {
  background: var(--background-color);
}
.section-title { text-align:center; padding-bottom:60px; position:relative; }
.section-title h2 { font-size:32px; font-weight:700; margin-bottom:15px; padding-bottom:15px; position:relative; }
.section-title h2:before { content:""; position:absolute; display:block; width:160px; height:1px; background:color-mix(in srgb,var(--default-color),transparent 60%); left:0; right:0; bottom:1px; margin:auto; }
.section-title h2:after  { content:""; position:absolute; display:block; width:60px; height:3px; background:var(--accent-color); left:0; right:0; bottom:0; margin:auto; }
.section-title p { margin-bottom:0; }

/* ── Cabecera de página (banner) ──────────────────────────────────── */
.page-title {
  color:#fff;
  position:relative;
  overflow:hidden;
  background-image: url('../img/plaza-hero.jpg.webp');
  background-size:cover;
  background-position:center 62%;
  background-color:#1a1208; /* fallback */
}
.page-title::before {
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(165deg,
    rgba(20,8,2,0.80) 0%,
    rgba(12,10,8,0.68) 48%,
    rgba(6,8,18,0.80) 100%
  );
}
.page-title .heading {
  padding:128px 0 112px; position:relative; z-index:2;
}
.page-title .heading h1 { font-family:"Playfair Display", Georgia, serif; font-size:56px; font-weight:700; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,0.55); line-height:1.14; font-kerning:normal; font-feature-settings:"kern" 1, "liga" 1; }
.page-title .heading p { color:rgba(248,238,212,0.90); font-size:1rem; }
.page-title .heading .cta-btn {
  font-family:var(--label-font);
  color:#1c1208; background:var(--accent-color);
  font-weight:600; font-size:12px; display:inline-block;
  margin-top:20px; padding:11px 36px; border-radius:3px;
  text-transform:uppercase; letter-spacing:.08em;
  text-shadow:0 1px 2px rgba(0,0,0,.42);   /* legibilidad del blanco sobre dorado */
  transition:background .35s, transform .25s;
}
.page-title .heading .cta-btn:hover { background:var(--accent2-color); transform:translateY(-2px); }
/* Barra de breadcrumb — dorado de bandera con texto oscuro (sin café, alto contraste) */
.page-title nav { background:var(--flag-gold); padding:13px 0; position:relative; z-index:2; }
.page-title nav ol { display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; gap:6px; font-size:13px; }
.page-title nav ol li a { color:rgba(38,24,8,0.72); font-weight:500; }
.page-title nav ol li a:hover { color:#241808; }
.page-title nav ol li.current { color:#241808; font-weight:700; }
.page-title nav ol li+li::before { content:"/"; padding-right:6px; color:rgba(38,24,8,0.40); }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { width:100%; min-height:88vh; position:relative; padding:0; display:flex; align-items:center; overflow:hidden; background-color:#1e1208; }
.hero-bg {
  position:absolute; inset:0;
  background-image: url('../img/plaza-hero.jpg.webp');
  background-size:cover; background-position:center 18%; background-repeat:no-repeat;
  transform:scale(1.04); transition:transform 8s ease;
}
.hero:hover .hero-bg { transform:scale(1); }
/* Capa de coherencia muy sutil — la foto ya aporta todos los colores */
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background: rgba(10,4,0,0.08);
  pointer-events:none;
}
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  /* Capa oscura aligerada — el cielo, las banderas y el verde se leen con viveza */
  background: linear-gradient(
    to bottom,
    rgba(6,2,0,0.18) 0%,
    rgba(6,2,0,0.28) 42%,
    rgba(6,2,0,0.40) 65%,
    rgba(4,2,10,0.78) 100%
  );
}
.hero .container { position:relative; z-index:2; }
.hero h1 {
  color:#fff; margin:0 auto 18px; font-weight:700;
  font-family:"Playfair Display", Georgia, serif;
  text-shadow:0 3px 22px rgba(0,0,0,0.58); line-height:1.12;
  max-width:520px;   /* P1 compacta — bloque editorial centrado */
}
/* "Encarnación": la palabra en dorado itálico (amarillo sobrio de bandera) + subrayado fino */
.hero h1 .underlight {
  position:relative; z-index:1; display:inline-block;
  font-style:italic; color:var(--flag-gold);
  padding:0 2px 8px;
}
.hero h1 .underlight:before {
  content:""; position:absolute; height:3px; bottom:0; left:2px; right:2px;
  background:var(--flag-gold); z-index:-1; opacity:.85; border-radius:2px;
}
.hero p { color:rgba(250,240,215,0.92); margin-bottom:36px; font-size:17px; line-height:1.7; }
@media (max-width:768px) { .hero{min-height:70vh;} .hero h1{font-size:32px;} }
.hero .btn-get-started {
  font-family:var(--label-font);
  color:#fff; background:var(--accent2-color); font-weight:600; font-size:12px;
  display:inline-block; padding:14px 42px; border-radius:3px; transition:.4s;
  text-transform:uppercase; letter-spacing:.08em; border:2px solid var(--accent2-color);
  margin-right:12px;
}
.hero .btn-get-started:hover { background:transparent; border-color:rgba(255,255,255,0.80); box-shadow:none; color:#fff; }
.hero .btn-secondary-cta {
  font-family:var(--label-font);
  color:rgba(255,255,255,0.94); background:rgba(255,255,255,0.08); font-weight:500; font-size:12px;
  display:inline-block; padding:14px 36px; border-radius:3px;
  border:2px solid rgba(255,255,255,0.50); transition:.4s;
  text-transform:uppercase; letter-spacing:.08em; text-decoration:none;
}
.hero .btn-secondary-cta:hover { border-color:rgba(255,255,255,0.90); background:rgba(255,255,255,0.14); color:#fff; }
.hero .scroll-indicator {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center;
  gap:4px; opacity:.65; animation:scroll-nudge 2s infinite;
}
.hero .scroll-indicator span { font-size:12px; color:#fff; letter-spacing:.12em; text-transform:uppercase; }
.hero .scroll-indicator i { font-size:18px; color:var(--accent-color); }
@keyframes scroll-nudge { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }

/* ── Gallery cards ────────────────────────────────────────────────── */
.gallery .gallery-item { overflow:hidden; border-radius:8px; position:relative; background:var(--surface-color); border:1px solid rgba(200,130,14,0.14); transition:all .3s; }
.gallery .gallery-item:hover { box-shadow:0 4px 14px rgba(44,28,10,0.10);
transform:none; }
/* will-change declarado en reposo para optimizar transiciones GPU en hover */
.gallery .gallery-item img { transition:.5s; height:220px; width:100%; object-fit:cover; filter:saturate(.9); will-change:filter, transform; }
.gallery .gallery-item .gallery-links {
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:0; left:0; right:0; bottom:0;
  opacity:0; transition:.3s; background:rgba(20,10,4,0.68); z-index:3;
}
.gallery .gallery-item .gallery-links a {
  color:#fff; font-size:24px; text-align:center;
  width:50px; height:50px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.60);
  display:flex; align-items:center; justify-content:center;
  transition:.3s; margin:0 5px;
}
.gallery .gallery-item .gallery-links a:hover { background:var(--accent-color); border-color:var(--accent-color); color:#1c1208; }
.gallery .gallery-item .gallery-links a i { line-height:0; font-size:18px; }
.gallery .gallery-item:hover .gallery-links { opacity:1; }
.gallery .gallery-item:hover img { transform:scale(1.07); filter:saturate(1.1); }

/* ── Nav menu ─────────────────────────────────────────────────────── */
@media (min-width:1200px) {
  .navmenu { padding:0; }
  .navmenu ul { margin:0; padding:0; display:flex; list-style:none; align-items:center; }
  .navmenu li { position:relative; }
  .navmenu>ul>li { white-space:nowrap; padding:15px 14px; }
  .navmenu>ul>li:last-child { padding-right:0; }
  .navmenu a,.navmenu a:focus {
    color:var(--nav-color); font-size:13px; padding:0;
    font-family:var(--nav-font); font-weight:500; letter-spacing:.04em;
    text-transform:uppercase; display:flex; align-items:center;
    justify-content:space-between; white-space:nowrap; transition:.3s; position:relative;
  }
  .navmenu a i,.navmenu a:focus i { font-size:12px; line-height:0; margin-left:5px; }
  .navmenu>ul>li>a:before {
    content:""; position:absolute; bottom:-4px; left:0; right:0;
    height:2px; background:linear-gradient(90deg,var(--accent-color),var(--accent2-color)); transform:scaleX(0);
    transform-origin:center; transition:transform .3s;
  }
  .navmenu>ul>li>a:hover:before,
  .navmenu>ul>li.active>a:before { transform:scaleX(1); }
  .navmenu a:hover,.navmenu .active,.navmenu .active:focus { color:var(--nav-hover-color); }
  .navmenu .dropdown ul {
    display:block; position:absolute; left:0; top:100%;
    visibility:hidden; opacity:0;
    background:var(--nav-dropdown-background-color);
    border:1px solid rgba(200,130,14,0.18); padding:10px 0;
    border-radius:6px; z-index:99; box-shadow:0 8px 28px rgba(0,0,0,0.14);
    transition:.3s; min-width:180px;
  }
  .navmenu .dropdown ul li { min-width:180px; }
  .navmenu .dropdown ul a { padding:8px 20px; font-size:13px; color:var(--nav-dropdown-color); font-weight:500; }
  .navmenu .dropdown ul a:hover { color:var(--accent-color); }
  .navmenu .dropdown:hover>ul { opacity:1; visibility:visible; }
}

/* Marca del menú móvil (inyectada por JS) — nunca visible en escritorio */
.mobile-nav-brand { display:none !important; }

@media (max-width:1199px) {
  /* Sin backdrop-filter en cabecera móvil: evita que position:fixed del menú
     quede atrapado en la franja de ~60 px (ver body.mobile-nav-active abajo) */
  .header {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .header .container-fluid { flex-wrap:nowrap; gap:.5rem; }
  .header .logo { min-width:0; flex:1 1 auto; }
  .header .logo h1,
  .header .logo span.sitename {
    font-size:clamp(.95rem, 4.2vw, 1.25rem);
    line-height:1.15;
    min-width:0;            /* flex-item: permite que el nombre se trunque en vez de desbordar */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .header .navmenu { flex:0 0 auto; position:relative; }

  /* Botón hamburguesa — editorial, área táctil 44 px */
  .mobile-nav-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:0;
    margin:0;
    border:1px solid rgba(200,130,14,0.38);
    border-radius:2px;
    background:rgba(248,249,251,0.95);
    color:var(--nav-color);
    font-size:26px;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
    z-index:9998;
    transition:background .28s, border-color .28s, color .28s, transform .28s;
  }
  .mobile-nav-toggle:hover {
    border-color:var(--accent-color);
    color:var(--nav-hover-color);
    transform:scale(1.04);
  }
  .mobile-nav-toggle i {
    line-height:1;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
  }

  .navmenu { padding:0; z-index:9997; }
  .navmenu>ul {
    display:none;
    list-style:none;
    margin:0;
    padding:0;
  }

  /* Marca editorial dentro del menú (inyectada por main.js) */
  .mobile-nav-brand {
    display:none;
    flex-direction:column;
    gap:.35rem;
    padding:0 1.75rem;
    pointer-events:none;
  }
  .mobile-nav-brand__title {
    font-family:var(--heading-font);
    font-size:clamp(1.35rem, 5vw, 1.75rem);
    font-weight:600;
    color:var(--heading-color);
    line-height:1.12;
    letter-spacing:.01em;
  }
  .mobile-nav-brand__place {
    font-family:var(--label-font);
    font-size:.70rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(58,40,21,0.52);
  }

  /* ── Menú abierto — capa cinematográfica (misma familia que CTA / hero) ── */
  body.mobile-nav-active { overflow:hidden; }
  body.mobile-nav-active #header {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    min-height:100dvh;
    z-index:10050;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  body.mobile-nav-active .header .container-fluid {
    position:static;
    width:100%;
    height:100%;
    min-height:100dvh;
    max-width:none;
    padding:0;
  }
  body.mobile-nav-active .header .logo { visibility:hidden; }

  body.mobile-nav-active .mobile-nav-toggle {
    position:fixed;
    top:18px;
    right:18px;
    color:var(--nav-color);
    border:1px solid rgba(200,130,14,0.42);
    border-radius:2px;
    background:rgba(248,249,251,0.98);
    box-shadow:0 4px 18px rgba(44,28,10,0.10);
    z-index:10052;
  }
  body.mobile-nav-active .mobile-nav-toggle:hover {
    background:#fff;
    border-color:var(--accent-color);
    color:var(--nav-hover-color);
    transform:scale(1.05);
  }
  body.mobile-nav-active .mobile-nav-toggle i { transform:rotate(90deg); }

  /* Fondo pergamino claro — misma paleta que la cabecera de escritorio */
  body.mobile-nav-active .navmenu {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:10051;
    background-color:var(--nav-mobile-background-color);
    background-image:
      radial-gradient(ellipse 75% 45% at 100% 0%, rgba(200,130,14,0.10) 0%, transparent 55%),
      radial-gradient(ellipse 50% 38% at 0% 100%, rgba(200,66,40,0.07) 0%, transparent 50%),
      linear-gradient(180deg, #f6f7f8 0%, #ecedf1 100%);
  }
  /* Barra dorada superior — eco del hero */
  body.mobile-nav-active .navmenu::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg, transparent 0%, var(--accent-color) 30%, var(--accent-color) 70%, transparent 100%);
    opacity:.75;
    z-index:2;
    pointer-events:none;
  }

  body.mobile-nav-active .mobile-nav-brand {
    display:flex !important;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    z-index:2;
  }

  body.mobile-nav-active .navmenu>ul {
    display:block;
    position:absolute;
    top:148px;
    left:1.75rem;
    right:1.75rem;
    bottom:28px;
    margin:0;
    padding:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    border-top:1px solid rgba(200,130,14,0.18);
  }

  /* Enlaces principales — misma voz que escritorio (versalitas, subrayado ámbar) */
  body.mobile-nav-active .navmenu>ul>li {
    border-bottom:1px solid rgba(200,130,14,0.14);
  }
  body.mobile-nav-active .navmenu>ul>li>a {
    font-family:var(--nav-font);
    font-size:.82rem;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--nav-color);
    padding:1.15rem .35rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    transition:color .28s;
  }
  body.mobile-nav-active .navmenu>ul>li>a::before {
    content:"";
    position:absolute;
    left:.35rem;
    bottom:.85rem;
    width:28px;
    height:2px;
    background:linear-gradient(90deg, var(--accent-color), var(--accent2-color));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
  }
  body.mobile-nav-active .navmenu>ul>li>a:hover,
  body.mobile-nav-active .navmenu>ul>li>a.active {
    color:var(--accent2-color);
  }
  body.mobile-nav-active .navmenu>ul>li>a:hover::before,
  body.mobile-nav-active .navmenu>ul>li>a.active::before {
    transform:scaleX(1);
  }

  /* Flecha de submenú — solo el chevron, sin caja (como en escritorio) */
  body.mobile-nav-active .navmenu a i.toggle-dropdown {
    display:inline-block !important;
    font-size:12px;
    line-height:0;
    margin-left:8px;
    width:auto;
    height:auto;
    min-width:0;
    padding:0;
    border:none;
    border-radius:0;
    background:transparent !important;
    color:var(--nav-color);
    transition:transform .38s cubic-bezier(.22,1,.36,1), color .28s;
  }
  body.mobile-nav-active .navmenu .dropdown.active>a i.toggle-dropdown {
    transform:rotate(180deg);
    color:var(--accent-color);
  }

  /* Submenú — despliegue suave al tocar la flecha */
  body.mobile-nav-active .navmenu .dropdown ul {
    display:block;
    max-height:0;
    overflow:hidden;
    margin:0;
    padding:0 0 0 .85rem;
    border-left:1px solid rgba(200,130,14,0.28);
    background:transparent;
    box-shadow:none;
    transition:max-height .45s cubic-bezier(.22,1,.36,1), padding .35s ease, opacity .35s ease;
    opacity:0;
  }
  body.mobile-nav-active .navmenu .dropdown ul.dropdown-active {
    max-height:280px;
    padding:.35rem 0 .85rem .85rem;
    opacity:1;
  }
  body.mobile-nav-active .navmenu .dropdown ul a {
    font-family:var(--label-font);
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.04em;
    text-transform:none;
    color:var(--nav-dropdown-color);
    padding:.7rem .35rem;
  }
  body.mobile-nav-active .navmenu .dropdown ul a:hover,
  body.mobile-nav-active .navmenu .dropdown ul a.active {
    color:var(--accent2-color);
  }
}

/* Animaciones del menú móvil — entrada escalonada (respeta reduced-motion) */
@media (prefers-reduced-motion: no-preference) and (max-width:1199px) {
  @keyframes mobileNavFadeIn {
    from { opacity:0; }
    to   { opacity:1; }
  }
  @keyframes mobileNavBrandIn {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes mobileNavItemIn {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
  }
  body.mobile-nav-active .navmenu {
    animation:mobileNavFadeIn .42s ease both;
  }
  body.mobile-nav-active .mobile-nav-brand {
    animation:mobileNavBrandIn .55s cubic-bezier(.22,1,.36,1) .08s both;
  }
  body.mobile-nav-active .navmenu>ul>li {
    animation:mobileNavItemIn .52s cubic-bezier(.22,1,.36,1) both;
  }
  body.mobile-nav-active .navmenu>ul>li:nth-child(1) { animation-delay:.14s; }
  body.mobile-nav-active .navmenu>ul>li:nth-child(2) { animation-delay:.22s; }
  body.mobile-nav-active .navmenu>ul>li:nth-child(3) { animation-delay:.30s; }
}

/* ── About ────────────────────────────────────────────────────────── */
.about .content h2 { font-weight:700; font-size:24px; }
.about .content ul { list-style:none; padding:0; }
.about .content ul li { padding-bottom:10px; display:flex; }
.about .content ul i { font-size:1.25rem; margin-right:4px; color:var(--accent-color); }

/* (Bloques de plantilla sin uso retirados: Pricing, Gallery-single/portfolio,
   btn-visit, Contact — no existen en ninguna página de este sitio.) */

/* ── Footer ───────────────────────────────────────────────────────── */
.footer {
  /* Bandera de Encarnación con textura de pincel/crayón (SVG incrustado, bordes rugosos) */
  --flag-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='150' viewBox='0 0 250 150'%3E%3Cdefs%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.16' numOctaves='3' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='13' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23c)'%3E%3Crect x='45' y='42' width='160' height='25' fill='%23d83b2b'/%3E%3Crect x='45' y='65' width='160' height='25' fill='%23edc63f'/%3E%3Crect x='45' y='88' width='160' height='25' fill='%232358ad'/%3E%3C/g%3E%3C/svg%3E");
  color:var(--default-color);
  background:#ffffff;
  font-size:14px; padding:60px 0 32px;
  border-top:1px solid rgba(0,0,0,.07);
  position:relative; overflow:hidden;
}
/* Decoración "swoosh": cintas fluidas de los colores de la bandera
   (rojo·amarillo·azul) que se cruzan a lo ancho de TODO el footer, sobre el
   fondo blanco. SVG vectorial estirado al ancho completo; los dos haces se
   abren hacia arriba/abajo al centro, dejando libre la franja del texto. */
.footer::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.85;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-60,70 C280,70 430,236 720,236 S1160,70 1500,70' stroke='%23ecc63f' stroke-width='11'/%3E%3Cpath d='M-60,87 C280,87 430,253 720,253 S1160,87 1500,87' stroke='%232358ad' stroke-width='6'/%3E%3Cpath d='M-60,57 C280,57 430,223 720,223 S1160,57 1500,57' stroke='%23d83b2b' stroke-width='3'/%3E%3Cpath d='M-60,232 C280,232 430,66 720,66 S1160,232 1500,232' stroke='%232358ad' stroke-width='10'/%3E%3Cpath d='M-60,249 C280,249 430,83 720,83 S1160,249 1500,249' stroke='%23ecc63f' stroke-width='5'/%3E%3Cpath d='M-60,221 C280,221 430,55 720,55 S1160,221 1500,221' stroke='%23d83b2b' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
}
.footer::after { content: none; }   /* la bandera-crayón de esquina se retira: el swoosh es la nueva decoración */
.footer .sitename { color:var(--heading-color); font-family:var(--heading-font); font-weight:600; }
.footer .copyright { position:relative; }
/* Detalle pintoresco — tres puntos de la bandera como separador */
.footer .copyright::before {
  content:""; display:block; width:54px; height:7px; margin:0 auto 20px;
  background:
    radial-gradient(circle 3.5px at 8px 50%,  var(--flag-red) 96%, transparent 100%),
    radial-gradient(circle 3.5px at 27px 50%, var(--flag-yellow) 96%, transparent 100%),
    radial-gradient(circle 3.5px at 46px 50%, var(--flag-blue) 96%, transparent 100%);
  background-repeat:no-repeat;
}
.footer .copyright p { color:rgba(58,40,21,0.82); margin:0; font-size:.95rem; }
.footer .social-links { margin:16px 0; }
.footer .social-links a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(58,40,21,0.22); color:rgba(58,40,21,0.62); margin:0 4px; font-size:16px; transition:.3s; }
.footer .social-links a:hover { color:#1c1208; border-color:var(--accent-color); background:var(--accent-color); }
.footer .credits { color:rgba(58,40,21,0.86); font-size:13px; margin-top:10px; text-align:center; letter-spacing:.02em; }   /* 13px + tono más oscuro: AA holgado */
.footer .credits a { color:rgba(58,40,21,0.78); }

/* ── Divisor dorado ───────────────────────────────────────────────── */
.gold-divider {
  width:64px; height:3px;
  background:var(--flag-segments);
  margin:.75rem auto 1.5rem; border-radius:2px;
}
.gold-divider.left { margin-left:0; margin-right:auto; }

/* ══════════════════════════════════════════════════════════════════
   COMPONENTES COMPARTIDOS
   ══════════════════════════════════════════════════════════════════ */

/* ── Cifras cívicas — identidad tricolor patrimonial ─────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(200,130,14,0.24); border-radius:3px; overflow:hidden; box-shadow:0 4px 20px rgba(44,28,10,0.10); }
@media(max-width:767px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
.stat-box {
  background:#ffffff;
  padding:1.8rem 1.4rem; text-align:left; transition:background .3s; position:relative; overflow:hidden;
}
/* Barra lateral de color — identidad tricolor cívica */
.stat-box::before { content:""; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--accent-color); }
.stat-box:nth-child(2)::before { background:var(--accent2-color); }
.stat-box:nth-child(3)::before { background:var(--blue-accent); }
.stat-box:nth-child(4)::before { background:var(--green-accent); }
.stat-box:hover { background:#ffffff; }
/* Cifras principales — Fraunces variable: opsz automático según tamaño, numerales tabulares */
.stat-box .num {
  font-family:var(--num-font); font-size:2.7rem; color:var(--accent-color);
  display:block; line-height:1; font-weight:600; letter-spacing:.005em;
  font-optical-sizing:auto; font-variant-numeric:tabular-nums lining-nums;
}
.stat-box:nth-child(2) .num { color:var(--accent2-color); }
.stat-box:nth-child(3) .num { color:var(--blue-accent); }
.stat-box:nth-child(4) .num { color:var(--green-accent); }
/* Etiqueta de cifra — Source Sans 3 versalitas, espaciado ligeramente más abierto para legibilidad */
.stat-box .lbl { font-size:.70rem; font-family:var(--label-font); font-style:normal; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--heading-color); opacity:.60; display:block; margin-top:10px; line-height:1.45; }

/* ── Section header (.sh) ─────────────────────────────────────────── */
.sh { margin-bottom:2.5rem; }
.sh .over {
  font-family:var(--label-font);
  font-size:.70rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; color:var(--accent2-color);
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px; text-shadow:none;
}
.sh .over::before {
  content:""; display:inline-block; width:32px; height:3px;
  background:var(--flag-segments);
  border-radius:2px; flex-shrink:0;
}
.sh h2 {
  font-family:var(--heading-font); font-size:2.5rem; font-weight:600;
  color:var(--heading-color); margin:0 0 10px; line-height:1.12;
  font-kerning:normal; font-feature-settings:"kern" 1, "liga" 1;
}
.sh .sub { font-size:.94rem; opacity:.78; line-height:1.78; max-width:600px; }
.sh .gold-divider { width:60px; height:3px; background:var(--flag-segments); border-radius:2px; margin:0; }
.sh.centered { text-align:center; }
.sh.centered .over { justify-content:center; }
.sh.centered .gold-divider { margin:0 auto; }
.sh.centered .sub { margin:0 auto; }

/* ── Section title custom ────────────────────────────────────────── */
.section-title-custom { margin-bottom:2.5rem; }
.section-title-custom .overline {
  font-family:var(--label-font);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent2-color); font-weight:700; display:flex;
  align-items:center; gap:10px; margin-bottom:.4rem;
}
.section-title-custom .overline::before { content:""; display:inline-block; width:28px; height:3px; background:var(--flag-segments); border-radius:2px; }
.section-title-custom h2 { font-family:var(--heading-font); font-size:2rem; color:var(--heading-color); margin:0; }

/* ── CTA section overline ─────────────────────────────────────────── */
.cta-section .over {
  font-family:var(--label-font);
  font-size:.70rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  color:var(--accent2-color); display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.cta-section .over::before { content:""; display:inline-block; width:28px; height:3px; background:var(--flag-segments); border-radius:2px; }

/* ── Tarjeta de monumento — directorio patrimonial ───────────────────── */
.mon-card {
  background:#ffffff;
  border-radius:4px; overflow:hidden;
  border:1px solid rgba(200,130,14,0.16); height:100%;
  transition:all .38s; box-shadow:0 2px 12px rgba(44,28,10,0.07);
}
.mon-card:hover {
  box-shadow:0 4px 14px rgba(44,28,10,0.10);
transform:none;
}
.mon-card .mc-img { height:210px; overflow:hidden; position:relative; }
.mon-card .mc-img img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; filter:saturate(.88) brightness(1.02); will-change:filter, transform; }
.mon-card:hover .mc-img img { transform:scale(1.08); filter:saturate(1.10) brightness(1.03); }
/* Etiqueta de clasificación — rectangular, estilo catálogo de museo */
.mon-card .mc-tag {
  position:absolute; top:12px; left:12px; background:var(--accent-color); color:#1c1208;
  font-size:.70rem; font-family:var(--label-font); font-weight:700; padding:3px 10px;
  border-radius:2px;
  letter-spacing:.10em; text-transform:uppercase; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,0.22);
}
.mon-card .mc-body {
  padding:1.4rem 1.5rem 1.65rem;
  border-top:1px solid rgba(200,130,14,0.10);
}
/* h3 añadido como alias semántico de h5 en tarjetas de monumento */
.mon-card .mc-body h5,
.mon-card .mc-body h3 { font-family:var(--heading-font); color:var(--heading-color); font-size:1.14rem; margin:0 0 8px; line-height:1.25; }
.mon-card .mc-body p { font-size:.84rem; color:var(--default-color); opacity:.80; line-height:1.68; margin:0 0 1.1rem; }
.mon-card .mc-body a.mc-link {
  font-size:.72rem; font-family:var(--label-font); font-weight:600; color:var(--accent-color);
  text-transform:uppercase; letter-spacing:.09em; text-decoration:none;
  transition:.25s; display:inline-flex; align-items:center; gap:4px;
}
.mon-card .mc-body a.mc-link:hover { color:var(--accent2-color); letter-spacing:.12em; }
/* Borde superior de color por tema — eliminado: solo dos de cuatro tarjetas tenían
   clase de tema, dejando el set visualmente inconsistente. La identidad visual la
   aporta la fotografía y la etiqueta de fecha (.mc-tag). */

/* ── Marco documental de archivo — imagen de monumento sin foto ───── */
.img-placeholder {
  width:100%; height:200px;
  background:linear-gradient(160deg, #f4e8cc 0%, #eadaaa 100%);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  color:var(--accent-color); position:relative; overflow:hidden;
  border:1px solid rgba(200,130,14,0.18);
  padding:0 1rem 1rem;
}
/* Cuadrícula catastral — rejilla ortogonal de referencia */
.img-placeholder::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(200,130,14,0.05) 29px,rgba(200,130,14,0.05) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(200,130,14,0.05) 29px,rgba(200,130,14,0.05) 30px);
}
/* Banda de etiqueta inferior */
.img-placeholder::after {
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:52px; background:rgba(200,130,14,0.10);
  border-top:1px solid rgba(200,130,14,0.18); pointer-events:none; z-index:0;
}
/* Ícono como marca de agua al centro */
.img-placeholder i {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-62%);
  font-size:4.5rem; opacity:.16; margin:0; pointer-events:none; color:var(--accent-color);
}
.img-placeholder .ph-title {
  font-family:var(--heading-font); font-size:1rem; font-weight:600; font-style:italic;
  color:var(--heading-color); opacity:.85; display:block;
  margin:0; position:relative; z-index:1; text-align:left; padding:0; line-height:1.25;
}
.img-placeholder .ph-note {
  font-size:.70rem; font-family:var(--nav-font); letter-spacing:.04em;
  color:var(--accent-color); opacity:.72; display:block; margin-top:4px;
  position:relative; z-index:1;
}
.img-placeholder > span:not(.ph-title):not(.ph-note) {
  font-size:.70rem; letter-spacing:.03em; opacity:.58;
  position:relative; z-index:1; text-align:left; padding:0;
}
.img-placeholder.lg { height:420px; }
@media (max-width: 767px) { .img-placeholder.lg { height:280px; } }

/* ── Temas contextuales ───────────────────────────────────────────── */

/* Naturaleza — verde suave */
.img-placeholder.theme-nature {
  background:linear-gradient(160deg, #ddf0e0 0%, #c4e4cc 100%);
  border-color:rgba(45,122,58,0.20);
}
.img-placeholder.theme-nature::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(45,122,58,0.05) 29px,rgba(45,122,58,0.05) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(45,122,58,0.05) 29px,rgba(45,122,58,0.05) 30px);
}
.img-placeholder.theme-nature::after { background:rgba(45,122,58,0.10); border-top-color:rgba(45,122,58,0.18); }
.img-placeholder.theme-nature i { color:#1a5228; opacity:.09; }
.img-placeholder.theme-nature .ph-title { color:#0c2614; opacity:.78; }
.img-placeholder.theme-nature .ph-note { color:#1a5228; opacity:.68; }

/* Jardín — verde teal suave */
.img-placeholder.theme-garden {
  background:linear-gradient(160deg, #d4eee0 0%, #bce0cc 100%);
  border-color:rgba(30,100,70,0.18);
}
.img-placeholder.theme-garden::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(30,100,70,0.05) 29px,rgba(30,100,70,0.05) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(30,100,70,0.05) 29px,rgba(30,100,70,0.05) 30px);
}
.img-placeholder.theme-garden::after { background:rgba(30,100,70,0.10); border-top-color:rgba(30,100,70,0.16); }
.img-placeholder.theme-garden i { color:#0e4a2e; opacity:.09; }
.img-placeholder.theme-garden .ph-title { color:#08261a; opacity:.75; }
.img-placeholder.theme-garden .ph-note { color:#0e4a2e; opacity:.65; }

/* Monumento — crema cálida ámbar */
.img-placeholder.theme-monument {
  background:linear-gradient(160deg, #f6edd8 0%, #eddfc0 100%);
  border-color:rgba(200,130,14,0.22);
}
.img-placeholder.theme-monument::after { background:rgba(200,130,14,0.12); border-top-color:rgba(200,130,14,0.20); }
.img-placeholder.theme-monument i { color:#a06800; opacity:.09; }
.img-placeholder.theme-monument .ph-title { color:#3e2000; opacity:.80; }
.img-placeholder.theme-monument .ph-note { color:#a06800; opacity:.70; }

/* Cívico — crema solar */
.img-placeholder.theme-civic {
  background:linear-gradient(160deg, #f8f0d8 0%, #f0e4c0 100%);
  border-color:rgba(200,160,14,0.20);
}
.img-placeholder.theme-civic::after { background:rgba(200,160,14,0.10); border-top-color:rgba(200,160,14,0.18); }
.img-placeholder.theme-civic i { color:#8a6a00; opacity:.09; }
.img-placeholder.theme-civic .ph-title { color:#3e2c00; opacity:.78; }
.img-placeholder.theme-civic .ph-note { color:#8a6a00; opacity:.68; }

/* Memorial — azul lavanda suave */
.img-placeholder.theme-memorial {
  background:linear-gradient(160deg, #dde8f4 0%, #c8d8ee 100%);
  border-color:rgba(26,74,128,0.20);
}
.img-placeholder.theme-memorial::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(26,74,128,0.05) 29px,rgba(26,74,128,0.05) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(26,74,128,0.05) 29px,rgba(26,74,128,0.05) 30px);
}
.img-placeholder.theme-memorial::after { background:rgba(26,74,128,0.10); border-top-color:rgba(26,74,128,0.18); }
.img-placeholder.theme-memorial i { color:#1a3a6a; opacity:.09; }
.img-placeholder.theme-memorial .ph-title { color:#0c1e3a; opacity:.78; }
.img-placeholder.theme-memorial .ph-note { color:#1a3a6a; opacity:.68; }

/* Agua/Costanera — azul suave */
.img-placeholder.theme-water {
  background:linear-gradient(160deg, #d4e8f8 0%, #bcd4f0 100%);
  border-color:rgba(26,74,128,0.22);
}
.img-placeholder.theme-water::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(26,74,128,0.05) 29px,rgba(26,74,128,0.05) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(26,74,128,0.05) 29px,rgba(26,74,128,0.05) 30px);
}
.img-placeholder.theme-water::after { background:rgba(26,74,128,0.10); border-top-color:rgba(26,74,128,0.18); }
.img-placeholder.theme-water i { color:#0e2a58; opacity:.09; }
.img-placeholder.theme-water .ph-title { color:#061430; opacity:.80; }
.img-placeholder.theme-water .ph-note { color:#0e2a58; opacity:.70; }

/* Poeta/Cultura — rosa suave */
.img-placeholder.theme-poet {
  background:linear-gradient(160deg, #f6e4e0 0%, #edd4cc 100%);
  border-color:rgba(200,66,40,0.20);
}
.img-placeholder.theme-poet::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(200,66,40,0.05) 29px,rgba(200,66,40,0.05) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(200,66,40,0.05) 29px,rgba(200,66,40,0.05) 30px);
}
.img-placeholder.theme-poet::after { background:rgba(200,66,40,0.10); border-top-color:rgba(200,66,40,0.18); }
.img-placeholder.theme-poet i { color:#882010; opacity:.09; }
.img-placeholder.theme-poet .ph-title { color:#3a0e08; opacity:.78; }
.img-placeholder.theme-poet .ph-note { color:#882010; opacity:.68; }

/* ── Gallery label ────────────────────────────────────────────────── */
.gl-label { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(20,10,4,.88)); color:#fff; font-size:.78rem; font-weight:500; padding:1.8rem .85rem .65rem; pointer-events:none; letter-spacing:.03em; z-index:2; }

/* ── Guía editorial de espacios — lista cultural, reemplaza la cuadrícula de tarjetas SaaS ── */
/* Antes: icon-card grid (feature-mini) con fondo blanco, borde superior de color, icono arriba     */
/* Ahora: lista tipo directorio cultural — nombre en serif, dato en Inter, barra de color lateral   */
.rec-guide {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(200,130,14,0.20);
}
.rec-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(200,130,14,0.12);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
/* Deslizamiento usando transform — no se animan propiedades de layout */
.rec-entry:hover { transform: translateX(5px); }
/* Barra lateral de color — identidad tricolor por espacio */
.rec-accent {
  width: 3px;
  align-self: stretch;
  min-height: 1.6rem;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--accent-color);
}
.rec-entry:nth-child(1) .rec-accent { background: var(--blue-accent); }
.rec-entry:nth-child(2) .rec-accent { background: var(--accent2-color); }
.rec-entry:nth-child(3) .rec-accent { background: var(--green-accent); }
.rec-entry:nth-child(4) .rec-accent { background: var(--accent-color); }
/* Nombre del espacio — Cormorant Garamond, protagonista */
.rec-name {
  font-family: var(--heading-font);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--heading-color);
  flex: 1;
  line-height: 1.2;
}
/* Dato clave — Source Sans 3, muted, alineado a la derecha */
.rec-meta {
  font-family: var(--label-font);
  font-size: .70rem;
  color: var(--default-color);
  opacity: .58;
  letter-spacing: .04em;
  text-align: right;
  white-space: nowrap;
}

/* ── Etiquetas de colectividad — texto plano, sin caja SaaS con borde izquierdo ── */
/* Antes: pill con borde-left coloreado + Cormorant itálica = patrón AI universal         */
/* Ahora: texto Inter con ícono de color, sin contenedor decorativo                       */
.col-strip { display:flex; flex-wrap:wrap; gap:.15rem .9rem; margin-top:.85rem; }
.col-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: .22rem 0;
  font-size: .80rem;
  font-family: var(--label-font);
  font-style: normal;
  font-weight: 500;
  color: var(--default-color);
  opacity: .80;
  transition: opacity .2s;
  letter-spacing: .01em;
}
.col-tag i { font-size: .72rem; flex-shrink: 0; }
.col-tag:hover { background:none; opacity: 1; }
/* Color del ícono y texto por colectividad */
.col-tag:nth-child(1) { color: var(--green-accent); }
.col-tag:nth-child(2) { color: var(--accent2-color); }
.col-tag:nth-child(3) { color: var(--blue-accent); }
.col-tag:nth-child(4) { color: var(--accent-color); }

/* ── CTA buttons ──────────────────────────────────────────────────── */
.btn-gold {
  font-family:var(--label-font);
  background:var(--accent-color); color:#1c1208; border:2px solid var(--accent-color);
  padding:13px 40px; border-radius:3px; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; display:inline-block;
  text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,.42); transition:background .35s, border-color .35s, transform .25s; box-shadow:none;
}
.btn-gold:hover { background:var(--accent2-color); border-color:var(--accent2-color); color:#fff; box-shadow:none; transform:none; }
.btn-outline-green {
  background:transparent; color:var(--accent2-color); border:2px solid var(--accent2-color);
  padding:13px 40px; border-radius:3px; font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.5px; display:inline-block;
  text-decoration:none; transition:.4s;
}
.btn-outline-green:hover { background:var(--accent2-color); color:#fff; box-shadow:none; transform:none; }
.cta-section .btn-outline-green { color:#fff; border-color:rgba(255,255,255,0.60); }
.cta-section .btn-outline-green:hover { background:rgba(255,255,255,0.16); border-color:#fff; }

.btn-outline-amber {
  background:transparent; color:var(--accent-color); border:2px solid var(--accent-color);
  padding:13px 40px; border-radius:3px; font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.5px; display:inline-block;
  text-decoration:none; transition:background .35s, border-color .35s, box-shadow .35s, transform .25s;
}
.btn-outline-amber:hover { background:var(--accent-color); color:#1c1208; box-shadow:none; transform:none; }

.monument-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; padding:0.5rem 0; }
.monument-actions-section { padding:52px 0 64px; border-top:1px solid rgba(200,130,14,0.15); }
@media (max-width:575px) { .monument-actions { flex-direction:column; align-items:center; } }

/* ── Timeline ─────────────────────────────────────────────────────── */
/* ── Timeline section background ─────────────────────────────────── */
.section.light-background:has(.timeline) {
  background: linear-gradient(160deg, #f4ead0 0%, #e8d6a8 30%, #ddd8b4 55%, #dce4f0 100%);
  position:relative;
}
.section.light-background:has(.timeline)::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(200,130,14,0.05) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(200,130,14,0.04) 80px);
  background-size:80px 80px;
}

/* ── Timeline structure ───────────────────────────────────────────── */
.timeline { position:relative; padding:0; z-index:1; }
.timeline::before {
  content:""; position:absolute; left:50%; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom,
    var(--accent-color) 0%,
    var(--accent2-color) 40%,
    var(--blue-accent) 75%,
    var(--green-accent) 100%
  );
  transform:translateX(-50%); opacity:.70;
  border-radius:2px;
}
.tl-item {
  display:flex; justify-content:flex-end;
  padding-right:calc(50% + 36px); position:relative; margin-bottom:2.5rem;
}
.tl-item:nth-child(even) { justify-content:flex-start; padding-right:0; padding-left:calc(50% + 36px); }

/* Puntos de la línea de tiempo — más grandes, codificados por color */
.tl-dot {
  position:absolute; left:50%; top:24px;
  width:20px; height:20px; border-radius:50%;
  background:var(--accent-color);
  transform:translateX(-50%);
  border:4px solid var(--background-color);
  box-shadow:0 0 0 2px var(--accent-color), 0 0 18px rgba(200,130,14,0.55);
  z-index:2; transition:transform .25s;
}
.tl-item:hover .tl-dot { transform:translateX(-50%) scale(1.2); }
.tl-item:nth-child(2) .tl-dot, .tl-item:nth-child(5) .tl-dot, .tl-item:nth-child(8) .tl-dot {
  background:var(--accent2-color);
  box-shadow:0 0 0 2px var(--accent2-color), 0 0 18px rgba(200,66,40,0.55);
}
.tl-item:nth-child(3) .tl-dot, .tl-item:nth-child(6) .tl-dot {
  background:var(--blue-accent);
  box-shadow:0 0 0 2px var(--blue-accent), 0 0 18px rgba(26,74,128,0.55);
}

/* Tarjetas de la línea de tiempo — acabado editorial de archivo, sin bordes gruesos genéricos */
.tl-content {
  background:#ffffff;
  border-radius:2px; padding:1.4rem 1.6rem;
  border:1px solid rgba(200,130,14,0.18); max-width:360px;
  border-top:3px solid var(--accent-color);
  box-shadow:0 2px 12px rgba(44,28,10,0.07);
  transition:transform .28s ease, box-shadow .28s ease;
  position:relative;
}
.tl-item:hover .tl-content {
  transform:translateX(5px);
  box-shadow:0 6px 22px rgba(44,28,10,0.13);
}
.tl-item:nth-child(even):hover .tl-content { transform:translateX(-5px); }
.tl-item:nth-child(2) .tl-content, .tl-item:nth-child(5) .tl-content, .tl-item:nth-child(8) .tl-content {
  border-top-color:var(--accent2-color);
}
.tl-item:nth-child(3) .tl-content, .tl-item:nth-child(6) .tl-content {
  border-top-color:var(--blue-accent);
}
/* Año — Cinzel: inscripción romana, numerales tabulares para fechas alineadas */
.tl-content .tl-year {
  color:var(--accent-color); font-family:var(--num-font);
  font-size:2.15rem; font-weight:600; display:block;
  line-height:1; margin-bottom:6px; opacity:.90;
  letter-spacing:.01em;
  font-optical-sizing:auto; font-variant-numeric:tabular-nums lining-nums;
}
.tl-item:nth-child(2) .tl-year, .tl-item:nth-child(5) .tl-year, .tl-item:nth-child(8) .tl-year { color:var(--accent2-color); }
.tl-item:nth-child(3) .tl-year, .tl-item:nth-child(6) .tl-year { color:var(--blue-accent); }
/* h3 añadido como alias semántico de h5 — misma apariencia visual */
.tl-content h5,
.tl-content h3 {
  font-family:var(--heading-font); color:var(--heading-color);
  font-kerning:normal; font-feature-settings:"kern" 1, "liga" 1;
  font-size:1.02rem; margin:0 0 6px; line-height:1.25;
}
.tl-content p { font-size:.83rem; font-family:var(--label-font); margin:0; line-height:1.72; opacity:.75; color:var(--default-color); }
@media(max-width:767px){
  .timeline::before { left:22px; }
  .tl-item,.tl-item:nth-child(even) { justify-content:flex-start; padding-right:0; padding-left:60px; }
  .tl-item:hover .tl-content, .tl-item:nth-child(even):hover .tl-content { transform:none; }
  .tl-dot { left:22px; }
  .tl-content { max-width:100%; }
}

/* ── Space cards ──────────────────────────────────────────────────── */
.space-card { background:var(--surface-color); border-radius:10px; padding:2rem 1.5rem; border:1px solid rgba(200,130,14,0.16); height:100%; transition:all .35s; }
.space-card:hover { box-shadow:0 8px 28px rgba(200,130,14,0.18); transform:translateY(-4px); }
.space-card .sc-icon { width:52px; height:52px; border-radius:50%; background:rgba(200,130,14,0.14); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.space-card .sc-icon i { font-size:1.4rem; color:var(--accent-color); }
.space-card h4 { font-family:var(--heading-font); color:var(--heading-color); font-size:1.2rem; margin-bottom:.75rem; }
.space-card p { color:var(--default-color); opacity:.82; font-size:.92rem; line-height:1.7; margin-bottom:1rem; }
.space-card .sc-dato { font-size:.8rem; color:var(--accent-color); font-weight:600; }

/* ── Espacio card ─────────────────────────────────────────────────── */
.espacio-card {
  background:#ffffff;    /* blanco limpio — sin crema amarillento */
  border-radius:4px;    /* radio editorial — coherente con mon-card y el sistema */
  border:1px solid rgba(40,28,12,0.10); height:100%;
  transition:all .38s; box-shadow:0 3px 14px rgba(44,28,10,0.07);
  overflow:hidden;
}
.espacio-card:hover { box-shadow:0 14px 40px rgba(44,28,10,0.16); transform:translateY(-6px); }
.espacio-card .icon-wrap { width:52px; height:52px; border-radius:50%; background:rgba(200,130,14,0.14); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.espacio-card .icon-wrap i { font-size:1.4rem; color:var(--accent-color); }
.espacio-card h3 { font-family:var(--heading-font); color:var(--heading-color); font-size:1.22rem; margin-bottom:.75rem; }
.espacio-card p { color:var(--default-color); opacity:.82; font-size:.92rem; line-height:1.7; margin-bottom:1rem; }
.espacio-card .dato { font-size:.76rem; font-family:var(--label-font); color:var(--blue-accent); font-weight:600; letter-spacing:.02em; opacity:.9; }

/* ── Dato fila — ledger documental de catálogo ────────────────────── */
.dato-fila { display:flex; align-items:baseline; gap:.75rem; padding:.60rem 0; border-bottom:1px solid rgba(200,130,14,0.14); }
.dato-fila:last-child { border-bottom:none; }
/* Clave: crece para llenar el espacio; valor: se ancla a la derecha con numerales tabulares */
.dato-fila .dk { font-family:var(--label-font); font-style:normal; color:var(--default-color); opacity:.52; font-size:.78rem; letter-spacing:.03em; flex:1; }
.dato-fila .dv { font-family:var(--display-font); color:var(--heading-color); font-weight:600; font-size:.90rem; flex-shrink:0; text-align:right; font-optical-sizing:auto; font-variant-numeric:tabular-nums lining-nums; }

/* ── Info card (about) — mantener por compatibilidad; la ficha patrimonial lo reemplaza en la-plaza.html */
.info-row { display:flex; align-items:baseline; gap:.75rem; padding:.75rem 0; border-bottom:1px solid rgba(200,130,14,0.16); }
.info-row:last-child { border-bottom:none; }
.info-row .info-label { font-family:var(--label-font); font-style:normal; font-weight:500; color:var(--default-color); font-size:.80rem; opacity:.55; letter-spacing:.03em; flex:1; }
.info-row .info-val { font-family:var(--display-font); color:var(--heading-color); font-size:.90rem; font-weight:600; text-align:right; flex-shrink:0; font-optical-sizing:auto; font-variant-numeric:tabular-nums lining-nums; }

/* ── Ficha patrimonial — registro de archivo, reemplaza la tarjeta amarilla ──
   Sin relleno de color, sin borde de caja, sin radio. Se ancla bajo la imagen
   con una regla ámbar de apertura y usa el ledger .dato-fila del sistema.
   Resultado: un documento de catálogo, no una tarjeta de dashboard.       */
.ficha-patrimonial {
  margin-top: 1.25rem;
  padding-top: .95rem;
  border-top: 1px solid rgba(200,130,14,.22);
  background: none;
}
/* Micro-etiqueta del registro — ámbar sutil, versalitas, no compite */
.fp-titulo {
  font-family: var(--label-font);
  font-size: .57rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent-color);
  opacity: .58;
  margin: 0 0 .55rem;
  line-height: 1;
}
/* Filas dentro de la ficha — hereda .dato-fila; padding más compacto,
   alineación al inicio para manejar valores que envuelven a varias líneas */
.ficha-patrimonial .dato-fila {
  padding: .48rem 0;
  align-items: flex-start;
  border-bottom-color: rgba(200,130,14,.09);
}
/* Clave: muted, tamaño de lectura cómodo, sin opacidad agresiva */
.ficha-patrimonial .dato-fila .dk {
  font-size: .70rem;
  opacity: .50;
  letter-spacing: .025em;
  padding-top: .1rem;
}
/* Valor: Cormorant Garamond — ligeramente más pequeño que el base para
   encajar en la columna estrecha sin competir con el texto largo */
.ficha-patrimonial .dato-fila .dv {
  font-size: .86rem;
  max-width: 57%;
  line-height: 1.38;
}

/* ── Historia blocks ──────────────────────────────────────────────── */
/* Antes: border-left 4px (patrón prohibido). Ahora: borde superior sutil — sistema tricolor preservado */
.historia-bloque { padding-top:.85rem; margin-bottom:2rem; border-top:2px solid rgba(200,130,14,0.30); }
/* h3 añadido como alias semántico de h4 en bloques de historia */
.historia-bloque h4,
.historia-bloque h3 { font-family:var(--heading-font); color:var(--heading-color); font-size:1.38rem; font-weight:600; margin-bottom:.5rem; }
.historia-bloque p { color:var(--default-color); opacity:.9; font-size:1.05rem; line-height:1.8; margin:0; }
/* Bordes superiores tricolor — sistema de identidad por posición, no por franja lateral */
.historia-bloque:nth-child(3n+2) { border-top-color:rgba(200,66,40,0.35); }
.historia-bloque:nth-child(3n+3) { border-top-color:rgba(26,74,128,0.40); }

/* ── Colectividad tags — etiquetas planas estilo archivo, sin caja genérica AI ── */
.colectividad-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:none;
  padding:.18rem .1rem; margin:.2rem .5rem .2rem 0;
  font-size:.82rem; font-family:var(--label-font); font-style:normal;
  color:var(--accent-color); font-weight:600;
  transition:opacity .2s; letter-spacing:.02em;
  border-bottom:1px solid rgba(200,130,14,0.35);
}
.colectividad-tag:hover { opacity:.75; }
.colectividad-tag:nth-child(2) { color:var(--accent2-color); border-bottom-color:rgba(200,66,40,0.35); }
.colectividad-tag:nth-child(3) { color:var(--blue-accent); border-bottom-color:rgba(26,74,128,0.35); }
.colectividad-tag:nth-child(4) { color:var(--green-accent); border-bottom-color:rgba(45,122,58,0.35); }

/* ── Monument section detail ──────────────────────────────────────── */
.mon-section {
  padding-bottom:3.5rem;
  margin-bottom:3.5rem;
  border-bottom:1px solid rgba(200,130,14,0.20);
  position:relative;
}

.mon-section:last-child {
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}

.mon-section h2 {
  font-family:var(--heading-font);
  color:var(--heading-color);
  font-size:2rem;
  font-weight:600;
  margin-bottom:1.25rem;
  line-height:1.2;
}

@media (max-width: 768px) {
  .mon-section h2 {
    font-size: 1.45rem;
    line-height: 1.18;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: flex-start;
    gap: .45rem;
  }

  .mon-section h2 i {
    flex: 0 0 auto;
    margin-top: .22rem;
    font-size: .95rem !important;
  }

  .mon-section h2 span {
    display: block;
    min-width: 0;
  }

  .mon-section .mon-img {
    margin-top: .25rem;
  }
}

.mon-section h3 i {
  font-size:1rem;
  vertical-align:middle;
}

.mon-section p {
  color:var(--default-color);
  opacity:.9;
  line-height:1.8;
  font-size:1.05rem;
  margin-bottom:1rem;
}

.mon-section .mon-img {
  border-radius:10px;
  overflow:hidden;
  margin-bottom:1.25rem;
  box-shadow:0 4px 18px rgba(44,28,10,0.10);
}

.mon-section .mon-img img {
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:cover;
  display:block;
  filter:saturate(.9);
  will-change:filter;
}
/* ── Ficha de datos del monumento — registro museístico, sin píldoras AI ── */
.mon-ficha {
  margin:0 0 1.75rem;
  padding:1rem 0 0;
  border-top:1px solid rgba(200,130,14,0.24);
}
.mon-ficha__lista {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:2rem;
  row-gap:0;
}
.mon-ficha__lista li {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.62rem 0;
  border-bottom:1px solid rgba(200,130,14,0.12);
}
/* Filas impares en columna izquierda; pares en derecha — ritmo de ficha doble */
.mon-ficha__lista li:nth-child(odd):last-child { grid-column:1 / -1; }
.mon-ficha .k {
  font-family:var(--label-font);
  font-size:.70rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--default-color);
  opacity:.50;
  flex:1;
  min-width:0;
}
.mon-ficha .v {
  font-family:var(--display-font);
  font-size:.9rem;
  font-weight:600;
  color:var(--heading-color);
  text-align:right;
  flex-shrink:0;
  max-width:58%;
  line-height:1.35;
  font-optical-sizing:auto;
  font-variant-numeric:tabular-nums lining-nums;
}
@media (max-width:575px) {
  .mon-ficha__lista { grid-template-columns:1fr; column-gap:0; }
  .mon-ficha__lista li:nth-child(odd):last-child { grid-column:auto; }
  .mon-ficha .v { max-width:62%; font-size:.86rem; }
}

/* ── Cuadrícula de metadatos del monumento — ficha de catálogo apilada ─────
   Reemplaza la línea horizontal con puntos (que se quebraba en valores largos).
   Escritorio: 4 columnas iguales. Tableta: 2 columnas. Móvil: 1 columna.
   Cada celda muestra la etiqueta encima del valor — lectura de ficha de museo. */
.mon-meta {
  margin: 0 0 1.5rem;
  padding: .72rem 0 .65rem;
  border-top: 1px solid rgba(200,130,14,.20);
  border-bottom: 1px solid rgba(200,130,14,.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
/* Cada celda: etiqueta apilada sobre valor, separada por línea vertical interna */
.mon-meta-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .2rem 1.2rem .2rem 0;
  border-right: 1px solid rgba(200,130,14,.11);
  white-space: normal;
}
.mon-meta-item:last-child { border-right: none; padding-right: 0; }
/* El ::before de los puntos ya no aplica en layout de cuadrícula */
.mon-meta-item + .mon-meta-item::before { display: none; }
/* Etiqueta: micro-label Source Sans 3 — muted, precisa */
.mon-meta-k {
  font-family: var(--label-font);
  font-size: .57rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--default-color);
  opacity: .44;
  line-height: 1.2;
}
/* Valor: Cormorant Garamond, ligeramente más grande y prominente */
.mon-meta-v {
  font-family: var(--display-font);
  font-size: .84rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.32;
}
/* Tableta (≤ 767 px): 2 columnas — items pares sin borde derecho */
@media (max-width: 767px) {
  .mon-meta { grid-template-columns: repeat(2, 1fr); }
  .mon-meta-item { padding: .32rem 1rem .32rem 0; }
  .mon-meta-item:nth-child(2n) { border-right: none; padding-right: 0; }
  .mon-meta-item:nth-child(2n+1):not(:last-child) { border-right: 1px solid rgba(200,130,14,.11); }
}
/* Móvil estrecho (≤ 400 px): 1 columna con separadores horizontales */
@media (max-width: 400px) {
  .mon-meta { grid-template-columns: 1fr; }
  .mon-meta-item { border-right: none; padding-right: 0; padding: .42rem 0; border-bottom: 1px solid rgba(200,130,14,.08); }
  .mon-meta-item:last-child { border-bottom: none; }
}

/* ── Cita histórica (pull quote) — tratamiento sobrio de archivo ─────── */
/* Antes: border-left 3px (patrón prohibido). Ahora: tinte ámbar sutil + borde superior */
/* ── Cita histórica (nota de archivo) — tratamiento editorial sin caja ───────
   Elimina el aspecto de tarjeta amarillenta y la comilla flotante decorativa.
   El resultado es una nota de catálogo: texto en cursiva serif sobre fondo
   limpio, separado del cuerpo por una regla ámbar discreta arriba y abajo.
   Las comillas que aparecen en el texto HTML bastan; no se duplican con ::before. */
.cita-historica {
  margin: 2.2rem 0 0;
  padding: 1.05rem 0 .9rem;
  position: relative;
  background: none;
  border: none;
  border-top: 1px solid rgba(200,130,14,.26);
  border-bottom: 1px solid rgba(200,130,14,.10);
}
/* Comilla flotante eliminada — el texto ya incluye comillas literales */
.cita-historica::before { display: none; }
/* Texto de la cita: cursiva Cormorant, tamaño de cuerpo, alta legibilidad */
.cita-historica p {
  font-family: var(--heading-font);
  font-style: italic;
  color: var(--heading-color);
  opacity: .88;
  margin: 0 0 .52rem;
  font-size: 1.02rem;
  line-height: 1.72;
  font-weight: 400;
}
/* Atribución: micro-label Source Sans 3, uppercase muted, sin fondo extra */
.cita-historica small {
  color: var(--default-color);
  font-family: var(--label-font);
  font-size: .63rem;
  font-weight: 600;
  opacity: .46;
  letter-spacing: .09em;
  font-style: normal;
  display: block;
  text-transform: uppercase;
}

/* ── Índice patrimonial — oración editorial de salto entre monumentos ──────────
   El nav fluye como una línea de texto: los nombres de los monumentos se
   encadenan con puntos ámbar, sin cajas, sin rejilla, sin botones.
   La etiqueta sobrelinea orienta al lector; los puntos los encadena CSS.   */

/* Contenedor de la franja — reglas ámbar arriba y abajo, ritmo de sección */
.nav-monumentos-wrap {
  padding: 1.15rem 0 1.1rem;
  border-top: 1px solid rgba(200,130,14,.18);
  border-bottom: 1px solid rgba(200,130,14,.10);
}
/* Etiqueta sobrelinea — contextualiza sin competir con los nombres */
.nav-monumentos-overline {
  font-family: var(--label-font);
  font-size: .57rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--default-color);
  opacity: .36;
  margin: 0 0 .50rem;
  line-height: 1;
}
/* Oración de enlaces — flex envolvente para quiebre natural en pantallas estrechas */
.nav-monumentos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.7;
}
/* Cada nombre: texto corrido, sin caja, sin padding, sin borde */
.nav-monumentos a {
  font-family: var(--label-font);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--default-color);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  flex: none;
  transition: color .2s;
}
/* Punto separador ámbar generado en CSS — nunca en el DOM.
   Va DESPUÉS de cada nombre (no antes): así, al quebrarse en móvil, ninguna
   línea empieza con punto y todas alinean a la izquierda (San Roque ↔ Monolito). */
.nav-monumentos a:not(:last-child)::after {
  content: "·";
  padding: 0 .52rem;
  color: rgba(200,130,14,.42);
  font-weight: 600;
  pointer-events: none;
}
/* Hover: nombre al color oscuro + subrayado ámbar muy sutil */
.nav-monumentos a:hover {
  color: var(--heading-color);
  text-decoration: underline;
  text-decoration-color: rgba(200,130,14,.28);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* Activo (sección en pantalla): nombre en ámbar */
.nav-monumentos a.activo { color: var(--accent-color); }
/* Focus accesible */
.nav-monumentos a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; border-radius: 1px; }
/* Móvil: la oración se quiebra naturalmente por el flex-wrap — sin scroll horizontal.
   Margen interno horizontal para que el bloque no quede pegado al borde izquierdo. */
@media (max-width:767px) {
  .nav-monumentos-wrap { padding: .95rem 1.4rem .9rem; }
  .nav-monumentos a { font-size: .84rem; }
}

/* ── CTA dark section ─────────────────────────────────────────────── */
.cta-section {
  background:#ffffff;                 /* blanco — se distingue de la sección papel de arriba */
  padding:72px 0; position:relative; overflow:hidden;
}
.cta-section::before { content:""; position:absolute; inset:0; pointer-events:none; background:none; }
.cta-section h2 { font-family:var(--heading-font); color:var(--heading-color); font-size:2.2rem; margin-bottom:12px; }
.cta-section p { color:rgba(58,40,21,0.80); font-size:1rem; margin-bottom:0; }

/* ── Sources ──────────────────────────────────────────────────────── */
.source-item { padding:.8rem 0; border-bottom:1px solid rgba(200,130,14,0.16); font-size:.88rem; line-height:1.7; display:flex; gap:10px; }
.source-item:last-child { border-bottom:none; }
.source-item .s-num { color:var(--accent-color); font-weight:700; min-width:22px; flex-shrink:0; }
.source-item a { color:var(--accent-color); }
.source-item a:hover { color:var(--accent2-color); }

/* ── Ficha documental — página de catálogo, fondo marfil limpio ─────────────────────── */
/* Antes: caja ámbar con gradiente + borde izquierdo + Cormorant itálica = patrón AI genérico  */
/* Ahora: ficha blanca con borde superior ámbar, Source Sans 3 para claves,                    */
/*        Fraunces para valores — carácter tipográfico real, no plantilla                      */
.callout-card {
  background: #fff;
  border-radius: 2px;
  border: 1px solid rgba(200,130,14,0.16);
  border-top: 2px solid rgba(200,130,14,0.60);
  padding: 1.75rem 1.6rem;
  box-shadow: 0 2px 10px rgba(44,28,10,0.06);
  position: relative;
}
.callout-card::before { display:none; }
/* Título de ficha — Source Sans 3 versalitas, letra fina, color ámbar */
.callout-card h3,
.callout-card h4 {
  font-family: var(--label-font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(200,130,14,0.16);
  font-style: normal;
  padding-top: 0;
}
/* Filas de datos: clave en Source Sans 3 muted, valor en Fraunces cálido */
.callout-card .dato-fila {
  border-bottom-color: rgba(200,130,14,0.10);
}
.callout-card .dato-fila .dk {
  font-family: var(--label-font);
  font-style: normal;
  font-size: .73rem;
  color: var(--default-color);
  opacity: .50;
  letter-spacing: .03em;
}
.callout-card .dato-fila .dv {
  font-family: var(--display-font);
  font-size: .97rem;
  color: var(--heading-color);
  font-weight: 600;
}
/* Nota de pie — Source Sans 3, tono muted */
.callout-card > p {
  font-family: var(--label-font);
  font-size: .76rem;
  color: var(--default-color);
  opacity: .52;
  line-height: 1.65;
  margin-top: 1.2rem;
  margin-bottom: 0;
}
.callout-stat { font-family:var(--display-font); font-size:2rem; color:var(--accent-color); display:block; line-height:1; font-weight:700; font-optical-sizing:auto; font-variant-numeric:tabular-nums lining-nums; }
.callout-label { font-size:.70rem; font-family:var(--label-font); font-style:normal; letter-spacing:.14em; text-transform:uppercase; opacity:.65; display:block; margin-top:6px; }

/* ── Rec intro strip ──────────────────────────────────────────────── */
.rec-intro-strip { background:linear-gradient(135deg,#f0e6c8,#f8f2e0); border-top:1px solid rgba(200,130,14,0.16); border-bottom:1px solid rgba(200,130,14,0.16); padding:20px 0; }
.rec-intro-strip p { margin:0; font-size:.9rem; opacity:.85; }

/* ── Badge pill — etiqueta de ubicación estilo catálogo, sin píldora genérica ── */
.badge-pill {
  display:inline-block;
  background:transparent;
  border:none; border-bottom:1px solid rgba(200,130,14,0.45);
  color:rgba(244,216,136,0.90); font-size:.70rem; font-family:var(--label-font); font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  padding:0 0 3px; margin-bottom:18px;
  text-shadow:none; border-radius:0;
}

/* ── Mini link ────────────────────────────────────────────────────── */
.mc-link-arrow { font-size:.78rem; font-weight:600; color:var(--accent-color); text-transform:uppercase; letter-spacing:.06em; text-decoration:none; }
.mc-link-arrow:hover { color:var(--accent2-color); }

/* ── Bibliografía details — referencias de archivo, sin radio genérico ── */
.bib-details { border:1px solid rgba(200,130,14,0.20); border-radius:2px; overflow:hidden; }
.bib-details > summary {
  padding:1.1rem 1.5rem; cursor:pointer; font-family:var(--heading-font);
  color:var(--heading-color); font-size:1.05rem; list-style:none;
  display:flex; align-items:center; gap:10px; background:var(--surface-color);
  user-select:none; border-bottom:1px solid transparent; transition:background .2s;
}
.bib-details > summary::-webkit-details-marker { display:none; }
.bib-details > summary::marker { display:none; }
.bib-details > summary:hover { background:color-mix(in srgb,var(--surface-color),var(--accent-color) 6%); }
.bib-details[open] > summary { border-bottom-color:rgba(200,130,14,0.16); }
.bib-details .bib-chevron { margin-left:auto; font-size:.85rem; color:var(--accent-color); transition:transform .25s; }
.bib-details[open] .bib-chevron { transform:rotate(180deg); }
.bib-details .bib-body { padding:1.5rem; }

/* ── Panel de ubicación — área de imagen para espacios recreativos ── */
.espacio-img-area {
  height:360px;
  background:linear-gradient(170deg, #f4e8cc 0%, #e6d4a4 100%);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  border-radius:4px 4px 0 0; color:var(--accent-color);
  position:relative; overflow:hidden;
  border-bottom:2px solid rgba(200,130,14,0.22);
  padding:0 1.1rem 1.1rem;
}
@media (max-width:991px) { .espacio-img-area { height:300px; } }
@media (max-width:767px) { .espacio-img-area { height:245px; } }
/* Cuadrícula catastral de fondo */
.espacio-img-area::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(200,130,14,0.05) 29px,rgba(200,130,14,0.05) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(200,130,14,0.05) 29px,rgba(200,130,14,0.05) 30px);
}
/* Banda de etiqueta inferior */
.espacio-img-area::after {
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:60px; background:rgba(200,130,14,0.12);
  border-top:1px solid rgba(200,130,14,0.20); pointer-events:none; z-index:0;
}
/* Ícono como marca de agua — solo en paneles sin foto */
.espacio-img-area:not(.has-photo) i {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-62%);
  font-size:5rem; color:var(--accent-color); opacity:.10; z-index:1;
  margin:0; pointer-events:none; transition:opacity .35s;
}
.espacio-card.has-img:hover .espacio-img-area:not(.has-photo) i { opacity:.18; }
/* Nombre del espacio — etiqueta inferior izquierda */
.espacio-img-area:not(.has-photo) span {
  font-family:var(--heading-font); font-size:.92rem; font-weight:600; font-style:italic;
  color:var(--heading-color); opacity:.78; text-align:left; padding:0;
  letter-spacing:.01em; position:relative; z-index:1; line-height:1.25;
}
.espacio-card.has-img { padding:0; }
.espacio-card.has-img .espacio-body { padding:1.5rem; }

/* ── Tarjetas con fotografía real ────────────────────────────────── */
.espacio-img-area.has-photo { background:#1a1a12; padding:0; }
.espacio-img-area.has-photo::before { display:none; }
.espacio-img-area.has-photo::after { display:none; }
.espacio-img-area.has-photo img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .6s ease; filter:saturate(.92); will-change:filter, transform;
}
.espacio-card.has-img:hover .espacio-img-area.has-photo img { transform:scale(1.06); filter:saturate(1.08); }
.espacio-img-area.has-photo i { display:none; }
.espacio-photo-label {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0) 100%);
  padding:.85rem 1.1rem;
}
.espacio-photo-label span {
  color:#fff !important; opacity:1 !important;
  font-family:var(--heading-font); font-size:.95rem; font-weight:600;
  letter-spacing:.03em; display:block;
}
.espacio-photo-label .espacio-photo-sub {
  font-family:var(--label-font); font-size:.70rem; color:rgba(255,255,255,0.70) !important;
  font-weight:500; letter-spacing:.10em; text-transform:uppercase; margin-top:4px;
}

/* ── Temas de color para paneles sin foto ────────────────────────── */
/* Costanera — azul río Paraná */
.espacio-img-area.theme-water {
  background:linear-gradient(160deg, #6ab8f4 0%, #4298e8 50%, #58aef0 100%);
  border-bottom-color:rgba(26,74,128,0.38);
}
.espacio-img-area.theme-water::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(10,40,100,0.10) 29px,rgba(10,40,100,0.10) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(10,40,100,0.10) 29px,rgba(10,40,100,0.10) 30px);
}
.espacio-img-area.theme-water::after { background:rgba(4,20,60,0.28); border-top-color:rgba(4,20,60,0.36); }
.espacio-img-area.theme-water i { color:#082040; }
.espacio-img-area.theme-water span { color:#04102a; opacity:.90; }

/* Ludoteca/Infancia — amarillo cálido */
.espacio-img-area.theme-child {
  background:linear-gradient(160deg, #f8d460 0%, #f0be38 50%, #f8cc54 100%);
  border-bottom-color:rgba(200,130,14,0.38);
}
.espacio-img-area.theme-child::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(80,40,0,0.10) 29px,rgba(80,40,0,0.10) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(80,40,0,0.10) 29px,rgba(80,40,0,0.10) 30px);
}
.espacio-img-area.theme-child::after { background:rgba(80,40,0,0.22); border-top-color:rgba(80,40,0,0.30); }
.espacio-img-area.theme-child i { color:#6a4400; }
.espacio-img-area.theme-child span { color:#3a2200; opacity:.90; }

/* Parque de Salud — verde natural */
.espacio-img-area.theme-health {
  background:linear-gradient(160deg, #90d898 0%, #6cc076 50%, #80cc8c 100%);
  border-bottom-color:rgba(45,122,58,0.32);
}
.espacio-img-area.theme-health::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(0,50,15,0.10) 29px,rgba(0,50,15,0.10) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(0,50,15,0.10) 29px,rgba(0,50,15,0.10) 30px);
}
.espacio-img-area.theme-health::after { background:rgba(0,50,15,0.24); border-top-color:rgba(0,50,15,0.32); }
.espacio-img-area.theme-health i { color:#0e3e18; }
.espacio-img-area.theme-health span { color:#06200c; opacity:.88; }

/* Parques barriales — ámbar cívico */
.espacio-img-area.theme-community {
  background:linear-gradient(160deg, #f4d48c 0%, #e8bc64 50%, #f0cc80 100%);
  border-bottom-color:rgba(200,130,14,0.34);
}
.espacio-img-area.theme-community::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(80,40,0,0.08) 29px,rgba(80,40,0,0.08) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(80,40,0,0.08) 29px,rgba(80,40,0,0.08) 30px);
}
.espacio-img-area.theme-community::after { background:rgba(80,40,0,0.20); border-top-color:rgba(80,40,0,0.28); }
.espacio-img-area.theme-community i { color:#6a4000; }
.espacio-img-area.theme-community span { color:#3a2000; opacity:.90; }

/* Costanera Shopping — coral institucional */
.espacio-img-area.theme-shopping {
  background:linear-gradient(160deg, #f09090 0%, #e06868 50%, #e88080 100%);
  border-bottom-color:rgba(200,66,40,0.34);
}
.espacio-img-area.theme-shopping::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(80,0,0,0.10) 29px,rgba(80,0,0,0.10) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(80,0,0,0.10) 29px,rgba(80,0,0,0.10) 30px);
}
.espacio-img-area.theme-shopping::after { background:rgba(80,0,0,0.22); border-top-color:rgba(80,0,0,0.30); }
.espacio-img-area.theme-shopping i { color:#5e1208; }
.espacio-img-area.theme-shopping span { color:#300804; opacity:.88; }

/* Plaza de Armas — dorado cívico */
.espacio-img-area.theme-plaza {
  background:linear-gradient(160deg, #f4dc88 0%, #e8c460 50%, #f4d47c 100%);
  border-bottom-color:rgba(200,130,14,0.36);
}
.espacio-img-area.theme-plaza::before {
  background:
    repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(80,40,0,0.10) 29px,rgba(80,40,0,0.10) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(80,40,0,0.10) 29px,rgba(80,40,0,0.10) 30px);
}
.espacio-img-area.theme-plaza::after { background:rgba(80,40,0,0.20); border-top-color:rgba(80,40,0,0.28); }
.espacio-img-area.theme-plaza i { color:#6a4800; }
.espacio-img-area.theme-plaza span { color:#3a2600; opacity:.90; }


/* ── Página de historia: fondo papel uniforme y continuo (sin bandas crema) ──────────── */
.gallery-single-page section.section:not(.dark-background) {
  background: var(--background-color) !important;
}
.gallery-single-page .light-background {
  border-top: none;
  border-image: none;
}

/* ── Revelación en scroll de secciones de monumento (respeta prefers-reduced-motion) ─── */
@media (prefers-reduced-motion: no-preference) {
  .js-mon-animate .mon-section {
    opacity:0; transform:translateY(24px);
    transition:opacity .65s ease, transform .65s cubic-bezier(0.22,1,0.36,1);
  }
  .js-mon-animate .mon-section.mon-reveal { opacity:1; transform:translateY(0); }
  .js-mon-animate .mon-section .mon-img {
    opacity:0; transform:translateY(14px);
    transition:opacity .55s ease .16s, transform .55s cubic-bezier(0.22,1,0.36,1) .16s;
  }
  .js-mon-animate .mon-section.mon-reveal .mon-img { opacity:1; transform:translateY(0); }
  .js-mon-animate .mon-section .mon-ficha,
  .js-mon-animate .mon-section .mon-meta {
    opacity:0; transform:translateY(10px);
    transition:opacity .5s ease .26s, transform .5s ease .26s;
  }
  .js-mon-animate .mon-section.mon-reveal .mon-ficha,
  .js-mon-animate .mon-section.mon-reveal .mon-meta { opacity:1; transform:translateY(0); }
  .js-mon-animate .mon-section .cita-historica {
    opacity:0; transform:translateY(10px);
    transition:opacity .5s ease .22s, transform .5s ease .22s;
  }
  .js-mon-animate .mon-section.mon-reveal .cita-historica { opacity:1; transform:translateY(0); }
}

/* ── Accesibilidad: respeta la preferencia de movimiento reducido del sistema ─── */
@media (prefers-reduced-motion: reduce) {
  /* Cancela la animación de rebote del indicador de scroll en el hero */
  .hero .scroll-indicator { animation: none; opacity: .55; }
  /* Cancela la transición de escala al pasar el cursor sobre el hero */
  .hero:hover .hero-bg { transform: scale(1.04); transition: none; }
  /* Detiene las animaciones del preloader */
  #preloader .line { animation: none; }
  #preloader .line:after { animation: none; }
  /* Desactiva la transición de fundido del carrusel hero */
  .hero .carousel-item { transition: none; }
}

/* ── Indicadores de posición del carrusel hero ──────────────────────────────── */
/* Posicionados fuera del contenedor del carrusel para superar el z-index del overlay */
.hero-indicators {
  position:absolute; bottom:65px; left:50%;
  transform:translateX(-50%);
  z-index:4; display:flex; gap:7px; pointer-events:none;
}
.hero-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.38); border:none;
  opacity:1; cursor:pointer; padding:0; pointer-events:all;
  transition:background .3s, transform .28s; flex-shrink:0;
}
.hero-dot.active { background:var(--accent-color); transform:scale(1.3); }
.hero-dot:focus-visible { outline:2px solid var(--accent-color); outline-offset:3px; }

/* ── Botón de pausa del carrusel — accesibilidad WCAG 2.2.2 ─────────────────── */
.carousel-pause-btn {
  position:absolute; bottom:28px; left:28px; z-index:4;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.25);
  color:rgba(255,255,255,0.80); width:34px; height:34px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .22s, border-color .22s, color .22s;
  font-size:15px; line-height:0;
}
.carousel-pause-btn:hover { background:rgba(200,130,14,0.55); border-color:rgba(200,130,14,0.70); color:#fff; }
.carousel-pause-btn:focus-visible { outline:2px solid var(--accent-color); outline-offset:2px; }

/* ══════════════════════════════════════════════════════════════════
   SISTEMA DE MOVIMIENTO
   ══════════════════════════════════════════════════════════════════ */

/* ── Variables de easing — curvas naturales de desaceleración ────────────────── */
:root {
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:  cubic-bezier(0.16, 1, 0.3,  1);
}

/* ── Efecto Ken Burns en imágenes del carrusel hero ──────────────────────────── */
/* Cada slide activo crece levemente — le da vida al hero sin distraer del contenido */
@keyframes kenBurns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.10); }
}
.hero .carousel-item { overflow: hidden; }
.hero .carousel-item.active img {
  animation: kenBurns 6200ms var(--ease-quart) both;
}

/* ── Revelado del divisor dorado al entrar en viewport ───────────────────────── */
/* scaleX desde el origen (izquierda para .left, centro para el resto) */
@keyframes dividerGrow {
  from { transform: scaleX(0); opacity: .25; }
  to   { transform: scaleX(1); opacity:  1;  }
}
.gold-divider { transform-origin: center center; }
.gold-divider.left { transform-origin: left center; }
.gold-divider.will-animate { transform: scaleX(0); opacity: 0; }
.gold-divider.divider-reveal { animation: dividerGrow 520ms var(--ease-expo) both; }

/* ── Micro-interacción de pulsado en botones principales ─────────────────────── */
.btn-gold:active { transform: scale(0.97); transition-duration: 80ms; }
.btn-get-started:active,.btn-secondary-cta:active { transform: scale(0.97); transition-duration: 80ms; }

/* ── Movimiento reducido: desactiva todas las animaciones del sistema ─────────── */
@media (prefers-reduced-motion: reduce) {
  .hero .carousel-item.active img { animation: none; transform: none; }
  .gold-divider.will-animate { transform: scaleX(1) !important; opacity: 1 !important; }
  .gold-divider.divider-reveal { animation: none; transform: scaleX(1) !important; opacity: 1 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   DESTELLOS DE PRIMERA VISITA
   ══════════════════════════════════════════════════════════════════ */

/* ── El lugar se presenta en el preloader antes de cargar ───────────────────────── */
#preloader .preloader-place {
  position: absolute; bottom: 44px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--label-font); font-size: .56rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(200, 130, 14, 0.58); white-space: nowrap; opacity: 0;
  animation: preloaderPlaceFade 2.4s ease 0.5s both;
}
@keyframes preloaderPlaceFade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(5px); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-3px); }
}

/* ── Barra dorada superior del hero — barre de izquierda a derecha ──────────────── */
.hero-gold-bar {
  transform-origin: left center;
  animation: goldBarSweep 700ms var(--ease-expo) both;
}
@keyframes goldBarSweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Bloque heroReveal eliminado — reemplazado por la cascada .hero-revealed
   en el bloque @media (prefers-reduced-motion: no-preference) más abajo. */

/* ── Invitación al scroll — aparece 1.2s después del primer título ───────────────── */
.scroll-hint {
  font-family: var(--label-font); font-size: .52rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 216, 136, 0.58); display: block; text-align: center;
  margin-top: 5px;
  animation: heroReveal 600ms var(--ease-quint) 1.2s both;
}

/* ── Destello ámbár sutil en el ícono del logo al pasar el cursor ────────────────── */
.header .logo i { transition: filter .28s; }
.header .logo:hover i { filter: drop-shadow(0 0 6px rgba(200, 130, 14, 0.72)); }

/* ── Anillo de revelado de los puntos de la línea de tiempo ──────────────────────── */
@keyframes dotRing {
  0%   { opacity: .60; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.5); }
}
.tl-dot::after {
  content: ''; position: absolute; inset: -5px;
  border-radius: 50%; border: 1.5px solid var(--accent-color);
  opacity: 0; pointer-events: none;
}
.tl-item:nth-child(2) .tl-dot::after,
.tl-item:nth-child(5) .tl-dot::after { border-color: var(--accent2-color); }
.tl-item:nth-child(3) .tl-dot::after,
.tl-item:nth-child(6) .tl-dot::after { border-color: var(--blue-accent); }
.timeline.aos-animate .tl-dot::after {
  animation: dotRing 700ms var(--ease-quart) both;
}
.timeline.aos-animate .tl-item:nth-child(1) .tl-dot::after { animation-delay: 0.08s; }
.timeline.aos-animate .tl-item:nth-child(2) .tl-dot::after { animation-delay: 0.21s; }
.timeline.aos-animate .tl-item:nth-child(3) .tl-dot::after { animation-delay: 0.34s; }
.timeline.aos-animate .tl-item:nth-child(4) .tl-dot::after { animation-delay: 0.47s; }
.timeline.aos-animate .tl-item:nth-child(5) .tl-dot::after { animation-delay: 0.60s; }
.timeline.aos-animate .tl-item:nth-child(6) .tl-dot::after { animation-delay: 0.73s; }
.timeline.aos-animate .tl-item:nth-child(7) .tl-dot::after { animation-delay: 0.86s; }

/* ── Movimiento reducido: cancela todos los efectos de primera visita ────────────── */
@media (prefers-reduced-motion: reduce) {
  #preloader .preloader-place { animation: none; opacity: .9; }
  .hero-gold-bar { animation: none; transform: scaleX(1); }
  .hero .col-lg-9 > * { animation: none; opacity: 1; transform: none; }
  .hero h1 .underlight::before { animation: none; transform: scaleX(1); }
  .scroll-hint { animation: none; opacity: .58; }
  .tl-dot::after { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   CORRECCIÓN HERO MOTION — fundido limpio sin Ken Burns
   El zoom por slide causaba saltos visibles al cambiar imagen:
   el slide entrante arrancaba en scale(1.03) mientras el saliente
   ya estaba en ~scale(1.07). Se elimina el zoom y se usa fundido puro.
   ══════════════════════════════════════════════════════════════════ */

/* Cancela el Ken Burns — sin escala, sin salto al cambiar de slide */
.hero .carousel-item.active img {
  animation: none;
  transform: none;
}

/* Fundido más largo y con desaceleración natural — 1100ms en lugar de 600ms */
#heroCarousel .carousel-item {
  transition-duration: 1100ms;
  transition-timing-function: var(--ease-quint);
}

/* Movimiento reducido: sin fundido en el carrusel */
@media (prefers-reduced-motion: reduce) {
  #heroCarousel .carousel-item { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   OVERDRIVE — ESCALA EDITORIAL MÁXIMA
   Tipografía fluida, datos de archivo, y un gradiente que respira.
   Bootstrap no se toca: todo opera sobre el sistema visual propio.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tipografía fluida: la escala lo es todo ────────────────────────────────────── */

/* Título del hero — de 52px fijo a escala fluida: más grande cuanto más pantalla */
.hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.4rem); line-height: 1.18; letter-spacing: -.01em; }

/* Encabezados de sección .sh h2 — crecen con la pantalla en lugar de anclarse */
.sh h2 { font-size: clamp(2.4rem, 3.8vw, 3.4rem); line-height: 1.08; }

/* Títulos de páginas internas — presencia de cartel en lugar de ficha burocrática */
.page-title .heading h1 { font-size: clamp(38px, 5.2vw, 56px); }

/* Encabezados CTA — a la altura de la urgencia del mensaje */
.cta-section h2 { font-size: clamp(2.2rem, 3.8vw, 3.5rem); line-height: 1.10; }

/* Años de la línea de tiempo — anclas tipográficas que dominan la tarjeta */
.tl-content .tl-year { font-size: clamp(2.8rem, 4.2vw, 4.4rem); margin-bottom: 8px; }

/* ── Cifras cívicas: de widget a placa monumental ───────────────────────────────── */
.stat-box { padding: 2.4rem 1.8rem; }
.stat-box .num { font-size: 4rem; letter-spacing: .005em; }

/* ── Timeline: tinte alternado — quiebra la monotonía de blanco uniforme ─────────── */
.tl-item:nth-child(even) .tl-content {
  background: color-mix(in srgb, #ffffff 97%, #c8820e);
}

/* ── Timeline: línea central se dibuja mientras el usuario hace scroll ────────────── */
/* Usa animation-timeline: view() — solo en navegadores compatibles (Chrome/Safari/Edge) */
@supports (animation-timeline: view()) {
  .timeline::before {
    transform-origin: top center;
    animation: timelineLineDraw linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
  }
  @keyframes timelineLineDraw {
    from { transform: translateX(-50%) scaleY(0); }
    to   { transform: translateX(-50%) scaleY(1); }
  }
}

/* ── CTA section: brillo ámbár que respira — @property con animación real ────────── */
/* @property registra --cta-glow como tipo <number> para que CSS pueda interpolarlo */
@property --cta-glow {
  syntax: '<number>';
  initial-value: 0.18;
  inherits: true;
}
@keyframes ctaGlowPulse {
  0%, 100% { --cta-glow: 0.12; }
  50%      { --cta-glow: 0.32; }
}
.cta-section {
  padding: 96px 0;
}
/* Panel claro: sin glow oscuro animado */
.cta-section::before { background: none; }

/* ── Overdrive: movimiento reducido ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cta-section { animation: none; --cta-glow: 0.22; }
  .timeline::before { animation: none !important; transform: translateX(-50%) scaleY(1) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   REFINAMIENTO HERO SLIDER — carrusel limpio sin controles visibles
   Se retiran los indicadores y el botón de pausa del HTML.
   La rotación automática se mantiene vía data-bs-ride del carrusel.
   ══════════════════════════════════════════════════════════════════ */

/* Seguridad: ocultar controles por si quedaran en el DOM */
.hero-indicators,
.carousel-pause-btn { display: none !important; }

/* Contener el carrusel — evita bordes o artefactos que desborden */
.hero { overflow: hidden; }

/* Viñeta perimetral sobre el overlay — enmarca la imagen sin oscurecer el centro
   Disimula cualquier artefacto en los bordes de las fotos del carrusel */
.hero-overlay {
  background:
    linear-gradient(to right,  rgba(4,2,10,0.22) 0%, transparent 18%),
    linear-gradient(to left,   rgba(4,2,10,0.30) 0%, transparent 22%),
    linear-gradient(
      to bottom,
      rgba(6,2,0,0.18) 0%,
      rgba(6,2,0,0.28) 42%,
      rgba(6,2,0,0.40) 65%,
      rgba(4,2,10,0.78) 100%
    );
}

/* ══════════════════════════════════════════════════════════════════
   CORRECCIÓN CIFRAS ESTADÍSTICAS — página Espacios Recreativos
   El panel de cifras vive dentro de un col-lg-5, no a ancho completo.
   Con 4 columnas y 4,4rem (Overdrive) las cifras desbordan cada caja.
   Se reorganiza en cuadrícula 2×2 y el numeral adopta un tamaño
   proporcional al espacio disponible. El numeral global no se toca.
   ══════════════════════════════════════════════════════════════════ */

/* Cuadrícula 2×2 — cada caja recibe el doble de anchura disponible */
.services-page .stat-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Numeral escalado al ancho real de la caja — clamp evita desborde */
.services-page .stat-box .num {
  font-size: clamp(2rem, 3.8vw, 3rem);
  letter-spacing: -.025em;
  line-height: 1.05;
  white-space: nowrap;
}

/* Relleno interno proporcionado al nuevo tamaño de caja */
.services-page .stat-box {
  padding: 1.8rem 1.4rem;
}

/* ══════════════════════════════════════════════════════════════════
   ANIMACIONES CINEMATOGRÁFICAS — PRIMERA IMPRESIÓN Y DESPLAZAMIENTO
   Respetan prefers-reduced-motion: todas las reglas de movimiento
   están envueltas en la media query correspondiente.
   ══════════════════════════════════════════════════════════════════ */

/* ── Fotograma de reducción de movimiento — desactiva todo ──────── */
@media (prefers-reduced-motion: reduce) {
  .hero .badge-pill,
  .hero h1,
  .hero p,
  .hero .btn-wrap a,
  .hero .scroll-indicator,
  .hero-revealed .badge-pill,
  .hero-revealed p,
  .hero-revealed .btn-wrap a:nth-child(1),
  .hero-revealed .btn-wrap a:nth-child(2),
  .hero-revealed .scroll-indicator { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero h1 .underlight::before { animation: none !important; transform: none !important; }
  .tl-item .tl-content,
  .tl-item .tl-dot { opacity: 1 !important; transform: translateX(-50%) !important; transition: none !important; }
  .timeline::before { transform: none !important; transition: none !important; }
  .stat-box { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ════════════════════════════════════════════════════════════════
     HERO — CARRUSEL CON EFECTO KEN BURNS
     La imagen de cada diapositiva comienza ligeramente ampliada y
     se acerca al tamaño real con suavidad durante los 7 segundos de
     la diapositiva activa. Bootstrap añade/quita .active, por lo que
     la animación se reinicia en cada transición de forma natural.
     ════════════════════════════════════════════════════════════════ */
  @keyframes kenBurns {
    from { transform: scale(1.10); }
    to   { transform: scale(1.00); }
  }
  /* Estado de reposo — ligeramente ampliada para evitar bordes blancos */
  #heroCarousel .carousel-item img {
    transform: scale(1.10);
    will-change: transform;
  }
  /* Diapositiva activa — arranca la animación de zoom hacia fuera */
  #heroCarousel .carousel-item.active img {
    animation: kenBurns 7s cubic-bezier(.12,.44,.14,1) forwards;
  }

  /* ════════════════════════════════════════════════════════════════
     HERO — ENTRADA ORQUESTADA DEL TEXTO
     Cada elemento aparece con un retardo escalonado que coordina
     con el preloader (≈ 1 s) para que el texto emerja junto con la
     desaparición de la pantalla de carga.
     ════════════════════════════════════════════════════════════════ */
  @keyframes heroSlideUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Estado oculto inicial — todos los textos del hero arrancan invisibles.
     JS añade .hero-revealed al section .hero exactamente cuando el preloader
     desaparece del DOM (≈ 2050 ms desde load), momento desde el cual parten
     todos los retardos de la cascada de entrada.                           */
  .hero .badge-pill,
  .hero h1:not(.words-split),
  .hero p,
  .hero .scroll-indicator { opacity: 0; }
  /* Los botones se ocultan individualmente para poder animar en direcciones opuestas */
  .hero .btn-wrap a { opacity: 0; }

  /* ── Cascada de entrada orquestada ─────────────────────────────────
     Badge primero → palabras del h2 (vía .wr inline delays) → subtítulo
     → botones (el izquierdo desde la izquierda, el derecho desde la derecha)
     → indicador de desplazamiento.                                    */
  .hero-revealed .badge-pill {
    animation: heroSlideUp .68s cubic-bezier(.22,1,.36,1) both 0s;
  }
  .hero-revealed p {
    animation: heroSlideUp .65s cubic-bezier(.22,1,.36,1) both .52s;
  }
  /* Botones — entrada simétrica desde sus lados para darle dinamismo */
  .hero-revealed .btn-wrap a:nth-child(1) {
    animation: slideInLeft .62s cubic-bezier(.22,1,.36,1) both .72s;
  }
  .hero-revealed .btn-wrap a:nth-child(2) {
    animation: slideInRight .62s cubic-bezier(.22,1,.36,1) both .82s;
  }
  /* El indicador de desplazamiento necesita su propio keyframe porque
     mantiene translateX(-50%) en ambos estados. Usar heroSlideUp (que
     termina en translateY(0) sin X) destruye el centrado tras el fill. */
  .hero-revealed .scroll-indicator {
    animation: scrollCueReveal .55s cubic-bezier(.22,1,.36,1) both 1.00s;
  }
  @keyframes scrollCueReveal {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* ════════════════════════════════════════════════════════════════
     HERO — BARRIDO DE LUZ ÁMBAR SOBRE "ENCARNACIÓN"
     El resaltado dorado crece desde el borde izquierdo como un
     marcador de texto, acentuando el nombre de la ciudad tras la
     aparición del titular.
     ════════════════════════════════════════════════════════════════ */
  @keyframes amberSweep {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
  }
  /* Estado oculto inicial del barrido — sin animación hasta .hero-revealed */
  .hero h1 .underlight::before {
    transform: scaleX(0);
    transform-origin: left;
  }
  /* El barrido ámbár arranca 0.50s después de .hero-revealed,
     justo cuando la palabra "Encarnación" (índice 5) ha aparecido. */
  .hero-revealed .underlight::before {
    animation: amberSweep .55s cubic-bezier(.22,1,.36,1) both .50s;
  }

  /* ════════════════════════════════════════════════════════════════
     HERO — SALIDA EN PARALAJE AL DESPLAZAR
     El contenedor del texto se eleva suavemente mientras el usuario
     baja por la página, creando profundidad entre el fondo y el texto.
     Gestionado por JS (ver main.js → heroScrollExit).
     ════════════════════════════════════════════════════════════════ */
  .hero .container { will-change: transform, opacity; }

  /* ════════════════════════════════════════════════════════════════
     LÍNEA DE TIEMPO — TARJETAS DESDE LOS LADOS
     Cada tarjeta parte fuera de vista y desliza hacia el centro al
     entrar en el viewport. Los ítems impares vienen de la izquierda,
     los pares de la derecha (igual que su posición visual).
     La clase .tl-visible es añadida por JS con IntersectionObserver.
     ════════════════════════════════════════════════════════════════ */

  /* Estado inicial — oculto, desplazado hacia el lado de origen */
  .tl-item .tl-content {
    opacity: 0;
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
  }
  .tl-item:nth-child(odd)  .tl-content { transform: translateX(-52px); }
  .tl-item:nth-child(even) .tl-content { transform: translateX( 52px); }

  /* En móvil — desde abajo, no desde los lados */
  @media (max-width: 767px) {
    .tl-item:nth-child(odd)  .tl-content,
    .tl-item:nth-child(even) .tl-content { transform: translateY(28px); }
  }

  /* Punto de la línea — aparece desde cero con resorte leve */
  .tl-dot {
    transform: translateX(-50%) scale(0);
    opacity: 0;
    transition:
      transform .45s cubic-bezier(.22,1,.36,1) .12s,
      opacity   .30s ease .12s;
  }

  /* Estado visible — todo a su posición natural */
  .tl-item.tl-visible .tl-content { opacity: 1; transform: translateX(0); }
  @media (max-width: 767px) {
    .tl-item.tl-visible .tl-content { transform: translateY(0); }
  }
  .tl-item.tl-visible .tl-dot {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  /* Hover preservado tras la animación de entrada */
  .tl-item.tl-visible:hover .tl-dot {
    transform: translateX(-50%) scale(1.22);
    transition-delay: 0s;
  }
  /* Nudge horizontal de la tarjeta en hover — preservado tras .tl-visible */
  .tl-item.tl-visible:hover .tl-content              { transform: translateX( 5px); }
  .tl-item:nth-child(even).tl-visible:hover .tl-content { transform: translateX(-5px); }
  @media (max-width: 767px) {
    .tl-item.tl-visible:hover .tl-content,
    .tl-item:nth-child(even).tl-visible:hover .tl-content { transform: translateY(0); }
  }

  /* ════════════════════════════════════════════════════════════════
     LÍNEA DE TIEMPO — TRAZO DE LA LÍNEA CENTRAL
     La línea vertical crece desde arriba hacia abajo al entrar en
     vista la sección completa de la línea de tiempo.
     La clase .tl-line-on es añadida por JS.
     ════════════════════════════════════════════════════════════════ */
  .timeline::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.80s cubic-bezier(.22,1,.36,1);
  }
  .timeline.tl-line-on::before { transform: scaleY(1); }

  /* ════════════════════════════════════════════════════════════════
     CIFRAS CÍVICAS — ENTRADA ESCALONADA
     Las cajas del stat-grid aparecen de abajo hacia arriba con un
     retardo progresivo que da sensación de cascada documental.
     La clase .stat-visible es añadida por JS.
     ════════════════════════════════════════════════════════════════ */
  .stat-box {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .50s ease, transform .50s cubic-bezier(.22,1,.36,1);
  }
  .stat-box:nth-child(1) { transition-delay: .05s; }
  .stat-box:nth-child(2) { transition-delay: .14s; }
  .stat-box:nth-child(3) { transition-delay: .23s; }
  .stat-box:nth-child(4) { transition-delay: .32s; }
  .stat-box.stat-visible { opacity: 1; transform: translateY(0); }

  /* ════════════════════════════════════════════════════════════════
     ENCABEZADOS DE SECCIÓN — REVELADO DE SOBRELINEA
     El elemento .over (sobrelinea + línea tricolor) crece desde la
     izquierda al entrar en viewport. Leve pero distingue la página
     de un render genérico.
     ════════════════════════════════════════════════════════════════ */
  @keyframes overlineReveal {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .sh .over {
    opacity: 0;
    animation: none; /* Activado por JS al añadir .sh-visible al .sh */
  }
  .sh.sh-visible .over {
    animation: overlineReveal .50s cubic-bezier(.22,1,.36,1) both;
  }
  .sh.sh-visible h2 {
    animation: heroSlideUp .55s cubic-bezier(.22,1,.36,1) both .12s;
  }
  .sh h2 { opacity: 0; } /* Oculto hasta .sh-visible */

} /* fin @media (prefers-reduced-motion: no-preference) */

/* ══════════════════════════════════════════════════════════════════
   UI GLOBAL PREMIUM: GRANO, PROGRESO, CURSOR, MARCAS Y MICRODETALLES
   ══════════════════════════════════════════════════════════════════ */

/* ── Textura de grano fotográfico — profundidad de impresión editorial ─
   SVG con feTurbulence genera un ruido fractal similar al grano de
   película. A 4,2% de opacidad es imperceptible de forma consciente
   pero elimina el aspecto plano de las pantallas digitales.          */
#grain-overlay {
  position: fixed; inset: 0; z-index: 9997;
  pointer-events: none; user-select: none;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: grainShift .45s steps(1) infinite;
}
@keyframes grainShift {
  0%  { background-position:   0px   0px; }
  25% { background-position: -72px  38px; }
  50% { background-position:  42px -58px; }
  75% { background-position: -38px  74px; }
}
@media (prefers-reduced-motion: reduce) { #grain-overlay { animation: none; } }

/* ── Barra de progreso de desplazamiento — gradiente tricolor cívico ──
   Corre de ámbar a coral a azul Paraná siguiendo el sistema de color.
   Se actualiza en tiempo real por JS sin transición para máxima fluidez. */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 10001;
  height: 3px; width: 0%;
  background: linear-gradient(90deg,
    var(--accent-color)  0%,
    var(--accent2-color) 55%,
    var(--blue-accent)   100%
  );
  pointer-events: none;
  will-change: width;
}

/* Cursor del sistema — comportamiento nativo restaurado */
#cur-dot, #cur-ring { display: none !important; }

/* ── Marca de agua del footer — "Encarnación" en Cormorant itálica ──
   Ghosted al 5,5% de opacidad, ilegible como texto pero presente como
   textura tipográfica de fondo. Sello editorial de identidad de lugar. */
/* Marca de agua "Encarnación" retirada — footer ahora blanco con cintas swoosh */
.footer .container { position: relative; z-index: 1; }
/* Velo blanco suave detrás del texto central: queda por encima de las cintas
   (footer::before) pero debajo del texto, para máxima legibilidad sin tapar
   el swoosh en los bordes. */
.footer .container::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(700px, 95%); height: 180%;
  background: radial-gradient(ellipse 60% 60% at 50% 50%,
    rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 50%, rgba(255,255,255,0) 82%);
}

/* ── Tarjetas de monumento — barrido de luz sobre imagen en hover ────
   Simula el reflejo de luz sobre el cristal de una vitrina de museo.
   El brillo recorre la imagen de izquierda a derecha en 0,65 s.      */
.mon-card .mc-img { overflow: hidden; position: relative; } /* ya está, refuerzo */
.mon-card .mc-img::before {
  content: '';
  position: absolute; top: -50%; left: -75%;
  width: 38%; height: 200%;
  background: linear-gradient(
    to right,
    transparent            0%,
    rgba(255,255,255,.16) 50%,
    transparent          100%
  );
  transform: skewX(-15deg);
  z-index: 3; pointer-events: none; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mon-card:hover .mc-img::before {
    animation: vitrinaShimmer .65s cubic-bezier(.22,1,.36,1) forwards;
  }
}
@keyframes vitrinaShimmer {
  from { left: -75%; opacity: 1; }
  to   { left: 125%; opacity: 1; }
}
/* El cuerpo de la tarjeta asciende levemente para "abrirse" al hover */
.mon-card .mc-body {
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.mon-card:hover .mc-body { transform: translateY(-4px); }

/* ── Letra capital — inicio del texto patrimonial ────────────────────
   La "E" de "Encarnación" actúa como inicial de imprenta: Cormorant
   Garamond en ámbar, flotando a la izquierda del párrafo de apertura.
   Tamaño calibrado para alinearse con tres líneas de texto normal.   */
.drop-cap::first-letter {
  font-family: var(--heading-font);
  font-size: 4.6rem;
  font-weight: 400;
  line-height: .82;
  float: left;
  margin: .06em .11em -.02em 0;
  color: var(--accent-color);
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
}

/* ══════════════════════════════════════════════════════════════════
   REVELADO PALABRA A PALABRA, BANNERS, PIES DE FOTO, PAUSA, TRANSICIONES
   ══════════════════════════════════════════════════════════════════ */

/* ── Revelado palabra a palabra del titular del hero ────────────────
   Cada span.wr (inyectado por JS) se revela con opacidad y ascenso
   sutil. animation-delay se calcula con la variable --wi asignada por
   JS: delay = 1.42s base + índice × 0.07s de retardo escalonado.
   La duración de 0.60s y la curva ease dan el aire de tarjeta de
   título documental, sin rebote ni escala.                           */
@media (prefers-reduced-motion: no-preference) {
  /* Cuando las palabras están divididas el h2 no anima como bloque */
  .hero h1.words-split {
    opacity: 1 !important;
    animation: none !important;
  }
  .hero h1.words-split .wr {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    /* animation-delay se asigna como estilo en línea desde JS para
       sincronizar con la desaparición del preloader (2000 ms desde load) */
    animation: wordReveal .60s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes wordReveal {
    to { opacity: 1; transform: translateY(0); }
  }
}
/* Reducción de movimiento — todas las palabras visibles de inmediato */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .wr { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero h1.words-split { opacity: 1 !important; animation: none !important; }
}

/* ── Entrada de los banners de página interior ──────────────────────
   El h1 asciende levemente; el párrafo de apoyo lo sigue.
   Los retardos son cortos porque el banner ya está en viewport.
   Se usa la misma curva y keyframe que el hero para coherencia.      */
@media (prefers-reduced-motion: no-preference) {
  .page-title .heading h1 {
    opacity: 0;
    animation: heroSlideUp .75s cubic-bezier(.22,1,.36,1) both .18s;
  }
  .page-title .heading p {
    opacity: 0;
    animation: heroSlideUp .65s cubic-bezier(.22,1,.36,1) both .44s;
  }
  .page-title .heading .cta-btn {
    opacity: 0;
    animation: heroSlideUp .55s cubic-bezier(.22,1,.36,1) both .64s;
  }
}

/* ── Botón de pausa discreta del carrusel — requisito WCAG 2.2.2 ────
   Posicionado en la esquina inferior derecha del hero. Solo visible
   en hover/focus para no competir con el texto principal.            */
/* Botón de pausa del carrusel — oculto visualmente para no competir con el
   scroll cue centrado. El JS lo inyecta igualmente para accesibilidad de
   teclado/lector de pantalla; solo se suprime la presentación visual.     */
#carousel-pause {
  display: none !important;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
#carousel-pause:hover { border-color: rgba(255,255,255,.75); color: #fff; background: rgba(0,0,0,.38); }
#carousel-pause:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  border-color: rgba(255,255,255,.75);
  color: #fff;
}

/* ── Pie de foto — nota de catálogo debajo de fotografías reales ─────
   Source Sans 3 en cuerpo mínimo, muted. Tono de ficha museística,
   no de etiqueta de interfaz. Márgenes ajustados por contexto.       */
.img-caption {
  font-family: var(--label-font);
  font-size: .62rem;
  color: var(--default-color);
  opacity: .48;
  letter-spacing: .04em;
  line-height: 1.5;
  margin: 0;
  padding: .38rem 1rem .15rem;
  font-style: normal;
  display: block;
}
/* En tarjetas de monumento — separador superior muy sutil */
.mon-card .img-caption {
  border-top: 1px solid rgba(200,130,14,.08);
}
/* En secciones de detalle de monumento — leyenda editorial: versalitas con tick dorado,
   pegada a la foto y separada del párrafo para que se distinga del cuerpo de texto */
.mon-section .img-caption {
  padding-left: 0; padding-right: 0;
  margin: .5rem 0 1.85rem;            /* cerca de la foto, lejos del párrafo */
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.5;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  opacity: 1;
}
/* En la sección de imagen de espacios recreativos */
.rec-img-caption {
  font-family: var(--label-font);
  font-size: .62rem;
  color: var(--default-color);
  opacity: .44;
  letter-spacing: .04em;
  line-height: 1.5;
  margin-top: .55rem;
  display: block;
}

/* ── Transiciones suaves entre secciones ────────────────────────────
   El borde superior de la sección CTA oscura se adelgaza y oscurece
   para marcar la separación sin un corte abrupto de color.          */
.cta-section {
  border-top: 1px solid rgba(200,130,14,.12);
}

/* ── Link hover subrayado animado — trazo que crece desde el centro ──
   Sustituye el subrayado estático por uno que nace del centro. Se
   aplica a enlaces dentro del contenido de texto (no a la nav).      */
.tl-content a, .mc-body a, .source-item a, .historia-bloque a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── Overline con punto de acento — detalle tipográfico ─────────────
   Un pequeño cuadrado ámbar delante de la sobrelinea, más elegante
   que el trazo de línea actual. Se añade como ::before alternativo   */
.page-title .heading h1 {
  /* Sombra de texto más cinematográfica para los banners de página */
  text-shadow: 0 2px 28px rgba(0,0,0,0.70), 0 8px 48px rgba(0,0,0,0.40);
}

/* ── Mejora del preloader — punto de color cívico más expresivo ─────
   El preloader ya tiene la animación de línea. Se añade el nombre de
   la ciudad en tipografía de display debajo del indicador.           */
#preloader .preloader-place {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-family: var(--label-font); font-size: .64rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(236,198,74,.62);
  white-space: nowrap;
}

/* ── Hover de tarjetas de espacios recreativos — más expresivo ──────
   Un borde ámbar aparece al tope de la tarjeta en hover              */
.espacio-card {
  border-top: 3px solid transparent;
  transition: all .38s, border-top-color .28s;
}
.espacio-card:hover { border-top-color: var(--accent-color); }

/* ── Section con fotografía real — paralaje sutil en imagen ─────────
   La imagen de la Costanera en la sección de recreativos se escala
   levemente en hover del contenedor, dando profundidad.              */
.section .col-lg-6 [style*="height:400px"] img {
  transition: transform .80s cubic-bezier(.22,1,.36,1);
}
.section .col-lg-6 [style*="height:400px"]:hover img {
  transform: scale(1.04);
}

/* ══════════════════════════════════════════════════════════════════
   ADAPTACIÓN MÓVIL Y MULTI-DISPOSITIVO
   Pantallas ≤ 767 px (teléfonos en vertical). No modifica estructura
   Bootstrap; solo sobreescribe escalas tipográficas y espaciados
   del sistema Overdrive que resultan demasiado grandes en pantallas
   pequeñas.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Espaciado global de secciones ──────────────────────────────── */
  /* 72 px en escritorio → 44 px en móvil: aire suficiente sin exceso */
  section, .section { padding: 44px 0; }

  /* ── Banners de página interior ──────────────────────────────────── */
  /* Overdrive: clamp(44px, 6.5vw, 82px) → mínimo 44 px en móvil.
     Reducir a 28 px de mínimo para que los títulos largos no desborden. */
  .page-title .heading h1 { font-size: clamp(28px, 7.5vw, 44px); }

  /* ── Encabezados de sección (.sh h2) ─────────────────────────────── */
  /* Overdrive: clamp(2.4rem, 3.8vw, 3.4rem) → 2.4 rem = 38.4 px en móvil.
     Reducir mínimo para mantener el texto dentro de 375 px. */
  .sh h2 { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }

  /* ── Cifras cívicas (stat-boxes) ─────────────────────────────────── */
  /* Overdrive: font-size fijo 4.4 rem desborda en cuadrícula 2×2.
     Se reemplaza con clamp fluido y padding reducido. */
  .stat-box { padding: 1.4rem 1rem; }
  .stat-box .num {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  .stat-box .label { font-size: .66rem; }

  /* ── Sección CTA ──────────────────────────────────────────────────── */
  /* Overdrive: padding 96 px → demasiado en móvil. */
  .cta-section { padding: 56px 0; }
  .cta-section h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* ── Años de la línea de tiempo ───────────────────────────────────── */
  /* Overdrive: clamp(2.8rem, 4.2vw, 4.4rem) → 2.8 rem = 44.8 px en móvil.
     En la columna única de móvil hay espacio, pero 44 px es excesivo. */
  .tl-content .tl-year { font-size: clamp(1.8rem, 7.5vw, 2.6rem); }

  /* ── Botones del hero ─────────────────────────────────────────────── */
  .hero .btn-gold,
  .hero .btn-outline-gold { padding: .55rem 1.4rem; font-size: .82rem; }

  /* Índice patrimonial — fuente ligeramente reducida en pantallas pequeñas */
  .nav-monumentos a { font-size: .82rem; }
}

/* ── Teléfono en orientación horizontal ──────────────────────────── */
/* En landscape el viewport es bajo (~360–420 px de alto). El hero en
   min-height: 70 vh deja poco espacio al contenido; se reduce. */
@media (max-width: 900px) and (orientation: landscape) {
  .hero { min-height: 56vh; }
  .hero h1 { font-size: clamp(22px, 4.5vw, 36px); }
  section, .section { padding: 36px 0; }
}

/* ── Tableta (768–1023 px) ────────────────────────────────────────── */
/* Ajustes intermedios: el Overdrive queda bien en escritorio pero los
   valores mínimos de los clamp() son aún grandes en tableta estrecha. */
@media (min-width: 768px) and (max-width: 1023px) {
  section, .section { padding: 60px 0; }
  .stat-box .num { font-size: clamp(2.2rem, 4vw, 3.2rem); }
  .cta-section { padding: 76px 0; }
  .sh h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
}

/* ════════════════════════════════════════════════════════════════════
   CONSOLIDACIÓN LIMPIA — reemplaza los overrides que estaban atrapados
   dentro del @media de tablet (bug estructural corregido).
   La paleta vive en :root (arriba del archivo): una sola fuente de verdad.
   ════════════════════════════════════════════════════════════════════ */

/* ── Estadísticas: cifra de color fijo, hover sin viraje ──────────────
   Reposo y hover son idénticos en color; la tarjeta solo gana una
   sombra muy suave. El número NUNCA cambia de color al pasar el mouse. */
.stat-box,
.stat-box:hover { background: #ffffff !important; }
.stat-box { transition: box-shadow .3s ease; }
.stat-box:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06) !important; transform: none !important; }
.stat-box .num,                .stat-box:hover .num                { color: var(--accent-color); }
.stat-box:nth-child(2) .num,   .stat-box:nth-child(2):hover .num   { color: var(--accent2-color); }
.stat-box:nth-child(3) .num,   .stat-box:nth-child(3):hover .num   { color: var(--blue-accent); }
.stat-box:nth-child(4) .num,   .stat-box:nth-child(4):hover .num   { color: var(--green-accent); }

/* ════════════════════════════════════════════════════════════════════
   PÁGINA LA PLAZA DE ARMAS — layout editorial sobrio (revista patrimonial)
   Intro + 3 bloques imagen/texto alternados. Sin fichas ni tarjetas de datos.
   ════════════════════════════════════════════════════════════════════ */
.plaza-intro { padding-top:64px; padding-bottom:8px; }
.plaza-lead {
  font-family: var(--heading-font);
  font-size: clamp(1.3rem, 2.3vw, 1.82rem);
  font-weight: 400; line-height: 1.55;
  color: var(--heading-color);
  max-width: 820px; margin: 0;
}

.plaza-story { padding-top:40px; }
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2.6rem, 5vw, 4.4rem);
}
.story:last-child { margin-bottom: 0; }
/* Imagen a la derecha en los bloques alternados */
.story--imgright .story-media { order: 2; }
.story--imgright .story-text  { order: 1; }
.story-media img {
  width: 100%; height: 100%;
  min-height: 340px; max-height: 470px;
  object-fit: cover; display: block;
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(44,28,10,.16);
}
/* Eyebrow — ícono Bootstrap + etiqueta sobria */
.story-eyebrow {
  font-family: var(--label-font);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent2-color);   /* rojo cívico — pasa WCAG AA (~6:1) y combina con el ícono */
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 14px;
}
.story-eyebrow i { font-size: 1rem; color: var(--accent2-color); line-height: 0; }
.story-text h2 {
  font-family: var(--heading-font);
  font-size: clamp(1.65rem, 2.7vw, 2.2rem);   /* +~7% de presencia */
  font-weight: 600; line-height: 1.16;
  color: var(--heading-color); margin: 0 0 16px;
}
.story-text p {
  font-size: 1.08rem; line-height: 1.92;       /* lectura cómoda */
  color: var(--default-color); opacity: .9;
  margin: 0 0 1rem; max-width: 48ch;            /* mismo ancho de columna (en caracteres) */
}
.story-text p:last-child { margin-bottom: 0; }
/* Móvil: apilado, imagen siempre arriba */
@media (max-width: 768px) {
  .story { grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 3rem; }
  .story--imgright .story-media,
  .story--imgright .story-text { order: 0; }
  .story-media img { min-height: 230px; max-height: 320px; }
}

/* ── Espacios recreativos — mismas 4 cifras de color (identidad cívica),
   apenas suavizadas en intensidad para que acompañen al texto sin competir.
   El tamaño, peso, barras y etiquetas quedan como en la versión anterior.   */
.services-page .stat-box .num              { color: color-mix(in srgb, var(--accent-color),  transparent 12%); }
.services-page .stat-box:nth-child(2) .num { color: color-mix(in srgb, var(--accent2-color), transparent 8%); }
.services-page .stat-box:nth-child(3) .num { color: color-mix(in srgb, var(--blue-accent),  transparent 8%); }
.services-page .stat-box:nth-child(4) .num { color: color-mix(in srgb, var(--green-accent), transparent 8%); }

/* Espacios recreativos — fondo blanco limpio (sin el papel cremoso) + tarjetas más definidas */
/* Espacios usa el off-white frío base unificado; las tarjetas blancas resaltan sobre él. */
.services-page .espacio-card { box-shadow: 0 4px 18px rgba(44,28,10,.10); border-color: rgba(40,28,12,.12); }

/* ── Home — "Patrimonio vivo": cita editorial (reemplaza la tarjeta de datos) ──
   Sin caja, sin lista. Frase en serif grande con barra vertical de bandera.    */
.patrimonio-quote { position: relative; padding-left: 1.8rem; margin: 0; }
.patrimonio-quote::before {
  content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem;
  width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--flag-red) 0 33.33%, var(--flag-yellow) 33.33% 66.66%, var(--flag-blue) 66.66% 100%);
}
.pq-eyebrow {
  display: block;
  font-family: var(--label-font);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent2-color); margin-bottom: 1.3rem;
}
.pq-text {
  font-family: var(--heading-font);
  font-size: clamp(1.2rem, 1.75vw, 1.56rem);
  line-height: 1.62; font-weight: 400; font-style: normal;
  color: var(--heading-color); margin: 0; quotes: none;
}
@media (max-width: 991px) { .patrimonio-quote { margin-top: 1.5rem; } }

/* ════════════════════════════════════════════════════════════════════
   ENCABEZADOS MINIMALISTAS — solo eyebrow rojo + título.
   Se retira el tick y la línea dorada/tricolor bajo cada título.
   El tricolor de bandera queda como FIRMA únicamente en header y footer.
   ════════════════════════════════════════════════════════════════════ */
/* Fuera las líneas bajo los títulos */
.gold-divider { display: none; }
/* Fuera los ticks de los overlines (queda el texto rojo del eyebrow) */
.sh .over::before,
.section-title-custom .overline::before,
.cta-section .over::before { display: none; }
/* Fuera la línea tricolor del borde de las secciones alternas */
.light-background { border-top: none; border-image: none; }

/* ── Home — Friso de monumentos: 5 en línea, misma jerarquía (Opción D) ──── */
.mon-friso { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.friso-item { display: block; text-decoration: none; color: inherit; }
.friso-img {
  position: relative; display: block;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(44,28,10,.10);
}
.friso-img img {
  width: 100%; height: 225px; object-fit: cover; object-position: center; display: block;
  filter: saturate(.9); transition: transform .55s ease, filter .55s ease;
  will-change: transform;
}
.friso-item:hover .friso-img img { transform: scale(1.05); filter: saturate(1.06); }
/* Etiqueta de fecha — rectangular, estilo catálogo */
.friso-year {
  position: absolute; top: 10px; left: 10px;
  background: var(--accent-color); color: #1c1208;
  font-family: var(--label-font); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.friso-name {
  display: block; margin-top: .65rem;
  font-family: var(--heading-font); font-size: 1rem; line-height: 1.25;
  color: var(--heading-color); transition: color .25s;
}
.friso-item:hover .friso-name { color: var(--accent2-color); }
@media (max-width: 991px) { .mon-friso { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .mon-friso { grid-template-columns: repeat(2, 1fr); } .friso-img img { height: 240px; } }

/* ── Galería (monumentos.html) — imagen limpia sin tarjeta blanca ni hueco ── */
.gallery .gallery-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
}
.gallery .gallery-item:hover { box-shadow: none !important; transform: none !important; }

/* Touch / sin hover: el link siempre visible como badge compacto en la
   esquina inferior derecha. No tapa la imagen; área de toque ≥44px. */
@media (hover: none) {
  .gallery .gallery-item .gallery-links {
    opacity: 1;
    background: transparent;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 8px 8px 0;
    pointer-events: auto;
  }
  .gallery .gallery-item .gallery-links a {
    width: 44px; height: 44px;
    background: rgba(20,10,4,.70);
    border: 2px solid rgba(255,255,255,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .gallery .gallery-item:hover .gallery-links { opacity: 1; } /* mantener para tablet con teclado */
  .gallery .gallery-item img { transform: none !important; filter: saturate(.9) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   EYEBROWS DE SECCIÓN RETIRADOS
   El eyebrow en versalitas sobre cada título es el patrón "AI grammar"
   más saturado. Los títulos Playfair ya cargan la jerarquía, así que se
   retiran los genéricos. Se conserva el sistema temático deliberado de
   la Plaza (.story-eyebrow, con íconos) y las etiquetas de navegación
   (breadcrumbs, .nav-monumentos-overline).
   ════════════════════════════════════════════════════════════════════ */
.sh .over,
.section-title-custom .overline,
.cta-section .over { display: none; }

/* ════════════════════════════════════════════════════════════════════
   SELECTOR DE IDIOMA ES / EN  (i18n)
   Sobrio, alineado con el header institucional. El idioma activo en rojo cívico.
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   Selector de idioma · dropdown sobrio institucional (bandera SVG + código).
   El cambio de idioma sigue gestionado por i18n.js (data-lang / localStorage).
   ════════════════════════════════════════════════════════════════════ */
.lang-select { position: relative; flex-shrink: 0; margin: 0 16px 0 4px; font-family: var(--label-font); }
/* Desktop: el nav se empuja a la derecha y el selector queda como ÚLTIMO
   elemento, en el extremo derecho, después de "Espacios recreativos". */
@media (min-width: 1200px) {
  #navmenu.navmenu { order: 2; margin-left: auto; }
  .lang-select { order: 3; margin-left: 22px; }
}
.lang-sep { display: none; }   /* compat: oculta el separador "/" del markup anterior si quedara */

/* Banderas en SVG inline (data URI) — consistentes en todo navegador, sin emoji */
.lang-flag {
  display: inline-block; width: 18px; height: 13px; border-radius: 2px;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10); flex-shrink: 0;
}
.flag-es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23c60b1e'/%3E%3Crect y='.5' width='3' height='1' fill='%23ffc400'/%3E%3C/svg%3E"); }
.flag-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 30,30 M0,15 60,15' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 30,30 M0,15 60,15' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }

/* Botón disparador */
.lang-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--heading-color), transparent 84%);
  border-radius: 8px; padding: 6px 9px; cursor: pointer; line-height: 1;
  color: var(--heading-color); transition: border-color .2s, box-shadow .2s;
}
.lang-trigger:hover { border-color: color-mix(in srgb, var(--heading-color), transparent 68%); box-shadow: 0 1px 5px rgba(44,28,10,.08); }
.lang-trigger:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.lang-code { font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
.lang-caret { font-size: .7rem; opacity: .5; transition: transform .25s; }
.lang-select.open .lang-caret { transform: rotate(180deg); }

/* Menú desplegable */
.lang-options {
  position: absolute; top: calc(100% + 7px); right: 0; min-width: 174px;
  list-style: none; margin: 0; padding: 5px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--heading-color), transparent 88%);
  border-radius: 11px; box-shadow: 0 12px 32px rgba(44,28,10,.15);
  opacity: 0; transform: translateY(-6px) scale(.99); transform-origin: top right;
  pointer-events: none; transition: opacity .18s ease, transform .2s cubic-bezier(.22,1,.36,1);
  z-index: 1002;
}
.lang-select.open .lang-options { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lang-options li { margin: 0; list-style: none; }
.lang-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 8px 9px; border-radius: 7px; color: var(--heading-color);
  font-family: var(--label-font); font-size: .87rem; line-height: 1;
  transition: background-color .18s;
}
.lang-option:hover { background: color-mix(in srgb, var(--heading-color), transparent 93%); }
.lang-option:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.lang-option-label { flex: 1; }
.lang-check { font-size: .95rem; color: var(--accent2-color); opacity: 0; }   /* check del idioma activo */
.lang-option.is-active .lang-check { opacity: 1; }
.lang-option.is-active .lang-option-label { font-weight: 700; }

@media (max-width: 1200px) { .lang-select { margin-right: 12px; } }
@media (max-width: 480px) {
  .lang-select { margin: 0 9px 0 0; }
  .lang-trigger { padding: 7px 9px; gap: 6px; }   /* área de toque más cómoda */
  .lang-options { min-width: 170px; }
  .lang-option { padding: 12px 11px; }             /* fila ~44px para dedo */
}
/* Sin movimiento: el menú aparece sin deslizamiento ni giro de la flecha */
@media (prefers-reduced-motion: reduce) {
  .lang-options { transition: opacity .12s linear; transform: none; }
  .lang-select.open .lang-options { transform: none; }
  .lang-caret, .lang-trigger, .lang-option { transition: none; }
}

/* Ajuste móvil para la sección San Roque (historia-monumentos) */
@media (max-width: 768px) {
  #san-roque.section { padding-top: 1.25rem; }
  #san-roque .mon-section h2 {
    font-size: 1.32rem !important;
    line-height: 1.16 !important;
    margin-bottom: 1rem !important;
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: .5rem;
    align-items: start;
  }
  #san-roque .mon-section h2 i {
    font-size: .85rem !important;
    margin-top: .28rem !important;
    margin-right: 0 !important;
  }
  #san-roque .mon-section h2 span { display: block; }
  #san-roque .mon-img { margin-top: 0 !important; }
}

/* Encuadre móvil específico: San Roque (página de historia) */
@media (max-width: 768px) {
  #san-roque .mon-img { height: 230px; }
  #san-roque .mon-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% 18%;
  }
}