/* ==========================================================================
   PanaEventos — landing estática
   --------------------------------------------------------------------------
   Sin framework, sin build, sin npm. Todo lo que hace falta para publicar esta
   página es subir la carpeta a cualquier sitio que sirva archivos.

   Por qué CSS a mano y no Tailwind: Tailwind necesita un paso de compilación
   para generar sólo las clases usadas. La versión por CDN existe, pero mete
   ~100 KB de JavaScript que reescribe estilos en el navegador y provoca un
   parpadeo al cargar — justo lo que no quieres en una página cuyo único trabajo
   es causar buena impresión en los primeros dos segundos.

   UN SOLO TEMA
   Esta página es clara y sólo clara. Antes tenía un botón de sol/luna y el
   doble juego de tokens que eso obliga a mantener: cada color escrito dos
   veces, cada logo en dos versiones, cada contraste medido dos veces. Para un
   embudo de una sola pantalla eso es superficie que se rompe sin que nadie lo
   pida. El contraste lo dan las secciones negras (la banda, el cambio, el
   cierre y el pie), no un interruptor.

   PRIMERO EL MÓVIL
   Aquí casi todo el mundo llega desde un enlace en Instagram o reenviado por
   WhatsApp, o sea con el pulgar y con una sola mano. Tres reglas que gobiernan
   todo lo de abajo:
     · Nada que se toque mide menos de 44 px.
     · Todo `:hover` va dentro de `@media (hover: hover)`. En una pantalla
       táctil el hover se queda pegado después del toque y la página parece
       averiada; el feedback del dedo lo da `:active`, que sí se suelta.
     · Lo que se pega a un borde respeta `env(safe-area-inset-*)`.

   ORGANIZACIÓN
     1. Tokens (colores, tipografía, sombras)
     2. Reset y base
     3. Piezas reutilizables (botones, tarjetas, perforación)
     4. Secciones, en el mismo orden en que aparecen en el HTML
     5. La hoja de tres preguntas
     6. Responsive
     7. Accesibilidad y movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../media/fuentes/GeistVF.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../media/fuentes/GeistMonoVF.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Tipografía */
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Superficies y texto */
  --fondo: #ffffff;
  --fondo-2: #fafafa;
  --fondo-3: #f5f5f5;
  --tarjeta: #ffffff;
  --tinta: #0a0a0a; /* el negro de las secciones oscuras, en un solo sitio */
  --texto: #0a0a0a;
  --texto-2: #525252;
  --texto-3: #5f5f5f;
  --numero: #949494;
  --borde: rgba(0, 0, 0, 0.07);
  --borde-2: rgba(0, 0, 0, 0.12);

  /* Acentos */
  --azul: #2563eb;
  --azul-claro: #3b82f6;
  --indigo: #4f46e5;
  --violeta: #7c3aed;
  --violeta-marca: #6b21a8;
  --fucsia: #c026d3;
  --esmeralda: #059669;
  --teal: #0d9488;
  --ambar: #d97706;
  --naranja: #ea580c;
  --lima: #a3e635;
  --wa: #25d366; /* verde oficial de WhatsApp */
  --wa-hondo: #052e16;
  --wa-burbuja: #e3f7d3; /* el verde de los mensajes que envías tú */

  /* Sombras. Muy difusas y muy transparentes: una sombra que se nota es una
     sombra mal puesta. */
  --sombra-s: 0 2px 8px -2px rgba(15, 23, 42, 0.08);
  --sombra-m: 0 12px 32px -12px rgba(15, 23, 42, 0.18);
  --sombra-l: 0 24px 64px -24px rgba(15, 23, 42, 0.28);

  /* La curva de toda la página. Sale rápido y frena largo: es la que hace que
     una transición se sienta "cara" en vez de mecánica. */
  --curva: cubic-bezier(0.32, 0.72, 0, 1);

  --ancho: 1152px;
  --radio: 28px;

  /* Márgenes y alturas de sección fluidos. Un solo valor que va de móvil a
     escritorio sin escalones: los saltos bruscos entre breakpoints son lo que
     delata una página "adaptada" en vez de diseñada para las dos. */
  --margen: clamp(16px, 4.4vw, 24px);
  --seccion: clamp(64px, 8.5vw, 100px);

  /* Lo que hay que dejar libre abajo para que la barra de acción móvil no tape
     nada. Vale 0 en escritorio, donde la barra es una pastilla flotante. */
  --hueco-accion: 0px;
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;

  /* El corte horizontal va aquí, no sólo en `body`. Quien scrollea la página es
     el elemento `html`, así que un `overflow-x: hidden` puesto sólo en `body`
     no impide nada: en móvil los orbes del hero y el letrero deslizante se
     salen por la derecha y el dedo arrastra la página de lado.

     `clip` y no `hidden`: `hidden` convertiría `html` en un contenedor de
     scroll, y eso rompe `position: sticky` y el desplazamiento suave de los
     enlaces de ancla. `clip` recorta sin crear scroll. */
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* En móvil, cualquier toque pinta un rectángulo gris translúcido encima del
     elemento. Es el gesto que más delata que esto es una página web y no una
     aplicación. Lo quitamos y el feedback lo dan los `:active` de más abajo,
     que son inmediatos y del color que toca. */
  -webkit-tap-highlight-color: transparent;

  /* Una palabra larga —un correo, una URL pegada— ensancha su caja hasta
     sacarla de la pantalla en un móvil estrecho. */
  overflow-wrap: break-word;

  /* Aquí NO va `overflow-x: hidden`. Recortar en `body` lo convierte en
     contenedor de scroll —la especificación calcula el `overflow-y` como
     `auto` en cuanto el otro eje deja de ser `visible`—, y entonces la barra
     superior se pega a `body` en vez de a la ventana: al bajar se va con la
     página en lugar de quedarse arriba. El recorte horizontal está en `html`
     con `clip`, que no crea contenedor. */
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--azul);
  color: #fff;
}

/* Foco visible sólo con teclado. El ratón no lo necesita y afea los botones. */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. PIEZAS REUTILIZABLES
   ========================================================================== */

/* --- Tipografía de titulares ---------------------------------------------
   `font-weight: 900` con el tracking apretado. En pantallas grandes las letras
   de un titular enorme se separan visualmente solas; el tracking negativo las
   vuelve a juntar y el bloque se lee como una sola pieza.

   `text-wrap: balance` reparte las líneas para que no quede una huérfana de
   dos palabras al final. En móvil, donde un titular ocupa cuatro o cinco
   líneas, es la diferencia entre un bloque y un chorro de texto. Donde el
   navegador no lo soporta simplemente no pasa nada. */
.titular {
  font-size: clamp(1.85rem, 5.4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.titular--hero {
  font-size: clamp(2rem, 6.6vw, 4.25rem);
}

.titular--claro {
  color: #fff;
  margin-top: 16px;
}

/* Segunda línea del titular, pintada con un degradado. El texto es
   transparente y el degradado del fondo se ve a través de las letras. */
.degradado {
  display: block;
  background: linear-gradient(110deg, var(--azul) 0%, var(--indigo) 45%, var(--violeta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.degradado--verde {
  display: block;
  background: linear-gradient(110deg, var(--lima) 0%, var(--esmeralda) 50%, var(--azul-claro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.apagado {
  color: var(--texto-3);
}

/* Un emoji dentro de un titular de 900 y `letter-spacing: -0.035em`. Las dos
   cosas hay que deshacerlas aquí dentro: el tracking negativo le come el borde
   derecho al glifo —que es cuadrado, no una letra— y a tamaño completo pesa
   más que la frase que acompaña. A 0.8em queda como un guiño y no como un
   segundo titular. */
.titular__emote {
  display: inline-block;
  font-size: 0.8em;
  letter-spacing: normal;
  margin-left: 0.08em;
  vertical-align: baseline;
}

/* Fuerza el salto de línea. Sin esto la segunda mitad del titular se acomoda
   donde quepa, y donde quepa casi nunca es donde cambia el sentido de la
   frase. Sólo donde hace falta: "Seis herramientas. Una sola cuenta." cabe
   entera en una línea en escritorio y así se queda. */
.apagado--suelto {
  display: block;
}

/* Etiqueta pequeña en monoespaciada. Marca el inicio de cada sección. */
.rotulo {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--azul);
  font-weight: 500;
}

.entradilla {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: var(--texto-2);
  max-width: 46ch;
  margin-top: 20px;
}

/* --- Botones --------------------------------------------------------------
   El CTA principal es "botón dentro de botón": una cápsula grande con un disco
   más pequeño a la derecha. Al pasar el ratón la separación crece; el gesto
   sugiere movimiento hacia adelante sin animar nada más.

   Con el dedo no hay hover que valga, así que el botón se hunde un poco al
   tocarlo. Es el mismo gesto que hace un botón de una aplicación nativa y es
   lo que hace que responda "ya" en vez de "cuando cargue la página". */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  min-height: 52px;
  transition:
    transform 0.45s var(--curva),
    box-shadow 0.45s var(--curva),
    gap 0.45s var(--curva);
  white-space: nowrap;
  user-select: none;
}

.btn:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    gap: 16px;
  }
}

.btn__disco {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
}

.btn--wa {
  background: var(--wa);
  color: var(--wa-hondo);
  box-shadow: 0 12px 32px -12px rgba(37, 211, 102, 0.7);
}

.btn--wa .btn__disco {
  background: rgba(5, 46, 21, 0.14);
}

@media (hover: hover) {
  .btn--wa:hover {
    box-shadow: 0 20px 44px -14px rgba(37, 211, 102, 0.85);
  }
}

.btn--claro {
  background: var(--texto);
  color: var(--fondo);
  box-shadow: var(--sombra-m);
}

.btn--claro .btn__disco {
  background: rgba(255, 255, 255, 0.16);
}

/* Botón secundario: sólo borde. Existe para que el principal tenga con qué
   contrastar; si los dos pesan igual, ninguno es el principal. */
.btn--linea {
  background: transparent;
  border: 1px solid var(--borde-2);
  color: var(--texto);
  padding: 12px 24px;
}

@media (hover: hover) {
  .btn--linea:hover {
    border-color: var(--azul);
    color: var(--azul);
  }
}

/* El de la barra superior. Más bajo, pero nunca por debajo de 44 px: es el
   botón que más se toca de toda la página. */
.btn--sm {
  padding: 6px 6px 6px 18px;
  font-size: 14px;
  gap: 9px;
  min-height: 44px;
}

.btn--sm .btn__disco {
  width: 32px;
  height: 32px;
}

.btn-icono {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- Tarjeta de doble bisel ----------------------------------------------
   Una bandeja exterior translúcida con un núcleo dentro. El radio del núcleo
   es el de la bandeja menos su relleno, para que las dos curvas sean
   concéntricas: si no, la esquina se ve "pellizcada" y no se sabe por qué. */
.bandeja {
  padding: 6px;
  border-radius: var(--radio);
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid var(--borde);
  transition: transform 0.5s var(--curva);
}

@media (hover: hover) {
  .bandeja:hover {
    transform: translateY(-4px);
  }
}

.nucleo {
  background: var(--tarjeta);
  border-radius: calc(var(--radio) - 6px);
  padding: 24px;
  height: 100%;
}

/* --- Perforación de boleto ------------------------------------------------
   El motivo de identidad de la página: el troquelado de un boleto. Se repite
   entre secciones para que la página entera se lea como una tira de entradas.
   Son dos gradientes radiales, sin una sola imagen. */
.perforacion {
  position: relative;
  height: 28px;
  background: var(--fondo);

  /* Las muescas laterales van a caballo del borde: media circunferencia dentro
     y media fuera, que es lo que las hace parecer un troquel. Esa mitad de
     fuera suma 14 px al ancho del documento y en móvil el dedo arrastra la
     página de lado. Recortar aquí conserva el efecto —se sigue viendo la media
     luna en cada borde— y devuelve el ancho a su sitio. */
  overflow: hidden;
}

.perforacion::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--borde-2) 0 3px, transparent 3.5px);
  background-size: 18px 18px;
  background-position: center;
  background-repeat: repeat-x;
}

/* Las dos muescas laterales. Llevan el color de la sección siguiente para que
   parezca que la página está recortada, no pintada encima. */
.perforacion__muesca {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.perforacion__muesca--izq {
  left: -14px;
}

.perforacion__muesca--der {
  right: -14px;
}

/* --- Aparición al hacer scroll --------------------------------------------
   Va colgado de `.js`, que pone el script de la cabecera. Sin esa condición, un
   fallo del JavaScript dejaría media página en `opacity: 0` para siempre: el
   contenido estaría en el HTML pero nadie lo vería. Escondemos sólo cuando
   sabemos que alguien puede volver a mostrarlo. */
.js .aparece {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--curva),
    transform 0.7s var(--curva);
}

.js .aparece.visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   4. SECCIONES
   ========================================================================== */

/* --- 4.1 Barra superior --------------------------------------------------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--borde);

  /* En horizontal, la muesca del iPhone se come el borde izquierdo y el logo
     queda debajo. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
}

.barra__logo {
  display: block;
  flex-shrink: 0;
}

.barra__logo img {
  height: 32px;
  width: auto;
}

/* --- 4.2 Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
}

/* Rejilla técnica de fondo, desvanecida con una máscara radial. Da sensación
   de plano o mapa sin robarle atención a una sola palabra del titular. */
.hero__rejilla {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(to right, rgba(100, 116, 139, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, 0.16) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
}

/* Orbes de color muy desenfocados. Son los que dan el ambiente; sin ellos el
   hero es texto sobre blanco.

   El desenfoque se mide en píxeles y lo paga la GPU en cada fotograma de
   scroll. 100 px sobre un cuadrado de 620 en un teléfono de gama media es de
   lo más caro que hay en esta página, así que en móvil los orbes bajan de
   tamaño y de radio (ver la sección 6). Aquí van los valores de escritorio. */
.hero__orbe {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(100px);
  will-change: transform;
}

.hero__orbe--a {
  left: -160px;
  top: -10%;
  width: 620px;
  height: 620px;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.35) 0%,
    rgba(99, 102, 241, 0.18) 45%,
    transparent 72%
  );
}

.hero__orbe--b {
  right: -130px;
  bottom: -15%;
  width: 540px;
  height: 540px;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.3) 0%,
    rgba(99, 102, 241, 0.16) 45%,
    transparent 72%
  );
}

.hero__contenido {
  position: relative;
  z-index: 1;
}

/* Composición asimétrica: el texto manda y el boleto entra por la derecha. Un
   hero centrado con todo apilado es la forma por defecto y se olvida. */
.hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: center;
}

/* Las dos pastillas van en una fila que envuelve: en mono y con 0.18em de
   letra, juntas no caben en un teléfono, y partirse en dos líneas es
   preferible a encoger la letra o a acortar el texto. El margen inferior vive
   aquí y no en cada pastilla, que si no se cuenta dos veces al envolver. */
.hero__insignias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.hero__insignia {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  box-shadow: var(--sombra-s);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* El estado se pinta en esmeralda —el mismo verde del punto que late— para
   que se lea como un aviso vivo y no como una segunda etiqueta de adorno. */
.hero__insignia--pronto {
  color: var(--esmeralda);
  border-color: rgba(5, 150, 105, 0.32);
  background: rgba(5, 150, 105, 0.08);
}

.hero__bandera {
  font-size: 14px;
  line-height: 1;
}

/* --- Las siete capacidades del hero ---------------------------------------
   Dos columnas en escritorio y una en móvil. Siete elementos en dos columnas
   dejan un hueco al final de la segunda; cae abajo a la derecha, que es donde
   menos molesta y donde el ojo ya iba a salir. */
.hero__lista {
  display: grid;
  gap: 9px 22px;
  margin-top: 22px;
  max-width: 58ch;
}

.hero__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--texto-2);
}

.hero__lista strong {
  color: var(--esmeralda);
  font-weight: 700;
}

.hero__tic {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--esmeralda);
  background: color-mix(in srgb, var(--esmeralda) 13%, transparent);
}

.hero__tic svg {
  width: 11px;
  height: 11px;
}

@media (min-width: 721px) {
  .hero__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hero__acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.hero__nota {
  font-size: 13px;
  color: var(--texto-3);
  margin-top: 16px;
  max-width: 40ch;
}

/* --- El boleto de adorno --------------------------------------------------
   Inclinado y con sombra larga. Es lo único de la página que se entiende sin
   leer: en un segundo dice "esto vende entradas". */
.boleto {
  transform: rotate(3deg);
  transition: transform 0.7s var(--curva);
  box-shadow: var(--sombra-l);
  border-radius: 22px;
  overflow: hidden;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  max-width: 340px;
  margin-left: auto;
}

@media (hover: hover) {
  .boleto:hover {
    transform: rotate(0deg) translateY(-6px);
  }
}

.boleto__cabecera {
  background: linear-gradient(135deg, var(--azul) 0%, var(--indigo) 55%, var(--violeta) 100%);
  padding: 22px;
  color: #fff;
}

.boleto__marca {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
}

.boleto__nombre {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 8px;
  line-height: 1.15;
}

.boleto__lugar {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
}

.boleto__cuerpo {
  display: flex;
  gap: 18px;
  padding: 22px;
  align-items: flex-start;
  justify-content: space-between;
}

.boleto__dato + .boleto__dato {
  margin-top: 14px;
}

.boleto__etiqueta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.boleto__valor {
  font-size: 15px;
  font-weight: 600;
  margin-top: 2px;
}

.boleto__valor--precio {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--azul);
}

/* El QR: una rejilla de 8×8 pintada con `grid`, no una imagen. Pesa cero y se
   ve nítida en cualquier pantalla. */
.qr {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  padding: 6px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--borde);
}

.qr span {
  border-radius: 1px;
  background: transparent;
}

.qr span.on {
  background: #0a0a0a;
}

.boleto__pie {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px 20px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--esmeralda);
}

.punto-vivo {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--esmeralda);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.6);
  animation: latido 2.4s infinite;
}

@keyframes latido {
  0% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(5, 150, 105, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
  }
}

/* --- 4.3 Fila de capacidades del hero -------------------------------------
   Cuatro fichas, cada una con su propio color. Es lo único de la página que
   resume de un vistazo lo que hace el producto, así que se lee mejor como
   cuatro cosas distintas que como una tabla gris. */
.datos {
  margin-top: clamp(40px, 6vw, 64px);
  position: relative;
  z-index: 1;
}

.datos__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--borde);
  border-radius: calc(var(--radio) - 6px);
  overflow: hidden;
}

.dato {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 24px 12px;
  background: var(--tarjeta);
  background-image: linear-gradient(to bottom, var(--tinte, transparent) 0%, transparent 75%);
}

/* El `dd` mide lo que mide su contenido más ancho —el valor—, así que el chip,
   que es más estrecho y va a nivel de bloque, se quedaba pegado a su borde
   izquierdo mientras el valor sí se centraba. Centrarlo aquí y no con un
   `margin: auto` en el chip deja centrado cualquier cosa que se le meta
   después al `dd`, que en la ficha de cobros ya son tres logos. */
.dato dd {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dato__chip {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  margin-bottom: 12px;
  color: var(--color, var(--azul));
  background: color-mix(in srgb, var(--color, var(--azul)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color, var(--azul)) 22%, transparent);
}

.dato__chip svg {
  width: 19px;
  height: 19px;
}

/* Alto fijo para la fila del valor: sin él, la ficha de los logos es más alta
   que las de texto y las cuatro etiquetas de abajo dejan de estar a la misma
   altura, que es lo primero que delata una fila hecha a ojo. */
.dato__valor {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--color) 0%, var(--color-2, var(--color)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dato__etiqueta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-top: 8px;
  line-height: 1.4;
}

/* Las tres marcas de cobro. Fondo blanco fijo: los tres logos son de color y
   cada uno depende de su propio contraste — el azul de Visa sobre cualquier
   otra cosa deja de ser el azul de Visa. */
.pagos {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--sombra-s);
}

/* Yappy va más grande que las otras dos a propósito: es la que aquí decide la
   compra. Visa y Mastercard sólo tienen que estar. */
.pagos__yappy {
  height: 30px;
  width: auto;
}

.pagos__visa {
  height: 12px;
  width: auto;
}

.pagos__mc {
  height: 19px;
  width: auto;
}

.pagos__raya {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.1);
}

/* --- 4.4 Banda deslizante -------------------------------------------------
   Marquesina en CSS puro: la lista está duplicada y se desplaza un −50%, así
   que al terminar la primera copia la segunda está exactamente donde estaba la
   primera y el bucle no tiene costura. */
.banda {
  overflow: hidden;
  background: var(--tinta);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
  position: relative;
}

.banda__pista {
  display: flex;
  width: max-content;
  animation: marquesina 42s linear infinite;
}

@keyframes marquesina {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.banda__lista {
  display: flex;
  align-items: center;
}

.banda__lista li {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  color: #fafafa;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.banda__lista li::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--lima);
  transform: rotate(45deg);
}

/* Difuminado en los bordes: el texto no se corta de golpe, entra y sale. */
.banda::before,
.banda::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  z-index: 2;
  pointer-events: none;
}

.banda::before {
  left: 0;
  background: linear-gradient(to right, var(--tinta), transparent);
}

.banda::after {
  right: 0;
  background: linear-gradient(to left, var(--tinta), transparent);
}

/* --- 4.5 El cambio (antes / después) -------------------------------------- */
.cambio {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
  color: #fff;
  padding: var(--seccion) 0 calc(var(--seccion) + 12px);
}

.cambio__luz {
  position: absolute;
  inset: 0 0 auto 0;
  height: 500px;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 100% at 50% 0%,
    rgba(59, 130, 246, 0.14) 0%,
    transparent 70%
  );
}

.cambio__contenido {
  position: relative;
  z-index: 1;
}

.cambio .rotulo {
  color: #60a5fa;
}

.cambio .entradilla {
  color: #a3a3a3;
  max-width: 58ch;
}

.cambio__cabeceras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: clamp(40px, 6vw, 64px);
}

.cambio__cabecera {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #949494;
}

.cambio__cabecera--bien {
  color: var(--lima);
}

.cambio__par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.cambio__celda {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cambio__marca {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 3px;
}

.cambio__marca svg {
  width: 12px;
  height: 12px;
}

.cambio__marca--no {
  background: #262626;
  color: #737373;
}

.cambio__marca--si {
  background: var(--lima);
  color: var(--tinta);
}

.cambio__texto--antes {
  color: #8f8f8f;
  font-size: 15px;
}

.cambio__texto--despues {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

/* La tesis de la sección. Va grande y sola, después de las seis
   comparaciones: primero se demuestra y luego se concluye. */
.cambio__tesis {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #d4d4d4;
  max-width: 30ch;
  text-wrap: balance;
}

.cambio__tesis strong {
  color: #fff;
  font-weight: 700;
}

/* --- 4.6 Bento de capacidades --------------------------------------------- */
.bento {
  padding: var(--seccion) 0;
  background: var(--fondo);
}

.bento__grid {
  display: grid;
  /* `minmax(0, 1fr)` y no `1fr` a secas. El mínimo automático de una pista
     `1fr` es su `min-content`, así que basta un elemento rígido dentro de una
     celda —la maqueta del mapa, con sus asientos de ancho fijo— para que la
     pista crezca por encima de la rejilla y la página se desplace de lado en
     móvil. Con `minmax(0, …)` la pista puede encogerse y el recorte se decide
     dentro de la celda. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(36px, 5vw, 56px);
  align-items: start;
}

/* La celda del editor de mapas ocupa dos columnas y dos filas. Un bento con
   todas las celdas iguales es una cuadrícula; lo que lo hace un bento es que
   una pieza mande sobre las demás. */
.celda--grande {
  grid-column: span 2;
  grid-row: span 2;
}

.celda__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
}

.celda__icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  color: var(--color, var(--azul));
  background: color-mix(in srgb, var(--color, var(--azul)) 12%, transparent);
}

.celda__icono svg {
  width: 20px;
  height: 20px;
}

.celda__titulo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.celda__texto {
  font-size: 14px;
  color: var(--texto-2);
  margin-top: 12px;
}

.celda__marca {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--violeta-marca);
  background: color-mix(in srgb, var(--violeta) 12%, transparent);
  flex-shrink: 0;
}

/* La celda protagonista va en color sólido, no en blanco: es la forma más
   barata de decir "empieza por aquí" sin escribirlo. */
.celda--destacada .nucleo {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
  color: #fff;
}

.celda--destacada .celda__texto {
  color: rgba(255, 255, 255, 0.88);
  max-width: 52ch;
}

.celda--destacada .celda__icono {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.celda--destacada .celda__marca {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* --- Maqueta del editor de mapas -----------------------------------------
   Una sede dibujada con `grid`: escenario, filas de asientos y una leyenda de
   zonas. Enseñar la herramienta funciona mejor que describirla. */
.mapa {
  margin-top: 22px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.mapa__escenario {
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 7px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  margin-bottom: 16px;
}

.mapa__filas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mapa__fila {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.mapa__asiento {
  width: 16px;
  height: 13px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
}

.mapa__asiento--vip {
  background: #fbbf24;
}

.mapa__asiento--pref {
  background: #4ade80;
}

.mapa__asiento--vend {
  background: rgba(255, 255, 255, 0.14);
}

.mapa__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mapa__zona {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.mapa__punto {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* --- Maquetas pequeñas de las otras celdas -------------------------------- */
.maqueta {
  margin-top: 18px;
}

/* Staff: tres personas con su rol. */
.staff__fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  font-size: 12px;
}

.staff__fila + .staff__fila {
  margin-top: 7px;
}

.staff__inicial {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.staff__rol {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Puerta: el chip de "acceso válido". */
.valido {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--esmeralda) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--esmeralda) 26%, transparent);
}

.valido__marca {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--esmeralda);
  color: #fff;
  flex-shrink: 0;
}

.valido__marca svg {
  width: 13px;
  height: 13px;
}

.valido__texto {
  font-size: 12px;
  font-weight: 600;
}

.valido__codigo {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--texto-3);
}

/* Ventas: barras. Crecen al entrar en pantalla, con un retardo escalonado. */
.barras {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 68px;
}

.barras span {
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: var(--fondo-3);
  height: 0;
  transition: height 0.8s var(--curva);
}

.barras span:last-child {
  background: var(--azul);
}

/* Marketing: las semanas del plan. */
.plan__linea {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.plan__linea + .plan__linea {
  margin-top: 7px;
}

.plan__punto {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--violeta);
  flex-shrink: 0;
}

/* --- 4.7 Cómo funciona ---------------------------------------------------- */
.pasos {
  padding: var(--seccion) 0;
  background: var(--fondo-2);
  position: relative;
}

.pasos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(36px, 5vw, 56px);
  position: relative;
}

/* Línea de puntos que une los tres pasos. Detrás de las tarjetas, así que sólo
   asoma en los huecos: sugiere la secuencia sin dibujar flechas. */
.pasos__hilo {
  position: absolute;
  top: 58px;
  left: 12%;
  right: 12%;
  height: 1px;
  background-image: linear-gradient(to right, var(--borde-2) 50%, transparent 0%);
  background-size: 10px 1px;
  background-repeat: repeat-x;
}

.paso {
  position: relative;
  z-index: 1;
}

.paso__numero {
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--numero);
  line-height: 1;
}

.paso__titulo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 18px;
  line-height: 1.25;
}

.paso__texto {
  font-size: 14px;
  color: var(--texto-2);
  margin-top: 10px;
}

.paso__apunte {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}

/* El "y después". No es un cuarto paso, es la consecuencia de los tres, así
   que va con otra forma: banda ancha y sin número. */
.pasos__despues {
  margin-top: 20px;
  padding: clamp(22px, 3.5vw, 30px);
  border-radius: var(--radio);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(124, 58, 237, 0.07));
  border: 1px solid var(--borde);
}

.pasos__despues-titulo {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pasos__despues-texto {
  font-size: 15px;
  color: var(--texto-2);
  margin-top: 8px;
  max-width: 62ch;
}

.pasos__pie {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(32px, 4.5vw, 48px);
}

.pie__texto {
  font-size: 13px;
  color: var(--texto-3);
  max-width: 34ch;
}

/* --- 4.8 Precio -------------------------------------------------------------
   Un solo boleto sobre negro, partido por su troquel: el talón con la cifra y
   el resto con lo que incluye.

   Ningún token de borde o sombra del resto de la página sirve aquí.
   `--borde`, `--sombra-*` y la propia `.bandeja` están calibrados para
   tarjetas claras sobre fondo blanco, y un borde al 7% de negro es invisible
   sobre negro. Esta sección escribe sus grises a mano, igual que ya hacen
   `.cambio` y `.cierre` con los suyos. */
.precios {
  padding: var(--seccion) 0;
  background: var(--tinta);
  color: #fff;
}

.precios .rotulo {
  color: var(--lima);
}

.precios__entradilla {
  color: #a3a3a3;
  max-width: 54ch;
}

.precios__boleto {
  margin-top: clamp(36px, 5vw, 56px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

/* `overflow: hidden` es lo que convierte los dos círculos del troquel en
   medias lunas: se pintan a caballo del borde y la mitad de fuera se recorta
   contra el canto de la tarjeta. Sin esto son dos lunas enteras flotando. */
.precios__nucleo {
  background: #171717;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

/* El talón. `justify-content: center` lo centra contra la lista de al lado,
   que siempre es más alta. */
.precios__talon {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 40px) clamp(26px, 3.4vw, 40px);
  background: linear-gradient(160deg, rgba(163, 230, 53, 0.1) 0%, transparent 70%);
}

.precios__plan {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lima);
}

.precios__monto {
  font-size: clamp(3.6rem, 7vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-top: 10px;
  color: #fff;
}

.precios__periodo {
  font-size: 13px;
  color: #8f8f8f;
  margin-top: 6px;
}

/* La segunda mitad del precio. Va en línea propia y no pegada a `periodo`
   porque el talón no encoge: en una sola línea ensancharía la columna y le
   quitaría ancho a la lista de al lado. En lima, que es el color con el que
   la página marca lo que sí está incluido. */
.precios__cero {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--lima);
  margin-top: 4px;
}

/* El troquel. Una línea de guiones pintada con un degradado que se repite —el
   mismo truco que `.perforacion`, girado— y dos medias lunas en los extremos. */
.precios__troquel {
  position: relative;
  flex-shrink: 0;
  width: 2px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 55%, transparent 0);
  background-size: 2px 12px;
  background-repeat: repeat-y;
}

.precios__troquel::before,
.precios__troquel::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--tinta);
  transform: translateX(-50%);
}

.precios__troquel::before {
  top: -10px;
}

.precios__troquel::after {
  bottom: -10px;
}

/* Once líneas en una sola columna serían una tira muy larga al lado de un
   talón corto; en dos columnas la tarjeta queda cuadrada. */
.precios__lista {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  align-content: center;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 3.4vw, 40px);
}

.precios__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #d4d4d4;
}

.precios__tic {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--lima);
  color: var(--tinta);
}

.precios__tic svg {
  width: 9px;
  height: 9px;
}

/* La salida para quien se queda corto. Va en texto y no en botón a propósito:
   un segundo botón compitiendo aquí le quitaría peso al de la sección de
   cierre, que es el que de verdad tiene que tocarse. */
.precios__mas {
  margin-top: clamp(24px, 3.5vw, 32px);
  font-size: 14.5px;
  line-height: 1.6;
  color: #8f8f8f;
  max-width: 62ch;
}

.precios__enlace {
  color: var(--lima);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(163, 230, 53, 0.4);
  transition: text-decoration-color 0.35s var(--curva);
}

@media (hover: hover) {
  .precios__enlace:hover {
    text-decoration-color: var(--lima);
  }
}

/* --- 4.9 Cierre ----------------------------------------------------------- */
.cierre {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
  color: #fff;
  padding: var(--seccion) 0 calc(var(--seccion) + 12px);
  text-align: center;
}

.cierre__luz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 20% 0%, rgba(163, 230, 53, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 100%, rgba(59, 130, 246, 0.16) 0%, transparent 60%);
}

.cierre__contenido {
  position: relative;
  z-index: 1;
}

.cierre .rotulo {
  color: var(--lima);
}

.cierre__texto {
  color: #a3a3a3;
  font-size: clamp(0.95rem, 1.7vw, 1.0625rem);
  max-width: 52ch;
  margin: 20px auto 0;
}

.cierre__caja {
  max-width: 460px;
  margin: clamp(32px, 5vw, 44px) auto 0;
  text-align: left;
}

.cierre__caja .nucleo {
  background: #171717;
  padding: clamp(22px, 4vw, 30px);
}

.cierre__titulo {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cierre__detalle {
  color: #a3a3a3;
  font-size: 14px;
  margin-top: 10px;
}

.cierre__numero {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #fff;
  margin-top: 22px;
}

.cierre__boton {
  margin-top: 18px;
  width: 100%;
  justify-content: space-between;
}

.cierre__sello {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  color: #a3a3a3;
}

.cierre__sello svg {
  color: var(--lima);
  flex-shrink: 0;
}

.cierre__letra {
  color: #9a9a9a;
  font-size: 12px;
  margin-top: 32px;
}

/* --- 4.10 Pie ------------------------------------------------------------
   Negro, sin separador con la sección de cierre. Las dos son el mismo bloque
   de despedida; una línea entre ellas partiría el remate en dos. */
.pie {
  background: var(--tinta);
  color: #fff;
  padding: 8px 0 calc(36px + var(--hueco-accion) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pie__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 0;
}

.pie__logo img {
  height: 30px;
  width: auto;
}

.pie__enlaces {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pie__enlace {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 600;
  color: #d4d4d4;
  transition:
    color 0.35s var(--curva),
    border-color 0.35s var(--curva),
    background 0.35s var(--curva);
}

.pie__enlace:active {
  background: rgba(255, 255, 255, 0.08);
}

@media (hover: hover) {
  .pie__enlace:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
  }

  .pie__enlace--wa:hover {
    color: var(--wa);
    border-color: rgba(37, 211, 102, 0.45);
  }
}

.pie__firma {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #e5e5e5;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pie__legal {
  text-align: center;
  font-size: 12px;
  color: #737373;
  margin-top: 6px;
}

/* --- 4.11 Barra de acción -------------------------------------------------
   La red de seguridad: si alguien se convence a mitad de la página, no tiene
   que volver arriba a buscar dónde escribir.

   En escritorio es una pastilla flotante abajo a la derecha. En móvil es una
   barra a lo ancho pegada al borde inferior — la forma en que una aplicación
   pone su acción principal, y donde el pulgar ya está. */
.accion {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  transition:
    transform 0.5s var(--curva),
    opacity 0.4s var(--curva);
}

.accion__btn {
  box-shadow: 0 16px 40px -12px rgba(37, 211, 102, 0.75);
}

/* Se esconde mientras el hero está a la vista —ahí ya hay un CTA grande— y
   mientras la sección de cierre está en pantalla, donde taparía justo el botón
   al que queremos llevar a la gente. */
.accion.oculto {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}

/* ==========================================================================
   5. LA HOJA DE TRES PREGUNTAS
   --------------------------------------------------------------------------
   Lo que sale al tocar cualquier botón de WhatsApp. No es un formulario y no
   puede parecerlo: es una conversación que ya empezó y que va a seguir en el
   WhatsApp de la persona. De ahí que las burbujas de respuesta lleven el mismo
   verde que los mensajes que uno envía en WhatsApp — cuando se abre la
   aplicación, el hilo se siente continuado, no reiniciado.

   En móvil sube desde abajo y ocupa el ancho completo, como una hoja de
   acción nativa. En escritorio es un diálogo centrado.
   ========================================================================== */

.hoja {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hoja[hidden] {
  display: none;
}

.hoja__velo {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s var(--curva);
}

.hoja.abierta .hoja__velo {
  opacity: 1;
}

.hoja__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.5);

  /* `dvh` mide el alto que queda de verdad con la barra del navegador
     desplegada; `vh` mide el alto ideal y en móvil se pasa. La primera línea es
     para Safari anterior a 15.4, que no conoce `dvh` y se queda con `vh`. */
  max-height: 92vh;
  max-height: 92dvh;

  /* El relleno de la muesca inferior lo lleva `.hoja__pie`, que es el último
     hijo. Puesto también aquí se sumaría dos veces y quedaría una franja
     muerta debajo del botón. */

  transform: translateY(100%);
  transition: transform 0.42s var(--curva);
}

.hoja.abierta .hoja__panel {
  transform: none;
}

/* La pestañita de arriba. No hace nada: está para que se lea como una hoja que
   sube, que es exactamente lo que hace. */
.hoja__agarre {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--borde-2);
  margin: 10px auto 0;
  flex-shrink: 0;
}

.hoja__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}

.hoja__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--fondo-3);
  flex-shrink: 0;
  overflow: hidden;
}

.hoja__avatar img {
  width: 30px;
  height: auto;
}

.hoja__quien {
  min-width: 0;
  flex: 1;
}

.hoja__nombre {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hoja__estado {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--texto-3);
  margin-top: 1px;
}

.hoja__cerrar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--texto-3);
  flex-shrink: 0;
  transition: background 0.3s var(--curva);
}

.hoja__cerrar:active {
  background: var(--fondo-3);
}

@media (hover: hover) {
  .hoja__cerrar:hover {
    background: var(--fondo-3);
    color: var(--texto);
  }
}

/* El aviso. Es la pieza más importante de toda la hoja: la duda que hay que
   matar en el primer segundo es "¿me van a hacer registrarme?". */
.hoja__aviso {
  margin: 12px 18px 0;
  padding: 11px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--esmeralda) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--esmeralda) 22%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-2);
  flex-shrink: 0;
}

.hoja__aviso strong {
  color: var(--esmeralda);
  font-weight: 700;
}

.hoja__chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Sin esto, al llegar al final del chat el gesto sigue y arrastra la página
     de detrás. Es el fallo que hace que una hoja modal se sienta pegada con
     cinta adhesiva. */
  overscroll-behavior: contain;

  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.burbuja {
  max-width: 85%;
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.45;
  border-radius: 18px;
  animation: burbujea 0.32s var(--curva) both;
}

@keyframes burbujea {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

.burbuja--ellos {
  align-self: flex-start;
  background: var(--fondo-3);
  color: var(--texto);
  border-bottom-left-radius: 6px;
}

.burbuja--tu {
  align-self: flex-end;
  background: var(--wa-burbuja);
  color: #14361b;
  font-weight: 500;
  border-bottom-right-radius: 6px;
}

/* Los tres puntitos de "está escribiendo". Duran poco a propósito: el objetivo
   es que se sienta una conversación, no que se sienta lenta. */
.escribiendo {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  background: var(--fondo-3);
  border-radius: 18px 18px 18px 6px;
}

.escribiendo span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--numero);
  animation: puntea 1.1s infinite;
}

.escribiendo span:nth-child(2) {
  animation-delay: 0.15s;
}

.escribiendo span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes puntea {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* --- El pie de la hoja: opciones, campo libre o botón final --------------- */
.hoja__pie {
  border-top: 1px solid var(--borde);
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  background: var(--fondo-2);
  flex-shrink: 0;

  /* Mientras el equipo "escribe" aquí abajo sólo hay la barra de progreso. Sin
     un mínimo, el pie se encoge a nada y el panel entero da un salto hacia
     abajo con cada pregunta. Con esto se mueve, pero poco. */
  min-height: 92px;

  /* Sin redondear: en móvil el panel termina en el borde de la pantalla y unas
     esquinas curvas aquí dejarían asomar dos triángulos del fondo del panel.
     El redondeo de abajo se pone en escritorio, donde el panel flota. */
  border-radius: 0;
}

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: burbujea 0.3s var(--curva) both;
}

.opcion {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--borde-2);
  background: var(--tarjeta);
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  text-align: left;
  line-height: 1.3;
  transition:
    border-color 0.25s var(--curva),
    background 0.25s var(--curva),
    transform 0.15s var(--curva);
}

.opcion:active {
  transform: scale(0.96);
  background: var(--fondo-3);
}

@media (hover: hover) {
  .opcion:hover {
    border-color: var(--azul);
    color: var(--azul);
  }
}

.opcion--otro {
  border-style: dashed;
  color: var(--texto-3);
  font-weight: 500;
}

/* El campo libre que sale al elegir "otra cosa". */
.libre {
  display: flex;
  gap: 8px;
  align-items: center;
}

.libre__campo {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--borde-2);
  background: var(--tarjeta);
  font-family: var(--sans);

  /* 16 px justos, ni uno menos. Safari en iOS hace zoom automático sobre
     cualquier campo de menos de 16 px al enfocarlo, y de ahí ya no vuelve: la
     página se queda ampliada y descuadrada el resto de la visita. */
  font-size: 16px;
  color: var(--texto);
}

.libre__campo::placeholder {
  color: var(--numero);
}

.libre__campo:focus {
  outline: none;
  border-color: var(--azul);
}

.libre__enviar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--wa);
  color: var(--wa-hondo);
  flex-shrink: 0;
  transition: transform 0.15s var(--curva);
}

.libre__enviar:active {
  transform: scale(0.92);
}

.libre__enviar svg {
  width: 18px;
  height: 18px;
}

/* Barra de progreso: tres tramos, uno por pregunta. */
.progreso {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}

.progreso span {
  height: 3px;
  flex: 1;
  border-radius: 999px;
  background: var(--borde-2);
  transition: background 0.4s var(--curva);
}

.progreso span.hecho {
  background: var(--wa);
}

/* --- El remate: lo que se va a enviar ------------------------------------- */
.resumen {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--wa-burbuja);
  border: 1px solid rgba(37, 211, 102, 0.3);
  font-size: 13px;
  line-height: 1.55;
  color: #14361b;
  white-space: pre-line;
  margin-bottom: 12px;
  max-height: 132px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hoja__enviar {
  width: 100%;
  justify-content: space-between;
}

.hoja__atras {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-3);
  text-align: center;
  min-height: 44px;
}

@media (hover: hover) {
  .hoja__atras:hover {
    color: var(--texto);
  }
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

/* Escritorio: la hoja deja de ser una hoja y pasa a ser un diálogo centrado. */
@media (min-width: 721px) {
  .hoja {
    align-items: center;
    padding: 24px;
  }

  .hoja__panel {
    border-radius: 26px;
    max-height: 86vh;
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    transition:
      transform 0.35s var(--curva),
      opacity 0.25s var(--curva);
  }

  .hoja.abierta .hoja__panel {
    transform: none;
    opacity: 1;
  }

  .hoja__agarre {
    display: none;
  }

  .hoja__cabecera {
    padding-top: 18px;
  }
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .boleto {
    margin: 0 auto;
    max-width: 320px;
    transform: rotate(2deg);
  }

  .bento__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .celda--grande {
    grid-column: span 2;
    grid-row: span 1;
  }

  .pasos__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pasos__hilo {
    display: none;
  }

  /* El boleto se parte en horizontal: el talón arriba y lo que incluye
     debajo, que es exactamente por donde se rompe un boleto de verdad. El
     troquel gira con él y sus dos medias lunas pasan a los costados. */
  .precios__nucleo {
    flex-direction: column;
  }

  .precios__talon {
    align-items: center;
    text-align: center;
    padding-bottom: clamp(22px, 4vw, 30px);
    background: linear-gradient(180deg, rgba(163, 230, 53, 0.1) 0%, transparent 100%);
  }

  .precios__troquel {
    width: auto;
    height: 2px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.22) 55%, transparent 0);
    background-size: 12px 2px;
    background-repeat: repeat-x;
  }

  .precios__troquel::before,
  .precios__troquel::after {
    top: 50%;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
  }

  .precios__troquel::before {
    left: -10px;
  }

  .precios__troquel::after {
    right: -10px;
  }
}

@media (max-width: 720px) {
  /* La barra de acción pasa a ocupar el ancho completo abajo, así que hay que
     reservarle sitio al final de la página. Si no, tapa la firma del pie. */
  :root {
    --hueco-accion: 76px;
  }

  .accion {
    right: 0;
    left: 0;
    bottom: 0;
    padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--fondo) 88%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--borde);
  }

  .accion__btn {
    width: 100%;
    justify-content: space-between;
    box-shadow: none;
  }

  /* Los orbes desenfocados en móvil: más pequeños y con menos radio. Un
     `blur(100px)` sobre 620 px cuesta caro en cada fotograma de scroll y en un
     teléfono de gama media se nota en el arrastre. A este tamaño el ambiente
     es el mismo y el coste baja a la mitad. */
  .hero__orbe {
    filter: blur(64px);
  }

  .hero__orbe--a {
    left: -140px;
    width: 380px;
    height: 380px;
  }

  .hero__orbe--b {
    right: -120px;
    width: 320px;
    height: 320px;
  }

  .hero__rejilla {
    background-size: 56px 56px;
  }

  /* Las cabeceras "cómo se hace hoy / con PanaEventos" desaparecen al apilarse:
     cada celda ya lleva su icono y su color, y dos títulos flotando arriba
     dejarían de referirse a nada. */
  .cambio__cabeceras {
    display: none;
  }

  .cambio__par {
    grid-template-columns: 1fr;
    gap: 8px;
    border-top: none;
    padding: 0;
    margin-bottom: 14px;
  }

  .cambio__celda {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
  }

  .cambio__celda--si {
    border-color: rgba(163, 230, 53, 0.18);
    background: rgba(163, 230, 53, 0.05);
  }

  .cambio__tesis {
    max-width: none;
  }

  .datos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Aquí NO va `grid-column: span 2` en la ficha de cobros. Cuatro fichas con
     una que ocupa dos columnas son cinco casillas en una rejilla de dos: sobra
     un hueco, y como la de cobros es la segunda del HTML, el hueco cae justo al
     lado de la primera y parece un fallo de carga. Un 2×2 exacto no deja
     huecos; lo que se encoge son los logos. */
  .pagos {
    gap: 7px;
    padding: 5px 9px;
  }

  /* Cada logo baja en su misma proporción, no todos a la misma altura: Yappy
     sigue mandando sobre Visa y Mastercard, que es el orden que importa aquí. */
  .pagos__yappy {
    height: 22px;
  }

  .pagos__visa {
    height: 9px;
  }

  .pagos__mc {
    height: 14px;
  }

  .bento__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .celda--grande {
    grid-column: span 1;
  }

  /* Dos columnas de once líneas en un teléfono dejan renglones de tres
     palabras: se lee peor que en una sola columna larga. */
  .precios__lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  .nucleo {
    padding: 20px;
  }

  .mapa {
    padding: 14px;
  }

  .mapa__asiento {
    width: 13px;
    height: 11px;
  }

  /* Los dos botones del hero, uno encima del otro y a lo ancho: con el pulgar
     no hay puntería, y dos cápsulas de distinto ancho en la misma fila
     obligan a apuntar. */
  .hero__acciones {
    gap: 10px;
  }

  .hero__acciones .btn {
    width: 100%;
    justify-content: space-between;
  }

  .hero__acciones .btn--linea {
    justify-content: center;
  }

  .pasos__pie .btn {
    width: 100%;
    justify-content: space-between;
  }

  .pie__fila {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* El disco de la flecha en el botón de la barra: en pantallas de 360 px, el
     logo y el botón juntos no caben y el botón empuja al logo fuera. Se va la
     flecha, que es decoración; se quedan el icono y la palabra, que son lo que
     dice qué hace. */
  .btn--sm .btn__disco {
    display: none;
  }

  .btn--sm {
    padding: 6px 18px;
  }

  .barra__fila {
    height: 60px;
  }

  .barra__logo img {
    height: 28px;
  }

  .hero__insignias {
    margin-bottom: 20px;
  }

  .dato {
    padding: 20px 10px;
  }

  .pagos__yappy {
    height: 26px;
  }

  .banda__lista li {
    font-size: 14px;
    gap: 18px;
    padding: 0 18px;
  }

  .banda::before,
  .banda::after {
    width: 48px;
  }

  .paso__numero {
    font-size: 34px;
  }

  .cierre__caja .nucleo {
    padding: 20px;
  }

  .hoja__chat {
    padding: 14px;
  }

  .hoja__pie {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  }

  .burbuja {
    max-width: 90%;
  }
}

/* Móvil pequeño de verdad (iPhone SE y similares). Sólo se aprieta lo que
   realmente se sale; el resto ya escala solo con los `clamp()`. */
@media (max-width: 360px) {
  .opcion {
    width: 100%;
    font-size: 13.5px;
  }

  .boleto__cuerpo {
    gap: 12px;
  }

  .qr {
    width: 76px;
    height: 76px;
  }
}

/* Móvil en horizontal: la hoja no cabe en 92dvh de alto útil y el teclado se
   come el resto. Se pega a los bordes y el chat encoge. */
@media (max-height: 480px) and (max-width: 900px) {
  .hoja__panel {
    max-height: 100dvh;
    border-radius: 0;
  }

  .hoja__aviso {
    display: none;
  }
}

/* ==========================================================================
   7. MOVIMIENTO REDUCIDO
   Quien pidió menos movimiento en su sistema recibe la página quieta, no una
   página rota: todo aparece ya en su sitio.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .aparece {
    opacity: 1;
    transform: none;
  }

  .banda__pista {
    animation: none;
  }

  /* La hoja tiene que seguir apareciendo y desapareciendo aunque no se deslice:
     con la transición a cero, el `transform` salta directamente a su sitio. */
  .hoja__panel {
    transform: none;
    opacity: 1;
  }
}