/* Festival Maya Guatemalteco 2027 · línea C «Barrilete»
   Color plano, esquinas rectas, filetes de 1px, cero sombras, sin halos. De día: fondo claro; Noche solo en el cierre. */

/* ---------- Fuentes propias ---------- */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/bebas-neue-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/bebas-neue-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  --magenta: #D3245F;
  --naranja: #F26B1D;
  --sol: #FFC428;
  --lago: #00A19A;
  --cielo: #2457A6;
  --morado: #7A2E8E;
  --noche: #1B1530;
  --fondo: #FBFAF7;
  --campo: #FFFDF9;
  --ink-2: #4A4462;
  --on-noche-2: #D3CEE2;
  --line: #E3DFEA;
  --error: #A51C25;
  --error-bg: #FBF1F1;
  --niebla: #F4F2F7;
  --fd: "Bebas Neue", "Arial Narrow", sans-serif;
  --ft: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --bar: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --band: clamp(72px, 9vw, 128px);
  --fleco: 26px;
  --logo-ar: 1200 / 499; /* proporción del logo en el espacio del héroe */
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 8px); }
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--noche);
  font: 500 18px/1.5 var(--ft);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--magenta);
  scrollbar-color: var(--noche) var(--line);
}
@media (min-width: 760px) { body { font-size: 19px; } }
::selection { background: var(--sol); color: var(--noche); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--noche); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--noche); color: var(--fondo); padding: 12px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }

h1, h2, h3, h4 { font-family: var(--fd); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .92; text-wrap: balance; }
.h-xl { font-size: clamp(46px, 6.6vw, 96px); }
.h-l { font-size: clamp(42px, 5.2vw, 76px); }
.h-m { font-size: clamp(34px, 3.6vw, 52px); }
.lead { max-width: 60ch; font-size: clamp(19px, 1.5vw, 21px); color: var(--ink-2); text-wrap: pretty; }

/* Palabras de títulos (las parte app.js) */
.t-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em 0 .06em; margin: -.16em 0 -.06em; }
.t-split .wi { display: inline-block; will-change: transform; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 0;
  font: 700 17px/1 var(--ft); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: transform 120ms var(--ease), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 18px; }
.btn-sol { background: var(--sol); color: var(--noche); }
.btn-line { background: transparent; color: var(--noche); box-shadow: inset 0 0 0 2px var(--noche); }
.btn-noche { background: var(--noche); color: var(--fondo); }
.btn[disabled] { opacity: .6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .btn-sol:hover { background: var(--noche); color: var(--sol); }
  .btn-line:hover { background: var(--noche); color: var(--fondo); }
  .btn-noche:hover { background: var(--magenta); color: var(--fondo); }
}
.lnk { font-weight: 700; text-decoration: underline; text-decoration-color: var(--magenta); }
@media (hover: hover) and (pointer: fine) { .lnk:hover { text-decoration-color: var(--noche); } }

/* ---------- Orilla de flecos ---------- */
.flecos { height: var(--fleco); background: url(flecos.svg) repeat-x left top / 72px 26px; transform-origin: 0 50%; }
.flecos-b { position: absolute; left: 0; right: 0; bottom: 0; }
.flecos-t { position: relative; }

/* ---------- Barra superior ---------- */
.top { position: sticky; top: 0; z-index: 40; }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fondo); box-shadow: inset 0 -1px 0 var(--line); transform-origin: 50% 0; transition: transform 220ms var(--ease); }
.top-in, .progreso, .brand-k { transition: transform 220ms var(--ease); }
.top.is-compact::before { transform: scaleY(.8125); }
.top.is-compact .top-in { transform: translateY(-6px); }
.top.is-compact .progreso { transform: translateY(-12px); }
.top.is-compact .brand-k { transform: scale(.86); }
.top.is-compact .menu { top: 58px; }
.top-in { display: flex; align-items: center; gap: 8px; height: var(--bar); max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; margin-right: auto; text-decoration: none; }
.brand-k { width: 30px; height: 30px; flex: none; background: url(favicon.svg) center / contain no-repeat; }
.brand-t { font: 400 26px/1 var(--fd); letter-spacing: .01em; padding-top: 3px; white-space: nowrap; }
.brand-y { color: var(--magenta); }
.nav { position: relative; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: none; border: 0; font: 700 16px/1 var(--ft); letter-spacing: .06em; text-transform: uppercase; }
.menu-i { position: relative; width: 18px; height: 2px; background: currentColor; }
.menu-i::before, .menu-i::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.menu-i::before { top: -6px; } .menu-i::after { top: 6px; }
.menu { position: fixed; left: 0; right: 0; top: var(--bar); background: var(--fondo); box-shadow: inset 0 1px 0 var(--line), 0 1px 0 var(--line); padding: 8px var(--gutter) 16px; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity 120ms ease, transform 120ms var(--ease), visibility 0s 120ms; }
.menu a { display: flex; align-items: center; min-height: 56px; font: 400 30px/1 var(--fd); letter-spacing: .02em; text-decoration: none; box-shadow: inset 0 -1px 0 var(--line); }
.nav.is-open .menu { opacity: 1; transform: none; visibility: visible; transition: opacity 160ms ease, transform 160ms var(--ease), visibility 0s; }
.lang { min-width: 44px; min-height: 44px; padding: 0 10px; background: none; border: 0; box-shadow: inset 0 0 0 2px var(--noche); font: 700 16px/1 var(--ft); letter-spacing: .08em; transition: transform 120ms var(--ease), background-color 160ms ease, color 160ms ease; }
.lang:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .lang:hover { background: var(--noche); color: var(--fondo); } }
.top-cta { min-height: 44px; padding: 0 14px; font-size: 16px; }
@media (max-width: 1023px) { .brand-t { font-size: 19px; white-space: normal; max-width: 8.6em; line-height: 1; padding-top: 1px; } }
@media (max-width: 479px) { .brand-t { display: none; } }
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .menu { position: static; display: flex; gap: 4px; padding: 0; background: none; box-shadow: none; opacity: 1; transform: none; visibility: visible; transition: none; }
  .menu a { min-height: 44px; padding: 0 12px; font: 700 16px/1 var(--ft); letter-spacing: .06em; text-transform: uppercase; box-shadow: none; }
  .menu a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: text-decoration-color 160ms ease; }
  .menu a[aria-current="true"] { text-decoration-color: var(--noche); }
  .top-in { gap: 12px; }
  .top-cta { padding: 0 18px; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .menu a:hover { text-decoration-color: var(--magenta); } }

/* ---------- Héroe ---------- */
.hero { position: relative; overflow: hidden; padding: 0 0 calc(var(--fleco) + 40px); }
.hero-art { position: absolute; z-index: 0; pointer-events: none; width: 280px; right: -92px; top: -92px; }
.hero-art .kite-art { width: 100%; height: auto; overflow: visible; }
.kite-art .kite-tilt, .kite-art .kite-spin { transform-box: fill-box; transform-origin: 50% 50%; }
.kite-string { stroke-dasharray: 1; stroke-dashoffset: 0; display: none; }
.hero-in { position: relative; z-index: 1; width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 168px var(--gutter) 0; display: grid; gap: 18px; justify-items: start; }
.logo-slot { width: min(100%, 600px); aspect-ratio: var(--logo-ar); margin: 0 0 4px -1.5%; }
.logo-slot img { width: 100%; height: auto; }
.hero-date { font: 400 clamp(38px, 5.4vw, 72px)/.95 var(--fd); letter-spacing: .01em; text-transform: uppercase; }
.hero-facts { display: grid; gap: 6px; font: 600 clamp(19px, 1.6vw, 22px)/1.3 var(--ft); }
.fact { position: relative; padding-left: 26px; }
.fact::before { content: ""; position: absolute; left: 0; top: .42em; width: 13px; height: 13px; background: var(--magenta); }
.fact-lugar::before { background: var(--lago); }
.fact-gratis::before { background: var(--sol); box-shadow: inset 0 0 0 1px var(--noche); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Cuenta regresiva: cuatro hojas de papel de color */
.cd { margin-top: 6px; }
.cd-l { font: 700 15px/1 var(--ft); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink-2); }
.cd-units { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 6px; width: min(100%, 470px); }
.cd-u { display: grid; gap: 4px; padding: 10px 10px 9px; background: var(--magenta); color: var(--fondo); }
.cd-u:nth-child(2) { background: var(--naranja); color: var(--noche); }
.cd-u:nth-child(3) { background: var(--lago); color: var(--noche); }
.cd-u:nth-child(4) { background: var(--cielo); color: var(--fondo); }
.cd-k { font: 700 14px/1 var(--ft); letter-spacing: .1em; text-transform: uppercase; }
.odo { display: inline-flex; font: 400 clamp(42px, 5vw, 64px)/1 var(--fd); font-variant-numeric: tabular-nums; height: 1em; }
.odo-d { position: relative; display: inline-block; width: .45em; height: 1em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }
.odo-s { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transition: transform 380ms var(--ease); will-change: transform; }
.odo-s.is-snap { transition: none; }
.odo-s > span { display: block; height: 1em; line-height: 1.04; text-align: center; }
.cd-msg { max-width: 30ch; font: 400 clamp(30px, 3.4vw, 44px)/1 var(--fd); text-transform: uppercase; }

@media (min-width: 760px) {
  .hero-art { width: 420px; right: -110px; top: -70px; }
  .hero-in { padding-top: 120px; }
}
@media (min-width: 1020px) {
  .hero { min-height: calc(100svh - var(--bar)); display: flex; align-items: center; padding-bottom: calc(var(--fleco) + 56px); }
  .hero-art { width: min(52vw, 760px); right: max(-14vw, -200px); top: -40px; }
  .kite-string { display: block; }
  .hero-in { padding-top: 40px; padding-right: 44vw; gap: 20px; }
  .logo-slot { width: min(100%, 620px); }
}
@media (min-width: 1400px) { .hero-in { padding-right: 40vw; } }

/* ---------- Qué es ---------- */
.que { position: relative; padding: var(--band) 0 0; }
.que-grid { display: grid; gap: 32px; }
.que-copy { display: grid; gap: 22px; align-content: start; }
.que-count { max-width: 22ch; font: 400 clamp(36px, 3.8vw, 54px)/1 var(--fd); text-transform: uppercase; text-wrap: balance; }
.countup { display: inline-flex; vertical-align: top; color: var(--magenta); font-variant-numeric: tabular-nums; }
.cu-c { display: inline-block; height: .9em; overflow: hidden; }
.cu-s { display: flex; flex-direction: column; will-change: transform; }
.cu-s > span { display: block; height: .9em; line-height: .9; }
.que-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.que-links a { display: inline-flex; align-items: center; min-height: 44px; }
.que-qz { justify-self: end; width: min(92vw, 440px); margin: -12px -16px 0 0; }
.que-qz .qz { width: 100%; height: auto; overflow: visible; }
.qz-tailg { transform-box: fill-box; transform-origin: 100% 0; }
.tiras { display: grid; margin-top: clamp(48px, 6vw, 88px); }
.tira { position: relative; display: flex; align-items: flex-end; min-height: 92px; padding: 14px var(--gutter); }
.tira { background: var(--tira); }
.tira-bg { position: absolute; inset: 0; background: var(--fondo); transform: scaleX(0); transform-origin: 100% 50%; }
.tira-w { position: relative; font: 400 clamp(46px, 6vw, 84px)/.9 var(--fd); text-transform: uppercase; letter-spacing: .01em; }
.tira.on-dark .tira-w { color: var(--fondo); }
.tira.on-light .tira-w { color: var(--noche); }
@media (min-width: 900px) {
  .que-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .que-qz { width: min(100%, 560px); margin: 0 -24px -72px 0; align-self: end; }
  .tiras { grid-template-columns: repeat(5, 1fr); }
  .tira { min-height: clamp(220px, 22vw, 300px); padding: 20px 18px; }
  .tira-w { font-size: clamp(40px, 3.6vw, 58px); }
}

/* ---------- Programa ---------- */
.prog { padding: var(--band) 0; }
.prog .h-l { margin-bottom: clamp(28px, 4vw, 48px); }
.prog-grid { display: grid; gap: 8px; }
.pt { display: grid; align-content: end; gap: 10px; min-height: 200px; padding: 24px; }
.pt h3 { font-size: clamp(34px, 3.4vw, 50px); }
.pt p { max-width: 42ch; font-size: 19px; }
.pt-tarima { background: var(--magenta); color: var(--fondo); }
.pt-ninos { background: var(--lago); color: var(--noche); }
.pt-puestos { background: var(--sol); color: var(--noche); }
.pt-pronto { background: transparent; outline: 2px dashed var(--noche); outline-offset: -2px; }
.pt-pronto h3 { color: var(--noche); }
.pt-pronto p { color: var(--ink-2); }
@media (min-width: 900px) {
  .prog-grid { grid-template-columns: repeat(12, 1fr); }
  .pt { padding: 32px; }
  .pt-tarima { grid-column: span 7; min-height: 340px; }
  .pt-ninos { grid-column: span 5; min-height: 340px; }
  .pt-puestos { grid-column: span 5; min-height: 240px; }
  .pt-pronto { grid-column: span 7; min-height: 240px; }
}

/* ---------- Mapa ---------- */
.mapa { padding: 0 0 var(--band); }
.mapa .lead { margin: 16px 0 28px; }
.mapa-grid { display: grid; gap: 24px; }
.mapa-svg { order: 2; }
.mapa-side { order: 1; display: grid; gap: 16px; align-content: start; }
.map { width: 100%; height: auto; font-family: var(--ft); }
.map-h { display: none; }
.map-v { max-width: 400px; margin: 0 auto; }
.map-v .m-t { font-size: 25px; }
.map-v .m-strong { font-size: 27px; }
.map-v .m-street { font-size: 20px; }
.map-v .m-6th { font-size: 24px; }
.m-street-bg { fill: #EEEBF2; }
.m-cross { fill: var(--line); }
.m-edge-l { stroke: var(--noche); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.m-center { stroke: var(--noche); stroke-width: 2; stroke-dasharray: 14 12; opacity: .3; }
.m-close { fill: var(--noche); }
.m-barr { fill: var(--magenta); }
.m-tag { fill: var(--fondo); }
.m-t { font: 700 17px/1 var(--ft); letter-spacing: .06em; fill: var(--noche); }
.m-strong { font-size: 19px; }
.m-on { fill: var(--noche); }
.m-street { font: 700 14px/1 var(--ft); letter-spacing: .08em; fill: var(--ink-2); }
.m-6th { font-size: 20px; letter-spacing: .3em; fill: var(--ink-2); opacity: .7; }
.mz { transition: opacity 160ms ease; cursor: pointer; }
.map[data-active] .mz:not(.is-on) { opacity: .4; }
.mz.is-on .mp { stroke: var(--noche); stroke-width: 2.5; }
.zonas { display: flex; flex-wrap: wrap; gap: 8px; }
.zbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 10px; border: 0; background: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--ink-2); font: 700 16px/1 var(--ft); letter-spacing: .04em; text-transform: uppercase; transition: transform 120ms var(--ease), background-color 160ms ease, color 160ms ease; }
.zbtn:active { transform: scale(.97); }
.zbtn[aria-pressed="true"] { background: var(--noche); color: var(--fondo); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .zbtn:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 2px var(--noche); } }
.zkey { width: 16px; height: 16px; flex: none; box-shadow: inset 0 0 0 1px rgba(27, 21, 48, .35); }
.zkey-tarima { background: var(--naranja); }
.zkey-comida { background: var(--magenta); }
.zkey-vendedores { background: var(--cielo); }
.zkey-banos { background: var(--morado); }
.zkey-infantil { background: var(--lago); }
.zkey-parking { background: repeating-linear-gradient(45deg, var(--noche) 0 3px, var(--fondo) 3px 7px); }
.zkey-entradas { background: var(--noche); }
.zbtn[aria-pressed="true"] .zkey { box-shadow: inset 0 0 0 1px var(--fondo); }
.zona-info { min-height: 3.2em; max-width: 52ch; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line); background: var(--niebla); font-size: 19px; }
.mapa-side .btn { justify-self: start; }
@media (min-width: 760px) {
  .map-h { display: block; }
  .map-v { display: none; }
  .mapa-svg { order: 1; }
  .mapa-side { order: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .mapa-side .zonas { grid-row: span 2; }
}

/* ---------- Stands (campo Sol a sangre) ---------- */
.stands { background: var(--sol); padding: 0 0 var(--band); }
.stands > .flecos { background-color: var(--fondo); }
.stands .wrap { padding-top: clamp(56px, 7vw, 96px); }
.stands .lead { color: var(--noche); margin: 18px 0 clamp(32px, 4vw, 56px); }
/* Selector de tipo de lugar: cada fila de precio es una pestaña */
.selector { display: grid; gap: 24px; }
.precios { display: grid; }
.precio { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; width: 100%; padding: 18px 0 22px; border: 0; background: none; color: inherit; text-align: left; font: inherit; box-shadow: inset 0 2px 0 var(--noche); cursor: default; }
.precio-k { grid-column: 1; display: flex; align-items: center; gap: 10px; font: 700 18px/1.2 var(--ft); letter-spacing: .08em; text-transform: uppercase; }
.precio-k::before { content: ""; width: 14px; height: 14px; background: var(--c); flex: none; }
.precio-magenta { --c: var(--magenta); } .precio-cielo { --c: var(--cielo); } .precio-morado { --c: var(--morado); }
.precio-v { grid-column: 1; font: 400 clamp(60px, 8vw, 96px)/.95 var(--fd); }
.precio-n { grid-column: 1; max-width: 46ch; font-size: 19px; }
.precio-go { display: none; }
.mask { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .04em; }
.mask-i { display: inline-block; }
.is-tabs .precio { cursor: pointer; padding-inline: 16px; }
.is-tabs.is-ready .precio { transition: background-color 160ms ease, color 160ms ease, transform 120ms var(--ease); }
.is-tabs .precio:active { transform: scale(.99); }
.is-tabs .precio-go { display: block; grid-column: 2; grid-row: 1 / span 3; width: 14px; height: 14px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); transition: transform 200ms var(--ease); }
.is-tabs .precio[aria-selected="true"] { background: var(--noche); color: var(--fondo); box-shadow: none; }
.is-tabs .precio[aria-selected="true"] .precio-go { transform: rotate(45deg); }
.is-tabs .precio[aria-selected="true"] + .precio { box-shadow: none; }
.is-tabs .precio:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .is-tabs .precio[aria-selected="false"]:hover { background: color-mix(in srgb, var(--noche) 8%, var(--sol)); } }
.sel-panel { display: grid; gap: 20px; align-content: start; padding: clamp(20px, 3vw, 32px); background: var(--fondo); box-shadow: inset 0 0 0 1px var(--noche); }
.sel-panel h3 { font-size: 28px; margin-bottom: 8px; }
.sel-panel li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.sel-panel li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--noche); }
.sel-panel .btn { justify-self: start; }
.selector:not(.is-tabs) .sel-panels { display: grid; gap: 16px; }
@media (min-width: 1020px) {
  .selector.is-tabs { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
  .is-tabs .sel-panels { position: sticky; top: calc(var(--bar) + 16px); }
}
.st-bajo { display: grid; gap: 40px; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 1020px) { .st-bajo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.reglas h3 { font-size: clamp(34px, 3.4vw, 48px); margin-bottom: 18px; }
.reglas li { position: relative; padding: 0 0 12px 22px; max-width: 46ch; }
.reglas li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--noche); }
.grupos { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 64px); }
.grupo h3 { font-size: 34px; margin-bottom: 10px; }
.grupo li { position: relative; padding-left: 22px; margin-bottom: 8px; max-width: 44ch; }
.grupo li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--noche); }
@media (min-width: 640px) { .grupos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .grupos { grid-template-columns: repeat(4, 1fr); } }
.fechas { margin-top: clamp(48px, 6vw, 80px); }
.fechas h3 { font-size: clamp(34px, 3.4vw, 48px); margin-bottom: 18px; }
.fechas ol { display: grid; gap: 0; }
.fechas li { display: grid; gap: 4px; padding: 14px 0 16px; box-shadow: inset 0 2px 0 var(--noche); }
.f-k { font: 400 clamp(30px, 2.8vw, 40px)/1 var(--fd); }
.f-v { max-width: 34ch; }
@media (min-width: 760px) { .fechas ol { grid-template-columns: repeat(2, 1fr); gap: 0 24px; } }
.reemb { margin-top: 20px; max-width: 70ch; padding: 14px 16px; box-shadow: inset 0 0 0 1.5px var(--noche); font-weight: 600; }

/* Formulario de interesados */
.interes { margin-top: clamp(56px, 7vw, 96px); background: var(--fondo); padding: clamp(24px, 4vw, 48px); box-shadow: inset 0 0 0 1px var(--noche); display: grid; gap: 24px; scroll-margin-top: calc(var(--bar) + 16px); }
.interes-head { display: grid; gap: 10px; }
.interes-head p { max-width: 52ch; color: var(--ink-2); }
.atiende { display: flex; align-items: center; gap: 14px; padding: 12px; box-shadow: inset 0 0 0 1.5px var(--noche); max-width: 460px; }
.atiende-ini { display: grid; place-items: center; width: 64px; height: 64px; flex: none; background: var(--c, var(--naranja)); color: var(--noche); font: 400 32px/1 var(--fd); }
.atiende-ini.on-dark { color: var(--fondo); }
.atiende-l { font: 700 14px/1 var(--ft); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.atiende-n { font: 400 30px/1 var(--fd); }
.atiende-d { font-size: 16px; color: var(--ink-2); }
.form { display: grid; gap: 20px; }
.req-nota { font-size: 16px; color: var(--ink-2); }
.campos { display: grid; gap: 20px; }
@media (min-width: 760px) { .campos { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo label, .tipos legend { font: 700 16px/1.2 var(--ft); letter-spacing: .06em; text-transform: uppercase; }
.req { color: var(--error); }
.ayuda { font-size: 16px; color: var(--ink-2); }
.campo input, .campo textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 0; border-radius: 0; background: var(--campo); box-shadow: inset 0 0 0 1.5px var(--ink-2); font-size: 19px; transition: box-shadow 120ms ease; }
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--noche); outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--noche); }
.campo [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error); }
.error { color: var(--error); font-weight: 700; font-size: 16px; }
.tipos { border: 0; padding: 0; margin: 0; }
.tipos legend { padding: 0; margin-bottom: 8px; }
.tipos-g { display: grid; gap: 8px; }
@media (min-width: 640px) { .tipos-g { grid-template-columns: repeat(3, 1fr); } }
.tipo { position: relative; display: grid; gap: 2px; min-height: 64px; padding: 12px 14px; background: var(--campo); box-shadow: inset 0 0 0 1.5px var(--ink-2); cursor: pointer; transition: transform 120ms var(--ease), background-color 160ms ease, color 160ms ease; }
.tipo:active { transform: scale(.98); }
.tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tipo-k { font: 400 26px/1 var(--fd); }
.tipo-s { font-size: 16px; color: var(--ink-2); }
.tipo:has(input:checked) { background: var(--noche); color: var(--fondo); box-shadow: none; }
.tipo:has(input:checked) .tipo-s { color: var(--on-noche-2); }
.tipo:has(input:focus-visible) { outline: 3px solid var(--noche); outline-offset: 3px; }
.tipos[aria-invalid="true"] .tipo { box-shadow: inset 0 0 0 2px var(--error); }
@media (hover: hover) and (pointer: fine) { .tipo:not(:has(input:checked)):hover { box-shadow: inset 0 0 0 2px var(--noche); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.resumen, .fail { padding: 16px 18px; box-shadow: inset 0 0 0 2px var(--error); background: var(--error-bg); }
.resumen h4, .fail h4 { font-size: 28px; color: var(--error); margin-bottom: 6px; }
.resumen li { margin: 4px 0; }
.resumen a { color: var(--error); font-weight: 700; }
.enviar { justify-self: start; }
.ok { display: grid; gap: 12px; padding: clamp(20px, 3vw, 32px); background: var(--lago); color: var(--noche); }
.ok h4 { font-size: clamp(38px, 4vw, 56px); }
.ok .btn { justify-self: start; }
.ok .btn-line:hover { background: var(--noche); }
.ok:not([hidden]), .fail:not([hidden]) { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
@starting-style { .ok:not([hidden]), .fail:not([hidden]) { opacity: 0; transform: translateY(8px); } }
@media (min-width: 1020px) {
  .interes { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: start; }
  .interes-head, .atiende { grid-column: 1; }
  .form, .ok { grid-column: 2; grid-row: 1 / span 3; }
}

/* ---------- Galería ---------- */
.galeria { padding: 0 0 var(--band); }
.galeria > .flecos { margin-bottom: clamp(56px, 7vw, 96px); }
.galeria .lead { margin: 16px 0 28px; }
.gal-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; gap: 8px; }
.gal-slot { position: relative; display: grid; place-items: center; padding: 16px; text-align: center; outline: 2px dashed var(--ink-2); outline-offset: -2px; }
.gal-slot::before { content: ""; position: absolute; left: 12px; top: 12px; width: 14px; height: 14px; background: var(--slot); }
.gal-slot span { font: 700 14px/1 var(--ft); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.g1 { grid-column: span 2; grid-row: span 2; }
.g4 { grid-row: span 2; }
@media (min-width: 900px) {
  .gal-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; }
  .g1 { grid-column: span 2; grid-row: span 2; }
  .g2 { grid-column: span 1; }
  .g4 { grid-row: span 2; }
  .g6 { grid-column: span 2; }
}

/* ---------- Aliados ---------- */
.aliados { padding: 0 0 var(--band); }
.aliados .h-l { margin-bottom: 28px; }
/* Marquesina de aliados: sin movimiento (reducido o sin JS) es una fila que se acomoda; con movimiento, se desliza lento. */
.al-marquee { padding: 20px 0; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); margin-bottom: 24px; overflow: hidden; }
.al-move { display: flex; width: max-content; }
.al-track { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex: none; }
.al-track img { height: 64px; width: auto; }
.al-track .al-sello { clip-path: circle(47% at 50% 50%); }
@media (min-width: 760px) { .al-track img { height: 80px; } }
.al-dup { display: none; }
.is-marquee .al-dup { display: flex; }
.is-marquee .al-move { animation: al-desliza 48s linear infinite; }
.is-marquee .al-marquee:hover .al-move, .is-marquee .al-marquee:focus-within .al-move, .al-paused .al-move { animation-play-state: paused; }
@keyframes al-desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html:not(.is-marquee) .al-move { width: auto; }
html:not(.is-marquee) .al-track { flex-wrap: wrap; gap: 16px 28px; padding: 0; }
.al-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.al-pausa { min-height: 44px; padding: 0 14px; border: 0; background: none; font: 700 15px/1 var(--ft); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--magenta); }

/* Barra de avance: un hilo de papel de colores bajo la barra superior */
.progreso { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; overflow: hidden; pointer-events: none; }
.progreso-i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--magenta) 0 16.66%, var(--naranja) 16.66% 33.33%, var(--sol) 33.33% 50%, var(--lago) 50% 66.66%, var(--cielo) 66.66% 83.33%, var(--morado) 83.33% 100%); }
html:not(.has-progress) .progreso { display: none; }

/* Tic de los segundos: un hilo Sol que se tiende cada segundo */
.cd-u { position: relative; overflow: hidden; }
.cd-tick { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sol); transform: scaleX(0); transform-origin: 0 50%; }
.cd-tick.is-run { animation: cd-tick 1s linear; }
@keyframes cd-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Subrayado que se tiende (solo puntero fino) */
@media (hover: hover) and (pointer: fine) {
  .lnk, .pie-nav a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; position: relative; }
  .lnk::after, .pie-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--magenta); transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--ease); }
  .pie-nav a::after { background: var(--sol); bottom: 10px; }
  .pie-nav a { background-position: 0 calc(100% - 10px); }
  .lnk:hover::after, .pie-nav a:hover::after { transform: scaleX(1); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .menu a { position: relative; }
  .menu a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--magenta); transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--ease); }
  .menu a:hover::after { transform: scaleX(1); }
}
/* Botón principal magnético: usa la propiedad translate (no transform), así no choca con scale de :active */
.btn-sol, .btn-noche { translate: var(--mx, 0) var(--my, 0); transition: transform 120ms var(--ease), background-color 160ms ease, color 160ms ease, translate 260ms var(--ease); }

/* ---------- Preguntas ---------- */
.preguntas { padding: var(--band) 0; background: var(--niebla); box-shadow: inset 0 1px 0 var(--line); }
.faq-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } }
.faq { box-shadow: inset 0 2px 0 var(--noche); }
.faq:last-child { box-shadow: inset 0 2px 0 var(--noche), inset 0 -2px 0 var(--noche); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 0; cursor: pointer; list-style: none; font: 700 clamp(20px, 1.8vw, 24px)/1.25 var(--ft); }
.faq summary::-webkit-details-marker { display: none; }
.faq-x { position: relative; width: 22px; height: 22px; flex: none; transition: transform 200ms var(--ease); }
.faq-x::before, .faq-x::after { content: ""; position: absolute; background: var(--noche); }
.faq-x::before { left: 0; right: 0; top: 10px; height: 2.5px; }
.faq-x::after { top: 0; bottom: 0; left: 10px; width: 2.5px; }
.faq[open] .faq-x { transform: rotate(45deg); }
.faq p { max-width: 60ch; padding: 0 0 20px; font-size: 19px; }
.faq p a { font-weight: 700; text-decoration-color: var(--magenta); }

/* ---------- Pie (Noche: el cierre) ---------- */
.pie { background: var(--noche); color: var(--fondo); padding-bottom: 32px; }
.pie > .flecos { background-color: var(--niebla); }
.pie-vol { max-width: var(--max); margin: 40px auto 0; padding: 0 var(--gutter); }
.pie-vol .mt-volcanes { width: 100%; height: auto; }
.pie-grid { display: grid; gap: 36px; padding-top: 40px; padding-bottom: 32px; }
@media (min-width: 900px) { .pie-grid { grid-template-columns: 5fr 4fr 3fr; } }
.pie-l { font: 700 14px/1 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--on-noche-2); margin-bottom: 12px; }
.pie-org img { width: 160px; height: auto; margin-bottom: 14px; }
.pie-comite { font: 400 32px/1 var(--fd); text-transform: uppercase; }
.pie-ciudad { color: var(--on-noche-2); margin-top: 6px; }
.hashtag { font: 400 clamp(30px, 3vw, 40px)/1 var(--fd); color: var(--sol); margin-bottom: 24px; overflow-wrap: anywhere; }
.redes { display: flex; flex-wrap: wrap; gap: 8px; }
.red { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; box-shadow: inset 0 0 0 1px rgba(211, 206, 226, .5); color: var(--on-noche-2); font-weight: 600; }
.pie-nota { margin-top: 10px; font-size: 16px; color: var(--on-noche-2); }
.pie-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--sol); }
.pie :focus-visible { outline-color: var(--sol); }
.pie-borrador { padding-top: 20px; box-shadow: inset 0 1px 0 rgba(211, 206, 226, .25); font-size: 16px; color: var(--on-noche-2); }

/* ---------- Estado «armado» del héroe (solo con movimiento; app.js lo dispara) ---------- */
.js-motion .hero .h-rise { opacity: 0; transform: translateY(16px); }
.js-motion .hero .lg-gajo, .js-motion .hero .lg-flecos, .js-motion .hero .lg-hub { opacity: 0; }
.js-motion .hero .kite-string { stroke-dashoffset: 1; }
.js-motion .hero .flecos-hero { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .nav .menu, .faq-x { transition: none !important; }
}

/* ---------- Acciones secundarias del héroe ---------- */
.hero-mas { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.hero-mas li { display: flex; }
.hero-mas .lnk { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; }
.lnk-btn { border: 0; padding: 0; background: none; color: inherit; font: 700 18px/1.2 var(--ft); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: var(--magenta); cursor: pointer; min-height: 44px; }

/* ---------- El día, hora por hora ---------- */
.dia { margin-top: clamp(40px, 5vw, 64px); }
.dia .h-m { margin-bottom: 20px; }
.dia-l { display: grid; counter-reset: none; }
.dia-i { position: relative; display: grid; gap: 2px; padding: 0 0 22px 30px; }
.dia-i::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; background: var(--c, var(--noche)); }
.dia-i::after { content: ""; position: absolute; left: 6px; top: 26px; bottom: 2px; width: 2px; background: var(--line); }
.dia-i:last-child::after { display: none; }
.dia-1 { --c: var(--naranja); } .dia-2 { --c: var(--magenta); } .dia-3 { --c: var(--lago); } .dia-4 { --c: var(--cielo); } .dia-5 { --c: var(--morado); }
.dia-k { font: 400 clamp(30px, 2.6vw, 40px)/1 var(--fd); }
.dia-v { max-width: 32ch; }
.dia-nota { margin-top: 6px; font-size: 16px; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 900px) {
  .dia-l { grid-template-columns: repeat(5, 1fr); gap: 0 20px; }
  .dia-i { padding: 30px 0 0; }
  .dia-i::before { top: 0; }
  .dia-i::after { left: 20px; right: -20px; top: 6px; bottom: auto; width: auto; height: 2px; }
}

/* ---------- Ficha de zona del mapa ---------- */
.zona-info { padding: 0; background: none; box-shadow: none; min-height: 0; }
.zona-vacia { padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line); background: var(--niebla); }
.zona-ficha { display: flex; gap: 14px; padding: 16px; box-shadow: inset 0 0 0 1.5px var(--noche); background: var(--fondo); }
.zona-key { width: 28px; height: 28px; flex: none; box-shadow: inset 0 0 0 1px rgba(27, 21, 48, .35); }
.zona-h { font-size: 30px; margin-bottom: 4px; }
.zona-ficha p { margin-bottom: 4px; max-width: 48ch; }

/* ---------- Formulario en dos pasos ---------- */
.pasos { display: grid; gap: 8px; }
.pasos-t { font: 700 15px/1.2 var(--ft); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pasos-b { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pasos-s { height: 6px; background: var(--line); }
.pasos-s.is-on { background: var(--magenta); }
.paso { border: 0; margin: 0; padding: 0; display: grid; gap: 20px; min-width: 0; }
.paso-h { padding: 0; font: 400 clamp(28px, 2.6vw, 36px)/1 var(--fd); text-transform: uppercase; margin-bottom: 4px; }
.form:not(.is-pasos) .paso + .paso { margin-top: 12px; }
.paso-sig { justify-self: start; }
.paso-resumen { padding: 10px 14px; background: var(--niebla); font-weight: 600; }
.tipos-l { font: 700 16px/1.2 var(--ft); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.form-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.ok h5 { font: 400 26px/1 var(--fd); text-transform: uppercase; margin-top: 4px; }
.ok-pasos { counter-reset: ok; display: grid; gap: 8px; }
.ok-pasos li { counter-increment: ok; position: relative; padding-left: 34px; max-width: 52ch; }
.ok-pasos li::before { content: counter(ok); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; background: var(--noche); color: var(--fondo); font: 400 18px/1 var(--fd); }
.ok-atiende { background: var(--fondo); }

/* ---------- Preguntas: buscador ---------- */
.faq-buscar { display: grid; gap: 6px; margin-bottom: 20px; }
.faq-buscar label { font: 700 16px/1.2 var(--ft); letter-spacing: .06em; text-transform: uppercase; }
.faq-q-w { position: relative; }
.faq-q-w input { width: 100%; min-height: 52px; padding: 12px 52px 12px 14px; border: 0; border-radius: 0; background: var(--campo); box-shadow: inset 0 0 0 1.5px var(--ink-2); font-size: 19px; -webkit-appearance: none; appearance: none; }
.faq-q-w input::-webkit-search-cancel-button { -webkit-appearance: none; }
.faq-q-w input:focus-visible { outline: 3px solid var(--noche); outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--noche); }
.faq-x-btn { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border: 0; background: none; }
.faq-x-btn::before, .faq-x-btn::after { content: ""; position: absolute; left: 12px; right: 12px; top: 21px; height: 2.5px; background: var(--noche); transform: rotate(45deg); }
.faq-x-btn::after { transform: rotate(-45deg); }
.faq-n { min-height: 1.4em; font-size: 16px; color: var(--ink-2); }
.faq-vacio { padding: 16px; outline: 2px dashed var(--ink-2); outline-offset: -2px; max-width: 60ch; }

/* ---------- Pie: compartir ---------- */
.pie-share { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.btn-line-claro { background: transparent; color: var(--fondo); box-shadow: inset 0 0 0 2px var(--fondo); }
@media (hover: hover) and (pointer: fine) { .btn-line-claro:hover { background: var(--fondo); color: var(--noche); } }

/* ---------- Barra flotante: CTA (móvil) y volver arriba ---------- */
.flota { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--fondo); box-shadow: inset 0 1px 0 var(--line); transform: translateY(calc(100% + 40px)); transition: transform 240ms var(--ease); }
.flota.is-on { transform: none; }
.flota-cta { flex: 1; }
.subir { display: grid; place-items: center; width: 52px; height: 52px; flex: none; background: var(--fondo); box-shadow: inset 0 0 0 2px var(--noche); transition: transform 120ms var(--ease); }
.subir:active { transform: scale(.97); }
.subir-k { width: 28px; height: 28px; background: url(favicon.svg) center / contain no-repeat; }
@media (max-width: 899px) { .pie { padding-bottom: calc(32px + 72px + env(safe-area-inset-bottom)); } }
@media (min-width: 900px) {
  .flota { left: auto; right: 24px; bottom: 24px; padding: 0; background: none; box-shadow: none; }
  .flota-cta { display: none; }
  .flota.is-on { transform: none; }
}
@media (hover: hover) and (pointer: fine) { .subir:hover .subir-k { transform: rotate(30deg); } .subir-k { transition: transform 260ms var(--ease); } }

/* ---------- Aviso ---------- */
.toast { position: fixed; z-index: 45; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); max-width: min(92vw, 420px); padding: 12px 18px; background: var(--noche); color: var(--fondo); font-weight: 600; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 140ms var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); transition-duration: 200ms; }
.toast:empty { display: none; }
@media (min-width: 900px) { .toast { bottom: 32px; } }

.st-bajo .fechas { margin-top: 0; }
.sel-fechas b { font-weight: 700; }
@media (min-width: 1020px) { .is-tabs .precio[aria-selected="true"] .precio-go { transform: rotate(-45deg); } }

/* ---------- Cinta superior con cuenta regresiva ---------- */
.cinta { background: var(--magenta); color: var(--fondo); }
.cinta-in { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 22px; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 7px var(--gutter); font: 600 15px/1.3 var(--ft); letter-spacing: .03em; text-align: center; }
.cinta-in p { position: relative; }
.cinta-in p + p::before { content: ""; position: absolute; left: -13px; top: 50%; width: 5px; height: 5px; background: var(--sol); transform: translateY(-50%); }
.cinta-cd b { font: 400 19px/1 var(--fd); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .cinta-g { display: none; } .cinta-cd:not([hidden]) ~ .cinta-f { display: none; } }

/* ---------- Fotos de referencia ---------- */
.ref { position: relative; overflow: hidden; margin: 0; background: var(--line); }
.ref img { width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--ease); }
.ref-tag { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; background: rgba(27, 21, 48, .78); color: var(--fondo); font: 600 12px/1.2 var(--ft); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .cc:hover .ref img, .pt-foto:hover .ref img, .gal-foto:hover .ref img { scale: 1.04; } }

/* ---------- El cartel ---------- */
.cartel { margin-bottom: clamp(32px, 4vw, 48px); }
.cartel-head { display: grid; gap: 10px; margin-bottom: 20px; }
.cartel-head p { max-width: 60ch; color: var(--ink-2); }
.cartel-g { display: grid; gap: 12px; }
.cc { position: relative; display: grid; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--noche); }
.cc::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 8px; background: var(--c); }
.cc:nth-child(1) { --c: var(--magenta); } .cc:nth-child(2) { --c: var(--naranja); } .cc:nth-child(3) { --c: var(--cielo); }
.cc-foto { aspect-ratio: 4 / 3; }
.cc-txt { display: grid; gap: 2px; padding: 16px 18px 20px; }
.cc-cat { font: 400 clamp(32px, 3vw, 42px)/1 var(--fd); text-transform: uppercase; margin-bottom: 4px; }
.cc-art { font-weight: 700; }
.cc-hora { color: var(--ink-2); }
@media (min-width: 760px) { .cartel-g { grid-template-columns: repeat(3, 1fr); } }

/* Mosaicos de Programa con foto */
.pt-foto { padding: 0; align-content: start; gap: 0; }
.pt-img { aspect-ratio: 16 / 10; }
.pt-txt { display: grid; gap: 10px; padding: 22px 24px 26px; }
@media (min-width: 900px) {
  .prog-grid .pt-foto { grid-column: span 6; min-height: 0; }
  .prog-grid .pt-pronto { grid-column: span 12; min-height: 0; }
}

/* Qué es: foto de la calle con el quetzal encima */
.que { overflow-x: clip; }
.que-media { position: relative; }
.que-foto { aspect-ratio: 4 / 3; }
.que-media .que-qz { position: absolute; z-index: 1; right: -8%; top: -18%; width: 64%; margin: 0; pointer-events: none; }
@media (min-width: 900px) { .que-media .que-qz { width: 60%; right: -10%; top: -22%; margin: 0; } }
.tira { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.tira-d { position: relative; max-width: 26ch; font: 600 16px/1.3 var(--ft); }
.tira.on-dark .tira-d { color: var(--fondo); }
.tira.on-light .tira-d { color: var(--noche); }

/* ---------- Vívelo y compártelo ---------- */
.vivelo { padding: 0 0 var(--band); }
.viv-grid { display: grid; gap: 28px; align-items: center; }
.viv-slot { position: relative; display: grid; place-items: center; align-content: center; gap: 14px; aspect-ratio: 16 / 9; background: var(--noche); color: var(--fondo); overflow: hidden; }
.viv-slot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fleco); background: url(flecos.svg) repeat-x left top / 72px 26px; }
.viv-play { width: 0; height: 0; border-left: 34px solid var(--sol); border-top: 21px solid transparent; border-bottom: 21px solid transparent; margin-left: 8px; }
.viv-t { font: 400 clamp(24px, 2.4vw, 32px)/1 var(--fd); text-transform: uppercase; letter-spacing: .02em; }
.viv-copy { display: grid; gap: 18px; }
.viv-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media (min-width: 900px) { .viv-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } }

/* ---------- Patrocinador oficial ---------- */
.oficial { display: grid; gap: 18px; align-items: center; margin-bottom: 28px; padding: 22px; background: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--noche), inset 0 8px 0 var(--sol); }
.of-logo { display: grid; place-items: center; width: 180px; height: 110px; outline: 2px dashed var(--ink-2); outline-offset: -2px; color: var(--ink-2); font: 700 14px/1 var(--ft); letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.of-txt { display: grid; gap: 6px; }
.of-nombre { font-size: clamp(34px, 3.6vw, 52px); }
.of-rubro { font: 700 15px/1.3 var(--ft); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.of-gracias { max-width: 52ch; }
@media (min-width: 760px) { .oficial { grid-template-columns: 200px minmax(0, 1fr); padding: 28px 32px; } }

/* Galería con fotos de referencia */
.gal-foto { padding: 0; outline: none; }
.gal-foto::before { display: none; }
.gal-foto .ref { width: 100%; height: 100%; }

/* =========================================================
   Versión 4: motivos guatemaltecos y color por sección
   ========================================================= */
/* Temas de sección (contraste AA verificado con accesslint) */
.tema { --ink: var(--fondo); --ink-2: #ECE8F4; --btn-ink: var(--fondo); color: var(--ink); }
.tema-cielo { background: var(--cielo); }
.tema-morado { background: var(--morado); }
.tema-magenta { background: var(--magenta); --ink-2: #FFF0F5; }
.tema-lago { background: var(--lago); --ink: var(--noche); --ink-2: var(--noche); --btn-ink: var(--noche); }
.btn-line { color: var(--btn-ink, var(--noche)); box-shadow: inset 0 0 0 2px var(--btn-ink, var(--noche)); }
@media (hover: hover) and (pointer: fine) {
  .tema:not(.tema-lago) .btn-line:hover { background: var(--fondo); color: var(--noche); }
}
.tema:not(.tema-lago) :focus-visible { outline-color: var(--sol); }
.tema .lnk, .tema .lnk-btn, .tema .faq p a { text-decoration-color: var(--sol); }
.tema-lago .lnk, .tema-lago .lnk-btn { text-decoration-color: var(--noche); }
/* Tarjetas claras dentro de secciones de color vuelven a tinta oscura */
.tema .cc, .tema .faq-q-w input, .tema .zona-ficha { --ink-2: #4A4462; color: var(--noche); }
.tema .pt-pronto { outline-color: var(--ink); }
.tema .pt-pronto h3, .tema .pt-pronto p { color: var(--ink); }
.tema .dia-4 { --c: var(--sol); }
.tema .dia-i::after { background: rgba(251, 250, 247, .35); }
.preguntas.tema { box-shadow: none; }
.tema .faq { box-shadow: inset 0 2px 0 var(--ink); }
.tema .faq:last-of-type { box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }
.tema .faq-x::before, .tema .faq-x::after { background: var(--ink); }
.tema .faq-vacio { outline-color: var(--ink); }
.prog.tema { padding-top: 0; }
.prog.tema > .wrap { padding-top: var(--band); }
.preguntas.tema { padding-top: 0; }
.preguntas.tema > .wrap { padding-top: var(--band); }
.galeria > .flecos { background-color: var(--sol); }
.pie > .flecos { background-color: var(--magenta); }

/* Hileras de jaspe (orillas tejidas) y franja de camioneta */
.jaspe { height: 32px; background: url(jaspe.svg) repeat-x left top / 40px 32px; transform-origin: 0 50%; }
.camioneta { height: 30px; margin-bottom: clamp(48px, 6vw, 80px); background: url(camioneta.svg) repeat-x left top / 96px 30px; transform-origin: 0 50%; }

/* Lago de Atitlán con sus tres volcanes, entre el héroe y Qué es */
.paisaje { position: relative; height: clamp(110px, 15vw, 220px); overflow: hidden; }
.paisaje .atitlan { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }

/* Marimba en el cartel */
.cartel-head { grid-template-columns: minmax(0, 1fr); align-items: end; }
.cartel-marimba { width: min(100%, 360px); }
.cartel-marimba .mt-marimba { width: 100%; height: auto; }
.mb-key { transform-box: fill-box; transform-origin: 50% 0; }
@media (min-width: 900px) { .cartel-head { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } }

/* El quetzal que cruza entre secciones */
.vivelo { position: relative; overflow-x: clip; }
.vuelo { position: absolute; z-index: 2; top: -70px; right: 6%; width: clamp(160px, 22vw, 300px); pointer-events: none; }
.vuelo .qz { width: 100%; height: auto; overflow: visible; }
.vivelo > .wrap { padding-top: var(--band); }

/* Alfombra de aserrín en el espacio del video */
.viv-slot { background: var(--noche) url(alfombra.svg) repeat center / 64px 64px; }
.viv-slot .viv-play, .viv-slot .viv-t { position: relative; z-index: 1; }
.viv-slot::before { content: ""; position: absolute; inset: 22% 18%; background: var(--noche); box-shadow: inset 0 0 0 3px var(--sol); }

/* Íconos de artesanía en el panel de vendedor */
.sel-art { display: grid; gap: 10px; padding-bottom: 6px; box-shadow: inset 0 -1px 0 var(--line); }
.sel-art p { font-weight: 700; }
.art-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.art-g li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 15px; line-height: 1.2; }
.art-i { width: 48px; height: 48px; }
.art-i svg { width: 100%; height: 100%; }
.sel-panel .art-g li { padding-left: 0; margin: 0; }
.sel-panel .art-g li::before { display: none; }

/* Pie: los volcanes con parallax */
.pie-vol { overflow: hidden; }

/* =========================================================
   Versión 5: el inicio a todo color (noche de Año Nuevo)
   ========================================================= */
.tema-noche { background: var(--noche); --ink: var(--fondo); --ink-2: #D3CEE2; --btn-ink: var(--fondo); }
.hero.tema-noche { color: var(--fondo); }
.hero .fact-gratis::before { box-shadow: none; }
.hero .kite-string { stroke: var(--sol); }
/* Los flecos del héroe cuelgan como guirnalda sobre la noche; abajo, Atitlán de noche y la orilla de jaspe. */
.paisaje { background: var(--noche); }
.paisaje .at-back path { fill: #2C2350; opacity: 1; }
.jaspe-hero { margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .tema:not(.tema-lago) .lnk:not(.lnk-btn) { background: linear-gradient(var(--sol), var(--sol)) 0 100% / 100% 2px no-repeat; }
  .tema:not(.tema-lago) .lnk::after { background: var(--fondo); }
}

/* =========================================================
   Versión 6: recursos reales del Comité
   ========================================================= */
/* Momento quetzal: video real en loop, con placa de texto y pausa */
.quetzal-mo { position: relative; overflow: hidden; background: var(--noche); aspect-ratio: 16 / 10; max-height: 78svh; width: 100%; }
.qzm-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qzm-plate { position: absolute; left: var(--gutter); bottom: var(--gutter); max-width: min(520px, calc(100% - var(--gutter) * 2 - 60px)); padding: 18px 20px 20px; background: var(--noche); color: var(--fondo); box-shadow: inset 0 6px 0 var(--sol); display: grid; gap: 8px; }
.qzm-plate .h-m { font-size: clamp(28px, 3.2vw, 46px); }
.qzm-plate p { color: #D3CEE2; }
.qzm-btn { position: absolute; right: var(--gutter); bottom: var(--gutter); width: 48px; height: 48px; border: 0; background: var(--noche); box-shadow: inset 0 0 0 2px var(--fondo); display: grid; place-items: center; transition: transform 120ms var(--ease); }
.qzm-btn:active { transform: scale(.97); }
.qzm-btn:focus-visible { outline-color: var(--sol); }
.qzm-ic { width: 14px; height: 16px; border-left: 4px solid var(--fondo); border-right: 4px solid var(--fondo); }
.qzm-btn[aria-pressed="true"] .qzm-ic { width: 0; height: 0; border-right: 0; border-left: 14px solid var(--fondo); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
@media (max-width: 759px) {
  .quetzal-mo { aspect-ratio: auto; max-height: none; display: grid; }
  .qzm-v { position: relative; inset: auto; aspect-ratio: 16 / 10; height: auto; }
  .qzm-plate { position: relative; left: auto; bottom: auto; max-width: none; margin: 0; }
  .qzm-btn { bottom: auto; top: 12px; right: 12px; }
}

/* El Comité */
.comite { padding: var(--band) 0; }
.com-grid { display: grid; gap: 32px; align-items: center; }
.com-foto { margin: 0; box-shadow: inset 0 0 0 1px rgba(211, 206, 226, .25); }
.com-foto img { width: 100%; height: auto; }
.com-copy { display: grid; gap: 18px; }
.com-org { display: flex; align-items: center; gap: 16px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(211, 206, 226, .3); }
.com-org img { width: 96px; height: auto; flex: none; }
.com-org p { font-weight: 600; color: var(--ink-2); }
@media (min-width: 900px) { .com-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }

/* =========================================================
   Versión 7: vidrio esmerilado sobre el tejido (glassmorfismo)
   El vidrio va encima de algo que se ve a través: fotos o fajas de jaspe.
   Esquinas rectas, filo claro de 1px, sombra suave tintada de Noche con desplazamiento (nunca halo ni glow).
   Contraste AA calculado contra el peor fondo posible (Noche detrás de un vidrio claro, Sol detrás de uno oscuro).
   ========================================================= */
:root {
  --vidrio: rgba(251, 250, 247, .74);
  --vidrio-denso: rgba(251, 250, 247, .8);
  --vidrio-barra: rgba(251, 250, 247, .85);
  --vidrio-menu: rgba(251, 250, 247, .9);
  --vidrio-noche: rgba(27, 21, 48, .72);
  --vidrio-plato: rgba(27, 21, 48, .82);
  --vidrio-aviso: rgba(27, 21, 48, .86);
  --vidrio-boton: rgba(251, 250, 247, .5);
  --vidrio-boton-noche: rgba(251, 250, 247, .06);
  --filo: rgba(255, 255, 255, .62);
  --filo-noche: rgba(251, 250, 247, .24);
  --sombra-vidrio: 0 18px 36px -22px rgba(27, 21, 48, .55);
  --faja: url(jaspe.svg) repeat-x left top / 100px 80px;
}

/* Desenfoque: 10px en móvil, 16px desde 900px. Valores literales (Safari no siempre lee var() en -webkit-backdrop-filter). */
.top::before, .toast, .cc-txt, .pt-foto .pt-txt, .viv-slot::before, .precio, .sel-panel, .interes, .com-copy, .oficial {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (min-width: 900px) {
  .top::before, .toast, .cc-txt, .pt-foto .pt-txt, .precio, .sel-panel, .interes, .com-copy, .oficial, .subir {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

/* Barra superior */
.top::before { background: var(--vidrio-barra); box-shadow: inset 0 -1px 0 rgba(27, 21, 48, .12), 0 12px 24px -22px rgba(27, 21, 48, .7); }
@media (max-width: 899px) {
  .menu { background: var(--vidrio-menu); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 var(--line), var(--sombra-vidrio); }
  .flota { background: var(--vidrio-denso); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 var(--filo), 0 -12px 24px -22px rgba(27, 21, 48, .7); }
  .subir { background: transparent; }
}
.subir { background: var(--vidrio-denso); box-shadow: inset 0 0 0 2px var(--noche), var(--sombra-vidrio); }
.toast { background: var(--vidrio-aviso); box-shadow: inset 0 0 0 1px var(--filo-noche), var(--sombra-vidrio); }

/* Botones secundarios: vidrio translúcido con filo (detrás solo hay color plano, así que no llevan desenfoque) */
.btn-line { background: var(--vidrio-boton); }
.tema:not(.tema-lago) .btn-line, .btn-line-claro { background: var(--vidrio-boton-noche); box-shadow: inset 0 0 0 2px var(--fondo); }
@media (hover: hover) and (pointer: fine) {
  .btn-line:hover { background: var(--noche); }
  .tema:not(.tema-lago) .btn-line:hover, .btn-line-claro:hover { background: var(--fondo); color: var(--noche); }
}

/* Programa · El cartel: el vidrio flota sobre la parte baja de la foto */
.cc { background: var(--noche); box-shadow: none; overflow: hidden; }
.cc-foto { grid-area: 1 / 1; aspect-ratio: 1 / 1; }
.cc-txt { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; margin: 10px; padding: 14px 16px 16px; background: var(--vidrio-denso); box-shadow: inset 0 0 0 1px var(--filo), var(--sombra-vidrio); }
/* Programa · Área infantil y Comida: vidrio claro con la barra de su gajo */
.pt-foto { display: grid; background: var(--noche); overflow: hidden; }
.pt-foto .pt-img { grid-area: 1 / 1; aspect-ratio: 4 / 5; }
.pt-foto .pt-txt { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; margin: 10px; padding: 20px 20px 22px; background: var(--vidrio); color: var(--noche); box-shadow: inset 0 6px 0 var(--c), inset 0 0 0 1px var(--filo), var(--sombra-vidrio); }
.pt-ninos { --c: var(--lago); } .pt-puestos { --c: var(--sol); }
@media (min-width: 900px) { .pt-foto .pt-img { aspect-ratio: 16 / 11; } .pt-foto .pt-txt { margin: 14px; } }
@media (hover: hover) and (pointer: fine) { .cc:hover .ref img, .pt-foto:hover .ref img { scale: 1; } }

/* Vívelo: placa de vidrio Noche sobre la alfombra de aserrín */
.viv-slot::before { background: var(--vidrio-plato); box-shadow: inset 0 0 0 2px var(--sol), var(--sombra-vidrio); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
@media (max-width: 759px) { .viv-slot::before { inset: 20% 5%; } }

/* Stands: dos fajas de jaspe pasan por debajo del selector y una por debajo del formulario */
.stands { overflow-x: clip; --sombra-vidrio: 0 18px 36px -22px rgba(27, 21, 48, .3); }
.stands > .wrap { position: relative; }
.selector { position: relative; }
.selector::before, .selector::after, .stands > .wrap::after { content: ""; position: absolute; z-index: 0; left: calc(50% - 50vw); width: 100vw; height: 80px; background: var(--faja); pointer-events: none; }
.selector::before { top: 16%; }
.selector::after { top: 64%; }
.st-bajo { position: relative; }
.stands > .wrap::after { display: none; }
.st-bajo::after { content: ""; position: absolute; z-index: 0; left: calc(50% - 50vw); width: 100vw; height: 64px; top: calc(100% + clamp(56px, 7vw, 96px) + clamp(24px, 4vw, 48px) - 64px); background: url(jaspe.svg) repeat-x left top / 80px 64px; pointer-events: none; }
.precios, .sel-panels, .interes { position: relative; z-index: 1; }
.precios { gap: 8px; }
.precio { padding: 18px 16px 22px; background: var(--vidrio); background: color-mix(in srgb, var(--c) 12%, var(--vidrio)); box-shadow: inset 0 0 0 1px var(--filo), var(--sombra-vidrio); }
.is-tabs .precio[aria-selected="true"] { background: var(--noche); box-shadow: var(--sombra-vidrio); -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-tabs .precio[aria-selected="true"] + .precio { box-shadow: inset 0 0 0 1px var(--filo), var(--sombra-vidrio); }
@media (hover: hover) and (pointer: fine) { .is-tabs .precio[aria-selected="false"]:hover { background: var(--vidrio-menu); } }
.sel-panel { background: var(--vidrio-denso); box-shadow: inset 0 0 0 1px var(--filo), var(--sombra-vidrio); }
.interes { background: var(--vidrio-denso); box-shadow: inset 0 0 0 1px var(--filo), var(--sombra-vidrio); }

/* El Comité: el texto en vidrio Noche se monta sobre la foto real */
.com-copy { position: relative; z-index: 1; margin: -72px 12px 0; padding: clamp(22px, 3vw, 36px); background: var(--vidrio-noche); box-shadow: inset 0 0 0 1px var(--filo-noche), var(--sombra-vidrio); }
/* En escritorio el texto va junto a la foto (no encima de los miembros del Comité): sin nada detrás, no lleva desenfoque */
@media (min-width: 900px) { .com-copy { margin: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--filo-noche); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Aliados: el patrocinador oficial en vidrio sobre una faja de jaspe */
.aliados { padding-top: var(--band); background: var(--faja); background-position: left calc(var(--band) + clamp(42px, 5.2vw, 76px) * .92 + 68px); }
.oficial { position: relative; background: var(--vidrio); background: color-mix(in srgb, var(--sol) 14%, var(--vidrio)); box-shadow: inset 0 0 0 1px rgba(27, 21, 48, .2), inset 0 8px 0 var(--sol), var(--sombra-vidrio); }

/* Sin backdrop-filter o con transparencia reducida: el vidrio pasa a casi opaco */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --vidrio: rgba(251, 250, 247, .95); --vidrio-denso: rgba(251, 250, 247, .96); --vidrio-barra: rgba(251, 250, 247, .97); --vidrio-menu: rgba(251, 250, 247, .97); --vidrio-noche: rgba(27, 21, 48, .94); --vidrio-plato: rgba(27, 21, 48, .92); --vidrio-aviso: rgba(27, 21, 48, .96); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --vidrio: rgba(251, 250, 247, .95); --vidrio-denso: rgba(251, 250, 247, .96); --vidrio-barra: rgba(251, 250, 247, .97); --vidrio-menu: rgba(251, 250, 247, .97); --vidrio-noche: rgba(27, 21, 48, .94); --vidrio-plato: rgba(27, 21, 48, .92); --vidrio-aviso: rgba(27, 21, 48, .96); }
}

/* ================= Versión 8: esquinas suaves, fotos reales y menos borrador ================= */
:root { --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-pill: 999px; }
/* Botones y controles: redondeados, como cuentas de un collar */
.btn, .lang, .top-cta, .flota-cta, .menu-btn, .al-pausa, .qzm-btn { border-radius: var(--r-pill); }
.subir { border-radius: 50%; overflow: hidden; }
.campo input, .campo textarea, .faq-q-w input { border-radius: var(--r-s); }
.tipo, .zbtn, .zona-info, .zona-ficha, .toast, .resumen, .fail, .ok, .atiende, .atiende-ini { border-radius: var(--r-s); }
/* Tarjetas y paneles */
.cd-u { border-radius: var(--r-s); overflow: hidden; }
.precio, .sel-panel, .interes, .cc, .pt, .com-copy, .viv-foto, .mapa-svg, .grupo { border-radius: var(--r-l); overflow: hidden; }
.cc-txt, .pt-foto .pt-txt, .qzm-plate { border-radius: var(--r-m); }
.ref, .que-foto, .com-foto, .gal-slot, .gal-foto .ref { border-radius: var(--r-l); overflow: hidden; }
.com-foto img { border-radius: var(--r-l); }
.top::before { border-radius: 0 0 var(--r-m) var(--r-m); }
.menu { border-radius: 0 0 var(--r-m) var(--r-m); }
/* Tarjetas de color sin foto (comida y niños): no hay fotos reales de esas zonas */
.pt-color { min-height: 220px; }
@media (min-width: 900px) { .prog-grid .pt-color { grid-column: span 6; min-height: 240px; } }
/* Vívelo: foto real en lugar del espacio del video */
.viv-foto { margin: 0; aspect-ratio: 16 / 10; background: var(--noche); }
.viv-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Galería: fotos reales, sin marco punteado */
.gal-foto { padding: 0; outline: 0; }
.gal-foto::before { content: none; }
/* Aliados: logos oficiales con su forma, sin recorte para los que no son sellos */
.al-track img { height: 72px; }
@media (min-width: 760px) { .al-track img { height: 92px; } }
/* v8: sin el bloque del patrocinador pendiente, la faja de jaspe quedaba detrás de los logos */
.aliados { background: var(--fondo); }
.al-marquee { padding: 18px 0; }
.cc-foto img { object-position: center 70%; }

/* ================= Versión 9 ================= */
/* Stands: sin las fajas de jaspe detrás de precios y formulario (estorbaban) */
.selector::before, .selector::after, .st-bajo::after { display: none; }
.interes { margin-top: clamp(40px, 6vw, 72px); }
/* Cómo llegar */
.btn-magenta { background: var(--magenta); color: #fff; }
.btn-magenta:hover { background: #B81E52; }
.llegar { padding: var(--band) 0; background: linear-gradient(180deg, #FFF6E3 0%, #FDEBCB 100%); }
.ll-grid { display: grid; gap: 20px; }
.ll-card { display: grid; align-content: center; gap: 18px; padding: clamp(24px, 3vw, 40px); background: #FFFAF0; border-radius: var(--r-l); box-shadow: 0 1px 0 rgba(27, 21, 48, .06), 0 18px 36px -24px rgba(27, 21, 48, .28); }
.ll-k { font: 700 16px/1 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); }
.ll-card .h-l { color: var(--noche); }
.ll-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ll-mapa { min-height: 320px; border-radius: var(--r-l); overflow: hidden; background: var(--line); box-shadow: 0 18px 36px -24px rgba(27, 21, 48, .28); }
.ll-mapa iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.ll-info { display: grid; gap: 12px; margin-top: 20px; padding: 0; list-style: none; }
.ll-info li { display: grid; gap: 8px; padding: 20px 22px; background: #fff; border-radius: var(--r-m); box-shadow: inset 5px 0 0 var(--sol), 0 12px 28px -22px rgba(27, 21, 48, .3); }
.ll-ik { font: 700 15px/1 var(--ft); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); }
.ll-iv { font-size: 19px; font-weight: 600; color: var(--noche); line-height: 1.35; }
@media (min-width: 900px) {
  .ll-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; }
  .ll-mapa, .ll-mapa iframe { min-height: 460px; }
  .ll-info { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.ll-info li { align-content: start; }

/* ================= Versión 10: presencia chapina sutil + franjas interactivas ================= */
/* Texturas suaves: tejido de jaspe casi transparente en las secciones claras, rombos en las de color */
.que { background: linear-gradient(rgba(251, 250, 247, .95), rgba(251, 250, 247, .95)), url(jaspe.svg) repeat left top / 100px 80px; }
.mapa, .aliados { background: linear-gradient(rgba(251, 250, 247, .96), rgba(251, 250, 247, .96)), url(jaspe.svg) repeat left top / 100px 80px; }
.llegar { background: linear-gradient(rgba(255, 246, 227, .94), rgba(253, 235, 203, .95)), url(jaspe.svg) repeat left top / 100px 80px; }
.tema-cielo, .tema-morado, .tema-lago, .tema-magenta { background-image: url(rombos-suave.svg); background-size: 56px 56px; }
.stands { background-image: url(rombos-suave.svg); background-size: 56px 56px; }
/* Tres rombos bajo los títulos grandes, como el remate de un huipil */
.h-l::after, .h-xl::after { content: ""; display: block; width: 66px; height: 14px; margin-top: .32em; background: url(tres-rombos.svg) no-repeat left center / 66px 14px; }
.ll-card .h-l::after { margin-top: .25em; }

/* Franjas: tocables, con ícono, textura y detalle */
.tira { padding: 0; overflow: hidden; background: var(--tira) url(rombos.svg) repeat left top / 44px 44px; }
.tira-btn { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; width: 100%; min-height: inherit; padding: 18px var(--gutter) 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tira.on-dark .tira-btn { color: var(--fondo); }
.tira.on-light .tira-btn { color: var(--noche); }
.tira-btn:focus-visible { outline: 3px solid currentColor; outline-offset: -6px; }
.tira-ic { width: 44px; height: 44px; margin-bottom: auto; opacity: .9; transition: transform 300ms var(--ease); }
.tira-mas-i { position: absolute; right: var(--gutter); top: 18px; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.tira-mas-i::before, .tira-mas-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; transition: transform 300ms var(--ease); }
.tira-mas-i::after { transform: rotate(90deg); }
.tira.is-open .tira-mas-i::after { transform: rotate(0deg); }
.tira.is-open .tira-ic { transform: rotate(-8deg) scale(1.08); }
.tira-mas { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 360ms var(--ease), visibility 0s linear 360ms; }
.tira.is-open .tira-mas { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 360ms var(--ease), visibility 0s; }
.tira-mas-in { overflow: hidden; min-height: 0; padding: 0 var(--gutter); }
.tira-mas-in > :first-child { margin-top: 2px; }
.tira-mas p { max-width: 34ch; font: 600 17px/1.35 var(--ft); }
.tira.on-dark .tira-mas { color: var(--fondo); }
.tira.on-light .tira-mas { color: var(--noche); }
.tira-go { display: inline-flex; align-items: center; min-height: 44px; margin: 10px 0 18px; padding: 0 18px; border-radius: var(--r-pill); background: var(--noche); color: var(--fondo); font: 700 15px/1 var(--ft); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.tira.on-dark .tira-go { background: var(--fondo); color: var(--noche); }
.tira-go::after { content: "→"; margin-left: 8px; transition: transform 200ms var(--ease); }
.tira-go:hover::after { transform: translateX(3px); }
.gracias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 18px; padding: 0; list-style: none; }
.gracias li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-s); background: rgba(251, 250, 247, .16); box-shadow: inset 0 0 0 1px rgba(251, 250, 247, .35); }
.gracias b { font: 400 26px/1 var(--fd); letter-spacing: .02em; }
.gracias span { font: 600 13px/1 var(--ft); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
@media (min-width: 900px) {
  .tiras { display: flex; }
  .tira { flex: 1 1 0; min-width: 0; min-height: clamp(260px, 24vw, 340px); transition: flex-grow 480ms var(--ease); }
  .tira.is-open { flex-grow: 2.1; }
  .tira-btn { padding: 22px 22px 14px; }
  .tira-mas-i { right: 18px; }
  .tira-mas-in { padding: 0 22px; }
  .tira-mas p { min-width: 26ch; }
  .tira-w, .tira-d { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .tira, .tira-mas, .tira-ic, .tira-mas-i::after { transition: none; }
}
/* v10b: en escritorio la franja tiene alto fijo; abrir una no mueve a las demás */
@media (min-width: 900px) {
  .tira { display: flex; flex-direction: column; height: clamp(330px, 27vw, 380px); min-height: 0; }
  .tira-btn { flex: 1 1 auto; min-height: 0; }
  .tira-mas { flex: 0 0 auto; }
  .tira.is-open { flex-grow: 1.75; }
  .tira-w { font-size: clamp(32px, 2.9vw, 50px); }
  .tira-d { max-width: 24ch; }
}
/* v11: textura clara más tranquila (el jaspe distraía) */
.que, .mapa, .aliados { background: var(--fondo) url(rombos-claro.svg) repeat left top / 96px 96px; }
.llegar { background: url(rombos-claro.svg) repeat left top / 96px 96px, linear-gradient(180deg, #FFF6E3 0%, #FDEBCB 100%); }
/* v12: humo del volcán, siempre en movimiento (bocanadas que suben, crecen y se desvanecen) */
.pie-vol .vc-smoke rect { transform-box: fill-box; transform-origin: 50% 100%; animation: humo 5.4s cubic-bezier(.33, 0, .2, 1) infinite; opacity: 0; }
.pie-vol .vc-smoke rect:nth-child(1) { animation-delay: 0s; }
.pie-vol .vc-smoke rect:nth-child(2) { animation-delay: -1.8s; }
.pie-vol .vc-smoke rect:nth-child(3) { animation-delay: -3.6s; }
@keyframes humo {
  0%   { transform: translate(0, 34px) scale(.5); opacity: 0; }
  15%  { opacity: .95; }
  70%  { opacity: .55; }
  100% { transform: translate(14px, -26px) scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pie-vol .vc-smoke rect { animation: none; opacity: 1; } }

/* ===== v13: botón de marimba (Luna de Xelajú, video oficial bajo demanda) ===== */
.marimba { position: fixed; z-index: 36; left: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: calc(100vw - 32px); }
.marimba-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 8px; border: 0; border-radius: var(--r-pill, 999px); background: var(--noche, #1B1530); color: var(--fondo, #FBFAF7); font: 600 17px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px rgba(27,21,48,.22); transition: transform 160ms var(--ease, ease-out), background-color 160ms var(--ease, ease-out); }
.marimba-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sol, #FFC428); color: var(--noche, #1B1530); }
.marimba-btn:active { transform: scale(.97); }
.marimba-btn:focus-visible, .marimba-x:focus-visible, .marimba-yt:focus-visible { outline: 3px solid var(--sol, #FFC428); outline-offset: 3px; }
.marimba.is-on .marimba-btn { background: var(--magenta, #D3245F); }
.marimba.is-on .marimba-ic svg { animation: marimba-pulso 1.2s ease-in-out infinite alternate; }
@keyframes marimba-pulso { to { transform: scale(1.12); } }
.marimba-panel { width: min(340px, calc(100vw - 32px)); padding: 12px; border-radius: var(--r-m, 16px); background: var(--noche, #1B1530); color: var(--fondo, #FBFAF7); box-shadow: 0 12px 32px rgba(27,21,48,.3); animation: marimba-entra 220ms var(--ease, ease-out); }
@keyframes marimba-entra { from { opacity: 0; transform: translateY(8px); } }
.marimba-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.marimba-t { font: 500 16px/1.25 "Barlow Condensed", system-ui, sans-serif; }
.marimba-t b { font-weight: 700; color: var(--sol, #FFC428); }
.marimba-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(251,250,247,.12); color: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.marimba-video { aspect-ratio: 16 / 9; border-radius: var(--r-s, 10px); overflow: hidden; background: #000; }
.marimba-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.marimba-yt { display: inline-block; margin-top: 8px; color: var(--fondo, #FBFAF7); font: 600 15px/1.2 "Barlow Condensed", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .marimba { left: 24px; bottom: 24px; } }
@media (hover: hover) and (pointer: fine) { .marimba-btn:hover { transform: translateY(-2px); } .marimba-x:hover { background: rgba(251,250,247,.22); } }
@media (prefers-reduced-motion: reduce) { .marimba.is-on .marimba-ic svg, .marimba-panel { animation: none; } .marimba-btn { transition: none; } }