/* ============================================================
   ARENA FESTIVAL · Estructura y componentes (agnóstico de marca)
   Toda decisión de color/tipo/forma se lee de theme.css
   ============================================================ */

/* --- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--brand-font-sans);
  font-size: var(--brand-fs-body);
  line-height: 1.6;
  color: var(--brand-ink);
  background: var(--brand-paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}
h1, h2 {                       /* display real arena.mx: Anton uppercase */
  font-family: var(--brand-font-display);
  text-transform: var(--brand-display-case);
  letter-spacing: var(--brand-display-track);
}
h1 { font-size: var(--brand-fs-h1); }
h2 { font-size: var(--brand-fs-h2); }
h3 { font-size: var(--brand-fs-h3); }
p  { text-wrap: pretty; }

::selection { background: var(--brand-accent-soft); }

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Utilidades ------------------------------------------------ */
.container {
  max-width: var(--brand-container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.eyebrow {
  font-size: var(--brand-fs-micro);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.accent-num { font-family: var(--brand-font-accent); letter-spacing: 0.02em; }
.muted { color: var(--brand-ink-soft); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  padding: 8px 16px;
  background: var(--brand-primary); color: var(--brand-primary-ink);
  border-radius: var(--brand-radius-pill);
  text-decoration: none;
  transition: top var(--brand-t-fast) ease;
}
.skip-link:focus { top: 1rem; }

/* --- Header (arena.mx real: announce blanca, logo centrado, nav) */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.announce-bar {
  background: var(--brand-announce-bg);
  color: var(--brand-announce-ink);
  text-align: center;
  font-size: var(--brand-fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
}
.announce-bar a { color: inherit; }
.header-main { transition: background var(--brand-t-med) ease, box-shadow var(--brand-t-med) ease; }
.site-header.is-solid .header-main {
  background: var(--brand-header-solid);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 30px rgba(0, 0, 0, 0.55);
}
.header-stack {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.35rem;
  padding-block: 0.65rem 0.8rem;
}
.brand { display: block; }
.brand img { height: 56px; width: auto; }
.site-nav {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
}
.site-nav a {
  font-family: var(--brand-font-accent);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--brand-t-fast) ease;
}
.site-nav a:hover { color: #fff; }
.site-nav a[aria-current="page"] {
  color: var(--brand-accent);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* --- Footer ---------------------------------------------------- */
.site-footer {
  margin-top: var(--brand-space-9);
  border-top: 1px solid var(--brand-line);
  background: #060607;
}
.site-footer .container {
  padding-block: var(--brand-space-7);
  display: flex; flex-wrap: wrap; gap: var(--brand-space-5);
  align-items: center; justify-content: space-between;
}
.site-footer p { font-size: var(--brand-fs-small); color: var(--brand-ink-soft); flex-basis: 100%; }
.footer-logo { height: 56px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-nav a {
  font-family: var(--brand-font-accent);
  font-size: var(--brand-fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-credits { font-size: var(--brand-fs-micro); color: var(--brand-ink-faint); margin-top: -0.75rem; }

/* --- Botones (píldora arena.mx, Anton con tracking) ------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 14px 30px;
  border-radius: var(--brand-radius-pill);
  border: 1px solid transparent;
  font-family: var(--brand-btn-font);
  font-size: var(--brand-btn-fs);
  letter-spacing: var(--brand-btn-track);
  text-transform: var(--brand-btn-case);
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--brand-t-fast) ease, border-color var(--brand-t-fast) ease,
              color var(--brand-t-fast) ease, transform var(--brand-t-fast) ease,
              box-shadow var(--brand-t-fast) ease;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--brand-accent), var(--brand-primary));
  color: var(--brand-primary-ink);
  border-color: var(--brand-primary);
}
.btn-primary:hover:not([disabled]) {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}
/* CTA real del sitio: píldora blanca con texto negro */
.btn-onphoto {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}
.btn-onphoto:hover {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-primary-ink);
}
.btn-ghost-gold {
  background: transparent;
  color: var(--brand-accent);
  border-color: var(--brand-accent-deep);
}
.btn-ghost-gold:hover { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.btn-metal {
  background: #17150f;
  color: #f4e8c8;
  border-color: rgba(0, 0, 0, 0.4);
}
.btn-metal:hover { background: #000; color: #fff; }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 36px; }

.btn-quiet {
  background: none; border: none; padding: 0;
  color: var(--brand-ink-soft);
  font-size: var(--brand-fs-small);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--brand-t-fast) ease;
}
.btn-quiet:hover { color: var(--brand-ink); }

/* --- Campos ----------------------------------------------------- */
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field > label {
  font-size: var(--brand-fs-micro);
  color: var(--brand-ink-soft);
}
.field .control {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--brand-radius-field);
  background: var(--brand-surface);
  transition: border-color var(--brand-t-fast) ease, box-shadow var(--brand-t-fast) ease;
}
.field .control:hover { border-color: var(--brand-ink-faint); }
.field .control:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
.field .control::placeholder { color: var(--brand-ink-faint); }
select.control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brand-ink-soft) 50%), linear-gradient(135deg, var(--brand-ink-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }

/* --- Chips de estado -------------------------------------------- */
.left-chip {
  display: inline-flex; align-items: center;
  padding: 5px 14px;
  border-radius: var(--brand-radius-chip);
  border: 1px solid var(--brand-line-strong);
  font-size: var(--brand-fs-micro);
  color: var(--brand-ink-soft);
  white-space: nowrap;
}
.left-chip.is-warn {
  border-color: var(--brand-danger);
  color: #ffb4ae;
  background: rgba(228, 87, 79, 0.12);
}
.left-chip.is-out {
  border-color: var(--brand-line);
  color: var(--brand-ink-faint);
  background: rgba(255, 255, 255, 0.03);
}

/* ================================================================
   Héroe Arena: negro con halo dorado y logo oficial
   ================================================================ */
.hero {
  position: relative;
  min-height: clamp(540px, 88vh, 840px);
  display: flex; align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero-glow {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(55% 42% at 50% 38%, rgba(212, 164, 55, 0.28), transparent 70%),
    radial-gradient(90% 60% at 50% 110%, rgba(212, 164, 55, 0.10), transparent 60%),
    linear-gradient(180deg, #0a0a0b, #0c0b08 55%, #0a0a0b);
}
.hero .container {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: 1.1rem;
  padding-top: 8rem; padding-bottom: 3rem;
}
.hero-logo {
  width: min(520px, 82vw); height: auto;
  filter: drop-shadow(0 18px 60px rgba(212, 164, 55, 0.35));
  animation: hero-fade 1.2s var(--brand-ease) both;
}
@keyframes hero-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero .eyebrow { color: var(--brand-accent); }
.hero-meta {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.85);
}
.hero-sale {
  font-size: var(--brand-fs-small);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 0.75rem; }

/* --- Cabecera de sección ---------------------------------------- */
.results-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: baseline; justify-content: space-between;
  margin-top: var(--brand-space-8);
  margin-bottom: var(--brand-space-5);
}
.results-head .count { color: var(--brand-ink-soft); font-size: var(--brand-fs-small); }
.tickets-section, .packs-section { scroll-margin-top: 10rem; }

/* ================================================================
   Boletos: tarjeta de compra + escalera de fases
   ================================================================ */
.ticket-buy {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--brand-radius-card);
  box-shadow: var(--brand-shadow-card);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.ticket-buy h3 { font-family: var(--brand-font-accent); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.5rem; margin-top: 0.35rem; }
.ticket-meta { font-size: var(--brand-fs-small); color: var(--brand-ink-soft); margin-top: 0.4rem; }
.ticket-price { display: grid; justify-items: start; gap: 0.3rem; }
.price-was {
  font-size: 1rem;
  color: var(--brand-ink-faint);
  text-decoration-thickness: 1.5px;
}
.price-now {
  font-family: var(--brand-font-accent);
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
  letter-spacing: 0.02em;
  color: var(--brand-accent);
  line-height: 1;
}
.price-note { font-size: var(--brand-fs-micro); color: var(--brand-ink-faint); }
.ticket-price .left-chip { margin-top: 0.35rem; }
.ticket-cta { display: grid; gap: 0.6rem; justify-items: center; }
.next-note { font-size: var(--brand-fs-micro); color: var(--brand-ink-faint); text-align: center; }

/* Escalera de fases */
.phase-ladder {
  list-style: none; padding: 0;
  margin-top: var(--brand-space-5);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
.ph {
  display: grid; gap: 0.3rem; align-content: start;
  padding: 1rem 1.1rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-card);
  transition: border-color var(--brand-t-med) ease, background var(--brand-t-med) ease;
}
.ph-state {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-ink-faint);
}
.ph-label { font-family: var(--brand-font-accent); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1rem; font-weight: 400; }
.ph-price { font-family: var(--brand-font-accent); font-size: 1.2rem; letter-spacing: 0.02em; }
.ph-meta { font-size: var(--brand-fs-micro); color: var(--brand-ink-faint); }
.ph.is-sold { opacity: 0.55; }
.ph.is-sold .ph-price { text-decoration: line-through; color: var(--brand-ink-faint); }
.ph.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.ph.is-active .ph-state { color: var(--brand-accent); }
.ph.is-active .ph-price { color: var(--brand-accent); }
.ph.is-next { border-style: dashed; }

/* ================================================================
   Hotel Packages: tarjetas metálicas (arte oficial)
   ================================================================ */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
  margin-top: var(--brand-space-6);
}
.pack-card {
  --m-hi: var(--metal-silver-hi); --m-mid: var(--metal-silver-mid); --m-lo: var(--metal-silver-lo);
  position: relative;
  display: flex; flex-direction: column;
  padding: 2.4rem 1.5rem 1.5rem;
  border-radius: 16px;
  background:
    linear-gradient(165deg, var(--m-hi) 0%, var(--m-mid) 34%, var(--m-lo) 58%, var(--m-mid) 80%, var(--m-hi) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--brand-shadow-lift);
  color: var(--metal-ink);
  transition: transform var(--brand-t-med) var(--brand-ease), box-shadow var(--brand-t-med) var(--brand-ease);
}
.pack-card:hover { transform: translateY(-4px); }
.pack-card.metal-gold { --m-hi: var(--metal-gold-hi); --m-mid: var(--metal-gold-mid); --m-lo: var(--metal-gold-lo); }
.pack-card.metal-diamond { --m-hi: var(--metal-diamond-hi); --m-mid: var(--metal-diamond-mid); --m-lo: var(--metal-diamond-lo); }
.pack-card.is-featured { transform: scale(1.03); z-index: 2; }
.pack-card.is-featured:hover { transform: scale(1.03) translateY(-4px); }
.pack-card.is-out { filter: grayscale(0.65) brightness(0.82); }

.pack-plaque {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  padding: 6px 26px;
  border-radius: var(--brand-radius-pill);
  background: linear-gradient(180deg, var(--m-hi), var(--m-mid) 60%, var(--m-lo));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  font-family: var(--brand-font-accent);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--metal-ink);
  white-space: nowrap;
}
.pack-hotel {
  font-family: var(--brand-font-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  text-align: center;
}
.pack-note {
  text-align: center;
  font-size: var(--brand-fs-micro);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--metal-ink-soft);
  min-height: 1.2em;
  margin-top: 0.2rem;
}
.pack-priceband {
  margin: 1rem -1.5rem;
  padding: 0.8rem 1.5rem;
  background: linear-gradient(90deg, var(--m-lo), var(--m-mid) 28%, var(--m-hi) 50%, var(--m-mid) 72%, var(--m-lo));
  border-block: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.18);
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
}
.pack-price {
  font-family: var(--brand-font-accent);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  letter-spacing: 0.02em;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.pack-was {
  font-size: 0.55em;
  color: var(--metal-ink-soft);
  text-decoration-thickness: 1.5px;
}
.pack-phase {
  font-size: var(--brand-fs-micro);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--metal-ink-soft);
}
.pack-includes { list-style: none; padding: 0; display: grid; }
.pack-includes li {
  display: flex; align-items: center; gap: 0.65rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  font-size: var(--brand-fs-small);
  color: var(--metal-ink);
}
.pack-includes li:last-child { border-bottom: none; }
.ico { width: 18px; height: 18px; flex: none; opacity: 0.85; }
.pack-foot {
  margin-top: auto; padding-top: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
}
.pack-card .left-chip { border-color: rgba(0, 0, 0, 0.35); color: var(--metal-ink-soft); }
.pack-card .left-chip.is-warn { border-color: #8c1d18; color: #7c130e; background: rgba(140, 29, 24, 0.12); }
.pack-card .left-chip.is-out { color: var(--metal-ink-soft); background: rgba(0, 0, 0, 0.08); }
.pack-more {
  flex-basis: 100%;
  text-align: center;
  font-size: var(--brand-fs-micro);
  color: var(--metal-ink-soft);
  text-underline-offset: 3px;
}
.pack-more:hover { color: var(--metal-ink); }

/* Nota discreta de demo */
.pending-note {
  margin-top: var(--brand-space-6);
  font-size: var(--brand-fs-micro);
  color: var(--brand-ink-faint);
  text-align: center;
  text-wrap: balance;
}

/* Simulador de fase (control de la demo) */
.demo-phase {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 8px 12px 8px 16px;
  background: #141419;
  border: 1px solid var(--brand-accent-deep);
  border-radius: var(--brand-radius-pill);
  box-shadow: var(--brand-shadow-panel);
  font-size: var(--brand-fs-micro);
}
.demo-tag-mini {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--brand-ink-faint);
}
.demo-phase strong {
  font-family: var(--brand-font-accent);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent);
  min-width: 9.5ch;
  text-align: center;
}
.demo-phase button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--brand-line-strong);
  border-radius: 50%;
  color: var(--brand-ink-soft);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  transition: all var(--brand-t-fast) ease;
}
.demo-phase button:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

/* ================================================================
   NIVEL 2 · Ficha de package
   ================================================================ */
.detail-hero { padding-top: 11rem; }

/* Galería de ambiente (luminosidad sobre el negro, estilo v1.1) */
.gallery {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  border-radius: 14px; overflow: hidden;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--brand-line);
}
.gallery .photo { position: relative; overflow: hidden; margin: 0; }
.gallery .photo:first-child { grid-row: 1 / -1; }
.photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.gallery-note {
  margin-top: 0.6rem;
  margin-bottom: var(--brand-space-6);
  font-size: var(--brand-fs-micro);
  color: var(--brand-ink-faint);
  text-align: right;
}
.detail-crumbs { font-size: var(--brand-fs-small); color: var(--brand-ink-soft); margin-bottom: 1.25rem; }
.detail-crumbs a { text-decoration: none; }
.detail-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.detail-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: var(--brand-space-6); }
.detail-hotel { margin-top: 0.35rem; color: var(--brand-ink-soft); font-size: 1.0625rem; }
.plaque-inline {
  position: static; transform: none;
  --m-hi: var(--metal-silver-hi); --m-mid: var(--metal-silver-mid); --m-lo: var(--metal-silver-lo);
}
.plaque-inline.metal-gold { --m-hi: var(--metal-gold-hi); --m-mid: var(--metal-gold-mid); --m-lo: var(--metal-gold-lo); }
.plaque-inline.metal-diamond { --m-hi: var(--metal-diamond-hi); --m-mid: var(--metal-diamond-mid); --m-lo: var(--metal-diamond-lo); }

.detail-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.detail-main > section + section { margin-top: var(--brand-space-7); padding-top: var(--brand-space-7); border-top: 1px solid var(--brand-line); }
.detail-main .lede { font-size: 1.0625rem; color: var(--brand-ink-soft); max-width: 62ch; }
.hotel-block {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.hotel-meta { margin-top: 0.75rem; font-size: var(--brand-fs-small); color: var(--brand-ink-faint); }

/* Includes sobre fondo oscuro (ficha y checkout) */
.detail-includes { margin-top: var(--brand-space-5); grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
.detail-includes li { color: var(--brand-ink-soft); border-bottom: 1px solid var(--brand-line); }
.detail-includes .ico { color: var(--brand-primary); opacity: 1; }

/* Tarjeta reserva sticky */
.book-card {
  position: sticky; top: 11rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  box-shadow: var(--brand-shadow-card);
  padding: var(--brand-space-5);
  display: grid; gap: 1rem;
  justify-items: start;
}
.book-card .price-line { display: grid; gap: 0.25rem; }
.book-card .price .accent-num { font-size: 1.8rem; color: var(--brand-accent); }
.book-card .btn { justify-self: stretch; }
.book-note { font-size: var(--brand-fs-micro); color: var(--brand-ink-faint); justify-self: center; }

/* ================================================================
   NIVEL 3 · Checkout
   ================================================================ */
.checkout-page { padding-top: 11rem; }
.checkout-head { text-align: center; max-width: 40rem; margin-inline: auto; }
.checkout-head .demo-tag {
  display: inline-block; margin-top: 1rem;
  padding: 6px 16px;
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--brand-radius-chip);
  font-size: var(--brand-fs-micro);
  letter-spacing: 0.5px;
  color: var(--brand-ink-soft);
  background: var(--brand-paper-warm);
}

.progress-rail {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  margin: var(--brand-space-6) auto var(--brand-space-7);
  padding: 0; list-style: none;
}
.p-step { display: flex; align-items: center; gap: 0.6rem; }
.p-dot {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--brand-font-accent);
  font-size: 0.9rem;
  border: 1px solid var(--brand-line-strong);
  background: var(--brand-surface);
  color: var(--brand-ink-faint);
  transition: all var(--brand-t-med) var(--brand-ease);
}
.p-label { font-size: var(--brand-fs-small); color: var(--brand-ink-faint); transition: color var(--brand-t-med) ease; }
.p-connector { width: clamp(1.2rem, 5vw, 3.5rem); height: 1px; background: var(--brand-line-strong); position: relative; overflow: hidden; }
.p-connector::after {
  content: ''; position: absolute; inset: 0;
  background: var(--brand-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--brand-t-slow) var(--brand-ease);
}
.p-step.is-current .p-dot {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: var(--brand-primary-ink);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}
.p-step.is-current .p-label { color: var(--brand-ink); }
.p-step.is-done .p-dot { border-color: var(--brand-primary); color: var(--brand-primary); }
.p-step.is-done .p-label { color: var(--brand-ink-soft); }
.p-step.is-done + .p-connector::after, .p-connector.is-done::after { transform: scaleX(1); }

.checkout-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.step-panels { position: relative; }
.step-panel {
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.step-panel.entering { animation: panel-in var(--brand-t-slow) var(--brand-ease) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.step-panel h2 { margin-bottom: 0.35rem; }
.step-panel .step-sub { color: var(--brand-ink-soft); margin-bottom: var(--brand-space-5); }
.panel-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--brand-space-6);
  gap: 1rem;
}

/* Línea de compra (paso 1 boletos) */
.buy-line {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-card);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.buy-line h4 { font-family: var(--brand-font-accent); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; }
.room-meta { font-size: var(--brand-fs-small); color: var(--brand-ink-soft); margin-top: 0.3rem; }
.buy-price { display: grid; justify-items: end; gap: 0.15rem; }
.buy-price .accent-num { font-size: 1.5rem; color: var(--brand-accent); }
.qty-field { max-width: 14rem; }

/* Resumen sticky */
.summary-card {
  position: sticky; top: 11rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--brand-shadow-card);
}
.summary-brand {
  display: grid; place-items: center;
  padding: 1.4rem;
  background:
    radial-gradient(85% 130% at 50% 0%, rgba(212, 164, 55, 0.22), transparent 70%),
    #0a0a0b;
  border-bottom: 1px solid var(--brand-line);
}
.summary-brand img { width: 170px; height: auto; }
.summary-body { padding: var(--brand-space-5); display: grid; gap: 0.9rem; }
.summary-rows { display: grid; gap: 0.55rem; font-size: var(--brand-fs-small); }
.summary-rows .row { display: flex; justify-content: space-between; gap: 1rem; color: var(--brand-ink-soft); }
.summary-rows .row strong { color: var(--brand-ink); font-weight: 500; }
.summary-rows .row strong s { color: var(--brand-ink-faint); }
.summary-rows .row-save strong { color: var(--brand-ok); }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 0.9rem; border-top: 1px solid var(--brand-line);
}
.summary-total .amount { font-size: 1.35rem; color: var(--brand-accent); }
.summary-note { font-size: var(--brand-fs-micro); color: var(--brand-ink-faint); }
.fade-num { transition: opacity var(--brand-t-fast) ease; }
.fade-num.updating { opacity: 0.25; }

/* Formularios checkout */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .span-2 { grid-column: span 2; }
.field.has-error .control { border-color: var(--brand-danger); }
.field .error-msg {
  font-size: var(--brand-fs-micro);
  color: var(--brand-danger);
  min-height: 1.1em;
  opacity: 0; transform: translateY(-2px);
  transition: opacity var(--brand-t-fast) ease, transform var(--brand-t-fast) ease;
}
.field.has-error .error-msg { opacity: 1; transform: none; }
.control.is-valid { border-color: var(--brand-ok); }

.demo-pay-note {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--brand-paper-warm);
  border: 1px dashed var(--brand-line-strong);
  border-radius: var(--brand-radius-card);
  padding: 0.9rem 1.1rem;
  font-size: var(--brand-fs-small);
  color: var(--brand-ink-soft);
  margin-bottom: var(--brand-space-5);
}
.demo-pay-note strong { color: var(--brand-ink); font-weight: 500; }

.processing {
  display: grid; place-items: center; gap: 1.2rem;
  padding: var(--brand-space-8) 0;
  text-align: center;
}
.spinner {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 2px solid var(--brand-line);
  border-top-color: var(--brand-primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.confirm-wrap { text-align: center; padding: var(--brand-space-6) 0; }
.confirm-check {
  width: 4rem; height: 4rem; margin-inline: auto;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brand-accent), var(--brand-primary));
  display: grid; place-items: center;
  animation: pop-in 0.5s var(--brand-ease) both;
}
.confirm-check svg { stroke: var(--brand-primary-ink); }
.confirm-check svg path {
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: draw 0.5s 0.25s var(--brand-ease) forwards;
}
@keyframes pop-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.locator {
  display: inline-block;
  margin: 1.25rem auto;
  padding: 0.8rem 1.6rem;
  background: var(--brand-paper-warm);
  border: 1px solid var(--brand-accent-deep);
  border-radius: var(--brand-radius-card);
  font-family: var(--brand-font-accent);
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: var(--brand-accent);
}
.confirm-detail {
  max-width: 28rem; margin: 1rem auto 0;
  text-align: left;
}

/* --- Reveal on scroll ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--brand-ease), transform 0.7s var(--brand-ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Responsive -------------------------------------------------- */
@media (max-width: 1020px) {
  .ticket-buy { grid-template-columns: 1fr; justify-items: start; }
  .ticket-cta { justify-items: start; }
  .phase-ladder { grid-template-columns: repeat(2, 1fr); }
  .pack-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .pack-card.is-featured { transform: none; }
  .pack-card.is-featured:hover { transform: translateY(-4px); }
  .detail-cols, .checkout-cols { grid-template-columns: 1fr; }
  .book-card, .summary-card { position: static; }
}
@media (max-width: 900px) {
  .site-nav a:not([aria-current="page"]) { display: none; }
  .brand img { height: 48px; }
}
@media (max-width: 640px) {
  .announce-bar { font-size: var(--brand-fs-micro); }
  .phase-ladder { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; }
  .gallery .photo { aspect-ratio: 16/9; }
  .gallery .photo:nth-child(n+3) { display: none; }
  .detail-includes { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .p-label { display: none; }
  .p-step.is-current .p-label { display: block; }
  .panel-actions { flex-direction: column-reverse; align-items: stretch; }
  .panel-actions .btn { width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .demo-phase { right: 0.75rem; bottom: 0.75rem; left: 0.75rem; justify-content: center; }
  .site-footer .container { justify-content: flex-start; }
}

/* --- Movimiento reducido ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}