/* Paginas publicas de venta. El color lo pone cada evento en --acento. */
:root {
  --tinta: #10202E;
  --tinta-2: #4A5A67;
  --papel: #FFFFFF;
  --suelo: #EEF1F0;
  --tono: #E2E7E6;
  --fondo-oscuro: #10202E;
  --margen: clamp(16px, 3vw, 40px);
  --radio: 6px;
  --mover: 180ms cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--suelo); color: var(--tinta); font: 400 17px/1.5 'Archivo', system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
[hidden] { display: none !important; }

.aviso-demo { background: #7A2E12; color: #FFF; text-align: center; padding: 8px var(--margen); font-size: 15px; font-weight: 500; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 0; border-radius: var(--radio);
  background: var(--acento); color: var(--sobre-acento); font: 700 17px/1.2 'Archivo', sans-serif; text-decoration: none; cursor: pointer;
  transition: transform var(--mover), opacity var(--mover); }
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-chico { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn-grande { min-height: 58px; padding: 16px 34px; font-size: 19px; }
.btn-ancho { width: 100%; }
.btn-claro { background: var(--tono); color: var(--tinta); }

/* Barra */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--papel); padding: 10px var(--margen); }
.barra-logo img { height: 58px; width: auto; }

/* Portada: el boleto es la pagina */
.portada { background: var(--acento); padding: clamp(20px, 4vw, 56px) var(--margen) clamp(32px, 5vw, 72px); }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); max-width: 1320px; margin: 0 auto; background: var(--papel); border-radius: var(--radio); }
.ticket-texto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 5vw, 72px); }
.ticket h1 { font-size: clamp(3rem, 6.6vw, 6.5rem); font-weight: 800; line-height: .95; letter-spacing: -.035em; color: var(--tinta); }
.ticket-cuando { margin-top: clamp(20px, 2.4vw, 36px); font-size: clamp(1.5rem, 2.7vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; color: var(--acento); }
.ticket-donde { margin-top: 6px; font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 500; line-height: 1.2; }
.ticket-frase { margin-top: 18px; max-width: 34em; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.ticket-texto .btn { margin-top: clamp(24px, 3vw, 40px); }
.estado-venta { margin-top: 28px; font-size: 1.5rem; font-weight: 700; }
.ticket-talon { position: relative; display: flex; padding: clamp(16px, 2vw, 28px); background: var(--papel); border-left: 2px dashed var(--tono); border-radius: 0 var(--radio) var(--radio) 0; }
.ticket-talon img { width: 100%; height: 100%; object-fit: contain; }
.ticket-talon::before, .ticket-talon::after { content: ''; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--acento); }
.ticket-talon::before { top: -14px; }
.ticket-talon::after { bottom: -14px; }

/* Compra */
.compra { padding: clamp(48px, 7vw, 112px) var(--margen); scroll-margin-top: 0; }
.compra-rejilla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: clamp(32px, 5vw, 80px); max-width: 1320px; margin: 0 auto; align-items: start; }
.paso + .paso { margin-top: clamp(40px, 5vw, 72px); }
.paso h2, .detalles h2, .preguntas h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; margin-bottom: 22px; }
.sitio-campo { position: absolute; left: -9999px; }

.precios { display: grid; gap: 4px; }
.precio { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(12px, 2vw, 28px); background: var(--papel); padding: 16px clamp(14px, 2vw, 24px); transition: background var(--mover); }
.precio.elegido { background: color-mix(in srgb, var(--acento) 9%, var(--papel)); }
.precio-nombre { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 700; line-height: 1.2; }
.precio-nota { font-size: 15px; color: var(--tinta-2); margin-top: 2px; }
.precio-monto { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.contador { display: inline-flex; align-items: center; }
.contador button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tono); color: var(--tinta); font: 600 22px/1 'Archivo', sans-serif; cursor: pointer; transition: transform var(--mover), background var(--mover); }
.contador button:active { transform: scale(.92); }
.contador button[data-mas] { background: var(--acento); color: var(--sobre-acento); }
.contador input { width: 40px; height: 44px; border: 0; background: transparent; color: var(--tinta); font: 700 18px 'Archivo', sans-serif; text-align: center; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.contador input::-webkit-outer-spin-button, .contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quedan { margin-top: 12px; font-weight: 600; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: block; font-size: 15px; font-weight: 600; }
.campo-ancho { grid-column: 1 / -1; }
.campo input, .campo select { display: block; width: 100%; height: 50px; margin-top: 6px; padding: 10px 14px; border: 1.5px solid #B9C3C6; border-radius: var(--radio); background: var(--papel); color: var(--tinta); font: 400 17px 'Archivo', sans-serif; }
.campo input[readonly] { background: var(--tono); }
.campo input:focus, .campo select:focus { border-color: var(--acento); outline: 2px solid var(--acento); outline-offset: 0; }
.campo-tel { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 6px; }
.campo-ayuda { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; color: #4A5A66; }
.casilla { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 14px; font-weight: 600; cursor: pointer; }
.casilla input { width: 22px; height: 22px; accent-color: var(--acento); }

.pagos { display: grid; gap: 4px; }
.pago { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 16px clamp(14px, 2vw, 24px); background: var(--papel); cursor: pointer; transition: background var(--mover); }
.pago input { grid-row: span 2; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--acento); }
.pago-nombre { font-size: 1.125rem; font-weight: 700; }
.pago-desc { font-size: 16px; color: var(--tinta-2); }
.pago:has(input:checked) { background: color-mix(in srgb, var(--acento) 9%, var(--papel)); }
.pago-oficina { margin-top: 14px; }

/* Boleto que se llena solo mientras se compra */
.vivo-col { position: sticky; top: 16px; scroll-margin-top: 16px; }
.vivo { background: var(--papel); border-radius: var(--radio); overflow: hidden; }
.vivo-cabeza { background: var(--acento); color: var(--sobre-acento); padding: 22px 24px; }
.vivo-evento { font-size: 1.625rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.vivo-fecha { margin-top: 6px; font-size: 15px; font-weight: 500; }
.vivo-cuerpo { padding: 20px 24px 22px; }
.vivo-etiqueta { font-size: 14px; color: var(--tinta-2); }
.vivo-nombre { font-size: 1.375rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; color: var(--tinta-2); }
.vivo-nombre.lleno { color: var(--tinta); }
.vivo-lista { margin-top: 12px; font-size: 16px; }
.vivo-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.vivo-pie { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-top: 2px dashed var(--tono); }
.vivo-pie::before, .vivo-pie::after { content: ''; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--suelo); }
.vivo-pie::before { left: -13px; }
.vivo-pie::after { right: -13px; }
.vivo-total { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: transform var(--mover); }
.vivo-total.salta { transform: scale(1.06); }
.vivo-qr { display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; padding: 10px; background: var(--tono); font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--tinta-2); }
.vivo-col .btn { margin-top: 14px; }
.error { margin-top: 14px; padding: 12px 14px; background: #FBE6E1; color: #7A1D0A; font-weight: 600; border-radius: var(--radio); }

.barra-total { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none; align-items: center; justify-content: space-between; gap: 12px; background: var(--fondo-oscuro); color: #FFF; padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom)); }
.barra-total p { display: flex; flex-direction: column; font-size: 15px; line-height: 1.2; }
.barra-total strong { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Detalles */
.detalles { background: var(--fondo-oscuro); color: #FFF; padding: clamp(56px, 8vw, 128px) var(--margen); }
.detalles-rejilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); max-width: 1320px; margin: 0 auto; }
.detalles-fecha { font-size: clamp(2.25rem, 5vw, 4.75rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.detalles-lugar { margin: 14px 0 26px; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; }
.detalles-desc { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; margin-bottom: 26px; }
.detalles dl { display: grid; gap: 4px; }
.detalles dl div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 18px; background: #1B3044; }
.detalles dt { color: #C9D3DA; }
.detalles dd { font-weight: 700; text-align: right; }
.detalles h3 { font-size: 1.5rem; font-weight: 800; margin: 28px 0 12px; }

/* Preguntas */
.preguntas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 80px); max-width: 1400px; margin: 0 auto; padding: clamp(56px, 8vw, 128px) var(--margen); }
.preguntas-lista { display: grid; gap: 4px; }
.preguntas details { background: var(--papel); padding: 0 clamp(16px, 2vw, 26px); }
.preguntas summary { padding: 18px 0; font-size: 1.1875rem; font-weight: 700; cursor: pointer; }
.preguntas details p { padding: 0 0 20px; max-width: 62ch; }

/* Pie */
.pie { background: var(--acento); color: var(--sobre-acento); padding: clamp(40px, 6vw, 88px) var(--margen) clamp(24px, 3vw, 40px); }
.pie-nombre { font-size: clamp(2.5rem, 8vw, 8rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.pie-datos { margin-top: 18px; font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 600; }
.pie-org { margin-top: 8px; font-size: 15px; }

/* Pagina de la orden */
.orden { max-width: 1040px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--margen) clamp(56px, 7vw, 96px); }
.orden-cabeza h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.orden-lead { margin: 16px 0 24px; max-width: 42em; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.4; }
.boletos-lista { display: grid; gap: 24px; margin-top: 28px; }
.boleto { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); background: var(--papel); border-radius: var(--radio); }
.boleto-datos { padding: clamp(20px, 3vw, 36px); }
.boleto-evento { font-size: clamp(1.625rem, 3vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -.025em; color: var(--acento); }
.boleto-fecha { margin-top: 10px; font-weight: 500; line-height: 1.3; }
.boleto-nombre { margin-top: 18px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.boleto-titular { margin-top: 16px; }
.boleto-titular small { display: block; min-height: 20px; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--tinta-2); }
.boleto-tipo { margin-top: 6px; font-size: 1.1875rem; font-weight: 700; }
.boleto-nota { margin-top: 2px; font-size: 16px; }
.boleto-folio { margin-top: 12px; font-size: 15px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.boleto-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.boleto-talon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; border-left: 2px dashed var(--tono); text-align: center; font-size: 15px; font-weight: 500; }
.boleto-talon img { width: 100%; max-width: 240px; }
.boleto-talon::before, .boleto-talon::after { content: ''; position: absolute; left: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--suelo); }
.boleto-talon::before { top: -13px; }
.boleto-talon::after { bottom: -13px; }
.boleto-sello { color: #A02A0E; font-weight: 800; font-size: 1.125rem; }
.boleto-anulado { opacity: .75; }

.transferencia { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.cuenta { display: grid; gap: 4px; }
.cuenta div { display: grid; gap: 2px; background: var(--papel); padding: 14px 18px; }
.cuenta dt { font-size: 15px; color: var(--tinta-2); }
.cuenta dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.1875rem; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cuenta-folio { background: color-mix(in srgb, var(--acento) 10%, var(--papel)) !important; }
.cuenta-folio dd { font-size: 1.625rem; font-weight: 800; }
.copiar { flex: none; min-height: 40px; padding: 8px 14px; border: 0; border-radius: var(--radio); background: var(--tono); color: var(--tinta); font: 600 15px 'Archivo', sans-serif; cursor: pointer; transition: transform var(--mover); }
.copiar:active { transform: scale(.96); }
.transferencia-accion h2 { font-size: clamp(1.625rem, 2.4vw, 2.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; margin-bottom: 10px; }
.transferencia-accion p { margin-bottom: 18px; }
.transferencia-nota { margin-top: 18px; }
.tarjeta-demo { max-width: 520px; }
.tarjeta-demo .btn { margin-top: 20px; }

/* Entrada de cada bloque: el contenido ya esta visible sin JS */
.js .aparece { opacity: 0; transform: translateY(20px); transition: opacity 520ms cubic-bezier(.22, 1, .36, 1), transform 520ms cubic-bezier(.22, 1, .36, 1); transition-delay: var(--retraso, 0ms); }
.js .aparece.visto { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket-talon { border-left: 0; border-top: 2px dashed var(--tono); border-radius: 0 0 var(--radio) var(--radio); }
  .ticket-talon::before, .ticket-talon::after { top: -15px; bottom: auto; }
  .ticket-talon::before { left: -14px; }
  .ticket-talon::after { left: auto; right: -14px; }
  .compra-rejilla, .detalles-rejilla, .preguntas, .transferencia { grid-template-columns: 1fr; }
  .vivo-col { position: static; }
  .barra-total { display: flex; }
  .barra-total[hidden] { display: none !important; }
  .compra { padding-bottom: 96px; }
}
@media (max-width: 620px) {
  .barra-logo img { height: 48px; }
  .precio { grid-template-columns: minmax(0, 1fr) auto; }
  .contador { grid-column: 1 / -1; justify-self: end; }
  .campos { grid-template-columns: 1fr; }
  .boleto { grid-template-columns: 1fr; }
  .boleto-talon { border-left: 0; border-top: 2px dashed var(--tono); order: -1; }
  .boleto-talon::before, .boleto-talon::after { top: auto; bottom: auto; }
  .boleto-talon::before, .boleto-talon::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece { opacity: 1; transform: none; transition: none; }
  .btn, .contador button, .vivo-total, .copiar { transition: none; }
}
@media print {
  .barra, .pie, .boleto-acciones, .aviso-demo { display: none; }
  body { background: #FFF; }
}

/* Tarjeta aun no disponible (4-nov-2026) */
.pago-pronto { cursor: default; opacity: .6; }
.pago-pronto .pago-desc { font-style: italic; }