/* Costa — tokens del sistema visual de APIE.
   Estrenado por las páginas institucionales de la fase 4, extendido a las
   siete páginas públicas menores en la 5a y a las dos que cobran en la 5b.
   El oro #F0C060 no vive aquí y no va a volver: la decisión de conservarlo
   como acento ceremonial se revirtió el 6 de agosto de 2026, y ninguna de las
   páginas armadas desde views/ lo trae ya. Donde sigue —el panel, monitor,
   scanner, los correos y el PDF del boleto— lo alcanza la fase 7. */

:root {
  --papel:  #EEF0EE;
  --arena:  #DED6C8;
  --acento: #1C6B7A;
  --tinta:  #0F2B33;
  --neutro: #7C8A8D;
  --linea:  rgba(15, 43, 51, .16);

  /* Costa no tiene rojo entre sus colores, pero el panel y el documento
     maestro sí necesitan marcar lo que urge. Va aquí, y no reescrito en cada
     hoja, porque ya se usa en dos. El claro es para fondo oscuro: el otro
     sobre tinta marina no se lee. */
  --alerta:       #8C2A22;
  --alerta-claro: #F0B7B0;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  --ancho: 68rem;
  --hueco: clamp(1.25rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Cifras tabulares en todo lo que sea precio o fecha: las columnas del
   registro solo se leen si los dígitos ocupan lo mismo. */
.registro-cifra, .registro-clave, time, .cifra {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: .18em; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--hueco); }

/* ── Navegación y pie ── */
.nav {
  border-bottom: 1px solid var(--linea);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.1rem 0;
}
.nav-marca {
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: .02em;
  color: var(--tinta); text-decoration: none;
}
.nav-enlaces { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.nav-enlaces a {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--neutro); text-decoration: none;
}
.nav-enlaces a:hover, .nav-enlaces a[aria-current='page'] { color: var(--acento); }

.pie {
  border-top: 1px solid var(--linea);
  margin-top: 4rem; padding: 2rem 0 3rem;
  font-size: .8rem; color: var(--neutro);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ── Tipografía de página ── */
.antetitulo {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--neutro); margin-bottom: .9rem;
}
.titular {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.1;
  letter-spacing: -.01em; max-width: 20ch;
}
.entrada {
  font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--tinta);
  max-width: 56ch; margin-top: 1.4rem;
}
.seccion { padding: 3.5rem 0; border-top: 1px solid var(--linea); }
.seccion-titulo {
  font-family: var(--serif); font-weight: 400; font-size: 1.6rem;
  margin-bottom: 1.5rem;
}
.prosa p { max-width: 62ch; margin-bottom: 1rem; }
.prosa p:last-child { margin-bottom: 0; }

.vacio { color: var(--neutro); font-style: italic; max-width: 56ch; }

/* ── Registro: la lista de eventos y el directorio ──
   Clave a la izquierda, filete entre filas, cifra alineada a la derecha. */
.registro { border-top: 1px solid var(--linea); }
.registro-fila {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: .4rem 1.5rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--linea);
}
.registro-clave { font-size: .82rem; color: var(--neutro); letter-spacing: .06em; }
.registro-cuerpo { min-width: 0; }
.registro-titulo {
  font-family: var(--serif); font-size: 1.28rem; line-height: 1.25;
  color: var(--tinta); text-decoration: none; display: inline-block;
}
a.registro-titulo:hover { color: var(--acento); }
.registro-meta { font-size: .85rem; color: var(--neutro); margin-top: .3rem; }
.registro-cifra { font-size: .85rem; color: var(--neutro); white-space: nowrap; }
.registro-accion { grid-column: 2 / -1; margin-top: .6rem; }

@media (max-width: 34rem) {
  .registro-fila { grid-template-columns: 1fr; }
  .registro-cifra { text-align: left; }
  .registro-accion { grid-column: 1 / -1; }
}

/* ── Botones ── */
.boton, .boton-fantasma {
  display: inline-block; padding: .62rem 1.3rem;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--acento);
  /* Pensados para <a>, pero varias páginas los usan en <button>: un <button>
     no hereda ni la fuente ni el cursor de mano por su cuenta. */
  font-family: inherit; cursor: pointer;
}
.boton { background: var(--acento); color: var(--papel); }
.boton:hover:not(:disabled) { background: var(--tinta); border-color: var(--tinta); }
.boton-fantasma { background: transparent; color: var(--acento); }
.boton-fantasma:hover:not(:disabled) { background: var(--arena); }
/* Un botón inactivo tiene que leerse inactivo antes de que alguien lo intente:
   en la página de compra, «Continuar» sin boletos elegidos —y toda la página
   con la venta suspendida— se veía idéntico al que sí funciona, y el clic
   silencioso se interpretaba como una falla del sitio. Pierde el acento y no
   responde al puntero ni al hover, incluso sobre la portada. */
.boton:disabled, .boton-fantasma:disabled,
.portada .boton:disabled, .portada .boton-fantasma:disabled {
  background: transparent; color: var(--neutro);
  border-color: var(--linea); cursor: not-allowed;
}

/* ── Tarjetas del directorio ── */
.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea);
}
.tarjeta { background: var(--papel); padding: 1.3rem; }
.tarjeta h3 { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; }
.tarjeta .agencia { font-size: .85rem; color: var(--neutro); margin-top: .2rem; }
.tarjeta .contacto { font-size: .82rem; margin-top: .7rem; }
.tarjeta .contacto a { display: block; }

/* ── Fotografía ── */
.hero { padding: 3.5rem 0 0; }
.hero-figura { margin-top: 2.5rem; background: var(--arena); }
.hero-figura img { display: block; width: 100%; height: auto; }

.galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .75rem; margin-top: 1.5rem;
}
.galeria img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; background: var(--arena); }

/* ── Formularios ──
   Vivían en el <style> de institucional.html. Suben aquí porque a partir de
   la fase 5a los comparten varias páginas. */
.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block; margin-bottom: .35rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--neutro);
}
.campo input, .campo textarea {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .55rem .7rem;
  border: 1px solid var(--linea); background: #fff; color: var(--tinta);
}
.campo textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus {
  outline: 2px solid var(--acento); outline-offset: -1px;
}
.ayuda { font-size: .78rem; color: var(--neutro); margin-top: .3rem; }

/* ── Tarjeta de resultado — las tres páginas de pago ──
   El estado se distingue por tres medios a la vez —tipografía, filete y color
   de acento—, no por un icono en un círculo oscuro: ese era un recurso de la
   estética que se retira. */
.resultado {
  max-width: 34rem; margin: 4rem auto; padding: 2.5rem;
  background: var(--papel); border: 1px solid var(--linea); border-top-width: 3px;
}
.resultado.exito  { border-top-color: var(--acento); }
.resultado.fallo  { border-top-color: var(--tinta); }
.resultado.espera { border-top-color: var(--neutro); }
.resultado-titulo {
  line-height: 1.2; margin-bottom: .9rem;
}
/* Éxito: llegada y acuse, la única que celebra — serif a tamaño de despliegue. */
.resultado.exito .resultado-titulo {
  font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--acento);
}
/* Fallo: instrucción, no lamento — neogrotesca de interfaz, peso firme, se lee rápido. */
.resultado.fallo .resultado-titulo {
  font-family: var(--sans); font-weight: 700; font-size: 1.15rem; color: var(--tinta);
}
/* Espera: provisional, un estado que se va a ir — mismo tamaño que fallo, más ligero y neutro. */
.resultado.espera .resultado-titulo {
  font-family: var(--sans); font-weight: 400; font-size: 1.15rem; color: var(--neutro);
}
.resultado-texto { color: var(--tinta); margin-bottom: 1.5rem; }
.resultado-acciones, .acciones { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* ── Nota o advertencia ── */
.nota {
  background: var(--arena); border-left: 3px solid var(--acento);
  padding: 1rem 1.2rem; font-size: .9rem; line-height: 1.7;
}

/* ── Agenda — el itinerario, en tratamiento Registro ── */
.agenda { border-top: 1px solid var(--linea); }
.agenda-bloque {
  display: grid; grid-template-columns: 7rem 1fr; gap: .3rem 1.5rem;
  align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid var(--linea);
}
.agenda-hora {
  font-size: .9rem; color: var(--acento);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.agenda-cuerpo { min-width: 0; }
.agenda-titulo { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; }
.agenda-desc { font-size: .88rem; color: var(--neutro); margin-top: .25rem; }
/* Etiqueta de un bloque de agenda: aparte del título, sobria, sin píldora. */
.agenda-etiqueta {
  display: block; font-family: var(--sans); font-size: .78rem;
  color: var(--acento); margin-bottom: .2rem;
}

@media (max-width: 34rem) {
  .agenda-bloque { grid-template-columns: 1fr; }
}

/* ── Fichas — las carpetas del kit de medios ── */
.fichas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea);
}
.ficha { background: var(--papel); padding: 1.4rem; }
.ficha-titulo { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; }
.ficha-desc { font-size: .87rem; color: var(--neutro); margin: .35rem 0 1rem; }
.ficha-marco { border: 1px solid var(--linea); margin-top: 1rem; }
.ficha-marco iframe { display: block; width: 100%; border: 0; }

/* La fila de acciones ya se define junto a .resultado-acciones: mismo cuerpo,
   dos nombres de clase que las páginas de compra y de pago usan por separado. */

/* ── Portada de registro alto — la página de evento ──
   Costa no cambia de idioma para vender: sube la voz. Mismos tokens y misma
   tipografía que el resto del sitio, con más escala y más aire, sobre la
   tinta marina del sistema en vez del negro que se retiró con el oro. */
.portada {
  background: var(--tinta); color: var(--papel);
  padding: clamp(3rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}
.portada a { color: var(--papel); }
.portada .antetitulo { color: rgba(238, 240, 238, .62); }
.portada-titular {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.05;
  letter-spacing: -.015em; max-width: 18ch;
}
.portada-dato {
  font-size: clamp(.95rem, 1.8vw, 1.08rem); color: rgba(238, 240, 238, .78);
  margin-top: 1.6rem;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
/* El botón de acento se lee mal sobre tinta: sobre portada se invierte. */
.portada .boton { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.portada .boton:hover:not(:disabled) { background: var(--arena); border-color: var(--arena); }
.portada .boton-fantasma { color: var(--papel); border-color: rgba(238, 240, 238, .5); }
.portada .boton-fantasma:hover:not(:disabled) { background: rgba(238, 240, 238, .12); }

/* ── Cuenta regresiva ──
   Cifras tabulares para que los números no bailen al pasar de 09 a 10. */
.cuenta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2rem; }
/* La etiqueta vive dentro del bloque que se oculta junto con las cifras: sin
   fecha que contar, un «El evento comienza en» sobre un reloj a ceros anuncia
   un evento que empieza en este instante. */
.cuenta-etiqueta {
  margin-top: 2rem; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--neutro);
}
.portada .cuenta-etiqueta { color: rgba(238, 240, 238, .62); }
.cuenta-etiqueta + .cuenta { margin-top: .7rem; }
.cuenta-bloque { min-width: 3.6rem; }
.cuenta-num {
  display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.cuenta-unidad {
  display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--neutro); margin-top: .35rem;
}
.portada .cuenta-unidad { color: rgba(238, 240, 238, .62); }

/* ── Zonas, en tratamiento Registro ──
   La misma retícula que la cartelera y la agenda: clave a la izquierda,
   filete entre filas, precio en cifras tabulares. Lo que se fue con el oro
   fueron los iconos de gema y la estética dorada de las tarjetas, no los
   nombres: «Zona Oro», «Zona Platino» y «Zona Diamante» son los nombres
   reales de las zonas, cuyas claves son general, preferencial y vip. */
.zonas { border-top: 1px solid var(--linea); }
.zona-fila {
  display: grid; grid-template-columns: 8rem 1fr auto;
  gap: .5rem 1.5rem; align-items: baseline;
  padding: 1.6rem 0; border-bottom: 1px solid var(--linea);
}
.zona-clave { font-size: .82rem; color: var(--neutro); letter-spacing: .06em; }
.zona-cuerpo { min-width: 0; }
.zona-nombre { font-family: var(--serif); font-size: 1.28rem; line-height: 1.25; }
.zona-etiqueta {
  display: block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento); margin-bottom: .2rem;
}
.zona-benef { font-size: .87rem; color: var(--neutro); margin-top: .5rem; }
.zona-benef li { margin-top: .2rem; }
.zona-precio {
  font-size: 1.15rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.zona-fila.agotada { opacity: .5; }
.zona-fila.agotada .zona-cantidad { display: none; }

/* Selector de cantidad */
.zona-cantidad {
  grid-column: 2 / -1; margin-top: .9rem;
  display: flex; align-items: center; gap: .8rem;
}
.cantidad-btn {
  width: 2rem; height: 2rem; font: inherit; font-size: 1rem; line-height: 1;
  border: 1px solid var(--acento); background: transparent; color: var(--acento);
  cursor: pointer;
}
.cantidad-btn:hover:not(:disabled) { background: var(--arena); }
.cantidad-btn:disabled { opacity: .35; cursor: default; }
.cantidad-num {
  min-width: 1.6rem; text-align: center; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}

@media (max-width: 34rem) {
  .zona-fila { grid-template-columns: 1fr; }
  .zona-precio { text-align: left; }
  .zona-cantidad { grid-column: 1 / -1; }
}

/* ── Resumen de orden ── */
.resumen { background: var(--arena); padding: 1.4rem; margin-top: 2rem; }
.resumen-linea {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; font-size: .92rem;
}
.resumen-linea .cifra {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.resumen-linea.total {
  border-top: 1px solid var(--linea); margin-top: .5rem; padding-top: .8rem;
  font-size: 1.1rem;
}
.resumen-nota { font-size: .78rem; color: var(--neutro); margin-top: .6rem; }

/* ── Diálogo — los datos del comprador ──
   Los campos de dentro son los .campo que ya existen desde la 5a. */
.dialogo-fondo {
  position: fixed; inset: 0; background: rgba(15, 43, 51, .55);
  display: none; align-items: center; justify-content: center;
  padding: 1rem; z-index: 50;
}
.dialogo-fondo.abierto { display: flex; }
.dialogo {
  background: var(--papel); border: 1px solid var(--linea);
  width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto;
}
.dialogo-cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--linea);
}
.dialogo-cabeza h2 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }
.dialogo-cuerpo { padding: 1.4rem; }
.dialogo-cerrar {
  font: inherit; font-size: 1.3rem; line-height: 1;
  background: none; border: 0; color: var(--neutro); cursor: pointer;
}
.dialogo-cerrar:hover { color: var(--tinta); }