/**
 * Landing de alta de Itadaki.
 *
 * Fondo oscuro cálido, no crema: es el marrón casi negro del diseño, con el
 * mismo terracota de marca que usan las apps. Tierra y brasa, no azul de
 * software.
 */

:root {
  /* Fondos: marrón muy oscuro, nunca gris azulado. */
  --fondo: oklch(17% 0.012 55);
  --fondo-alt: oklch(20% 0.014 55);
  --carta: oklch(23% 0.014 55);
  --carta-alta: oklch(26% 0.014 55);
  --borde: oklch(32% 0.014 55);

  /* Tinta clara sobre oscuro. */
  --tinta: oklch(94% 0.008 80);
  --tinta-media: oklch(76% 0.01 70);
  --tinta-suave: oklch(62% 0.012 65);

  /* El terracota de marca, subido para que respire sobre el oscuro. */
  --acento: oklch(70% 0.15 45);
  --acento-fuerte: oklch(76% 0.15 45);
  --acento-hondo: oklch(32% 0.08 45);

  --ok: oklch(70% 0.13 150);

  --r-pill: 100px;
  --r-carta: 16px;
  --r-chip: 10px;

  --display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --texto: 'Onest', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Primer tabulador: derecho al formulario. */
.saltar {
  position: absolute;
  left: -9999px;
  background: var(--acento);
  color: var(--fondo);
  padding: 0.8rem 1.2rem;
  border-radius: 0 0 var(--r-chip) 0;
  font-weight: 700;
  z-index: 100;
}
.saltar:focus { left: 0; top: 0; }

.ancho { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }
.ancho.angosto { max-width: 760px; }

/* ── Barra ── */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1.25rem, 4vw, 3rem);
  background: color-mix(in oklab, var(--fondo) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.marca {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

/* ── Botones ── */
.btn {
  display: inline-block;
  padding: 0.95rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-carta);
  font-family: var(--texto);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.btn.chico { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.btn.ancho-total { width: 100%; }

.btn-acento {
  background: var(--acento);
  color: oklch(20% 0.03 45);
}
.btn-acento:hover { background: var(--acento-fuerte); transform: translateY(-1px); }

.btn-borde {
  border-color: var(--borde);
  background: transparent;
  color: var(--tinta);
}
.btn-borde:hover { border-color: var(--tinta-suave); }

/* ── Hero ── */
.hero {
  padding: clamp(3rem, 9vh, 6rem) 0 clamp(3rem, 7vh, 4.5rem);
  border-bottom: 3px solid var(--acento);
}

/* Una columna centrada: la marca arriba, el título grande, y nada al costado
   que le compita la mirada. */
.hero-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* La marca es lo primero y lo más grande. En la esquina de la barra competía
   con el botón y no la miraba nadie. */
.marca-hero {
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 13vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--tinta);
}

/* En la barra queda chica y en segundo plano: ya se leyó grande arriba. */
.marca.chica { font-size: 0.95rem; opacity: 0.55; }

/* El título entra palabra por palabra: el retardo lo pone el script, para no
   escribir una regla por cada una. */
.hero-titulo {
  margin: 0 0 1.5rem;
  max-width: 20ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--tinta-media);
}

/*
 * Sólo la palabra se anima, y el espacio queda afuera.
 *
 * Animar letra por letra obligaba a reconstruir el espacio a mano entre
 * elementos inline-block, y el navegador lo colapsaba: el título se leía
 * "Elpedidollegaalacocina".
 */
/*
 * Visible por defecto: la animación sólo la activa el script.
 *
 * Arrancar en opacity 0 dejaba el título invisible si el JavaScript no
 * llegaba a correr — y un titular que no se ve es peor que uno sin animación.
 */
.palabra { display: inline-block; }

.hero-titulo.anima .palabra {
  opacity: 0;
  transform: translateY(0.3em);
  animation: entrar-letra 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes entrar-letra {
  to { opacity: 1; transform: none; }
}

.hero-lede {
  margin: 0 0 2rem;
  max-width: 30ch;
  font-size: clamp(1.02rem, 2vw, 1.15rem);
  color: var(--tinta-media);
}

.acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.acciones.centradas { justify-content: center; }

/* La comanda que se arma, arriba a la derecha. */
.flotante {
  align-self: start;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-carta);
  background: var(--carta);
}
.flotante-linea { margin: 0.1rem 0; font-size: 0.92rem; color: var(--tinta); }

.micro {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.micro.fuerte { margin: 0.75rem 0 0; color: var(--tinta-media); }
.micro.acento { color: var(--acento); }

/* ── La demo del pedido viajando ── */
.demo {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding: 1.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-carta);
  background: var(--fondo-alt);
}
@media (min-width: 620px) {
  .demo { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
}

.demo-pausa {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--carta-alta);
  color: var(--tinta-media);
  font-size: 0.8rem;
  cursor: pointer;
}

.demo-lado { min-width: 0; }

.demo-fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.92rem;
  color: var(--tinta);
}
.demo-fila b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tinta-media); }

.demo-enviar {
  margin-top: 0.8rem;
  padding: 0.55rem;
  border-top: 1px solid var(--borde);
  border-radius: var(--r-chip);
  background: var(--acento-hondo);
  color: var(--acento);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  transition: background 0.2s ease;
}
.demo-enviar.tocado { background: var(--acento); color: oklch(20% 0.03 45); }

/* El hilo por el que viaja el pedido de un lado al otro. */
.demo-hilo {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 2.5rem;
  height: 1px;
  background: var(--borde);
}
.demo-punto {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acento);
  opacity: 0;
}
.demo-punto.viaja { animation: viajar 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes viajar {
  from { left: 0; opacity: 1; }
  to { left: calc(100% - 7px); opacity: 1; }
}

/* Un @keyframes no puede vivir dentro de un @media: rompe el parser y el
   navegador descarta TODO lo que sigue en la hoja. Va afuera. */
@keyframes viajar-y {
  from { top: 0; left: -3px; opacity: 1; }
  to { top: calc(100% - 7px); left: -3px; opacity: 1; }
}

@media (max-width: 619px) {
  .demo-hilo { width: 1px; height: 2rem; }
  .demo-punto.viaja { animation: viajar-y 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
}

.demo-ticket {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-chip);
  background: var(--carta);
  font-size: 0.9rem;
  opacity: 0.25;
  transition: opacity 0.4s ease, border-color 0.4s ease;
}
.demo-ticket.llego { opacity: 1; border-color: var(--acento); }
.demo-ticket p { margin: 0.1rem 0; color: var(--tinta); }
.demo-ticket-cab {
  font-weight: 700;
  color: var(--acento) !important;
  font-variant-numeric: tabular-nums;
}

/* ── Secciones ── */
.seccion { padding: clamp(3.5rem, 10vh, 6.5rem) 0; }
.seccion.sunken { background: var(--fondo-alt); }

.numero {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.titulo.centrado { text-align: center; margin-left: auto; margin-right: auto; max-width: 18ch; }
.centrado-txt { text-align: center; margin-left: auto; margin-right: auto; }

.titulo {
  margin: 0 0 2.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--tinta);
}

.lede { margin: 0 0 1.5rem; color: var(--tinta-media); }
.lede-col { margin: 0; font-size: 1.05rem; color: var(--tinta-media); }

.nota { margin: 1.5rem 0 0; font-size: 0.88rem; color: var(--tinta-suave); }
.nota.sin-margen { margin: 0 0 0.85rem; }
.nota.centrada { text-align: center; }
.nota a { color: var(--tinta-media); }

strong { color: var(--tinta); font-weight: 700; }

/* ── Tarjetas ── */
.tarjetas { display: grid; gap: 1rem; }
@media (min-width: 700px) {
  .tarjetas.tres { grid-template-columns: repeat(3, 1fr); }
  .tarjetas.dos { grid-template-columns: repeat(2, 1fr); }
  /* Dos y dos: con tres arriba y una sola abajo queda un hueco que se lee
     como algo que falta. */
  .tarjetas.cuatro { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .tarjetas.cuatro { grid-template-columns: repeat(4, 1fr); }
}

.tarjeta {
  padding: 1.5rem;
  border-radius: var(--r-carta);
  background: var(--carta);
  transition: transform 0.18s ease;
}
.tarjeta:hover { transform: translateY(-3px); }
.tarjeta.chica { padding: 1.1rem 1.25rem; }

.tarjeta h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--tinta);
}
.tarjeta.chica h3 { font-size: 0.9rem; }
.tarjeta p { margin: 0; font-size: 0.93rem; color: var(--tinta-media); }
.tarjeta.chica p { font-size: 0.88rem; }

.dos-col { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
@media (min-width: 840px) {
  .dos-col { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .dos-col .titulo { margin-bottom: 0; }
}

/* ── Piezas ── */
.pieza {
  display: grid;
  gap: 1.75rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--borde);
}
@media (min-width: 860px) {
  .pieza { grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
  .pieza.invertida .pieza-texto { grid-column: 2; }
  .pieza.invertida .pieza-demo { grid-column: 1; grid-row: 1; }
  .pieza.sola { grid-template-columns: 1fr; }
}

.pieza h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tinta);
}
.pieza p { margin: 0; color: var(--tinta-media); }
.ancho-texto { max-width: 62ch; }

/* ── El timbre, tocable de verdad ── */
.timbre { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.timbre-btn {
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-chip);
  background: var(--carta);
  color: var(--tinta);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

/* Verde es "lo pediste"; gris apagado es "ahora no se puede". Los dos estados
   se separan a propósito: compartir color hacía ver lo bloqueado como hecho. */
.timbre-btn.pedido {
  border-color: var(--ok);
  background: color-mix(in oklab, var(--ok) 22%, transparent);
  color: var(--tinta);
}
.timbre-btn.bloqueado {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ── Antes / después ── */
.comparar {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--r-carta);
  background: var(--carta);
  min-height: 200px;
}
.comparar-cara { padding: 1.1rem 1.25rem; }
.comparar-cara.despues {
  position: absolute;
  inset: 0;
  background: var(--carta);
  clip-path: inset(0 0 0 45%);
}

.barras { display: grid; gap: 0.4rem; margin-top: 0.75rem; }
.barras.densas { grid-template-columns: repeat(4, 1fr); }
.barras.sueltas { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.barras i {
  display: block;
  height: 18px;
  border-radius: 5px;
  background: var(--acento-hondo);
}
.barras.sueltas i { height: 30px; background: color-mix(in oklab, var(--acento) 30%, transparent); }

.comparar-slider { width: 100%; margin-top: 0.85rem; accent-color: var(--acento); }

/* ── Números del panel ── */
.numeros {
  display: grid;
  gap: 1.25rem 2rem;
  margin-top: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .numeros { grid-template-columns: repeat(3, 1fr); } }

.dato b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.dato b.chico { font-size: 1rem; font-family: var(--texto); }
.dato .micro { margin: 0.2rem 0 0; }

/* ── Lo que viene ── */
.viene { padding-top: 2.5rem; border-top: 1px solid var(--borde); }
.viene .micro { margin-bottom: 1rem; }

/* Punteado y sin el verde de "listo": esto todavía no anda, y un botón que
   promete y no hace es peor que no tenerlo. */
.tarjeta.punteada {
  border: 1px dashed var(--borde);
  background: transparent;
}
.tarjeta.punteada:hover { transform: none; }

.chapa {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-pill);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ── Los 30 días ── */
.dias { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }

.dia {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--r-carta);
  background: var(--carta);
}
@media (min-width: 620px) { .dia { grid-template-columns: 5.5rem 1fr; align-items: baseline; } }

.dia-n {
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.dia p { margin: 0; font-size: 0.95rem; color: var(--tinta-media); }

/* El día 31 desarma la desconfianza: misma calma que los otros. */
.dia.final { background: var(--carta-alta); }

/* ── Formulario ── */
#alta { scroll-margin-top: 4.5rem; }

.form { display: grid; gap: 1rem; margin-top: 2rem; }
.campo { display: grid; gap: 0.35rem; }
.campo > span { font-size: 0.85rem; font-weight: 700; color: var(--tinta); }
.campo > span i { font-style: normal; font-weight: 400; color: var(--tinta-suave); }

.campo input {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-chip);
  background: var(--carta);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  min-height: 48px;
}
.campo input::placeholder { color: var(--tinta-suave); }
.campo input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.error { display: none; font-size: 0.8rem; font-style: normal; color: var(--acento); }
.campo.mal input { border-color: var(--acento); }
.campo.mal .error { display: block; }

.listo {
  margin: 2rem 0 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--ok);
  border-radius: var(--r-carta);
  background: color-mix(in oklab, var(--ok) 15%, transparent);
  font-size: 0.95rem;
}

/* ── Preguntas ── */
.pregunta { border-bottom: 1px solid var(--borde); }

.pregunta summary {
  padding: 1.1rem 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::before { content: '▸ '; color: var(--tinta-suave); }
.pregunta[open] summary::before { content: '▾ '; }

.pregunta p { margin: 0 0 1.2rem; font-size: 0.93rem; color: var(--tinta-media); }

/* ── Pie ── */
.pie { padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--borde); }
.pie-nota { margin: 0 0 1rem; font-size: 0.9rem; color: var(--tinta-suave); }
.pie-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pie-links a { color: var(--acento); font-size: 0.9rem; text-decoration: none; }
.pie-links a:hover { text-decoration: underline; }
.pie-wa { font-weight: 700; }

/* Todo lo animado acá es decorativo: con esto activado, aparece quieto. */
@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;
  }
}

/*
 * Las pantallas del producto, dibujadas.
 *
 * Una tarjeta con tres líneas de texto explica; una que muestra la pantalla se
 * entiende antes de leerla. Van en HTML y no como imagen: pesan nada, se ven
 * nítidas en cualquier pantalla y no hay que rehacerlas cuando cambia un color.
 */
.pantalla-demo { display: flex; flex-direction: column; }

.mini {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  padding: 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-chip);
  background: var(--fondo);
  min-height: 118px;
  align-content: start;
}

.mini-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--tinta-media);
}
.mini-fila b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }

.mini-foto {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--acento-hondo);
  flex-shrink: 0;
}

.mini-txt {
  height: 7px;
  width: 5.5rem;
  border-radius: 3px;
  background: var(--carta-alta);
}
.mini-txt.corto { width: 3.5rem; }

.mini-cta {
  margin-top: 0.35rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--acento-hondo);
  color: var(--acento);
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
}

.mini-ticket,
.mini-mesa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--borde);
  border-radius: 0 6px 6px 0;
  background: var(--carta);
  font-size: 0.7rem;
  color: var(--tinta-media);
}
.mini-ticket b,
.mini-mesa b { color: var(--tinta); font-size: 0.72rem; }
.mini-ticket span { font-variant-numeric: tabular-nums; }

/* La que espera hace rato, en rojo: es lo que el borde existe para mostrar. */
.mini-ticket.urgente { border-left-color: oklch(58% 0.19 25); }
.mini-ticket.urgente span { color: oklch(70% 0.17 25); }
.mini-mesa.llama { border-left-color: var(--acento); }
.mini-mesa.llama span { color: var(--acento); }

/*
 * El número antes del texto.
 *
 * "24 → 8" dice el beneficio sin una frase: son los viajes al salón que se
 * ahorran. Quien está decidiendo si probarlo mira números, no párrafos.
 */
.cifra {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/*
 * El botón de WhatsApp, flotando.
 *
 * Quien quiere preguntar algo no debería tener que buscar dónde: la duda
 * aparece leyendo cualquier sección, no al final. Verde de WhatsApp a
 * propósito — es el color que la gente ya reconoce sin leer el botón.
 */
.wa-flota {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem 0.9rem 1.1rem;
  border-radius: var(--r-pill);
  background: #25d366;
  color: #0b3d1f;
  font-family: var(--texto);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px oklch(20% 0.02 60 / 0.55), 0 0 0 0 rgb(37 211 102 / 0.5);
  animation: wa-entra 500ms cubic-bezier(0.16, 1, 0.3, 1) 900ms backwards,
    wa-pulso 3.2s ease-out 2s infinite;
}

.wa-flota:hover {
  background: #1fbe5a;
  transform: translateY(-2px);
  animation-play-state: paused;
}

/* Entra después de la primera pantalla: apenas se abre la página compite con
   el titular, que es lo que tiene que leerse primero. */
@keyframes wa-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* Un anillo que se expande y se apaga: llama la atención sin moverse de lugar,
   que es lo que marea. */
@keyframes wa-pulso {
  0% { box-shadow: 0 10px 30px oklch(20% 0.02 60 / 0.55), 0 0 0 0 rgb(37 211 102 / 0.55); }
  70% { box-shadow: 0 10px 30px oklch(20% 0.02 60 / 0.55), 0 0 0 18px rgb(37 211 102 / 0); }
  100% { box-shadow: 0 10px 30px oklch(20% 0.02 60 / 0.55), 0 0 0 0 rgb(37 211 102 / 0); }
}

.wa-icono { display: flex; }

/* En un teléfono queda sólo el ícono: el texto tapaba media pantalla. */
@media (max-width: 560px) {
  .wa-flota { padding: 1rem; right: 1rem; bottom: 1rem; }
  .wa-texto { display: none; }
}

/*
 * La salida para quien prefiere hablar antes de dejar sus datos.
 *
 * Separada del formulario con una línea: son dos caminos al mismo lugar, no
 * una aclaración al pie de uno.
 */
.o-bien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--borde);
  text-align: center;
}

.o-bien-linea {
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

/* Un botón y no un enlace más: escribir por WhatsApp es una de las dos formas
   de contactarnos, no una nota al pie. */
.wa-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--r-pill);
  background: #25d366;
  color: #0b3d1f;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.wa-inline:hover { background: #1fbe5a; }

/* En el pie, el mismo verde para que se reconozca sin leerlo. */
.pie-wa {
  color: #25d366 !important;
  font-weight: 700;
}

/* El panel del dueño: los números del turno y las horas que se llenan. */
.mini-panel { gap: 0.55rem; }

.mini-dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.mini-dato b {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.mini-dato span {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* Las barras de la hora pico: la más alta en acento, que es lo que se mira. */
.mini-barras {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  height: 34px;
  margin-top: 0.15rem;
}

.mini-barras i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--acento-hondo);
}

.mini-barras i.pico { background: var(--acento); }

/* ═══ PLANES ═══ */

/*
 * Dos tarjetas, y una manda.
 *
 * La de la prueba está primero porque es por donde todos entran, pero la que
 * pesa es la de pago: es la decisión que la página vino a pedir. Sin esa
 * diferencia las dos se leen como alternativas iguales, y la gratis gana
 * siempre por ser gratis.
 */
.planes { margin-top: 2.5rem; align-items: start; }

.plan {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.75rem 1.5rem;
}

.plan.destacado {
  position: relative;
  background: var(--carta-alta);
  border: 1px solid oklch(70% 0.15 45 / 0.35);
}

.plan .chapa {
  align-self: flex-start;
  margin: 0 0 0.5rem;
}

.plan-nombre {
  margin: 0;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/*
 * El precio, en una línea.
 *
 * El signo y el "por mes" van chicos y alineados abajo: lo que la persona
 * busca es el número, y rodearlo de texto del mismo tamaño lo esconde.
 */
.plan-precio {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin: 0.15rem 0 0;
  color: var(--tinta);
}

.plan-signo {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tinta-media);
}

.plan-cifra {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  /* Los dígitos de ancho fijo evitan que el número baile si algún día cambia. */
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.plan-mes {
  margin-left: 0.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

.plan-plazo {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--tinta-media);
}

.plan-items {
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  /* Empuja el botón al pie: con listas de largo distinto, los dos botones
     quedaban a alturas distintas y la comparación se hacía difícil. */
  flex-grow: 1;
}

.plan-items li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

.plan-items li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--acento);
  font-weight: 700;
}

.plan .plan-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.plan-nota {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  text-align: center;
  color: var(--tinta-suave);
}

/* En el teléfono la destacada va primero: es la que la página recomienda, y
   nadie hace scroll para comparar dos tarjetas apiladas. */
@media (max-width: 699px) {
  .planes { display: flex; flex-direction: column-reverse; }
}

/*
 * Un error que no es de ningún campo: sin red, el mail ya usado.
 *
 * Va pegado arriba del botón y no al pie de la página: es donde está mirando
 * quien acaba de tocar, y un aviso fuera de la vista es un aviso que no
 * existe.
 */
.error-envio {
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--r-chip, 10px);
  background: oklch(70% 0.15 45 / 0.15);
  border: 1px solid oklch(70% 0.15 45 / 0.4);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--tinta);
}

/* El botón del panel, dentro del mensaje de listo. */
.listo .btn {
  margin-top: 1rem;
}

/*
 * El botón mientras falta completar algo.
 *
 * Apagado, no invisible: dice de un vistazo que todavía no está, sin esconder
 * a dónde lleva. Se puede tocar igual —`aria-disabled` y no `disabled`— y al
 * tocarlo el formulario marca en rojo lo que falta, que es más útil que un
 * botón muerto que no explica nada.
 */
.btn.apagado {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.apagado:hover {
  transform: none;
}

/* ═══ CONFIRMACIÓN DEL ALTA ═══ */

.listo-titulo { margin: 0 0 0.6rem; font-size: 1.05rem; }

.listo-mail {
  margin: 0 0 0.75rem;
  line-height: 1.55;
}

.listo-nota {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

/*
 * Un botón que se lee como un enlace.
 *
 * Reenviar es una acción, así que es un `button` y no un `a` — pero dentro de
 * un párrafo, con la forma de un botón, cortaría la frase en dos.
 */
.como-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.como-link:disabled {
  color: var(--tinta-suave);
  text-decoration: none;
  cursor: default;
}