/* ============================================================
   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("assets/pano.JPEG") 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("assets/siera.png") 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("assets/pano.png");
}

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;
}

.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;
  }
}