/* Hall-O-Scream Night — sitio público. Una sola escena: todo se funde en negro.
 * Colores: SOLO var(--...) de tokens.css. */

* { box-sizing: border-box; }
html { background: var(--negro); }
body {
  margin: 0; background: var(--negro); color: var(--hueso);
  font: 400 1.14rem/1.6 var(--serif-texto);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cera); outline-offset: 3px; }
h1, h2, h3 { margin: 0; }

.salto {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: .6rem 1rem; background: var(--hueso); color: var(--negro); text-decoration: none;
  font: 600 .8rem/1 var(--serif-romana); letter-spacing: .2em; text-transform: uppercase;
}
.salto:focus { top: 1rem; }
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

/* ---------- Tipos ---------- */
.rotulo {
  font: 500 .74rem/1.3 var(--serif-romana); letter-spacing: .32em; text-transform: uppercase;
  color: var(--ceniza);
}
.rotulo--bloque { display: block; text-align: center; }
.titular {
  font: 600 clamp(1.5rem, 1.1rem + 2vw, 2.3rem)/1.15 var(--serif-romana);
  letter-spacing: .14em; text-transform: uppercase; margin: 0; text-wrap: balance;
  color: var(--hueso);
}
.titular--aire { margin-top: .8rem; }
.titular--centro { text-align: center; }
.ornamento { width: min(15rem, 70%); margin: 1.1rem auto; opacity: .85; }

/* ---------- Escena de apertura (landing) ---------- */
.escena {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: 1.5rem 0; text-align: center;
}
.escena h1 { margin: 0; }
.escena__fondo {
  position: relative; z-index: -2; display: flex; justify-content: center;
  margin-top: clamp(-7rem, -14vw, -3.5rem);
}
.escena__fondo img {
  width: min(100%, 44rem); height: auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, var(--mascara) 45%, var(--transparente) 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, var(--mascara) 45%, var(--transparente) 100%);
  animation: respira 18s ease-in-out infinite alternate;
}
.escena__columna {
  position: absolute; top: 5rem; z-index: -1; width: 5.5rem; opacity: .75;
  -webkit-mask-image: linear-gradient(to bottom, var(--transparente), var(--mascara) 18%, var(--mascara) 70%, var(--transparente));
          mask-image: linear-gradient(to bottom, var(--transparente), var(--mascara) 18%, var(--mascara) 70%, var(--transparente));
}
.escena__columna--izq { left: 0; }
.escena__columna--der { right: 0; transform: scaleX(-1); }
.escena__niebla {
  position: absolute; inset: auto -20% 0; height: 45%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 30% 80%, var(--niebla-1), var(--transparente) 70%),
    radial-gradient(35% 50% at 75% 85%, var(--niebla-2), var(--transparente) 70%);
  animation: niebla 26s ease-in-out infinite alternate;
}
.escena__logos { width: min(13.5rem, 58%); margin: 0 auto; opacity: .92; }
.escena__titulo {
  position: relative; z-index: 1;
  width: min(100% - 2rem, 30rem); margin: .6rem auto 0;
  filter: drop-shadow(0 0 18px var(--halo));
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, var(--mascara) 88%, var(--transparente) 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, var(--mascara) 88%, var(--transparente) 100%);
  animation: vela 6s ease-in-out infinite;
}

/* Franja del cartel: fecha · hora · precio */
.cartel {
  position: relative; padding-block: 1rem 3.2rem; margin-top: clamp(-4rem, -9vw, -2rem);
  background: linear-gradient(to bottom, var(--transparente), var(--negro) 38%);
}
.cartel__fila {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center;
  width: min(100% - 1.5rem, 34rem); margin-inline: auto; text-align: center;
}
.cartel__sep { width: 1px; height: 3.6rem; background: linear-gradient(var(--transparente), var(--plata), var(--transparente)); position: relative; }
.cartel__sep::after {
  content: "✦"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: .7rem; color: var(--plata); background: var(--negro); line-height: 1; padding-block: .2rem;
}
.dato { font-family: var(--serif-romana); text-transform: uppercase; line-height: 1; margin: 1rem 0; }
.dato small { display: block; font-size: .62rem; letter-spacing: .24em; color: var(--plata); }
.dato strong { display: block; font-weight: 500; font-size: clamp(2.1rem, 1.4rem + 3vw, 3rem); margin-block: .18em; letter-spacing: .02em; }
.dato--hora strong, .dato--precio strong { margin-block: .1em; }
.dato--precio small:first-child { margin-bottom: .1em; }

.cartel__shot {
  display: grid; justify-items: center; gap: .15rem; margin: 1.6rem 0 0;
  font: 500 .8rem/1.4 var(--serif-romana); letter-spacing: .26em; text-transform: uppercase; color: var(--plata);
}
.cartel__shot img { width: 2.4rem; opacity: .9; }
.cartel__shot span { color: var(--ceniza); letter-spacing: .2em; font-size: .72rem; }
.cartel__lugar {
  display: inline-flex; align-items: center; gap: .7rem; margin: .4rem 0 0;
  font: 500 .8rem/1.4 var(--serif-romana); letter-spacing: .26em; text-transform: uppercase; color: var(--plata);
}
.cartel__lugar img { width: 1.1rem; }

.accion { display: grid; justify-items: center; gap: .9rem; margin-top: 2.2rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 3.4rem; padding: .9rem 2.2rem; border: 1px solid var(--hueso);
  font: 600 .86rem/1 var(--serif-romana); letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none; color: var(--negro); background: var(--hueso);
  box-shadow: 0 0 0 4px var(--negro), 0 0 0 5px var(--filo), 0 0 42px var(--halo);
  transition: box-shadow .4s, transform .4s; cursor: pointer; text-align: center;
}
.boton:hover { box-shadow: 0 0 0 4px var(--negro), 0 0 0 5px var(--hueso), 0 0 60px var(--halo-medio); }
.boton small { font-size: .8rem; letter-spacing: .1em; opacity: .7; }
.boton[aria-disabled="true"] { opacity: .6; cursor: progress; }
.boton--linea { color: var(--hueso); background: var(--transparente); box-shadow: none; }
.boton--linea:hover { background: var(--lavado); box-shadow: 0 0 40px var(--halo); }
.boton--ancho { width: 100%; }
.enlace-suave { font-size: 1rem; color: var(--ceniza); text-underline-offset: .25em; }
.enlace-suave:hover { color: var(--hueso); }

/* Disponibilidad junto al botón: discreta */
.disponibilidad {
  margin: 0; font: 500 .7rem/1.4 var(--serif-romana); letter-spacing: .26em;
  text-transform: uppercase; color: var(--ceniza);
}
/* «¡Últimas entradas!» (solo con poco cupo restante): misma línea, en cera */
.ultimas { display: block; margin-top: .3rem; color: var(--cera); }
.cerrado {
  margin: 0; max-width: 26rem; padding: 1rem 1.4rem; border: 1px solid var(--hierro);
  color: var(--plata); font-size: 1.05rem; text-align: center;
}
.tipos-lista {
  list-style: none; margin: 1.4rem auto 0; padding: 0; width: min(100% - 2.5rem, 26rem);
  border-top: 1px solid var(--hierro);
}
.tipos-lista li {
  display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0;
  border-bottom: 1px solid var(--hierro); font-size: 1rem; color: var(--plata);
}
.tipos-lista strong { font: 500 .78rem/1.8 var(--serif-romana); letter-spacing: .2em; text-transform: uppercase; color: var(--hueso); }
.tipos-lista .agotado { color: var(--ceniza); text-decoration: line-through; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3.5rem, 8vw, 6rem); position: relative; }
.seccion--pegada { padding-top: 0; }
.seccion__cabeza { text-align: center; margin-bottom: 2.4rem; }
.seccion__cabeza .rotulo { display: block; margin-bottom: .8rem; }

/* Concurso: calavera a un costado, texto en el medio */
.concurso {
  display: grid; gap: 1.6rem; align-items: center; justify-items: center; text-align: center;
  width: min(100% - 2.5rem, 46rem); margin-inline: auto;
}
.concurso__calavera {
  width: 9rem; opacity: .8;
  -webkit-mask-image: radial-gradient(closest-side, var(--mascara) 60%, var(--transparente));
          mask-image: radial-gradient(closest-side, var(--mascara) 60%, var(--transparente));
}
.premios { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hierro); width: 100%; margin-top: .6rem; }
.premio { background: var(--negro); padding: 1.3rem 1rem; margin: 0; }
.premio strong { display: block; font: 500 1.05rem/1.2 var(--serif-romana); letter-spacing: .16em; text-transform: uppercase; }
.premio span { color: var(--ceniza); font-size: 1rem; }
.concurso p { margin: 0 auto; max-width: 32rem; color: var(--plata); }
.concurso .premio { margin: 0; }

/* Pasos: una línea de tiempo, no tarjetas */
.pasos { list-style: none; margin: 0 auto; padding: 0; width: min(100% - 2.5rem, 40rem); counter-reset: paso; }
.pasos li {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-block: 1.1rem;
  border-top: 1px solid var(--hierro);
}
.pasos li:last-child { border-bottom: 1px solid var(--hierro); }
.pasos li::before {
  counter-increment: paso; content: counter(paso, upper-roman);
  font: 500 1.35rem/1.2 var(--serif-romana); color: var(--cera); text-align: center;
}
.pasos strong { display: block; font: 600 .86rem/1.4 var(--serif-romana); letter-spacing: .2em; text-transform: uppercase; }
.pasos span { color: var(--ceniza); font-size: 1.04rem; }

/* Mapa en ventana de arco */
.llegar { display: grid; gap: 2rem; align-items: center; width: min(100% - 2.5rem, 60rem); margin-inline: auto; }
.llegar figure { margin: 0; }
.arco {
  position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  border: 1px solid var(--hierro);
  box-shadow: 0 0 0 6px var(--negro), 0 0 0 7px var(--hierro), 0 30px 80px var(--sombra);
}
.arco picture { display: contents; }
.arco img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.8); animation: respira 30s ease-in-out infinite alternate; }
.arco::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, var(--transparente) 55%, var(--negro)); pointer-events: none; }
.arco__pin { position: absolute; left: 50%; top: 50%; width: 1.4rem; height: 1.4rem; transform: translate(-50%, -50%); z-index: 1; }
.arco__pin i { position: absolute; inset: 0; border-radius: 50%; background: var(--cera); box-shadow: 0 0 22px 6px var(--halo-fuerte); }
.arco__pin b { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--cera); animation: onda 2.8s ease-out infinite; }
.arco__pin b + b { animation-delay: 1.4s; }
/* sitio.js pausa las ondas hasta que el mapa entra en pantalla (sin JS: laten siempre). */
.arco--espera .arco__pin b { animation-play-state: paused; opacity: 0; }
.llegar__texto { text-align: center; }
.llegar__texto p { color: var(--plata); margin: .6rem 0 1.6rem; }
.atribucion { font-size: .78rem; color: var(--ceniza); text-align: center; margin-top: .7rem; }
.atribucion a { color: inherit; }

/* Entrada al hacer scroll (sitio.js). Sin JS nada lleva .aparece--espera: todo visible. */
.aparece--espera { opacity: 0; transform: translateY(1.2rem); }
.aparece--lista { opacity: 1; transform: none; transition: opacity 1.1s ease, transform 1.1s ease; }

/* Pie */
.pie { padding-block: 3rem 2.4rem; padding-inline: 1.25rem; text-align: center; border-top: 1px solid var(--piedra); }
.pie__logos { width: 12rem; margin: 0 auto 1.4rem; opacity: .75; }
.pie p { margin: .3rem auto; color: var(--ceniza); font-size: 1rem; max-width: var(--ancho-texto); }
.pie a { color: var(--plata); }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin-top: 1.2rem; font-size: .95rem; }
.firma { display: block; margin-top: 1.6rem; font-size: .8rem; color: var(--hierro); letter-spacing: .12em; }

/* ---------- Cabecera mínima (páginas internas) ---------- */
.cabecera-min { text-align: center; padding-block: 1.2rem .4rem; position: relative; overflow: hidden; isolation: isolate; }
.cabecera-min a { display: inline-block; }
.cabecera-min img.titulo { width: 11rem; margin-inline: auto; filter: drop-shadow(0 0 12px var(--halo)); animation: vela 6s ease-in-out infinite; }
.cabecera-min .luna {
  position: absolute; inset: -30% 0 auto; margin-inline: auto; width: min(100%, 36rem); z-index: -1; opacity: .35;
  -webkit-mask-image: radial-gradient(closest-side, var(--mascara) 30%, var(--transparente));
          mask-image: radial-gradient(closest-side, var(--mascara) 30%, var(--transparente));
}

/* ---------- Boleto (compra, gracias, estado) ---------- */
.boleto {
  width: min(100% - 1.5rem, 36rem); margin: 1.5rem auto 4rem; position: relative;
  background: linear-gradient(to bottom, var(--noche), var(--negro));
  border: 1px solid var(--hierro); padding: 2rem 1.3rem 2.2rem;
}
.boleto::before, .boleto::after {
  content: ""; position: absolute; width: 4.2rem; height: 4.2rem;
  background: url("../img/esquina.webp") center / contain no-repeat; opacity: .8; pointer-events: none;
}
.boleto::before { top: -1px; left: -1px; }
.boleto::after { top: -1px; right: -1px; transform: scaleX(-1); }
.boleto h1 { text-align: center; margin-top: .6rem; }
.boleto__intro { text-align: center; color: var(--plata); margin: 1rem auto 0; max-width: 28rem; }
.boleto form { margin: 0; }
.boleto form.parte { margin-top: 1.8rem; }   /* /estado: separado del párrafo de arriba */

.resumen {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1.2rem; margin-top: 1.4rem; border-block: 1px solid var(--hierro);
}
.resumen strong { font: 600 .86rem/1.3 var(--serif-romana); letter-spacing: .2em; text-transform: uppercase; }
.resumen span { display: block; color: var(--ceniza); font-size: .98rem; }
/* Aforo en /comprar: discreto, como la disponibilidad de la landing */
.resumen .aforo, .aforo {
  display: block; margin-top: .45rem; font: 500 .7rem/1.4 var(--serif-romana);
  letter-spacing: .22em; text-transform: uppercase; color: var(--ceniza);
}
.aforo .ultimas { display: block; margin-top: .25rem; font: inherit; color: var(--cera); }
.aforo--suelto { margin: 1.4rem 0 0; text-align: center; }
.resumen--solo { border-top: 0; margin-top: 0; }

/* Varios tipos públicos: filas elegibles */
.opciones { margin-top: 1.4rem; border-top: 1px solid var(--hierro); }
.opcion { position: relative; border-bottom: 1px solid var(--hierro); }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion label {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem .9rem 1rem 2.4rem; cursor: pointer; position: relative;
}
.opcion label::before {
  content: ""; position: absolute; left: .6rem; top: 50%; width: .9rem; height: .9rem; transform: translateY(-50%) rotate(45deg);
  border: 1px solid var(--ceniza);
}
.opcion input:checked + label { background: var(--piedra); }
.opcion input:checked + label::before { background: var(--cera); border-color: var(--cera); box-shadow: 0 0 12px var(--halo-medio); }
.opcion input:focus-visible + label { outline: 2px solid var(--cera); outline-offset: -2px; }
.opcion input:disabled + label { opacity: .45; cursor: not-allowed; }
.opcion__nombre { display: block; font: 600 .86rem/1.3 var(--serif-romana); letter-spacing: .2em; text-transform: uppercase; }
.opcion__detalle { display: block; color: var(--ceniza); font-size: .98rem; }
.opcion__precio { font: 500 1.3rem/1 var(--serif-romana); white-space: nowrap; }

.contador { display: flex; align-items: center; gap: .2rem; }
.contador button {
  width: 2.6rem; height: 2.6rem; border: 1px solid var(--hierro); background: var(--piedra); color: var(--hueso);
  font: 500 1.3rem/1 var(--serif-romana); cursor: pointer;
}
/* aria-disabled (no `disabled`): el botón no pierde el foco al llegar al tope. */
.contador button[aria-disabled="true"] { opacity: .35; cursor: default; }
.contador button:focus-visible { outline: 2px solid var(--cera); outline-offset: 2px; }
.contador input {
  width: 3rem; min-height: 2.6rem; text-align: center; font: 500 1.5rem/1 var(--serif-romana);
  color: var(--hueso); background: var(--transparente); border: 0; border-bottom: 1px solid var(--hierro);
  -moz-appearance: textfield; appearance: textfield;
}
/* Sin JS los botones −/+ quedan ocultos: el input se ve como campo editable. */
.contador button[hidden] + input { width: 4.5rem; border: 1px solid var(--hierro); background: var(--piedra); }
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contador input:focus { border-bottom-color: var(--cera); }
.contador input:focus-visible { outline: 2px solid var(--cera); outline-offset: 2px; }
.contador input[aria-invalid="true"] { border-bottom-color: var(--error); }
.cantidad { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--hierro); }
.cantidad label { font: 600 .86rem/1.3 var(--serif-romana); letter-spacing: .2em; text-transform: uppercase; }

.total { display: flex; justify-content: space-between; align-items: baseline; padding-block: 1rem .2rem; margin: 0; }
.total span { font: 500 .74rem/1 var(--serif-romana); letter-spacing: .3em; text-transform: uppercase; color: var(--ceniza); }
.total strong { font: 500 2.4rem/1 var(--serif-romana); color: var(--cera); }

.parte { margin-top: 2.4rem; }
.parte h2 { display: flex; align-items: baseline; gap: .8rem; font: 600 .86rem/1.3 var(--serif-romana); letter-spacing: .24em; text-transform: uppercase; margin: 0 0 1rem; }
.parte h2 em { font-style: normal; color: var(--cera); font-size: 1.1rem; letter-spacing: 0; }
.parte__nota { color: var(--ceniza); font-size: 1rem; margin: 0 0 1rem; }
.cuenta { display: grid; gap: 0; border: 1px solid var(--hierro); margin: 0; }
.cuenta div { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .75rem 1rem; }
.cuenta div + div { border-top: 1px solid var(--piedra); }
.cuenta dt { color: var(--ceniza); font-size: .98rem; }
.cuenta dd { margin: 0; text-align: right; font-weight: 500; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.cuenta .num { font: 500 1.05rem/1 var(--serif-romana); letter-spacing: .12em; }
.copiar { margin-left: .6rem; border: 0; background: none; color: var(--cera); font: 500 .7rem/1 var(--serif-romana); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; padding: .4rem; }
.copiar[data-copiado] { color: var(--ok); }

/* Forma de pago: dos pestañas (radios). Con :has() se ve solo el bloque
   elegido; sin soporte se ven los dos (y el banco de origen queda visible). */
.formas-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.forma { position: relative; }
.forma input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.forma label {
  display: grid; gap: .3rem; height: 100%; padding: .95rem 1rem .9rem; cursor: pointer; text-align: center;
  border: 1px solid var(--hierro); border-bottom-color: var(--ceniza); color: var(--ceniza);
}
.forma + .forma label { border-left: 0; }
.forma__nombre { font: 600 .86rem/1.3 var(--serif-romana); letter-spacing: .2em; text-transform: uppercase; }
.forma__detalle { font-size: .95rem; }
.forma label:hover { color: var(--plata); background: var(--noche); }
.forma input:checked + label {
  color: var(--hueso); background: var(--piedra); border-color: var(--ceniza); border-bottom-color: var(--piedra);
  box-shadow: inset 0 2px 0 var(--cera);
}
.forma input:checked + label .forma__nombre { color: var(--cera); }
.forma input:focus-visible + label { outline: 2px solid var(--cera); outline-offset: -2px; }
.forma input[aria-invalid="true"] + label { border-bottom-color: var(--error); }

.pago + .pago { margin-top: 1.6rem; }
.pago__titulo { font: 500 .74rem/1.3 var(--serif-romana); letter-spacing: .3em; text-transform: uppercase; color: var(--ceniza); margin: 0 0 .8rem; }
.parte--pago:has(#f-metodo:checked) .pago--deuna,
.parte--pago:has(#f-metodo-deuna:checked) .pago--transferencia { display: none; }
.parte--pago:has(.forma input:checked) .pago + .pago { margin-top: 0; }
/* Con pestañas el título del bloque repite la pestaña. */
.parte--pago:has(.forma input:checked) .pago__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
form:has(#f-metodo-deuna:checked) .solo-transferencia { display: none; }
@supports selector(:has(a)) { .solo-transferencia .ayuda { display: none; } }

.deuna { display: grid; gap: 1.4rem; border: 1px solid var(--hierro); padding: 1.2rem; }
.deuna__qr { margin: 0; display: grid; gap: .6rem; justify-items: center; }
.deuna__qr img { display: block; width: 100%; max-width: 15rem; height: auto; background: var(--papel); padding: .9rem; }
.deuna__qr figcaption { color: var(--plata); font-size: 1rem; }
.pasos-pago { margin: 0 0 1.2rem; padding-left: 1.4rem; display: grid; gap: .55rem; font-size: 1.05rem; }
.pasos-pago li::marker { color: var(--cera); font-family: var(--serif-romana); }
.monto { color: var(--cera); font: 500 1.15rem/1 var(--serif-romana); letter-spacing: .04em; white-space: nowrap; }
.deuna__nota { color: var(--ceniza); font-size: .95rem; margin: .8rem 0 0; }
@media (min-width: 40rem) {
  .deuna { grid-template-columns: 13rem 1fr; align-items: start; }
}

.campo { display: grid; gap: .35rem; margin-bottom: 1rem; }
.campo label { font-size: 1rem; color: var(--plata); }
.campo input, .campo select {
  width: 100%; min-height: 3rem; padding: .6rem .8rem; font: 400 1.1rem var(--serif-texto);
  color: var(--hueso); background: var(--negro); border: 0; border-bottom: 1px solid var(--hierro); border-radius: 0;
}
.campo select { appearance: none; background-image: linear-gradient(45deg, var(--transparente) 50%, var(--ceniza) 50%), linear-gradient(135deg, var(--ceniza) 50%, var(--transparente) 50%); background-position: calc(100% - 1.1rem) 50%, calc(100% - .75rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2rem; }
.campo input:focus, .campo select:focus { outline: none; border-bottom-color: var(--cera); background-color: var(--noche); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-bottom-color: var(--error); }
.campo small, .ayuda { color: var(--ceniza); font-size: .92rem; }
.opcional { color: var(--ceniza); font-size: .92rem; }
.error-campo { color: var(--error); font-size: .95rem; }
.error-campo::before { content: "✦ "; font-size: .7em; vertical-align: .15em; }

.subida {
  position: relative; display: grid; justify-items: center; gap: .4rem; padding: 1.6rem 1rem; text-align: center;
  border: 1px dashed var(--hierro); color: var(--plata); cursor: pointer; transition: border-color .3s, background .3s;
}
.subida:hover { border-color: var(--ceniza); }
.subida:focus-within { border-color: var(--cera); background: var(--noche); }
.subida strong { font: 600 .8rem/1.3 var(--serif-romana); letter-spacing: .22em; text-transform: uppercase; color: var(--hueso); }
.subida span { color: var(--ceniza); font-size: .95rem; }
.subida input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subida--error { border-color: var(--error); }
.subida__archivo { color: var(--cera); font-size: 1rem; word-break: break-all; }
.subida--lista { border-style: solid; border-color: var(--ceniza); }

.acepto { display: flex; gap: .7rem; align-items: flex-start; margin-block: 1.6rem .4rem; font-size: 1rem; color: var(--plata); }
.acepto input { width: 1.2rem; height: 1.2rem; margin-top: .25rem; accent-color: var(--hueso); flex: none; }
.acepto a { color: var(--hueso); }
.acepto-bloque { margin-bottom: 1.4rem; }
.nota { text-align: center; color: var(--ceniza); font-size: .95rem; margin: 1rem 0 0; }
.nota a { color: var(--plata); }

/* Avisos */
.aviso {
  margin: 1.4rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--aviso); background: var(--aviso-fondo);
  color: var(--hueso); font-size: 1.02rem;
}
.aviso p { margin: 0; }
.aviso p + p, .aviso ul + p { margin-top: .5rem; }
.aviso--error { border-color: var(--error); background: var(--error-fondo); }
.aviso--error strong { color: var(--error); font-weight: 500; }
.aviso ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.aviso a { color: var(--hueso); }
.aviso:focus { outline: none; }

/* Código de compra y datos */
.codigo {
  display: block; text-align: center; margin: 1.2rem 0 .4rem;
  font: 500 clamp(2rem, 1.4rem + 3vw, 2.8rem)/1 var(--serif-romana); letter-spacing: .12em; color: var(--cera);
  text-shadow: 0 0 24px var(--halo);
}
.datos { margin: 1.4rem 0 0; border-top: 1px solid var(--hierro); }
.datos div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--hierro); }
.datos dt { color: var(--ceniza); }
.datos dd { margin: 0; text-align: right; }
.contacto { color: var(--plata); font-size: 1rem; text-align: center; margin: 1.6rem 0 0; }
.contacto a { color: var(--hueso); }
.lista-entradas { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.boleto .accion { margin-top: 1.8rem; }

/* Sello de estado */
.estado {
  display: inline-block; padding: .35rem .9rem; border: 1px solid var(--ceniza); color: var(--plata);
  font: 600 .7rem/1 var(--serif-romana); letter-spacing: .24em; text-transform: uppercase;
}
.estado--validada, .estado--valida { border-color: var(--ok); color: var(--ok); }
.estado--pendiente { border-color: var(--aviso); color: var(--aviso); }
.estado--rechazada, .estado--usada { border-color: var(--error); color: var(--error); }

/* ---------- Entrada (ticket con QR) ---------- */
.entrada {
  width: min(100% - 2rem, 24rem); margin: 1.2rem auto 1.4rem; text-align: center;
  border: 1px solid var(--hierro); background: var(--noche); position: relative;
}
.entrada__cabeza { padding: 1.6rem 1.2rem 1.2rem; position: relative; overflow: hidden; }
.entrada__cabeza img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; z-index: 0; }
.entrada__cabeza > * { position: relative; }
.entrada__cabeza img.titulo { width: 12rem; margin-inline: auto; }
.entrada__datos { font: 500 .72rem/1.6 var(--serif-romana); letter-spacing: .24em; text-transform: uppercase; color: var(--plata); margin: .6rem 0 0; }
.entrada__corte { position: relative; height: 1px; border-top: 1px dashed var(--hierro); margin-inline: 1.2rem; }
.entrada__corte::before, .entrada__corte::after { content: ""; position: absolute; top: -.8rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--negro); border: 1px solid var(--hierro); }
.entrada__corte::before { left: -2.05rem; clip-path: inset(0 0 0 50%); }
.entrada__corte::after { right: -2.05rem; clip-path: inset(0 50% 0 0); }
.entrada__qr { padding: 1.4rem; }
.entrada__qr img { width: 100%; max-width: 15rem; margin-inline: auto; background: var(--papel); padding: .6rem; image-rendering: pixelated; }
.entrada__titular { font-size: 1.3rem; margin: .8rem 0 .1rem; }
.entrada__meta { color: var(--ceniza); font-size: 1rem; margin: 0 0 .4rem; }
.entrada .estado { margin-top: .6rem; }
.entrada-nota { width: min(100% - 2rem, 24rem); margin: 0 auto; }
.entrada-pie { margin-bottom: 3rem; }

/* ---------- Texto legal ---------- */
.prosa { width: min(100% - 2.5rem, var(--ancho-texto)); margin: 1.5rem auto 4rem; }
.prosa h1 { text-align: center; margin-bottom: 1.6rem; }
.prosa h2 { font: 600 .86rem/1.4 var(--serif-romana); letter-spacing: .22em; text-transform: uppercase; margin: 2.2rem 0 .6rem; color: var(--hueso); }
.prosa p, .prosa li { color: var(--plata); }
.prosa ul { padding-left: 1.2rem; }
.prosa li { margin-bottom: .4rem; }
.prosa li::marker { color: var(--cera); content: "✦  "; font-size: .7em; }
.prosa a { color: var(--hueso); }

/* ---------- Error ---------- */
.error-pagina { text-align: center; width: min(100% - 2.5rem, 30rem); margin: 2rem auto 4rem; }
.error-pagina .numero { font: 500 clamp(3.5rem, 2rem + 8vw, 6rem)/1 var(--serif-romana); color: var(--hierro); margin: 0 0 .6rem; letter-spacing: .1em; }
.error-pagina p { color: var(--plata); }
.error-pagina .boton { margin-top: 1rem; }

/* ---------- Movimiento ---------- */
@keyframes vela { 0%, 100% { filter: drop-shadow(0 0 16px var(--halo)); } 45% { filter: drop-shadow(0 0 26px var(--halo-medio)); } 55% { filter: drop-shadow(0 0 12px var(--halo)); } }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes niebla { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aparece--espera { opacity: 1; transform: none; }
}

/* ---------- Escritorio ---------- */
@media (min-width: 52rem) {
  .escena__fondo { margin-top: -5rem; }
  .escena__fondo img { width: min(100%, 70rem); }
  .escena__columna { width: 9rem; top: 2rem; }
  .escena__titulo { width: 30rem; }
  .concurso { grid-template-columns: 9rem 1fr 9rem; text-align: center; }
  .concurso__calavera--der { transform: scaleX(-1); }
  .llegar { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
  .llegar__texto { text-align: left; }
  .arco { aspect-ratio: 1 / 1; }
  .boleto { padding: 2.6rem 2.8rem 2.8rem; }
}
@media (max-width: 51.99rem) { .concurso__calavera--der { display: none; } }
.grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
p.rotulo--bloque { margin: 1.8rem 0 0; }