/* ARSIS · página del evento y compra */
.franja-prueba { background: #5A2530; color: #fff; text-align: center; font-family: var(--ui); font-size: 13px; letter-spacing: .08em; padding: 10px 16px; }
.ev-cargando { padding-block: 120px; font-family: var(--ui); color: var(--tenue); text-align: center; }
.sin-scroll { overflow: hidden; }

.ev-hero { background: radial-gradient(ellipse 60% 70% at 25% 40%, #2A2124 0%, var(--noche) 70%); }
.ev-hero-fila { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; padding-block: 48px 64px; align-items: start; }
.ev-flyer { margin: 0; border: 1px solid var(--borde); border-radius: 4px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.ev-flyer img { width: 100%; height: auto; }
.ev-info { display: flex; flex-direction: column; gap: 22px; }
.ev-info h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(44px, 6vw, 76px); line-height: 1; }
.ev-ficha { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--borde); }
.ev-ficha div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.ev-ficha dt { font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); padding-top: 3px; }
.ev-ficha dd { margin: 0; color: var(--marfil); }
.ev-ficha dd::first-letter { text-transform: uppercase; }
.ev-sub { margin: 0 0 10px; font-family: var(--ui); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--texto-2); font-weight: 500; }
.ev-fases { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fase { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 4px; background: var(--superficie); }
.fase > div { display: flex; flex-direction: column; gap: 2px; }
.fase-nombre { font-family: var(--ui); font-size: 15px; color: var(--marfil); letter-spacing: .04em; }
.fase-detalle { font-family: var(--ui); font-size: 12px; color: var(--tenue); }
.fase-precio { font-family: var(--display); font-size: 28px; font-weight: 600; color: var(--marfil); white-space: nowrap; }
.fase-vigente { border-color: var(--vino-2); background: linear-gradient(90deg, rgba(122,31,46,.28), rgba(20,16,17,1) 70%); }
.fase-vigente .fase-detalle { color: #E6B9B0; }
.fase-agotada, .fase-vencida { opacity: .5; }
.fase-agotada .fase-precio, .fase-vencida .fase-precio { text-decoration: line-through; }
.fase-proxima .fase-precio { color: var(--texto-2); }
.ev-nota { margin: 0; font-family: var(--ui); font-size: 13px; color: var(--tenue); }
.ev-accion { display: grid; gap: 10px; }
.btn-grande { min-height: 56px; font-size: 14px; width: 100%; }

.ev-seccion { padding-block: 64px; border-top: 1px solid #221C1E; }
.ev-seccion h2 { margin: 0 0 18px; font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4vw, 46px); line-height: 1.05; }
.ev-seccion p { color: var(--texto-2); max-width: 680px; }
.ev-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.ev-lista { margin: 0; padding-left: 20px; color: var(--texto-2); display: grid; gap: 8px; }
.ev-lugar-largo { font-size: 20px; color: var(--marfil) !important; }
.ev-mapas { display: flex; gap: 12px; flex-wrap: wrap; }
.ev-pasos { margin: 0; padding-left: 24px; display: grid; gap: 14px; color: var(--texto-2); max-width: 760px; }
.ev-pasos b { color: var(--marfil); font-weight: 500; }
details { border-bottom: 1px solid var(--borde); padding: 12px 0; }
details summary { cursor: pointer; font-family: var(--ui); font-size: 15px; color: var(--marfil); }
details p { margin: 10px 0 0; font-size: 16px; }
details a, .ev-seccion a { color: #E6B9B0; text-decoration: underline; text-underline-offset: 3px; }

.barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(14,12,13,.96); border-top: 1px solid var(--borde); backdrop-filter: blur(8px); }
.barra-compra > div { display: flex; flex-direction: column; }
.barra-compra .eyebrow { font-size: 10px; letter-spacing: .2em; }
.barra-compra strong { font-family: var(--display); font-size: 26px; color: var(--marfil); line-height: 1.1; }

/* ---------- compra ---------- */
.compra { position: fixed; inset: 0; z-index: 60; background: rgba(5,4,5,.78); display: grid; place-items: center; padding: 24px; }
.compra-caja { width: min(640px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--superficie); border: 1px solid var(--borde-2); border-radius: 6px; padding: 24px 28px 28px; }
.compra-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compra-cabeza h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 34px; }
.compra-cerrar { width: 44px; height: 44px; border: 1px solid var(--borde-2); border-radius: 50%; background: transparent; color: var(--texto-2); font-size: 24px; line-height: 1; }
.pasos { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: paso; }
.pasos li { font-family: var(--ui); font-size: 11px; letter-spacing: .06em; color: var(--tenue); border-top: 3px solid var(--borde-2); padding-top: 8px; counter-increment: paso; }
.pasos li::before { content: counter(paso) '. '; }
.pasos li.hecho { border-color: #6B5A5E; color: var(--texto-2); }
.pasos li.actual { border-color: var(--vino-2); color: var(--marfil); }
.paso { display: grid; gap: 18px; }
.compra-texto { margin: 0; color: var(--texto); font-size: 18px; }
.cantidad { display: flex; align-items: center; justify-content: center; gap: 24px; }
.cantidad button { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--borde-2); background: transparent; color: var(--marfil); font-size: 28px; }
.cantidad output { font-family: var(--display); font-size: 64px; color: var(--marfil); min-width: 60px; text-align: center; }
.estimado { margin: 0; text-align: center; font-family: var(--ui); font-size: 18px; color: var(--marfil); }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rejilla .ancho { grid-column: 1 / -1; }
.tel { display: grid; grid-template-columns: 128px 1fr; gap: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-family: var(--ui); font-size: 14px; color: var(--texto); line-height: 1.45; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--vino-2); flex-shrink: 0; }
.aviso-fuerte { border: 1px solid #6B2A35; background: #1F1416; border-radius: 4px; padding: 16px; display: grid; gap: 12px; }
.aviso-fuerte strong { font-family: var(--ui); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #F2C4BC; }
.botones { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.turnstile:empty { display: none; }

.reloj { text-align: center; padding: 18px; border: 1px solid var(--borde-2); border-radius: 6px; display: grid; gap: 4px; }
.reloj-tiempo { font-family: var(--display); font-size: 72px; line-height: 1; color: var(--marfil); font-variant-numeric: tabular-nums; }
.reloj-texto { font-family: var(--ui); font-size: 14px; color: var(--texto-2); }
.reloj.urgente { border-color: var(--vino-2); background: #2A1418; }
.reloj.urgente .reloj-tiempo { color: #F2C4BC; }
.reloj.vencido .reloj-tiempo { color: var(--tenue); }
.pago { display: grid; gap: 0; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; }
.pago-fila { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.pago-fila:last-child { border-bottom: 0; }
.pago-fila span { font-family: var(--ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.pago-fila small { text-transform: none; letter-spacing: 0; }
.pago-fila strong { font-family: var(--ui); font-size: 22px; font-weight: 500; color: var(--marfil); letter-spacing: .04em; overflow-wrap: anywhere; }
.pago-codigo { background: #2A1418; }
.pago-codigo strong { font-size: 30px; letter-spacing: .18em; color: #FFE6A8; }
.copiar { min-height: 40px; padding: 0 14px; border: 1px solid var(--borde-2); background: transparent; color: var(--texto); border-radius: 2px; font-family: var(--ui); font-size: 12px; letter-spacing: .08em; }
.importante { margin: 0; padding: 14px 16px; border-left: 3px solid var(--vino-2); background: #1F1416; font-family: var(--ui); font-size: 14px; color: #F2D6D0; }
.pago-detalle { list-style: none; margin: 0; padding: 0; font-family: var(--ui); font-size: 14px; color: var(--texto-2); display: grid; gap: 4px; }
.pago-detalle .total { color: var(--marfil); font-size: 16px; margin-top: 4px; }

.sube { display: grid; gap: 16px; }
.sube-elegir { cursor: pointer; }
.sube-vista img { max-height: 320px; width: auto; margin: 0 auto; border: 1px solid var(--borde); border-radius: 4px; }
.recordatorio { margin: 0; padding-left: 20px; font-family: var(--ui); font-size: 13px; color: var(--texto-2); display: grid; gap: 6px; }
.estado-final { margin: 0; padding: 20px; border-radius: 6px; border: 1px solid var(--borde-2); display: grid; gap: 12px; font-family: var(--ui); font-size: 15px; color: var(--texto); }
.estado-final strong { font-family: var(--display); font-size: 32px; font-weight: 500; color: var(--marfil); }
.estado-aprobado { border-color: #2F6B3A; background: #12201A; }
.estado-rechazado { border-color: #6B2A35; background: #1F1416; }
.estado-nueva_imagen { border-color: #8A6624; background: #221B10; }

@media (max-width: 860px) {
  .ev-hero-fila { grid-template-columns: 1fr; gap: 28px; padding-block: 24px 40px; }
  .ev-flyer { max-width: 460px; }
  .ev-dos { grid-template-columns: 1fr; gap: 32px; }
  .barra-compra { display: flex; }
  .barra-compra[hidden] { display: none; }
  .pagina-evento .pie { padding-bottom: 110px; }
}
@media (max-width: 600px) {
  .compra { padding: 0; place-items: stretch; }
  .compra-caja { max-height: none; height: 100%; border-radius: 0; border: 0; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
  .rejilla { grid-template-columns: 1fr; }
  .pago-fila { grid-template-columns: 1fr auto; }
  .pago-fila span { grid-column: 1 / -1; }
  .reloj-tiempo { font-size: 60px; }
  .ev-ficha div { grid-template-columns: 90px 1fr; }
  .pasos li { font-size: 10px; }
}

/* ---------- Mis entradas ---------- */
.mis { padding-block: 48px 72px; display: grid; gap: 20px; max-width: 760px; }
.mis h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(42px, 6vw, 64px); }
.mis-form { padding: 20px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.mis-form .aviso { grid-column: 1 / -1; margin: 0; }
#resultado { display: grid; gap: 18px; }
.estado-final .franja-prueba { border-radius: 4px; }
.mis-entradas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mi-entrada { background: #fff; color: #111; border-radius: 6px; padding: 16px; display: grid; justify-items: center; gap: 6px; text-align: center; font-family: var(--ui); }
.mi-entrada .eyebrow { color: #333; font-size: 11px; }
.mi-entrada img { width: 100%; max-width: 260px; height: auto; image-rendering: pixelated; }
.mi-entrada strong { font-size: 20px; letter-spacing: .06em; }
.mi-entrada.usada { opacity: .45; }
.mis-nota { grid-column: 1 / -1; }
@media (max-width: 600px) { .mis-form { grid-template-columns: 1fr; } }

/* Fecha de nacimiento, casilla bajo el teléfono y condiciones informativas */
.fecha-nac { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 8px; }
.check-bajo { margin-top: 10px; font-size: 13.5px; }
.aviso-lista { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 10px; font-family: var(--ui); font-size: 14px; line-height: 1.45; color: var(--texto); }
.aviso-lista li { position: relative; padding-left: 30px; }
.aviso-lista li::before { content: ''; position: absolute; left: 7px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #C9A55C; }
.check-auto { cursor: default; }
.check-auto input:disabled { opacity: 1; }
.check-auto small { display: block; color: var(--tenue); font-size: 12px; margin-top: 2px; }