/* ============================================================
   SIERA · RECORRIDO DE LA INSURGENCIA · ZONGOLICA 2026-2029
   Paleta y tipografía tomadas del Manual de Identidad (Manual_RSv1):

     Valentine Red   #D41F35
     Bottle Green    #03694D
     Desert Storm    #F7F8F8

     Titular   → Avenir Next
     Subtítulo → Athelas

   NOTA SOBRE LAS TIPOGRAFÍAS: Avenir Next y Athelas son fuentes
   comerciales (no están en Google Fonts). Si el equipo de diseño
   cuenta con las licencias, agrégalas como @font-face con los
   archivos .woff2 reales en /assets/fonts y esta hoja de estilos
   las tomará automáticamente. Mientras tanto, se usan alternativas
   web gratuitas visualmente cercanas como respaldo: Poppins
   (geométrica, similar peso/track a Avenir Next) y Lora (serif
   cálida similar a Athelas).
   ============================================================ */

@font-face{
  font-family: "Avenir Next";
  src: local("Avenir Next"), local("AvenirNext-Regular");
  font-weight: 400 700;
  font-display: swap;
}
@font-face{
  font-family: "Athelas";
  src: local("Athelas"), local("Athelas-Regular");
  font-weight: 400 700;
  font-display: swap;
}

:root{
  /* ---- Colores oficiales del manual ---- */
  --rojo:        #D41F35;   /* Valentine Red */
  --rojo-dark:   #A5162A;
  --verde:       #03694D;   /* Bottle Green */
  --verde-dark:  #024F3A;
  --hueso:       #F7F8F8;   /* Desert Storm */
  --hueso-2:     #ECEDEC;
  --tinta:       #1A1A18;
  --tinta-suave: #5C5B57;
  --linea:       #E1E0DC;
  --linea-oscura-rojo:  rgba(247,248,248,0.22);
  --linea-oscura-verde: rgba(247,248,248,0.2);

  /* ---- Tipografía oficial (con respaldo web gratuito) ---- */
  --titular: "Avenir Next", "Poppins", "Century Gothic", sans-serif;
  --subtitulo: "Athelas", "Lora", Georgia, serif;
  --sans: "Avenir Next", "Poppins", "Segoe UI", sans-serif;

  --radius: 4px;

  /* ---- Sombras (nuevas, no alteran la paleta de color) ---- */
  --shadow-sm: 0 2px 8px -2px rgba(26,26,24,.10);
  --shadow-md: 0 10px 24px -8px rgba(26,26,24,.16);
  --shadow-lg: 0 20px 44px -12px rgba(26,26,24,.22);
  --shadow-red:  0 10px 22px -8px rgba(212,31,53,.35);
  --shadow-green: 0 10px 22px -8px rgba(3,105,77,.32);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ max-width: 100%; overflow-x: hidden; }

/* Resguardo general anti-desbordamiento: por defecto, un elemento de
   grid no se encoge más allá del ancho mínimo de su propio contenido,
   así su columna tenga espacio de sobra. Si algún día se agrega texto
   largo, una tabla o una imagen sin "max-width" dentro de cualquiera de
   estas cuadrículas, esta única línea evita que vuelva a ensanchar la
   página entera en pantallas angostas (el bug que causaba el corte a
   la derecha en "Municipios registrados"). */
.intro-grid > *,
.history-grid > *,
.valores-grid > *,
.simbolismo-grid > *,
.simbolo-defs > *,
.registro-grid > *,
.route-map-header > *{
  min-width: 0;
}

body{
  margin:0;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--hueso);
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

/* Evita que un enlace del menú esconda el título de la sección detrás
   del encabezado fijo (afecta tanto a los enlaces de navegación como
   a cualquier ancla interna). */
main section[id]{ scroll-margin-top: 88px; }

a, button, input[type="submit"]{ touch-action: manipulation; }

img{ max-width:100%; display:block; }

.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 560px){
  .wrap{ padding: 0 20px; }
}

/* ---------- Tipografía general ---------- */
h1,h2,h3{
  font-family: var(--subtitulo);
  font-weight: 700;
  margin: 0 0 .4em;
  color: var(--tinta);
}

.eyebrow{
  font-family: var(--subtitulo);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 .1em;
}
.eyebrow-red{ color: var(--rojo); }
.eyebrow-green{ color: var(--verde); }
.eyebrow-white{ color: var(--hueso); }

.eyebrow-rule{
  display:block;
  height: 3px; width: 64px;
  margin-bottom: 34px;
}
.eyebrow-rule.red{ background: var(--rojo); }
.eyebrow-rule.green{ background: var(--verde); }
.eyebrow-rule.white{ background: var(--hueso); }

.kicker{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 600;
  margin: 0 0 .8em;
}

.section-lead{
  max-width: 62ch;
  color: var(--tinta-suave);
  font-size: 1.05rem;
}
.section-lead.on-color{ color: rgba(247,248,248,.85); }

.small{ font-size: .85rem; color: var(--tinta-suave); }

/* ---------- Botones ---------- */
.btn{
  display: inline-flex; align-items:center; justify-content:center;
  font-family: var(--titular);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  min-height: 46px;
  padding: .8em 1.6em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.98); }
.btn:focus-visible{ outline: 3px solid var(--rojo); outline-offset: 2px; }

.btn-primary{ background: var(--rojo); color: var(--hueso); box-shadow: var(--shadow-red); }
.btn-primary:hover{ background: var(--rojo-dark); box-shadow: var(--shadow-md); }

.btn-secondary{ background: var(--verde); color: var(--hueso); box-shadow: var(--shadow-green); }
.btn-secondary:hover{ background: var(--verde-dark); box-shadow: var(--shadow-md); }

.btn-ghost{ background: transparent; color: var(--hueso); border-color: var(--linea-oscura-rojo); }
.btn-ghost:hover{ border-color: var(--hueso); }

.btn-outline{ background: transparent; color: var(--verde); border-color: var(--verde); }
.btn-outline:hover{ background: var(--verde); color: var(--hueso); }

.btn-block{ width: 100%; text-align: center; }

/* ============ ISOTIPO / ESCUDO SIERA (SVG reutilizable) ============ */
.isotipo{ display:block; object-fit: contain; }
.isotipo .st-line{ fill:none; stroke-linecap: round; stroke-linejoin: round; }

/* ============ ENCABEZADO ============ */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: rgba(247,248,248,.6);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
  border-top: 3px solid var(--rojo);
  box-shadow: var(--shadow-sm);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 12px; padding-bottom: 12px;
  gap: 20px;
  position: relative;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .isotipo{ width: 46px; height: 27px; flex-shrink:0; transition: transform .25s ease; }
.brand .isotipo .st-line{ stroke: var(--verde); }
.brand:hover .isotipo{ transform: rotate(-6deg) scale(1.06); }
.brand-text{
  font-family: var(--titular); font-weight:800; font-size: 1.3rem; letter-spacing: .02em;
  color: var(--tinta); line-height: 1;
}
.brand-sub{
  display:block; font-family: var(--subtitulo); font-size: .58rem; letter-spacing:.08em;
  text-transform: uppercase; color: var(--tinta-suave); margin-top: 2px;
}
.main-nav{ display:flex; gap: 22px; flex:1; justify-content:center; }
.main-nav a{
  position: relative;
  color: var(--tinta-suave); text-decoration:none; font-size:.88rem; font-weight:600;
  padding: 4px 2px; border-bottom: 2px solid transparent;
  transition: color .15s ease;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--rojo);
  transition: right .22s ease;
}
.main-nav a:hover{ color: var(--tinta); }
.main-nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap: 10px; }

/* Botón hamburguesa (solo visible en móvil) */
.nav-toggle{
  display:none;
  flex-direction: column; justify-content:center; align-items:center; gap: 5px;
  width: 44px; height: 44px; flex-shrink:0;
  background: transparent; border: 1.5px solid var(--linea);
  border-radius: var(--radius); cursor:pointer;
  padding: 0; touch-action: manipulation;
}
.nav-toggle:active{ background: var(--hueso-2); }
.nav-toggle span{
  display:block; width: 18px; height: 2px; background: var(--tinta);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity: 0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .main-nav{
    display: flex; flex-direction: column;
    justify-content: flex-start;
    position: absolute; top: 100%; left:0; right:0;
    background: var(--hueso);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 8px 16px -10px rgba(26,26,24,.2);
    padding: 6px 24px 18px;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .28s ease, opacity .2s ease;
  }
  .main-nav.is-open{ max-height: 420px; opacity: 1; }
  .main-nav a{
    padding: 15px 4px; border-bottom: 1px solid var(--linea);
    font-size: .95rem;
  }
  .main-nav a:hover{ border-color: var(--linea); }
  .main-nav a:last-child{ border-bottom:none; }

  .nav-toggle{ display:flex; }
}

@media (max-width: 560px){
  .header-actions .btn-outline{
    padding: .6em 1em; font-size: .82rem;
  }
  .brand-sub{ display:none; }
}

/* ============ HERO ============ */
.hero{
  position: relative;
  background: var(--verde-dark); /* respaldo mientras carga el video */
  color: var(--hueso);
  overflow: hidden;
  padding: 96px 0 72px;
}
/* El video de fondo: cubre todo el hero, detrás del degradado y del texto. */
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* Textura sutil: franjas diagonales muy translúcidas + un resplandor
   verde apagado en la esquina, tomado de la propia paleta institucional.
   Es puramente decorativo y no cambia ningún color de marca. */
.hero::before{
  content:"";
  position:absolute; inset:0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(26,26,24,.86) 0%, rgba(26,26,24,.62) 42%, rgba(26,26,24,.22) 72%, rgba(26,26,24,0) 100%),
    repeating-linear-gradient(135deg, rgba(247,248,248,.05) 0 2px, transparent 2px 44px),
    radial-gradient(700px 420px at 88% -10%, rgba(3,105,77,.35), transparent 60%),
    radial-gradient(600px 360px at -6% 115%, rgba(26,26,24,.22), transparent 60%);
  pointer-events: none;
}
.hero-inner{
  position:relative; z-index:2;
}
.hero-text{ max-width: 640px; }
.hero-title{ color: var(--hueso); text-shadow: 0 6px 26px rgba(26,26,24,.4); }

.hero-kicker{
  display:flex; align-items:center; gap: 10px;
  font-family: var(--sans); text-transform: uppercase; letter-spacing:.16em;
  font-size:.72rem; font-weight:700; color: rgba(247,248,248,.85);
  margin-bottom: 1.4em;
}
.hero-kicker .rule{ height:1px; width: 32px; background: rgba(247,248,248,.5); }

.hero-title{
  font-family: var(--titular);
  font-weight: 800;
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  line-height: .92;
  letter-spacing: .01em;
  margin: 0;
  text-transform: uppercase;
}
.hero-subtitle{
  font-family: var(--subtitulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  margin: .3em 0 .9em;
}
.hero-tagline{
  display:flex; align-items:center; gap: 12px;
  font-family: var(--sans); font-weight:600; letter-spacing:.08em;
  font-size: .82rem; text-transform: uppercase; color: rgba(247,248,248,.9);
  margin-bottom: 2em;
}
.hero-tagline .arrow{ font-size: 1rem; }
.hero-tagline .line{ height:1px; flex:0 0 40px; background: rgba(247,248,248,.6); }

.hero-sub{
  font-size: 1.05rem;
  max-width: 54ch;
  color: rgba(247,248,248,.9);
  margin-bottom: 2em;
}
.hero-cta{ display:flex; gap: 14px; flex-wrap:wrap; }

@media (max-width: 700px){
  .hero{ padding: 76px 0 56px; }
}
@media (max-width: 460px){
  .hero-cta{ flex-direction: column; align-items: stretch; }
  .hero-cta .btn{ text-align:center; }
}

/* ============ SECCIONES ============ */
.section{ padding: 84px 0; }
.section-tint{ background: var(--hueso-2); }
.section-red{ background: var(--rojo); color: var(--hueso); }
.section-green{ background: var(--verde); color: var(--hueso); }
.section-red *, .section-green *{ color: inherit; }
.section-red h2, .section-green h2{ color: var(--hueso); }

@media (max-width: 700px){
  .section{ padding: 56px 0; }
}

/* ---------- Introducción ---------- */
.intro-grid{
  display:grid; grid-template-columns: 1.3fr .9fr; gap: 56px; align-items:start;
}
.intro-copy p{ margin:0 0 1.1em; }
.intro-copy strong{ color: var(--verde); }
.intro-card{
  background: var(--hueso); border: 1.5px solid var(--linea);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.intro-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.intro-card .isotipo{ width:96px; height:56px; margin-bottom: 16px; }
.intro-card .isotipo .st-line{ stroke: var(--rojo); }
.intro-card dl{ margin:0; }
.intro-card dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--tinta-suave); margin-top:14px; }
.intro-card dt:first-child{ margin-top:0; }
.intro-card dd{ margin:2px 0 0; font-weight:700; font-family: var(--titular); }

@media (max-width: 860px){ .intro-grid{ grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Historia ---------- */
.history-grid{
  display:grid; grid-template-columns: 1.5fr 1fr; gap: 56px;
  margin-top: 12px;
}
.history-copy p{ margin: 0 0 1.1em; color: var(--tinta); }
.history-copy strong{ color: var(--rojo-dark); }

.history-card{
  background: var(--verde); color: var(--hueso);
  border-radius: var(--radius);
  padding: 30px 28px;
  align-self: start;
  box-shadow: var(--shadow-green);
}
.history-card h3{ color: var(--hueso); font-size: 1.05rem; font-family: var(--titular); }
.history-card .small{ color: rgba(247,248,248,.78); }

.symbol-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.symbol-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; }
.symbol-list div{ color: rgba(247,248,248,.88); }
.symbol-list strong{ color: var(--hueso); font-family: var(--titular); }

.swatch{ width:18px; height:18px; border-radius:3px; flex-shrink:0; margin-top:2px; border: 1px solid rgba(255,255,255,.25); }
.swatch-green{ background: var(--verde-dark); }
.swatch-white{ background: var(--hueso); }
.swatch-red{ background: var(--rojo); }

.divider{ height:1px; background: var(--linea-oscura-verde); margin: 22px 0; }

@media (max-width: 860px){ .history-grid{ grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Valores ---------- */
.valores-grid{
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}

/* Ornamento y kicker sobre "Valores" (los agrega script.js, clonando
   el propio escudo SIERA en vez de un ícono genérico). */
#valores .eyebrow::before, #valores .eyebrow::after{ content: none; }
.valores-kicker{
  display:block; text-align:center;
  font-size: .72rem; font-weight:700;
  letter-spacing: .35em; text-transform: uppercase;
  color: rgba(247,248,248,.75);
  margin-bottom: 8px;
}
.valores-ornament{
  display:flex; align-items:center; justify-content:center; gap: 14px;
  margin-bottom: 14px;
}
.valores-ornament .rule-line{ width: 56px; height: 1px; background: rgba(247,248,248,.35); }
.valores-ornament .isotipo{ width: 46px; height: 27px; }
.valores-ornament .st-line, .valores-close .st-line{ stroke: rgba(247,248,248,.85) !important; }

.valor-card{
  background: rgba(247,248,248,.08);
  border: 1px solid rgba(247,248,248,.25);
  border-radius: var(--radius);
  padding: 0;
  display:flex; align-items:stretch;
  overflow: hidden;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.valor-card:hover{ background: rgba(247,248,248,.14); border-color: rgba(247,248,248,.45); transform: translateY(-3px); }
.valor-card:active{ background: rgba(247,248,248,.14); }

.valor-content{
  flex: 1 1 56%;
  padding: 26px 24px;
  display:flex; flex-direction:column; gap: 12px;
}
.valor-content-head{ display:flex; gap: 16px; align-items:flex-start; }
.valor-icon{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--hueso);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background: rgba(247,248,248,.06);
  transition: background .2s ease, transform .2s ease;
}
.valor-card:hover .valor-icon{ background: var(--hueso); transform: scale(1.06); }
.valor-card:hover .valor-icon svg{ stroke: var(--verde); }
.valor-icon svg{ width: 22px; height: 22px; stroke: var(--hueso); fill:none; stroke-width: 1.6; }
.valor-icon img{ width: 24px; height: 24px; object-fit: contain; }
.valor-card h3{ font-family: var(--titular); font-size: 1.05rem; text-transform: uppercase; letter-spacing:.03em; margin: 0 0 .3em; color: var(--hueso); }
.valor-divider{ display:block; width: 30px; height: 2px; background: rgba(247,248,248,.35); margin: 2px 0 4px; }
.valor-card p{ margin:0; font-size: .92rem; color: rgba(247,248,248,.85); }

.valor-tag{
  display:flex; align-items:center; gap: 8px;
  margin-top: auto; padding-top: 6px;
  font-size: .78rem; font-weight:700;
  color: var(--hueso); opacity: .9;
}
.valor-tag svg{ width: 16px; height:16px; stroke: currentColor; fill:none; stroke-width: 1.8; flex-shrink:0; }

/* Panel ilustrativo: marcador de posición con el mismo ícono del
   valor, a la espera de fotografía real (ver nota al final de
   script.js sobre cómo reemplazarlo). */
.valor-image{
  flex: 0 0 40%;
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background: var(--img-bg, var(--verde-dark));
}
.valor-image::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(135deg, rgba(247,248,248,.06) 0 2px, transparent 2px 26px);
}
.valor-image-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity: .16;
}
.valor-image-icon svg{ width: 58%; height: 58%; stroke: var(--hueso); fill:none; stroke-width: 1; }
.valor-image-icon img{ width: 46%; height: 46%; object-fit: contain; }
.valor-image-note{
  position:absolute; left: 10px; bottom: 7px;
  font-size: .6rem; font-style: italic;
  color: rgba(247,248,248,.55);
}
.valor-image img{
  position:absolute; inset:0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.valor-card:hover .valor-image img{ transform: scale(1.05); }

/* ---------- Cierre de la sección: ornamento + frase ---------- */
.valores-close{ text-align:center; margin-top: 46px; }
.valores-close .valores-ornament{ margin-bottom: 20px; }
.valores-quote{
  font-family: var(--titular); font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  color: var(--hueso);
  max-width: 640px; margin: 0 auto 8px;
  line-height: 1.5;
}
.valores-quote-mark{ color: var(--rojo); font-size: 1.5em; line-height: 0; vertical-align: -.08em; }
.valores-attrib{ font-size: .85rem; color: rgba(247,248,248,.6); }

@media (max-width: 700px){ .valores-grid{ grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 760px){
  .valor-card{ flex-direction: column; }
  .valor-image{ order: -1; min-height: 140px; flex-basis: auto; }
}
@media (max-width: 480px){
  .valor-content{ padding: 20px; gap: 10px; }
  .valor-icon{ width: 38px; height: 38px; }
}

/* ---------- Simbolismo ---------- */
.simbolismo-grid{
  margin-top: 40px;
  display:grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items:center;
}
.simbolismo-flag{
  border-radius: var(--radius); overflow:hidden;
  border: 1px solid var(--linea); margin-bottom: 18px;
  box-shadow: var(--shadow-md);
}
.simbolismo-flag img{
  width: 100%; height: 260px;
  object-fit: cover; object-position: center;
  display:block;
}
.simbolismo-note{
  background: var(--verde); color: var(--hueso);
  border-radius: var(--radius); padding: 22px;
  font-size: .92rem;
  box-shadow: var(--shadow-green);
}
.simbolismo-note strong{ color: var(--hueso); }

.simbolismo-shield{ display:flex; justify-content:center; }
.simbolismo-shield .isotipo{ width: 240px; height: 140px; }
.simbolismo-shield .isotipo .st-line{ stroke: var(--rojo); }

.simbolo-defs{
  display:grid; grid-template-columns: 1fr 1fr; gap: 22px 28px;
}
.simbolo-defs h4{
  font-family: var(--titular); font-size: 1rem; margin: 0 0 .25em;
  color: var(--rojo-dark); text-transform: uppercase; letter-spacing:.02em;
}
.simbolo-defs p{ margin:0; font-size: .88rem; color: var(--tinta-suave); }

@media (max-width: 860px){
  .simbolismo-grid{ grid-template-columns: 1fr; gap: 32px; }
  .simbolismo-shield{ order: -1; margin-bottom: 8px; }
}
@media (max-width: 480px){
  .simbolismo-shield .isotipo{ width: 172px; height: 100px; }
  .simbolo-defs{ grid-template-columns: 1fr; gap: 18px; }
  .simbolismo-flag img{ height: 190px; }
}

/* ---------- Recorrido: sección con más protagonismo ---------- */
.section-feature{
  position: relative;
  padding: 100px 0 96px;
}
.section-feature::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--rojo);
}

.route-stats{
  display:flex; flex-wrap:wrap;
  margin: 34px 0 4px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.route-stat{
  display:flex; align-items:center; gap: 14px;
  flex: 1 1 180px;
  padding: 22px 24px;
  border-right: 1px solid var(--linea);
}
.route-stat:last-child{ border-right:none; }
.route-stat-icon{
  width: 42px; height: 42px; border-radius: 10px; flex-shrink:0;
  background: var(--hueso-2);
  display:flex; align-items:center; justify-content:center;
}
.route-stat-icon svg{ width: 22px; height: 22px; fill:none; stroke: var(--rojo); stroke-width: 1.8; }
.route-stat:nth-child(2) .route-stat-icon svg{ stroke: var(--verde); fill: var(--verde); fill-opacity:.08; }
.route-stat-num{
  display:block;
  font-family: var(--titular); font-weight:800;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  color: var(--tinta); line-height:1;
}
.route-stat-label{
  display:block;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--tinta-suave); margin-top:4px; font-weight:700;
}

@media (max-width: 560px){
  .route-stat{ flex: 1 1 50%; padding: 18px; border-bottom: 1px solid var(--linea); }
  .route-stat:nth-child(odd){ border-right: 1px solid var(--linea); }
  .route-stat:last-child{ border-right: 1px solid var(--linea); border-bottom:none; }
}

.route-subtitle{
  font-family: var(--titular); text-transform: uppercase; letter-spacing:.03em;
  font-size: 1.1rem; font-weight: 800; color: var(--tinta);
  margin: 56px 0 6px;
}
.route-subtitle-map{ margin-top: 64px; }

/* Línea de tiempo: un trazo vertical continuo con una parada por fila.
   Es intencionalmente lineal (no en zigzag) para que se comporte igual
   de bien en pantallas angostas: no requiere gestos especiales, solo
   se desplaza con el resto de la página. */
.timeline{
  list-style:none; margin: 8px 0 0; padding:0;
  position: relative;
  max-width: 640px;
}
.timeline::before{
  content:"";
  position:absolute; left: 33px; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  /* Degradado del rojo (salida) al verde (meta): refuerza visualmente
     el sentido del recorrido sin agregar colores nuevos a la paleta. */
  background: linear-gradient(to bottom, var(--rojo), var(--linea) 12%, var(--linea) 88%, var(--verde));
  z-index: 0;
}
.timeline-item{
  position: relative;
  display:flex; align-items:center; gap: 16px;
  padding: 9px 14px;
  border-radius: 10px;
  transition: background .15s ease;
}
.timeline-item:hover{ background: var(--hueso); }
.timeline-node{
  width: 40px; height: 40px; border-radius: 50%; flex-shrink:0;
  background: var(--hueso);
  color: var(--rojo);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--titular); font-weight:800; font-size:.92rem;
  border: 2px solid var(--rojo);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
  z-index: 1;
}
.timeline-item:hover .timeline-node{ transform: scale(1.1); }
.timeline-start .timeline-node{ background: var(--rojo); color: var(--hueso); }
.timeline-end .timeline-node{ background: var(--verde); border-color: var(--verde); color: var(--hueso); }
.timeline-content{ padding: 6px 0; flex:1; }
.timeline-content h4{
  font-family: var(--titular); font-size: 1rem; font-weight:800;
  text-transform: uppercase; letter-spacing:.02em;
  margin: 0 0 2px; color: var(--tinta);
}
.timeline-content p{ margin:0; font-size: .82rem; color: var(--tinta-suave); }
.timeline-start .timeline-content h4{ color: var(--rojo-dark); }
.timeline-end .timeline-content h4{ color: var(--verde-dark); }

@media (max-width: 480px){
  .route-stats{ gap: 0; }
  .timeline-content h4{ font-size: .92rem; }
  .timeline-item{ gap: 12px; }
}

/* ---------- Recorrido: encabezado visual del mapa ---------- */
.route-map-header{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap: 20px;
  margin-top: 60px;
}
.route-subtitle-map{ display:flex; align-items:center; }
.route-map-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height:30px; border-radius:50%; margin-right:10px;
  background: var(--rojo); flex-shrink:0;
}
.route-map-icon svg{ width:16px; height:16px; stroke: var(--hueso); fill:none; stroke-width: 2.1; }
.route-map-lead{ margin: 8px 0 0; font-size: .95rem; }

.route-map-badges{ display:flex; gap: 10px; flex-wrap:wrap; }
.route-map-badge{
  background: var(--hueso); border: 1.5px solid var(--linea);
  border-radius: 999px; padding: 9px 16px 9px 14px;
  font-size:.78rem; font-weight:700; color: var(--tinta-suave);
  white-space:nowrap;
}
.route-map-badge strong{
  font-family: var(--titular); font-weight:800; color: var(--rojo);
  font-size: 1rem; margin-right: 4px;
}

/* Marco del mapa: línea plana de un solo color, sin degradado ni
   animación, para un acabado más sobrio. */
.route-map-frame{
  margin-top: 22px;
  padding: 2px;
  border-radius: 15px;
  background: var(--linea);
  box-shadow: var(--shadow-lg);
}
.route-map-wrap{
  position: relative;
  border-radius: 13px;
  background: var(--hueso);
  overflow: hidden;
}
.route-map{
  height: 460px;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--hueso-2); /* se ve mientras cargan los tiles */
}
.route-map-note{ margin-top: 14px; }

.route-legend{
  display:flex; flex-wrap:wrap; align-items:center; gap: 10px;
  margin-top: 20px;
}
.route-legend-item{
  display:flex; align-items:center; gap: 8px;
  font-size: .8rem; font-weight:700; color: var(--tinta-suave);
  background: var(--hueso); border: 1px solid var(--linea);
  padding: 7px 14px 7px 10px; border-radius: 999px;
}
.route-legend-note{
  font-size: .8rem; font-weight:600; font-style: italic;
  color: var(--tinta-suave); padding-left: 4px;
}
.route-legend-dot{
  width: 14px; height:14px; border-radius:50%;
  border: 2px solid var(--hueso);
  box-shadow: 0 0 0 1.5px var(--linea);
  flex-shrink:0;
}
.route-legend-dot.start{ background: var(--rojo); }
.route-legend-dot.stop{ background: var(--hueso); box-shadow: 0 0 0 1.5px var(--rojo); }
.route-legend-dot.end{ background: var(--verde); }

/* Marcadores: en móvil y escritorio, las paradas intermedias muestran su
   número directamente sobre el mapa (más visual que un simple punto);
   salida y meta destacan con un pin de ubicación y un halo pulsante. */
.route-pin{
  width: 26px; height: 26px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--hueso);
  border: 2px solid var(--rojo);
  color: var(--rojo-dark);
  font-family: var(--titular); font-weight:800; font-size: .72rem;
  transition: transform .15s ease;
  cursor: pointer;
}
.route-pin:hover{ transform: scale(1.22); z-index: 500 !important; }

.route-pin-start,
.route-pin-end{
  width: 30px; height: 30px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--hueso);
  border: 2px solid var(--hueso);
  font-family: var(--titular); font-weight:800; font-size: .7rem;
}
.route-pin-start{ background: var(--rojo); }
.route-pin-end{ background: var(--verde); }

/* Pin tipo ubicación para salida/meta (ver script.js) */
.route-pin-place{
  transition: transform .15s ease;
  transform-origin: bottom center;
}
.route-pin-place:hover{ transform: scale(1.1); }

/* Chip flotante con el resumen del recorrido */
.route-info-chip{
  display:flex; align-items:center; gap: 10px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 10px 16px 10px 12px;
  font-family: var(--sans);
  box-shadow: var(--shadow-md);
}
.route-info-chip-icon{
  display:flex; align-items:center; justify-content:center;
  width: 32px; height:32px; border-radius:50%; flex-shrink:0;
  background: var(--rojo);
}
.route-info-chip-icon svg{ width:16px; height:16px; stroke: var(--hueso); fill:none; stroke-width:2.2; }
.route-info-chip-text{ display:flex; flex-direction:column; line-height:1.3; }
.route-info-chip strong{
  font-family: var(--titular); font-weight:800; font-size:.86rem;
  color: var(--rojo); letter-spacing:.01em;
}
.route-info-chip span{ font-size:.72rem; color: var(--tinta-suave); font-weight:600; }

/* Ventanas emergentes de cada parada */
.leaflet-popup-content-wrapper{
  border-radius: 8px; padding:0; overflow:hidden;
}
.leaflet-popup-content{ margin:0; width:auto !important; }
.leaflet-popup-tip{ box-shadow: none; }
.route-popup{ min-width: 160px; font-family: var(--sans); }
.route-popup-head{
  background: var(--rojo); color: var(--hueso); padding: 8px 13px;
  font-family: var(--titular); font-weight:800; font-size:.85rem;
}
.route-popup-body{ padding: 9px 13px 11px; }
.route-popup-badge{
  display:inline-block; margin-top:2px;
  background: var(--hueso-2); color: var(--tinta-suave);
  font-size:.68rem; font-weight:700; letter-spacing:.03em;
  padding: 3px 10px; border-radius: 20px;
}

/* Línea del recorrido: trazo punteado estático, sin animación */
.route-line{ }

/* Control propio para volver a ver el recorrido completo */
.route-reset-btn{
  background: var(--hueso); color: var(--tinta);
  font-family: var(--sans); font-weight:700; font-size:.76rem;
  padding: 7px 12px; border-radius: 20px;
  border: 1px solid var(--linea);
  cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.route-reset-btn:hover{ background: var(--hueso-2); }
.route-reset-btn svg{ width:13px; height:13px; stroke: var(--rojo); fill:none; stroke-width:2.2; }

/* Controles de Leaflet: versión más discreta y coherente con la marca */
.leaflet-control-zoom{
  border: 1px solid var(--linea) !important; box-shadow: none !important;
}
.leaflet-control-zoom a{
  background: var(--hueso) !important; color: var(--tinta) !important;
  border-color: var(--linea) !important;
}
.leaflet-control-zoom a:hover{ background: var(--hueso-2) !important; }
.leaflet-control-attribution{
  background: rgba(247,248,248,.85) !important; font-size: 10px !important;
}

@media (max-width: 700px){
  .route-map-header{ align-items: flex-start; }
  .route-map-badges{ width: 100%; }
  .route-map-badge{ flex:1; text-align:center; padding: 9px 8px; }
}
@media (max-width: 600px){
  .route-map{ height: 320px; }
}
@media (max-width: 420px){
  .route-map{ height: 270px; }
  .route-map-frame{ padding: 2px; border-radius: 13px; }
  .route-map-wrap{ border-radius: 11px; }
  .route-map{ border-radius: 11px; }
  .route-legend{ gap: 8px; }
  .route-legend-item, .route-legend-note{ font-size: .72rem; padding: 6px 10px 6px 8px; }
  .route-reset-btn{ font-size: .68rem; padding: 6px 10px; }
  .route-info-chip{ padding: 8px 12px 8px 10px; }
  .route-info-chip-icon{ width:26px; height:26px; }
  .route-info-chip strong{ font-size: .74rem; }
  .route-info-chip span{ font-size: .66rem; }
}

/* ---------- Galería ---------- */
.gallery-tabs{
  display:flex; flex-wrap:wrap; gap: 8px;
  margin-top: 32px;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 14px;
}
.gallery-tab{
  font-family: var(--titular);
  background: var(--hueso); color: var(--tinta-suave);
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  padding: .55em 1.3em;
  font-weight: 700; font-size: .88rem;
  cursor: pointer;
  min-height: 40px;
  touch-action: manipulation;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gallery-tab:hover{ border-color: var(--rojo); color: var(--tinta); }
.gallery-tab.is-active{ background: var(--rojo); color: var(--hueso); border-color: var(--rojo); box-shadow: var(--shadow-red); }

.gallery-panels{ margin-top: 8px; }

.gallery-grid{
  margin-top: 32px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery-item{ margin:0; }
.gallery-item{ overflow:hidden; border-radius: var(--radius); }
.gallery-placeholder{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: var(--verde);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* Textura diagonal muy sutil sobre el color plano, para que el
   marcador de posición se vea más trabajado mientras no hay foto real. */
.gallery-placeholder::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(135deg, rgba(247,248,248,.07) 0 2px, transparent 2px 26px);
}
/* Ícono de cámara discreto al centro, marcando que ahí va una foto */
.gallery-placeholder::after{
  content:"";
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 40px; height: 30px;
  border: 2px solid rgba(247,248,248,.55);
  border-radius: 5px;
}
.gallery-item:hover .gallery-placeholder{ transform: scale(1.03); box-shadow: var(--shadow-md); }
.gallery-item:nth-child(3n+2) .gallery-placeholder{ background: var(--verde-dark); }
.gallery-item:nth-child(3n) .gallery-placeholder{ background: var(--tinta-suave); }

/* ---------- Fotografías reales dentro de la galería ---------- */
.gallery-item img{
  display:block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform .3s ease, box-shadow .3s ease;
  background: var(--hueso-2);
}
.gallery-item:hover img{ transform: scale(1.03); box-shadow: var(--shadow-md); }

/* ---------- Variante: foto completa, sin recorte ----------
   Para fotos con otra proporción (retratos, documentos) donde recortar
   a 4:3 tapaba parte de la imagen. Se ve completa, con un fondo suave
   detrás para rellenar el espacio sobrante. */
.gallery-item--full img{
  object-fit: contain;
  background: var(--hueso-2);
}

.gallery-item figcaption{
  margin-top: 10px; font-size: .85rem; color: var(--tinta-suave);
}

@media (max-width: 760px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .gallery-grid{ grid-template-columns: 1fr; } }

/* ---------- Registro ---------- */
.registro-grid{
  margin-top: 40px;
  display:grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}

.registro-form{
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.field{ margin-bottom: 18px; }
.field label{
  display:block; font-size:.82rem; font-weight:700;
  margin-bottom: 6px; color: var(--tinta);
}
.field input{
  width:100%;
  font-family: var(--sans);
  font-size: 1rem; /* 16px: evita que iOS haga zoom automático al enfocar */
  padding: .75em .8em;
  min-height: 46px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radius);
  background: #fff;
  color: var(--tinta);
}
.field input:focus-visible{
  outline: none; border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(212,31,53,.15);
}

.form-msg{ min-height: 1.2em; margin: 12px 0 0; font-size: .85rem; }
.form-msg.ok{ color: var(--verde-dark); }
.form-msg.error{ color: var(--rojo-dark); }

.registro-tabla-wrap h3{ font-family: var(--titular); font-size: 1.05rem; margin-bottom: 14px; }
.tabla-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.registro-tabla{
  width:100%; min-width: 480px; border-collapse: collapse; font-size:.92rem;
  background: var(--hueso);
}
.registro-tabla th, .registro-tabla td{
  text-align:left; padding: 10px 12px; border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
.registro-tabla tbody tr{ transition: background .15s ease; }
.registro-tabla tbody tr:hover{ background: var(--hueso-2); }
.registro-tabla tbody tr.empty-row:hover{ background: transparent; }
.registro-tabla thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--tinta-suave); background: var(--hueso-2);
}
.registro-tabla tfoot td{ font-weight:700; border-bottom:none; border-top: 2px solid var(--verde); }
.empty-row td{ color: var(--tinta-suave); font-style: italic; white-space: normal; }

@media (max-width: 860px){ .registro-grid{ grid-template-columns: minmax(0,1fr); gap: 32px; } }
@media (max-width: 480px){
  .registro-form{ padding: 22px; }
}

/* ============ PIE DE PÁGINA ============ */
.site-footer{
  position: relative;
  background: var(--verde); color: rgba(247,248,248,.8);
  padding: 44px 0;
}
/* Franja tricolor discreta: un guiño a la bandera SIERA sin introducir
   colores nuevos, usando únicamente los tonos ya definidos en :root. */
.site-footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(to right, var(--verde-dark) 0 33.3%, var(--hueso) 33.3% 66.6%, var(--rojo) 66.6% 100%);
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 24px; flex-wrap: wrap;
}
.footer-brand{ display:flex; align-items:center; gap: 10px; }
.footer-brand .isotipo{ width: 38px; height: 22px; }
.footer-brand .isotipo .st-line{ stroke: var(--hueso); }
.footer-brand-text{ font-family: var(--titular); font-weight:800; font-size:1.05rem; color: var(--hueso); }
.footer-inner p{ margin:6px 0 0; }
.site-footer .small{ max-width: 46ch; color: rgba(247,248,248,.65); }

@media (max-width: 560px){
  .site-footer{ padding: 36px 0; }
  .footer-inner{ flex-direction: column; gap: 18px; }
}

/* ============ MODAL LOGIN ============ */
.modal{
  position: fixed; inset:0; z-index: 100;
  display:flex; align-items:center; justify-content:center;
  visibility: hidden; opacity: 0;
  transition: opacity .18s ease, visibility .18s ease;
}
.modal[aria-hidden="false"]{ visibility: visible; opacity: 1; }
.modal-backdrop{
  position:absolute; inset:0; background: rgba(26,26,24,.6);
}
.modal-panel{
  position:relative; z-index:1;
  background: var(--hueso);
  border-radius: var(--radius);
  border-top: 4px solid var(--rojo);
  padding: 32px 30px;
  width: 92%; max-width: 380px;
  transform: translateY(8px);
  transition: transform .18s ease;
  box-shadow: var(--shadow-lg);
}
.modal[aria-hidden="false"] .modal-panel{ transform: translateY(0); }
.modal-close{
  position:absolute; top:6px; right:6px;
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; font-size:1.5rem; line-height:1;
  cursor:pointer; color: var(--tinta-suave);
  touch-action: manipulation;
}
.modal-close:active{ color: var(--tinta); }
.modal-panel h3{ margin-bottom:.2em; font-family: var(--titular); }

@media (max-width: 420px){
  .modal-panel{ padding: 26px 22px; }
}

/* ============ Accesibilidad ============ */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--rojo);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; }
}

/* ============ Revelado suave al hacer scroll ============
   Esta clase la agrega script.js SOLO mediante JavaScript (nunca está
   en el HTML). Así, si JavaScript no carga por cualquier motivo, todo
   el contenido se ve normal desde el principio — nada queda oculto. */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.reveal-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   TOQUES MODERNOS — todo generado por script.js o con pseudo-
   elementos CSS. No se tocó el HTML ni se agregó ningún color
   nuevo: todo usa las variables ya definidas en :root.
   ============================================================ */

/* ---------- Selección de texto y scrollbar de marca ---------- */
::selection{ background: var(--rojo); color: var(--hueso); }
html{ scrollbar-width: thin; scrollbar-color: var(--verde) var(--hueso-2); }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--hueso-2); }
::-webkit-scrollbar-thumb{ background: var(--verde); border-radius: 20px; border: 2px solid var(--hueso-2); }
::-webkit-scrollbar-thumb:hover{ background: var(--verde-dark); }

/* ---------- Barra de progreso de lectura ---------- */
/* Creada por JS (un solo <div>, ver script.js). Tricolor, fiel a la
   bandera SIERA, crece de izquierda a derecha según el scroll. */
#progressBar{
  position: fixed; top:0; left:0; z-index: 200;
  height: 3px; width: 0%;
  background: linear-gradient(to right, var(--verde), var(--hueso) 50%, var(--rojo));
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce){ #progressBar{ transition:none; } }

/* ---------- Orbes flotantes en el hero ---------- */
/* Puramente decorativos, mismos tonos verde/hueso ya usados en .hero::before. */
.hero::after{
  content:"";
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-orb{
  display: none;
}
@keyframes orbit-drift{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(24px,-18px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce){ .hero-orb{ animation:none; } }
@media (max-width: 700px){ .hero-orb-1{ width:180px; height:180px; } .hero-orb-2{ width:130px; height:130px; } }

/* Foco de luz que sigue el cursor dentro del hero (--mx/--my los fija
   script.js en cada movimiento del mouse; sin JS, simplemente no se
   mueve del centro y sigue viéndose bien). */
.hero-spotlight{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,20%), rgba(247,248,248,.16), transparent 70%);
}

/* ---------- Numeral decorativo "1810" detrás de Historia ---------- */
.history-copy{ position:relative; }
.history-copy::before{
  content:"1810";
  position:absolute;
  top:-2.4rem; right:-.4rem;
  font-family: var(--titular);
  font-weight:800;
  font-size: clamp(4.5rem, 13vw, 8.5rem);
  line-height:1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(3,105,77,.16);
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.history-copy p{ position:relative; z-index:1; }
@media (max-width: 860px){ .history-copy::before{ display:none; } }

/* ---------- Brillo diagonal al pasar el cursor sobre botones ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events:none;
}
.btn:hover::after{ left: 130%; }

/* ---------- Números que suman al entrar en pantalla ---------- */
/* script.js reemplaza el texto de .route-stat-num al llegar al viewport;
   este estilo solo evita el "salto" mientras cambian los dígitos. */
.route-stat-num{ font-variant-numeric: tabular-nums; }

/* ---------- Navegación por puntos (una por sección) ---------- */
/* Los puntos los crea script.js a partir de las secciones que ya
   existen en el HTML (no se agrega ningún id ni sección nueva). */
.section-dots{
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 60;
  display:flex; flex-direction:column; gap: 12px;
}
.section-dot{
  width: 9px; height: 9px; border-radius:50%;
  background: transparent;
  border: 1.5px solid var(--tinta-suave);
  opacity:.5;
  cursor:pointer; padding:0;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.section-dot:hover{ opacity:1; transform: scale(1.25); }
.section-dot.is-active{
  background: var(--rojo); border-color: var(--rojo); opacity:1;
  transform: scale(1.3);
}
@media (max-width: 900px){ .section-dots{ display:none; } }

/* ============================================================
   INSPIRADO EN FERIA ZONGOLICA 2026 — mismo espíritu festivo,
   con la paleta SIERA (rojo/verde/hueso). Nada de esto cambia
   colores ni reordena secciones; solo el vestuario visual.
   ============================================================ */

/* ---------- Insignias con diamantes en los "eyebrow" ---------- */
.eyebrow::before, .eyebrow::after{
  content: "✦";
  display: inline-block;
  font-size: .55em;
  opacity: .55;
  vertical-align: middle;
  margin: 0 .4em;
}
.eyebrow::before{ margin-left: 0; }

/* ---------- Kicker del hero como insignia tipo "pill" ---------- */
.hero-kicker{
  display: inline-flex;
  background: rgba(247,248,248,.14);
  border: 1px solid rgba(247,248,248,.32);
  border-radius: 999px;
  padding: .5em 1.1em;
}
.hero-kicker .rule{ display:none; }
.hero-kicker::before, .hero-kicker::after{
  content: "✦";
  opacity: .85;
}
.hero-kicker::before{ margin-right: .1em; }
.hero-kicker::after{ margin-left: .5em; }

/* ---------- Franja de texto en movimiento (ticker) ----------
   Creada e insertada por script.js, justo debajo del encabezado.
   Recorre datos que YA existen en la página (150 km, 14 municipios,
   15 de septiembre...), no se inventa contenido nuevo. */
.ticker-band{
  background: rgba(3,105,77,.85);
  backdrop-filter: blur(6px);
  color: var(--hueso);
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid rgba(247,248,248,.15);
}
.ticker-track{
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding: 10px 0;
  animation: ticker-desliza 32s linear infinite;
  will-change: transform;
}
.ticker-track span{
  font-family: var(--titular);
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.ticker-track span.sep{ opacity: .55; font-weight: 400; }
@keyframes ticker-desliza{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.ticker-band:hover .ticker-track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none; } }

/* ---------- Cuenta regresiva en el hero ----------
   Insertada por script.js entre la bajada del hero y los botones.
   Muestra días/horas/min/seg para el próximo 15 de septiembre. */
.hero-countdown{ margin: 0 0 1.9em; }
.hero-countdown-label{
  display:block;
  font-size: .72rem; font-weight:700;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(247,248,248,.82);
  margin-bottom: .7em;
}
.hero-countdown-grid{
  display:flex; align-items:center; gap: 10px; flex-wrap: wrap;
}
.hero-countdown-item{
  background: rgba(247,248,248,.13);
  border: 1px solid rgba(247,248,248,.28);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 66px;
  text-align: center;
  backdrop-filter: blur(2px);
}
.hero-countdown-item .num{
  display:block;
  font-family: var(--titular); font-weight: 800;
  font-size: 1.6rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-countdown-item .lab{
  display:block;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .09em;
  margin-top: 4px; color: rgba(247,248,248,.78);
}
.hero-countdown-sep{
  font-family: var(--titular); font-weight: 800;
  font-size: 1.35rem; opacity: .5;
}
@media (max-width: 480px){
  .hero-countdown-item{ padding: 8px 11px; min-width: 54px; }
  .hero-countdown-item .num{ font-size: 1.3rem; }
}

.gallery-item{ position: relative; }
@media (hover: hover) and (pointer: fine){
  .gallery-item figcaption{
    position: absolute; left:0; right:0; bottom:0; margin:0;
    padding: 16px 14px 12px;
    background: linear-gradient(to top, rgba(26,26,24,.86), transparent 85%);
    color: var(--hueso);
    font-weight: 700;
    transform: translateY(6px);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
  }
  .gallery-item:hover figcaption{ opacity: 1; transform: translateY(0); }
}
.gallery-hint{
  margin: 10px 0 0;
  font-size: .8rem; font-style: italic;
  color: var(--tinta-suave);
}


.registro-podio{ margin-bottom: 22px; }
.registro-podio-title{
  font-family: var(--titular); font-size: .95rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-suave); margin: 0 0 12px;
}
.registro-podio-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.registro-podio-card{
  display:flex; flex-direction:column; gap: 2px;
  background: var(--hueso-2); border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.registro-podio-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.registro-podio-rank{
  font-family: var(--titular); font-weight: 800; font-size: .78rem;
  color: var(--tinta-suave); letter-spacing: .04em;
}
.registro-podio-municipio{
  font-family: var(--titular); font-size: 1rem; font-weight: 800;
  color: var(--tinta); margin-top: 2px;
}
.registro-podio-alcalde{ font-size: .78rem; color: var(--tinta-suave); }
.registro-podio-num{ font-size: .76rem; font-weight: 700; color: var(--verde-dark); margin-top: 4px; }

.registro-podio-card.rank-1{
  background: var(--rojo); border-color: var(--rojo);
  box-shadow: var(--shadow-red);
}
.registro-podio-card.rank-1 .registro-podio-rank{ color: rgba(247,248,248,.85); }
.registro-podio-card.rank-1 .registro-podio-municipio,
.registro-podio-card.rank-1 .registro-podio-alcalde{ color: var(--hueso); }
.registro-podio-card.rank-1 .registro-podio-num{ color: var(--hueso); }

@media (max-width: 640px){
  .registro-podio-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   MÁS VISUAL E INTERACTIVO — conecta piezas que ya existían
   entre sí (simbolismo↔escudo, línea de tiempo↔mapa) y agrega
   pequeños momentos de deleite (dibujo del escudo, confeti al
   registrar). Misma paleta SIERA en todo momento.
   ============================================================ */

/* ---------- El escudo se "dibuja" al aparecer en pantalla ----------
   script.js mide cada trazo y lo anima de invisible a completo.
   Si JavaScript no calculara la longitud a tiempo, el trazo queda
   visible igual (nunca se pierde el escudo). */
.isotipo-dibujar .st-line{
  transition: stroke-dashoffset 1.1s ease;
}

/* ---------- Simbolismo: resalta su parte del escudo al pasar el cursor ---------- */
.simbolo-defs > div{
  padding: 8px 10px; margin: -8px -10px;
  border-radius: 8px;
  transition: background .2s ease;
  cursor: default;
}
.simbolo-defs > div:hover{ background: rgba(212,31,53,.07); }
.simbolismo-shield .st-line{ transition: stroke .2s ease, filter .2s ease; }
.simbolismo-shield .st-line.is-highlight{
  stroke: var(--rojo) !important;
  filter: drop-shadow(0 0 5px rgba(212,31,53,.55));
}

/* ---------- Línea de tiempo enlazada al mapa ---------- */
.timeline-item{ cursor: pointer; }
.timeline-item::after{
  content: "Ver en el mapa ↗";
  margin-left: auto;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--rojo);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
  padding-right: 6px;
}
.timeline-item:hover::after{ opacity: 1; transform: translateX(0); }
@media (max-width: 560px){ .timeline-item::after{ display: none; } }

.route-pin.marker-highlight,
.route-pin-place.marker-highlight{
  transform: scale(1.4);
  filter: drop-shadow(0 0 10px rgba(212,31,53,.65));
  z-index: 999;
}

.confeti-mota{
  position: fixed;
  z-index: 300;
  width: 8px; height: 8px;
  border-radius: 2px;
  pointer-events: none;
  animation: confeti-caida .9s ease-out forwards;
}
@keyframes confeti-caida{
  from{ transform: translate(0,0) rotate(0deg); opacity: 1; }
  to{ transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .confeti-mota{ display: none; }
}

/* ---------- Lightbox: ampliar la bandera con un clic ---------- */
.simbolismo-flag{ cursor: zoom-in; }
.lightbox-overlay{
  position: fixed; inset: 0; z-index: 250;
  display:flex; align-items:center; justify-content:center;
  padding: 28px;
  background: rgba(26,26,24,.9);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.lightbox-overlay.is-open{ opacity: 1; visibility: visible; }
.lightbox-overlay img{
  max-width: 92vw; max-height: 86vh;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  transform: scale(.97);
  transition: transform .22s ease;
}
.lightbox-overlay.is-open img{ transform: scale(1); }
.lightbox-close{
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(247,248,248,.12);
  border: 1.5px solid rgba(247,248,248,.4);
  border-radius: 50%;
  color: var(--hueso);
  font-size: 1.4rem; line-height:1;
  cursor: pointer;
}
.lightbox-close:hover{ background: rgba(247,248,248,.22); }

/* ============================================================
   ACTUALIZACIÓN 2026 · MUSEO DIGITAL + PROGRAMA + ALERTAS
   ============================================================ */
.header-alert-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.header-alert-btn svg,
.mobile-alert-cta svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
}

/* Bloque de promesa */
.event-promise{
  background:var(--hueso);
  border-block:1px solid var(--linea);
}
.event-promise-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}
.event-promise-card{
  position:relative;
  padding:24px;
  background:#fff;
  border:1px solid var(--linea);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.event-promise-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--verde);
}
.event-promise-card:nth-child(2)::before{ background:var(--rojo); }
.event-promise-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--hueso-2);
  margin-bottom:14px;
}
.event-promise-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:var(--verde);
  stroke-width:1.8;
}
.event-promise-card:nth-child(2) .event-promise-icon svg{ stroke:var(--rojo); }
.event-promise-card h3{
  font-family:var(--titular);
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.event-promise-card p{
  margin:0;
  color:var(--tinta-suave);
  font-size:.92rem;
}
@media (max-width:800px){ .event-promise-grid{ grid-template-columns:1fr; } }

/* Programa público */
.agenda-section{ background:var(--hueso-2); }
.agenda-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:end;
}
.agenda-date-badge{
  display:flex;
  align-items:center;
  padding:12px 16px;
  border:1px solid var(--linea);
  border-left:4px solid var(--rojo);
  background:var(--hueso);
  border-radius:10px;
  box-shadow:var(--shadow-sm);
}
.agenda-date-badge strong{
  display:block;
  font-family:var(--titular);
  font-size:.95rem;
  color:var(--tinta);
}
.agenda-date-badge span{
  display:block;
  font-size:.76rem;
  color:var(--tinta-suave);
}
.agenda-list{
  display:grid;
  gap:14px;
  margin-top:38px;
}
.agenda-item{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  padding:20px 22px;
  border:1px solid var(--linea);
  border-radius:12px;
  background:var(--hueso);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.agenda-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(3,105,77,.35);
}
.agenda-item-compact{ padding-block:15px; }
.agenda-time{
  font-family:var(--titular);
  font-size:1.08rem;
  font-weight:800;
  color:var(--rojo-dark);
  font-variant-numeric:tabular-nums;
}
.agenda-content h3{
  margin:0 0 3px;
  font-family:var(--titular);
  font-size:1rem;
}
.agenda-content p{
  margin:0;
  color:var(--tinta-suave);
  font-size:.88rem;
}
.agenda-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(3,105,77,.08);
  color:var(--verde-dark);
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}
.agenda-item.is-highlight{
  color:var(--hueso);
  background:var(--verde);
  border-color:var(--verde);
  box-shadow:var(--shadow-green);
}
.agenda-item.is-highlight .agenda-time,
.agenda-item.is-highlight h3,
.agenda-item.is-highlight p{ color:var(--hueso); }
.agenda-item.is-highlight .agenda-tag{
  color:var(--hueso);
  background:rgba(247,248,248,.15);
}
.cultural-program{ margin-top:13px; }
.cultural-program summary{
  width:max-content;
  cursor:pointer;
  color:var(--verde-dark);
  font-size:.82rem;
  font-weight:800;
}
.cultural-program ol{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:8px;
}
.cultural-program li{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:10px;
  font-size:.8rem;
  color:var(--tinta-suave);
}
.cultural-program li time{
  font-weight:800;
  color:var(--rojo-dark);
  font-variant-numeric:tabular-nums;
}
.agenda-note{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:18px;
  color:var(--tinta-suave);
  font-size:.8rem;
}
.agenda-note svg{
  width:17px;
  height:17px;
  flex-shrink:0;
  fill:none;
  stroke:var(--rojo);
  stroke-width:2;
}
@media (max-width:760px){
  .agenda-header{ grid-template-columns:1fr; align-items:start; }
  .agenda-date-badge{ width:100%; }
  .agenda-item{ grid-template-columns:1fr; gap:8px; }
  .agenda-tag{ justify-self:start; }
}
@media (max-width:480px){
  .cultural-program li{ grid-template-columns:1fr; gap:1px; }
}

/* Alertas con Google */
.alerts-section{
  position:relative;
  overflow:hidden;
  background:var(--verde);
  color:var(--hueso);
}
.alerts-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(135deg,rgba(247,248,248,.04) 0 2px,transparent 2px 34px),
    radial-gradient(650px 340px at 95% 0%,rgba(212,31,53,.22),transparent 65%);
  pointer-events:none;
}
.alerts-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:56px;
  align-items:center;
}
.alerts-copy h2,
.alerts-copy p{ color:var(--hueso); }
.alerts-copy p{ color:rgba(247,248,248,.84); }
.alerts-benefits{
  list-style:none;
  padding:0;
  margin:24px 0 0;
  display:grid;
  gap:12px;
}
.alerts-benefits li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  color:rgba(247,248,248,.9);
}
.alerts-benefits svg{
  width:20px;
  height:20px;
  flex-shrink:0;
  margin-top:2px;
  fill:none;
  stroke:var(--hueso);
  stroke-width:2;
}
.alert-card{
  background:var(--hueso);
  color:var(--tinta);
  border-radius:14px;
  padding:30px;
  box-shadow:var(--shadow-lg);
}
.alert-card h3{
  font-family:var(--titular);
  font-size:1.15rem;
  color:var(--tinta);
}
.alert-card p{ color:var(--tinta-suave); }
.alert-consent{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin-top:18px;
  padding:13px;
  border:1px solid var(--linea);
  border-radius:9px;
  background:#fff;
  color:var(--tinta-suave);
  font-size:.78rem;
  cursor:pointer;
}
.alert-consent input{
  width:18px;
  height:18px;
  margin:1px 0 0;
  accent-color:var(--verde);
}
.alert-consent a{ color:var(--verde-dark); font-weight:700; }
.google-button-wrap{
  min-height:44px;
  margin:18px 0 8px;
  transition:opacity .18s ease;
}
.google-button-wrap.is-disabled{
  opacity:.45;
  pointer-events:none;
}
.google-button-wrap.is-complete{ display:none; }
.btn-google-placeholder{
  width:100%;
  background:#fff;
  border-color:var(--linea);
  color:var(--tinta-suave);
}
.alert-status{
  min-height:1.3em;
  margin:10px 0 0;
  font-size:.84rem;
}
.alert-status.ok{ color:var(--verde-dark); }
.alert-status.error{ color:var(--rojo-dark); }
.alert-actions{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.alert-actions .btn{ width:100%; }
.btn:disabled,
.btn.is-disabled,
a.is-disabled{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
}
.alert-privacy{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--linea);
  font-size:.74rem;
  color:var(--tinta-suave);
}
.alert-privacy svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  fill:none;
  stroke:var(--verde);
  stroke-width:1.8;
}
.subscription-success{
  display:none;
  padding:16px;
  margin-top:16px;
  border-radius:10px;
  background:rgba(3,105,77,.08);
  border:1px solid rgba(3,105,77,.22);
}
.subscription-success.is-visible{ display:block; }
.subscription-success strong{
  display:block;
  color:var(--verde-dark);
  font-family:var(--titular);
}
.subscription-success p{
  margin:4px 0 0;
  font-size:.84rem;
}
@media (max-width:860px){ .alerts-grid{ grid-template-columns:1fr; gap:34px; } }
@media (max-width:480px){ .alert-card{ padding:23px; } }

/* CTA fijo en móvil */
.mobile-alert-cta{ display:none; }
@media (max-width:700px){
  body{ padding-bottom:74px; }
  .mobile-alert-cta{
    position:fixed;
    z-index:80;
    left:12px;
    right:12px;
    bottom:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:50px;
    padding:12px 18px;
    border-radius:999px;
    background:var(--rojo);
    color:var(--hueso);
    text-decoration:none;
    font-family:var(--titular);
    font-size:.9rem;
    font-weight:800;
    box-shadow:var(--shadow-lg);
  }
}


/* ============================================================
   ARTÍCULO: RAÍZ SERRANA DEL TRICOLOR MEXICANO
   ============================================================ */
.feature-article{
  position: relative;
  background:
    radial-gradient(700px 360px at 100% 0, rgba(3,105,77,.10), transparent 64%),
    linear-gradient(180deg, #fff 0%, var(--hueso) 100%);
  overflow: hidden;
}
.feature-article::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background:linear-gradient(to bottom, var(--verde), var(--hueso) 48%, var(--rojo));
}
.feature-article-header{
  max-width: 930px;
  margin-bottom: 34px;
}
.feature-article-kicker{
  margin:0 0 14px;
  font-family:var(--titular);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--verde);
}
.feature-article-header h2{
  max-width: 18ch;
  font-family:var(--titular);
  font-size:clamp(2.2rem, 6vw, 4.8rem);
  line-height:.98;
  letter-spacing:-.04em;
  color:var(--tinta);
}
.feature-article-header h2 span{
  display:block;
  color:var(--rojo);
}
.feature-article-lead{
  max-width: 70ch;
  margin:24px 0 0;
  font-family:var(--subtitulo);
  font-size:clamp(1.1rem, 2.1vw, 1.4rem);
  line-height:1.65;
  color:var(--tinta-suave);
}
.feature-article-intro{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:28px;
  margin:0 0 46px;
  padding:30px;
  background:var(--verde);
  color:var(--hueso);
  border-radius:14px;
  box-shadow:var(--shadow-green);
}
.feature-article-intro p{
  margin:0;
  color:rgba(247,248,248,.9);
}
.feature-article-intro strong{ color:var(--hueso); }
.feature-article-layout{
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.8fr);
  gap:36px;
  align-items:start;
}
.feature-article-summary{
  position:sticky;
  top:112px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.feature-fact{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  background:#fff;
  border:1px solid var(--linea);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  color:var(--tinta-suave);
  font-size:.82rem;
  font-weight:700;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.feature-fact-number{
  min-width:54px;
  font-family:var(--titular);
  font-size:2.3rem;
  font-weight:800;
  line-height:1;
  color:var(--rojo);
}
.feature-article-summary blockquote{
  margin:8px 0 0;
  padding:24px;
  background:var(--tinta);
  border-left:4px solid var(--rojo);
  border-radius:12px;
  color:var(--hueso);
  font-family:var(--subtitulo);
  font-size:1.05rem;
  line-height:1.55;
  box-shadow:var(--shadow-md);
}
.feature-article-body{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.article-section-card{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:18px;
  padding:28px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--linea);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.article-section-number{
  font-family:var(--titular);
  font-size:1.5rem;
  font-weight:800;
  line-height:1;
  color:var(--rojo);
}
.article-section-card h3{
  margin:0 0 14px;
  font-family:var(--titular);
  font-size:clamp(1.25rem, 2.4vw, 1.75rem);
  line-height:1.15;
  color:var(--verde-dark);
}
.article-section-card p{
  margin:0 0 1em;
  color:var(--tinta-suave);
}
.article-section-card p:last-child{ margin-bottom:0; }
.article-section-card-accent{
  background:var(--verde);
  border-color:var(--verde);
  box-shadow:var(--shadow-green);
}
.article-section-card-accent .article-section-number,
.article-section-card-accent h3,
.article-section-card-accent p{ color:var(--hueso); }
.article-section-card-accent p{ color:rgba(247,248,248,.88); }
.article-section-card-final{
  border-top:4px solid var(--rojo);
}

@media (max-width:900px){
  .feature-article-layout{ grid-template-columns:1fr; }
  .feature-article-summary{
    position:static;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  .feature-article-summary blockquote{ grid-column:1 / -1; }
}
@media (max-width:700px){
  .feature-article-intro{ grid-template-columns:1fr; padding:24px; }
  .feature-article-summary{ grid-template-columns:1fr; }
  .article-section-card{ grid-template-columns:1fr; padding:22px; }
  .article-section-number{ font-size:1rem; }
}

/* ============================================================
   EL FONDO SOLO SE VE EN EL HERO Y EN LA GALERÍA
   ============================================================ */
#galeria{
  position:relative;
  isolation:isolate;
  color:var(--hueso);
  background:
    linear-gradient(rgba(2,45,34,.88), rgba(20,20,18,.9)),
    url("../images/backgrounds/pano.webp") center / cover no-repeat;
  background-attachment:fixed;
}
#galeria::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    repeating-linear-gradient(135deg, rgba(247,248,248,.045) 0 2px, transparent 2px 40px),
    radial-gradient(700px 380px at 10% 0, rgba(212,31,53,.17), transparent 60%);
  pointer-events:none;
}
#galeria .eyebrow,
#galeria h2,
#galeria .section-lead,
#galeria .gallery-hint,
#galeria .gallery-item figcaption{
  color:var(--hueso);
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
#galeria .section-lead{ color:rgba(247,248,248,.86); }
#galeria .gallery-item{
  background:rgba(247,248,248,.08);
  border:1px solid rgba(247,248,248,.18);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.8);
}
#galeria .gallery-item img{
  background:rgba(247,248,248,.08);
}
#galeria .gallery-item--full img{
  background:rgba(247,248,248,.10);
}
@media (max-width:900px){
  #galeria{ background-attachment:scroll; }
}

/* ============================================================
   VIDEO DE FONDO — SECCIÓN SIMBOLISMO
   ============================================================ */
#simbolismo.simbolismo-video-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:var(--hueso);
  background:var(--verde-dark);
}

#simbolismo .simbolismo-video-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}

#simbolismo .simbolismo-video-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(1,35,27,.90) 0%, rgba(2,48,37,.78) 48%, rgba(15,18,17,.80) 100%),
    repeating-linear-gradient(135deg, rgba(247,248,248,.035) 0 2px, transparent 2px 42px);
  pointer-events:none;
}

#simbolismo .simbolismo-video-content{
  position:relative;
  z-index:1;
}

#simbolismo .eyebrow{
  color:#fff;
  text-shadow:0 3px 16px rgba(0,0,0,.55);
}

#simbolismo .eyebrow-rule.red{
  background:var(--rojo);
}

#simbolismo .simbolismo-flag{
  background:rgba(247,248,248,.96);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 22px 48px -18px rgba(0,0,0,.72);
}

#simbolismo .simbolismo-note{
  background:rgba(3,105,77,.88);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 42px -18px rgba(0,0,0,.70);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

#simbolismo .simbolismo-note p,
#simbolismo .simbolismo-note strong{
  color:#fff;
}

#simbolismo .simbolismo-shield{
  width:min(100%, 340px);
  min-height:190px;
  margin:0 auto 30px;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(247,248,248,.95);
  border:1px solid rgba(255,255,255,.32);
  border-radius:12px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.70);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

#simbolismo .simbolismo-shield .isotipo{
  width:240px;
  height:140px;
  object-fit:contain;
}

#simbolismo .simbolo-defs > div{
  margin:0;
  padding:20px;
  background:rgba(15,22,19,.62);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

#simbolismo .simbolo-defs > div:hover{
  background:rgba(3,105,77,.82);
  border-color:rgba(255,255,255,.38);
  transform:translateY(-3px);
}

#simbolismo .simbolo-defs h4{
  margin:0 0 8px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.50);
}

#simbolismo .simbolo-defs p{
  margin:0;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 8px rgba(0,0,0,.42);
}

@media (max-width:860px){
  #simbolismo .simbolismo-video-overlay{
    background:rgba(2,42,32,.84);
  }

  #simbolismo .simbolismo-shield{
    min-height:150px;
    margin-bottom:24px;
  }

  #simbolismo .simbolismo-shield .isotipo{
    width:190px;
    height:112px;
  }
}

@media (max-width:480px){
  #simbolismo .simbolo-defs > div{
    padding:17px;
  }

  #simbolismo .simbolismo-note{
    padding:20px;
  }
}

@media (prefers-reduced-motion:reduce){
  #simbolismo .simbolismo-video-bg{
    display:none;
  }

  #simbolismo.simbolismo-video-section{
    background:
      linear-gradient(rgba(2,50,38,.90), rgba(15,18,17,.88)),
      url("../images/backgrounds/pano.webp") center / cover no-repeat;
  }
}


/* ============================================================
   AJUSTE FINAL — SIMBOLISMO SIN FONDOS BLANCOS
   Más intuitivo para móvil y computadora.
   ============================================================ */

#simbolismo .simbolismo-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}

#simbolismo .simbolismo-flag{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0;
  overflow:visible;
}

#simbolismo .simbolismo-flag img{
  width:100%;
  height:auto;
  max-height:360px;
  object-fit:contain;
  background:transparent !important;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.42));
}

#simbolismo .simbolismo-note{
  margin-top:18px;
  border-radius:14px;
}

#simbolismo .simbolismo-shield{
  width:100%;
  min-height:0;
  margin:0 0 26px;
  padding:0;
  background:transparent !important;
  border:none !important;
  border-radius:0;
  box-shadow:none !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#simbolismo .simbolismo-shield .isotipo{
  width:min(100%,300px);
  height:auto;
  margin:0 auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.38));
}

#simbolismo .simbolo-defs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}

#simbolismo .simbolo-defs > div{
  min-height:100%;
  padding:20px;
  border-radius:14px;
}

#simbolismo .simbolo-defs h4{
  font-size:clamp(1rem,1.4vw,1.08rem);
}

#simbolismo .simbolo-defs p{
  font-size:clamp(.94rem,1.15vw,1rem);
  line-height:1.65;
}

@media (max-width:980px){
  #simbolismo .simbolismo-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  #simbolismo .simbolismo-flag img{
    max-height:320px;
  }

  #simbolismo .simbolismo-shield{
    margin:6px 0 22px;
  }
}

@media (max-width:640px){
  #simbolismo .simbolo-defs{
    grid-template-columns:1fr;
    gap:14px;
  }

  #simbolismo .simbolismo-flag img{
    max-height:none;
  }

  #simbolismo .simbolismo-note{
    padding:18px;
  }

  #simbolismo .simbolo-defs > div{
    padding:18px;
  }
}

@media (max-width:420px){
  #simbolismo.simbolismo-video-section{
    padding-top:52px;
    padding-bottom:52px;
  }

  #simbolismo .simbolismo-video-overlay{
    background:
      linear-gradient(180deg, rgba(2,40,31,.84) 0%, rgba(10,16,14,.82) 100%),
      repeating-linear-gradient(135deg, rgba(247,248,248,.03) 0 2px, transparent 2px 32px);
  }

  #simbolismo .simbolismo-shield .isotipo{
    width:min(100%,220px);
  }
}

/* ============================================================
   ORGANIZACIÓN — HISTORIA / MUSEO DIGITAL / RECORRIDO
   ============================================================ */
.museum-gateway{
  background:var(--hueso-2);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.museum-gateway-head{
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:end;
}
.museum-gateway-head h2{
  font-family:var(--titular);
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:1;
  text-transform:uppercase;
  margin:0 0 16px;
}
.museum-gateway-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:34px;
}
.museum-gateway-card{
  display:flex;
  gap:22px;
  min-height:190px;
  padding:28px;
  background:var(--hueso);
  border:1px solid var(--linea);
  border-radius:14px;
  color:var(--tinta);
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.museum-gateway-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(3,105,77,.36);
}
.museum-gateway-number{
  flex:0 0 auto;
  font-family:var(--titular);
  font-size:clamp(2.4rem,6vw,4.2rem);
  font-weight:800;
  line-height:.9;
  color:rgba(3,105,77,.16);
}
.museum-gateway-card h3{
  font-family:var(--titular);
  font-size:1.15rem;
  margin:0 0 8px;
  text-transform:uppercase;
}
.museum-gateway-card p{
  margin:0 0 20px;
  color:var(--tinta-suave);
}
.museum-gateway-link{
  display:inline-flex;
  color:var(--verde-dark);
  font-size:.84rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ============================================================
   SEGUIMIENTO DEL RECORRIDO + MAPA INTERACTIVO
   ============================================================ */
.live-route-panel{
  margin:40px 0 48px;
  padding:clamp(22px,4vw,34px);
  border-radius:16px;
  color:var(--hueso);
  background:
    radial-gradient(500px 240px at 100% 0%, rgba(247,248,248,.10), transparent 65%),
    var(--verde);
  box-shadow:var(--shadow-green);
  overflow:hidden;
}
.live-route-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
}
.live-route-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(247,248,248,.12);
  border:1px solid rgba(247,248,248,.28);
  color:var(--hueso);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
}
.live-route-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(247,248,248,.62);
}
.live-route-badge.is-live::before{
  background:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.12);
  animation:siera-live-pulse 1.5s ease-in-out infinite;
}
.live-route-badge.is-finished::before{ background:var(--hueso); }
@keyframes siera-live-pulse{
  0%,100%{ transform:scale(.9); opacity:.75; }
  50%{ transform:scale(1.15); opacity:1; }
}
.live-route-kicker{
  margin:18px 0 4px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(247,248,248,.72);
}
.live-route-panel h3{
  margin:0 0 8px;
  color:var(--hueso);
  font-family:var(--titular);
  font-size:clamp(1.55rem,4vw,2.6rem);
  line-height:1.05;
}
.live-route-description{
  max-width:68ch;
  margin:0;
  color:rgba(247,248,248,.82);
}
.live-route-focus{
  flex:0 0 auto;
  background:var(--hueso);
  color:var(--verde-dark);
  box-shadow:none;
}
.live-route-focus:hover{ background:#fff; }
.live-route-data{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin-top:28px;
  border:1px solid rgba(247,248,248,.18);
  border-radius:12px;
  overflow:hidden;
  background:rgba(247,248,248,.18);
}
.live-route-data-item{
  min-width:0;
  padding:18px;
  background:rgba(2,79,58,.58);
}
.live-route-data-label{
  display:block;
  margin-bottom:6px;
  color:rgba(247,248,248,.65);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.live-route-data-item strong{
  display:block;
  color:var(--hueso);
  font-family:var(--titular);
  font-size:.94rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.live-route-progress{
  height:7px;
  margin-top:20px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(247,248,248,.16);
}
.live-route-progress span{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:var(--hueso);
  transition:width .55s ease;
}

.route-legend-dot.current{
  background:var(--rojo);
  box-shadow:0 0 0 2px rgba(212,31,53,.22), 0 0 0 5px rgba(212,31,53,.08);
}

/* Estado visual de cada municipio */
.route-pin.is-done{
  color:var(--verde-dark);
  border-color:var(--verde);
  background:var(--hueso);
}
.route-pin.is-live{
  color:var(--hueso);
  border-color:var(--rojo);
  background:var(--rojo);
  box-shadow:0 0 0 6px rgba(212,31,53,.18);
}
.route-pin-place.is-live{
  filter:drop-shadow(0 0 8px rgba(212,31,53,.65));
}
.live-flag-marker{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--rojo);
  color:#fff;
  border:4px solid var(--hueso);
  box-shadow:0 8px 24px rgba(26,26,24,.35), 0 0 0 8px rgba(212,31,53,.16);
  font-family:var(--titular);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.04em;
  text-align:center;
  line-height:1.05;
}
.live-flag-marker::after{
  content:"";
  position:absolute;
  width:66px;
  height:66px;
  border:1px solid rgba(212,31,53,.48);
  border-radius:50%;
  animation:siera-map-pulse 1.8s ease-out infinite;
}
@keyframes siera-map-pulse{
  from{ transform:scale(.7); opacity:.85; }
  to{ transform:scale(1.35); opacity:0; }
}

/* Popup enriquecido del mapa */
.route-popup-rich{
  width:min(290px,78vw);
}
.route-popup-photo{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
  background:var(--hueso-2);
}
.route-popup-rich .route-popup-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.route-popup-stop{
  font-size:.66rem;
  font-weight:700;
  opacity:.82;
  white-space:nowrap;
}
.route-popup-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:9px;
  padding:4px 9px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
}
.route-popup-status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
}
.route-popup-status.pending{ background:var(--hueso-2); color:var(--tinta-suave); }
.route-popup-status.pending::before{ background:var(--tinta-suave); }
.route-popup-status.done{ background:rgba(3,105,77,.12); color:var(--verde-dark); }
.route-popup-status.done::before{ background:var(--verde); }
.route-popup-status.live{ background:rgba(212,31,53,.12); color:var(--rojo-dark); }
.route-popup-status.live::before{ background:var(--rojo); }
.route-popup-info{
  margin:0 0 10px;
  color:var(--tinta-suave);
  font-size:.78rem;
  line-height:1.45;
}
.route-popup-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0 12px;
}
.route-popup-meta div{
  padding:8px;
  border-radius:7px;
  background:var(--hueso-2);
}
.route-popup-meta span{
  display:block;
  font-size:.58rem;
  color:var(--tinta-suave);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.route-popup-meta strong{
  display:block;
  margin-top:2px;
  color:var(--tinta);
  font-size:.75rem;
}
.route-popup-directions{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:38px;
  padding:8px 12px;
  border-radius:7px;
  background:var(--verde);
  color:var(--hueso)!important;
  text-decoration:none!important;
  font-family:var(--titular);
  font-size:.74rem;
  font-weight:800;
}
.route-popup-directions:hover{ background:var(--verde-dark); }

@media (max-width:900px){
  .museum-gateway-grid{ grid-template-columns:1fr; }
  .live-route-data{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .route-map{ height:420px; }
}
@media (max-width:640px){
  .museum-gateway-card{
    min-height:0;
    padding:22px;
    gap:16px;
  }
  .museum-gateway-number{ font-size:2.5rem; }
  .live-route-panel{ margin:30px 0 36px; border-radius:14px; }
  .live-route-top{ flex-direction:column; gap:20px; }
  .live-route-focus{ width:100%; }
  .live-route-data{ grid-template-columns:1fr; }
  .live-route-data-item{ padding:15px 16px; }
  .route-map{ height:390px; }
  .route-info-chip{ display:none; }
  .route-map-badges{ gap:6px; }
  .route-map-badge{ min-width:0; }
}
@media (max-width:420px){
  .route-map{ height:360px; }
  .route-popup-rich{ width:min(260px,76vw); }
  .route-popup-photo{ height:105px; }
  .route-popup-meta{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .live-route-badge.is-live::before,
  .live-flag-marker::after{ animation:none; }
}

/* ============================================================
   HISTORIA RESUMIDA — reemplaza los bloques largos de historia
   ============================================================ */
.historia-resumida{
  position:relative;
  overflow:hidden;
}

.historia-resumida-header{
  max-width:1000px;
}

.historia-resumida-kicker{
  margin:0 0 16px;
  font-family:var(--titular);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--verde);
}

.historia-resumida-header h2{
  margin:0 0 28px;
  font-family:var(--titular);
  font-size:clamp(2.7rem,6vw,5.4rem);
  line-height:.98;
  letter-spacing:-.045em;
  color:var(--tinta);
}

.historia-resumida-header h2 span{
  display:block;
  color:var(--rojo);
}

.historia-resumida-lead{
  max-width:900px;
  margin:0;
  font-family:var(--subtitulo);
  font-size:clamp(1.08rem,1.8vw,1.42rem);
  line-height:1.7;
  color:var(--tinta-suave);
}

.historia-resumida-destacado{
  margin:38px 0 42px;
  padding:28px 32px;
  border-radius:14px;
  background:var(--verde);
  box-shadow:var(--shadow-green);
}

.historia-resumida-destacado p{
  max-width:840px;
  margin:0;
  color:var(--hueso);
  font-size:1.02rem;
  line-height:1.75;
}

.historia-resumen-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.historia-resumen-card{
  position:relative;
  min-width:0;
  padding:28px;
  background:var(--hueso);
  border:1px solid var(--linea);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
}

.historia-resumen-card:nth-child(2){
  grid-column:span 1;
}

.historia-resumen-card-accent{
  grid-column:1 / -1;
  background:linear-gradient(135deg,var(--hueso),var(--hueso-2));
  border-left:4px solid var(--verde);
}

.historia-resumen-numero{
  display:block;
  margin-bottom:8px;
  font-family:var(--titular);
  font-size:1.75rem;
  font-weight:800;
  line-height:1;
  color:var(--rojo);
}

.historia-resumen-etiqueta{
  display:block;
  margin-bottom:8px;
  font-family:var(--titular);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--verde);
}

.historia-resumen-card h3{
  margin:0 0 16px;
  font-family:var(--titular);
  font-size:clamp(1.25rem,2.3vw,1.75rem);
  line-height:1.2;
  color:var(--tinta);
}

.historia-resumen-card > p{
  margin:0 0 14px;
  color:var(--tinta-suave);
  font-size:.96rem;
  line-height:1.72;
}

.historia-resumen-lista{
  display:grid;
  grid-template-columns:1fr;
  gap:11px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}

.historia-resumen-lista li{
  position:relative;
  padding-left:18px;
  color:var(--tinta-suave);
  font-size:.92rem;
  line-height:1.62;
}

.historia-resumen-lista li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--rojo);
}

.historia-resumen-lista strong,
.historia-resumen-card p strong{
  color:var(--tinta);
}

.historia-mini-timeline{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.historia-mini-evento{
  padding:17px;
  background:var(--hueso-2);
  border:1px solid var(--linea);
  border-radius:10px;
}

.historia-mini-evento > strong{
  display:block;
  margin-bottom:7px;
  font-family:var(--titular);
  color:var(--rojo);
}

.historia-mini-evento p{
  margin:0;
  color:var(--tinta-suave);
  font-size:.84rem;
  line-height:1.58;
}

.historia-legado{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
}

.historia-legado span{
  padding:8px 14px;
  border:1px solid var(--verde);
  border-radius:999px;
  font-family:var(--titular);
  font-size:.74rem;
  font-weight:800;
  color:var(--verde);
}

@media (max-width:900px){
  .historia-resumen-grid{
    grid-template-columns:1fr;
  }
  .historia-resumen-card-accent{
    grid-column:auto;
  }
  .historia-mini-timeline{
    grid-template-columns:1fr;
  }
}

@media (max-width:600px){
  .historia-resumida-header h2{
    font-size:clamp(2.35rem,12vw,3.7rem);
  }
  .historia-resumida-destacado{
    margin:28px 0 30px;
    padding:22px 20px;
  }
  .historia-resumen-card{
    padding:22px 20px;
  }
}


/* ============================================================
   CANAL DE WHATSAPP — reemplaza el flujo de Google / inicio de sesión
   ============================================================ */
.whatsapp-card{
  text-align:left;
}
.whatsapp-card-icon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  border-radius:50%;
  background:rgba(3,105,77,.10);
  color:var(--verde);
}
.whatsapp-card-icon svg{
  width:30px;
  height:30px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.whatsapp-card-kicker{
  margin:0 0 6px !important;
  font-family:var(--titular);
  font-size:.72rem !important;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--verde) !important;
}
.whatsapp-main-button{
  margin-top:22px;
  min-height:52px;
  font-size:.95rem;
}
.whatsapp-link-note{
  margin:12px 0 0 !important;
  font-size:.76rem !important;
  line-height:1.5;
  color:var(--tinta-suave) !important;
}
@media (max-width:860px){
  .whatsapp-card{
    max-width:620px;
    width:100%;
  }
}
@media (max-width:480px){
  .whatsapp-card-icon{
    width:52px;
    height:52px;
  }
  .whatsapp-main-button{
    width:100%;
  }
}

/* Nombre del canal oficial de WhatsApp */
.whatsapp-channel-name{
  margin:.25rem 0 .75rem;
  font-family:var(--titular);
  font-size:clamp(1.15rem,2vw,1.45rem);
  color:var(--verde-dark);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.whatsapp-card .whatsapp-channel-name{
  color:var(--tinta);
}

/* ============================================================
   GALERÍA EN CARRUSEL — COMPACTA EN PC Y MÓVIL
   No requiere librerías adicionales.
   ============================================================ */

#galeria{
  padding-top:72px;
  padding-bottom:72px;
}

#galeria .gallery-panels{
  position:relative;
  margin-top:22px;
}

/* Controles superiores */
#galeria .gallery-carousel-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:18px 0 14px;
}

#galeria .gallery-carousel-status{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(247,248,248,.78);
  font-size:.82rem;
  font-weight:700;
}

#galeria .gallery-carousel-status strong{
  color:var(--hueso);
  font-family:var(--titular);
  font-size:.94rem;
}

#galeria .gallery-carousel-actions{
  display:flex;
  gap:10px;
}

#galeria .gallery-carousel-btn{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 44px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(247,248,248,.28);
  background:rgba(247,248,248,.10);
  color:var(--hueso);
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .18s ease, transform .18s ease, opacity .18s ease;
}

#galeria .gallery-carousel-btn:hover{
  background:var(--rojo);
  transform:translateY(-2px);
}

#galeria .gallery-carousel-btn:disabled{
  opacity:.35;
  cursor:default;
  transform:none;
}

#galeria .gallery-carousel-btn svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Track horizontal */
#galeria .gallery-grid{
  display:flex !important;
  grid-template-columns:none !important;
  gap:16px;
  margin-top:0;
  padding:4px 2px 16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

#galeria .gallery-grid::-webkit-scrollbar{
  display:none;
}

/* 3 tarjetas visibles en escritorio */
#galeria .gallery-item{
  flex:0 0 calc((100% - 32px) / 3);
  min-width:0;
  margin:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  aspect-ratio:4 / 3;
  background:rgba(247,248,248,.08);
}

#galeria .gallery-item img,
#galeria .gallery-item--full img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  border-radius:0;
  transition:transform .35s ease;
}

#galeria .gallery-item--full img{
  object-fit:contain;
}

#galeria .gallery-item:hover img{
  transform:scale(1.035);
  box-shadow:none;
}

/* Pie siempre visible pero discreto; ya no depende del hover */
#galeria .gallery-item figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:34px 14px 12px;
  background:linear-gradient(to top, rgba(10,15,13,.88), transparent);
  color:var(--hueso);
  font-size:.78rem;
  font-weight:700;
  line-height:1.35;
  opacity:1;
  transform:none;
  pointer-events:none;
}

/* Indicador de progreso del carrusel */
#galeria .gallery-carousel-progress{
  height:3px;
  margin-top:4px;
  background:rgba(247,248,248,.16);
  border-radius:999px;
  overflow:hidden;
}

#galeria .gallery-carousel-progress > span{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:var(--rojo);
  transition:width .2s ease;
}

#galeria .gallery-hint{
  margin:8px 0 0;
  font-size:.76rem;
  opacity:.8;
}

/* Tablet: 2 tarjetas */
@media (max-width:900px){
  #galeria{
    padding-top:58px;
    padding-bottom:58px;
  }

  #galeria .gallery-item{
    flex-basis:calc((100% - 14px) / 2);
  }
}

/* Móvil: una tarjeta y un pequeño vistazo de la siguiente */
@media (max-width:620px){
  #galeria{
    padding-top:50px;
    padding-bottom:50px;
  }

  #galeria .gallery-carousel-controls{
    margin-top:14px;
  }

  #galeria .gallery-carousel-actions{
    display:none;
  }

  #galeria .gallery-grid{
    gap:12px;
    padding-right:12vw;
    scroll-padding-left:0;
  }

  #galeria .gallery-item{
    flex:0 0 82vw;
    max-width:360px;
    aspect-ratio:4 / 3;
  }

  #galeria .gallery-item figcaption{
    padding:30px 13px 11px;
    font-size:.76rem;
  }

  #galeria .gallery-hint{
    font-size:.73rem;
  }
}

@media (max-width:390px){
  #galeria .gallery-item{
    flex-basis:84vw;
  }
}

/* ============================================================
   HIMNO DE FONDO — CONTROL DE MÚSICA
   ============================================================ */
.background-audio{
  display:none;
}

.background-music-toggle{
  position:absolute;
  right:clamp(18px,3vw,38px);
  bottom:clamp(18px,3vw,34px);
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(10,18,15,.62);
  color:#fff;
  font:700 .82rem/1 var(--sans);
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}

.background-music-toggle:hover{
  background:rgba(3,105,77,.86);
  border-color:rgba(255,255,255,.58);
  transform:translateY(-2px);
}

.background-music-toggle:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

.background-music-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  font-size:1rem;
  line-height:1;
}

.background-music-toggle.is-playing{
  background:rgba(3,105,77,.88);
}

.background-music-toggle.is-playing .background-music-icon{
  animation:himno-pulse 1.8s ease-in-out infinite;
}

@keyframes himno-pulse{
  0%,100%{ transform:scale(1); opacity:.82; }
  50%{ transform:scale(1.13); opacity:1; }
}

@media (max-width:560px){
  .background-music-toggle{
    position:fixed;
    right:14px;
    bottom:16px;
    z-index:70;
    width:48px;
    height:48px;
    min-height:48px;
    padding:0;
    justify-content:center;
    border-radius:50%;
  }

  .background-music-label{display:none;}
  .background-music-icon{font-size:1.15rem;}
}

@media (prefers-reduced-motion:reduce){
  .background-music-toggle.is-playing .background-music-icon{
    animation:none;
  }
}

/* ============================================================
   BOTÓN DEL HIMNO JUNTO A LA BANDERA — SIMBOLISMO
   ============================================================ */
.simbolismo-shield-audio{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:26px;
}

#simbolismo .simbolismo-shield-audio .simbolismo-shield{
  margin:0;
  flex:0 1 auto;
}

.himno-symbol-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:12px 17px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(9,24,19,.72);
  color:#fff;
  font:700 .82rem/1.15 var(--sans);
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.himno-symbol-button:hover{
  transform:translateY(-2px);
  background:rgba(3,105,77,.92);
  border-color:rgba(255,255,255,.62);
  box-shadow:0 14px 30px rgba(0,0,0,.32);
}

.himno-symbol-button:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

.himno-symbol-button.is-playing{
  background:var(--rojo);
  border-color:rgba(255,255,255,.72);
}

.himno-symbol-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  font-size:.82rem;
}

.himno-symbol-button.is-playing .himno-symbol-icon{
  animation:himno-symbol-pulse 1.6s ease-in-out infinite;
}

@keyframes himno-symbol-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}

@media (max-width:860px){
  .simbolismo-shield-audio{
    flex-direction:column;
    gap:12px;
  }

  .himno-symbol-button{
    width:min(100%,280px);
  }
}

@media (max-width:480px){
  .himno-symbol-button{
    width:100%;
    min-height:50px;
    font-size:.86rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .himno-symbol-button.is-playing .himno-symbol-icon{
    animation:none;
  }
}


/* ============================================================
   JUAN MOCTEZUMA Y CORTÉS — BANNER HISTÓRICO
   Se agrega sin alterar las secciones existentes.
   ============================================================ */
.juan-moctezuma-section{
  background: var(--hueso);
  padding-top: 64px;
  padding-bottom: 64px;
}

.juan-moctezuma-banner{
  display:grid;
  grid-template-columns: minmax(260px,.78fr) minmax(0,1.72fr);
  min-height: 470px;
  overflow:hidden;
  border:1px solid var(--linea);
  border-radius:18px;
  background:var(--hueso);
  box-shadow:var(--shadow-lg);
}

.juan-moctezuma-media{
  position:relative;
  min-height:470px;
  overflow:hidden;
  background:var(--verde-dark);
}

.juan-moctezuma-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(2,35,27,.64),transparent 55%);
  pointer-events:none;
}

.juan-moctezuma-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.juan-moctezuma-date{
  position:absolute;
  left:22px;
  bottom:20px;
  z-index:2;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  color:#fff;
  background:rgba(2,79,58,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:var(--titular);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
}

.juan-moctezuma-content{
  padding:clamp(28px,4vw,52px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.juan-moctezuma-kicker{
  margin:0 0 10px;
  color:var(--verde);
  font-family:var(--titular);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.juan-moctezuma-content h2{
  margin:0 0 18px;
  font-family:var(--titular);
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1;
  letter-spacing:-.035em;
  color:var(--tinta);
}

.juan-moctezuma-lead{
  margin:0;
  max-width:760px;
  color:var(--tinta-suave);
  font-size:1rem;
  line-height:1.75;
}

.juan-moctezuma-lead strong{
  color:var(--tinta);
}

.juan-moctezuma-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}

.juan-fact{
  min-width:0;
  padding:17px 18px;
  border:1px solid var(--linea);
  border-radius:12px;
  background:var(--hueso-2);
}

.juan-fact > span{
  display:block;
  margin-bottom:3px;
  color:var(--rojo);
  font-family:var(--titular);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
}

.juan-fact > strong{
  display:block;
  color:var(--tinta);
  font-family:var(--titular);
  font-size:.94rem;
}

.juan-fact p{
  margin:7px 0 0;
  color:var(--tinta-suave);
  font-size:.8rem;
  line-height:1.55;
}

.kuauhtototl-mini{
  display:flex;
  gap:15px;
  align-items:flex-start;
  margin-top:18px;
  padding:18px 20px;
  border-left:4px solid var(--rojo);
  border-radius:0 12px 12px 0;
  background:var(--verde);
  color:var(--hueso);
}

.kuauhtototl-mini-mark{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  color:#fff;
}

.kuauhtototl-mini-label{
  display:block;
  margin-bottom:4px;
  color:#fff;
  font-family:var(--titular);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.kuauhtototl-mini p{
  margin:0;
  color:rgba(255,255,255,.9);
  font-size:.86rem;
  line-height:1.6;
}

.kuauhtototl-mini strong{ color:#fff; }

@media (max-width:900px){
  .juan-moctezuma-banner{
    grid-template-columns:1fr;
    min-height:0;
  }

  .juan-moctezuma-media{
    min-height:350px;
    max-height:430px;
  }

  .juan-moctezuma-media img{
    object-position:center 24%;
  }
}

@media (max-width:620px){
  .juan-moctezuma-section{
    padding-top:42px;
    padding-bottom:42px;
  }

  .juan-moctezuma-banner{
    border-radius:14px;
  }

  .juan-moctezuma-media{
    min-height:300px;
  }

  .juan-moctezuma-content{
    padding:24px 20px;
  }

  .juan-moctezuma-facts{
    grid-template-columns:1fr;
    gap:10px;
  }

  .kuauhtototl-mini{
    padding:16px;
  }
}

/* ============================================================
   AJUSTE RESPONSIVE FINAL — JUAN MOCTEZUMA Y CORTÉS
   Conserva el HTML y mejora únicamente distribución, legibilidad
   y comportamiento en desktop, tablet y móvil.
   ============================================================ */

#juan-moctezuma{
  overflow:hidden;
}

#juan-moctezuma .wrap{
  max-width:1180px;
}

.juan-moctezuma-banner{
  grid-template-columns:minmax(300px, .88fr) minmax(0, 1.42fr);
  min-height:520px;
  border-radius:22px;
}

.juan-moctezuma-media{
  min-height:520px;
  isolation:isolate;
}

.juan-moctezuma-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(2,79,58,.06), rgba(2,79,58,.18) 62%, rgba(1,29,22,.78) 100%);
  pointer-events:none;
}

.juan-moctezuma-media::after{
  display:none;
}

.juan-moctezuma-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
}

.juan-moctezuma-date{
  left:24px;
  bottom:22px;
  z-index:3;
  padding:9px 14px;
  font-size:.76rem;
}

.juan-moctezuma-content{
  min-width:0;
  padding:clamp(34px,4.2vw,58px);
  justify-content:flex-start;
}

.juan-moctezuma-kicker{
  max-width:62ch;
  margin-bottom:12px;
  line-height:1.45;
}

.juan-moctezuma-content h2{
  max-width:720px;
  font-size:clamp(2.35rem,4.5vw,4rem);
  line-height:.98;
  margin-bottom:20px;
}

.juan-moctezuma-lead{
  max-width:760px;
  font-size:1rem;
  line-height:1.8;
}

.juan-moctezuma-facts{
  gap:12px;
  margin-top:26px;
}

.juan-fact{
  display:flex;
  flex-direction:column;
  min-height:150px;
  padding:18px;
  border-radius:14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover) and (pointer:fine){
  .juan-fact:hover{
    transform:translateY(-2px);
    border-color:rgba(3,105,77,.28);
    box-shadow:var(--shadow-sm);
  }
}

.juan-fact > span{
  margin-bottom:5px;
}

.juan-fact > strong{
  font-size:.96rem;
  line-height:1.35;
}

.juan-fact p{
  margin-top:8px;
  font-size:.82rem;
  line-height:1.6;
}

.kuauhtototl-mini{
  margin-top:20px;
  padding:19px 20px;
  border-left-width:4px;
  border-radius:0 14px 14px 0;
}

.kuauhtototl-mini-mark{
  width:38px;
  height:38px;
}

.kuauhtototl-mini-label{
  font-size:.8rem;
  line-height:1.4;
}

.kuauhtototl-mini p{
  font-size:.88rem;
  line-height:1.65;
}

/* Tablet horizontal / laptops pequeños */
@media (max-width:1024px){
  .juan-moctezuma-banner{
    grid-template-columns:minmax(270px,.78fr) minmax(0,1.22fr);
    min-height:500px;
  }

  .juan-moctezuma-media{
    min-height:500px;
  }

  .juan-moctezuma-content{
    padding:34px;
  }
}

/* Tablet vertical: imagen arriba y contenido abajo */
@media (max-width:820px){
  .juan-moctezuma-section{
    padding-top:52px;
    padding-bottom:52px;
  }

  .juan-moctezuma-banner{
    display:block;
    min-height:0;
    border-radius:18px;
  }

  .juan-moctezuma-media{
    width:100%;
    min-height:0;
    height:clamp(300px,52vw,410px);
  }

  .juan-moctezuma-media img{
    object-position:center 18%;
  }

  .juan-moctezuma-content{
    padding:32px 28px 30px;
  }

  .juan-moctezuma-content h2{
    font-size:clamp(2.2rem,7vw,3.2rem);
  }

  .juan-moctezuma-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Móvil */
@media (max-width:600px){
  .juan-moctezuma-section{
    padding-top:38px;
    padding-bottom:38px;
  }

  .juan-moctezuma-section .wrap{
    padding-left:16px;
    padding-right:16px;
  }

  .juan-moctezuma-banner{
    border-radius:16px;
    box-shadow:0 12px 30px -18px rgba(26,26,24,.38);
  }

  .juan-moctezuma-media{
    height:260px;
  }

  .juan-moctezuma-media img{
    object-position:center 15%;
  }

  .juan-moctezuma-date{
    left:16px;
    bottom:15px;
    padding:7px 11px;
    font-size:.69rem;
  }

  .juan-moctezuma-content{
    padding:24px 19px 22px;
  }

  .juan-moctezuma-kicker{
    margin-bottom:10px;
    font-size:.66rem;
    letter-spacing:.09em;
    line-height:1.5;
  }

  .juan-moctezuma-content h2{
    margin-bottom:15px;
    font-size:clamp(2rem,10vw,2.65rem);
    line-height:1.02;
    letter-spacing:-.04em;
  }

  .juan-moctezuma-lead{
    font-size:.94rem;
    line-height:1.7;
  }

  .juan-moctezuma-facts{
    grid-template-columns:1fr;
    gap:9px;
    margin-top:22px;
  }

  .juan-fact{
    min-height:0;
    padding:16px;
    border-radius:12px;
  }

  .juan-fact > span{
    font-size:.65rem;
  }

  .juan-fact > strong{
    font-size:.93rem;
  }

  .juan-fact p{
    font-size:.81rem;
    line-height:1.55;
  }

  .kuauhtototl-mini{
    gap:11px;
    margin-top:15px;
    padding:16px;
    border-left-width:3px;
    border-radius:0 12px 12px 0;
  }

  .kuauhtototl-mini-mark{
    width:32px;
    height:32px;
  }

  .kuauhtototl-mini-label{
    font-size:.72rem;
  }

  .kuauhtototl-mini p{
    font-size:.81rem;
    line-height:1.58;
  }
}

/* Móviles muy pequeños */
@media (max-width:390px){
  .juan-moctezuma-section .wrap{
    padding-left:13px;
    padding-right:13px;
  }

  .juan-moctezuma-media{
    height:230px;
  }

  .juan-moctezuma-content{
    padding:21px 16px 19px;
  }

  .juan-moctezuma-content h2{
    font-size:1.9rem;
  }

  .kuauhtototl-mini{
    display:block;
  }

  .kuauhtototl-mini-mark{
    margin-bottom:10px;
  }
}


/* ============================================================
   AJUSTE 2026 — FONDO ESTÁTICO "PANO UNO" + EXPERIENCIA DE SCROLL
   ============================================================ */
:root{
  --pano-uno: url("../images/backgrounds/pano.webp");
}

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

body{
  overflow-x:hidden;
}

/* Los videos de fondo fueron sustituidos por una sola imagen estática. */
.hero,
#simbolismo.simbolismo-video-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#082f27;
}

/* Portada principal: usa mural.jpg sin modificar los demás fondos. */
.hero .hero-pano-bg{
  background-image:url("../images/backgrounds/mural.webp");
}

.pano-static-bg{
  position:absolute;
  inset:-8% 0;
  z-index:-3;
  background-image:var(--pano-uno);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center calc(50% + var(--pano-shift, 0px));
  transform:scale(1.045);
  will-change:background-position;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(3,35,28,.90) 0%, rgba(3,46,36,.73) 46%, rgba(9,21,18,.48) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.35));
  pointer-events:none;
}

#simbolismo .simbolismo-video-overlay{
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(2,42,32,.91) 0%, rgba(3,53,41,.75) 50%, rgba(8,20,17,.82) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 44px);
}

.hero-scroll-cue{
  position:absolute;
  left:50%;
  bottom:26px;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.78);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  transform:translateX(-50%);
  pointer-events:none;
}

.hero-scroll-cue i{
  display:block;
  width:1px;
  height:38px;
  background:linear-gradient(to bottom, rgba(255,255,255,.9), transparent);
  animation:sieraScrollCue 1.8s ease-in-out infinite;
}

@keyframes sieraScrollCue{
  0%,100%{ transform:scaleY(.45); transform-origin:top; opacity:.45; }
  50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
}

/* Entrada editorial de las secciones al hacer scroll. */
main > section.scroll-stage:not(.hero){
  opacity:0;
  transform:translateY(34px);
  transition:opacity .72s cubic-bezier(.2,.7,.2,1), transform .72s cubic-bezier(.2,.7,.2,1);
}

main > section.scroll-stage.is-in-view:not(.hero){
  opacity:1;
  transform:none;
}

main > section.scroll-stage .eyebrow,
main > section.scroll-stage .historia-resumida-header,
main > section.scroll-stage .juan-story-header{
  transition:transform .8s cubic-bezier(.2,.7,.2,1) .08s, opacity .8s ease .08s;
}

main > section.scroll-stage:not(.is-in-view) .eyebrow,
main > section.scroll-stage:not(.is-in-view) .historia-resumida-header,
main > section.scroll-stage:not(.is-in-view) .juan-story-header{
  transform:translateY(16px);
  opacity:.2;
}

/* ============================================================
   JUAN MOCTEZUMA Y CORTÉS — ESTRUCTURA EDITORIAL RESPONSIVE
   ============================================================ */
#juan-moctezuma{
  position:relative;
  background:
    linear-gradient(180deg, #f7f8f8 0%, #eef1ef 100%);
}

.juan-story-header{
  max-width:900px;
  margin-bottom:clamp(30px,5vw,56px);
}

.juan-story-eyebrow{
  margin:0 0 12px;
  color:var(--verde);
  font-family:var(--titular);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.juan-story-header h2{
  margin:0 0 18px;
  max-width:780px;
  color:var(--tinta);
  font-family:var(--titular);
  font-size:clamp(2.3rem,5.3vw,4.8rem);
  line-height:.98;
  letter-spacing:-.045em;
}

.juan-story-header > p:last-child{
  max-width:780px;
  margin:0;
  color:var(--tinta-suave);
  font-family:var(--subtitulo);
  font-size:clamp(1.02rem,1.65vw,1.28rem);
  line-height:1.72;
}

.juan-story-hero{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,5vw,64px);
  align-items:stretch;
}

.juan-story-portrait{
  position:relative;
  min-height:520px;
  margin:0;
  overflow:hidden;
  border-radius:22px;
  background:#163a31;
  box-shadow:0 28px 60px -34px rgba(0,0,0,.55);
}

.juan-story-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(4,29,23,.88) 0%, rgba(4,29,23,.08) 48%, transparent 72%);
  pointer-events:none;
}

.juan-story-portrait img{
  width:100%;
  height:100%;
  min-height:520px;
  display:block;
  object-fit:cover;
  object-position:center 22%;
}

.juan-story-portrait figcaption{
  position:absolute;
  left:24px;
  right:24px;
  bottom:22px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#fff;
}

.juan-story-portrait figcaption span{
  font-family:var(--titular);
  font-size:1.7rem;
  font-weight:800;
}

.juan-story-portrait figcaption strong{
  font-size:.86rem;
  letter-spacing:.045em;
}

.juan-story-intro{
  align-self:center;
}

.juan-story-label{
  display:inline-flex;
  margin-bottom:13px;
  padding:7px 12px;
  border:1px solid rgba(3,105,77,.22);
  border-radius:999px;
  color:var(--verde);
  background:rgba(3,105,77,.06);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.juan-story-intro h3{
  max-width:670px;
  margin:0 0 20px;
  color:var(--tinta);
  font-family:var(--titular);
  font-size:clamp(1.7rem,3vw,2.7rem);
  line-height:1.08;
}

.juan-story-intro > p{
  max-width:680px;
  margin:0 0 15px;
  color:var(--tinta-suave);
  line-height:1.78;
}

.juan-story-highlight{
  margin-top:28px;
  padding:24px 26px;
  border-left:4px solid var(--rojo);
  border-radius:0 14px 14px 0;
  background:#fff;
  box-shadow:0 18px 38px -30px rgba(0,0,0,.48);
}

.juan-story-highlight span{
  display:block;
  margin-bottom:7px;
  color:var(--rojo);
  font-family:var(--titular);
  font-size:1rem;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
}

.juan-story-highlight p{
  margin:0;
  color:var(--tinta);
  line-height:1.7;
}

.juan-story-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:clamp(38px,6vw,72px);
}

.juan-story-timeline::before{
  content:"";
  position:absolute;
  top:30px;
  left:6%;
  right:6%;
  height:1px;
  background:linear-gradient(90deg, var(--verde), rgba(3,105,77,.16), var(--rojo));
}

.juan-story-timeline article{
  position:relative;
  z-index:1;
  padding:20px 18px 22px;
  border:1px solid rgba(26,26,24,.09);
  border-radius:16px;
  background:rgba(255,255,255,.88);
  box-shadow:0 16px 36px -32px rgba(0,0,0,.55);
}

.juan-story-step{
  display:grid;
  width:38px;
  height:38px;
  margin-bottom:20px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--verde);
  font-family:var(--titular);
  font-size:.75rem;
  font-weight:800;
  box-shadow:0 0 0 6px #eef1ef;
}

.juan-story-timeline article:last-child .juan-story-step{
  background:var(--rojo);
}

.juan-story-timeline small{
  display:block;
  margin-bottom:6px;
  color:var(--rojo);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.1em;
}

.juan-story-timeline h3{
  margin:0 0 10px;
  color:var(--tinta);
  font-family:var(--titular);
  font-size:1.08rem;
}

.juan-story-timeline p{
  margin:0;
  color:var(--tinta-suave);
  font-size:.88rem;
  line-height:1.65;
}

.kuauhtototl-story-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  margin-top:28px;
  padding:28px 30px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(130deg, #055f48, #073d31 65%, #15231f);
  box-shadow:0 24px 52px -36px rgba(3,105,77,.8);
}

.kuauhtototl-story-mark{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.08);
}

.kuauhtototl-story-card span{
  display:block;
  margin-bottom:6px;
  color:rgba(255,255,255,.68);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.kuauhtototl-story-card h3{
  margin:0 0 10px;
  color:#fff;
  font-family:var(--titular);
  font-size:clamp(1.25rem,2vw,1.65rem);
}

.kuauhtototl-story-card p{
  max-width:880px;
  margin:0;
  color:rgba(255,255,255,.88);
  line-height:1.72;
}

@media (max-width:920px){
  .pano-static-bg{
    inset:0;
    transform:none;
    background-position:center;
  }

  .hero-scroll-cue{ bottom:18px; }

  .juan-story-hero{
    grid-template-columns:minmax(220px,.82fr) minmax(0,1.18fr);
    gap:28px;
  }

  .juan-story-portrait,
  .juan-story-portrait img{
    min-height:430px;
  }

  .juan-story-timeline{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .juan-story-timeline::before{ display:none; }
}

@media (max-width:680px){
  html{ scroll-padding-top:72px; }

  .hero-scroll-cue span{ display:none; }
  .hero-scroll-cue i{ height:28px; }

  main > section.scroll-stage:not(.hero){
    transform:translateY(20px);
    transition-duration:.55s;
  }

  .juan-story-header{
    margin-bottom:28px;
  }

  .juan-story-header h2{
    font-size:clamp(2.25rem,12vw,3.35rem);
  }

  .juan-story-hero{
    grid-template-columns:1fr;
    gap:24px;
  }

  .juan-story-portrait{
    min-height:0;
    aspect-ratio:4 / 4.5;
    border-radius:16px;
  }

  .juan-story-portrait img{
    min-height:0;
    height:100%;
  }

  .juan-story-portrait figcaption{
    left:18px;
    right:18px;
    bottom:17px;
  }

  .juan-story-portrait figcaption span{
    font-size:1.35rem;
  }

  .juan-story-intro h3{
    font-size:1.65rem;
  }

  .juan-story-highlight{
    margin-top:20px;
    padding:20px;
  }

  .juan-story-timeline{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:34px;
  }

  .juan-story-timeline article{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:14px;
    padding:17px;
  }

  .juan-story-step{
    width:34px;
    height:34px;
    margin:0;
    box-shadow:none;
  }

  .kuauhtototl-story-card{
    grid-template-columns:1fr;
    gap:12px;
    padding:22px 20px;
  }

  .kuauhtototl-story-mark{
    width:36px;
    height:36px;
  }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero-scroll-cue i{ animation:none; }
  main > section.scroll-stage:not(.hero){
    opacity:1;
    transform:none;
    transition:none;
  }
  .pano-static-bg{
    background-position:center;
    transform:none;
  }
}

/* ============================================================
   AJUSTE FINAL — HERO CON PANO MÁS VISIBLE
   ============================================================ */

/* La foto queda más limpia y menos oscura. */
.hero .pano-static-bg{
  opacity:1;
  inset:-4% 0;
  transform:scale(1.02);
  background-position:center 48%;
}

/* Quitamos el degradado oscuro anterior y conservamos únicamente
   una textura diagonal muy ligera. */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.035) 0 2px,
      transparent 2px 44px
    );
  pointer-events:none;
}

/* Oscurece principalmente detrás del texto y deja libre el paisaje
   hacia la derecha. */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      90deg,
      rgba(5,24,20,.68) 0%,
      rgba(5,28,23,.50) 35%,
      rgba(4,26,21,.25) 60%,
      rgba(3,20,17,.08) 82%,
      rgba(3,20,17,.03) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.03) 55%,
      rgba(0,0,0,.16) 100%
    );
  pointer-events:none;
}

/* El contenido sigue encima de la imagen y conserva buena lectura. */
.hero-inner{
  position:relative;
  z-index:3;
}

.hero-title,
.hero-subtitle,
.hero-tagline,
.hero-sub{
  text-shadow:0 3px 18px rgba(0,0,0,.48);
}

/* En móvil mantenemos un poco más de contraste detrás del texto,
   pero la imagen sigue siendo claramente visible. */
@media (max-width:700px){
  .hero .pano-static-bg{
    background-position:62% center;
    transform:scale(1.03);
  }

  .hero::after{
    background:
      linear-gradient(
        90deg,
        rgba(4,25,20,.70) 0%,
        rgba(4,27,22,.52) 58%,
        rgba(3,22,18,.22) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,.06),
        rgba(0,0,0,.18)
      );
  }
}

/* ============================================================
   SCROLL CINEMÁTICO SIERA — MÁS LLAMATIVO, SIN SER INVASIVO
   ============================================================ */

/* La barra superior funciona como guía de avance y toma los tres tonos
   del estandarte. El brillo es discreto para no competir con el contenido. */
#progressBar{
  height:4px;
  background:linear-gradient(90deg, var(--verde) 0 34%, #f4f1e9 34% 66%, var(--rojo) 66% 100%);
  box-shadow:0 2px 12px rgba(3,105,77,.32);
  transition:width .08s linear;
}

/* En vez de ocultar todo el fondo de una sección, entra solamente el
   contenido. Esto produce una transición mucho más natural al desplazarse. */
main > section.scroll-stage:not(.hero){
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

main > section.scroll-stage:not(.hero) > .wrap{
  opacity:.28;
  transform:translate3d(0,42px,0) scale(.994);
  filter:blur(3px);
  transition:
    opacity .82s cubic-bezier(.16,1,.3,1),
    transform .92s cubic-bezier(.16,1,.3,1),
    filter .78s ease;
  will-change:opacity,transform,filter;
}

main > section.scroll-stage.is-in-view:not(.hero) > .wrap{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

/* Las líneas bajo los títulos se "dibujan" cuando la sección entra. */
main > section.scroll-stage .eyebrow-rule{
  transform-origin:left center;
  transform:scaleX(.18);
  opacity:.35;
  transition:transform .85s cubic-bezier(.16,1,.3,1) .12s, opacity .55s ease .12s;
}

main > section.scroll-stage.is-in-view .eyebrow-rule{
  transform:scaleX(1);
  opacity:1;
}

/* Tarjetas y elementos internos aparecen en pequeños grupos, dando una
   sensación editorial sin obligar al usuario a esperar animaciones. */
.scroll-reveal-item{
  opacity:0;
  transform:translate3d(0,26px,0) scale(.985);
  filter:blur(2px);
  transition:
    opacity .7s ease var(--scroll-delay,0ms),
    transform .78s cubic-bezier(.16,1,.3,1) var(--scroll-delay,0ms),
    filter .65s ease var(--scroll-delay,0ms);
}

.scroll-reveal-item.is-revealed{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

/* Profundidad de la portada. JS modifica la posición del bloque de texto
   ligeramente; esta transición evita pequeños saltos al redimensionar. */
.hero-text{
  will-change:transform,opacity;
  transition:opacity .14s linear;
}

/* Navegación lateral convertida en un pequeño riel visual. */
.section-dots{
  right:20px;
  gap:10px;
  padding:14px 7px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(12,29,24,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -24px rgba(0,0,0,.45);
}

.section-dot{
  position:relative;
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-color:rgba(255,255,255,.62);
  opacity:.62;
  transition:
    width .3s cubic-bezier(.16,1,.3,1),
    height .3s cubic-bezier(.16,1,.3,1),
    background .25s ease,
    border-color .25s ease,
    opacity .25s ease,
    transform .25s ease;
}

.section-dot::after{
  content:attr(data-label);
  position:absolute;
  top:50%;
  right:22px;
  min-width:max-content;
  padding:7px 10px;
  border-radius:8px;
  color:#fff;
  background:rgba(7,31,25,.9);
  box-shadow:0 10px 24px -16px rgba(0,0,0,.7);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  transform:translate(7px,-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.16,1,.3,1);
}

.section-dot:hover::after,
.section-dot.is-active::after{
  opacity:1;
  transform:translate(0,-50%);
}

.section-dot.is-active{
  width:8px;
  height:27px;
  border-radius:999px;
  background:var(--rojo);
  border-color:var(--rojo);
  transform:none;
  box-shadow:0 0 0 4px rgba(212,31,53,.12);
}

/* Indicador discreto de capítulo: refuerza la sensación de museo digital. */
.scroll-section-indicator{
  position:fixed;
  right:18px;
  bottom:20px;
  z-index:58;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#fff;
  background:rgba(7,31,25,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -24px rgba(0,0,0,.58);
  pointer-events:none;
}

.scroll-section-number{
  display:grid;
  min-width:27px;
  height:27px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--rojo);
  font-size:.7rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.scroll-section-name{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* En pantallas pequeñas priorizamos fluidez: mantenemos el efecto de entrada,
   pero eliminamos blur, riel lateral y profundidad de la portada. */
@media (max-width:900px){
  .scroll-section-indicator,
  .section-dots{
    display:none;
  }

  main > section.scroll-stage:not(.hero) > .wrap{
    transform:translate3d(0,22px,0);
    filter:none;
    transition-duration:.58s;
  }

  .scroll-reveal-item{
    transform:translate3d(0,18px,0);
    filter:none;
    transition-duration:.55s;
  }
}

@media (max-width:600px){
  #progressBar{ height:3px; }

  main > section.scroll-stage:not(.hero) > .wrap{
    transform:translate3d(0,16px,0);
  }

  .scroll-reveal-item{
    transform:translate3d(0,14px,0);
  }
}

@media (prefers-reduced-motion:reduce){
  #progressBar{ transition:none; }

  main > section.scroll-stage:not(.hero) > .wrap,
  .scroll-reveal-item,
  main > section.scroll-stage .eyebrow-rule{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }

  .section-dot,
  .section-dot::after{
    transition:none !important;
  }
}


/* ============================================================
   MUSEO DIGITAL — TARJETA DESPLEGABLE
   Mantiene la estructura existente y evita que el bloque 02
   haga demasiado larga la sección cuando está cerrado.
   ============================================================ */
.museum-gateway-card--accordion{
  display:block;
  padding:0;
  overflow:hidden;
  min-height:190px;
}

.museum-gateway-card--accordion:hover{
  transform:none;
}

.museum-accordion-trigger{
  width:100%;
  min-height:188px;
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:28px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.museum-accordion-trigger:focus-visible{
  outline:3px solid rgba(3,105,77,.30);
  outline-offset:-4px;
  border-radius:12px;
}

.museum-accordion-summary{
  display:block;
  flex:1;
  min-width:0;
}

.museum-accordion-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.museum-accordion-title-row h3{
  margin-right:auto;
}

.museum-accordion-chevron{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--verde-dark);
  background:rgba(3,105,77,.08);
  border:1px solid rgba(3,105,77,.18);
  font-family:var(--titular);
  font-size:1.45rem;
  font-weight:600;
  line-height:1;
  transition:transform .28s ease, background .2s ease, color .2s ease;
}

.museum-gateway-card--accordion.is-open .museum-accordion-chevron{
  transform:rotate(45deg);
  color:var(--hueso);
  background:var(--verde);
}

.museum-accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  border-top:1px solid transparent;
  transition:grid-template-rows .38s ease, opacity .28s ease, border-color .28s ease;
}

.museum-accordion-panel-inner{
  min-height:0;
  overflow:hidden;
  padding:0 28px;
}

.museum-gateway-card--accordion.is-open .museum-accordion-panel{
  grid-template-rows:1fr;
  opacity:1;
  border-top-color:var(--linea);
}

.museum-gateway-card--accordion.is-open .museum-accordion-panel-inner{
  padding:24px 28px 28px;
}

.museum-accordion-panel-inner p{
  margin:0 0 16px;
  color:var(--tinta-suave);
  line-height:1.7;
}

.museum-accordion-panel-inner p:last-of-type{
  margin-bottom:22px;
}

.museum-memory-link{
  margin-top:2px;
}

.museum-accordion-label{
  margin-top:2px;
}

@media (max-width:760px){
  .museum-accordion-trigger{
    min-height:0;
    padding:22px;
    gap:16px;
  }

  .museum-gateway-card--accordion{
    min-height:0;
  }

  .museum-accordion-title-row{
    gap:12px;
  }

  .museum-accordion-chevron{
    flex-basis:30px;
    width:30px;
    height:30px;
    font-size:1.25rem;
  }

  .museum-gateway-card--accordion.is-open .museum-accordion-panel-inner{
    padding:20px 22px 24px;
  }

  .museum-accordion-panel-inner{
    padding:0 22px;
  }
}

@media (prefers-reduced-motion:reduce){
  .museum-accordion-panel,
  .museum-accordion-chevron{
    transition:none;
  }
}


/* ============================================================
   MEMORIA GRÁFICA — SCROLL INMERSIVO
   Ajuste exclusivo de #galeria. No altera otras secciones.
   ============================================================ */
#galeria .gallery-depth-hint{
  margin:12px 0 8px;
  color:rgba(247,248,248,.78);
  font-size:.78rem;
  font-style:normal;
  letter-spacing:.01em;
}

#galeria .gallery-depth-controls{
  margin-top:12px;
}

#galeria .gallery-panels.gallery-depth-experience{
  overflow:hidden;
  margin-inline:calc(clamp(18px,4vw,48px) * -1);
  padding-inline:clamp(18px,4vw,48px);
  padding-block:10px 20px;
}

#galeria .gallery-depth-track{
  display:flex !important;
  align-items:center;
  gap:clamp(14px,2vw,24px) !important;
  width:100%;
  padding:18px max(7vw, 42px) 28px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:50%;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  cursor:grab;
  perspective:1200px;
}

#galeria .gallery-depth-track.is-grabbing{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}

#galeria .gallery-depth-track::-webkit-scrollbar{ display:none; }

#galeria .gallery-depth-track .gallery-item{
  flex:0 0 clamp(300px,34vw,470px) !important;
  width:clamp(300px,34vw,470px);
  max-width:none !important;
  aspect-ratio:4 / 3;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  border-radius:18px;
  overflow:hidden;
  background:rgba(247,248,248,.07);
  border:1px solid rgba(247,248,248,.13);
  box-shadow:0 20px 55px -28px rgba(0,0,0,.72);
  transform-style:preserve-3d;
  transform-origin:center center;
  will-change:transform,opacity;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    opacity .15s linear;
}

#galeria .gallery-depth-track .gallery-item.is-gallery-active{
  border-color:rgba(247,248,248,.58);
  box-shadow:
    0 28px 65px -28px rgba(0,0,0,.85),
    0 0 0 1px rgba(212,31,53,.22);
}

#galeria .gallery-depth-track .gallery-item img,
#galeria .gallery-depth-track .gallery-item--full img{
  width:100%;
  height:100%;
  object-fit:cover;
  background:rgba(247,248,248,.04);
  transform:scale(1.02);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}

#galeria .gallery-depth-track .gallery-item--full img{
  object-fit:contain;
}

#galeria .gallery-depth-track .gallery-item.is-gallery-active img{
  transform:scale(1.055);
}

#galeria .gallery-depth-track .gallery-item figcaption{
  padding:52px 18px 16px;
  background:linear-gradient(to top,rgba(4,11,9,.94) 0%,rgba(4,11,9,.72) 48%,transparent 100%);
  font-size:.84rem;
  letter-spacing:.015em;
}

#galeria .gallery-depth-progress{
  margin-top:8px;
  height:4px;
  background:rgba(247,248,248,.14);
}

#galeria .gallery-depth-progress > span{
  background:linear-gradient(90deg,var(--verde),var(--hueso) 50%,var(--rojo));
  transition:width .12s linear;
}

@media (max-width:900px){
  #galeria .gallery-panels.gallery-depth-experience{
    margin-inline:-20px;
    padding-inline:20px;
  }

  #galeria .gallery-depth-track{
    gap:16px !important;
    padding-inline:9vw !important;
  }

  #galeria .gallery-depth-track .gallery-item{
    flex-basis:min(72vw,430px) !important;
    width:min(72vw,430px);
  }
}

@media (max-width:620px){
  #galeria .gallery-carousel-actions{ display:flex; }

  #galeria .gallery-carousel-btn{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  #galeria .gallery-depth-track{
    gap:12px !important;
    padding:12px 10vw 22px !important;
    scroll-padding-inline:10vw;
    touch-action:pan-x pan-y;
  }

  #galeria .gallery-depth-track .gallery-item{
    flex:0 0 78vw !important;
    width:78vw;
    max-width:340px !important;
    border-radius:15px;
  }

  #galeria .gallery-depth-track .gallery-item figcaption{
    padding:44px 14px 13px;
    font-size:.76rem;
  }

  #galeria .gallery-depth-hint{
    font-size:.72rem;
  }
}

@media (max-width:390px){
  #galeria .gallery-depth-track .gallery-item{
    flex-basis:82vw !important;
    width:82vw;
  }
}

@media (prefers-reduced-motion:reduce){
  #galeria .gallery-depth-track .gallery-item{
    transform:none !important;
    opacity:1 !important;
    transition:none !important;
  }
  #galeria .gallery-depth-track .gallery-item img{
    transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   AJUSTE FINAL — MEMORIA GRÁFICA
   Fotos centradas, completas y clicables en móvil y computadora.
   No modifica ninguna otra sección.
   ============================================================ */

/* La tarjeta conserva el formato inmersivo, pero centra la imagen real. */
#galeria .gallery-depth-track .gallery-item{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:rgba(6,18,15,.88);
}

/* Todas las fotografías se muestran completas, sin recortes. */
#galeria .gallery-depth-track .gallery-item img,
#galeria .gallery-depth-track .gallery-item--full img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center !important;
  margin:auto;
  display:block;
  background:transparent !important;
  transform:scale(1) !important;
  cursor:zoom-in !important;
  -webkit-user-drag:none;
  user-select:none;
}

/* La imagen activa gana presencia sin salirse del centro. */
#galeria .gallery-depth-track .gallery-item.is-gallery-active img{
  transform:scale(1.025) !important;
}

/* Indicador visual de que la foto se puede abrir. */
#galeria .gallery-depth-track .gallery-item::after{
  content:"↗";
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(3,105,77,.84);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  opacity:.82;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:4;
}

#galeria .gallery-depth-track .gallery-item:hover::after,
#galeria .gallery-depth-track .gallery-item.is-gallery-active::after{
  opacity:1;
  transform:scale(1.06);
}

/* El pie se mantiene sobre la imagen, pero sin tapar demasiado. */
#galeria .gallery-depth-track .gallery-item figcaption{
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  pointer-events:none;
}

/* Lightbox: centra la foto ampliada y respeta su proporción. */
.lightbox-overlay{
  padding:clamp(18px,4vw,54px) !important;
}

.lightbox-overlay img{
  width:auto !important;
  height:auto !important;
  max-width:min(94vw,1400px) !important;
  max-height:90vh !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:auto !important;
  display:block !important;
}

@media (max-width:620px){
  #galeria .gallery-depth-track{
    padding-left:11vw !important;
    padding-right:11vw !important;
  }

  #galeria .gallery-depth-track .gallery-item{
    flex:0 0 78vw !important;
    width:78vw !important;
    max-width:350px !important;
  }

  #galeria .gallery-depth-track .gallery-item::after{
    width:30px;
    height:30px;
    top:10px;
    right:10px;
    font-size:.82rem;
  }
}

/* ============================================================
   SCROLL DINÁMICO · CAPÍTULOS SIERA
   Override final: SOLO modifica la experiencia de desplazamiento.
   No cambia fondos, medidas, contenido, mapa, galería ni estructura.
   ============================================================ */

/* Mantiene el scroll nativo (sin secuestrar la rueda) y mejora la sensación
   de continuidad cuando se navega a una ancla o se usa el menú lateral. */
html{
  scroll-behavior:smooth;
  overscroll-behavior-y:none;
}

body{
  scroll-behavior:smooth;
}

/* El capítulo nunca se oculta completo. La profundidad se aplica al .wrap,
   de modo que los fondos y colores de cada sección permanecen exactamente
   como ya estaban. */
main > section.scroll-live-stage:not(.hero){
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

main > section.scroll-live-stage:not(.hero) > .wrap{
  opacity:var(--stage-opacity, 1) !important;
  transform:
    perspective(1200px)
    translate3d(0, var(--stage-y, 0px), 0)
    rotateX(var(--stage-rotate, 0deg))
    scale(var(--stage-scale, 1)) !important;
  transform-origin:center center;
  filter:none !important;
  transition:none !important;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* Los títulos avanzan en una capa ligeramente distinta al cuerpo para dar
   sensación de profundidad, sin cambiar su posición de diseño. */
main > section.scroll-live-stage .eyebrow,
main > section.scroll-live-stage .historia-resumida-header,
main > section.scroll-live-stage .juan-story-header,
main > section.scroll-live-stage .museum-gateway-head,
main > section.scroll-live-stage .agenda-header{
  transform:translate3d(var(--heading-x, 0px),0,0);
  transition:transform .12s linear;
  will-change:transform;
}

/* La línea bajo cada capítulo se extiende al entrar y conserva una sensación
   de movimiento mientras el usuario sigue bajando. */
main > section.scroll-live-stage .eyebrow-rule{
  transform-origin:left center;
  transform:scaleX(.22);
  opacity:.42;
  transition:
    transform .82s cubic-bezier(.16,1,.3,1),
    opacity .55s ease;
}

main > section.scroll-live-stage.is-in-view .eyebrow-rule{
  transform:scaleX(1);
  opacity:1;
}

/* Entrada de tarjetas: más limpia que el blur anterior. */
.scroll-reveal-item{
  opacity:0;
  transform:translate3d(0,30px,0) scale(.972);
  filter:none !important;
  transition:
    opacity .62s ease var(--scroll-delay,0ms),
    transform .88s cubic-bezier(.16,1,.3,1) var(--scroll-delay,0ms) !important;
  will-change:transform,opacity;
}

.scroll-reveal-item.is-revealed{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* El indicador superior de progreso gana una "cabeza" luminosa al avanzar. */
#progressBar{
  overflow:visible;
  will-change:width;
}

#progressBar::after{
  content:"";
  position:absolute;
  top:50%;
  right:-2px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--rojo);
  box-shadow:0 0 0 4px rgba(212,31,53,.12), 0 0 18px rgba(212,31,53,.58);
  transform:translateY(-50%);
}

/* La portada conserva su mismo layout; solo su contenido tiene inercia visual. */
.hero-text{
  will-change:transform,opacity;
  transform-origin:left center;
  transition:opacity .12s linear;
}

/* PC: el capítulo activo se siente apenas más nítido sin alterar colores. */
@media (min-width:901px){
  main > section.scroll-live-stage.is-scroll-current:not(.hero) > .wrap{
    text-rendering:optimizeLegibility;
  }
}

/* Móvil: misma sensación, pero con movimientos más cortos y sin perspectiva
   marcada para mantener el desplazamiento natural y ligero. */
@media (max-width:900px){
  main > section.scroll-live-stage:not(.hero) > .wrap{
    transform:
      translate3d(0, var(--stage-y, 0px), 0)
      scale(var(--stage-scale, 1)) !important;
    opacity:var(--stage-opacity, 1) !important;
  }

  main > section.scroll-live-stage .eyebrow,
  main > section.scroll-live-stage .historia-resumida-header,
  main > section.scroll-live-stage .juan-story-header,
  main > section.scroll-live-stage .museum-gateway-head,
  main > section.scroll-live-stage .agenda-header{
    transform:none;
    transition:none;
  }

  .scroll-reveal-item{
    transform:translate3d(0,20px,0) scale(.985);
    transition-duration:.68s !important;
  }
}

@media (max-width:600px){
  .scroll-reveal-item{
    transform:translate3d(0,16px,0) scale(.99);
  }
}

/* Accesibilidad: quien haya pedido reducir movimiento recibe la página
   completamente estática, sin perder contenido. */
@media (prefers-reduced-motion:reduce){
  main > section.scroll-live-stage:not(.hero) > .wrap,
  main > section.scroll-live-stage .eyebrow,
  main > section.scroll-live-stage .historia-resumida-header,
  main > section.scroll-live-stage .juan-story-header,
  main > section.scroll-live-stage .museum-gateway-head,
  main > section.scroll-live-stage .agenda-header,
  .scroll-reveal-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    filter:none !important;
  }

  #progressBar::after{
    display:none !important;
  }
}



/* ============================================================
   NUEVO ENFOQUE NARRATIVO · 2026
   Solo reorganiza contenido histórico; no modifica fondos globales.
   ============================================================ */
.story-chapter-header{max-width:960px;margin-bottom:38px}
.story-chapter-header h2{font-family:var(--titular);font-size:clamp(2.4rem,5.8vw,4.9rem);line-height:1;letter-spacing:-.045em;max-width:19ch;margin:.12em 0 .35em}
.story-chapter-header h2 span{color:var(--rojo)}
.story-context-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:30px;align-items:start;padding:30px;border:1px solid var(--linea);border-radius:16px;background:var(--hueso);box-shadow:var(--shadow-sm);margin:0 0 34px}
.story-context-number{font-family:var(--titular);font-weight:800;font-size:clamp(3.4rem,7vw,6.5rem);line-height:.9;color:var(--verde);opacity:.16}
.story-context-kicker,.story-label{display:block;font-family:var(--titular);font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--verde);margin-bottom:8px}
.story-context-card h3,.story-copy h3{font-family:var(--titular);font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.15;margin:0 0 14px}
.story-context-card p,.story-copy p{color:var(--tinta-suave);margin:0 0 12px}
.story-context-highlight{margin-top:18px!important;padding:17px 18px;border-left:4px solid var(--rojo);background:rgba(212,31,53,.055);color:var(--tinta)!important}
.story-hero-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:42px;align-items:stretch;margin:0 0 34px}
.story-media{position:relative;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--linea);background:var(--hueso);box-shadow:var(--shadow-md);min-height:320px}
.story-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.story-media--portrait img{object-fit:cover;object-position:center 20%}
.story-media--flag img{object-fit:contain;background:var(--hueso-2)}
.story-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;background:linear-gradient(to top,rgba(26,26,24,.85),transparent);color:var(--hueso);display:flex;flex-direction:column;gap:2px}
.story-media figcaption strong{font-family:var(--titular);font-size:.95rem}
.story-media figcaption span{font-size:.74rem;color:rgba(247,248,248,.78)}
.story-copy{padding:14px 0}
.story-key-date{margin-top:22px;padding:18px 20px;border-radius:12px;background:var(--verde);color:var(--hueso);box-shadow:var(--shadow-green)}
.story-key-date span{display:block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,248,248,.72)}
.story-key-date strong{display:block;font-family:var(--titular);font-size:1.2rem;margin:3px 0 4px;color:var(--hueso)}
.story-key-date p{margin:0;color:rgba(247,248,248,.86)}
.story-documents,.bandera-visual-pair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 36px}
.bandera-visual-pair{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
.story-doc-card{position:relative;margin:0;border:1px solid var(--linea);border-radius:14px;overflow:hidden;background:var(--hueso);box-shadow:var(--shadow-sm)}
.story-doc-card img{width:100%;height:230px;object-fit:contain;background:var(--hueso-2)}
.story-doc-card figcaption{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px}
.story-doc-card figcaption strong{font-family:var(--titular);font-size:.9rem;color:var(--tinta)}
.story-doc-card figcaption span{font-size:.76rem;color:var(--tinta-suave)}
.story-doc-card--wide img{height:290px}
.story-timeline,.bandera-story-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:32px}
.bandera-story-timeline{grid-template-columns:repeat(5,minmax(0,1fr));margin:36px 0}
.story-timeline article,.bandera-story-timeline article{padding:20px;border:1px solid var(--linea);border-radius:12px;background:var(--hueso);min-width:0}
.story-timeline article>span,.bandera-story-timeline article>span{display:block;font-family:var(--titular);font-size:1.7rem;font-weight:800;color:var(--rojo);opacity:.7;margin-bottom:16px}
.story-timeline small,.bandera-story-timeline small{display:block;font-size:.64rem;font-weight:800;letter-spacing:.08em;color:var(--verde);margin-bottom:5px}
.story-timeline h3,.bandera-story-timeline h3{font-family:var(--titular);font-size:.95rem;margin:0 0 7px}
.story-timeline p,.bandera-story-timeline p{font-size:.8rem;color:var(--tinta-suave);margin:0;line-height:1.55}
.bandera-legend-card{margin:28px 0 0}
.bandera-researcher-card{display:grid;grid-template-columns:minmax(180px,.58fr) minmax(0,1.2fr) minmax(210px,.72fr);gap:24px;align-items:stretch;padding:24px;border:1px solid var(--linea);border-radius:16px;background:var(--hueso);box-shadow:var(--shadow-sm);margin-top:34px}
.bandera-researcher-media,.bandera-book-media{margin:0;border-radius:12px;overflow:hidden;background:var(--hueso-2);min-height:270px}
.bandera-researcher-media img,.bandera-book-media img{width:100%;height:100%;object-fit:contain}
.bandera-researcher-copy{padding:10px 0}
.bandera-researcher-copy h3{font-family:var(--titular);font-size:1.35rem;margin:0 0 12px}
.bandera-researcher-copy p{color:var(--tinta-suave);font-size:.92rem}
.recorrido-origin-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.95fr);gap:34px;align-items:start;margin:38px 0 24px;padding:28px;border:1px solid var(--linea);border-radius:16px;background:var(--hueso);box-shadow:var(--shadow-sm)}
.recorrido-origin-copy h3{font-family:var(--titular);font-size:clamp(1.35rem,2.6vw,2rem);margin:0 0 14px}
.recorrido-origin-copy p{color:var(--tinta-suave);margin:0 0 12px}
.recorrido-origin-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.recorrido-origin-facts span{padding:7px 12px;border:1px solid var(--verde);border-radius:999px;color:var(--verde);font-size:.72rem;font-weight:800}
.recorrido-origin-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.recorrido-origin-media{margin:0;position:relative;border-radius:10px;overflow:hidden;background:var(--hueso-2);min-height:150px}
.recorrido-origin-media:first-child{grid-column:1/-1;min-height:200px}
.recorrido-origin-media img{width:100%;height:100%;object-fit:cover}
.recorrido-origin-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(to top,rgba(26,26,24,.8),transparent);color:var(--hueso);font-size:.7rem;font-weight:700}
.hymn-annex{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;align-items:center;margin:18px 0 30px;padding:22px;border-radius:16px;background:var(--verde);color:var(--hueso);box-shadow:var(--shadow-green)}
.hymn-author-photo{min-height:190px;box-shadow:none;border-color:rgba(247,248,248,.2)}
.hymn-annex-copy h3{font-family:var(--titular);font-size:1.4rem;color:var(--hueso);margin:0 0 8px}
.hymn-annex-copy p{color:rgba(247,248,248,.86);margin:0 0 14px}
.hymn-annex .story-label{color:rgba(247,248,248,.72)}
.hymn-inline-player{width:min(100%,520px);height:42px}
.agenda-side{display:grid;gap:12px;align-self:start;min-width:260px}
.program-shirt-card{margin:0;border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--hueso);box-shadow:var(--shadow-sm)}
.program-shirt-card img{width:100%;height:210px;object-fit:contain;background:var(--hueso-2)}
.program-shirt-card figcaption{padding:11px 13px;display:flex;flex-direction:column;gap:2px}
.program-shirt-card figcaption strong{font-family:var(--titular);font-size:.82rem}
.program-shirt-card figcaption span{font-size:.7rem;color:var(--tinta-suave)}
.story-media.is-missing,.story-doc-card.is-missing,.program-shirt-card.is-missing{min-height:190px;display:flex;align-items:center;justify-content:center;padding:20px;border:1px dashed var(--linea);background:var(--hueso-2)}
.story-media.is-missing img,.story-doc-card.is-missing img,.program-shirt-card.is-missing img{display:none}
.story-media.is-missing::after,.program-shirt-card.is-missing::after{content:attr(data-missing-copy);font-size:.75rem;color:var(--tinta-suave);text-align:center}
.story-doc-card.is-missing::before{content:"Documento histórico";font-size:.75rem;color:var(--tinta-suave);text-align:center}
@media (max-width:980px){.story-hero-layout,.recorrido-origin-story{grid-template-columns:1fr}.story-documents{grid-template-columns:repeat(2,minmax(0,1fr))}.story-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.bandera-story-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.bandera-researcher-card{grid-template-columns:220px minmax(0,1fr)}.bandera-book-media{grid-column:1/-1}.agenda-header{grid-template-columns:1fr}.agenda-side{grid-template-columns:minmax(0,1fr) minmax(220px,.6fr);align-items:start}}
@media (max-width:700px){.story-context-card{grid-template-columns:1fr;gap:12px;padding:22px}.story-context-number{font-size:3.6rem}.story-hero-layout{gap:24px}.story-media{min-height:260px}.story-documents,.bandera-visual-pair{grid-template-columns:1fr}.story-doc-card img,.story-doc-card--wide img{height:auto;max-height:340px}.story-timeline,.bandera-story-timeline{grid-template-columns:1fr}.bandera-researcher-card{grid-template-columns:1fr;padding:18px}.bandera-researcher-media,.bandera-book-media{min-height:220px}.recorrido-origin-story{padding:20px}.recorrido-origin-media-grid{grid-template-columns:1fr}.recorrido-origin-media:first-child{grid-column:auto}.hymn-annex{grid-template-columns:1fr;padding:20px}.hymn-author-photo{min-height:240px}.agenda-side{grid-template-columns:1fr}.program-shirt-card img{height:260px}}


/* ============================================================
   AJUSTE SOLICITADO · INFORMACIÓN MUNICIPAL DENTRO DE PROGRAMA
   Se retira la ficha lateral de Introducción y se integra aquí,
   con fotografía del Presidente Municipal. No altera otros bloques.
   ============================================================ */
.intro-grid--single{
  grid-template-columns:minmax(0, 1fr);
}
.intro-grid--single .intro-copy{
  max-width:860px;
}

.program-authority-card{
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);
  gap:0;
  margin:30px 0 38px;
  background:var(--hueso);
  border:1px solid var(--linea);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}

.program-authority-photo{
  position:relative;
  min-height:360px;
  margin:0;
  background:var(--hueso-2);
  overflow:hidden;
}
.program-authority-photo img{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  object-position:center top;
}
.program-authority-photo::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:34%;
  background:linear-gradient(to top,rgba(3,105,77,.34),transparent);
  pointer-events:none;
}
.program-authority-photo.is-missing{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:360px;
  padding:26px;
  border-right:1px dashed var(--linea);
  background:var(--hueso-2);
}
.program-authority-photo.is-missing img{display:none}
.program-authority-photo.is-missing::after{
  content:attr(data-missing-copy);
  position:static;
  height:auto;
  max-width:30ch;
  background:none;
  color:var(--tinta-suave);
  font-size:.78rem;
  line-height:1.6;
  text-align:center;
}

.program-authority-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,4.2vw,52px);
}
.program-authority-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
  color:var(--verde-dark);
  font-family:var(--titular);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.program-authority-brand img{
  width:58px;
  height:36px;
  object-fit:contain;
}
.program-authority-period{
  margin:0 0 24px;
  font-family:var(--titular);
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:800;
  line-height:1;
  color:var(--tinta);
}
.program-authority-label{
  display:block;
  margin-bottom:5px;
  color:var(--tinta-suave);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.program-authority-content h3{
  margin:0;
  font-family:var(--titular);
  font-size:clamp(1.45rem,2.7vw,2.25rem);
  line-height:1.12;
  color:var(--tinta);
}
.program-authority-role{
  margin:8px 0 0;
  color:var(--tinta-suave);
  font-size:.92rem;
}
.program-authority-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--linea);
}
.program-authority-meta div{
  min-width:0;
}
.program-authority-meta span{
  display:block;
  margin-bottom:4px;
  color:var(--tinta-suave);
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.program-authority-meta strong{
  display:block;
  color:var(--verde-dark);
  font-family:var(--titular);
  font-size:.88rem;
  line-height:1.45;
}

@media (max-width:820px){
  .program-authority-card{
    grid-template-columns:220px minmax(0,1fr);
  }
  .program-authority-photo,
  .program-authority-photo img,
  .program-authority-photo.is-missing{
    min-height:330px;
  }
  .program-authority-meta{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .program-authority-card{
    grid-template-columns:1fr;
    margin:24px 0 30px;
    border-radius:14px;
  }
  .program-authority-photo,
  .program-authority-photo img,
  .program-authority-photo.is-missing{
    min-height:0;
    height:310px;
  }
  .program-authority-photo img{
    object-position:center 18%;
  }
  .program-authority-content{
    padding:24px 21px 26px;
  }
  .program-authority-brand{
    margin-bottom:17px;
  }
  .program-authority-period{
    margin-bottom:20px;
  }
  .program-authority-meta{
    margin-top:24px;
    padding-top:18px;
  }
}

@media (max-width:420px){
  .program-authority-photo,
  .program-authority-photo img,
  .program-authority-photo.is-missing{
    height:270px;
  }
  .program-authority-brand img{
    width:50px;
  }
  .program-authority-content h3{
    font-size:1.38rem;
  }
}

/* ============================================================
   PREPÁRATE PARA EL RECORRIDO · VERSIÓN LIMPIA
   Solo título + texto, centrados y con mayor jerarquía.
   ============================================================ */
#preparate.event-promise{
  background: var(--hueso);
  border-block: 1px solid var(--linea);
  padding: clamp(72px, 9vw, 120px) 0;
}

#preparate .event-promise-simple{
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

#preparate .event-promise-simple-title{
  margin: 0 auto 26px;
  font-family: var(--titular);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--verde);
}

#preparate .event-promise-simple-text{
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: clamp(1.08rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.65;
  color: var(--tinta);
  text-wrap: balance;
}

#preparate .event-promise-simple-text strong{
  font-weight: 700;
}

@media (max-width: 700px){
  #preparate.event-promise{
    padding: 62px 0;
  }

  #preparate .event-promise-simple-title{
    margin-bottom: 20px;
    font-size: clamp(2.05rem, 10vw, 3.2rem);
    line-height: 1.02;
  }

  #preparate .event-promise-simple-text{
    max-width: 34ch;
    font-size: clamp(1rem, 4.6vw, 1.22rem);
    line-height: 1.6;
  }
}

/* =========================================================
   PLAYERAS CONMEMORATIVAS DEL RECORRIDO
   Bloque añadido debajo del origen del recorrido.
   No modifica la estructura ni estilos existentes.
   ========================================================= */
.recorrido-shirts-showcase{
  margin: 24px 0 42px;
  padding: 28px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--hueso);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.recorrido-shirts-header{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.recorrido-shirts-header > div{
  max-width: 760px;
}

.recorrido-shirts-header h3{
  margin: 6px 0 10px;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  color: var(--tinta);
}

.recorrido-shirts-header p{
  margin: 0;
  color: var(--gris);
  line-height: 1.7;
}

.recorrido-shirts-hint{
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid rgba(0,113,82,.24);
  border-radius: 999px;
  color: var(--verde);
  background: rgba(0,113,82,.05);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.recorrido-shirts-track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding: 2px 2px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,113,82,.55) rgba(0,0,0,.06);
  -webkit-overflow-scrolling: touch;
}

.recorrido-shirts-track::-webkit-scrollbar{
  height: 7px;
}

.recorrido-shirts-track::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius: 999px;
}

.recorrido-shirts-track::-webkit-scrollbar-thumb{
  background: rgba(0,113,82,.55);
  border-radius: 999px;
}

.recorrido-shirt-card{
  flex: 0 0 clamp(270px, 32vw, 390px);
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: minmax(320px, 430px) auto;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.recorrido-shirt-card:hover,
.recorrido-shirt-card:focus-visible{
  transform: translateY(-5px);
  border-color: rgba(0,113,82,.35);
  box-shadow: 0 18px 34px rgba(20,40,34,.13);
  outline: none;
}

.recorrido-shirt-card img{
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: 12px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.98), rgba(248,248,245,.92));
}

.recorrido-shirt-card span{
  display: block;
  padding: 13px 16px 15px;
  border-top: 1px solid var(--linea);
  font-size: .84rem;
  font-weight: 800;
  color: var(--verde);
  letter-spacing: .035em;
  text-transform: uppercase;
}

@media (max-width: 760px){
  .recorrido-shirts-showcase{
    margin: 20px 0 34px;
    padding: 20px 16px;
    border-radius: 14px;
  }

  .recorrido-shirts-header{
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .recorrido-shirts-hint{
    font-size: .7rem;
  }

  .recorrido-shirts-track{
    gap: 12px;
    margin-inline: -4px;
  }

  .recorrido-shirt-card{
    flex-basis: min(84vw, 340px);
    grid-template-rows: minmax(300px, 420px) auto;
    scroll-snap-align: center;
  }
}



/* ============================================================
   PLAYERAS CONMEMORATIVAS · CARRUSEL COMPACTO
   Override final: reduce el alto del bloque y conserva el
   desplazamiento horizontal tipo Memoria Gráfica.
   No modifica ninguna otra sección.
   ============================================================ */

.recorrido-shirts-showcase{
  margin: 18px 0 30px;
  padding: 16px 18px 18px;
  border-radius: 14px;
}

.recorrido-shirts-header{
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.recorrido-shirts-header > div{
  max-width: 760px;
}

.recorrido-shirts-header .story-label{
  font-size: .68rem;
  letter-spacing: .12em;
}

.recorrido-shirts-header h3{
  margin: 3px 0 4px;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.15;
}

.recorrido-shirts-header p{
  max-width: 760px;
  font-size: .82rem;
  line-height: 1.45;
}

.recorrido-shirts-hint{
  padding: 7px 10px;
  font-size: .66rem;
}

/* Carrusel horizontal compacto */
.recorrido-shirts-track{
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10px;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 5px;
  scrollbar-width: none;
  cursor: grab;
}

.recorrido-shirts-track:active{
  cursor: grabbing;
}

.recorrido-shirts-track::-webkit-scrollbar{
  display: none;
}

/* Varias tarjetas visibles en PC, una principal en móvil */
.recorrido-shirt-card{
  flex: 0 0 clamp(190px, 20vw, 255px);
  width: clamp(190px, 20vw, 255px);
  grid-template-rows: 150px auto;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(20,40,34,.08);
  transform: scale(.97);
  opacity: .90;
  transition:
    transform .26s ease,
    opacity .26s ease,
    box-shadow .26s ease,
    border-color .26s ease;
}

.recorrido-shirt-card:hover,
.recorrido-shirt-card:focus-visible{
  transform: scale(1);
  opacity: 1;
  border-color: rgba(0,113,82,.38);
  box-shadow: 0 14px 28px rgba(20,40,34,.14);
}

.recorrido-shirt-card img{
  width: 100%;
  height: 150px;
  padding: 5px;
  object-fit: contain;
  object-position: center;
  background:
    radial-gradient(circle at 50% 35%, #fff 0%, #f7f7f3 100%);
}

.recorrido-shirt-card span{
  padding: 8px 10px 9px;
  font-size: .66rem;
  line-height: 1.25;
  letter-spacing: .025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sutil degradado lateral para sugerir que hay más contenido */
.recorrido-shirts-showcase{
  position: relative;
}

.recorrido-shirts-showcase::after{
  content: "";
  position: absolute;
  right: 17px;
  bottom: 18px;
  width: 42px;
  height: 178px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--hueso));
  opacity: .56;
  border-radius: 0 10px 10px 0;
}

/* Tablet */
@media (max-width: 900px){
  .recorrido-shirt-card{
    flex-basis: 220px;
    width: 220px;
  }
}

/* Móvil */
@media (max-width: 760px){
  .recorrido-shirts-showcase{
    margin: 16px 0 26px;
    padding: 14px 12px 15px;
  }

  .recorrido-shirts-header{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 8px 10px;
    margin-bottom: 10px;
  }

  .recorrido-shirts-header > div{
    min-width: 0;
  }

  .recorrido-shirts-header h3{
    font-size: 1rem;
    margin-bottom: 0;
  }

  .recorrido-shirts-header p{
    display: none;
  }

  .recorrido-shirts-hint{
    padding: 6px 8px;
    font-size: .58rem;
  }

  .recorrido-shirts-track{
    gap: 9px;
    margin: 0 -2px;
    padding: 2px 9vw 4px;
    scroll-padding-inline: 9vw;
  }

  .recorrido-shirt-card{
    flex: 0 0 min(68vw, 250px);
    width: min(68vw, 250px);
    grid-template-rows: 145px auto;
    border-radius: 11px;
  }

  .recorrido-shirt-card img{
    height: 145px;
    padding: 4px;
  }

  .recorrido-shirt-card span{
    padding: 7px 9px 8px;
    font-size: .62rem;
  }

  .recorrido-shirts-showcase::after{
    right: 11px;
    bottom: 15px;
    width: 26px;
    height: 170px;
  }
}

@media (max-width: 420px){
  .recorrido-shirt-card{
    flex-basis: 72vw;
    width: 72vw;
    max-width: 240px;
  }
}

@media (prefers-reduced-motion: reduce){
  .recorrido-shirt-card{
    transition: none;
  }
}


/* ============================================================
   PLAYERAS CONMEMORATIVAS · CARRUSEL INMERSIVO
   Misma lógica visual de Memoria Gráfica, en formato compacto.
   Este bloque SOLO afecta .recorrido-shirts-showcase.
   ============================================================ */

.recorrido-shirts-showcase{
  position:relative;
  margin:18px 0 32px !important;
  padding:18px 20px 16px !important;
  overflow:hidden;
  border:1px solid var(--linea);
  border-radius:16px;
  background:var(--hueso);
  box-shadow:var(--shadow-sm);
}

.recorrido-shirts-header{
  display:block !important;
  margin:0 0 8px !important;
}

.recorrido-shirts-header > div{
  max-width:760px;
}

.recorrido-shirts-header .story-label{
  font-size:.68rem;
  letter-spacing:.12em;
}

.recorrido-shirts-header h3{
  margin:4px 0 5px !important;
  font-size:clamp(1.05rem,1.55vw,1.38rem) !important;
  line-height:1.15;
}

.recorrido-shirts-header p{
  margin:0;
  max-width:720px;
  color:var(--gris);
  font-size:.78rem !important;
  line-height:1.45 !important;
}

/* Controles iguales en estructura al carrusel de Memoria Gráfica */
.recorrido-shirts-showcase .shirts-carousel-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:10px 0 7px;
}

.recorrido-shirts-showcase .shirts-carousel-status{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--gris);
  font-size:.76rem;
  font-weight:700;
}

.recorrido-shirts-showcase .shirts-carousel-status strong{
  color:var(--verde);
  font-family:var(--titular);
  font-size:.92rem;
}

.recorrido-shirts-showcase .shirts-carousel-actions{
  display:flex;
  gap:8px;
}

.recorrido-shirts-showcase .shirts-carousel-btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(0,113,82,.24);
  background:rgba(0,113,82,.06);
  color:var(--verde);
  cursor:pointer;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

.recorrido-shirts-showcase .shirts-carousel-btn:hover{
  color:var(--hueso);
  background:var(--verde);
  transform:translateY(-2px);
}

.recorrido-shirts-showcase .shirts-carousel-btn:disabled{
  opacity:.30;
  cursor:default;
  transform:none;
}

.recorrido-shirts-showcase .shirts-carousel-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.recorrido-shirts-hint{
  margin:5px 0 5px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--gris) !important;
  font-size:.68rem !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* Ventana del carrusel */
.recorrido-shirts-panels{
  overflow:hidden;
  margin-inline:-20px;
  padding-inline:20px;
  padding-block:2px 8px;
}

.recorrido-shirts-track{
  display:flex !important;
  align-items:center !important;
  gap:clamp(10px,1.5vw,16px) !important;
  width:100%;
  margin:0 !important;
  padding:12px max(7vw,38px) 18px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:50%;
  scroll-behavior:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none !important;
  cursor:grab;
  perspective:1100px;
}

.recorrido-shirts-track::-webkit-scrollbar{
  display:none !important;
}

.recorrido-shirts-track.is-grabbing{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}

/* Tarjeta: misma profundidad de Memoria Gráfica, pero más pequeña */
.recorrido-shirt-card{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex:0 0 clamp(230px,26vw,320px) !important;
  width:clamp(230px,26vw,320px) !important;
  aspect-ratio:4 / 3;
  margin:0 !important;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  overflow:hidden;
  border:1px solid rgba(0,113,82,.14);
  border-radius:15px;
  background:#f6f6f2;
  box-shadow:0 16px 38px -24px rgba(20,40,34,.48);
  transform-style:preserve-3d;
  transform-origin:center center;
  will-change:transform,opacity;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    opacity .15s linear;
}

.recorrido-shirt-card.is-shirt-active{
  border-color:rgba(0,113,82,.56);
  box-shadow:
    0 22px 48px -25px rgba(20,40,34,.52),
    0 0 0 1px rgba(0,113,82,.08);
}

.recorrido-shirt-card img{
  width:100%;
  height:100% !important;
  min-height:0 !important;
  padding:5px !important;
  display:block;
  object-fit:contain !important;
  object-position:center center !important;
  background:
    radial-gradient(circle at 50% 40%,#fff 0%,#f5f5f0 100%) !important;
  transform:scale(1) !important;
  cursor:zoom-in !important;
  -webkit-user-drag:none;
  user-select:none;
}

.recorrido-shirt-card.is-shirt-active img{
  transform:scale(1.018) !important;
}

/* Pie sobre la imagen, igual que la Memoria Gráfica */
.recorrido-shirt-card figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  margin:0;
  padding:32px 12px 9px;
  color:#fff;
  background:linear-gradient(to top,rgba(4,34,26,.82),transparent);
  font-size:.68rem;
  font-weight:800;
  line-height:1.25;
  pointer-events:none;
}

/* Indicador de que se puede ampliar */
.recorrido-shirt-card::after{
  content:"↗";
  position:absolute;
  top:9px;
  right:9px;
  z-index:4;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(0,113,82,.86);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 6px 18px rgba(20,40,34,.20);
  opacity:.80;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}

.recorrido-shirt-card:hover::after,
.recorrido-shirt-card.is-shirt-active::after{
  opacity:1;
  transform:scale(1.05);
}

/* Barra de progreso tricolor, igual a Memoria Gráfica */
.recorrido-shirts-showcase .shirts-carousel-progress{
  height:3px;
  margin-top:1px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(0,113,82,.10);
}

.recorrido-shirts-showcase .shirts-carousel-progress > span{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--verde),#d9ddd6 50%,var(--rojo));
  transition:width .12s linear;
}

@media (max-width:900px){
  .recorrido-shirts-panels{
    margin-inline:-18px;
    padding-inline:18px;
  }

  .recorrido-shirts-track{
    padding-inline:9vw !important;
  }

  .recorrido-shirt-card{
    flex-basis:min(62vw,300px) !important;
    width:min(62vw,300px) !important;
  }
}

@media (max-width:620px){
  .recorrido-shirts-showcase{
    margin:15px 0 26px !important;
    padding:14px 12px 13px !important;
    border-radius:14px;
  }

  .recorrido-shirts-header h3{
    font-size:1rem !important;
  }

  .recorrido-shirts-header p{
    display:none;
  }

  .recorrido-shirts-showcase .shirts-carousel-controls{
    margin:7px 0 3px;
  }

  .recorrido-shirts-showcase .shirts-carousel-btn{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .recorrido-shirts-hint{
    font-size:.64rem !important;
  }

  .recorrido-shirts-panels{
    margin-inline:-12px;
    padding-inline:12px;
  }

  .recorrido-shirts-track{
    gap:10px !important;
    padding:8px 11vw 15px !important;
    scroll-padding-inline:11vw;
    touch-action:pan-x pan-y;
  }

  .recorrido-shirt-card{
    flex:0 0 74vw !important;
    width:74vw !important;
    max-width:285px !important;
    border-radius:14px;
  }

  .recorrido-shirt-card figcaption{
    padding:28px 10px 8px;
    font-size:.64rem;
  }
}

@media (max-width:390px){
  .recorrido-shirt-card{
    flex-basis:78vw !important;
    width:78vw !important;
    max-width:275px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .recorrido-shirt-card{
    transform:none !important;
    opacity:1 !important;
    transition:none !important;
  }
}


/* ============================================================
   HISTORIA · FONDO MURAL + TARJETAS BLANCO/VERDE
   Solo modifica la apariencia visual de #historia.
   NO cambia estructura, textos, medidas de grid ni paleta.
   ============================================================ */

/* Usa la misma imagen mural.jpg que ya está en la portada. */
#historia.story-chapter--independencia{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--hueso);
}

/* Capa fotográfica de fondo, suave para mantener legibilidad. */
#historia.story-chapter--independencia::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(247,248,248,.90) 0%,
      rgba(247,248,248,.82) 42%,
      rgba(247,248,248,.88) 100%
    ),
    url("../images/backgrounds/mural.webp") center 35% / cover no-repeat;
}

/* Velo sutil en verde institucional para integrar la fotografía
   sin cambiar la paleta oficial. */
#historia.story-chapter--independencia::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 82% 22%,
      rgba(3,105,77,.10) 0%,
      rgba(3,105,77,.045) 34%,
      rgba(3,105,77,0) 66%
    ),
    linear-gradient(
      90deg,
      rgba(247,248,248,.35) 0%,
      rgba(3,105,77,.025) 58%,
      rgba(3,105,77,.065) 100%
    );
}

/* Mantiene todo el contenido por encima del fondo. */
#historia.story-chapter--independencia > .wrap{
  position:relative;
  z-index:1;
}

/* Recuadros blancos con un degradado casi imperceptible hacia
   el verde Bottle Green, usando únicamente la paleta existente. */
#historia .story-context-card,
#historia .story-doc-card,
#historia .story-timeline article{
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.97) 0%,
      rgba(247,248,248,.94) 56%,
      rgba(3,105,77,.085) 100%
    );
  border-color:rgba(3,105,77,.16);
  box-shadow:
    0 10px 28px -18px rgba(3,105,77,.24),
    0 2px 8px -2px rgba(26,26,24,.08);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

/* Los documentos conservan su imagen limpia, pero el área de pie
   adquiere el mismo acabado blanco/verde. */
#historia .story-doc-card img{
  background:
    linear-gradient(
      145deg,
      rgba(247,248,248,.98),
      rgba(3,105,77,.055)
    );
}

#historia .story-doc-card figcaption{
  background:
    linear-gradient(
      115deg,
      rgba(247,248,248,.98) 0%,
      rgba(247,248,248,.95) 68%,
      rgba(3,105,77,.075) 100%
    );
}

/* Línea de tiempo: deja una ligera presencia verde en la esquina,
   sin cambiar posición, dimensiones ni tipografía. */
#historia .story-timeline article{
  position:relative;
  overflow:hidden;
}

#historia .story-timeline article::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-42px;
  bottom:-48px;
  border-radius:50%;
  background:rgba(3,105,77,.07);
  pointer-events:none;
}

/* El bloque verde de fecha clave permanece con su color institucional,
   solo recibe un halo más integrado con el nuevo fondo. */
#historia .story-key-date{
  box-shadow:
    0 16px 34px -18px rgba(3,105,77,.48),
    var(--shadow-green);
}

/* En móvil se reduce la fotografía de fondo para mantener contraste
   y rendimiento, sin modificar la estructura responsive existente. */
@media (max-width:700px){
  #historia.story-chapter--independencia::before{
    background:
      linear-gradient(
        180deg,
        rgba(247,248,248,.93) 0%,
        rgba(247,248,248,.86) 48%,
        rgba(247,248,248,.92) 100%
      ),
      url("../images/backgrounds/mural.webp") center top / cover no-repeat;
  }

  #historia .story-context-card,
  #historia .story-doc-card,
  #historia .story-timeline article{
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
}

/* Accesibilidad / compatibilidad: si el navegador no soporta blur,
   el degradado ya garantiza suficiente contraste. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #historia .story-context-card,
  #historia .story-doc-card,
  #historia .story-timeline article{
    background:
      linear-gradient(
        135deg,
        rgba(247,248,248,.99) 0%,
        rgba(247,248,248,.97) 62%,
        rgba(3,105,77,.09) 100%
      );
  }
}


/* ============================================================
   AJUSTE FINAL · MURAL + RECUADROS BLANCO/VERDE + MAPA
   - No cambia estructura ni distribución.
   - Mantiene la paleta Valentine Red / Bottle Green / Desert Storm.
   - Usa mural.jpg como fondo de las secciones claras.
   ============================================================ */

/* ---------- Mural de fondo en las secciones claras ---------- */
#introduccion,
#preparate,
#historia,
#museo,
#recorrido,
#programa{
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

#introduccion::before,
#preparate::before,
#historia::before,
#museo::before,
#recorrido::before,
#programa::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(247,248,248,.87) 0%,
      rgba(247,248,248,.80) 48%,
      rgba(247,248,248,.88) 100%
    ),
    url("../images/backgrounds/mural.webp") center center / cover fixed no-repeat;
}

#introduccion::after,
#preparate::after,
#historia::after,
#museo::after,
#recorrido::after,
#programa::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(3,105,77,.11) 0%,
      rgba(3,105,77,.045) 35%,
      rgba(3,105,77,0) 66%
    ),
    linear-gradient(
      90deg,
      rgba(247,248,248,.20) 0%,
      rgba(3,105,77,.025) 56%,
      rgba(247,248,248,.18) 100%
    );
}

/* Evita que pseudo-elementos previos de Historia/Recorrido
   tapen el nuevo mural; mantiene sus líneas decorativas. */
#historia > .wrap,
#recorrido > .wrap,
#programa > .wrap,
#museo > .wrap,
#introduccion > .wrap,
#preparate > .wrap{
  position:relative;
  z-index:1;
}

/* ---------- Acabado de los recuadros: blanco difuminado a verde ---------- */
#historia .story-context-card,
#historia .story-doc-card,
#historia .story-timeline article,

#museo .story-media,
#museo .story-doc-card,
#museo .kuauhtototl-story-card,
#museo .bandera-story-timeline article,
#museo .bandera-researcher-card,

#recorrido .hymn-annex,
#recorrido .recorrido-origin-story,
#recorrido .recorrido-origin-media,
#recorrido .recorrido-shirts-showcase,
#recorrido .route-stats,
#recorrido .timeline-item,
#recorrido .route-map-badge,
#recorrido .route-map-frame,
#recorrido .route-legend-item,

#programa .agenda-date-badge,
#programa .program-shirt-card,
#programa .program-authority-card,
#programa .agenda-item{
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.96) 0%,
      rgba(247,248,248,.92) 60%,
      rgba(3,105,77,.115) 100%
    ) !important;
  border-color: rgba(3,105,77,.18) !important;
  box-shadow:
    0 14px 34px -24px rgba(3,105,77,.42),
    0 2px 10px -4px rgba(26,26,24,.10) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.04);
  backdrop-filter: blur(7px) saturate(1.04);
}

/* Las imágenes/documentos conservan su apariencia, solo su base
   toma un velo muy sutil verde/blanco. */
#historia .story-doc-card img,
#museo .story-media img,
#museo .story-doc-card img,
#recorrido .recorrido-origin-media img,
#recorrido .recorrido-shirt-card img,
#programa .program-shirt-card img,
#programa .program-authority-photo img{
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(247,248,248,.99) 0%,
      rgba(247,248,248,.95) 58%,
      rgba(3,105,77,.07) 100%
    ) !important;
}

/* Los pies de tarjetas también reciben el difuminado sin cambiar tipografía. */
#historia .story-doc-card figcaption,
#museo .story-media figcaption,
#museo .story-doc-card figcaption,
#programa .program-shirt-card figcaption{
  background:
    linear-gradient(
      110deg,
      rgba(247,248,248,.98) 0%,
      rgba(247,248,248,.94) 72%,
      rgba(3,105,77,.09) 100%
    ) !important;
}

/* ---------- Mapa: marco integrado y estable ---------- */
#recorrido .route-map-frame{
  padding: 3px !important;
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.98) 0%,
      rgba(3,105,77,.28) 50%,
      rgba(247,248,248,.96) 100%
    ) !important;
}

#recorrido .route-map-wrap{
  background: rgba(247,248,248,.94) !important;
}

#routeMap{
  position:relative;
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.98),
      rgba(3,105,77,.08)
    ) !important;
}

/* Estado de carga. Se quita automáticamente al cargar los mosaicos. */
#routeMap.is-map-loading::after{
  content:"Cargando mapa…";
  position:absolute;
  inset:0;
  z-index:900;
  display:grid;
  place-items:center;
  color:var(--verde-dark);
  font-family:var(--titular);
  font-weight:800;
  font-size:.9rem;
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.94),
      rgba(3,105,77,.10)
    );
  pointer-events:none;
}

/* Fallback visible solo si Leaflet o los mapas externos no cargan. */
.route-map-fallback{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:34px;
  text-align:center;
  color:var(--tinta);
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.97),
      rgba(3,105,77,.11)
    );
}

.route-map-fallback > div{
  max-width:540px;
}

.route-map-fallback strong{
  display:block;
  margin-bottom:8px;
  color:var(--verde-dark);
  font-family:var(--titular);
  font-size:1.1rem;
}

.route-map-fallback p{
  margin:0 0 16px;
  color:var(--tinta-suave);
}

.route-map-fallback a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 16px;
  border-radius:999px;
  color:var(--hueso);
  background:var(--verde);
  text-decoration:none;
  font-weight:800;
}

/* Mejor comportamiento de Leaflet al estar dentro de secciones animadas. */
#routeMap .leaflet-container,
#routeMap .leaflet-pane,
#routeMap .leaflet-map-pane{
  max-width:none !important;
}

#routeMap:focus-visible{
  outline:3px solid rgba(3,105,77,.35);
  outline-offset:3px;
}

/* En móvil evitamos background-attachment: fixed por rendimiento. */
@media (max-width:700px){
  #introduccion::before,
  #preparate::before,
  #historia::before,
  #museo::before,
  #recorrido::before,
  #programa::before{
    background:
      linear-gradient(
        180deg,
        rgba(247,248,248,.91) 0%,
        rgba(247,248,248,.84) 50%,
        rgba(247,248,248,.92) 100%
      ),
      url("../images/backgrounds/mural.webp") center center / cover scroll no-repeat;
  }

  #historia .story-context-card,
  #historia .story-doc-card,
  #historia .story-timeline article,
  #museo .story-media,
  #museo .story-doc-card,
  #museo .kuauhtototl-story-card,
  #museo .bandera-story-timeline article,
  #museo .bandera-researcher-card,
  #recorrido .hymn-annex,
  #recorrido .recorrido-origin-story,
  #recorrido .recorrido-origin-media,
  #recorrido .recorrido-shirts-showcase,
  #recorrido .route-stats,
  #recorrido .timeline-item,
  #recorrido .route-map-badge,
  #recorrido .route-map-frame,
  #recorrido .route-legend-item,
  #programa .agenda-date-badge,
  #programa .program-shirt-card,
  #programa .program-authority-card,
  #programa .agenda-item{
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}


/* ============================================================
   CORRECCIÓN FINAL · LEYENDA DEL KUAUHTOTOTL
   El fondo conserva el blanco/verde; únicamente se corrige
   el contraste del texto para hacerlo completamente legible.
   ============================================================ */

#museo .bandera-legend-card,
#museo .kuauhtototl-story-card{
  color: var(--tinta) !important;
}

#museo .bandera-legend-card > div > span,
#museo .kuauhtototl-story-card > div > span{
  color: var(--verde-dark) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#museo .bandera-legend-card h3,
#museo .kuauhtototl-story-card h3{
  color: var(--tinta) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#museo .bandera-legend-card p,
#museo .kuauhtototl-story-card p{
  color: var(--tinta-suave) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#museo .bandera-legend-card p strong,
#museo .kuauhtototl-story-card p strong,
#museo .bandera-legend-card em,
#museo .kuauhtototl-story-card em{
  color: var(--verde-dark) !important;
}

#museo .kuauhtototl-story-mark{
  color: var(--rojo) !important;
  background: rgba(247,248,248,.72) !important;
  border-color: rgba(3,105,77,.18) !important;
}

/* ============================================================
   MAPA · ESTABILIDAD VISUAL
   No cambia el tamaño ni la posición del mapa.
   ============================================================ */

#routeMap{
  min-height: 360px;
  isolation: isolate;
  z-index: 1;
}

#routeMap .leaflet-pane,
#routeMap .leaflet-control{
  z-index: auto;
}

#routeMap .leaflet-map-pane{
  z-index: 200;
}

#routeMap .leaflet-tile-pane{
  z-index: 200;
}

#routeMap .leaflet-overlay-pane{
  z-index: 400;
}

#routeMap .leaflet-marker-pane{
  z-index: 600;
}

#routeMap .leaflet-tooltip-pane{
  z-index: 650;
}

#routeMap .leaflet-popup-pane{
  z-index: 700;
}

#routeMap .leaflet-control-container{
  position: relative;
  z-index: 800;
}

#routeMap .leaflet-tile{
  max-width: none !important;
  max-height: none !important;
}

#routeMap .leaflet-popup-content-wrapper,
#routeMap .leaflet-popup-tip{
  background: var(--hueso);
  color: var(--tinta);
}

#routeMap .leaflet-popup-content{
  margin: 0;
}

#routeMap .leaflet-control-zoom a{
  color: var(--verde-dark);
  background: rgba(247,248,248,.96);
}

#routeMap .leaflet-control-zoom a:hover{
  color: var(--hueso);
  background: var(--verde);
}

/* Si el mapa todavía está calculando dimensiones, no desaparece:
   conserva un fondo legible y estable. */
#routeMap.route-map-ready{
  background: var(--hueso-2) !important;
}

@media (max-width:700px){
  #routeMap{
    min-height: 320px;
  }
}


/* ============================================================
   CORRECCIÓN VISUAL · SECCIONES BLANCAS
   SOLO afecta:
   - Introducción
   - Museo Digital / BANDERA SIERA
   - Recorrido de la Insurgencia
   No modifica estructura, posiciones, tamaños ni paleta.
   ============================================================ */

/* Quitar mural únicamente de estas secciones */
#introduccion,
#museo,
#recorrido{
  background: var(--hueso) !important;
}

/* Anular las capas de mural que se habían agregado */
#introduccion::before,
#introduccion::after,
#museo::before,
#museo::after,
#recorrido::before,
#recorrido::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Texto principal legible */
#introduccion,
#introduccion p,
#introduccion h1,
#introduccion h2,
#introduccion h3,
#introduccion h4,

#museo,
#museo p,
#museo h1,
#museo h2,
#museo h3,
#museo h4,

#recorrido,
#recorrido p,
#recorrido h1,
#recorrido h2,
#recorrido h3,
#recorrido h4{
  color: var(--tinta) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Acentos verdes institucionales */
#introduccion strong,
#museo .story-label,
#museo .eyebrow,
#museo .eyebrow-green,
#recorrido .story-label,
#recorrido .eyebrow,
#recorrido .eyebrow-green{
  color: var(--verde-dark) !important;
}

/* BANDERA SIERA conserva el rojo */
#museo .story-chapter-header h2 span{
  color: var(--rojo) !important;
}

/* Textos secundarios */
#museo .section-lead,
#museo .story-copy p,
#museo .bandera-researcher-copy p,
#museo .bandera-story-timeline p,
#museo .kuauhtototl-story-card p,
#recorrido .section-lead,
#recorrido .recorrido-origin-copy p,
#recorrido .timeline-content p,
#recorrido .route-map-lead{
  color: var(--tinta-suave) !important;
  opacity: 1 !important;
}

/* ============================================================
   LEYENDA DEL KUAUHTOTOTL
   ============================================================ */
#museo .bandera-legend-card,
#museo .kuauhtototl-story-card{
  color: var(--tinta) !important;
}

#museo .bandera-legend-card > div > span,
#museo .kuauhtototl-story-card > div > span{
  color: var(--verde-dark) !important;
  opacity: 1 !important;
}

#museo .bandera-legend-card h3,
#museo .kuauhtototl-story-card h3{
  color: var(--tinta) !important;
  opacity: 1 !important;
}

#museo .bandera-legend-card p,
#museo .kuauhtototl-story-card p{
  color: var(--tinta-suave) !important;
  opacity: 1 !important;
}

/* ============================================================
   ANEXO DEL HIMNO
   Fondo blanco/verde muy suave y texto oscuro.
   ============================================================ */
#recorrido .hymn-annex{
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.99) 0%,
      rgba(247,248,248,.97) 72%,
      rgba(3,105,77,.08) 100%
    ) !important;
  border-color: rgba(3,105,77,.16) !important;
}

#recorrido .hymn-annex-copy,
#recorrido .hymn-annex-copy p,
#recorrido .hymn-annex-copy strong,
#recorrido .hymn-annex-copy h3{
  color: var(--tinta) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#recorrido .hymn-annex-copy .story-label{
  color: var(--verde-dark) !important;
}

#recorrido .hymn-inline-player{
  color-scheme: light;
  background: rgba(247,248,248,.97) !important;
  border-radius: 999px;
}

/* ============================================================
   RECUADROS
   Mantener el acabado blanco difuminado a verde,
   pero ahora sobre fondo blanco.
   ============================================================ */
#museo .story-media,
#museo .story-doc-card,
#museo .kuauhtototl-story-card,
#museo .bandera-story-timeline article,
#museo .bandera-researcher-card,

#recorrido .hymn-annex,
#recorrido .recorrido-origin-story,
#recorrido .recorrido-origin-media,
#recorrido .recorrido-shirts-showcase,
#recorrido .route-stats,
#recorrido .timeline-item,
#recorrido .route-map-badge,
#recorrido .route-map-frame,
#recorrido .route-legend-item{
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.99) 0%,
      rgba(247,248,248,.96) 68%,
      rgba(3,105,77,.085) 100%
    ) !important;
  border-color: rgba(3,105,77,.16) !important;
}

/* En móvil también se mantiene fondo limpio */
@media (max-width:700px){
  #introduccion,
  #museo,
  #recorrido{
    background: var(--hueso) !important;
  }
}


/* ============================================================
   PREPÁRATE PARA EL RECORRIDO · FONDO BLANCO
   Solo modifica el fondo y el contraste de texto de #preparate.
   No cambia estructura, tamaños, posiciones ni paleta.
   ============================================================ */

#preparate{
  background: var(--hueso) !important;
}

/* Elimina únicamente el mural/capas visuales de esta sección */
#preparate::before,
#preparate::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Mantener título y texto completamente legibles */
#preparate .event-promise-simple-title{
  color: var(--verde-dark) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#preparate .event-promise-simple-text,
#preparate .event-promise-simple-text strong{
  color: var(--tinta) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

@media (max-width:700px){
  #preparate{
    background: var(--hueso) !important;
  }
}


/* ============================================================
   CORRECCIÓN FINAL · MOMENTO CENTRAL + BANDERA SIERA
   Solo corrige contraste y visibilidad.
   No modifica estructura, tamaños, posiciones ni paleta.
   ============================================================ */

/* ------------------------------------------------------------
   PROGRAMA · MOMENTO CENTRAL
   Recupera el destaque verde original para que hora, título,
   descripción y etiqueta sean totalmente visibles.
   ------------------------------------------------------------ */
#programa .agenda-item.is-highlight{
  background:
    linear-gradient(
      135deg,
      var(--verde) 0%,
      var(--verde-2) 100%
    ) !important;
  border-color: var(--verde) !important;
  color: var(--hueso) !important;
  box-shadow:
    0 18px 38px -22px rgba(3,105,77,.55),
    var(--shadow-green) !important;
}

#programa .agenda-item.is-highlight .agenda-time,
#programa .agenda-item.is-highlight .agenda-content,
#programa .agenda-item.is-highlight .agenda-content h3,
#programa .agenda-item.is-highlight .agenda-content p{
  color: var(--hueso) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#programa .agenda-item.is-highlight .agenda-time{
  font-weight: 800;
}

#programa .agenda-item.is-highlight .agenda-tag{
  color: var(--hueso) !important;
  background: rgba(247,248,248,.16) !important;
  border: 1px solid rgba(247,248,248,.28);
  opacity: 1 !important;
}

/* ------------------------------------------------------------
   MUSEO · TARJETA PRINCIPAL DE LA BANDERA SIERA
   La imagen se muestra completa y sin el velo blanco que la
   estaba ocultando en la parte inferior.
   ------------------------------------------------------------ */
#museo .story-media--flag{
  background: var(--hueso-2) !important;
  border-color: rgba(3,105,77,.18) !important;
}

#museo .story-media--flag img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  background: var(--hueso-2) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* El pie vuelve a ser un degradado oscuro muy discreto,
   para que se lea sin tapar la bandera. */
#museo .story-media--flag figcaption{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 38px 18px 14px !important;
  background:
    linear-gradient(
      to top,
      rgba(4,34,26,.82) 0%,
      rgba(4,34,26,.52) 45%,
      rgba(4,34,26,0) 100%
    ) !important;
  color: var(--hueso) !important;
}

#museo .story-media--flag figcaption strong{
  color: var(--hueso) !important;
  opacity: 1 !important;
}

#museo .story-media--flag figcaption span{
  color: rgba(247,248,248,.88) !important;
  opacity: 1 !important;
}

/* En móvil se conserva exactamente la misma lógica */
@media (max-width:700px){
  #museo .story-media--flag img{
    object-fit: contain !important;
    object-position: center center !important;
  }

  #museo .story-media--flag figcaption{
    padding: 32px 14px 12px !important;
  }
}


/* ============================================================
   MOMENTO CENTRAL · FONDO BLANCO Y LETRAS NEGRAS
   Solo corrige esta tarjeta del programa.
   No modifica estructura, tamaños, posiciones ni otras secciones.
   ============================================================ */

#programa .agenda-item.is-highlight{
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.99) 0%,
      rgba(247,248,248,.97) 72%,
      rgba(3,105,77,.07) 100%
    ) !important;
  border-color: rgba(3,105,77,.16) !important;
  color: var(--tinta) !important;
  box-shadow:
    0 14px 32px -24px rgba(3,105,77,.30),
    0 2px 10px -4px rgba(26,26,24,.10) !important;
}

#programa .agenda-item.is-highlight .agenda-time,
#programa .agenda-item.is-highlight .agenda-content,
#programa .agenda-item.is-highlight .agenda-content h3,
#programa .agenda-item.is-highlight .agenda-content p{
  color: var(--tinta) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#programa .agenda-item.is-highlight .agenda-content p{
  color: var(--tinta-suave) !important;
}

#programa .agenda-item.is-highlight .agenda-tag{
  color: var(--verde-dark) !important;
  background: rgba(3,105,77,.06) !important;
  border: 1px solid rgba(3,105,77,.16) !important;
  opacity: 1 !important;
}


/* ============================================================
   PLAYERAS CONMEMORATIVAS · CARRUSEL COMO MEMORIA GRÁFICA
   Override FINAL.
   SOLO modifica el carrusel de playeras.
   No cambia estructura, textos, mapa, programa ni Memoria Gráfica.
   ============================================================ */

.recorrido-shirts-showcase{
  position:relative !important;
  margin:24px 0 38px !important;
  padding:22px 24px 18px !important;
  overflow:hidden !important;
  border:1px solid var(--linea) !important;
  border-radius:18px !important;
  background:var(--hueso) !important;
  box-shadow:var(--shadow-sm) !important;
}

/* Encabezado compacto */
.recorrido-shirts-header{
  display:block !important;
  margin:0 0 8px !important;
}

.recorrido-shirts-header > div{
  max-width:820px !important;
}

.recorrido-shirts-header .story-label{
  color:var(--verde-dark) !important;
}

.recorrido-shirts-header h3{
  margin:4px 0 6px !important;
  color:var(--tinta) !important;
  font-size:clamp(1.25rem,2vw,1.75rem) !important;
  line-height:1.12 !important;
}

.recorrido-shirts-header p{
  margin:0 !important;
  color:var(--tinta-suave) !important;
  font-size:.84rem !important;
  line-height:1.55 !important;
}

/* Ayuda de navegación */
.recorrido-shirts-hint{
  margin:10px 0 7px !important;
  padding:0 !important;
  color:var(--tinta-suave) !important;
  background:transparent !important;
  border:0 !important;
  font-size:.74rem !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}

/* Controles como Memoria Gráfica */
.recorrido-shirts-showcase .shirts-carousel-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin:9px 0 7px !important;
}

.recorrido-shirts-showcase .shirts-carousel-status{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:var(--tinta-suave) !important;
  font-size:.8rem !important;
  font-weight:700 !important;
}

.recorrido-shirts-showcase .shirts-carousel-status strong{
  color:var(--verde-dark) !important;
  font-family:var(--titular) !important;
  font-size:1rem !important;
}

.recorrido-shirts-showcase .shirts-carousel-actions{
  display:flex !important;
  gap:8px !important;
}

.recorrido-shirts-showcase .shirts-carousel-btn{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid rgba(3,105,77,.24) !important;
  border-radius:50% !important;
  color:var(--verde-dark) !important;
  background:rgba(3,105,77,.055) !important;
  cursor:pointer !important;
  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease,
    opacity .18s ease !important;
}

.recorrido-shirts-showcase .shirts-carousel-btn:hover{
  color:var(--hueso) !important;
  background:var(--verde) !important;
  transform:translateY(-2px) !important;
}

.recorrido-shirts-showcase .shirts-carousel-btn:disabled{
  opacity:.28 !important;
  cursor:default !important;
  transform:none !important;
}

.recorrido-shirts-showcase .shirts-carousel-btn svg{
  width:19px !important;
  height:19px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Ventana: misma sensación inmersiva de Memoria Gráfica */
.recorrido-shirts-panels{
  overflow:hidden !important;
  margin-inline:-24px !important;
  padding-inline:24px !important;
  padding-block:8px 14px !important;
}

.recorrido-shirts-track{
  display:flex !important;
  align-items:center !important;
  gap:clamp(14px,2vw,24px) !important;
  width:100% !important;
  margin:0 !important;
  padding:18px max(7vw,42px) 26px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-padding-inline:50% !important;
  overscroll-behavior-inline:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  cursor:grab !important;
  perspective:1200px !important;
}

.recorrido-shirts-track::-webkit-scrollbar{
  display:none !important;
}

.recorrido-shirts-track.is-grabbing{
  cursor:grabbing !important;
  scroll-snap-type:none !important;
  user-select:none !important;
}

/* Tarjetas: mismas proporciones del carrusel de Memoria Gráfica */
.recorrido-shirt-card{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 clamp(300px,34vw,470px) !important;
  width:clamp(300px,34vw,470px) !important;
  max-width:none !important;
  aspect-ratio:4 / 3 !important;
  margin:0 !important;
  overflow:hidden !important;
  scroll-snap-align:center !important;
  scroll-snap-stop:always !important;
  border:1px solid rgba(3,105,77,.15) !important;
  border-radius:18px !important;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255,255,255,1) 0%,
      rgba(247,248,248,.97) 60%,
      rgba(3,105,77,.07) 100%
    ) !important;
  box-shadow:0 20px 55px -32px rgba(3,105,77,.48) !important;
  transform-style:preserve-3d !important;
  transform-origin:center center !important;
  will-change:transform,opacity !important;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    opacity .15s linear !important;
}

/* Playera activa en el centro */
.recorrido-shirt-card.is-shirt-active{
  border-color:rgba(3,105,77,.52) !important;
  box-shadow:
    0 28px 62px -32px rgba(3,105,77,.60),
    0 0 0 1px rgba(212,31,53,.12) !important;
}

/* La foto siempre completa y centrada */
.recorrido-shirt-card img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:auto !important;
  padding:7px !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
  transform:scale(1) !important;
  cursor:zoom-in !important;
  -webkit-user-drag:none !important;
  user-select:none !important;
  transition:transform .45s cubic-bezier(.2,.8,.2,1) !important;
}

/* Misma presencia de la foto central que Memoria Gráfica */
.recorrido-shirt-card.is-shirt-active img{
  transform:scale(1.025) !important;
}

/* Nombre sobre un degradado inferior */
.recorrido-shirt-card figcaption{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:3 !important;
  margin:0 !important;
  padding:48px 16px 13px !important;
  color:#fff !important;
  background:
    linear-gradient(
      to top,
      rgba(4,34,26,.90) 0%,
      rgba(4,34,26,.65) 48%,
      rgba(4,34,26,0) 100%
    ) !important;
  font-size:.8rem !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  letter-spacing:.012em !important;
  pointer-events:none !important;
}

/* Indicador para abrir la playera */
.recorrido-shirt-card::after{
  content:"↗" !important;
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:4 !important;
  width:34px !important;
  height:34px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  color:#fff !important;
  background:rgba(3,105,77,.86) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:0 8px 24px rgba(3,105,77,.22) !important;
  opacity:.82 !important;
  pointer-events:none !important;
  transition:opacity .2s ease,transform .2s ease !important;
}

.recorrido-shirt-card:hover::after,
.recorrido-shirt-card.is-shirt-active::after{
  opacity:1 !important;
  transform:scale(1.06) !important;
}

/* Barra de progreso igual al carrusel inferior */
.recorrido-shirts-showcase .shirts-carousel-progress{
  height:4px !important;
  margin-top:6px !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:rgba(3,105,77,.12) !important;
}

.recorrido-shirts-showcase .shirts-carousel-progress > span{
  display:block !important;
  height:100% !important;
  border-radius:inherit !important;
  background:
    linear-gradient(
      90deg,
      var(--verde),
      var(--hueso) 50%,
      var(--rojo)
    ) !important;
  transition:width .12s linear !important;
}

/* El lightbox ya existente abre también las playeras.
   Solo reforzamos la visualización de la imagen ampliada. */
.lightbox-overlay img{
  width:auto !important;
  height:auto !important;
  max-width:min(94vw,1400px) !important;
  max-height:90vh !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:auto !important;
  display:block !important;
}

/* Tablet */
@media (max-width:900px){
  .recorrido-shirts-panels{
    margin-inline:-20px !important;
    padding-inline:20px !important;
  }

  .recorrido-shirts-track{
    gap:16px !important;
    padding-inline:9vw !important;
  }

  .recorrido-shirt-card{
    flex:0 0 min(72vw,430px) !important;
    width:min(72vw,430px) !important;
  }
}

/* Móvil */
@media (max-width:620px){
  .recorrido-shirts-showcase{
    margin:18px 0 30px !important;
    padding:16px 14px 14px !important;
    border-radius:15px !important;
  }

  .recorrido-shirts-header h3{
    font-size:1.08rem !important;
  }

  .recorrido-shirts-header p{
    display:none !important;
  }

  .recorrido-shirts-hint{
    font-size:.7rem !important;
  }

  .recorrido-shirts-showcase .shirts-carousel-btn{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }

  .recorrido-shirts-panels{
    margin-inline:-14px !important;
    padding-inline:14px !important;
  }

  .recorrido-shirts-track{
    gap:12px !important;
    padding:12px 10vw 22px !important;
    scroll-padding-inline:10vw !important;
    touch-action:pan-x pan-y !important;
  }

  .recorrido-shirt-card{
    flex:0 0 78vw !important;
    width:78vw !important;
    max-width:340px !important;
    border-radius:15px !important;
  }

  .recorrido-shirt-card figcaption{
    padding:44px 14px 12px !important;
    font-size:.75rem !important;
  }

  .recorrido-shirt-card::after{
    width:30px !important;
    height:30px !important;
    top:10px !important;
    right:10px !important;
    font-size:.82rem !important;
  }
}

@media (max-width:390px){
  .recorrido-shirt-card{
    flex-basis:82vw !important;
    width:82vw !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .recorrido-shirt-card{
    transform:none !important;
    opacity:1 !important;
    transition:none !important;
  }

  .recorrido-shirt-card img{
    transform:none !important;
    transition:none !important;
  }
}


/* ============================================================
   CORRECCIÓN · LIBRO DE CAROLINA BAUR
   Solo mejora la segunda imagen del bloque "Redescubrimiento documental".
   No cambia grid, tamaños ni estructura.
   ============================================================ */

#museo .bandera-book-media{
  position:relative !important;
  overflow:hidden !important;
  background:var(--hueso-2) !important;
}

#museo .bandera-book-media img{
  width:100% !important;
  height:100% !important;
  min-height:270px !important;
  padding:0 !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:var(--hueso-2) !important;
  opacity:1 !important;
  filter:none !important;
}

/* El pie ya no tapa la mitad de la fotografía. */
#museo .bandera-book-media figcaption{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:3 !important;
  padding:34px 14px 10px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  color:var(--hueso) !important;
  background:
    linear-gradient(
      to top,
      rgba(4,34,26,.86) 0%,
      rgba(4,34,26,.56) 46%,
      rgba(4,34,26,0) 100%
    ) !important;
  pointer-events:none !important;
}

#museo .bandera-book-media figcaption strong{
  color:var(--hueso) !important;
  opacity:1 !important;
}

#museo .bandera-book-media figcaption span{
  color:rgba(247,248,248,.88) !important;
  opacity:1 !important;
}

/* ============================================================
   CARRUSELES · CLICK PARA AMPLIAR EN PC Y MÓVIL
   Solo refuerza la interacción existente.
   ============================================================ */

#galeria .gallery-item img,
#recorrido .recorrido-shirt-card img{
  cursor:zoom-in !important;
  pointer-events:auto !important;
  -webkit-user-drag:none !important;
  user-select:none !important;
}

#galeria .gallery-item img:focus-visible,
#recorrido .recorrido-shirt-card img:focus-visible{
  outline:3px solid rgba(3,105,77,.36) !important;
  outline-offset:-4px !important;
}

/* Lightbox: imagen completa y centrada en cualquier pantalla. */
.lightbox-overlay{
  padding:clamp(14px,3.5vw,48px) !important;
  overflow:hidden !important;
  touch-action:none !important;
}

.lightbox-overlay img{
  width:auto !important;
  height:auto !important;
  max-width:min(95vw,1500px) !important;
  max-height:90vh !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:auto !important;
  display:block !important;
  border-radius:8px !important;
}

.lightbox-close{
  z-index:5 !important;
}

/* En móvil el botón cerrar queda cómodo y la foto usa casi toda la pantalla. */
@media (max-width:620px){
  #museo .bandera-book-media img{
    min-height:240px !important;
  }

  #museo .bandera-book-media figcaption{
    padding:30px 12px 9px !important;
  }

  .lightbox-overlay{
    padding:58px 10px 16px !important;
  }

  .lightbox-overlay img{
    max-width:96vw !important;
    max-height:84vh !important;
  }

  .lightbox-close{
    top:10px !important;
    right:10px !important;
    width:46px !important;
    height:46px !important;
  }
}


/* ===== Ajuste puntual: programa público con playera visible ===== */
#programa .agenda-header.agenda-header-centered{
  grid-template-columns:1fr;
  justify-items:center;
  align-items:center;
  gap:20px;
  text-align:center;
}
#programa .agenda-intro-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:980px;
}
#programa .agenda-intro-block .eyebrow,
#programa .agenda-intro-block .eyebrow-rule{
  margin-inline:auto;
}
#programa .agenda-intro-block h2{
  margin:10px 0 0;
  font-size:clamp(2.4rem,4.8vw,4.35rem);
  line-height:1.04;
  text-align:center;
}
#programa .agenda-playera-block{
  width:min(100%, 860px);
  margin:0 auto;
  display:grid;
  gap:12px;
  justify-items:center;
}
#programa .agenda-playera-block .agenda-date-badge{
  width:min(100%, 360px);
  justify-content:center;
  text-align:center;
}
#programa .agenda-playera-block .agenda-date-badge strong{
  font-size:1.18rem;
}
#programa .agenda-playera-block .agenda-date-badge span{
  font-size:.95rem;
}
#programa .program-shirt-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}
#programa .program-shirt-info strong{
  font-family:var(--titular);
  font-size:clamp(1.05rem,2.1vw,1.45rem);
  color:var(--tinta);
}
#programa .program-shirt-info span{
  color:var(--tinta-suave);
  font-size:clamp(.88rem,1.65vw,1.02rem);
}
#programa .program-shirt-card{
  width:min(100%, 760px);
  margin:0 auto;
}
#programa .program-shirt-card img{
  width:100%;
  height:clamp(340px, 43vw, 600px);
  object-fit:contain;
}
#programa .program-shirt-card figcaption{
  display:none;
}
#programa .agenda-program-copy{
  max-width:950px;
  margin:2px auto 0;
  text-align:center;
  font-size:clamp(1rem,1.9vw,1.18rem);
}
@media (max-width:700px){
  #programa .agenda-intro-block h2{
    font-size:clamp(1.9rem,8.4vw,2.9rem);
  }
  #programa .agenda-playera-block{
    width:100%;
  }
  #programa .agenda-playera-block .agenda-date-badge{
    width:min(100%, 320px);
  }
  #programa .program-shirt-card img{
    height:clamp(280px, 72vw, 430px);
  }
  #programa .agenda-program-copy{
    font-size:1rem;
  }
}


/* ============================================================
   PROGRAMA SIERA 2026 · integración de datos oficiales
   Mantiene la estructura visual existente; solo añade el contenido
   desplegable de límites/protocolo y amplía datos de los popups del mapa.
   ============================================================ */
.program-official-details{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
}
.program-official-card{
  border:1px solid var(--linea);
  border-radius:12px;
  background:var(--hueso);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.program-official-card summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  color:var(--verde-dark);
  font-family:var(--titular);
  font-weight:800;
  font-size:.92rem;
  position:relative;
}
.program-official-card summary::-webkit-details-marker{display:none}
.program-official-card summary::after{
  content:"+";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--rojo);
  font-size:1.25rem;
}
.program-official-card[open] summary::after{content:"–"}
.program-official-card[open] summary{border-bottom:1px solid var(--linea)}
.program-route-limits{
  display:grid;
  gap:0;
  padding:4px 18px 16px;
}
.program-route-limits > div{
  display:grid;
  grid-template-columns:145px minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--linea);
  font-size:.78rem;
}
.program-route-limits > div:last-child{border-bottom:none}
.program-route-limits strong{color:var(--tinta);font-family:var(--titular)}
.program-route-limits span{color:var(--tinta-suave)}
.program-protocol-list{
  margin:0;
  padding:16px 22px 8px 38px;
  color:var(--tinta-suave);
  font-size:.82rem;
}
.program-protocol-list li{margin-bottom:9px}
.program-protocol-note{
  margin:4px 18px 18px;
  padding:11px 13px;
  border-radius:8px;
  background:rgba(3,105,77,.07);
  color:var(--verde-dark);
  font-size:.8rem;
}
.route-popup-meta .route-popup-meta-wide{
  grid-column:1 / -1;
}
@media (max-width:780px){
  .program-official-details{grid-template-columns:1fr}
  .program-route-limits > div{grid-template-columns:1fr;gap:4px}
}


/* ============================================================
   HIMNO A LA BANDERA SIERA · LETRA DESPLEGABLE
   Solo agrega el desplegable debajo del anexo musical.
   No modifica ninguna otra sección.
   ============================================================ */

#recorrido .hymn-lyrics-details{
  width:100%;
  margin:-12px 0 34px;
  border:1px solid rgba(3,105,77,.16);
  border-radius:16px;
  background:
    linear-gradient(
      135deg,
      rgba(247,248,248,.99) 0%,
      rgba(247,248,248,.97) 74%,
      rgba(3,105,77,.07) 100%
    );
  box-shadow:0 14px 34px -28px rgba(3,105,77,.35);
  overflow:hidden;
}

#recorrido .hymn-lyrics-details > summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:72px;
  padding:16px 20px;
  cursor:pointer;
  user-select:none;
  color:var(--tinta);
}

#recorrido .hymn-lyrics-details > summary::-webkit-details-marker{
  display:none;
}

#recorrido .hymn-lyrics-summary-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--hueso);
  background:var(--verde);
  font-family:var(--subtitulo);
  font-size:1.15rem;
  font-weight:700;
  box-shadow:var(--shadow-green);
}

#recorrido .hymn-lyrics-summary-copy{
  min-width:0;
  display:flex;
  flex:1;
  flex-direction:column;
  gap:2px;
  text-align:left;
}

#recorrido .hymn-lyrics-summary-copy strong{
  color:var(--tinta);
  font-family:var(--titular);
  font-size:1rem;
  line-height:1.25;
}

#recorrido .hymn-lyrics-summary-copy small{
  color:var(--tinta-suave);
  font-size:.78rem;
}

#recorrido .hymn-lyrics-chevron{
  flex:0 0 auto;
  color:var(--verde-dark);
  font-size:1.45rem;
  line-height:1;
  transition:transform .22s ease;
}

#recorrido .hymn-lyrics-details[open] .hymn-lyrics-chevron{
  transform:rotate(180deg);
}

#recorrido .hymn-lyrics-panel{
  padding:2px 22px 24px;
  border-top:1px solid rgba(3,105,77,.11);
}

#recorrido .hymn-lyrics-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 22px;
  padding:20px 0 14px;
}

#recorrido .hymn-lyrics-heading span{
  color:var(--verde-dark);
  font-family:var(--titular);
  font-size:clamp(1.1rem,2vw,1.35rem);
  font-weight:800;
}

#recorrido .hymn-lyrics-heading strong{
  color:var(--tinta-suave);
  font-size:.8rem;
}

#recorrido .hymn-lyrics-stanzas{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 28px;
}

#recorrido .hymn-lyrics-stanzas p{
  margin:0;
  padding:16px 18px;
  border-left:3px solid rgba(3,105,77,.34);
  border-radius:0 10px 10px 0;
  background:rgba(247,248,248,.72);
  color:var(--tinta);
  font-family:var(--subtitulo);
  font-size:.95rem;
  line-height:1.72;
}

@media (max-width:700px){
  #recorrido .hymn-lyrics-details{
    margin:-8px 0 28px;
    border-radius:14px;
  }

  #recorrido .hymn-lyrics-details > summary{
    min-height:66px;
    padding:14px 15px;
    gap:11px;
  }

  #recorrido .hymn-lyrics-summary-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  #recorrido .hymn-lyrics-summary-copy strong{
    font-size:.92rem;
  }

  #recorrido .hymn-lyrics-summary-copy small{
    font-size:.7rem;
  }

  #recorrido .hymn-lyrics-panel{
    padding:2px 15px 18px;
  }

  #recorrido .hymn-lyrics-heading{
    display:block;
    padding:16px 0 12px;
  }

  #recorrido .hymn-lyrics-heading strong{
    display:block;
    margin-top:4px;
  }

  #recorrido .hymn-lyrics-stanzas{
    grid-template-columns:1fr;
    gap:10px;
  }

  #recorrido .hymn-lyrics-stanzas p{
    padding:13px 14px;
    font-size:.9rem;
    line-height:1.65;
  }
}

@media (prefers-reduced-motion:reduce){
  #recorrido .hymn-lyrics-chevron{
    transition:none;
  }
}


/* ============================================================
   ACTIVIDADES EN ZONGOLICA · 15 DE SEPTIEMBRE DE 2026
   Agregado puntual. No modifica la estructura existente.
   ============================================================ */
#programa .zongolica-local-program{
  margin:42px 0 30px;
  padding:clamp(20px,3vw,34px);
  border:1px solid rgba(3,105,77,.14);
  border-radius:20px;
  background:rgba(247,248,248,.96);
  box-shadow:0 18px 42px -34px rgba(3,105,77,.38);
}

#programa .zongolica-local-program-header{
  max-width:930px;
  margin:0 auto 24px;
  text-align:center;
}

#programa .zongolica-local-program-header .eyebrow,
#programa .zongolica-local-program-header .eyebrow-rule{
  margin-inline:auto;
}

#programa .zongolica-local-program-header h3{
  margin:10px 0 8px;
  color:var(--tinta);
  font-size:clamp(1.65rem,3vw,2.5rem);
  line-height:1.08;
}

#programa .zongolica-local-program-header > p:last-child{
  margin:0 auto;
  max-width:780px;
  color:var(--tinta-suave);
  font-size:1rem;
  line-height:1.65;
}

#programa .zongolica-local-agenda{
  display:grid;
  gap:10px;
}

#programa .zongolica-local-item{
  display:grid;
  grid-template-columns:128px minmax(0,1fr) minmax(150px,220px);
  gap:18px;
  align-items:start;
  padding:18px 20px;
  border:1px solid rgba(3,105,77,.12);
  border-radius:14px;
  background:linear-gradient(135deg,#fff 0%,rgba(247,248,248,.98) 72%,rgba(3,105,77,.055) 100%);
}

#programa .zongolica-local-item > time{
  color:var(--verde-dark);
  font-family:var(--titular);
  font-weight:800;
  font-size:.95rem;
  line-height:1.35;
}

#programa .zongolica-local-main h4,
#programa .zongolica-literary-heading h4,
#programa .zongolica-final-events h4{
  margin:0 0 6px;
  color:var(--tinta);
  font-family:var(--titular);
  font-size:1rem;
  line-height:1.35;
}

#programa .zongolica-local-main p,
#programa .zongolica-literary-heading p,
#programa .zongolica-final-events p{
  margin:0 0 7px;
  color:var(--tinta-suave);
  font-size:.88rem;
  line-height:1.55;
}

#programa .zongolica-local-main p strong,
#programa .zongolica-literary-heading p strong,
#programa .zongolica-final-events p strong{
  color:var(--tinta);
}

#programa .zongolica-local-responsible{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-left:16px;
  border-left:1px solid rgba(3,105,77,.13);
}

#programa .zongolica-local-responsible span{
  color:var(--tinta-suave);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#programa .zongolica-local-responsible strong{
  color:var(--tinta);
  font-size:.82rem;
  line-height:1.4;
}

#programa .zongolica-local-tag{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px;
  border:1px solid rgba(3,105,77,.18);
  border-radius:999px;
  background:rgba(3,105,77,.07);
  color:var(--verde-dark);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

#programa .zongolica-local-tag--red{
  color:var(--rojo);
  border-color:rgba(212,31,53,.17);
  background:rgba(212,31,53,.06);
}

#programa .zongolica-local-item--compact{
  align-items:center;
  padding-block:14px;
}

#programa .zongolica-local-notes{
  margin-top:10px;
  border-top:1px solid rgba(3,105,77,.11);
}

#programa .zongolica-local-notes summary{
  padding:9px 0 2px;
  color:var(--verde-dark);
  font-size:.76rem;
  font-weight:800;
  cursor:pointer;
}

#programa .zongolica-local-notes > div{
  padding:10px 0 2px;
  color:var(--tinta-suave);
  font-size:.8rem;
  line-height:1.5;
}

#programa .zongolica-local-notes ul{
  margin:8px 0 0 18px;
  padding:0;
}

#programa .zongolica-local-notes li{
  margin:3px 0;
}

#programa .zongolica-literary-program{
  margin-top:22px;
  padding:22px;
  border:1px solid rgba(212,31,53,.13);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.99),rgba(247,248,248,.97));
}

#programa .zongolica-literary-heading{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:14px;
}

#programa .zongolica-literary-heading > div > span{
  display:block;
  margin-bottom:5px;
  color:var(--rojo);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

#programa .zongolica-literary-heading h4{
  font-size:1.25rem;
}

#programa .zongolica-literary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 16px;
}

#programa .zongolica-literary-grid > div{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:12px 0;
  border-top:1px solid rgba(3,105,77,.10);
}

#programa .zongolica-literary-grid time{
  color:var(--verde-dark);
  font-size:.78rem;
  font-weight:800;
}

#programa .zongolica-literary-grid p{
  margin:0;
  color:var(--tinta-suave);
  font-size:.84rem;
  line-height:1.5;
}

#programa .zongolica-literary-grid strong{
  color:var(--tinta);
}

#programa .zongolica-literary-notes{
  margin-top:8px;
}

#programa .zongolica-final-events{
  display:grid;
  gap:10px;
  margin-top:22px;
}

#programa .zongolica-final-events article{
  display:grid;
  grid-template-columns:128px minmax(0,1fr);
  gap:18px;
  padding:17px 20px;
  border:1px solid rgba(3,105,77,.12);
  border-radius:14px;
  background:#fff;
}

#programa .zongolica-final-events article > time{
  color:var(--verde-dark);
  font-family:var(--titular);
  font-weight:800;
}

#programa .zongolica-final-events-highlight{
  border-color:rgba(212,31,53,.18) !important;
  background:linear-gradient(135deg,#fff 0%,rgba(212,31,53,.045) 100%) !important;
}

#programa .zongolica-final-events-highlight > time{
  color:var(--rojo) !important;
}

@media (max-width:900px){
  #programa .zongolica-local-item{
    grid-template-columns:105px minmax(0,1fr);
  }
  #programa .zongolica-local-responsible,
  #programa .zongolica-local-item > .zongolica-local-tag{
    grid-column:2;
    justify-self:start;
  }
  #programa .zongolica-local-responsible{
    padding-left:0;
    border-left:0;
  }
  #programa .zongolica-literary-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:620px){
  #programa .zongolica-local-program{
    margin:30px 0 24px;
    padding:16px 12px;
    border-radius:16px;
  }
  #programa .zongolica-local-program-header{
    margin-bottom:18px;
  }
  #programa .zongolica-local-item,
  #programa .zongolica-final-events article{
    grid-template-columns:1fr;
    gap:8px;
    padding:15px 14px;
  }
  #programa .zongolica-local-item > time,
  #programa .zongolica-final-events article > time{
    font-size:.82rem;
  }
  #programa .zongolica-local-responsible,
  #programa .zongolica-local-item > .zongolica-local-tag{
    grid-column:auto;
  }
  #programa .zongolica-literary-program{
    padding:16px 14px;
  }
  #programa .zongolica-literary-heading{
    display:block;
  }
  #programa .zongolica-literary-heading .zongolica-local-tag{
    margin-top:8px;
  }
  #programa .zongolica-literary-grid > div{
    grid-template-columns:1fr;
    gap:4px;
  }
}

/* ============================================================
   SECTION SNAPPING · DESPLAZAMIENTO POR SECCIONES
   ------------------------------------------------------------
   Se agrega únicamente el comportamiento de CSS Scroll Snap.
   No cambia estructura, contenido, fondos, tamaños ni componentes.
   Se usa "proximity" para conservar el desplazamiento natural en
   secciones largas como Recorrido, Programa y Memoria Gráfica.
   ============================================================ */

html{
  scroll-snap-type: y proximity;
  scroll-padding-top: 88px;
}

main > section{
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

main > section#inicio{
  scroll-snap-stop: always;
}

@media (max-width: 900px){
  html{
    scroll-snap-type: y proximity;
    scroll-padding-top: 76px;
  }

  main > section{
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-snap-type: none;
  }

  main > section{
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
}

/* ============================================================
   AJUSTE FINAL · SCROLL UXERFLOW + TEXTO EDITORIAL
   ------------------------------------------------------------
   SOLO modifica:
   1. sensación de desplazamiento entre capítulos;
   2. alineación de los títulos principales;
   3. justificación de los párrafos indicados.
   No cambia estructura, fondos, paleta, mapa, carruseles o contenido.
   ============================================================ */

/* ---------- Scroll por capítulos / snap suave ---------- */
html{
  scroll-snap-type:y proximity !important;
  scroll-padding-top:88px;
}

/* Todas las secciones siguen siendo puntos naturales de llegada. */
main > section{
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}

/* Solo los capítulos suficientemente cortos frenan de forma más marcada.
   La clase la calcula script.js según el alto real de cada sección. */
main > section.scroll-snap-short{
  scroll-snap-stop:always;
}

/* El contenido entra/sale con una profundidad más notoria, similar a un
   showcase de UX, pero el fondo de cada sección permanece completamente fijo. */
main > section.scroll-live-stage:not(.hero) > .wrap{
  transform-origin:center 38% !important;
  filter:none !important;
}

/* El contenido permanece completamente nítido durante todo el scroll. */
main > section.scroll-live-stage.is-scroll-current:not(.hero) > .wrap{
  filter:none !important;
}

/* No desplazamos lateralmente los encabezados: el efecto se concentra
   únicamente en profundidad vertical y escala. */
main > section.scroll-live-stage .eyebrow,
main > section.scroll-live-stage .historia-resumida-header,
main > section.scroll-live-stage .juan-story-header,
main > section.scroll-live-stage .museum-gateway-head,
main > section.scroll-live-stage .agenda-header{
  transform:none !important;
}

/* ---------- Títulos principales centrados ---------- */

/* INTRODUCCIÓN */
#introduccion > .wrap > .eyebrow{
  text-align:center;
}
#introduccion > .wrap > .eyebrow-rule{
  margin-left:auto;
  margin-right:auto;
}

/* HISTORIA INSURGENTE */
#historia .story-chapter-header{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
#historia .story-chapter-header .eyebrow{
  text-align:center;
}
#historia .story-chapter-header .eyebrow-rule{
  margin-left:auto;
  margin-right:auto;
}
#historia .story-chapter-header h2{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* MUSEO DIGITAL / BANDERA SIERA */
#museo .story-chapter-header{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
#museo .story-chapter-header .eyebrow{
  text-align:center;
}
#museo .story-chapter-header .eyebrow-rule{
  margin-left:auto;
  margin-right:auto;
}
#museo .story-chapter-header h2{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* SIMBOLISMO */
#simbolismo .simbolismo-video-content > .eyebrow{
  text-align:center;
}
#simbolismo .simbolismo-video-content > .eyebrow-rule{
  margin-left:auto;
  margin-right:auto;
}

/* EL RECORRIDO */
#recorrido > .wrap > .eyebrow{
  text-align:center;
}
#recorrido > .wrap > .eyebrow-rule{
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Párrafos justificados ---------- */

/* Justificación editorial únicamente en los apartados mostrados por el usuario. */
#introduccion .intro-copy p,

#historia .story-chapter-header .section-lead,
#historia .story-context-card p,
#historia .story-copy p,
#historia .story-timeline p,

#museo .story-chapter-header .section-lead,
#museo .story-copy p,
#museo .bandera-legend-card p,
#museo .bandera-story-timeline p,
#museo .bandera-researcher-copy p,

#simbolismo .simbolismo-note p,
#simbolismo .simbolo-defs p,

#recorrido > .wrap > .section-lead,
#recorrido .hymn-annex-copy p,
#recorrido .recorrido-origin-copy p,
#recorrido .timeline-content p{
  text-align:justify !important;
  text-justify:inter-word;
  text-align-last:left;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* Las introducciones de Historia y Museo permanecen centradas como bloque,
   pero el contenido del párrafo queda justificado. */
#historia .story-chapter-header .section-lead,
#museo .story-chapter-header .section-lead{
  margin-left:auto;
  margin-right:auto;
}

/* En móvil conservamos el mismo criterio, reduciendo la profundidad
   para evitar saltos o mareo. */
@media (max-width:900px){
  html{
    scroll-padding-top:76px;
  }

  main > section.scroll-live-stage:not(.hero) > .wrap{
    filter:none !important;
  }
}

/* Accesibilidad: sin movimiento para quien lo solicite. */
@media (prefers-reduced-motion:reduce){
  html{
    scroll-snap-type:none !important;
  }

  main > section{
    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
  }

  main > section.scroll-live-stage:not(.hero) > .wrap{
    filter:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* ============================================================
   CORRECCIÓN DEFINITIVA DEL MAPA LEAFLET
   SOLO afecta al mapa y a su estabilidad.
   No modifica contenido, diseño, ruta, colores ni estructura.
   ============================================================ */

/* Evita el conflicto entre el scroll cinemático y Leaflet */
#recorrido.scroll-live-stage > .wrap{
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* Marco del mapa */
#recorrido .route-map-frame{
  position: relative;
  z-index: 1;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#recorrido .route-map-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Contenedor principal del mapa */
#routeMap{
  position: relative !important;
  width: 100% !important;
  height: 460px;
  min-height: 360px;
  display: block;
  overflow: hidden;
  isolation: isolate;
  transform: none !important;
  filter: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* Sistema de capas de Leaflet */
#routeMap .leaflet-map-pane{
  z-index: 400 !important;
}

#routeMap .leaflet-tile-pane{
  z-index: 200 !important;
}

#routeMap .leaflet-overlay-pane{
  z-index: 400 !important;
}

#routeMap .leaflet-shadow-pane{
  z-index: 500 !important;
}

#routeMap .leaflet-marker-pane{
  z-index: 600 !important;
}

#routeMap .leaflet-tooltip-pane{
  z-index: 650 !important;
}

#routeMap .leaflet-popup-pane{
  z-index: 700 !important;
}

/* Controles Leaflet */
#routeMap .leaflet-control-container{
  position: static !important;
  z-index: auto !important;
}

#routeMap .leaflet-control{
  position: relative !important;
  z-index: 800 !important;
}

#routeMap .leaflet-top,
#routeMap .leaflet-bottom{
  z-index: 1000 !important;
}

/* Evita que los tiles hereden max-width:100% del CSS general */
#routeMap .leaflet-tile{
  max-width: none !important;
  max-height: none !important;
  width: 256px;
  height: 256px;
  padding: 0 !important;
  margin: 0 !important;
  transform-origin: 0 0;
}

#routeMap .leaflet-marker-icon,
#routeMap .leaflet-marker-shadow{
  max-width: none !important;
}

#routeMap .leaflet-map-pane canvas,
#routeMap .leaflet-map-pane svg{
  max-width: none !important;
}

/* Popups */
#routeMap .leaflet-popup{
  z-index: 700 !important;
}

#routeMap .leaflet-popup-content-wrapper{
  background: var(--hueso);
  color: var(--tinta);
  overflow: hidden;
}

#routeMap .leaflet-popup-content{
  margin: 0 !important;
}

#routeMap .leaflet-popup-tip{
  background: var(--hueso);
}

/* Controles de zoom */
#routeMap .leaflet-control-zoom{
  z-index: 1000 !important;
}

#routeMap .leaflet-control-zoom a{
  color: var(--verde-dark) !important;
  background: rgba(247,248,248,.97) !important;
}

#routeMap .leaflet-control-zoom a:hover{
  color: var(--hueso) !important;
  background: var(--verde) !important;
}

/* Interactividad */
#routeMap,
#routeMap .leaflet-pane,
#routeMap .leaflet-map-pane,
#routeMap .leaflet-marker-pane{
  pointer-events: auto;
}

#routeMap .leaflet-tile-pane{
  pointer-events: none;
}

/* Estado cargado */
#routeMap.route-map-ready{
  background: var(--hueso-2) !important;
}

/* Móvil */
@media (max-width: 700px){
  #routeMap{
    height: 340px;
    min-height: 340px;
  }
}

@media (max-width: 420px){
  #routeMap{
    height: 300px;
    min-height: 300px;
  }
}


/* ============================================================
   RESPONSIVE FINAL · PC + TABLET + iPHONE + ANDROID
   ------------------------------------------------------------
   Capa de compatibilidad agregada al final para NO alterar la
   estructura, contenido, paleta ni funcionamiento existente.
   Solo adapta tamaños, espacios, rejillas y controles al viewport.
   ============================================================ */

/* Base fluida y prevención de desbordamientos */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body,
main,
main > section,
.wrap{
  min-width:0;
}

img,
picture,
video,
canvas,
svg,
iframe{
  max-width:100%;
}

audio{
  width:100%;
  max-width:100%;
}

h1,h2,h3,h4,h5,h6,p,li,figcaption,summary,a,span,strong{
  overflow-wrap:break-word;
}

.wrap{
  width:100%;
}

/* iPhone / Android con notch o barras seguras */
@supports (padding: max(0px)){
  .wrap{
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
  }
}

/* Evita que las transformaciones cinematográficas creen scroll lateral */
.scroll-live-stage,
.scroll-live-stage > .wrap,
.hero-text,
.gallery-panels,
.recorrido-shirts-panels{
  max-width:100%;
}

/* ---------- Laptop / tablet horizontal ---------- */
@media (max-width:1180px){
  .wrap{
    padding-left:clamp(22px,3.4vw,34px);
    padding-right:clamp(22px,3.4vw,34px);
  }

  .header-inner{
    gap:14px;
  }

  .main-nav{
    gap:clamp(12px,1.6vw,20px);
  }

  .main-nav a{
    font-size:.84rem;
  }

  .story-chapter-header h2,
  #programa .agenda-header h2{
    max-width:100%;
  }

  .route-map-frame,
  .route-map-wrap,
  #routeMap{
    width:100%;
    max-width:100%;
  }
}

/* ---------- Tablet / móvil grande ---------- */
@media (max-width:900px){
  :root{
    --responsive-gutter:22px;
  }

  html{
    scroll-padding-top:76px;
  }

  .wrap{
    padding-left:var(--responsive-gutter);
    padding-right:var(--responsive-gutter);
  }

  @supports (padding: max(0px)){
    .wrap{
      padding-left:max(var(--responsive-gutter), env(safe-area-inset-left));
      padding-right:max(var(--responsive-gutter), env(safe-area-inset-right));
    }
  }

  .site-header{
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }

  .header-inner{
    min-height:64px;
    gap:10px;
  }

  .brand{
    min-width:0;
  }

  .brand-text{
    font-size:1.15rem;
  }

  .main-nav{
    left:0;
    right:0;
    width:100%;
    padding-left:var(--responsive-gutter);
    padding-right:var(--responsive-gutter);
  }

  .main-nav a{
    min-height:48px;
    display:flex;
    align-items:center;
  }

  .hero{
    min-height:min(820px, 100svh);
    min-height:min(820px, 100dvh);
    display:flex;
    align-items:center;
    padding-top:72px;
    padding-bottom:68px;
  }

  .hero-inner{
    width:100%;
  }

  .hero-text{
    width:min(100%, 680px);
  }

  .section,
  .section-feature{
    padding-top:clamp(54px,8vw,72px);
    padding-bottom:clamp(54px,8vw,72px);
  }

  /* Mantener nítido el contenido en pantallas táctiles */
  main > section.scroll-live-stage:not(.hero) > .wrap{
    filter:none !important;
  }

  .story-chapter-header,
  #historia .story-chapter-header,
  #museo .story-chapter-header{
    width:100%;
  }

  .story-chapter-header h2,
  #programa .agenda-header h2,
  .alerts-copy h2{
    font-size:clamp(2rem,7vw,3.5rem);
    line-height:1.03;
  }

  .story-hero-layout,
  .bandera-researcher-card,
  .recorrido-origin-story,
  .hymn-annex,
  .agenda-header,
  .program-authority-card,
  .alerts-grid{
    min-width:0;
  }

  .story-media,
  .story-doc-card,
  .recorrido-origin-media,
  .program-shirt-card,
  .program-authority-photo{
    width:100%;
  }

  .route-map-header{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .route-map-badges{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  #routeMap{
    height:clamp(360px,56vw,460px);
    min-height:360px;
  }

  .route-legend{
    flex-wrap:wrap;
    gap:8px 10px;
  }

  .route-legend-note{
    flex:1 1 100%;
    margin-left:0 !important;
    padding-top:4px;
  }

  .program-authority-card{
    overflow:hidden;
  }

  .program-authority-content,
  .agenda-playera-block,
  .zongolica-local-program{
    min-width:0;
  }

  .program-official-details{
    width:100%;
  }

  .program-official-card summary{
    min-height:48px;
  }

  /* Carruseles: conserva la misma experiencia, solo ajusta el ancho */
  #galeria .gallery-depth-track,
  .recorrido-shirts-track{
    width:100%;
    max-width:100%;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    touch-action:pan-x;
  }

  #galeria .gallery-depth-track .gallery-item{
    flex:0 0 clamp(270px,62vw,380px);
    max-width:82vw;
  }

  .recorrido-shirts-track .recorrido-shirt-card{
    flex:0 0 clamp(250px,56vw,350px);
    max-width:82vw;
  }

  .lightbox-overlay{
    padding:clamp(14px,4vw,32px);
  }

  .lightbox-overlay img{
    max-width:min(94vw,1100px) !important;
    max-height:86dvh !important;
    object-fit:contain;
  }
}

/* ---------- iPhone / Android estándar ---------- */
@media (max-width:700px){
  :root{
    --responsive-gutter:18px;
  }

  html,
  body{
    width:100%;
    max-width:100%;
  }

  .wrap{
    padding-left:var(--responsive-gutter) !important;
    padding-right:var(--responsive-gutter) !important;
  }

  @supports (padding: max(0px)){
    .wrap{
      padding-left:max(var(--responsive-gutter), env(safe-area-inset-left)) !important;
      padding-right:max(var(--responsive-gutter), env(safe-area-inset-right)) !important;
    }
  }

  .site-header{
    border-top-width:2px;
  }

  .header-inner{
    padding-top:8px;
    padding-bottom:8px;
    min-height:60px;
  }

  .brand .isotipo{
    width:40px;
    height:26px;
  }

  .brand-text{
    font-size:1.03rem;
  }

  .brand-sub{
    display:none;
  }

  .header-alert-btn{
    display:none !important;
  }

  .nav-toggle{
    width:44px;
    height:44px;
  }

  .main-nav{
    padding-left:18px;
    padding-right:18px;
  }

  .hero{
    min-height:calc(100svh - 60px);
    min-height:calc(100dvh - 60px);
    padding-top:52px;
    padding-bottom:62px;
  }

  .hero-kicker{
    align-items:flex-start;
    gap:8px;
    font-size:.65rem;
    line-height:1.45;
  }

  .hero-kicker .rule{
    margin-top:.65em;
    flex:0 0 24px;
  }

  .hero-title{
    font-size:clamp(2.75rem,15vw,4.6rem);
    line-height:.92;
  }

  .hero-subtitle{
    font-size:clamp(.94rem,4.7vw,1.18rem);
  }

  .hero-tagline{
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:1.4em;
    font-size:.74rem;
  }

  .hero-tagline .line{
    flex-basis:28px;
  }

  .hero-sub{
    max-width:none;
    font-size:.96rem;
    line-height:1.65;
    margin-bottom:1.6em;
  }

  .hero-cta{
    width:100%;
    gap:10px;
  }

  .hero-cta .btn{
    flex:1 1 100%;
    width:100%;
    min-height:48px;
  }

  .hero-scroll-cue{
    display:none;
  }

  .section,
  .section-feature{
    padding-top:52px;
    padding-bottom:52px;
  }

  .eyebrow{
    font-size:clamp(1rem,5.4vw,1.28rem);
    line-height:1.25;
  }

  .eyebrow-rule{
    margin-bottom:24px;
  }

  .section-lead,
  .intro-copy p,
  .story-copy p,
  .recorrido-origin-copy p,
  .simbolismo-note p,
  .alerts-copy p{
    font-size:.96rem;
    line-height:1.68;
  }

  .story-chapter-header h2,
  #programa .agenda-header h2,
  .alerts-copy h2,
  .event-promise-simple-title{
    font-size:clamp(1.8rem,9vw,2.75rem) !important;
    line-height:1.06 !important;
  }

  .story-copy h3,
  .recorrido-origin-copy h3,
  .hymn-annex-copy h3,
  #programa .zongolica-local-program-header h3{
    font-size:clamp(1.4rem,7vw,2rem);
    line-height:1.15;
  }

  .story-context-card,
  .recorrido-origin-story,
  .hymn-annex,
  .bandera-researcher-card,
  #programa .zongolica-local-program,
  .program-authority-card{
    padding:18px !important;
  }

  .story-context-number{
    font-size:clamp(2.7rem,16vw,4rem);
  }

  .story-media{
    min-height:220px;
  }

  .story-media img,
  .story-doc-card img,
  .recorrido-origin-media img,
  .bandera-researcher-media img,
  .program-authority-photo img{
    width:100%;
    height:auto;
    max-height:420px;
    object-fit:cover;
  }

  .bandera-story-timeline,
  .story-timeline,
  .story-documents,
  .bandera-visual-pair{
    gap:14px;
  }

  .bandera-story-timeline article,
  .story-timeline article{
    padding:18px;
  }

  .simbolismo-grid{
    gap:24px !important;
  }

  .simbolismo-flag img{
    width:100%;
    height:auto !important;
    max-height:420px;
    object-fit:contain;
  }

  .simbolo-defs{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .simbolo-defs > div{
    min-height:0 !important;
  }

  .route-stats{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }

  .route-stat{
    min-width:0;
    padding:16px 14px;
    border-right:1px solid var(--linea);
    border-bottom:1px solid var(--linea);
  }

  .route-stat:nth-child(2n){
    border-right:0;
  }

  .route-stat:last-child{
    grid-column:1/-1;
    border-right:0;
    border-bottom:0;
  }

  .route-stat-icon{
    width:38px;
    height:38px;
  }

  .route-stat-num{
    font-size:1.65rem;
  }

  .route-stat-label{
    font-size:.66rem;
  }

  .route-subtitle{
    margin-top:38px;
    font-size:1rem;
  }

  .timeline{
    width:100%;
    max-width:none;
  }

  .timeline::before{
    left:27px;
  }

  .timeline-item{
    width:100%;
    padding:9px 4px;
    gap:12px;
  }

  .timeline-node{
    width:36px;
    height:36px;
    font-size:.82rem;
  }

  .timeline-content h4{
    font-size:.92rem;
  }

  .timeline-content p{
    font-size:.78rem;
    line-height:1.55;
  }

  .route-map-header{
    display:block !important;
  }

  .route-map-badges{
    display:flex;
    width:100%;
    margin-top:14px;
    gap:8px;
  }

  .route-map-badge{
    flex:1 1 auto;
    min-width:0;
    justify-content:center;
    padding-inline:10px !important;
    font-size:.72rem !important;
  }

  .route-map-badge strong{
    font-size:1rem !important;
  }

  .route-map-frame,
  .route-map-wrap{
    width:100%;
    max-width:100%;
    border-radius:14px;
  }

  #routeMap{
    height:360px !important;
    min-height:360px !important;
    width:100% !important;
  }

  #routeMap .leaflet-control-container{
    font-size:12px;
  }

  #routeMap .route-info-chip{
    max-width:calc(100vw - 82px);
  }

  #routeMap .route-reset-btn{
    max-width:140px;
  }

  #routeMap .leaflet-popup-content-wrapper{
    max-width:calc(100vw - 44px);
  }

  #routeMap .leaflet-popup-content{
    max-width:calc(100vw - 64px);
  }

  .route-legend{
    align-items:flex-start;
  }

  .route-legend-item{
    font-size:.72rem;
  }

  .route-legend-note{
    font-size:.75rem;
    line-height:1.45;
  }

  /* Playera del programa: imagen protagonista y legible */
  .agenda-playera-block{
    width:100%;
  }

  .agenda-date-badge,
  .program-shirt-info,
  .program-shirt-card{
    width:100%;
    max-width:100%;
  }

  .program-shirt-card img{
    width:100%;
    height:auto !important;
    max-height:none !important;
    object-fit:contain;
  }

  .program-authority-card{
    grid-template-columns:1fr !important;
  }

  .program-authority-photo{
    min-height:0 !important;
  }

  .program-authority-photo img{
    max-height:460px;
    object-fit:cover;
  }

  .program-authority-content{
    padding:0 !important;
  }

  .program-authority-meta{
    grid-template-columns:1fr !important;
  }

  #programa .zongolica-local-item,
  #programa .zongolica-final-events article{
    width:100%;
  }

  #programa .zongolica-literary-grid > div{
    min-width:0;
  }

  .program-route-limits{
    grid-template-columns:1fr !important;
  }

  .program-official-card summary{
    padding:14px 16px;
    font-size:.9rem;
  }

  .program-protocol-list{
    padding-left:22px;
  }

  /* Carrusel de playeras */
  .recorrido-shirts-showcase{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .recorrido-shirts-header{
    display:block !important;
  }

  .recorrido-shirts-track{
    gap:14px !important;
    padding-left:2px !important;
    padding-right:2px !important;
    scroll-padding-inline:2px;
  }

  .recorrido-shirts-track .recorrido-shirt-card{
    flex-basis:min(82vw,310px) !important;
    width:min(82vw,310px) !important;
    max-width:min(82vw,310px) !important;
  }

  /* Memoria gráfica */
  #galeria .gallery-panels{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  #galeria .gallery-depth-track{
    gap:14px !important;
    padding-left:2px !important;
    padding-right:2px !important;
    scroll-padding-inline:2px;
  }

  #galeria .gallery-depth-track .gallery-item,
  #galeria .gallery-depth-track .gallery-item--full{
    flex-basis:min(84vw,320px) !important;
    width:min(84vw,320px) !important;
    max-width:min(84vw,320px) !important;
  }

  #galeria .gallery-depth-track .gallery-item img,
  #galeria .gallery-depth-track .gallery-item--full img{
    width:100%;
    height:auto !important;
    max-height:430px;
    object-fit:cover;
  }

  .gallery-carousel-controls,
  .shirts-carousel-controls{
    width:100%;
    gap:10px;
  }

  .gallery-carousel-btn,
  .shirts-carousel-btn{
    width:44px;
    height:44px;
  }

  .alerts-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .alert-card,
  .whatsapp-card{
    width:100%;
    max-width:none;
  }

  .footer-inner{
    align-items:flex-start;
    text-align:left;
  }

  .mobile-alert-cta{
    left:12px;
    right:12px;
    width:auto;
    min-height:50px;
    bottom:12px;
    border-radius:12px;
  }

  @supports (padding: max(0px)){
    .mobile-alert-cta{
      left:max(12px, env(safe-area-inset-left));
      right:max(12px, env(safe-area-inset-right));
      bottom:max(12px, env(safe-area-inset-bottom));
    }

    body{
      padding-bottom:calc(72px + env(safe-area-inset-bottom));
    }
  }

  .lightbox-close{
    width:46px;
    height:46px;
    top:max(10px, env(safe-area-inset-top));
    right:max(10px, env(safe-area-inset-right));
  }
}

/* ---------- iPhone compacto / Android angosto ---------- */
@media (max-width:430px){
  :root{
    --responsive-gutter:15px;
  }

  .wrap{
    padding-left:15px !important;
    padding-right:15px !important;
  }

  .header-inner{
    min-height:58px;
  }

  .brand .isotipo{
    width:36px;
  }

  .brand-text{
    font-size:.98rem;
  }

  .hero{
    min-height:calc(100svh - 58px);
    min-height:calc(100dvh - 58px);
    padding-top:42px;
    padding-bottom:54px;
  }

  .hero-title{
    font-size:clamp(2.55rem,15.4vw,4rem);
  }

  .hero-sub{
    font-size:.92rem;
  }

  .section,
  .section-feature{
    padding-top:46px;
    padding-bottom:46px;
  }

  .story-chapter-header h2,
  #programa .agenda-header h2,
  .alerts-copy h2,
  .event-promise-simple-title{
    font-size:clamp(1.65rem,9.3vw,2.35rem) !important;
  }

  .story-context-card,
  .recorrido-origin-story,
  .hymn-annex,
  .bandera-researcher-card,
  #programa .zongolica-local-program,
  .program-authority-card{
    padding:15px !important;
    border-radius:14px !important;
  }

  .route-stats{
    grid-template-columns:1fr;
  }

  .route-stat,
  .route-stat:nth-child(2n),
  .route-stat:last-child{
    grid-column:auto;
    border-right:0;
    border-bottom:1px solid var(--linea);
  }

  .route-stat:last-child{
    border-bottom:0;
  }

  #routeMap{
    height:320px !important;
    min-height:320px !important;
  }

  .route-map-badges{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .route-map-badge{
    width:100%;
    padding:8px 6px !important;
    white-space:normal;
    line-height:1.15;
  }

  #routeMap .route-info-chip{
    transform:scale(.88);
    transform-origin:top left;
  }

  #routeMap .route-reset-btn{
    transform:scale(.88);
    transform-origin:top right;
  }

  #galeria .gallery-depth-track .gallery-item,
  #galeria .gallery-depth-track .gallery-item--full,
  .recorrido-shirts-track .recorrido-shirt-card{
    flex-basis:86vw !important;
    width:86vw !important;
    max-width:86vw !important;
  }

  .gallery-carousel-status,
  .shirts-carousel-status{
    font-size:.82rem;
  }

  .hymn-inline-player{
    min-width:0;
  }

  .mobile-alert-cta{
    font-size:.84rem;
  }
}

/* ---------- Pantallas muy angostas: 320–374 px ---------- */
@media (max-width:374px){
  .wrap{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .brand-text{
    font-size:.9rem;
  }

  .nav-toggle{
    width:42px;
    height:42px;
  }

  .hero-title{
    font-size:2.5rem;
  }

  .hero-kicker{
    letter-spacing:.1em;
  }

  .btn{
    padding-left:1.1em;
    padding-right:1.1em;
  }

  #routeMap{
    height:300px !important;
    min-height:300px !important;
  }

  .route-map-badges{
    grid-template-columns:1fr;
  }

  .route-map-badge{
    min-height:38px;
  }
}

/* ---------- Dispositivos táctiles ---------- */
@media (hover:none) and (pointer:coarse){
  .btn:hover,
  .intro-card:hover,
  .timeline-item:hover .timeline-node{
    transform:none;
  }

  .gallery-depth-track,
  .recorrido-shirts-track{
    cursor:grab;
  }
}

/* Orientación horizontal en teléfonos */
@media (max-height:520px) and (orientation:landscape) and (max-width:950px){
  .hero{
    min-height:auto;
    padding-top:42px;
    padding-bottom:42px;
  }

  .hero-scroll-cue{
    display:none;
  }

  #routeMap{
    height:70vh !important;
    min-height:280px !important;
  }
}


/* ============================================================
   INTRODUCCIÓN · VIDEO DESTACADO · RECORRIDO BANDERA SIERA
   ============================================================ */

#introduccion .intro-video-banner{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:1080px;
  min-height:180px;
  display:block;
  margin:34px auto 0;
  overflow:hidden;
  border:1px solid rgba(3,105,77,.18);
  border-radius:22px;
  background:#063f32;
  color:#fff;
  text-decoration:none;
  box-shadow:0 18px 48px rgba(0,0,0,.13);
  cursor:pointer;
  transform:translateZ(0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease;
}

#introduccion .intro-video-banner-bg{
  position:absolute;
  inset:0;
  z-index:-4;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  transform:scale(1.015);
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

#introduccion .intro-video-banner-overlay{
  position:absolute;
  inset:0;
  z-index:-3;
  background:linear-gradient(90deg,rgba(1,31,24,.98) 0%,rgba(2,52,40,.94) 33%,rgba(3,76,57,.82) 57%,rgba(3,76,57,.50) 78%,rgba(2,38,30,.38) 100%);
}

#introduccion .intro-video-pattern{
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.16;
  pointer-events:none;
  background-image:repeating-linear-gradient(135deg,transparent 0,transparent 23px,rgba(255,255,255,.10) 24px,transparent 25px,transparent 48px);
}

#introduccion .intro-video-banner-content{
  position:relative;
  z-index:2;
  width:100%;
  min-height:180px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 48px;
  align-items:center;
  gap:22px;
  padding:27px 32px;
}

#introduccion .intro-video-play{
  position:relative;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#d9273d;
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 0 7px rgba(255,255,255,.08);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .3s ease;
}

#introduccion .intro-video-play::before{
  content:"";
  position:absolute;
  inset:-9px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:50%;
  opacity:.8;
}

#introduccion .intro-video-play svg{
  width:31px;
  height:31px;
  display:block;
  transform:translateX(1px);
}

#introduccion .intro-video-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

#introduccion .intro-video-kicker{
  display:block;
  margin-bottom:2px;
  color:rgba(255,255,255,.70);
  font-family:"Poppins",sans-serif;
  font-size:.68rem;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#introduccion .intro-video-title{
  display:block;
  max-width:720px;
  margin:0;
  color:#fff;
  font-family:"Poppins",sans-serif;
  font-size:clamp(1.15rem,2vw,1.65rem);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.015em;
}

#introduccion .intro-video-description{
  display:block;
  max-width:720px;
  margin-top:4px;
  color:rgba(255,255,255,.77);
  font-family:"Poppins",sans-serif;
  font-size:clamp(.78rem,1.25vw,.92rem);
  line-height:1.55;
  font-weight:400;
}

#introduccion .intro-video-facebook{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  color:#fff;
  font-family:"Poppins",sans-serif;
  font-size:.76rem;
  line-height:1;
  font-weight:700;
}

#introduccion .intro-video-facebook svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:#fff;
}

#introduccion .intro-video-arrow{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  justify-self:end;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .3s ease,background .3s ease,border-color .3s ease;
}

#introduccion .intro-video-arrow svg{
  width:21px;
  height:21px;
  display:block;
}

#introduccion .intro-video-watch{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

#introduccion .intro-video-watch span{
  display:block;
  width:28%;
  height:100%;
  background:linear-gradient(90deg,#d9273d,#f05b6d);
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}

@media (hover:hover) and (pointer:fine){
  #introduccion .intro-video-banner:hover{
    transform:translateY(-4px);
    border-color:rgba(3,105,77,.42);
    box-shadow:0 25px 64px rgba(0,0,0,.19);
  }
  #introduccion .intro-video-banner:hover .intro-video-banner-bg{transform:scale(1.065);}
  #introduccion .intro-video-banner:hover .intro-video-play{
    transform:scale(1.09);
    background:#e22d44;
    box-shadow:0 14px 34px rgba(0,0,0,.31),0 0 0 10px rgba(255,255,255,.09);
  }
  #introduccion .intro-video-banner:hover .intro-video-arrow{
    transform:translate(3px,-3px);
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.38);
  }
  #introduccion .intro-video-banner:hover .intro-video-watch span{width:100%;}
}

#introduccion .intro-video-banner:focus-visible{
  outline:3px solid rgba(3,105,77,.65);
  outline-offset:5px;
}

@media (max-width:900px){
  #introduccion .intro-video-banner{
    max-width:100%;
    min-height:165px;
    margin-top:28px;
    border-radius:19px;
  }
  #introduccion .intro-video-banner-content{
    min-height:165px;
    grid-template-columns:62px minmax(0,1fr) 42px;
    gap:17px;
    padding:24px 25px;
  }
  #introduccion .intro-video-play{width:58px;height:58px;}
  #introduccion .intro-video-play svg{width:27px;height:27px;}
  #introduccion .intro-video-arrow{width:40px;height:40px;}
}

@media (max-width:620px){
  #introduccion .intro-video-banner{
    min-height:190px;
    margin-top:23px;
    border-radius:17px;
  }
  #introduccion .intro-video-banner-bg{object-position:center center;}
  #introduccion .intro-video-banner-overlay{
    background:linear-gradient(90deg,rgba(1,31,24,.98) 0%,rgba(2,52,40,.94) 56%,rgba(3,65,50,.75) 100%);
  }
  #introduccion .intro-video-banner-content{
    min-height:190px;
    grid-template-columns:50px minmax(0,1fr) 32px;
    gap:12px;
    padding:20px 16px;
  }
  #introduccion .intro-video-play{
    width:48px;
    height:48px;
    border-width:2px;
    box-shadow:0 9px 24px rgba(0,0,0,.28),0 0 0 5px rgba(255,255,255,.08);
  }
  #introduccion .intro-video-play::before{inset:-6px;}
  #introduccion .intro-video-play svg{width:23px;height:23px;}
  #introduccion .intro-video-kicker{font-size:.53rem;letter-spacing:.10em;}
  #introduccion .intro-video-title{font-size:.98rem;line-height:1.23;}
  #introduccion .intro-video-description{
    display:-webkit-box;
    overflow:hidden;
    font-size:.72rem;
    line-height:1.45;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  #introduccion .intro-video-facebook{margin-top:6px;font-size:.67rem;}
  #introduccion .intro-video-facebook svg{width:15px;height:15px;flex-basis:15px;}
  #introduccion .intro-video-arrow{width:31px;height:31px;}
  #introduccion .intro-video-arrow svg{width:17px;height:17px;}
}

@media (max-width:390px){
  #introduccion .intro-video-banner-content{
    grid-template-columns:46px minmax(0,1fr);
    padding:18px 14px;
  }
  #introduccion .intro-video-play{width:44px;height:44px;}
  #introduccion .intro-video-arrow{display:none;}
  #introduccion .intro-video-title{font-size:.91rem;}
  #introduccion .intro-video-description{font-size:.68rem;}
}

@media (prefers-reduced-motion:reduce){
  #introduccion .intro-video-banner,
  #introduccion .intro-video-banner-bg,
  #introduccion .intro-video-play,
  #introduccion .intro-video-arrow,
  #introduccion .intro-video-watch span{transition:none !important;}
  #introduccion .intro-video-banner:hover{transform:none;}
  #introduccion .intro-video-banner:hover .intro-video-banner-bg{transform:scale(1.015);}
}