/* ==========================================================================
   Palco — sistema visual compartido (prototipo estático + sitio PHP)
   Dirección: editorial / gig-poster. Papel cálido + bloques "escenario" oscuros.
   Único punto de verdad para color y tipografía: el bloque :root.
   ========================================================================== */

/* ==========================================================================
   Tipografía de títulos · Bricolage Grotesque (variable, autoalojada)
   Licencia SIL Open Font License 1.1. Se sirve desde assets/fonts para que el
   sitio funcione sin conexión a CDNs.
   ========================================================================== */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-latin.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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── paleta ─────────────────────────────────────────────────────────── */
  --bg:            #f6f4f9;   /* papel con un toque de lila — nunca #fff */
  --surface:       #ffffff;
  --surface-2:     #faf8fc;
  --fg:            #1a1523;   /* tinta — nunca #000 */
  --muted:         #675f7a;
  --border:        #e4dfec;
  --border-strong: #cfc7dc;

  --accent:        #c2127a;   /* magenta de escenario */
  --accent-ink:    #ffffff;
  --spot:          #ffc93c;   /* foco amarillo: solo sobre fondos oscuros */
  --spot-ink:      #2a1d00;

  --stage:         #15102a;   /* bloque oscuro: hero, footer, boleta */
  --stage-2:       #1f1940;
  --stage-fg:      #f6f3fb;
  --stage-muted:   #a79fc0;
  --stage-border:  #2e2650;

  /* tintes de localidad (plano de silletería) */
  --zone-vip:      oklch(58% .16 25);
  --zone-platea:   oklch(68% .14 66);
  --zone-tribuna:  oklch(60% .11 155);
  --zone-general:  oklch(62% .08 248);

  --ok:            #17724a;
  --ok-soft:       #e3f3ea;
  --warn:          #8f5600;
  --warn-soft:     #fdf0d8;
  --danger:        #b3261e;
  --danger-soft:   #fbe7e5;

  /* ── derivados ──────────────────────────────────────────────────────── */
  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
  --fg-soft:     color-mix(in oklch, var(--fg) 5%, transparent);
  --muted-soft:  color-mix(in oklch, var(--muted) 10%, transparent);

  /* ── tipografía ─────────────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --fs-display: clamp(40px, 5.6vw, 68px);
  --fs-h1:      clamp(32px, 4.2vw, 48px);
  --fs-h2:      clamp(26px, 3vw, 36px);
  --fs-h3:      20px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-meta:    13px;
  --fs-micro:   11px;

  /* ── ritmo ──────────────────────────────────────────────────────────── */
  --s1: 6px;  --s2: 10px; --s3: 16px; --s4: 24px;
  --s5: 36px; --s6: 56px; --s7: 88px;
  --wrap: 1160px;
  --gutter: 28px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(26, 21, 35, .06), 0 2px 6px -2px rgba(26, 21, 35, .06);
  --shadow-md: 0 16px 36px -20px rgba(26, 21, 35, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-soft); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(40px, 6vw, var(--s7)); }
.section--tight { padding-block: clamp(32px, 4vw, var(--s6)); }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--s4); }
.stack-sm > * + * { margin-top: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--s2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.side { position: sticky; top: 84px; }
.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }
/* Evita que una tarjeta con contenido ancho ensanche su columna del grid */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .gigs > *, .split > *, .split--even > * { min-width: 0; }
.rule-strong { border: 0; border-top: 1px solid var(--fg); margin: 0; }

/* ── tipografía ───────────────────────────────────────────────────────── */
.display, h1.display {
  font-family: var(--font-display); font-size: var(--fs-display);
  line-height: 1.02; letter-spacing: -.025em; font-weight: 600; margin: 0;
}
h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.02em; font-weight: 600; }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.015em; font-weight: 600; }
h3, .h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -.015em; font-weight: 600; }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3); font-weight: 500;
}
.eyebrow--plain { color: var(--muted); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 62ch; }
.small { font-size: var(--fs-sm); }
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); letter-spacing: .01em; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.brand__mark { width: 26px; height: 26px; color: var(--accent); }
.brand__logo { height: 34px; width: auto; max-width: 168px; object-fit: contain; flex: none; }
.brand__sub { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.nav__links { display: flex; gap: var(--s4); }
.nav__links a { font-size: var(--fs-sm); color: var(--muted); padding-block: 6px; border-bottom: 1px solid transparent; }
.nav__links a:hover { color: var(--fg); }
.nav__links a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.nav__actions { display: flex; align-items: center; gap: var(--s2); }
.nav .nav__toggle { display: none; }

/* Menús desplegables de la navegación (Explorar / Vender / Más) */
.nav__menu { position: relative; }
.nav__menu-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--muted); padding: 6px 0; border-bottom: 1px solid transparent; }
.nav__menu-btn:hover, .nav__menu[data-open="true"] .nav__menu-btn { color: var(--fg); }
.nav__menu-btn .ic { width: 13px; height: 13px; transition: transform .15s ease; margin-top: 1px; }
.nav__menu[data-open="true"] .nav__menu-btn .ic { transform: rotate(180deg); }
.nav__menu-panel { display: none; }
.nav__menu[data-open="true"] .nav__menu-panel { display: grid; gap: 2px; position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); min-width: 240px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 16, 10, .18); padding: 8px; z-index: 60; }
.nav__menu-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__menu-panel a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--fg); font-size: var(--fs-sm); white-space: nowrap; }
.nav__menu-panel a:hover { background: var(--surface-2); color: var(--accent); }

/* ── botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; min-height: 44px;
  border-radius: var(--radius); border: 1px solid transparent;
  font-size: 15px; font-weight: 550; letter-spacing: .01em;
  transition: background .15s ease, border-color .15s ease, transform .06s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover:not([disabled]) { background: color-mix(in oklch, var(--accent) 86%, black); }
.btn--secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn--secondary:hover:not([disabled]) { border-color: var(--fg); }
.btn--ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 10px; }
.btn--ghost:hover { color: var(--accent); }
.btn--onstage { background: var(--stage-fg); color: var(--stage); border-color: var(--stage-fg); }
.btn--onstage:hover { background: color-mix(in oklch, var(--stage-fg) 88%, black); }
.btn--block { width: 100%; }
.btn--sm { min-height: 34px; padding: 6px 12px; font-size: var(--fs-sm); }
.btn--arrow::after { content: '→'; transition: transform .15s ease; }
.btn--arrow:hover::after { transform: translateX(3px); }
.btn__spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── bloques / tarjetas ───────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4); }
.card--flat { background: transparent; border: 0; padding: 0; border-radius: 0; }
.card--pad-lg { padding: var(--s5); }
.card--stage { background: var(--stage); color: var(--stage-fg); border-color: var(--stage-border); }
.stage { background: var(--stage); color: var(--stage-fg); }
.stage h1, .stage h2, .stage h3, .stage .display { color: var(--stage-fg); }
.stage .lead, .stage .meta, .stage .muted { color: var(--stage-muted); }
.stage .eyebrow { color: var(--stage-fg); }
.stage .rule { border-top-color: var(--stage-border); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--stage); color: var(--stage-fg); }
.hero::before {
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 130%;
  background: radial-gradient(60% 70% at 22% 0%, color-mix(in oklch, var(--accent) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.hero__inner { position: relative; padding-block: clamp(56px, 9vw, 112px); }
.hero--paper { background: var(--bg); color: var(--fg); }
.hero--paper::before { display: none; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s6); align-items: center; }
@media (max-width: 1023px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.hero__stats { display: flex; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s6); }
.hero__stat b { display: block; font-family: var(--font-display); font-size: 30px; letter-spacing: -.02em; }
.hero__stat span { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--stage-muted); }

/* ── póster (placeholder de imagen promocional, offline-safe) ─────────── */
.poster {
  position: relative; isolation: isolate; min-width: 0;
  aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--stage-2); color: var(--stage-fg);
  border: 1px solid var(--stage-border);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s4);
}
.poster::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 78% 12%, color-mix(in oklch, oklch(72% .17 var(--h, 30)) 55%, transparent), transparent 68%),
    radial-gradient(60% 80% at 12% 96%, color-mix(in oklch, oklch(58% .14 calc(var(--h, 30) + 40)) 42%, transparent), transparent 70%);
}
.poster--tall { aspect-ratio: 3 / 4; }
.poster--16x9 { aspect-ratio: 16 / 9; }
.poster__tag { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--stage-muted); }
.poster__name { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 40px); line-height: .98; letter-spacing: -.025em; font-weight: 600; }
.poster__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--stage-muted); }

/* ── chips / badges ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent-soft); color: color-mix(in oklch, var(--accent) 80%, black);
}
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--muted { background: var(--muted-soft); color: var(--muted); }
.badge--stage { background: color-mix(in oklch, var(--stage-fg) 12%, transparent); color: var(--stage-fg); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: var(--fs-sm); color: var(--muted);
}
.chip:hover { border-color: var(--border-strong); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ── formularios ──────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: var(--fs-sm); color: var(--fg); font-weight: 550; letter-spacing: .005em; }
.input, .select, .textarea {
  width: 100%; padding: 11px 13px; min-height: 44px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 15px;
}
.input::placeholder, .textarea::placeholder { color: color-mix(in oklch, var(--muted) 75%, transparent); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.input[disabled], .select[disabled] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.textarea { min-height: 92px; line-height: 1.5; resize: vertical; }
.help { font-size: var(--fs-meta); color: var(--muted); }
.field .err, .err { font-size: var(--fs-meta); color: var(--danger); display: flex; gap: 5px; align-items: flex-start; }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.field--inline { flex-direction: row; align-items: center; gap: var(--s2); }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.err-summary {
  border: 1px solid var(--danger); background: var(--danger-soft); border-radius: var(--radius);
  padding: var(--s3); font-size: var(--fs-sm);
}
.err-summary h4 { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--danger); }
.err-summary ul { margin: 0; padding-left: 18px; }
.card--grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }

/* ── avisos ───────────────────────────────────────────────────────────── */
.alert { display: flex; gap: 10px; padding: var(--s3); border-radius: var(--radius); font-size: var(--fs-sm); border: 1px solid; align-items: flex-start; }
.alert svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.alert--info { background: var(--surface-2); border-color: var(--border); color: var(--fg); }
.alert--ok { background: var(--ok-soft); border-color: color-mix(in oklch, var(--ok) 35%, transparent); color: color-mix(in oklch, var(--ok) 78%, black); }
.alert--warn { background: var(--warn-soft); border-color: color-mix(in oklch, var(--warn) 35%, transparent); color: var(--warn); }
.alert--danger { background: var(--danger-soft); border-color: color-mix(in oklch, var(--danger) 35%, transparent); color: var(--danger); }
.alert strong { font-weight: 600; }

/* ── tabla ────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: 12px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.table tbody tr:hover { background: var(--fg-soft); }
.table .r { text-align: right; }

/* ── lista de conciertos ──────────────────────────────────────────────── */
.gigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.gig { display: flex; flex-direction: column; gap: var(--s3); }
.gig__body { display: flex; flex-direction: column; gap: 6px; }
.gig__name { font-family: var(--font-display); font-size: 23px; line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }
.gig__meta { display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; }
.gig__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); border-top: 1px solid var(--border); padding-top: var(--s3); }
.price { font-family: var(--font-mono); font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 550; }
.price small { display: block; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }

/* ── mapa de silletería ───────────────────────────────────────────────── */
.mapframe { background: var(--stage); border-radius: var(--radius-lg); padding: var(--s4); }
.stagebar { text-align: center; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--stage-muted); border-bottom: 2px solid var(--stage-border); padding-bottom: 5px; margin-bottom: var(--s4); }
.map { width: 100%; height: auto; }
.map__stage { fill: var(--stage-border); }
.map__stage-label { fill: var(--stage-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.zone { cursor: pointer; --zf: var(--zone-general); }
.zone--vip { --zf: var(--zone-vip); }
.zone--platea { --zf: var(--zone-platea); }
.zone--tribuna { --zf: var(--zone-tribuna); }
.zone--general { --zf: var(--zone-general); }
.zone path, .zone rect { fill: color-mix(in oklch, var(--zf) 78%, white); stroke: color-mix(in oklch, var(--stage) 55%, transparent); stroke-width: 1.4; transition: fill .15s ease; }
.zone:hover path, .zone:hover rect { fill: var(--zf); }
.zone[aria-pressed="true"] path, .zone[aria-pressed="true"] rect { fill: var(--accent); }
.zone text { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; fill: var(--stage); pointer-events: none; }
.zone[aria-pressed="true"] text { fill: var(--accent-ink); }
.sw { width: 11px; height: 11px; border-radius: 3px; flex: none; background: var(--zf, var(--muted)); }
.sw--vip { --zf: var(--zone-vip); }
.sw--platea { --zf: var(--zone-platea); }
.sw--tribuna { --zf: var(--zone-tribuna); }
.sw--general { --zf: var(--zone-general); }
.legend__swatch.sw--vip { background: var(--zone-vip); }
.legend__swatch.sw--platea { background: var(--zone-platea); }
.legend__swatch.sw--tribuna { background: var(--zone-tribuna); }
.legend__swatch.sw--general { background: var(--zone-general); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.legend__item { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--stage-muted); }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; }

.seats { display: grid; gap: 5px; flex: 1; min-width: 0; overflow-x: auto; padding-bottom: 3px; }
.seat {
  aspect-ratio: 1; border-radius: 6px 6px 3px 3px;
  border: 1px solid #c7c0b1; background: #ffffff; color: var(--fg);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .01em;
  display: grid; place-items: center; min-width: 0; padding: 0;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.seat:hover:not([disabled]) { border-color: var(--fg); transform: translateY(-1px); }
.seat[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); box-shadow: 0 0 0 2px rgba(139, 92, 246, .55); }
.seat[disabled] { background: var(--muted-soft); border-color: transparent; color: color-mix(in oklch, var(--muted) 65%, transparent); cursor: not-allowed; text-decoration: line-through; }
.seat-row { display: flex; align-items: center; gap: var(--s2); }
.seat-row__label { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); width: 22px; flex: none; }
@media (max-width: 640px) {
  .seats { gap: 4px; }
  .seat { font-size: 9px; border-radius: 4px 4px 2px 2px; }
}

/* ── bandas de localidades (generadas de los datos) ────────────────────── */
.mapbands { display: flex; flex-direction: column; gap: 8px; }
.mapbands__stage {
  text-align: center; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--border-strong);
  padding-bottom: 5px; margin: 0;
}
.mapband {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.mapband:hover { border-color: var(--fg); }
.mapband[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.mapband__name { display: flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.mapband__meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); text-align: right; line-height: 1.5; }
.mapband__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-zone { width: 11px; height: 11px; border-radius: 3px; flex: none; background: oklch(62% .15 var(--zh, 30)); }
@media (max-width: 640px) {
  .mapband { grid-template-columns: minmax(0, 1fr) auto; }
  .mapband__meta { grid-column: 1 / -1; text-align: left; }
}

/* ── plano o foto de referencia del recinto ────────────────────────────── */
.venue-map { margin: 0; }
.venue-map img {
  display: block; width: auto; height: auto;
  max-width: min(100%, 520px); max-height: 340px;
  object-fit: contain; margin-inline: auto;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
}
.venue-map figcaption { max-width: 560px; margin: 10px auto 0; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.venue-map figcaption strong { color: var(--fg); }
a.legend__item { text-decoration: none; }
a.legend__item:hover { color: var(--fg); }
a.legend__item[aria-current="true"] { color: var(--fg); font-weight: 600; }

/* ── boleta (stub) ────────────────────────────────────────────────────── */
.stub {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 168px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.stub__main { padding: var(--s4); border-right: 1px dashed var(--border-strong); }
.stub__side { padding: var(--s4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); background: var(--surface-2); text-align: center; }
.stub::before, .stub::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  right: 159px; transform: translateX(50%);
}
.stub::before { top: -10px; }
.stub::after { bottom: -10px; }
.stub__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.stub__k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.stub__v { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.qr { width: 128px; height: 128px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
.qr svg, .qr canvas, .qr img { width: 100%; height: 100%; }
.qr-barra { width: 128px; height: 4px; margin-top: 6px; background: var(--muted-soft); border-radius: 999px; overflow: hidden; }
.qr-barra span { display: block; height: 100%; width: 100%; background: var(--accent); transition: width .9s linear; }
.scanner { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--stage); border: 1px solid var(--stage-border); }
.scanner video { width: 100%; max-height: 320px; object-fit: cover; display: block; }
.scanner__hint { padding: 10px 12px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--stage-muted); }
@media (max-width: 640px) {
  .stub { grid-template-columns: 1fr; }
  .stub__main { border-right: 0; border-bottom: 1px dashed var(--border-strong); }
  .stub::before, .stub::after { right: auto; left: 50%; }
  .stub::before { top: auto; bottom: 158px; transform: translate(-50%, 50%); }
  .stub::after { bottom: -10px; transform: translateX(-50%); }
}

/* ── pasos (checkout) ─────────────────────────────────────────────────── */
.steps { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; }
.steps__item { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.steps__n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 10px; }

.steps__item[aria-current="step"] { color: var(--fg); }
.steps__item[aria-current="step"] .steps__n { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.steps__item--done { color: var(--fg); }
.steps__sep { width: 18px; border-top: 1px solid var(--border-strong); }

/* ── estados vacíos / carga ───────────────────────────────────────────── */
.empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--s6) var(--s4); text-align: center; background: var(--surface-2); }
.empty__mark { width: 40px; height: 40px; margin: 0 auto var(--s3); color: var(--muted); }
.skeleton { background: linear-gradient(90deg, var(--muted-soft), color-mix(in oklch, var(--muted) 4%, transparent), var(--muted-soft)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--fg); animation: spin .8s linear infinite; }

/* ── detalle de concierto ─────────────────────────────────────────────── */
.dateline { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: var(--s4); padding: 15px 0; border-top: 1px solid var(--border); align-items: baseline; }
.dateline__date { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
.dateline--past { opacity: .5; }
.tiers { display: grid; gap: var(--s2); }
.tier { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 11px 0; border-bottom: 1px solid var(--border); }
.tier:last-child { border-bottom: 0; }
.tier__sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ── subnavegación del panel ──────────────────────────────────────────── */
.admin-nav { display: flex; flex-wrap: wrap; gap: var(--s1); border-bottom: 1px solid var(--border); margin-bottom: var(--s4); }
.admin-nav a { padding: 8px 12px; font-size: var(--fs-sm); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-nav a:hover { color: var(--fg); }
.admin-nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

/* ── footer ───────────────────────────────────────────────────────────── */
.foot { background: var(--stage); color: var(--stage-muted); padding-block: var(--s6); margin-top: var(--s7); }
.foot a { color: var(--stage-fg); }
.foot a:hover { color: var(--accent); }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s5); }
.foot__title { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--stage-fg); margin-bottom: var(--s2); }
.foot__list { display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-sm); }
.foot__bottom { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--stage-border); display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .05em; text-transform: uppercase; }

/* ── utilidades ───────────────────────────────────────────────────────── */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); }
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 18px; height: 18px; flex: none; }

@media (max-width: 1023px) {
  .gigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side { position: static; }
  .split { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 767px) {
  :root { --gutter: 18px; }
  .brand { font-size: 19px; gap: 8px; }
  .brand__logo { height: 30px; max-width: 132px; }
  .brand__sub { display: none; }
  .gigs, .grid-2, .grid-3, .grid-4, .card--grid-2, .split--even { grid-template-columns: 1fr; }
  .hero__stats { gap: var(--s4); }
  .dateline { grid-template-columns: 1fr; gap: 4px; }
  .nav__links { display: none; }
  .nav__links[data-open="true"] {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--border);
  }
  .nav__inner { flex-wrap: wrap; }
  .nav .nav__toggle { display: inline-flex; }
  .nav__actions .btn--ghost { display: none; }
  .nav__menu { width: 100%; }
  .nav__menu-btn { width: 100%; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .nav__menu-btn .ic { margin-top: 0; }
  .nav__menu[data-open="true"] .nav__menu-panel {
    position: static; transform: none; min-width: 0; box-shadow: none; border: 0;
    border-left: 2px solid var(--border); border-radius: 0; margin: 4px 0 8px 10px; padding: 2px 0 2px 8px;
  }
  .nav__menu-panel a { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}
/* ── páginas de contenido: quiénes somos, legales y contacto ───────── */
.legal__title {
  font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.08;
  letter-spacing: -.02em; font-weight: 600; margin: 0; max-width: 26ch;
}

.prose { font-size: var(--fs-body); line-height: 1.68; color: var(--fg); }
.prose p, .prose ul, .prose ol { margin: 0; }
.prose > * + * { margin-top: 14px; }
.prose > * + h2 { margin-top: var(--s6); }
.prose > * + h3 { margin-top: var(--s5); }
.prose > h2 + *, .prose > h3 + * { margin-top: 12px; }
.prose h2 {
  font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.16;
  letter-spacing: -.02em; font-weight: 600; padding-top: var(--s3); border-top: 1px solid var(--border);
}
.prose h2:first-child { padding-top: 0; border-top: 0; }
.prose h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.prose p { max-width: 74ch; }
.prose ul, .prose ol { padding-left: 20px; display: grid; gap: 6px; max-width: 74ch; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { line-height: 1.55; }
.prose li::marker { color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }
.prose strong { font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }
.legal__cuerpo { max-width: 76ch; }
.legal__cuerpo h2 { scroll-margin-top: 92px; }

.toc { display: grid; gap: 1px; max-height: min(52vh, 420px); overflow-y: auto; }
.toc a {
  display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); color: var(--muted);
  padding: 6px 8px; border-radius: 8px; text-decoration: none; line-height: 1.35;
}
.toc a:hover { background: var(--surface-2); color: var(--fg); }
.toc__num { font-family: var(--font-mono); font-size: 10px; color: var(--border-strong); flex: none; }

.enlaces { display: grid; gap: 0; font-size: var(--fs-sm); }
.enlaces a {
  color: var(--fg); text-decoration: none; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.enlaces a:last-child { border-bottom: 0; }
.enlaces a:hover { color: var(--accent); }
.enlaces a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Enlaces dentro de las casillas de aceptación (términos y datos) */
.check a, .foot__bottom a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.check a:hover, .foot__bottom a:hover { text-decoration-thickness: 2px; }

@media (max-width: 767px) {
  .prose h2 { scroll-margin-top: 76px; }
  .toc { max-height: none; }
}

/* ── aviso de subasta en la portada ─────────────────────────────────── */
.aviso-subasta {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: color-mix(in oklch, var(--stage) 55%, transparent);
  opacity: 0; transition: opacity .18s ease;
  overscroll-behavior: contain;
}
.aviso-subasta[hidden] { display: none; }
.aviso-subasta--abierto { opacity: 1; }
.aviso-subasta__caja {
  position: relative; width: 100%; max-width: 440px; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: var(--s4); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
  transform: translateY(10px) scale(.985); transition: transform .2s ease;
}
.aviso-subasta--abierto .aviso-subasta__caja { transform: none; }
.aviso-subasta__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.aviso-subasta__cerrar {
  flex: none; width: 40px; height: 40px; margin: -8px -8px 0 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.aviso-subasta__cerrar svg { width: 18px; height: 18px; }
.aviso-subasta__cerrar:hover { color: var(--fg); border-color: var(--border-strong); }
.aviso-subasta__titulo {
  font-family: var(--font-display); font-size: 22px; line-height: 1.15;
  letter-spacing: -.02em; font-weight: 600; margin: 4px 0 0;
}
.aviso-subasta__datos { margin-top: var(--s3); }
.aviso-subasta__pie { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.sin-scroll { overflow: hidden; }

@media (max-width: 480px) {
  .aviso-subasta { align-items: end; padding: 10px; }
  .aviso-subasta__caja { max-width: none; padding: var(--s3); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .aviso-subasta__titulo { font-size: 20px; }
  .aviso-subasta__pie { flex-direction: column; }
  .aviso-subasta__pie .btn { width: 100%; justify-content: center; }
}

@media (max-height: 560px) {
  .aviso-subasta { align-items: start; }
  .aviso-subasta__caja { max-height: calc(100vh - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .aviso-subasta, .aviso-subasta__caja { transition: none; }
}


/* ── aviso del resultado del pago ───────────────────────────────────── */
.aviso-pago__marca {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px;
  border: 2px solid currentColor;
}
.aviso-pago__marca svg { width: 30px; height: 30px; }
.aviso-pago__marca--ok { color: var(--ok, #1c7a4c); }
.aviso-pago__marca--espera { color: var(--warn, #a35a00); }
.aviso-pago__marca--no { color: var(--danger, #b3261e); }
#aviso-pago { align-items: start; }

/* ── velo mientras se procesa el pago ───────────────────────────────── */
.pago-velo {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px;
  background: color-mix(in oklch, var(--stage) 60%, transparent);
}
.pago-velo[hidden] { display: none; }
.pago-velo__caja {
  width: min(100%, 420px); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: var(--s4); text-align: center;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
}
.pago-velo__giro {
  width: 42px; height: 42px; margin: 0 auto; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: pago-giro .9s linear infinite;
}
@keyframes pago-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pago-velo__giro { animation-duration: 2.6s; } }

/* ── afiche con imagen propia ───────────────────────────────────────── */
.poster--foto { background: var(--stage-2); }
.poster__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.poster--foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12, 10, 9, .12) 0%, rgba(12, 10, 9, .28) 45%, rgba(12, 10, 9, .74) 100%);
}
.poster--foto .poster__tag, .poster--foto .poster__name, .poster--foto .poster__foot {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}
@media print {
  .nav, .foot, .no-print { display: none !important; }
  .stub { border-color: var(--fg); }
  .toc, .side { display: none !important; }
  .aviso-subasta { display: none !important; }
}

/* Localidades de la plantilla general: se ven, pero no se editan aquí */
.grid-4[inert] { opacity: .62; }
.grid-4[inert] .input { cursor: not-allowed; }

/* ── Contacto flotante (página principal) ── */
.cf-boton { position: fixed; right: 18px; bottom: 18px; z-index: 120; border: 0; cursor: pointer;
  background: var(--stage-2, #221c38); color: #fff; font: inherit; font-weight: 600; font-size: 14px;
  padding: 14px 18px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.cf-boton:hover { filter: brightness(1.08); }
.cf { position: fixed; inset: 0; z-index: 130; display: flex; align-items: flex-end; justify-content: flex-end; padding: 18px; }
.cf[hidden] { display: none; }
.cf__fondo { position: absolute; inset: 0; background: rgba(6,4,14,.66); }
.cf__caja { position: relative; width: min(430px, 100%); max-height: min(86vh, 720px); overflow: auto;
  background: var(--surface, #14102a); border: 1px solid var(--border, #2b2444); border-radius: 16px;
  padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
@media (max-width: 560px) {
  .cf { padding: 10px; align-items: flex-end; }
  .cf__caja { width: 100%; }
  .cf-boton { right: 12px; bottom: 12px; }
}

/* ── Botón flotante de WhatsApp (todo el sitio) ── */
.wa-flotante { position: fixed; left: 18px; bottom: 18px; z-index: 120; width: 54px; height: 54px;
  border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.wa-flotante svg { width: 30px; height: 30px; }
.wa-flotante:hover { filter: brightness(1.08); }
@media (max-width: 560px) {
  .wa-flotante { left: 12px; bottom: 12px; width: 50px; height: 50px; }
  .wa-flotante svg { width: 27px; height: 27px; }
}

/* ── Avisos de actividad (ambientación) ── */
.sp-aviso { position: fixed; left: 18px; bottom: 86px; z-index: 119; display: flex; align-items: center; gap: 10px;
  max-width: min(345px, calc(100vw - 36px)); background: var(--surface, #14102a); border: 1px solid var(--border, #2b2444);
  border-radius: 14px; padding: 10px 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.sp-aviso[hidden] { display: none; }
.sp-aviso--visible { opacity: 1; transform: translateY(0); }
.sp-aviso__punto { width: 9px; height: 9px; border-radius: 50%; background: #25D366; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(37,211,102,.18); }
.sp-aviso__texto { font-size: 13.5px; line-height: 1.35; }
.sp-aviso__cerrar { margin-left: auto; background: transparent; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 16px; padding: 2px 4px; }
.sp-aviso__cerrar:hover { opacity: 1; }
@media (max-width: 560px) { .sp-aviso { left: 12px; bottom: 76px; } }

/* Estado de cada silla en el mapa: vendida (tachada) y reservada (punteada) */
.seat.seat--sold { background: #d84343; border-color: #c23636; color: #ffffff; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .85); }
.seat.seat--reserved { background: #1f8a55; border: 1px solid #187347; color: #ffffff; text-decoration: none; }

/* Barra de ocupación (estadísticas) */
.barra { display:inline-block; width:90px; height:8px; border-radius:99px; background:var(--muted-soft); vertical-align:middle; overflow:hidden; }
.barra i { display:block; height:100%; background:var(--fg); border-radius:99px; }

/* ── Gráficos de las estadísticas ── */
.dona { display: inline-block; width: 150px; height: 150px; border-radius: 50%; position: relative; flex: none; }
.dona i { position: absolute; inset: 24px; border-radius: 50%; background: var(--surface, #14102a); }
.dona-fila { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.dona-leyenda p { margin: 5px 0; font-size: 13.5px; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.barras { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.barras__fila { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.barras__pista { height: 12px; border-radius: 99px; background: var(--muted-soft); overflow: hidden; }
.barras__pista i { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }
.cols { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding-top: 10px; }
.cols__item { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; min-width: 0; }
.cols__barra { width: 100%; max-width: 56px; border-radius: 10px 10px 4px 4px; background: #8B5CF6; }
.cols__fecha { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.3; }
.cols__pct { font-size: 11px; }
@media (max-width: 640px) {
  .cols { height: 150px; gap: 8px; }
  .dona { width: 128px; height: 128px; }
}

/* ── Fondo de la portada (franja de arriba, detrás de todo) ── */
.hero--fondo {
  background-image: linear-gradient(rgba(8, 6, 15, .64), rgba(8, 6, 15, .8)), var(--fondo);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ── Acciones de la boleta (transferir / vender), ordenadas ── */
.boleta-acciones { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #2b2444); }
.boleta-accion { margin-top: 8px; border: 1px solid var(--border, #2b2444); border-radius: 12px; padding: 0 12px; background: rgba(255, 255, 255, .02); }
.boleta-accion summary { cursor: pointer; padding: 10px 2px; font-weight: 600; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 8px; }
.boleta-accion summary::-webkit-details-marker { display: none; }
.boleta-accion summary::before { content: "▸"; color: var(--muted); transition: transform .2s ease; }
.boleta-accion[open] summary::before { transform: rotate(90deg); }
.boleta-accion__form { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; }
.boleta-accion__form .input { flex: 1 1 180px; min-width: 0; }
.boleta-accion .help { padding-bottom: 10px; }

/* Barra animada de la cuenta atrás de apertura */
.barra-anim { height: 16px; border-radius: 99px; background: var(--muted-soft, rgba(255,255,255,.10)); overflow: hidden; border: 1px solid var(--border, #2b2444); }
.barra-anim i { display: block; height: 100%; width: 45%; border-radius: 99px; background: linear-gradient(90deg, #8B5CF6, #22C55E, #8B5CF6); opacity: .85; animation: barra-corre 1.4s linear infinite; }
@keyframes barra-corre { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

/* Incrustación (Spotify/YouTube) en la página del evento */
.embed-16x9 { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; border: 1px solid var(--border, #2b2444); background: rgba(255,255,255,.03); }
.embed-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ── Vitrina de artistas ─────────────────────────────────────────────── */
.vitrina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 980px) { .vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vitrina { grid-template-columns: 1fr; } }
.vitrina-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.vitrina-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.vitrina-card__foto { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--stage-2); overflow: hidden; }
.vitrina-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.vitrina-card__inicial { font-family: var(--font-display); font-size: 64px; font-weight: 700; color: var(--stage-fg); opacity: .85; }
.vitrina-card__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: var(--s4); }
.vitrina-card__cta { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.artista-hero { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s5); align-items: end; }
@media (max-width: 720px) { .artista-hero { grid-template-columns: 1fr; } }
.artista-hero__foto { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--stage-2); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.artista-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 720px) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.galeria__item { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4 / 3; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.galeria__item:hover img { transform: scale(1.03); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── Dos columnas iguales: biografía + incrustación ──────────────────── */
.duo-evento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: stretch; }
@media (min-width: 700px) { .duo-evento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; min-width: 0; }
.duo-texto h2 { margin-top: 6px; }
.duo-texto p { margin-top: 12px; }
.duo-media { padding: 14px; display: flex; flex-direction: column; }
.duo-media .embed-fill { position: relative; flex: 1; min-height: 420px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--stage-2); }
.duo-media .embed-fill iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.duo-media.duo-solo { width: 100%; max-width: 780px; margin-inline: auto; }
.duo-media.duo-solo .embed-fill { flex: none; min-height: 0; aspect-ratio: 16 / 9; }

/* ── Panel: edición de artista ───────────────────────────────────────── */
.artista-mini { aspect-ratio: 1 / 1; max-width: 148px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.artista-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-admin { display: flex; flex-wrap: wrap; gap: 10px; }
.gal-admin__item { width: 106px; }
.gal-admin__item img { width: 106px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.gal-admin__x { display: block; font-size: 12px; margin-top: 4px; color: var(--muted); }

/* ── Tarjetas de boleta (Mis boletas) ─────────────────────────────────── */
.tk { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.tk__media { position: relative; display: block; height: 200px; background: var(--stage-2); text-decoration: none; }
.tk__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk__media--vacia { background: linear-gradient(120deg, hsl(calc(var(--th, 220) * 1deg) 42% 30%), hsl(calc(var(--th, 220) * 1deg) 48% 15%)); }
.tk__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 9, 22, 0) 40%, rgba(12, 9, 22, .78)); }
.tk__estado { position: absolute; top: 12px; left: 12px; background: rgba(12, 9, 22, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.tk__titulo { position: absolute; left: 16px; right: 16px; bottom: 12px; color: #fff; display: grid; gap: 2px; }
.tk__titulo strong { font-family: var(--font-display); font-size: 22px; line-height: 1.1; letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.tk__titulo span { font-size: 13px; opacity: .88; }
.tk__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 214px; }
.tk__datos { padding: 16px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-content: start; }
@media (min-width: 1080px) { .tk__datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tk__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0; }
.tk__v { font-size: 13.5px; font-weight: 550; line-height: 1.35; margin: 2px 0 0; }
.tk__lado { border-left: 1px dashed var(--border-strong); background: var(--surface-2); padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; }
.tk__codigo { font-family: var(--font-mono); font-size: 15.5px; letter-spacing: .04em; margin: 0; }
.tk__nota { color: var(--muted); font-size: 11.5px; margin: 2px 0 0; text-align: center; }
.tk__pie { border-top: 1px dashed var(--border-strong); padding: 13px 18px 16px; }
.tk__pie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.tk__pie-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
@media (max-width: 720px) {
  .tk__media { height: 150px; }
  .tk__titulo strong { font-size: 19px; }
  .tk__cuerpo { grid-template-columns: 1fr; }
  .tk__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 10px 14px; }
  .tk__lado { border-left: 0; border-top: 1px dashed var(--border-strong); padding: 12px; }
  .tk__pie { padding: 12px 14px 14px; }
  .tk__pie-grid { grid-template-columns: 1fr; }
}

/* ── Aviso de portada (boletería agotada, anuncios) ───────────────────── */
.aviso { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 24px 26px; border-radius: var(--radius-lg); color: #fff; overflow: hidden; border: 1px solid var(--stage-border, #2b2444); background: radial-gradient(120% 160% at 85% 10%, hsl(288 60% 30% / .55), transparent 55%), radial-gradient(120% 170% at 10% 90%, hsl(16 70% 34% / .5), transparent 60%), linear-gradient(120deg, #1b1530, #0f0c1d 70%); }
.aviso::before { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(255, 255, 255, .16); border-radius: calc(var(--radius-lg) - 8px); pointer-events: none; }
.aviso__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #ffd9cf; }
.aviso__icon svg { width: 28px; height: 28px; }
.aviso__titulo { font-family: var(--font-display); font-size: 21px; line-height: 1.15; letter-spacing: -.01em; margin: 0; color: #fff; }
.aviso__cuerpo { color: rgba(255, 255, 255, .82); font-size: 14px; margin: 6px 0 0; max-width: 76ch; }
.aviso__sello { position: relative; justify-self: end; transform: rotate(-8deg); border: 2px solid #e05a45; color: #ff9e8b; font-family: var(--font-mono); font-weight: 700; letter-spacing: .14em; font-size: 12.5px; padding: 9px 14px; border-radius: 10px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 4px rgba(224, 90, 69, .12); }
.aviso__sello::before { content: ''; position: absolute; left: -36px; top: 50%; transform: translateY(-50%); height: 60px; border-left: 1px dashed rgba(255, 255, 255, .28); }
@media (max-width: 720px) {
  .aviso { grid-template-columns: auto minmax(0, 1fr); padding: 20px 18px; gap: 14px; }
  .aviso__icon { width: 46px; height: 46px; border-radius: 13px; }
  .aviso__icon svg { width: 24px; height: 24px; }
  .aviso__titulo { font-size: 18px; }
  .aviso__cuerpo { font-size: 13.5px; }
  .aviso__sello { grid-column: 1 / -1; justify-self: start; transform: rotate(-6deg); margin-top: 2px; }
  .aviso__sello::before { display: none; }
}

/* ── Fechas pasadas (funciones vencidas) ──────────────────────────────── */
.chip--pasada { opacity: .55; }
.dateline--pasada { opacity: .55; }
.dateline--pasada .dateline__date { text-decoration: line-through; }
.dateline--pasada .btn { border: 1px solid var(--border); color: var(--muted); }

/* ── Sillas: estados y leyenda de colores ─────────────────────────────── */
.seat.seat--blocked { background: #c6ccd4; border: 1px solid #adb6c0; color: #3f4750; text-decoration: none; }
.seat-leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.seat-leyenda__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.seat-muestra { width: 15px; height: 15px; border-radius: 4px 4px 2px 2px; border: 1px solid var(--border-strong); display: inline-block; flex: none; }
.seat-muestra--libre { background: #ffffff; border-color: #c7c0b1; }
.seat-muestra--vendida { background: #d84343; border-color: #c23636; }
.seat-muestra--reservada { background: #1f8a55; border-color: #187347; }
.seat-muestra--bloqueada { background: #c6ccd4; border-color: #adb6c0; }


/* ==========================================================================
   Refinamiento visual · v2
   Solo presentación: no cambia estructura, textos ni lógica de la tienda,
   y no toca nada del flujo de pagos (solo el aspecto de los controles).
   ========================================================================== */

:root {
  --ring: 0 0 0 3px color-mix(in oklch, var(--accent) 28%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
html { color-scheme: light; }

/* ── tipografía ───────────────────────────────────────────────────────── */
.display, h1.display { font-weight: 700; letter-spacing: -.03em; }
h1, .h1 { font-weight: 700; letter-spacing: -.025em; }
h2, .h2 { font-weight: 680; }
.eyebrow {
  font-family: var(--font-body); font-size: 13px; font-weight: 650;
  letter-spacing: .01em; text-transform: none; color: var(--accent);
}
.eyebrow--plain { color: var(--muted); }

/* ── navegación ───────────────────────────────────────────────────────── */
.nav { background: color-mix(in oklch, var(--bg) 84%, transparent); box-shadow: 0 1px 0 rgba(26, 21, 35, .03); }
.nav__links a { font-weight: 500; transition: color .15s ease; }
.nav__links a[aria-current="page"] { border-bottom-width: 2px; font-weight: 600; }
.nav__menu-panel { border-radius: 16px; box-shadow: 0 20px 48px -12px rgba(21, 16, 42, .28); }
.nav__menu-panel a { transition: background .12s ease, color .12s ease; }

/* ── botones ──────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius); font-weight: 600; letter-spacing: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .2s var(--ease), transform .12s var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn--primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
              0 10px 20px -12px color-mix(in oklch, var(--accent) 85%, black);
}
.btn--primary:hover:not([disabled]) {
  background: color-mix(in oklch, var(--accent) 88%, black);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
              0 14px 24px -12px color-mix(in oklch, var(--accent) 90%, black);
}
.btn--primary:active:not([disabled]) { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.btn--secondary { background: var(--surface); border-color: var(--border-strong); }
.btn--secondary:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.btn--ghost:hover { color: var(--accent); background: var(--accent-soft); }
.btn--onstage {
  background: transparent; color: var(--stage-fg);
  border-color: color-mix(in oklch, var(--stage-fg) 38%, transparent);
}
.btn--onstage:hover { background: color-mix(in oklch, var(--stage-fg) 12%, transparent); border-color: var(--stage-fg); }
.hero .btn--ghost:hover { color: var(--stage-fg) !important; background: color-mix(in oklch, var(--stage-fg) 10%, transparent); }
.hero :focus-visible, .stage :focus-visible, .foot :focus-visible { outline-color: var(--spot); }

/* ── portada (hero) ───────────────────────────────────────────────────── */
.hero::before {
  background:
    radial-gradient(46% 70% at 16% 0%, color-mix(in oklch, var(--accent) 40%, transparent), transparent 70%),
    radial-gradient(38% 60% at 92% 8%, color-mix(in oklch, oklch(55% .24 285) 38%, transparent), transparent 70%);
}
.hero:not(.hero--paper) .lead,
.hero:not(.hero--paper) .muted,
.hero:not(.hero--paper) .meta { color: color-mix(in oklch, var(--stage-fg) 78%, transparent); }
.hero:not(.hero--paper) .eyebrow { color: var(--spot); }
.hero__stat b { color: var(--spot); font-weight: 700; }

/* ── afiches y tarjetas de evento ─────────────────────────────────────── */
.poster { border-color: transparent; box-shadow: var(--shadow-sm); }
.poster__tag {
  align-self: flex-start; padding: 4px 11px; border-radius: 999px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: var(--stage-fg); background: color-mix(in oklch, var(--stage-fg) 16%, transparent);
  backdrop-filter: blur(6px);
}
.gig .poster { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.gig:hover .poster { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gig .poster__foto { transition: transform .7s var(--ease); }
.gig:hover .poster__foto { transform: scale(1.04); }
.gig__name { font-weight: 680; }
.gig__name a { transition: color .15s ease; }
.gig__name a:hover { color: var(--accent); }
.gig__foot { border-top-style: dashed; border-top-color: var(--border-strong); }
.price { font-size: 18px; font-weight: 650; }

.card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card--flat { box-shadow: none; }
.card--stage { box-shadow: none; }
.vitrina-card { box-shadow: var(--shadow-sm); }
.vitrina-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
.tk { box-shadow: var(--shadow-sm); }

/* ── etiquetas y chips ────────────────────────────────────────────────── */
.badge {
  padding: 4px 11px; font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .01em; text-transform: none;
}
.chip { font-weight: 500; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ── formularios ──────────────────────────────────────────────────────── */
.input, .select, .textarea { border-radius: var(--radius); transition: border-color .15s ease, box-shadow .15s ease; }
.input:hover:not([disabled]), .select:hover:not([disabled]), .textarea:hover { border-color: color-mix(in oklch, var(--fg) 45%, var(--border-strong)); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 22%, transparent); }
.field > label { font-weight: 600; }

/* ── avisos y tablas ──────────────────────────────────────────────────── */
.alert { border-radius: 12px; border-left-width: 4px; }
.table thead th { background: var(--surface-2); }
.table tbody tr:hover { background: color-mix(in oklch, var(--accent) 5%, transparent); }

/* ── pasos del checkout ───────────────────────────────────────────────── */
.steps__item[aria-current="step"] .steps__n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.steps__item--done .steps__n { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ── mapa y sillas ────────────────────────────────────────────────────── */
.mapframe { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.seat { border-color: var(--border-strong); box-shadow: 0 1px 0 rgba(26, 21, 35, .08); }
.seat:not(.seat--sold):not(.seat--reserved):not(.seat--blocked):hover:not([disabled]) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--fg);
}
.seat[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
.seat-muestra--libre { border-color: var(--border-strong); }
.mapband { border-radius: 12px; }
.mapband:hover { border-color: var(--accent); }

/* ── boleta digital ───────────────────────────────────────────────────── */
.stub { box-shadow: var(--shadow-md); }
.stub__main { position: relative; padding-left: calc(var(--s4) + 6px); }
.stub__main::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.qr { border-radius: 10px; box-shadow: var(--shadow-sm); }
.tk__lado { background: var(--surface-2); }

/* ── paneles y avisos emergentes ──────────────────────────────────────── */
.aviso-subasta__caja, .pago-velo__caja { border-radius: 20px; }
.boleta-accion { border-radius: 12px; background: var(--surface-2); }

/* ── pie, botones flotantes y gráficos ────────────────────────────────── */
.foot { border-top: 3px solid var(--accent); }
.foot a:hover { color: var(--spot); }
.cf-boton { background: var(--stage); border: 1px solid var(--stage-border); }
.cf-boton:hover { background: var(--stage-2); filter: none; }
.cols__barra { background: var(--accent); }
.barra i { background: var(--accent); }
.barra-anim i { background: linear-gradient(90deg, var(--accent), var(--spot), var(--accent)); }
.aviso__sello { border-color: var(--spot); color: var(--spot); }

/* ══════════════════════════════════════════════════════════════════════════
   Refinamiento de apariencia (premium): ritmo de secciones, botones suaves,
   navegación del panel, interruptor y barra de herramientas del evento.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Ritmo de la portada: menos aire donde se pidió ──────────────────── */
.section--pt-tight { padding-top: clamp(26px, 3.2vw, 50px); }
.section--pb-tight { padding-bottom: clamp(26px, 3.2vw, 50px); }

/* ── Botones suaves: opciones con tinte, sin borde, activación al pasar ─ */
:root {
  --violet: #6d5ae0;
  --info:   #2f6fd6;
}
.btn--soft {
  background: color-mix(in oklch, var(--tone, var(--accent)) 13%, transparent);
  border-color: transparent;
  color: color-mix(in oklch, var(--tone, var(--accent)) 82%, var(--fg));
}
.btn--soft:hover:not([disabled]) {
  background: color-mix(in oklch, var(--tone, var(--accent)) 22%, transparent);
  border-color: transparent;
  color: color-mix(in oklch, var(--tone, var(--accent)) 92%, var(--fg));
  transform: translateY(-1px);
}
.btn--soft:active:not([disabled]) { transform: translateY(0); }
.btn--soft--violet { --tone: var(--violet); }
.btn--soft--ok     { --tone: var(--ok); }
.btn--soft--warn   { --tone: var(--warn); }
.btn--soft--info   { --tone: var(--info); }

/* El botón de contorno también “se activa” al pasar el mouse */
.btn--secondary:hover:not([disabled]) {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

/* ── Navegación del panel: pastillas suaves, sin bordes ──────────────── */
.admin-nav { border-bottom: 0; gap: 8px; }
.admin-nav a {
  padding: 8px 14px; border-radius: 999px;
  background: var(--fg-soft); color: var(--muted);
  border-bottom: 0; margin-bottom: 0; font-weight: 550;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.admin-nav a:hover { color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.admin-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 650; }

/* ── Interruptor (encendido / apagado) ───────────────────────────────── */
.switch { position: relative; display: inline-flex; align-items: center; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch__pista {
  width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong);
  position: relative; transition: background .18s ease; flex: none;
}
.switch__pista::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(26, 21, 35, .3);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.switch input:checked + .switch__pista { background: var(--ok); }
.switch input:checked + .switch__pista::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__pista { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Barra de herramientas del evento (localidades y precios) ────────── */
.zonas-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 12px 14px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.zonas-tools__grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.zonas-tools__ops { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-left: auto; }
.zonas-tools__op { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.zonas-tools__label { font-size: var(--fs-sm); color: var(--muted); }
.btn--icono { padding: 7px 10px; min-height: 38px; }
.btn--icono .ic { width: 17px; height: 17px; }
@media (max-width: 860px) {
  .zonas-tools__ops { margin-left: 0; }
}

/* ── Franja corta con fondo (páginas internas: mitad de alto) ────────── */
.hero--corto { display: flex; align-items: center; min-height: clamp(280px, 42vh, 400px); }
.hero--corto .hero__inner { width: 100%; padding-block: clamp(44px, 6vw, 78px); }
@media (max-width: 640px) { .hero--corto { min-height: 236px; } }

/* ── Fondo suave de la página del evento (se controla con FONDO_EVENTO) ── */
.evento-fondo {
  background-image: linear-gradient(180deg, rgba(246, 244, 249, .42), rgba(246, 244, 249, .84) 62%, var(--bg)), var(--fondo-evento);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ── Ventajas de «Tu evento»: tarjetas con ícono y color suave ────────── */
.tarjeta-suave {
  background: color-mix(in oklch, var(--tone, var(--accent)) 8%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--tone, var(--accent)) 20%, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--s4);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tarjeta-suave:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in oklch, var(--tone, var(--accent)) 38%, var(--border));
}
.tarjeta-suave__icono {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--tone, var(--accent)) 15%, transparent);
  color: color-mix(in oklch, var(--tone, var(--accent)) 85%, var(--fg));
  margin-bottom: 12px;
}
.tarjeta-suave__icono .ic { width: 22px; height: 22px; }
.tarjeta-suave h3 { font-size: 18px; }
.tarjeta-suave__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tarjeta-suave__cabecera .tarjeta-suave__icono { margin-bottom: 0; }
.tarjeta-suave__num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: color-mix(in oklch, var(--tone, var(--accent)) 18%, transparent); color: color-mix(in oklch, var(--tone, var(--accent)) 92%, var(--fg)); }

/* ── Ayuda de la barra de herramientas + barra de progreso de la fila ── */
.zonas-tools__ayuda {
  flex-basis: 100%; display: grid; gap: 4px 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 2px;
}
.zonas-tools__ayuda p { font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }
.zonas-tools__ayuda strong { color: var(--fg); }
.barra-prog { height: 10px; border-radius: 99px; background: var(--muted-soft); overflow: hidden; }
.barra-prog i { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 99px; transition: width 1s linear; }

/* ── Cuenta atrás de apertura: barra que avanza + muñequito ──────────── */
.barra-caja { position: relative; padding-top: 46px; }
.barra-prog--lg { height: 12px; }
.barra-muneco {
  position: absolute; bottom: 18px; left: 2%; height: 40px; width: auto;
  transform: translateX(-50%);
  transition: left 1s linear;
  animation: muneco-desespero 1.5s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(26, 21, 35, .22));
}
@keyframes muneco-desespero {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  25%      { transform: translateX(-50%) translateY(-3px) rotate(2.5deg); }
  50%      { transform: translateX(-50%) translateY(0) rotate(-2.5deg); }
  75%      { transform: translateX(-50%) translateY(-2px) rotate(2deg); }
}
@media (max-width: 560px) { .barra-muneco { height: 34px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .barra-muneco { animation: none; }
  .barra-prog i { transition: none; }
}

/* ── Tarjetas promocionales de la portada (Separa / Regalo) ──────────── */
.card-promo {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 320px; padding: 58px 26px 44px;
  border-radius: var(--radius-lg); overflow: hidden; color: #fff;
  background-image:
    linear-gradient(180deg, rgba(8, 6, 15, .40), rgba(8, 6, 15, .78)),
    var(--foto, linear-gradient(135deg, #2a1136, #6a2b6e));
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-promo:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -20px rgba(21, 16, 42, .5); }
.card-promo:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.card-promo__marca {
  position: absolute; top: 16px; left: 20px;
  font-family: var(--font-display); font-size: clamp(13px, 1.25vw, 16px);
  font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 12px rgba(8, 6, 15, .6);
}
.card-promo__cuerpo { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 440px; }
.card-promo__titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px); letter-spacing: .01em;
  text-transform: uppercase; line-height: 1.02;
  text-shadow: 0 2px 14px rgba(8, 6, 15, .45);
}
.card-promo__pie { font-size: var(--fs-sm); color: rgba(255, 255, 255, .86); max-width: 470px; line-height: 1.55; }
@media (max-width: 640px) { .card-promo { min-height: 252px; } .card-promo__marca { font-size: 12.5px; } }

.card-promo--mini { min-height: 132px; padding: 20px 18px; }
.card-promo--mini .card-promo__cuerpo { gap: 5px; }
.card-promo--mini .card-promo__titulo { font-size: clamp(16px, 1.6vw, 20px); letter-spacing: .03em; }
.card-promo--mini .card-promo__pie { font-size: 12px; }
@media (max-width: 640px) { .card-promo--mini { min-height: 108px; padding: 16px 14px; } }

/* ── Localidades como acordeón (encoger / desplegar) ─────────────────── */
.zona-acc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.zona-acc[open] { border-color: color-mix(in oklch, var(--accent) 28%, var(--border)); }
.zona-acc__cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.zona-acc__cab::-webkit-details-marker { display: none; }
.zona-acc__cab::marker { content: ''; }
.zona-acc__cab:hover { background: color-mix(in oklch, var(--accent) 5%, transparent); }
.zona-acc__cab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.zona-acc__nombre { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zona-acc__titulo { font-weight: 700; font-size: 16.5px; }
.zona-acc__titulo .sw-zone { display: inline-block; vertical-align: middle; margin-right: 8px; }
.zona-acc__meta { flex: none; font-size: var(--fs-meta); color: var(--muted); }
.zona-acc__flecha { flex: none; width: 20px; height: 20px; color: var(--muted); transition: transform .18s ease; }
.zona-acc[open] .zona-acc__flecha { transform: rotate(180deg); color: var(--accent); }
.zona-acc__cuerpo { padding: 2px 16px 16px; }
@media (max-width: 780px) { .zona-acc__meta { display: none; } }

/* Tarjeta de regalo en el checkout: lista con casillas para elegir. */
.regalo-lista { display: grid; gap: 8px; }
.regalo-lista label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface-2); transition: border-color .15s ease, box-shadow .15s ease; }
.regalo-lista label:hover { border-color: var(--border-strong); }
.regalo-lista input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.regalo-lista label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.regalo-lista label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Portada v2: carrusel de destacados, buscador y nav móvil ─────────── */
html { -webkit-tap-highlight-color: transparent; }
.nav__toggle { align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--fg); cursor: pointer; }
.nav__toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav__barras { display: grid; gap: 4px; width: 18px; }
.nav__barras span { display: block; height: 2px; border-radius: 99px; background: currentColor; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__barras span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__barras span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__barras span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 767px) {
  .brand { order: 1; }
  .nav__actions { order: 2; margin-left: auto; }
  .nav .nav__toggle { order: 3; }
  .nav__links { order: 4; }
}

/* Buscador de la portada */
.buscador-caja { padding: 14px 16px; border-radius: 16px; }
.buscador { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.buscador__campo { display: grid; gap: 5px; flex: 0 1 190px; min-width: 150px; }
.buscador__campo--q { flex: 1 1 240px; min-width: 200px; }
.buscador__campo label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.buscador .input, .buscador .select { min-height: 40px; padding: 8px 12px; font-size: 14px; }
.buscador__btn { min-height: 40px; padding: 8px 22px; flex: none; }
@media (max-width: 720px) {
  .buscador__campo, .buscador__campo--q { flex: 1 1 100%; }
  .buscador__btn { flex: 1 1 100%; }
}

/* Carrusel de destacados */
.destacados-carrusel { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; padding-bottom: 6px; }
.destacados-carrusel::-webkit-scrollbar { display: none; }
.destacados-carrusel.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.destacados-carrusel.arrastrando * { user-select: none; }
.destacados-carrusel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
.destacados-pista { display: grid; grid-auto-flow: column; grid-auto-columns: 320px; gap: var(--s4); }
.dest-card { scroll-snap-align: start; }
.carrusel-nav { display: flex; gap: 8px; }
.carrusel-flecha { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s ease, color .15s ease, opacity .15s ease; }
.carrusel-flecha:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.carrusel-flecha[disabled] { opacity: .35; cursor: default; }
.carrusel-puntos { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.carrusel-puntos button { width: 7px; height: 7px; border-radius: 99px; border: 0; background: var(--border-strong); padding: 0; cursor: pointer; transition: width .2s ease, background .2s ease; }
.carrusel-puntos button[aria-current="true"] { width: 22px; background: var(--accent); }
@media (max-width: 767px) {
  .carrusel-nav { display: none; }
  .destacados-pista { grid-auto-columns: min(84vw, 300px); }
}

/* Feedback tipo app */
.gig:active .poster { transform: scale(.985); }

/* ── Portada v3: switches del banner, chips, tabbar y micro-animaciones ── */
@media (max-width: 767px) { .hero--portada.hero--fuera-movil { display: none; } }
@media (min-width: 768px) { .hero--portada.hero--fuera-escritorio { display: none; } }

.poster__chip { position: absolute; top: 12px; right: 12px; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(12,9,22,.62); color: #fff; border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.poster__chip--hot { background: #d84343; border-color: rgba(255,255,255,.35); }
.poster__chip--warm { background: var(--accent); border-color: transparent; color: var(--accent-ink); }

/* Barra inferior tipo app (solo móvil) */
.tabbar { display: none; }
@media (max-width: 767px) {
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; background: color-mix(in oklch, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar__item { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 9px 4px 8px; font-size: 10.5px; letter-spacing: .02em; color: var(--muted); transition: color .15s ease, transform .12s ease; }
  .tabbar__item .ic { width: 22px; height: 22px; }
  .tabbar__item--on { color: var(--accent); }
  .tabbar__item:active { transform: scale(.94); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .cf-boton { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .wa-flotante { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Micro-animaciones de entrada */
html.js [data-reveal]:not(.reveal-in) { opacity: 0; }
html.js [data-reveal].reveal-in { animation: rev-subir .55s var(--ease) backwards; animation-delay: var(--rev-delay, 0ms); }
@keyframes rev-subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]:not(.reveal-in) { opacity: 1; }
  html.js [data-reveal].reveal-in { animation: none; }
}

/* Banner pequeño para móvil (HERO_MOVIL_MINI) */
.hero-mini { display: none; }
@media (max-width: 767px) {
  .hero-mini { display: block; position: relative; overflow: hidden; min-height: 158px; background: var(--stage); color: var(--stage-fg); border-bottom: 1px solid var(--stage-border); }
  .hero-mini--foto { background-image: var(--mini-foto); background-size: cover; background-position: center 32%; }
  .hero-mini::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12,9,22,.86) 0%, rgba(12,9,22,.58) 52%, rgba(12,9,22,.30) 100%); }
  .hero-mini__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-block: 22px 20px; }
  .hero-mini__marca { margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--spot, #ffb3dd); }
  .hero-mini__dicho { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.05; letter-spacing: -.02em; font-weight: 600; }
  .hero-mini__btn { margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hero-mini__btn:hover { background: rgba(255,255,255,.22); }
  .hero-mini__btn:active { transform: scale(.96); }
  /* Interruptor DUDAS_MOVIL: esconde el botón «¿Dudas?» solo en móvil. */
  .cf-boton--no-movil { display: none; }
}

/* Tarjetas de eventos con fondo de color (TARJETAS_FONDO en el .env) */
.gig--color {
  background: linear-gradient(180deg, hsl(var(--h, 280) 58% 97.6%) 0%, hsl(var(--h, 280) 52% 93.4%) 100%);
  border: 1px solid hsl(var(--h, 280) 36% 88%);
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 16px 34px -26px hsl(var(--h, 280) 42% 35% / .65);
  transition: box-shadow .25s var(--ease);
}
.gig--color:hover { box-shadow: 0 22px 44px -28px hsl(var(--h, 280) 46% 35% / .85); }
.gig--color .gig__foot { border-top-color: hsl(var(--h, 280) 30% 85%); }
.gig--color:active { transform: scale(.992); }

/* ── Buscador compacto: campo + «Opciones» (ciudad / orden) + lupa ────── */
.buscador--app { display: grid; gap: 10px; }
.buscador__fila { display: flex; gap: 8px; align-items: stretch; }
.buscador__q { position: relative; flex: 1 1 auto; min-width: 0; }
.buscador__q .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.buscador__q .input { padding-left: 42px; }
.buscador__opciones {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 46px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.buscador__opciones:hover, .buscador__opciones[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn.buscador__ir { flex: none; width: 54px; min-height: 50px; padding: 0; }
.buscador__ir .ic { width: 28px; height: 28px; max-width: none; stroke-width: 2.6; }
.buscador__q .ic { width: 20px; height: 20px; }
.buscador__opciones .ic { width: 22px; height: 22px; }
.buscador__mas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.buscador__mas[hidden] { display: none; }
html.no-js .buscador__mas[hidden] { display: grid; }
.buscador--app .buscador__campo { min-width: 0; }
@media (max-width: 480px) {
  .buscador__opciones span { display: none; }
  .buscador__opciones { width: 50px; padding: 0; justify-content: center; }
  .buscador__mas { grid-template-columns: 1fr; }
}

/* Líneas extra de la tarjeta de evento: ocultas salvo en los temas que las usan */
.gig__fecha, .gig__artista, .gig__lugar { display: none; }

/* Que el encabezado fijo no tape la sección al saltar a #buscar o #eventos */
#buscar, #eventos { scroll-margin-top: 64px; }

/* ── «Tres pasos»: línea de tiempo en una sola tarjeta ─────────────────── */
.pasos {
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
  padding: 22px 18px; box-shadow: 0 12px 28px -22px rgba(23, 20, 31, .55);
}
.pasos__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.paso { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.paso:last-child { padding-bottom: 0; }
.paso:not(:last-child)::before {
  content: ''; position: absolute; left: 21px; top: 52px; bottom: 6px; width: 2px; border-radius: 2px;
  background: color-mix(in oklch, var(--accent) 22%, var(--border));
}
.paso__icono {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 12%, var(--surface)); color: var(--accent);
}
.paso__icono--lleno { background: var(--accent); color: var(--accent-ink); }
.paso__icono .ic { width: 22px; height: 22px; }
.paso__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.paso__num { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.paso h3 { font-size: 18px; }
.paso p { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.pasos__cta { width: 100%; margin-top: 22px; }
@media (min-width: 768px) {
  .pasos { padding: 28px; }
  .pasos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .paso { grid-template-columns: 1fr; padding-bottom: 0; }
  .paso:not(:last-child)::before { left: 56px; right: -20px; top: 21px; bottom: auto; width: auto; height: 2px; }
  .pasos__cta { width: auto; }
}

/* ── Promos «Separa tu entrada» / «Tarjeta de regalo»: foto + ícono + texto ── */
.promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.promo {
  --promo-tono: var(--accent);
  display: flex; flex-direction: column; overflow: hidden; color: var(--fg); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 12px 28px -22px rgba(23, 20, 31, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.promo--regalo { --promo-tono: #d9482b; }
.promo:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -22px rgba(23, 20, 31, .6); }
.promo:active { transform: scale(.985); }
.promo:focus-visible { outline: 3px solid var(--promo-tono); outline-offset: 3px; }
.promo__foto {
  position: relative; display: block; height: 150px;
  background: linear-gradient(135deg, color-mix(in oklch, var(--promo-tono) 70%, black), var(--promo-tono));
}
.promo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo__icono {
  position: absolute; left: 16px; bottom: -24px; width: 50px; height: 50px; border-radius: 16px;
  display: grid; place-items: center; background: var(--promo-tono); color: #fff;
  border: 3px solid var(--surface); box-shadow: 0 6px 16px -6px rgba(23, 20, 31, .6);
}
.promo__icono .ic { width: 22px; height: 22px; }
.promo__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 32px 18px 18px; }
.promo__titulo { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.promo__texto { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.promo__cta { margin-top: 6px; font-size: 14px; font-weight: 700; color: color-mix(in oklch, var(--promo-tono) 88%, black); }
@media (max-width: 767px) {
  .promos { grid-template-columns: 1fr; }
  .promo__foto { height: 130px; }
}

/* ── «¿Te sobró una boleta?»: tarjeta con forma de boleto ──────────────── */
.boleto-venta {
  display: flex; flex-direction: column; color: #fff; background: var(--accent);
  border-radius: 24px; box-shadow: 0 18px 36px -24px color-mix(in oklch, var(--accent) 80%, black);
}
.boleto-venta__cuerpo { padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.boleto-venta__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.boleto-venta__cabecera .ic { width: 28px; height: 28px; }
.boleto-venta__etiqueta { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.boleto-venta__titulo { margin-top: 6px; color: #fff; font-size: clamp(30px, 4vw, 42px); line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.boleto-venta__texto { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .9); max-width: 60ch; }
/* Corte punteado con las dos muescas del color del fondo de la página */
.boleto-venta__corte { position: relative; height: 24px; margin: 0 18px; }
.boleto-venta__corte::after { content: ''; position: absolute; left: 0; right: 0; top: 11px; border-top: 2px dashed rgba(255, 255, 255, .4); }
.boleto-venta__corte::before {
  content: ''; position: absolute; inset: 0 -18px; pointer-events: none;
  background:
    radial-gradient(circle at 0 50%, var(--bg) 12px, transparent 12.5px),
    radial-gradient(circle at 100% 50%, var(--bg) 12px, transparent 12.5px);
}
.boleto-venta__talon { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.btn.boleto-venta__btn { width: 100%; background: #fff; border-color: #fff; color: var(--stage); font-weight: 700; }
.btn.boleto-venta__btn:hover { background: rgba(255, 255, 255, .9); color: var(--stage); }
.boleto-venta__enlace { text-align: center; padding: 8px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.boleto-venta__enlace:hover { color: #fff; text-decoration-thickness: 2px; }
.boleto-venta :focus-visible { outline-color: #fff; }
/* En computador: cuerpo a la izquierda, corte vertical y talón a la derecha */
@media (min-width: 768px) {
  .boleto-venta { flex-direction: row; align-items: stretch; }
  .boleto-venta__cuerpo { flex: 1 1 auto; padding: 34px 32px; }
  .boleto-venta__corte { width: 24px; height: auto; margin: 18px 0; flex: none; }
  .boleto-venta__corte::after { left: 11px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed rgba(255, 255, 255, .4); }
  .boleto-venta__corte::before {
    inset: -18px 0;
    background:
      radial-gradient(circle at 50% 0, var(--bg) 12px, transparent 12.5px),
      radial-gradient(circle at 50% 100%, var(--bg) 12px, transparent 12.5px);
  }
  .boleto-venta__talon { flex: 0 0 300px; justify-content: center; padding: 28px; }
}

/* ── Destacados: tres modelos (DESTACADOS_ESTILO=1|2|3 en el .env) ────── */
.dest__todos { font-size: 14px; font-weight: 700; color: var(--accent); }
.dest__cubre { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.dest__cubre:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dest__precio { font-size: 13px; color: var(--muted); }
.dest__precio b { font-size: 18px; font-weight: 800; color: var(--fg); letter-spacing: -.01em; }
.dest__chip { position: static; }
/* Calendario blanco con mes y día */
.dest__cal {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1;
  padding: 8px 10px; border-radius: 14px; background: #fff; color: #17141f;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
}
.dest__cal span { font-size: 11px; font-weight: 700; color: var(--accent); }
.dest__cal b { font-family: var(--font-display); font-size: 22px; font-weight: 800; }

/* Modelo 1 · póster a pantalla completa */
.dest--1 .destacados-pista { grid-auto-columns: 300px; }
.dest1 {
  position: relative; isolation: isolate; aspect-ratio: 3 / 4.4; border-radius: 26px; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 16px;
  background: linear-gradient(160deg, hsl(var(--h, 280) 45% 34%), hsl(var(--h, 280) 50% 13%));
  box-shadow: 0 20px 40px -24px rgba(23, 20, 31, .8);
}
.dest1::after, .dest3__principal::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 20, .05) 25%, rgba(10, 8, 20, .45) 55%, rgba(10, 8, 20, .92) 100%);
}
.dest1__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease, ease); }
.dest1:hover .dest1__img, .dest3__principal:hover .dest1__img { transform: scale(1.04); }
.dest1__arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dest1__abajo { display: flex; flex-direction: column; gap: 6px; }
.dest1__artista { color: #fff; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.dest1__gira { font-size: 14px; color: rgba(255, 255, 255, .85); line-height: 1.35; }
.dest1__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.dest1 .dest__precio, .dest3__principal .dest__precio { color: rgba(255, 255, 255, .78); }
.dest1 .dest__precio b, .dest3__principal .dest__precio b { color: #fff; }
.dest1__btn { position: relative; z-index: 2; background: #fff; border-color: #fff; color: #17141f; font-weight: 700; }
.dest1__btn:hover { background: rgba(255, 255, 255, .88); color: #17141f; }

/* Modelo 2 · foto + bloque de fecha */
.dest--2 .destacados-pista { grid-auto-columns: 300px; }
.dest2 {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 14px 30px -22px rgba(23, 20, 31, .6);
}
.dest2__foto {
  position: relative; display: block; height: 190px;
  background: linear-gradient(160deg, hsl(var(--h, 280) 45% 34%), hsl(var(--h, 280) 50% 13%));
}
.dest2__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest2__foto .dest__chip { position: absolute; top: 12px; right: 12px; }
.dest2__fecha {
  position: absolute; left: 14px; bottom: -26px; width: 58px; height: 62px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: var(--accent); color: var(--accent-ink); border: 3px solid var(--surface);
  box-shadow: 0 8px 18px -8px rgba(23, 20, 31, .6);
}
.dest2__fecha b { font-family: var(--font-display); font-size: 24px; font-weight: 800; }
.dest2__fecha span { font-size: 11px; font-weight: 700; margin-top: 3px; }
.dest2__cuerpo { padding: 34px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dest2__cuando { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--accent); }
.dest2__artista { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.dest2__artista a { color: var(--fg); }
.dest2__gira { font-size: 14px; color: var(--muted); }
.dest2__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
}
.dest2__pie .dest__precio { display: flex; flex-direction: column; font-size: 12px; }
.dest2 { min-height: 100%; }
.dest2__cuerpo .dest2__pie { margin-top: 12px; }

/* Modelo 3 · uno grande + lista */
.dest3 { display: grid; gap: 12px; }
.dest3__principal {
  position: relative; isolation: isolate; min-height: 260px; border-radius: 24px; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
  background: linear-gradient(160deg, hsl(var(--h, 280) 45% 34%), hsl(var(--h, 280) 50% 13%));
  box-shadow: 0 18px 36px -24px rgba(23, 20, 31, .8);
}
.dest3__sello {
  position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
}
.dest3__principal .dest__chip { position: absolute; top: 14px; right: 14px; }
.dest3__cuando { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #ffc93c; }
.dest3__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dest3__item {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 18px; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 20px -16px rgba(23, 20, 31, .55);
  transition: transform .15s ease;
}
.dest3__item:active { transform: scale(.985); }
.dest3__mini {
  width: 64px; height: 64px; border-radius: 14px; overflow: hidden; flex: none;
  background: linear-gradient(160deg, hsl(var(--h, 280) 45% 34%), hsl(var(--h, 280) 50% 13%));
}
.dest3__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest3__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dest3__item .dest3__cuando { font-size: 11px; color: var(--accent); }
.dest3__artista { font-size: 16px; font-weight: 800; }
.dest3__precio { font-size: 13px; color: var(--muted); }
.dest3__flecha { color: var(--muted); }
@media (min-width: 900px) {
  .dest3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; }
  .dest3__principal { min-height: 340px; }
  .dest3__lista { align-content: start; }
}
@media (max-width: 767px) {
  .dest--1 .destacados-pista, .dest--2 .destacados-pista { grid-auto-columns: min(80vw, 300px); }
}

/* ══ Mis boletas: cabecera oscura + boletas con talón ═══════════════════ */
.mb-cabecera { background: var(--stage); color: #fff; padding: 22px 0 26px; border-radius: 0 0 28px 28px; }
.mb-cabecera h1 { color: #fff; margin-top: 2px; }
.mb-cabecera__hola { font-size: 14px; color: var(--stage-muted, #c9c2dd); }
.mb-cabecera__lead { font-size: 14px; line-height: 1.5; color: var(--stage-muted, #c9c2dd); margin-top: 8px; max-width: 60ch; }
.mb-accesos { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.mb-acceso {
  flex: 1 1 150px; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: 14px; font-weight: 600;
  transition: background .15s ease;
}
.mb-acceso:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mb-acceso .ic { color: #c4b5fd; }
.mb-acceso--regalo .ic { color: #fdba74; }
.mb-cuerpo { padding-top: 22px; }
.mb-lista { display: grid; gap: 22px; margin-top: 8px; }
@media (min-width: 900px) { .mb-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.tkb { display: flex; flex-direction: column; background: var(--surface); border-radius: 24px; box-shadow: 0 16px 34px -24px rgba(23, 20, 31, .7); }
.tkb__cabeza { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border-radius: 24px 24px 0 0; background: var(--accent); color: #fff; }
.tkb__cabeza:hover { color: #fff; }
.tkb--usada .tkb__cabeza { background: #6b6478; }
.tkb__fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tkb__tipo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.tkb__estado { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); white-space: nowrap; }
.tkb__artista { font-family: var(--font-display); font-size: 28px; line-height: 1.05; font-weight: 800; letter-spacing: -.025em; margin-top: 4px; }
.tkb__gira { font-size: 14px; color: rgba(255, 255, 255, .88); }
.tkb__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 18px 6px; }
.tkb__k { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tkb__v { margin: 2px 0 0; font-size: 14px; font-weight: 650; line-height: 1.35; }
.tkb__v--silla { font-size: 19px; font-weight: 800; color: var(--accent); }
.tkb--usada .tkb__v--silla { color: var(--muted); }
.tkb__corte { position: relative; height: 24px; margin: 6px 16px 0; }
.tkb__corte::after { content: ''; position: absolute; left: 0; right: 0; top: 11px; border-top: 2px dashed var(--border-strong); }
.tkb__corte::before {
  content: ''; position: absolute; inset: 0 -16px; pointer-events: none;
  background: radial-gradient(circle at 0 50%, var(--bg) 12px, transparent 12.5px), radial-gradient(circle at 100% 50%, var(--bg) 12px, transparent 12.5px);
}
.tkb__talon { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 18px 18px; text-align: center; }
.tkb__codigo { margin: 0; font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.btn.tkb__qr { align-self: stretch; }
.btn.tkb__qr:not(.btn--secondary) { background: var(--stage); border-color: var(--stage); color: #fff; }
.btn.tkb__qr:not(.btn--secondary):hover { background: color-mix(in oklch, var(--stage) 85%, white); color: #fff; }
.tkb__enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; font-weight: 600; }
.tkb__enlaces a, .tkb__enlaces button { color: var(--accent); background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 600; cursor: pointer; }
.tkb__nota { margin: 0; font-size: 12px; color: var(--muted); }
.tkb__acciones { border-top: 1px solid var(--border); }
.tkb__acciones > summary {
  list-style: none; cursor: pointer; padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--accent);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.tkb__acciones > summary::-webkit-details-marker { display: none; }
.tkb__acciones > summary::after { content: "+"; font-size: 20px; line-height: 1; }
.tkb__acciones[open] > summary::after { content: "\2212"; }
.tkb__acciones-cuerpo { padding: 0 18px 18px; }

/* ══ Tarjetas de regalo: pestañas Regalar · Mis tarjetas · Canjear ═════ */
.rg2 { max-width: 760px; }
.mb-3 { margin-bottom: var(--s3); }
.mb-cabecera__lead strong { color: #fff; }
.rg2-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: color-mix(in oklch, var(--fg) 7%, var(--bg)); margin-bottom: 16px; }
.rg2-tab {
  flex: 1; border: 0; border-radius: 12px; padding: 11px 6px; background: transparent; color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.rg2-tab[aria-selected="true"] { background: var(--surface); color: var(--fg); font-weight: 700; box-shadow: 0 2px 8px -4px rgba(23, 20, 31, .35); }
.rg2-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rg2 [hidden] { display: none !important; }
.rg2-caja {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 4px 18px;
  box-shadow: 0 12px 28px -22px rgba(23, 20, 31, .6);
}
.rg2-bloque { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; }
.rg2-bloque + .rg2-bloque { border-top: 1px solid var(--border); }
.rg2-etq { font-size: 14px; font-weight: 700; }
.rg2-monto { font-family: var(--font-display); font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--accent); }
.rg2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rg2-chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rg2-chip:hover { border-color: var(--accent); }
.rg2-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.rg2-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rg2-continuar { min-height: 52px; font-size: 16px; }
.rg2-pie { text-align: center; }
.rg-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rg-opciones--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rg-opcion { position: relative; cursor: pointer; }
.rg-opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rg-opcion span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; height: 100%; padding: 10px 8px;
  border: 1px solid var(--border-strong); border-radius: 14px; font-size: 13.5px; font-weight: 600; line-height: 1.3;
}
.rg-opcion input:checked + span { border: 2px solid var(--accent); background: color-mix(in oklch, var(--accent) 9%, var(--surface)); color: var(--accent); font-weight: 700; }
.rg-opcion input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rg-confirma { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; }
.rg-reclamar__form { display: flex; gap: 8px; }
.rg-reclamar__form .input { flex: 1; min-width: 0; }
.rg-mias { display: grid; gap: 10px; }
.rg-mia { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px; }
.rg-mia__fila { display: flex; align-items: center; gap: 12px; }
.rg-mia__icono { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; background: #fde4dc; color: #d9482b; }
.rg-mia__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 767px) {
  .rg-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg2-tab { font-size: 13px; }
  .rg2-monto { font-size: 38px; }
}

/* ══ Mis reservas ═══════════════════════════════════════════════════════ */
.rs { max-width: 820px; }
.rs-saldo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px;
  background: var(--ok-soft); color: color-mix(in oklch, var(--ok) 70%, var(--fg));
}
.rs-saldo b { font-size: 20px; font-weight: 800; color: var(--ok); }
.rs-lista { display: grid; gap: 18px; }
.rs-card {
  background: var(--surface); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 16px 34px -24px rgba(23, 20, 31, .7);
}
.rs-card__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rs-card__titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-card__cuando { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.rs-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.rs-sillas { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-silla { font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 10px; background: color-mix(in oklch, var(--accent) 9%, var(--surface)); }
.rs-progreso__fila { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.rs-progreso__pista { height: 10px; border-radius: 99px; background: var(--muted-soft); overflow: hidden; }
.rs-progreso__pista i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.rs-cuotas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.rs-cuota { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.rs-cuota + .rs-cuota { border-top: 1px solid var(--border); }
.rs-cuota--prox { background: color-mix(in oklch, var(--accent) 5%, var(--surface)); }
.rs-cuota__marca {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  border: 2px solid var(--border-strong); color: #fff;
}
.rs-cuota--pagada .rs-cuota__marca { background: var(--ok); border-color: var(--ok); }
.rs-cuota--prox .rs-cuota__marca { border-color: var(--accent); }
.rs-cuota__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.rs-cuota__nombre { font-size: 14px; font-weight: 600; }
.rs-cuota__monto { font-size: 14px; font-weight: 700; }
.rs-cuota__pagar { font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.rs-acciones { display: grid; gap: 8px; }
.rs-acciones:empty { display: none; }

/* ══ Ver tarjeta de regalo ══════════════════════════════════════════════ */
.rv-cabecera { padding-bottom: 30px; }
.rv-cabecera__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rv-tarjeta {
  position: relative; overflow: hidden; width: 100%; max-width: 420px; aspect-ratio: 1.6; border-radius: 22px; padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left; color: #fff;
  background: linear-gradient(135deg, #d9482b, #b4235a); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .8);
}
.rv-tarjeta--agotada { background: linear-gradient(135deg, #6b6478, #3f3a4a); }
.rv-tarjeta__brillo { position: absolute; right: -50px; top: -50px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.rv-tarjeta__arriba { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rv-tarjeta__marca { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.rv-tarjeta__ocasion { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.rv-tarjeta__k { display: block; font-size: 12px; color: rgba(255, 255, 255, .85); }
.rv-tarjeta__monto { font-family: var(--font-display); font-size: 42px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.rv-tarjeta__abajo { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.rv-codigo {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .08); border: 1px dashed rgba(255, 255, 255, .32);
}
.rv-codigo__txt { font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: .08em; }
.rv-codigo__btn { border: 0; background: none; color: #c4b5fd; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px; }
.rv { max-width: 640px; }
.rv-mensaje {
  margin: 0 0 16px; padding: 18px 20px; border-radius: 20px; background: var(--surface); font-size: 16px; line-height: 1.55;
  box-shadow: 0 10px 24px -20px rgba(23, 20, 31, .6);
}
.rv-mensaje__de { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.rv-pasos { background: var(--surface); border-radius: 22px; padding: 18px; box-shadow: 0 10px 24px -20px rgba(23, 20, 31, .6); }
.rv-pasos h3 { font-size: 18px; }
.rv-pasos ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.rv-pasos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.rv-pasos li > span {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: color-mix(in oklch, var(--accent) 12%, var(--surface)); color: var(--accent);
}
.rv-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ══ Vitrina de artistas: mosaico de pósters ════════════════════════════ */
.ar-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.ar-titulo { font-size: clamp(36px, 5vw, 60px); line-height: .98; letter-spacing: -.035em; }
.ar-cabeza__lado { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ar-mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 12px; grid-auto-flow: dense; }
.ar-poster {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; color: #fff; display: flex; align-items: flex-end; padding: 14px;
  background: linear-gradient(160deg, hsl(var(--h, 280) 45% 34%), hsl(var(--h, 280) 50% 13%));
  box-shadow: 0 14px 30px -22px rgba(23, 20, 31, .7); transition: transform .2s ease, box-shadow .2s ease;
}
.ar-poster--alto { grid-row: span 2; }
.ar-poster:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(23, 20, 31, .8); color: #fff; }
.ar-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.ar-poster:hover img { transform: scale(1.05); }
.ar-poster::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 20, 0) 40%, rgba(10, 8, 20, .85)); }
.ar-poster__inicial { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; font-family: var(--font-display); font-size: 80px; font-weight: 800; color: rgba(255, 255, 255, .85); }
.ar-poster__texto { display: flex; flex-direction: column; gap: 3px; }
.ar-poster__texto strong { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ar-poster--alto .ar-poster__texto strong { font-size: 24px; }
.ar-poster__bio { font-size: 13px; color: rgba(255, 255, 255, .85); line-height: 1.4; }
.ar-poster__cta { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.ar-invita { background: var(--accent); color: #fff; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ar-invita h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); }
.ar-invita p { color: rgba(255, 255, 255, .9); max-width: 60ch; }
.btn.ar-invita__btn { margin-top: 6px; background: #fff; border-color: #fff; color: var(--stage); font-weight: 700; }
.btn.ar-invita__btn:hover { background: rgba(255, 255, 255, .9); color: var(--stage); }
@media (max-width: 767px) {
  .ar-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; gap: 10px; }
  .ar-poster { border-radius: 18px; padding: 12px; }
  .ar-poster__inicial { font-size: 56px; }
}

/* ══ Perfil de artista ══════════════════════════════════════════════════ */
.ap-portada {
  position: relative; isolation: isolate; overflow: hidden; min-height: clamp(320px, 52vh, 480px); display: flex; color: #fff;
  background: linear-gradient(160deg, color-mix(in oklch, var(--accent) 55%, var(--stage)), var(--stage)); border-radius: 0 0 28px 28px;
}
.ap-portada__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ap-portada::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 20, .35), rgba(10, 8, 20, 0) 30%, rgba(10, 8, 20, .9)); }
.ap-portada__inicial { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; font-family: var(--font-display); font-size: 160px; font-weight: 800; color: rgba(255, 255, 255, .18); }
.ap-portada__inner { display: flex; flex-direction: column; justify-content: space-between; padding-block: 18px 26px; width: 100%; }
.ap-volver { align-self: flex-start; padding: 8px 12px; border-radius: 999px; background: rgba(10, 8, 20, .45); color: #fff; font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ap-volver:hover { color: #fff; background: rgba(10, 8, 20, .6); }
.ap-portada__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ap-portada h1 { color: #fff; font-size: clamp(38px, 6vw, 72px); line-height: .98; letter-spacing: -.035em; }
.ap-sello { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--accent); }
.ap-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.btn.ap-btn-claro { background: #fff; border-color: #fff; color: var(--stage); border-radius: 999px; font-weight: 700; }
.btn.ap-btn-claro:hover { background: rgba(255, 255, 255, .9); color: var(--stage); }
.btn.ap-btn-vidrio { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); color: #fff; border-radius: 999px; }
.btn.ap-btn-vidrio:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.ap-duo { display: grid; gap: 16px; }
@media (min-width: 800px) { .ap-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.ap-caja { background: var(--surface); border-radius: 22px; padding: 20px; box-shadow: 0 10px 24px -20px rgba(23, 20, 31, .6); scroll-margin-top: 80px; }
.ap-caja--musica { padding: 10px; background: var(--stage); }
.ap-bio { font-size: 15px; line-height: 1.6; color: color-mix(in oklch, var(--fg) 85%, var(--muted)); }
.ap-embed { position: relative; min-height: 352px; height: 100%; border-radius: 16px; overflow: hidden; }
.ap-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ap-sub { font-size: 22px; }
.ap-galeria { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.ap-galeria__item { flex: none; width: min(70vw, 300px); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; scroll-snap-align: start; }
.ap-galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ap-galeria__item:hover img { transform: scale(1.04); }
.ap-video { border-radius: 18px; border: 0; }
#videos { scroll-margin-top: 80px; }

/* ══ Organizadores («Tu evento») ════════════════════════════════════════ */
.org-cabecera { padding: 34px 0 34px; }
.org-cabecera--fondo { background-image: linear-gradient(rgba(23, 18, 43, .82), rgba(23, 18, 43, .94)), var(--fondo); background-size: cover; background-position: center; }
.org-cabecera__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.org-cabecera h1 { color: #fff; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -.03em; max-width: 18ch; }
.org-cabecera .mb-cabecera__lead { max-width: 70ch; font-size: 15px; }
.org-cabecera .mb-cabecera__lead strong { color: #fff; }
.org-etq { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffc93c; }
.org-cta { margin-top: 6px; }
.org-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.org-tipos span { font-size: 12.5px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); }
.org { max-width: 980px; }
.org-sub { font-size: 24px; }
.org-beneficios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.org-beneficio { background: var(--surface); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 10px 24px -20px rgba(23, 20, 31, .6); }
.org-beneficio__icono {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 4px;
  background: color-mix(in oklch, var(--tone) 14%, var(--surface)); color: color-mix(in oklch, var(--tone) 85%, var(--fg));
}
.org-beneficio__icono .ic { width: 22px; height: 22px; }
.org-beneficio h3 { font-size: 16px; }
.org-beneficio p { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.org-form { background: var(--surface); border-radius: 24px; padding: 24px; box-shadow: 0 14px 30px -22px rgba(23, 20, 31, .65); scroll-margin-top: 80px; }
.org-form h2 { font-size: 24px; }
.org-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.org-campos__ancho { grid-column: 1 / -1; }
@media (max-width: 900px) { .org-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .org-campos { grid-template-columns: 1fr; }
  .org-form { padding: 18px; }
  .org-beneficio { padding: 14px; }
}
.ar-poster__inicial { place-items: start center; padding-top: 14px; }
.ar-poster--alto .ar-poster__inicial { padding-top: 22%; }

/* ══ Flujo · Página del evento ══════════════════════════════════════════ */
.ev-portada {
  position: relative; isolation: isolate; overflow: hidden; min-height: clamp(300px, 46vh, 460px); display: flex; color: #fff;
  background: linear-gradient(160deg, hsl(var(--h, 280) 45% 32%), hsl(var(--h, 280) 50% 12%)); border-radius: 0 0 28px 28px;
}
.ev-portada__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ev-portada::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 20, .3), rgba(10, 8, 20, 0) 30%, rgba(10, 8, 20, .92)); }
.ev-portada__inner { display: flex; flex-direction: column; justify-content: space-between; padding-block: 18px 26px; width: 100%; }
.ev-portada__texto { display: flex; flex-direction: column; gap: 4px; }
.ev-genero { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffc93c; }
.ev-portada h1 { color: #fff; font-size: clamp(36px, 5.6vw, 68px); line-height: .98; letter-spacing: -.035em; }
.ev-gira { font-size: 15px; color: rgba(255, 255, 255, .88); }
.ev-grid { display: grid; gap: 24px; }
@media (min-width: 1000px) { .ev-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.ev-principal { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ev-sub { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.ev-fechas { display: grid; gap: 10px; }
@media (min-width: 700px) { .ev-fechas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-fecha {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg); transition: border-color .15s ease, transform .15s ease;
}
.ev-fecha:hover { border-color: var(--accent); color: var(--fg); transform: translateY(-1px); }
.ev-fecha--prox { border: 2px solid var(--accent); background: color-mix(in oklch, var(--accent) 6%, var(--surface)); }
.ev-fecha--pasada { opacity: .55; }
.ev-fecha__cal {
  grid-row: span 2; width: 48px; height: 52px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: color-mix(in oklch, var(--accent) 12%, var(--surface)); color: var(--accent);
}
.ev-fecha--prox .ev-fecha__cal { background: var(--accent); color: var(--accent-ink); }
.ev-fecha__cal b { font-size: 19px; font-weight: 800; }
.ev-fecha__cal span { font-size: 10.5px; font-weight: 700; margin-top: 2px; }
.ev-fecha__txt { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.35; }
.ev-fecha__txt strong { font-size: 14px; }
.ev-fecha__txt span { color: var(--muted); }
.ev-fecha__accion { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.ev-fecha--pasada .ev-fecha__accion { color: var(--muted); text-decoration: line-through; }
.ev-zonas { background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 24px -20px rgba(23, 20, 31, .6); }
.ev-zona { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.ev-zona + .ev-zona { border-top: 1px solid var(--border); }
.ev-zona__nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.ev-zona__nombre strong { font-size: 15px; color: var(--fg); }
.ev-zona__precio { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-size: 12px; color: var(--muted); }
.ev-zona__precio b { font-size: 15px; font-weight: 800; color: var(--fg); }
.ev-zona__precio a { font-weight: 700; color: var(--accent); }
.ev-caja { background: var(--surface); border-radius: 20px; padding: 18px; box-shadow: 0 10px 24px -20px rgba(23, 20, 31, .6); }
.ev-incluye { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; }
.ev-lado { display: none; }
@media (min-width: 1000px) { .ev-lado { display: block; position: sticky; top: 84px; } }
.ev-compra { background: var(--surface); border-radius: 24px; padding: 20px; box-shadow: 0 16px 34px -24px rgba(23, 20, 31, .7); }
.ev-compra__k { font-size: 13px; color: var(--muted); }
.ev-compra__precio { font-family: var(--font-display); font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.ev-compra__datos { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.ev-compra__datos p { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.ev-compra__datos strong { font-size: 14px; color: var(--fg); }
.ev-barra {
  position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -10px 24px -18px rgba(23, 20, 31, .5);
}
.ev-barra__desde { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); line-height: 1.2; }
.ev-barra__desde b { font-size: 18px; color: var(--fg); font-weight: 800; }
.btn.ev-barra__btn { flex: 1; }
body:has(.ev-barra) .wa-flotante { bottom: calc(140px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .ev-barra { display: none; } body:has(.ev-barra) .wa-flotante { bottom: 18px; } }
@media (max-width: 767px) { body:has(.ev-barra) { padding-bottom: calc(140px + env(safe-area-inset-bottom)); } }

/* ══ Flujo · Pago ═══════════════════════════════════════════════════════ */
.co-cabecera { padding-top: 18px; }
.co-pasos { color: rgba(255, 255, 255, .7); }
.co-pasos .steps__item { color: rgba(255, 255, 255, .7); }
.co-pasos .steps__item--done, .co-pasos .steps__item[aria-current="step"] { color: #fff; }
.co-pasos .steps__n { border-color: rgba(255, 255, 255, .35); }
.co-pasos .steps__sep { border-top-color: rgba(255, 255, 255, .25); }
.co-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.co-titulo h1 { color: #fff; font-size: clamp(26px, 3.4vw, 36px); }
.co-cambiar { font-size: 13px; font-weight: 700; color: #c4b5fd; white-space: nowrap; }
.co-cambiar:hover { color: #fff; }
.co-cabecera .mb-cabecera__lead strong { color: #fff; }
.co-resumen {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.co-resumen__icono { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--accent); color: #fff; }
.co-resumen__txt { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--stage-muted, #c9c2dd); line-height: 1.35; }
.co-resumen__txt strong { font-size: 15px; color: #fff; }
.co .card + .card, .co .co-codigos + form, .co .card + .co-codigos { margin-top: 12px; }
.co-codigos { padding: 0; overflow: hidden; }
.co-codigos__cab { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.co-codigos__cab::-webkit-details-marker { display: none; }
.co-codigos__cab::after { content: "+"; font-size: 20px; line-height: 1; color: var(--accent); }
.co-codigos[open] .co-codigos__cab::after { content: "\2212"; }
.co-codigos__bloque { padding: 0 18px 16px; }
.co-codigos__bloque + .co-codigos__bloque { padding-top: 14px; border-top: 1px solid var(--border); }
.co-codigos__bloque h3 { font-size: 15px; }
.co-avisar { outline: 3px solid var(--accent); outline-offset: 3px; }
.co-barra {
  display: none; position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 45; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -10px 24px -18px rgba(23, 20, 31, .5);
}
.co-barra__total { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); line-height: 1.2; }
.co-barra__total b { font-size: 18px; color: var(--fg); font-weight: 800; }
.btn.co-barra__btn { flex: 1; }
@media (max-width: 767px) {
  .co-barra { display: flex; }
  body:has(.co-barra) { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  body:has(.co-barra) .wa-flotante { bottom: calc(140px + env(safe-area-inset-bottom)); }
}

/* ══ Flujo · Boleta con QR ══════════════════════════════════════════════ */
.bq-escena { background: var(--stage); color: #fff; padding: 18px 0 26px; border-radius: 0 0 28px 28px; }
.bq-escena__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bq-arriba { width: 100%; max-width: 440px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bq-sellos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.bq-estado { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #1f9d68; color: #fff; }
.bq-estado--usada { background: #6b6478; }
.bq-indica { max-width: 440px; text-align: center; font-size: 13px; color: var(--stage-muted, #c9c2dd); }
.bq { width: 100%; max-width: 440px; background: var(--surface); color: var(--fg); border-radius: 26px; display: flex; flex-direction: column; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); }
.bq__cabeza { display: flex; flex-direction: column; gap: 3px; padding: 18px; border-radius: 26px 26px 0 0; background: var(--accent); color: #fff; }
.bq__cabeza--usada { background: #6b6478; }
.bq__tipo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.bq__artista { color: #fff; font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -.025em; }
.bq__gira { font-size: 14px; color: rgba(255, 255, 255, .9); }
.bq__cuando { font-size: 13px; color: rgba(255, 255, 255, .85); margin-top: 2px; }
.bq__qr-zona { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 8px; }
.qr.bq__qr { width: min(240px, 64vw); height: min(240px, 64vw); padding: 10px; border-radius: 18px; border: 1px solid var(--border); box-shadow: none; }
.bq__codigo { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: .08em; }
.qr-barra.bq__barra { width: min(240px, 64vw); height: 5px; }
.tkb__corte.bq__corte::before { background: radial-gradient(circle at 0 50%, var(--stage) 12px, transparent 12.5px), radial-gradient(circle at 100% 50%, var(--stage) 12px, transparent 12.5px); }
.bq__silla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 18px 6px; text-align: center; }
.bq__grande { margin: 2px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.bq__cabeza--usada ~ .bq__silla .bq__grande { color: var(--muted); }
.bq__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 12px 18px 18px; }
.bq-botones { width: 100%; max-width: 440px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btn.bq-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.btn.bq-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.bq-info { max-width: 760px; }
.bq-tarjetas { display: grid; gap: 14px; }
@media (min-width: 760px) { .bq-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* ══ Flujo · Ingresar ═══════════════════════════════════════════════════ */
.in-cabecera { padding: 30px 0 64px; border-radius: 0 0 32px 32px; }
.in-cabecera__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.in-cabecera h1 { color: #fff; }
.in-cabecera .mb-cabecera__lead { max-width: 40ch; }
.in-logo { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); color: #fff; margin-bottom: 6px; }
.in-logo .ic { width: 30px; height: 30px; }
.in { max-width: 480px; margin-top: -40px; position: relative; padding-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.in-caja { background: var(--surface); border-radius: 24px; padding: 20px; box-shadow: 0 18px 40px -24px rgba(23, 20, 31, .7); }
.in-pestanas { display: flex; padding: 4px; border-radius: 14px; background: color-mix(in oklch, var(--fg) 6%, var(--surface)); }
.in-pestana { flex: 1; text-align: center; padding: 10px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--muted); }
.in-pestana:hover { color: var(--fg); }
.in-pestana--on { background: var(--surface); color: var(--fg); font-weight: 700; box-shadow: 0 2px 8px -4px rgba(23, 20, 31, .35); }
.in-olvido { text-align: right; }
.in-olvido a { font-weight: 600; color: var(--accent); }
.in-avisos { display: grid; gap: 10px; }
.in-aviso { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border-radius: 18px; padding: 14px; }
.in-aviso p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.in-aviso strong { color: var(--fg); }
.in-aviso__icono { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.in-aviso__icono--info { background: color-mix(in oklch, var(--accent) 12%, var(--surface)); color: var(--accent); }
.card.co-codigos { padding: 0; }
.co > .split.mt-5 { margin-top: 4px; }
@media (max-width: 767px) { .co { padding-top: 20px; } }

/* ══════════════════════════════════════════════════════════════════════
   Distribución para computador (≥ 900 px). En el celular no cambia nada:
   aquí solo se reparte el espacio ancho en columnas, como en «Subastas».
   ══════════════════════════════════════════════════════════════════════ */
.org-lado { display: none; }

@media (min-width: 900px) {
  /* Banner de Mis boletas, Tarjetas de regalo y Mis reservas:
     texto a la izquierda y los accesos como tarjetas a la derecha. */
  .mb-cabecera { padding: 44px 0 48px; }
  .mb-cabecera > .wrap:has(> .mb-accesos) {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr);
    column-gap: 56px; align-items: center;
  }
  .mb-cabecera > .wrap:has(> .mb-accesos) > * { grid-column: 1; }
  .mb-cabecera > .wrap:has(> .mb-accesos) > .mb-accesos {
    grid-column: 2; grid-row: 1 / span 3; flex-direction: column; gap: 12px; margin-top: 0;
    padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  }
  .mb-cabecera h1 { font-size: clamp(42px, 4.4vw, 58px); letter-spacing: -.035em; }
  .mb-cabecera__lead { font-size: 16px; }
  .mb-acceso { flex: none; padding: 16px 18px; font-size: 15px; }
  .mb-acceso::after { content: '→'; margin-left: auto; opacity: .6; }
  .mb-acceso .ic { width: 22px; height: 22px; }

  /* Tarjetas de regalo: contenido a lo ancho, bloques en dos columnas. */
  .rg2 { max-width: var(--wrap); }
  .rg2-tabs { max-width: 560px; }
  #p-regalar .rg2-caja:not(#rg-pago) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    background: transparent; border: 0; box-shadow: none; padding: 0;
  }
  #p-regalar .rg2-caja:not(#rg-pago) > .rg2-bloque {
    background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 22px;
    box-shadow: 0 12px 28px -22px rgba(23, 20, 31, .6);
  }
  #p-regalar .rg2-caja:not(#rg-pago) > .rg2-bloque + .rg2-bloque { border-top: 1px solid var(--border); }
  #p-regalar .rg2-caja:not(#rg-pago) > .rg2-bloque:first-child { grid-column: 1 / -1; }
  #p-regalar .rg2-caja:not(#rg-pago) > .rg2-bloque:nth-child(2) { grid-row: span 2; }
  .rg2-continuar { max-width: 420px; margin-left: auto; display: flex; }
  #rg-pago { max-width: 640px; margin-left: auto; padding: 4px 22px; }
  .rg2-pie { text-align: right; }
  #p-mias .rg-mias { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  #p-canjear .rg2-caja { max-width: 620px; }

  /* Mis reservas: datos a la izquierda, cuotas a la derecha. */
  .rs { max-width: var(--wrap); }
  .rs-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 14px; padding: 24px;
  }
  .rs-card > * { grid-column: 1; }
  .rs-card > .rs-cuotas { grid-column: 2; grid-row: 1 / span 5; align-self: start; }
  .rs-saldo { max-width: 520px; }

  /* Ver tarjeta de regalo: tarjeta a la izquierda, código a la derecha. */
  .rv-cabecera__inner {
    display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 48px; row-gap: 14px;
    align-items: center; text-align: left;
  }
  .rv-cabecera__inner > .rv-tarjeta { grid-column: 1; grid-row: 1 / span 2; max-width: none; }
  .rv-cabecera__inner > .mb-cabecera__hola { grid-column: 2; align-self: end; font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.1; }
  .rv-cabecera__inner > .rv-codigo { grid-column: 2; justify-self: start; align-self: start; }
  .rv { max-width: var(--wrap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .rv > .rv-mensaje { margin: 0; font-size: 18px; }
  .rv > .help { grid-column: 1 / -1; }

  /* Organizadores: texto a la izquierda, tarjeta oscura a la derecha. */
  .org-cabecera__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); column-gap: 56px; align-items: center; }
  .org-lado {
    display: block; padding: 24px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8);
  }
  .org-lado__etq { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
  .org-lado__pasos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
  .org-lado__pasos li { display: flex; gap: 12px; align-items: flex-start; }
  .org-lado__pasos li > span {
    width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; font-weight: 700;
    background: rgba(255, 255, 255, .12); color: #fff;
  }
  .org-lado__pasos li:first-child > span { background: var(--accent); }
  .org-lado__pasos p { font-size: 14px; line-height: 1.45; color: var(--stage-muted, #c9c2dd); }
  .org-lado__pasos strong { display: block; color: #fff; font-size: 15px; }
  .org { max-width: var(--wrap); }
  .org-form { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 36px; padding: 32px; align-items: start; }
  .org-form .org-campos { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Boleta con QR: boleta a la izquierda, indicaciones y botones a la derecha. */
  .bq-escena { padding: 40px 0 48px; }
  .bq-escena__inner {
    display: grid; grid-template-columns: 440px minmax(0, 420px); justify-content: center;
    column-gap: 56px; row-gap: 16px; align-items: start;
  }
  .bq-escena__inner > .bq { grid-column: 1; grid-row: 1 / span 4; }
  .bq-escena__inner > .bq-arriba, .bq-escena__inner > .bq-indica, .bq-escena__inner > .bq-botones { grid-column: 2; max-width: none; }
  .bq-escena__inner > .bq-indica { text-align: left; font-size: 16px; line-height: 1.55; }
  .bq-escena__inner > .bq-arriba { justify-content: space-between; }
  .bq-escena__inner > .bq-botones { grid-template-columns: 1fr; }
  .bq-info { max-width: var(--wrap); }

  /* Pago: el resumen de la silla no ocupa todo el ancho. */
  .co-resumen { max-width: 620px; }
  .co-cabecera .mb-cabecera__lead { max-width: 70ch; }

  /* Ingresar (opción 4): banner completo arriba; debajo, los avisos a la izquierda
     (uno debajo del otro) y el formulario a la derecha, sin montarse sobre el banner. */
  .in-cabecera { padding: 40px 0 44px; border-radius: 0 0 28px 28px; }
  .in-cabecera__inner { align-items: flex-start; text-align: left; }
  .in-cabecera .in-logo { display: none; }
  .in-cabecera .mb-cabecera__lead { max-width: 60ch; }
  .in { max-width: var(--wrap); margin-top: 0; padding-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 460px; column-gap: 40px; align-items: start; }
  .in-caja { grid-column: 2; grid-row: 1; }
  .in-avisos { grid-column: 1; grid-row: 1; gap: 14px; }
  .in-aviso { padding: 20px; border-radius: 20px; box-shadow: 0 10px 24px -20px rgba(23, 20, 31, .6); }
  .in-aviso p { font-size: 14px; line-height: 1.55; }
  .in-aviso strong { display: block; font-size: 16px; margin-bottom: 4px; }
  .in-aviso__icono { width: 42px; height: 42px; border-radius: 13px; }
}
@media (min-width: 900px) {
  .rv:not(:has(> .rv-mensaje)) > .rv-pasos { grid-column: 1 / -1; }
  .rv:not(:has(> .rv-mensaje)) > .rv-pasos ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .rv:not(:has(> .rv-mensaje)) > .rv-pasos li { flex-direction: column; }
  .rv:not(:has(> .rv-mensaje)) > .rv-pasos > .btn, .rv:not(:has(> .rv-mensaje)) > .rv-pasos > .rv-botones { max-width: 420px; }
  .rv-pasos { padding: 24px; }
}

/* ══ Patrón común de páginas: banner oscuro + tarjeta lateral ═══════════
   Lo usan Artistas, Subastas, Validar, Vender, Mi cuenta y Otros canales.
   Celular: todo apilado. Computador: texto a la izquierda, tarjeta a la derecha. */
.pg-grid { display: grid; gap: 22px; }
.pg-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pg-cabecera h1 { color: #fff; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.035em; max-width: 18ch; }
.pg-etq { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffc93c; }
.pg-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pg-lado {
  padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); min-width: 0;
}
.pg-lado__etq { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
.pg-lado__titulo { color: #fff; font-size: 20px; margin-top: 6px; }
.pg-lado__cifra { font-family: var(--font-display); font-size: 44px; font-weight: 800; color: #fff; line-height: 1; margin-top: 8px; }
.pg-lado__txt { font-size: 14px; color: var(--stage-muted, #c9c2dd); }
.pg-pasos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.pg-pasos li { display: flex; gap: 12px; align-items: flex-start; }
.pg-pasos li > span {
  width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.pg-pasos li:first-child > span { background: var(--accent); }
.pg-pasos p { font-size: 14px; line-height: 1.45; color: var(--stage-muted, #c9c2dd); padding-top: 4px; }
.pg-lado--accesos .mb-accesos { flex-direction: column; margin-top: 12px; }
.pg-lado--accesos .mb-acceso { flex: none; }
.pg-lado--accesos .mb-acceso::after { content: '→'; margin-left: auto; opacity: .6; }

.pg-cuerpo { padding-top: 26px; }
.pg-titulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pg-titulo-fila h2 { font-size: clamp(24px, 3vw, 34px); }
.pg-conteo { font-size: 13px; font-weight: 700; color: var(--accent); padding: 5px 11px; border-radius: 999px; background: color-mix(in oklch, var(--accent) 10%, var(--surface)); }
.pg-sub { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.pg-tarjetas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pg-tarjeta {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; overflow: hidden;
  color: var(--fg); box-shadow: 0 12px 28px -22px rgba(23, 20, 31, .6); transition: transform .18s ease, box-shadow .18s ease;
}
.pg-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -22px rgba(23, 20, 31, .65); color: var(--fg); }
.pg-tarjeta__cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 12px; }
.pg-tarjeta__titulo { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pg-datos { margin: 0; padding: 0 18px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pg-datos dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pg-datos dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.pg-tarjeta__pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 18px 16px; border-top: 1px dashed var(--border-strong); }
.pg-precio { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.pg-precio b { font-size: 19px; font-weight: 800; color: var(--fg); }
.pg-tarjeta__nota { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.4; }
.pg-tabla { padding: 0; overflow-x: auto; }
.pg-dos { display: grid; gap: 16px; align-items: start; }
.pg-columna { display: grid; gap: 16px; min-width: 0; }
.pg-columna > .card { margin-top: 0 !important; }
.pg-lista { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.pg-filas { display: grid; }
.pg-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.pg-fila:first-child { border-top: 0; }
.pg-fila__fecha { font-size: 12.5px; font-weight: 700; color: var(--accent); line-height: 1.35; }
.pg-fila__txt { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.pg-fila__txt strong { font-size: 15px; color: var(--fg); }
.pg-fila__lado { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pg-fila__lado b { font-size: 17px; margin-right: auto; }
#f-val, #publicar, #vitrina, #abiertas, #lista, #como { scroll-margin-top: 80px; }

/* Mi cuenta */
.cu-grid { display: grid; gap: 16px; }
.cu-datos { margin: 12px 0 0; display: grid; }
.cu-datos > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.cu-datos > div:first-child { border-top: 0; }
.cu-datos dt { color: var(--muted); }
.cu-datos dd { margin: 0; text-align: right; font-weight: 600; }
.cu-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.cu-cifra { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: color-mix(in oklch, var(--accent) 7%, var(--surface)); color: var(--fg); }
.cu-cifra:hover { color: var(--fg); background: color-mix(in oklch, var(--accent) 12%, var(--surface)); }
.cu-cifra b { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1; }
.cu-cifra span { font-size: 12.5px; color: var(--muted); line-height: 1.3; }

/* Validar: las tarjetas del validador con el mismo estilo */
[data-od-id="validador"] .card { border-radius: 22px; }

@media (min-width: 900px) {
  .pg-cabecera { padding: 48px 0 52px; }
  .pg-grid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); column-gap: 56px; align-items: center; }
  .pg-lado { padding: 24px; }
  .pg-cuerpo { padding-top: 40px; }
  .pg-dos { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
  .pg-fila { grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; }
  .pg-fila__lado { grid-column: auto; justify-content: flex-end; }
  .pg-fila__lado b { margin-right: 6px; }
  .cu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .pg-ctas .btn { flex: 1 1 100%; }
  .cu-cifra b { font-size: 26px; }
}

/* Avisos (flash) encima de un banner oscuro: la franja toma el color del banner */
main > .wrap:first-child:has(+ .mb-cabecera), main > .wrap:first-child:has(+ .bq-escena) {
  margin-top: 0 !important; padding-top: 14px; padding-bottom: 2px; background: var(--stage);
  box-shadow: 0 0 0 100vmax var(--stage); clip-path: inset(0 -100vmax);
}
main > .wrap:first-child:has(+ .mb-cabecera) .alert, main > .wrap:first-child:has(+ .bq-escena) .alert { margin-top: 0; }

/* ══ Tienda ═════════════════════════════════════════════════════════════ */
.tn-categorias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tn-categorias::-webkit-scrollbar { display: none; }
.tn-categorias .chip { flex: none; }
.tn-productos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tn-producto {
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 12px 28px -22px rgba(23, 20, 31, .6); transition: transform .18s ease, box-shadow .18s ease;
}
.tn-producto:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -22px rgba(23, 20, 31, .65); }
.tn-producto__foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: linear-gradient(160deg, color-mix(in oklch, var(--accent) 35%, var(--stage)), var(--stage)); }
.tn-producto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tn-producto:hover .tn-producto__foto img { transform: scale(1.04); }
.tn-producto__vacia { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 72px; font-weight: 800; color: rgba(255, 255, 255, .8); }
.tn-producto__cat, .tn-producto__agotado {
  position: absolute; top: 12px; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tn-producto__cat { left: 12px; background: rgba(255, 255, 255, .9); color: #17141f; }
.tn-producto__agotado { right: 12px; background: #e0475b; color: #fff; }
.tn-producto__cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 8px; flex: 1; }
.tn-producto__artista { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.tn-producto__nombre { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.tn-producto__nombre a { color: var(--fg); }
.tn-producto__desc { font-size: 13px; color: var(--muted); line-height: 1.45; }
.tn-producto__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.tn-producto__pie .pg-precio b { font-size: 18px; }
@media (max-width: 767px) {
  .tn-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tn-producto { border-radius: 18px; }
  .tn-producto__cuerpo { padding: 10px 12px 6px; }
  .tn-producto__nombre { font-size: 15px; }
  .tn-producto__desc { display: none; }
  .tn-producto__pie { flex-direction: column; align-items: stretch; padding: 10px 12px 12px; }
  .tn-producto__pie .btn { width: 100%; }
}

/* ══ Reventa usuarios ═══════════════════════════════════════════════════ */
.rv2-tabs { max-width: 560px; }
.rv2-tabs .rg2-tab { text-align: center; color: var(--muted); text-decoration: none; }
.rv2-tabs .rg2-tab[aria-selected="true"] { color: var(--fg); }
.rv2-filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.rv2-filtros .input, .rv2-filtros .select { min-height: 48px; }
@media (min-width: 768px) { .rv2-filtros { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto; align-items: center; } }
.rv2-tarjeta { overflow: hidden; }
.rv2-foto {
  position: relative; height: 130px; display: block; overflow: hidden;
  background: linear-gradient(160deg, hsl(var(--h, 280) 45% 34%), hsl(var(--h, 280) 50% 13%));
}
.rv2-foto img { width: 100%; height: 100%; object-fit: cover; }
.rv2-cal {
  position: absolute; left: 12px; bottom: 12px; width: 48px; height: 52px; border-radius: 13px; background: #fff; color: #17141f;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6);
}
.rv2-cal b { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.rv2-cal span { font-size: 10.5px; font-weight: 700; color: var(--accent); margin-top: 2px; }
.rv2-sello { position: absolute; top: 12px; right: 12px; }

/* ── Tienda: detalle de producto y pedido ─────────────────────────────── */
.pd-cabecera { padding-bottom: 28px; }
.pd-grid { display: grid; gap: 20px; }
.pd-migas { display: flex; gap: 8px; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .6); }
.pd-migas a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.pd-migas a:hover { color: #fff; text-decoration: underline; }
.pd-texto h1 { color: #fff; margin-top: 6px; font-size: clamp(28px, 6vw, 46px); line-height: 1.08; letter-spacing: -.02em; }
.pd-precio-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.pd-precio { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.pd-stock { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 5px 12px; }
.pd-stock i { width: 8px; height: 8px; border-radius: 50%; background: #38d39f; box-shadow: 0 0 0 3px rgba(56, 211, 159, .25); }
.pd-ventajas { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pd-ventajas li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.pd-ventajas .ic { width: 18px; height: 18px; color: #ffc93c; }
.pd-foto { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in oklch, var(--accent) 45%, var(--stage)), var(--stage));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .1); }
.pd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-foto__vacia { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 110px; font-weight: 800; color: rgba(255, 255, 255, .8); }
.pd-foto .tn-producto__cat { position: absolute; top: 14px; }

.pd-dos { display: grid; gap: 16px; align-items: start; }
.pd-h { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.pd-desc { color: var(--fg); line-height: 1.6; }
.pd-datos { padding: 0; }
.pd-evento { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--fg); transition: border-color .2s, transform .2s; }
.pd-evento:hover { border-color: var(--accent); transform: translateY(-1px); }
.pd-evento small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pd-evento strong { font-size: 15px; }
.pd-evento__icono { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.pd-evento__flecha { margin-left: auto; font-size: 18px; color: var(--accent); }

.pd-caja__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-strong); }
.pd-caja__cabeza strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pd-paso { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; }
.pd-paso span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--accent); color: #fff; }
.pd-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-confirma { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; }
.pd-confirma input { margin-top: 3px; }

/* Pedido */
.od-cabeza { display: flex; gap: 18px; align-items: flex-start; }
.od-cabeza h1 { color: #fff; margin-top: 6px; font-size: clamp(26px, 5.5vw, 40px); line-height: 1.1; }
.od-sello { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #38d39f; color: #0d2a20;
  box-shadow: 0 0 0 8px rgba(56, 211, 159, .18); }
.od-sello .ic { width: 28px; height: 28px; }
.od-ref { margin-top: 14px; display: inline-flex; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 6px 12px; }
.od-ref b { color: #fff; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }
.od-item { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.od-item__icono, .od-bloque__icono { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent); }
.od-item__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.od-cuentas { margin: 0; display: grid; gap: 10px; }
.od-cuentas div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.od-cuentas dt { color: var(--muted); }
.od-cuentas dd { margin: 0; font-weight: 600; }
.od-total { margin-top: 16px; padding-top: 16px; border-top: 2px dashed var(--border-strong); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.od-total span { font-weight: 700; }
.od-total b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); }
.od-bloque { display: flex; gap: 12px; align-items: flex-start; }
.od-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.od-acciones .btn { flex: 1 1 auto; }

@media (min-width: 900px) {
  .pd-cabecera { padding: 36px 0 44px; }
  .pd-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .pd-foto { aspect-ratio: 5 / 4; }
  .pd-dos { grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; }
  .pd-compra { position: sticky; top: 88px; }
  .od-cabeza { padding: 12px 0; gap: 24px; }
  .od-sello { width: 72px; height: 72px; }
  .od-sello .ic { width: 36px; height: 36px; }
}
@media (max-width: 899px) {
  .pd-foto { order: -1; }
}
.pd-datos { margin-top: 14px !important; }

/* ── Apertura de venta y sala de espera (fila virtual) ───────────────────── */
.fv-hero { position: relative; overflow: hidden; padding-bottom: 0;
  background:
    radial-gradient(600px 300px at 15% -10%, rgba(124, 58, 237, .55), transparent 70%),
    radial-gradient(500px 260px at 95% 10%, rgba(255, 201, 60, .16), transparent 70%),
    linear-gradient(180deg, #261f38, var(--stage)); }
.fv-grid { display: grid; gap: 20px; padding-top: 10px; }
.fv-texto { display: grid; gap: 12px; }
.fv-hero h1 { font-size: clamp(34px, 6.5vw, 62px); line-height: 1.02; letter-spacing: -.02em; }
.fv-meta { color: rgba(255, 255, 255, .75); font-size: 14px; }
.fv-meta b { color: #fff; }
.fv-pildora { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 13px; color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 6px 12px; }
.fv-pildora i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ffc93c; box-shadow: 0 0 0 4px rgba(255, 201, 60, .25); animation: fv-pulso 1.4s infinite; }
@keyframes fv-pulso { 50% { box-shadow: 0 0 0 8px rgba(255, 201, 60, 0); } }

.fv-fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 500px; }
.fv-fichas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 260px; }
.fv-ficha { position: relative; border-radius: 16px; padding: 14px 6px 10px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .14); }
.fv-ficha::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: rgba(0, 0, 0, .35); }
.fv-ficha b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6vw, 50px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.fv-ficha small { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.fv-ficha.fv-late b { animation: fv-late .5s ease; }
@keyframes fv-late { 0% { transform: translateY(-6px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.fv-reloj { display: grid; gap: 12px; }
.fv-barra { position: relative; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.fv-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #b26cff 70%, #ffc93c); box-shadow: 0 0 14px rgba(178, 108, 255, .6); transition: width 1s linear; }

/* Personaje */
.fv-pj { width: 100%; height: 100%; overflow: visible; display: block; }
.fv-pj g, .fv-pj path, .fv-pj rect, .fv-pj circle, .fv-pj ellipse { transform-box: view-box; }
.fv-pj .pj-pierna-der { transform-origin: 52px 90px; }
.fv-pj .pj-pie-sentado { transform-origin: 52px 96px; }
.fv-pj .pj-brazo-izq { transform-origin: 29px 60px; }
.fv-pj .pj-brazo-der { transform-origin: 61px 60px; }
.fv-pj .pj-cabeza { transform-origin: 45px 54px; }
.fv-pj .pj-cuerpo { transform-origin: 45px 120px; }
.fv-pj .pj-sombra { transform-origin: 45px 124px; }
.fv-pj .pj-chispas { transform-origin: 45px 30px; }
.fv-pj .pj-boca-grito { transform-origin: 45px 44px; }
.fv-pj .pj-gota, .fv-pj .pj-gota2, .fv-pj .pj-boca, .fv-pj .pj-cejas-tristes, .fv-pj .pj-chispas { opacity: 0; }
.fv-pj .pj-boca-calma { opacity: 1; }
.fv-pj .pj-sentado { display: none; }
.fv-sentado .fv-pj .pj-sentado { display: inline; }
.fv-sentado .fv-pj .pj-pierna-izq, .fv-sentado .fv-pj .pj-pierna-der, .fv-sentado .fv-pj .pj-sombra { display: none; }

.fv-calma .pj-pierna-der, .fv-calma .pj-pie-sentado { animation: fv-tap 1s ease-in-out infinite; }
.fv-calma .pj-cabeza { animation: fv-bob 3s ease-in-out infinite; }
.fv-calma .pj-pupilas { transform: translate(1px, 2px); }
.fv-ansioso .pj-pierna-der, .fv-ansioso .pj-pie-sentado { animation: fv-tap .36s ease-in-out infinite; }
.fv-ansioso .pj-brazo-izq { animation: fv-mira-reloj 3.2s ease-in-out infinite; }
.fv-ansioso .pj-cabeza { animation: fv-mirar 3.2s ease-in-out infinite; }
.fv-ansioso .pj-pupilas { animation: fv-pupila 3.2s ease-in-out infinite; }
.fv-ansioso .pj-gota { animation: fv-gota 1.6s ease-in infinite; }
.fv-sentado.fv-ansioso .pj-cuerpo { animation: fv-inquieto 1.6s ease-in-out infinite; }
.fv-ansioso .pj-boca-calma, .fv-desesperado .pj-boca-calma, .fv-abierta .pj-boca-calma { opacity: 0; }
.fv-ansioso .pj-boca-ansiosa { opacity: 1; }
.fv-ansioso .pj-cejas, .fv-desesperado .pj-cejas { opacity: 0; }
.fv-ansioso .pj-cejas-tristes, .fv-desesperado .pj-cejas-tristes { opacity: 1; }
.fv-desesperado .pj-cuerpo { animation: fv-salto .5s ease-in-out infinite; }
.fv-desesperado .pj-brazo-izq { animation: fv-agita-izq .25s ease-in-out infinite alternate; }
.fv-desesperado .pj-brazo-der { animation: fv-agita-der .25s ease-in-out infinite alternate; }
.fv-desesperado .pj-cabeza { animation: fv-tiembla .12s linear infinite; }
.fv-desesperado .pj-boca-grito { opacity: 1; animation: fv-grito .5s ease-in-out infinite; }
.fv-desesperado .pj-gota { animation: fv-gota .8s ease-in infinite; }
.fv-desesperado .pj-gota2 { animation: fv-gota .8s ease-in .4s infinite; }
.fv-desesperado .pj-sombra { animation: fv-sombra .5s ease-in-out infinite; }
.fv-abierta .pj-cuerpo { animation: fv-celebra .7s ease-in-out infinite; }
.fv-abierta .pj-brazo-izq { transform: rotate(150deg); }
.fv-abierta .pj-brazo-der { transform: rotate(-150deg); }
.fv-abierta .pj-boca-feliz { opacity: 1; }
.fv-abierta .pj-chispas { opacity: 1; animation: fv-chispas 1s ease-out infinite; }
.fv-abierta .pj-telefono { opacity: 0; }
@keyframes fv-tap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes fv-bob { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
@keyframes fv-mira-reloj { 0%, 25%, 80%, 100% { transform: rotate(0); } 35%, 70% { transform: rotate(118deg); } }
@keyframes fv-mirar { 0%, 25%, 80%, 100% { transform: rotate(0); } 35%, 70% { transform: rotate(-12deg); } }
@keyframes fv-pupila { 0%, 25%, 80%, 100% { transform: translate(0, 0); } 35%, 70% { transform: translate(-2px, 1px); } }
@keyframes fv-gota { 0% { opacity: 0; transform: translate(0, -2px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, 16px); } }
@keyframes fv-inquieto { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fv-salto { 0%, 100% { transform: translateY(0) scaleY(1); } 15% { transform: translateY(0) scaleY(.94); } 50% { transform: translateY(-12px) scaleY(1.03); } }
@keyframes fv-sombra { 0%, 100% { transform: scaleX(1); opacity: .25; } 50% { transform: scaleX(.7); opacity: .12; } }
@keyframes fv-agita-izq { from { transform: rotate(125deg); } to { transform: rotate(170deg); } }
@keyframes fv-agita-der { from { transform: rotate(-125deg); } to { transform: rotate(-170deg); } }
@keyframes fv-tiembla { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.2px); } }
@keyframes fv-grito { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.35); } }
@keyframes fv-celebra { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(-4deg); } }
@keyframes fv-chispas { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.4); } }

.fv-globo { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 3;
  background: #fff; color: #17141f; font: 800 12px var(--font-display); padding: 6px 10px; border-radius: 12px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.fv-globo::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; }
.fv-desesperado .fv-globo { animation: fv-globo .3s ease-in-out infinite alternate; color: #b3261e; }
@keyframes fv-globo { from { transform: translateX(-50%) rotate(-3deg); } to { transform: translateX(-50%) rotate(3deg); } }
.fv-sil { width: 24px; height: 52px; flex: none; color: #3b3350; animation: fv-espera 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.fv-sil:nth-child(2) { animation-delay: .4s; height: 56px; }
.fv-sil:nth-child(3) { animation-delay: .9s; height: 48px; }
.fv-sil:nth-child(4) { animation-delay: 1.3s; height: 54px; }
@keyframes fv-espera { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }
.fv-piso { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: #0e0c14; border-top: 1px solid rgba(255, 255, 255, .08); }

/* Apertura: la calle con la fila hacia la taquilla */
.fv-calle { --ri: 0px; --rd: 110px; --pct: 0; position: relative; height: 140px; margin-top: 16px; }
.fv-calle .fv-piso { left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); }
.fv-riel { position: absolute; left: var(--ri); right: var(--rd); bottom: 34px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.fv-riel i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #b26cff 70%, #ffc93c); box-shadow: 0 0 18px rgba(178, 108, 255, .6); transition: width 1s linear; }
.fv-grupo { position: absolute; bottom: 30px; left: calc(var(--ri) + (100% - var(--ri) - var(--rd)) * var(--pct)); display: flex; align-items: flex-end; gap: 2px; transform: translateX(-88%); transition: left 1s linear; }
.fv-pj-caja { position: relative; width: 56px; height: 82px; flex: none; }
.fv-taquilla { position: absolute; right: 0; bottom: 22px; width: 84px; height: 105px; }
.fv-taquilla .fv-persiana { transform-box: view-box; transition: transform 1.2s cubic-bezier(.6, 0, .2, 1); }
.fv-abierta .fv-persiana { transform: translateY(-40px); }
.fv-taquilla .fv-luz { opacity: 0; transition: opacity .6s; }
.fv-abierta .fv-luz { opacity: 1; }

/* Sala de espera: la salita */
.fv-escena { --sofa: 220px; position: relative; height: 196px; margin-top: 16px; }
.fv-escena .fv-piso { left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); }
.fv-sillon { position: absolute; left: 2%; bottom: 22px; width: var(--sofa); height: calc(var(--sofa) * .4545); }
.fv-sala-pj { position: absolute; z-index: 2; bottom: 38px; left: calc(2% + var(--sofa) * .32 - 32px); width: 64px; height: 94px; transition: left 2.2s ease-in-out, bottom .3s; }
.fv-abierta .fv-sala-pj { bottom: 22px; left: calc(100% - 92px); }
.fv-mata { position: absolute; left: calc(2% + var(--sofa) + 16px); bottom: 22px; width: 60px; height: 100px; }
.fv-mata .fv-hojas { transform-box: view-box; transform-origin: 30px 64px; animation: fv-mata 4s ease-in-out infinite; }
@keyframes fv-mata { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.fv-reloj-pared { position: absolute; top: 6px; left: calc(2% + var(--sofa) * .5 - 20px); width: 40px; height: 40px; }
.fv-reloj-pared line { transform-box: view-box; transform-origin: 20px 20px; }
.fv-reloj-pared .fv-aguja-m { animation: fv-gira 4s linear infinite; }
.fv-reloj-pared .fv-aguja-h { animation: fv-gira 48s linear infinite; }
.fv-ansioso .fv-aguja-m { animation-duration: 1.5s; }
@keyframes fv-gira { to { transform: rotate(360deg); } }
.fv-turnero { position: absolute; right: 122px; top: 16px; text-align: center; background: #0e0c14; border: 2px solid #3b3350; border-radius: 12px; padding: 6px 14px 8px; box-shadow: 0 0 0 4px rgba(124, 58, 237, .15); }
.fv-turnero small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.fv-turnero b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.05; color: #ffc93c; text-shadow: 0 0 14px rgba(255, 201, 60, .6); font-variant-numeric: tabular-nums; }
.fv-abierta .fv-turnero b { color: #38d39f; text-shadow: 0 0 14px rgba(56, 211, 159, .7); }
.fv-puerta { position: absolute; right: 0; bottom: 22px; width: 100px; height: 150px; }
.fv-puerta .fv-hoja { transform-box: view-box; transform-origin: 16px 0; transition: transform 1s ease .3s; }
.fv-abierta .fv-hoja { transform: scaleX(.12); }
.fv-puerta .fv-luz { opacity: 0; transition: opacity .8s ease .3s; }
.fv-abierta .fv-puerta .fv-luz { opacity: 1; }
.fv-abierta .fv-puerta { filter: drop-shadow(0 0 24px rgba(255, 201, 60, .55)); }

.fv-consejos { display: grid; gap: 12px; }
.fv-consejo { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; font-size: 13.5px; color: var(--muted); }
.fv-consejo strong { display: block; color: var(--fg); font-size: 14px; }
.fv-consejo__ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.fv-consejo__ic .ic { width: 20px; height: 20px; }
.fv-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (min-width: 900px) {
  .fv-hero { padding-top: 34px; }
  .fv-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
  .fv-reloj { min-width: 260px; }
  .fv-consejos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fv-calle { --rd: 90px; }
  .fv-taquilla { width: 72px; height: 90px; }
  .fv-grupo .fv-sil:nth-child(n+3) { display: none; }
  .fv-escena { --sofa: 150px; height: 176px; }
  .fv-mata { width: 44px; height: 74px; left: calc(2% + var(--sofa) + 8px); }
  .fv-turnero { right: 88px; padding: 5px 10px; }
  .fv-turnero b { font-size: 24px; }
  .fv-puerta { width: 76px; height: 114px; }
  .fv-sala-pj { bottom: 30px; width: 48px; height: 70px; left: calc(2% + var(--sofa) * .32 - 24px); }
  .fv-abierta .fv-sala-pj { left: calc(100% - 70px); }
}

/* ── Elegir silla ─────────────────────────────────────────────────────────── */
.sl-cab { background: radial-gradient(600px 280px at 12% -20%, rgba(124, 58, 237, .5), transparent 70%), linear-gradient(180deg, #261f38, var(--stage)); }
.sl-cab__grid { display: grid; gap: 18px; }
.sl-cab h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.02; letter-spacing: -.02em; }
.sl-migas { font-size: 13px; color: rgba(255, 255, 255, .6); }
.sl-migas a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.sl-migas a:hover { color: #fff; text-decoration: underline; }
.sl-migas b { color: #fff; font-weight: 600; }
.sl-cab__meta { color: rgba(255, 255, 255, .72); font-size: 14px; margin-top: 6px; }
.sl-organiza { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #fff; background: rgba(255, 201, 60, .14); border: 1px solid rgba(255, 201, 60, .4); border-radius: 999px; padding: 6px 12px; }
.sl-organiza .ic { width: 16px; height: 16px; color: #ffc93c; }
.sl-pasos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sl-paso { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .55); padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.sl-paso b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(255, 255, 255, .12); color: #fff; }
.sl-paso--hecho { color: #fff; }
.sl-paso--hecho b { background: var(--accent); }
.sl-paso--actual { color: var(--stage); background: #ffc93c; }
.sl-paso--actual b { background: var(--stage); color: #ffc93c; }
.sl-fechas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sl-fecha { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; font-size: 13px; line-height: 1.3; }
.sl-fecha:hover { background: rgba(255, 255, 255, .14); }
.sl-fecha[aria-current="true"] { background: #fff; color: var(--stage); border-color: #fff; }
.sl-fecha--pasada { opacity: .5; }
.sl-fecha strong { display: block; font-size: 14px; }
.sl-fecha__dia { width: 40px; flex: none; border-radius: 10px; overflow: hidden; text-align: center; background: var(--accent); color: #fff; line-height: 1; }
.sl-fecha__dia small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 3px 0; background: rgba(0, 0, 0, .25); }
.sl-fecha__dia b { display: block; font-family: var(--font-display); font-size: 18px; padding: 4px 0 5px; }
.sl-pase { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); align-self: end; width: fit-content; }
.sl-pase__anillo { position: relative; width: 58px; height: 58px; flex: none; }
.sl-pase__anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sl-pase__anillo circle { transition: stroke-dashoffset 1s linear; }
.sl-pase__anillo b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 13px var(--font-display); font-variant-numeric: tabular-nums; color: #fff; }
.sl-pase p { font-size: 13px; color: rgba(255, 255, 255, .75); }
.sl-pase p strong { display: block; color: #fff; font-size: 15px; }

.sl-grid { display: grid; gap: 18px; }
.sl-pasos-cuerpo { display: grid; gap: 18px; min-width: 0; }
.sl-caja { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px; min-width: 0; }
.sl-caja__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-caja__cab h2 { font-size: 19px; }
.sl-caja__sub { margin-left: auto; font-size: 13px; color: var(--muted); }
.sl-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font-display); background: var(--accent); color: #fff; flex: none; }

.sl-loc { display: grid; gap: 16px; }
.sl-plano { margin: 0; border-radius: 16px; background: var(--surface-2, var(--bg)); border: 1px solid var(--border); padding: 10px; }
.sl-plano img { display: block; width: 100%; height: auto; border-radius: 10px; }
.sl-plano figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: center; }
.sl-plano--vacio { display: grid; place-items: center; min-height: 140px; text-align: center; font-size: 13px; color: var(--muted); padding: 16px; }
.sl-plano--ancho { max-width: 420px; margin-inline: auto; }
.sl-zonas { display: grid; gap: 8px; align-content: start; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.sl-zona { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--fg); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.sl-zona:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.sl-zona[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.sl-zona__sw { width: 14px; height: 30px; border-radius: 5px; grid-row: span 2; background: oklch(62% .15 var(--zh, 30)); }
.sl-zona__nom { font-weight: 700; min-width: 0; }
.sl-zona__precio { font: 800 16px var(--font-display); text-align: right; white-space: nowrap; }
.sl-zona__disp { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.sl-zona__barra { flex: 1; max-width: 120px; height: 5px; border-radius: 9px; background: var(--border); overflow: hidden; }
.sl-zona__barra i { display: block; height: 100%; background: #1f9d6b; }
.sl-zona__barra--poca i { background: #e08a00; }
.sl-poca { font-size: 11px; font-weight: 700; color: #8f5600; background: #fdf0d8; border-radius: 99px; padding: 2px 8px; justify-self: end; }
.sl-poca--agotada { color: var(--muted); background: var(--muted-soft); }

.sl-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.sl-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.sl-m { width: 16px; height: 14px; border-radius: 5px 5px 3px 3px; display: inline-block; }
.sl-m--libre { background: #fff; box-shadow: inset 0 0 0 1.5px #cfc8dc; }
.sl-m--tuya { background: var(--accent); }
.sl-m--vendida { background: #f6d5db; }
.sl-m--reservada { background: #cdeedd; }
.sl-m--bloqueada { background: #e3e0e8; }
.sl-sala { border-radius: 18px; background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 7%, var(--surface)), var(--surface)); border: 1px solid var(--border); padding: 16px 10px 14px; overflow-x: auto; }
.sl-escenario { width: min(70%, 420px); margin: 0 auto 18px; height: 34px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #261f38, var(--stage)); color: #fff; display: grid; place-items: center; font: 800 12px var(--font-display); letter-spacing: .3em; box-shadow: 0 12px 24px -12px rgba(124, 58, 237, .7); }
.sl-filas { display: grid; gap: 5px; width: max-content; margin: 0 auto; }
.sl-fila { display: flex; align-items: center; gap: 4px; }
.sl-fila__l { width: 18px; flex: none; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.sl .sl-silla { aspect-ratio: auto; text-decoration: none; font-family: var(--font-body); width: 26px; height: 24px; min-width: 0; padding: 0; border: 0; border-radius: 8px 8px 4px 4px; font-size: 10px; font-weight: 700; display: grid; place-items: center; cursor: pointer; transition: transform .12s, background .15s;
  background: #fff; color: #5f5873; box-shadow: inset 0 0 0 1.5px #cfc8dc, inset 0 -4px 0 #ebe7f1; }
.sl .sl-silla:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--accent), inset 0 -4px 0 #ebe7f1; color: var(--accent); }
.sl .sl-silla:focus-visible { outline: 3px solid #ffc93c; outline-offset: 1px; }
.sl .sl-silla.seat--sold { background: #f6d5db; color: transparent; box-shadow: inset 0 -4px 0 #eebcc6; cursor: not-allowed; }
.sl .sl-silla.seat--reserved { background: #cdeedd; color: transparent; box-shadow: inset 0 -4px 0 #b2e2c9; cursor: not-allowed; }
.sl .sl-silla.seat--blocked { background: #e3e0e8; color: transparent; box-shadow: none; cursor: not-allowed; }
.sl .sl-silla[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: inset 0 -4px 0 color-mix(in oklch, var(--accent) 70%, #000), 0 6px 14px -6px rgba(124, 58, 237, .8); transform: translateY(-2px); }

/* Evento de otro organizador: boletas de Palco */
.sl-boletas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sl .sl-boleta { aspect-ratio: auto; text-decoration: none; position: relative; display: grid; gap: 10px; text-align: left; padding: 14px 14px 12px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; height: auto; width: auto; font: inherit; box-shadow: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sl .sl-boleta:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); transform: translateY(-2px); }
.sl .sl-boleta:focus-visible { outline: 3px solid #ffc93c; outline-offset: 2px; }
.sl .sl-boleta[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.sl-boleta__zona { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sl-boleta__silla { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.sl-boleta__silla b { display: block; font: 800 24px var(--font-display); color: var(--fg); line-height: 1.1; }
.sl-boleta__pie { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border-strong, var(--border)); }
.sl-boleta__precio { font: 800 17px var(--font-display); }
.sl-boleta__nota { font-size: 11px; color: var(--muted); }
.sl-boleta__check { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--accent); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.sl .sl-boleta[aria-pressed="true"] .sl-boleta__check { opacity: 1; transform: none; }

/* Resumen tipo boleto */
.sl-resumen { display: grid; gap: 12px; align-content: start; }
.sl-boleto { border-radius: 22px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; box-shadow: 0 24px 40px -30px rgba(23, 20, 31, .5); }
.sl-boleto__cab { padding: 16px 18px; color: #fff; background: linear-gradient(135deg, #261f38, var(--stage)); }
.sl-boleto__cab p { font-size: 13px; color: rgba(255, 255, 255, .7); }
.sl-boleto__cab h3 { font-size: 18px; color: #fff; margin: 2px 0; }
.sl-boleto__corte { position: relative; height: 0; border-top: 2px dashed var(--border); margin: 0 14px; }
.sl-boleto__corte::before, .sl-boleto__corte::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); }
.sl-boleto__corte::before { left: -25px; }
.sl-boleto__corte::after { right: -25px; }
.sl-boleto__cuerpo { padding: 16px 18px; display: grid; gap: 12px; }
.sl-r { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.sl-r span { color: var(--muted); }
.sl-r strong { white-space: nowrap; }
.sl-cupos { display: flex; gap: 6px; }
.sl-cupos i { flex: 1; height: 6px; border-radius: 9px; background: var(--border); transition: background .2s; }
.sl-cupos i.on { background: var(--accent); }
.sl-elegidas { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.sl-elegida { display: inline-flex; align-items: center; gap: 6px; padding: 4px 5px 4px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }
.sl-elegida button { width: 20px; height: 20px; padding: 0; border-radius: 6px; border: 0; background: color-mix(in oklch, var(--accent) 15%, transparent); color: var(--accent); cursor: pointer; line-height: 1; }
.sl-vacia { font-size: 13px; color: var(--muted); }
.sl-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 2px solid var(--fg); font-weight: 700; }
.sl-total b { font: 800 26px var(--font-display); letter-spacing: -.02em; }
.sl-ayuda { text-align: center; }
.sl-confianza { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; }
.sl-confianza .ic { flex: none; width: 20px; height: 20px; color: #1f9d6b; }
.sl-confianza strong { color: var(--fg); }
.sl-garantia { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; font-size: 13px; }
.sl-garantia summary { cursor: pointer; font-weight: 700; }
.sl-movil { display: none; }

@media (min-width: 760px) {
  .sl-loc { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
}
@media (min-width: 960px) {
  .sl-cab { padding-top: 30px; }
  .sl-cab__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .sl-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .sl-resumen { position: sticky; top: 88px; }
}
@media (max-width: 959px) {
  .sl-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--stage); color: #fff; box-shadow: 0 -10px 24px -16px rgba(0, 0, 0, .6); }
  .sl-movil p { font-size: 12px; color: rgba(255, 255, 255, .7); }
  .sl-movil b { display: block; font: 800 18px var(--font-display); color: #fff; }
  .sl-movil .btn { margin-left: auto; }
  .sl { padding-bottom: 90px; }
}
@media (max-width: 767px) {
  .sl-movil { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 10px; }
  .sl { padding-bottom: 150px; }
}
.sl-grid > #seat-ids { display: none; }
.sl .sl-boleta { place-items: stretch; align-content: start; text-align: left; } .sl .sl-boleta[aria-pressed="true"] { color: var(--fg); }
/* Evento de otro organizador (cupo de Palco) */
.gig__organiza { margin-top: 8px; font-size: 12.5px; color: var(--muted); display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); }
.gig__organiza strong { color: var(--accent); }
.ev-organiza { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; font-size: 13px; color: #fff; background: rgba(255, 201, 60, .16); border: 1px solid rgba(255, 201, 60, .45); border-radius: 999px; padding: 6px 12px; }
/* Elegir silla en celular: el botón de WhatsApp sube para no tapar la barra del total. */
@media (max-width: 959px) { body:has(.sl-movil) .wa-flotante { bottom: calc(150px + env(safe-area-inset-bottom)) !important; } }
@media (min-width: 768px) and (max-width: 959px) { body:has(.sl-movil) .wa-flotante { bottom: 90px !important; } }
.sl-organiza, .ev-organiza, .gig__organiza { display: inline-block; line-height: 1.45; }
.sl-organiza .ic { vertical-align: -3px; margin-right: 4px; }
.sl-organiza .ic { display: inline-block; }

/* ── Artistas · banner «En vivo» (ARTISTAS_BANNER=envivo) ─────────────────── */
.arb { position: relative; overflow: hidden; isolation: isolate; padding-bottom: 0;
  background: radial-gradient(900px 420px at 60% 120%, rgba(124, 58, 237, .55), transparent 65%), radial-gradient(500px 300px at 10% 0%, rgba(124, 58, 237, .35), transparent 70%), #0f0b18; }
.arb > .wrap { position: relative; z-index: 1; }
.arb h1 em { font-style: normal; background: linear-gradient(90deg, #ffc93c, #ff8fd1 50%, #b794f4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arb-haz { position: absolute; top: -60px; width: 260px; height: 640px; z-index: 0; filter: blur(8px); mix-blend-mode: screen; transform-origin: 50% 0; pointer-events: none;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
.arb-haz--1 { left: 34%; background: linear-gradient(180deg, rgba(255, 201, 60, .55), transparent 75%); animation: arb-barre 7s ease-in-out infinite; }
.arb-haz--2 { left: 54%; background: linear-gradient(180deg, rgba(178, 108, 255, .6), transparent 75%); animation: arb-barre 9s ease-in-out infinite reverse; }
.arb-haz--3 { left: 74%; background: linear-gradient(180deg, rgba(56, 211, 159, .3), transparent 75%); animation: arb-barre 11s ease-in-out infinite; }
@keyframes arb-barre { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
.arb-polvo { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .7; background-size: 300px 220px; animation: arb-flota 20s linear infinite;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, .4), transparent), radial-gradient(1.5px 1.5px at 45% 60%, rgba(255, 255, 255, .35), transparent), radial-gradient(1px 1px at 85% 55%, rgba(255, 255, 255, .4), transparent), radial-gradient(1px 1px at 60% 40%, rgba(255, 201, 60, .5), transparent); }
@keyframes arb-flota { to { background-position: 0 -220px; } }
.arb .pg-lado { background: rgba(23, 20, 31, .55); backdrop-filter: blur(10px); }
.arb-piso { position: relative; z-index: 1; height: 96px; margin-top: 18px; }
.arb-eq { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; display: flex; align-items: flex-end; gap: 4px; padding: 0 var(--gutter); opacity: .55; }
.arb-eq i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #ffc93c, #7c3aed); animation: arb-eq 1.2s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes arb-eq { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.arb-publico { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 70px; display: block; }
.arb-flash { animation: arb-flash 2.4s ease-in-out infinite; }
@keyframes arb-flash { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (max-width: 760px) { .arb-eq i:nth-child(2n) { display: none; } }

/* Movimiento reducido (Windows con «Efectos de animación» apagados, etc.): versión suave.
   La regla general del sitio apaga todo; aquí se devuelve un movimiento lento y tranquilo. */
@media (prefers-reduced-motion: reduce) {
  .fv-calma .pj-pierna-der, .fv-calma .pj-pie-sentado { animation: fv-tap 2.2s ease-in-out infinite !important; }
  .fv-calma .pj-cabeza { animation: fv-bob 6s ease-in-out infinite !important; }
  .fv-ansioso .pj-pierna-der, .fv-ansioso .pj-pie-sentado { animation: fv-tap 1.4s ease-in-out infinite !important; }
  .fv-ansioso .pj-brazo-izq { animation: fv-mira-reloj 6s ease-in-out infinite !important; }
  .fv-ansioso .pj-cabeza { animation: fv-mirar 6s ease-in-out infinite !important; }
  .fv-ansioso .pj-pupilas { animation: fv-pupila 6s ease-in-out infinite !important; }
  .fv-ansioso .pj-gota, .fv-desesperado .pj-gota { animation: fv-gota 3s ease-in infinite !important; }
  .fv-desesperado .pj-gota2 { animation: fv-gota 3s ease-in 1.5s infinite !important; }
  .fv-sentado.fv-ansioso .pj-cuerpo { animation: fv-inquieto 3s ease-in-out infinite !important; }
  .fv-desesperado .pj-cuerpo { animation: fv-inquieto 1.6s ease-in-out infinite !important; }
  .fv-desesperado .pj-brazo-izq { animation: fv-agita-izq 1.4s ease-in-out infinite alternate !important; }
  .fv-desesperado .pj-brazo-der { animation: fv-agita-der 1.4s ease-in-out infinite alternate !important; }
  .fv-desesperado .pj-cabeza, .fv-desesperado .pj-boca-grito, .fv-desesperado .pj-sombra, .fv-desesperado .fv-globo { animation: none !important; }
  .fv-abierta .pj-cuerpo { animation: fv-inquieto 1.4s ease-in-out infinite !important; }
  .fv-abierta .pj-chispas { animation: fv-chispas 2.4s ease-out infinite !important; }
  .fv-sil { animation: fv-espera 6s ease-in-out infinite !important; }
  .fv-mata .fv-hojas { animation: fv-mata 9s ease-in-out infinite !important; }
  .fv-reloj-pared .fv-aguja-m { animation: fv-gira 10s linear infinite !important; }
  .fv-reloj-pared .fv-aguja-h { animation: fv-gira 120s linear infinite !important; }
  .fv-pildora i { animation: fv-pulso 3s infinite !important; }
  .fv-persiana, .fv-hoja, .fv-luz, .fv-grupo, .fv-riel i, .fv-barra i { transition-duration: 1.2s !important; }
  .fv-sala-pj { transition-duration: 2.4s !important; }
  .arb-haz--1 { animation: arb-barre 24s ease-in-out infinite !important; }
  .arb-haz--2 { animation: arb-barre 30s ease-in-out infinite reverse !important; }
  .arb-haz--3 { animation: arb-barre 36s ease-in-out infinite !important; }
  .arb-polvo { animation: arb-flota 60s linear infinite !important; }
  .arb-eq i { animation: arb-eq 3s ease-in-out infinite alternate !important; }
  .arb-flash { animation: arb-flash 5s ease-in-out infinite !important; }
}

/* ── Deportes ─────────────────────────────────────────────────────────────── */
.dp-cab { position: relative; overflow: hidden; isolation: isolate; padding-bottom: 120px;
  background: radial-gradient(700px 300px at 50% 115%, rgba(31, 157, 107, .5), transparent 70%), linear-gradient(180deg, #120f1c, #0b0912); }
.dp-cab > .wrap { position: relative; z-index: 2; }
.dp-cab h1 { font-size: clamp(32px, 5.4vw, 56px); line-height: 1.02; letter-spacing: -.02em; }
.dp-cab h1 em { font-style: normal; color: #5fe0a9; }
.dp-torre { position: absolute; top: 14px; z-index: 0; width: 120px; height: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; pointer-events: none; }
.dp-torre i { border-radius: 4px; background: #fffbe8; box-shadow: 0 0 18px 6px rgba(255, 251, 232, .5); animation: dp-luz 4s ease-in-out infinite; }
.dp-torre i:nth-child(2) { animation-delay: .5s; } .dp-torre i:nth-child(3) { animation-delay: 1s; } .dp-torre i:nth-child(4) { animation-delay: 1.5s; }
.dp-torre--i { left: 5%; } .dp-torre--d { right: 5%; }
@keyframes dp-luz { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.dp-cono { position: absolute; top: 34px; width: 520px; height: 560px; z-index: 0; pointer-events: none; filter: blur(14px); opacity: .28;
  background: linear-gradient(180deg, rgba(255, 251, 232, .85), transparent 70%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); transform-origin: 50% 0; }
.dp-cono--i { left: -3%; transform: rotate(-30deg); } .dp-cono--d { right: -3%; transform: rotate(30deg); }
/* Pista de atletismo en perspectiva: sirve para cualquier deporte */
.dp-pista { position: absolute; left: 50%; bottom: -150px; width: 1300px; height: 340px; z-index: 0; pointer-events: none; border-radius: 50%;
  transform: translateX(-50%) perspective(600px) rotateX(58deg);
  background: radial-gradient(closest-side, #1a7d58 58%, transparent 59%),
              repeating-radial-gradient(closest-side, #b4472f 0 60%, #c9583e 60% 66%, rgba(255, 255, 255, .7) 66% 66.6%, #b4472f 66.6% 72%, rgba(255, 255, 255, .7) 72% 72.6%, #c9583e 72.6% 78%, rgba(255, 255, 255, .7) 78% 78.6%, #b4472f 78.6% 84%, transparent 84%);
  opacity: .8; }
.dp-balones { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dp-balon { position: absolute; width: 46px; height: 46px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); animation: dp-flota 6s ease-in-out infinite; }
.dp-balon--1 { right: 30%; top: 60%; width: 54px; height: 54px; }
.dp-balon--2 { right: 20%; top: 76%; animation-delay: -1s; }
.dp-balon--3 { right: 42%; top: 80%; width: 34px; height: 34px; animation-delay: -2s; }
.dp-balon--4 { left: 4%; top: 78%; width: 40px; height: 40px; animation-delay: -3s; }
.dp-balon--5 { left: 16%; top: 84%; width: 26px; height: 26px; animation-delay: -4s; }
.dp-balon--6 { right: 27%; top: 22%; width: 40px; height: 40px; animation-delay: -5s; }
@keyframes dp-flota { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(12deg); } }
.dp-cab__grid { display: grid; gap: 22px; padding-top: 34px; }
.dp-buscador { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; max-width: 640px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); }
.dp-buscador .input, .dp-buscador .select { flex: 1 1 170px; min-width: 0; }
.btn.dp-btn-verde { background: #1f9d6b; color: #fff; border-color: #1f9d6b; }
.btn.dp-btn-verde:hover { background: #17865b; }
.dp-auspicia { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.dp-auspicia b { font-family: var(--font-display); letter-spacing: .03em; color: #5fe0a9; }
.dp-lado { background: rgba(13, 10, 21, .6); backdrop-filter: blur(10px); align-self: end; }
.dp-cifras { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.dp-cifras li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.dp-cifras b { font: 800 22px var(--font-display); color: #fff; }

.dp-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.dp-chip { flex: none; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--fg); font-size: 14px; font-weight: 600; text-decoration: none; }
.dp-chip:hover { border-color: #1f9d6b; }
.dp-chip[aria-current="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.dp-destacado { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 20px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #0d4a35, #0b2b20 60%, var(--stage)); }
.dp-destacado::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); pointer-events: none; }
.dp-destacado__info { display: grid; gap: 12px; }
.dp-destacado__cab { display: flex; align-items: center; gap: 12px; }
.dp-destacado__cab p { font-size: 13px; color: rgba(255, 255, 255, .7); }
.dp-destacado h2 { font-size: clamp(20px, 3vw, 26px); color: #fff; }
.dp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-pill { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.dp-pill--sol { background: rgba(255, 201, 60, .16); border-color: rgba(255, 201, 60, .45); }
.dp-escudo { width: 48px; height: 48px; flex: none; display: grid; place-items: center; font: 800 16px var(--font-display); color: #fff;
  border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%; background: oklch(55% .16 var(--h, 150)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); }
.dp-escudo--grande { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; }
.dp-eventos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.dp-evento { display: grid; grid-template-rows: auto 1fr auto auto; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.dp-evento:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -24px rgba(23, 20, 31, .6); }
.dp-evento__cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.dp-evento__cab b { color: var(--fg); }
.dp-evento__dep { font-size: 11.5px; font-weight: 700; color: #17865b; background: #dff5ec; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.dp-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 16px 14px 8px; text-align: center; }
.dp-equipo { display: grid; justify-items: center; gap: 6px; font-weight: 700; font-size: 14px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.dp-vs__x { font: 800 14px var(--font-display); color: var(--muted); background: var(--bg); border-radius: 10px; padding: 6px 8px; text-align: center; }
.dp-vs__x small { display: block; font: 600 10.5px var(--font-body); color: var(--muted); max-width: 90px; }
.dp-solo { display: flex; align-items: center; gap: 12px; padding: 16px 14px 8px; }
.dp-solo h3 { font-size: 17px; }
.dp-solo p { font-size: 13px; color: var(--muted); }
.dp-evento__lugar { padding: 0 14px 12px; font-size: 12.5px; color: var(--muted); text-align: center; }
.dp-ausp { font-weight: 700; color: #17865b; }
.dp-evento__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 14px; border-top: 1px dashed var(--border-strong); }

@media (min-width: 900px) {
  .dp-cab__grid { grid-template-columns: minmax(0, 1fr) 250px; }
  .dp-destacado { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (max-width: 899px) {
  .dp-cab { padding-bottom: 150px; }
  .dp-torre { width: 80px; height: 22px; }
  .dp-balon--1 { right: 8%; top: auto; bottom: 70px; } .dp-balon--2 { right: 26%; top: auto; bottom: 40px; }
  .dp-balon--3 { right: 44%; top: auto; bottom: 64px; } .dp-balon--4 { left: auto; right: 62%; top: auto; bottom: 36px; }
  .dp-balon--5 { left: auto; right: 80%; top: auto; bottom: 66px; } .dp-balon--6 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-balon { animation: dp-flota 14s ease-in-out infinite !important; }
  .dp-torre i { animation: dp-luz 10s ease-in-out infinite !important; }
}
@media (max-width: 899px) { .dp-lado { display: none; } }
/* Validador: reserva con pago en la puerta */
.vl-cobrar { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: #ffc93c; color: #17141f; text-align: center; }
.vl-cobrar span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vl-cobrar b { font: 800 clamp(30px, 6vw, 44px) var(--font-display); line-height: 1.05; }
.vl-cobrar small { font-size: 13px; }

/* ── Reservar entrada (gratis / pago en la puerta) ────────────────────────── */
.rs-locs { display: grid; gap: 8px; }
.rs-loc { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rs-loc:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.rs-loc:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.rs-loc input { accent-color: var(--accent); }
.rs-loc .sl-zona__sw { grid-row: auto; height: 28px; }
.rs-loc__txt { display: grid; min-width: 0; }
.rs-loc__txt small { font-size: 12.5px; color: var(--muted); }
.rs-loc__precio { font: 800 17px var(--font-display); text-align: right; white-space: nowrap; }
.rs-loc__precio small { display: block; font: 500 11px var(--font-body); color: var(--muted); }
.rs-loc--agotada { opacity: .55; cursor: not-allowed; }
.rs-cantidad { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rs-cantidad__btn { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); font-size: 22px; line-height: 1; cursor: pointer; color: var(--fg); }
.rs-cantidad__btn:hover { border-color: var(--accent); color: var(--accent); }
.rs-cantidad__n { width: 70px; height: 44px; text-align: center; font: 800 24px var(--font-display); border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--fg); }
.rs-gratis { color: #1f9d6b; }
/* Boleta: reserva con pago en la puerta */
.tk-puerta { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: #fff4d1; border: 1.5px dashed #e0a800; text-align: center; margin-bottom: 14px; }
.tk-puerta span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8f5600; }
.tk-puerta b { font: 800 30px var(--font-display); color: #17141f; }
.tk-puerta small { font-size: 13px; color: #6b5a2a; }
.dp-gratis { color: #1f9d6b; }

/* Nombre y equipos de cada fecha (partidos) */
.sl-fecha__vs { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: #ffc93c; }
.sl-fecha[aria-current="true"] .sl-fecha__vs { color: var(--accent); }
.ev-fecha__partido { display: block; font-style: normal; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--accent); }
.bq__partido { display: block; margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--accent); }
/* Panel · Conexión API */
.api-nueva { border: 2px solid var(--accent); }
.api-clave { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.api-clave code { flex: 1 1 320px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; user-select: all; }
.api-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.api-pasos li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.api-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--font-display); background: var(--accent); color: #fff; }
.api-datos { margin: 0; display: grid; gap: 6px; }
.api-datos div { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
.api-datos dt { color: var(--muted); }
.api-datos dd { margin: 0; font-weight: 700; }
.api-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.api-fila .input, .api-fila .select { flex: 1 1 240px; min-width: 0; }

/* Deportes: imagen del evento (logo o afiche que llega desde FUTNEX o el panel) */
.dp-evento { grid-template-rows: auto auto 1fr auto auto; }
.dp-evento__foto { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--stage); }
.dp-evento__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.dp-evento:hover .dp-evento__foto img { transform: scale(1.04); }
.dp-logo { width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: 12px; background: #fff; }
.dp-logo--grande { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }