/* Hallmark · v2.0.0 · theme: custom (marca AGENDO, by request) · shape: split, el armado del registro · signature: el nombre grande sobre el horizonte · job: join */
/* critique: una sola idea, anotarse; la marca la cargan el nombre y el horizonte, no la decoración */
/* Landing de AGENDO: la lista de espera, con el armado del registro de negocio (web/next/estilos/cuenta.css,
 * «.pagina-ingreso»): el nombre grande a la izquierda, el formulario a la derecha y el horizonte detrás.
 * Colores, tipografía, radios y espacios salen de brand/tokens.css; los roles, de docs/diseno/LINEA-DE-DISENO.md.
 * Primero el celular (390 px); el escritorio desde 900. Oscuro es la identidad; claro sigue al sistema. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fuentes/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- tokens de la marca (brand/tokens.css) ---------- */

:root {
  --ag-amber: #FFB020;
  --ag-on-amber: #0F0E17;
  --ag-pink: #FF85A2;
  --ag-focus: #C13D65;

  --ag-bg: #0F0E17;
  --ag-surface: #1B1A23;
  --ag-border: #54535A;
  --ag-text: #FFFFFE;
  --ag-text-2: #CFD0DB;
  --ag-error: #FFCDC8;

  --ag-logo-ring: #FFB020;
  --ag-logo-halo: #54535A;
  --ag-logo-dot: #FF85A2;
  --ag-logo-text: #FFFFFE;
  /* El reflejo del botón es luz sobre ámbar: claro en los dos temas. */
  --ag-brillo: #FFFFFE;

  /* El verde de WhatsApp: no es de la marca AGENDO, solo viste el botón de compartir por WhatsApp. */
  --whatsapp: #25D366;

  --ag-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --ag-radius-pill: 999px;
  --ag-radius-tile: 16px;
  --ag-space-1: 4px;
  --ag-space-2: 8px;
  --ag-space-3: 12px;
  --ag-space-4: 16px;
  --ag-space-6: 24px;
  --ag-space-8: 32px;
  --ag-space-12: 48px;
  --ag-space-16: 64px;

  /* roles (LINEA-DE-DISENO, sección 3) */
  --papel: var(--ag-bg);
  --bruma: var(--ag-surface);
  --linea: var(--ag-border);
  --linea-control: color-mix(in srgb, var(--ag-text-2) 65%, var(--ag-bg));
  --tinta: var(--ag-text);
  --tinta-suave: var(--ag-text-2);
  --lago: var(--ag-amber);
  --sobre-lago: var(--ag-on-amber);
  --lago-texto: var(--ag-amber);
  --foco: var(--ag-focus);
  --coral: var(--ag-error);

  /* el horizonte (cuenta.css) */
  --arte-ambar: color-mix(in srgb, var(--ag-amber) 20%, transparent);
  --arte-linea: color-mix(in srgb, var(--ag-text-2) 22%, transparent);

  /* Las dos separaciones de la marca en el celular (ver «celular y tableta»). */
  --sep-movil: 36px;

  --ancho: 1160px;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --ag-bg: #FCFCFF;
    --ag-surface: #F5F4FF;
    --ag-border: #DEDBFF;
    --ag-text: #26223E;
    --ag-text-2: #524F6A;
    --ag-error: #9B1C22;
    --ag-logo-ring: #26223E;
    --ag-logo-halo: color-mix(in srgb, #524F6A 45%, transparent);
    --ag-logo-text: #26223E;
    /* Sobre claro el ámbar es relleno, nunca texto: el acento escrito es la tinta. */
    --lago-texto: var(--ag-text);
    --arte-ambar: color-mix(in srgb, var(--ag-amber) 24%, transparent);
    --arte-linea: color-mix(in srgb, var(--ag-text-2) 26%, transparent);
    color-scheme: light;
  }
}

/* ---------- base ---------- */

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

html,
body {
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/25px var(--ag-font);
  overflow-wrap: break-word;
}

[hidden] {
  display: none !important;
}

h1,
p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ---------- el armado: dos columnas sobre el horizonte ---------- */

.ingreso {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding-inline: max(20px, calc((100% - var(--ancho)) / 2 + 20px), env(safe-area-inset-left));
  padding-bottom: env(safe-area-inset-bottom);
}

/* El horizonte: un arco enorme, apenas una línea ámbar con el punto rosa encima, otro más tenue y una luz baja.
   Piezas de CSS sobre el fondo, desvanecidas con una máscara. Quieto: acá la marca no se anima. */
/* En el celular el horizonte va abajo, por detrás del botón, como en el escritorio: así nunca cruza el nombre ni el
   tablero. */
.arte {
  --oy: calc(100% - 96px);
  --radio: 110vw;
  --giro: 9deg;
  --separacion: 34px;
  --alcance-x: 120%;
  --alcance-y: 380px;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse var(--alcance-x) var(--alcance-y) at 50% var(--oy), black 28%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--alcance-x) var(--alcance-y) at 50% var(--oy), black 28%, transparent 100%);
}

.arte > span {
  position: absolute;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
}

.arte-luz {
  top: calc(var(--oy) + var(--radio) * 0.55);
  width: calc(var(--radio) * 1.1);
  background: radial-gradient(closest-side, var(--arte-ambar), transparent);
  opacity: 0.6;
}

.arte-arco {
  top: calc(var(--oy) + var(--radio));
  width: calc(var(--radio) * 2);
  border: 1px solid var(--arte-linea);
}

.arte-arco-1 {
  border-color: color-mix(in srgb, var(--ag-amber) 55%, transparent);
  rotate: var(--giro);
}

/* El punto: siempre rosa, solo sobre su órbita (sin estela). */
.arte-arco-1::after {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ag-logo-dot);
}

.arte-arco-2 {
  top: calc(var(--oy) + var(--radio) + var(--separacion));
  opacity: 0.5;
}

/* ---------- la marca: el nombre grande y la frase ---------- */

.marca {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--ag-space-3);
  min-width: 0;
  padding: calc(var(--ag-space-8) + env(safe-area-inset-top)) 0 var(--ag-space-12);
}

/* «agend» ocupa un ancho fijo (textLength en el HTML): Safari y Chrome ubican igual el texto del SVG, la «d» queda
   siempre a la misma distancia de la o y nada se recorta (overflow visible por las dudas). */
.logo {
  display: block;
  width: auto;
  height: 60px;
  max-width: 100%;
  overflow: visible;
}

.logo-texto {
  font-family: var(--ag-font);
  font-weight: 800;
  font-size: 100px;
  letter-spacing: -5px;
  fill: var(--ag-logo-text);
}

.logo-anillo {
  fill: none;
  stroke: var(--ag-logo-ring);
  stroke-width: 10.7;
}

.logo-aureola {
  fill: none;
  stroke: var(--ag-logo-halo);
  stroke-width: 1.6;
}

.logo-punto {
  fill: var(--ag-logo-dot);
}

/* El punto en órbita da una vuelta al entrar: rápido, con impulso hacia atrás, se pasa y vuelve (el giro del logo de
   la barra, web/next/estilos/marca.css). Después queda quieto. */
.logo-orbita {
  transform-box: view-box;
  transform-origin: 338.5px 72.5px;
  animation: giro 1.5s cubic-bezier(0.45, 0, 0.3, 1) 0.15s 1 both;
}

@keyframes giro {
  0% { transform: rotate(0deg); }
  14% { transform: rotate(-26deg); }
  68% { transform: rotate(382deg); }
  84% { transform: rotate(351deg); }
  93% { transform: rotate(363deg); }
  100% { transform: rotate(360deg); }
}

/* «Agendamiento en línea» grande, en un solo peso y un solo color; debajo, el tablero. La columna es un contenedor:
   las fichas se achican lo justo para que la frase más larga entre siempre en un renglón. */
.frase {
  container-type: inline-size;
  width: 100%;
  display: grid;
  justify-items: start;
  gap: var(--ag-space-3);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

/* «Agendamiento en línea» siempre en un renglón: a 100 px mide 10,64 veces 100 px de ancho, así que su tamaño sale
   del ancho de la columna, hasta 44 px. El tablero de abajo se mide igual y termina donde termina el título. */
.frase-titulo {
  font-size: min(44px, calc(100cqi / 10.7));
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* «Gestiona tus reservas automáticamente», en gris debajo del título y del mismo ancho: a 100 px mide 19,16 veces
   100 px, así que su tamaño sale de la columna (hasta 24,4 px, cuando el título llega a 44). */
.frase-bajada {
  color: var(--tinta-suave);
  font-size: min(24.4px, calc(100cqi / 19.3));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* El tablero: el número en fichas de aeropuerto (split-flap) y, al lado, sus palabras. Cada cambio se van las
   palabras, giran solo las fichas del número (24 → 7 → 365) y entran las palabras nuevas letra por letra (app.js). Las
   fichas son casi cuadradas, ámbar con el número oscuro (sobre ámbar la letra va siempre oscura). Sin scripts queda
   «24 horas al día», quieto. */
.tablero-linea {
  display: flex;
  align-items: center;
  gap: 0.35em;
  /* Bien visible: el 73 % del título en cualquier ancho (32 px cuando el título llega a 44). */
  font-size: min(32px, calc(100cqi / 14.6));
  margin-top: var(--ag-space-1);
  /* Alto fijo: mientras las palabras salen y entran, nada de la página se corre. */
  height: 1.4em;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tablero {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--ag-space-1);
  font-variant-numeric: tabular-nums;
  perspective: 300px;
}

.ficha {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.06em;
  height: 1.24em;
  border-radius: 3px;
  background: var(--ag-amber);
  color: var(--ag-on-amber);
  line-height: 1;
  overflow: hidden;
}

/* La línea que parte la ficha en dos, como en los tableros. */
.ficha::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--ag-on-amber) 28%, transparent);
}

/* El número va por encima de la línea del medio: la ficha se ve partida, el número no. */
.ficha > span {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 1.02em;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

/* Una ficha vacía no ocupa lugar: «7» queda pegado a sus palabras. */
.ficha.vacia {
  display: none;
}

/* Las palabras del número, cada letra en su caja para entrar sola. */
.tablero-texto {
  display: inline-flex;
  margin-left: -0.05em;
  color: var(--tinta);
  white-space: nowrap;
}

.tablero-letra {
  display: inline-block;
}

.solo-lectura {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- el formulario ---------- */

.panel {
  min-width: 0;
  display: grid;
  align-content: start;
  padding: var(--ag-space-6) 0 var(--ag-space-12);
}

.formulario,
.listo {
  display: grid;
  gap: var(--ag-space-6);
  width: 100%;
}

.formulario {
  container: formulario / inline-size;
}

/* «Unite a la lista de espera» va justo sobre la tarjeta de la oferta: en un renglón y del mismo ancho, de borde a
   borde. El tamaño sale del ancho del formulario (a 100 px la frase mide 11,38 veces 100 px de ancho). */
.cabecera h1 {
  max-width: none;
  font-size: calc(100cqi / 11.41);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cabecera {
  display: grid;
  gap: 0;
}

/* «para obtener»: el gancho entre el título y la oferta. Mismo tamaño y peso que el título, como su segundo renglón, y
   distinto por el color de acento: ámbar sobre oscuro; sobre claro, tinta (el ámbar no es letra sobre claro). */
.cabecera .cabecera-puente {
  max-width: none;
  color: var(--lago-texto);
  font-size: calc(100cqi / 11.41);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  max-width: 14ch;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.01em;
  text-wrap: balance;
  min-width: 0;
}

.cabecera p strong,
.listo > p strong {
  color: var(--tinta);
  font-weight: 700;
}

.cabecera p,
.listo > p {
  max-width: 48ch;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

/* ---------- la oferta ---------- */

/* Borde con el degradado de la marca (ámbar a rosa, solo en la línea) y un fondo apenas ámbar. */
/* En el celular: el 6 y sus dos renglones arriba, el precio en una fila propia debajo. Desde 560 px, el precio es una
   tercera columna a la derecha, alineada con los mismos dos renglones. */
.regalo {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "seis texto" "precio precio";
  align-items: stretch;
  column-gap: var(--ag-space-4);
  row-gap: var(--ag-space-4);
  margin-bottom: var(--ag-space-2);
  padding: var(--ag-space-6) var(--ag-space-6) var(--ag-space-8);
  border: 1.5px solid transparent;
  border-radius: var(--ag-radius-tile);
  background:
    linear-gradient(color-mix(in srgb, var(--ag-amber) 9%, var(--ag-bg)), color-mix(in srgb, var(--ag-amber) 9%, var(--ag-bg))) padding-box,
    linear-gradient(90deg, var(--ag-amber), var(--ag-pink)) border-box;
  /* Un resplandor quieto del mismo degradado, apenas por fuera del borde. */
  box-shadow:
    -10px 0 28px -14px color-mix(in srgb, var(--ag-amber) 70%, transparent),
    10px 0 28px -14px color-mix(in srgb, var(--ag-pink) 70%, transparent);
}

/* La etiqueta de exclusividad, montada sobre el borde de abajo, a la derecha (como el «Más elegido» de una tabla de
   precios). Rosa, el color de lo elegido, con letra oscura. */
.regalo-etiqueta {
  position: absolute;
  bottom: 0;
  right: var(--ag-space-6);
  translate: 0 50%;
  padding: var(--ag-space-1) var(--ag-space-3);
  border-radius: var(--ag-radius-pill);
  background: var(--ag-pink);
  color: var(--sobre-lago);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}

/* El 6 gigante: el número es la oferta. Se recorta a su altura real (de la parte de arriba de la cifra a su base) y
   esa es la altura de la fila: «meses gratis» arranca a la altura de la parte de arriba del 6 y «de suscripción»
   apoya su base en la base del 6. */
.regalo-numero {
  grid-area: seis;
  color: var(--tinta);
  font-size: 76px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  text-box: trim-both cap alphabetic;
}

.regalo-texto {
  grid-area: texto;
  display: grid;
  align-content: space-between;
  min-width: 0;
}

.regalo-cifra {
  white-space: nowrap;
  color: var(--tinta);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-box: trim-both cap alphabetic;
}

/* «del» y la píldora dorada del plan: el borde de abajo de la píldora apoya en la base del 6 y «del» se centra a su
   altura. */
.regalo-detalle {
  display: flex;
  align-items: center;
  gap: var(--ag-space-2);
  color: var(--tinta-suave);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.regalo-del {
  text-box: trim-both cap alphabetic;
}

/* El plan, en su insignia: relleno ámbar (el dorado de la marca), letra oscura, esquinas redondeadas. */
.regalo-plan {
  padding: var(--ag-space-1) var(--ag-space-2);
  border-radius: 8px;
  background: var(--ag-amber);
  color: var(--sobre-lago);
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.01em;
}

.regalo-precio {
  grid-area: precio;
  display: flex;
  align-items: baseline;
  gap: var(--ag-space-3);
  padding-top: var(--ag-space-4);
  border-top: 2px dashed color-mix(in srgb, var(--ag-text-2) 30%, transparent);
}

.regalo-cero {
  color: var(--tinta);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.regalo-antes {
  color: var(--tinta-suave);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1.5px;
}

/* Desde un formulario de 320 px (un celular común) la tarjeta va siempre estirada, con el precio al costado. Todo
   escala con el ancho del formulario (cqi): a 480 px son los tamaños grandes; más angosto, se achica en proporción y
   las tres columnas siguen entrando. Por debajo de 320 px, el precio baja a su fila. */
@container formulario (min-width: 320px) {
  .regalo {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "seis texto precio";
    column-gap: clamp(8px, 3.3cqi, 16px);
    padding: clamp(16px, 5cqi, 24px) clamp(16px, 5cqi, 24px) clamp(24px, 6.6cqi, 32px);
  }

  .regalo-numero {
    font-size: clamp(64px, 20cqi, 96px);
  }

  .regalo-cifra {
    font-size: clamp(20px, 6.6cqi, 32px);
  }

  .regalo-detalle {
    gap: clamp(4px, 1.6cqi, 8px);
    font-size: clamp(15px, 4.6cqi, 22px);
  }

  .regalo-plan {
    padding: 4px clamp(4px, 1.6cqi, 8px);
    font-size: clamp(13px, 3.75cqi, 18px);
    line-height: 1.25;
  }

  /* El precio, del lado derecho y alineado como el texto: el cero arriba, a la altura de «meses gratis»; el de lista
     abajo, apoyado en la base del 6. */
  .regalo-precio {
    display: grid;
    align-content: space-between;
    justify-items: end;
    padding: 0 0 0 clamp(8px, 3.3cqi, 16px);
    border-top: 0;
    border-left: 2px dashed color-mix(in srgb, var(--ag-text-2) 30%, transparent);
  }

  .regalo-cero,
  .regalo-antes {
    text-box: trim-both cap alphabetic;
  }

  .regalo-cero {
    font-size: clamp(20px, 6.6cqi, 32px);
  }

  .regalo-antes {
    font-size: clamp(13px, 3.1cqi, 15px);
  }
}

/* En los formularios angostos el «/mes» del precio tachado no entra: queda el precio solo. */
@container formulario (max-width: 419px) {
  .regalo-mes {
    display: none;
  }
}

.campo {
  display: grid;
  gap: var(--ag-space-2);
}

.campo > span {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

input {
  width: 100%;
  min-height: 48px;
  padding: var(--ag-space-3) var(--ag-space-4);
  border: 1.5px solid var(--linea-control);
  border-radius: var(--ag-radius-tile);
  background: color-mix(in srgb, var(--ag-bg) 70%, transparent);
  color: var(--tinta);
  font: 400 17px/22px var(--ag-font);
  transition: border-color 160ms var(--curva);
}

input::placeholder {
  color: color-mix(in srgb, var(--ag-text-2) 70%, var(--ag-bg));
}

@media (hover: hover) {
  input:hover {
    border-color: var(--tinta-suave);
  }
}

/* Al elegir un campo, su borde cambia al color de foco y se engrosa: una sola línea, sin aro aparte. Va después del
   hover para ganarle. El contorno transparente queda para el modo de alto contraste. */
input:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--foco);
  box-shadow: 0 0 0 1.5px var(--foco);
}

/* El autocompletado del navegador no pinta su propio fondo ni su color de letra. */
input:-webkit-autofill {
  -webkit-text-fill-color: var(--tinta);
  transition: background-color 600000s 0s, color 600000s 0s;
}

input[aria-invalid="true"] {
  border-color: var(--coral);
}

.campo > label {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

/* El teléfono: una sola pieza con el país a la izquierda. El borde, el foco y el error son de la pieza entera. */
.telefono {
  display: flex;
  min-width: 0;
  min-height: 52px;
  border: 1.5px solid var(--linea-control);
  border-radius: var(--ag-radius-tile);
  background: color-mix(in srgb, var(--ag-bg) 70%, transparent);
  transition: border-color 160ms var(--curva);
}

.telefono:has([aria-invalid="true"]) {
  border-color: var(--coral);
}

@media (hover: hover) {
  .telefono:hover {
    border-color: var(--tinta-suave);
  }
}

.telefono:focus-within {
  outline: 2px solid transparent;
  border-color: var(--foco);
  box-shadow: 0 0 0 1.5px var(--foco);
}

/* El país: se ve el código y una flecha; el select nativo va encima, transparente, para que en el celular abra la
   lista del sistema. */
.pais {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ag-space-2);
  padding: 0 var(--ag-space-3) 0 var(--ag-space-4);
  border-right: 1.5px solid var(--linea-control);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pais::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  rotate: 45deg;
}

.pais select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

.telefono input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0 var(--ag-radius-tile) var(--ag-radius-tile) 0;
  background: transparent;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.telefono input:focus-visible {
  outline: none;
}

.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--ag-space-3) var(--ag-space-6);
  border: 1.5px solid transparent;
  border-radius: var(--ag-radius-pill);
  background: var(--lago);
  color: var(--sobre-lago);
  font: 700 16px/20px var(--ag-font);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--curva), border-color 160ms var(--curva);
}

.boton.secundario {
  background: transparent;
  border-color: var(--linea);
  color: var(--tinta);
}

/* El brillo del botón principal: un halo ámbar que respira apenas y un reflejo que lo cruza cada tanto. Solo
   transform y opacity; con movimiento reducido queda el halo quieto. */
.boton.brilla {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ag-amber) 35%, transparent);
}

.boton.brilla::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 32px 4px color-mix(in srgb, var(--ag-amber) 55%, transparent);
  opacity: 0;
  animation: halo 3s ease-in-out 1.8s infinite;
  pointer-events: none;
}

.boton.brilla::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--ag-brillo) 60%, transparent), transparent);
  translate: -120% 0;
  animation: reflejo 5s cubic-bezier(0.4, 0, 0.2, 1) 1.8s infinite;
  pointer-events: none;
}

@keyframes reflejo {
  0% { translate: -120% 0; }
  22%, 100% { translate: 320% 0; }
}

@keyframes halo {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Compartir por WhatsApp, con el verde y el logo de WhatsApp. Texto y logo oscuros: el blanco sobre ese verde no
   llega al contraste mínimo. */
.boton.whatsapp {
  display: inline-flex;
  gap: var(--ag-space-2);
  background: var(--whatsapp);
  color: var(--sobre-lago);
}

.whatsapp-logo {
  flex: none;
  fill: currentColor;
}

@media (hover: hover) {
  .boton.whatsapp:hover {
    background: color-mix(in srgb, var(--whatsapp) 86%, var(--ag-on-amber));
  }
}

/* ---------- el botón cuenta el envío con la o ---------- */

.boton {
  display: inline-grid;
}

.boton-texto,
.boton-o {
  grid-area: 1 / 1;
  place-self: center;
  transition: opacity 180ms var(--curva), scale 180ms var(--curva);
}

.boton-o {
  opacity: 0;
  scale: 0.6;
}

/* Sobre ámbar, la o va oscura; el punto, siempre rosa. */
.boton-anillo {
  fill: none;
  stroke: var(--sobre-lago);
  stroke-width: 9;
}

.boton-aureola {
  fill: none;
  stroke: color-mix(in srgb, var(--sobre-lago) 40%, transparent);
  stroke-width: 2;
}

.boton-punto {
  fill: var(--ag-logo-dot);
  stroke: var(--sobre-lago);
  stroke-width: 1.5;
}

.boton-orbita {
  transform-box: view-box;
  transform-origin: 32px 32px;
}

.boton.enviando .boton-texto,
.boton.enviado .boton-texto {
  opacity: 0;
  scale: 0.9;
}

.boton.enviando .boton-o,
.boton.enviado .boton-o {
  opacity: 1;
  scale: 1;
}

/* Enviando: el punto da vueltas en su órbita. */
.boton.enviando .boton-orbita {
  animation: orbita 900ms linear infinite;
}

/* Enviado: el punto deja la órbita y entra al centro, la aureola se apaga y la o late una vez. */
.boton.enviado .boton-punto {
  animation: punto-adentro 520ms cubic-bezier(0.5, 0, 0.2, 1) both;
}

.boton.enviado .boton-aureola {
  animation: aureola-fuera 400ms ease-out 300ms both;
}

.boton.enviado .boton-o {
  animation: o-late 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 500ms both;
}

@keyframes orbita {
  to { transform: rotate(360deg); }
}

@keyframes punto-adentro {
  from { translate: 0 0; }
  to { translate: -20px 20px; }
}

@keyframes aureola-fuera {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes o-late {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Mientras cuenta el envío, el botón sigue entero (no se ve apagado). */
.boton.enviando:disabled,
.boton.enviado:disabled {
  background: var(--lago);
  color: var(--sobre-lago);
  cursor: default;
}

.boton.brilla:disabled::before,
.boton.brilla:disabled::after {
  display: none;
}

.boton:disabled {
  background: color-mix(in srgb, var(--ag-amber) 45%, var(--ag-bg));
  color: color-mix(in srgb, var(--ag-on-amber) 70%, var(--ag-amber));
  cursor: default;
}

@media (hover: hover) {
  .boton:hover {
    background: color-mix(in srgb, var(--ag-amber) 88%, var(--ag-text));
  }

  .boton.secundario:hover {
    background: transparent;
    border-color: var(--tinta);
  }
}

.boton:active {
  translate: 0 1px;
}

/* ---------- la burbuja del error, estilo iOS ---------- */

/* Translúcida, con desenfoque y saturación detrás, como los globos de iOS. Nace del campo (debajo, con la flecha
   arriba a la izquierda) o del botón (encima, con la flecha abajo), y entra con un rebote corto. */
.campo,
.accion {
  position: relative;
}

/* La aclaración de la oferta, chica y suave: va en el «Listo», debajo del botón de compartir. */
.aclaracion {
  margin-top: calc(-1 * var(--ag-space-3));
  color: var(--tinta-suave);
  font-size: 13px;
  line-height: 18px;
}

.burbuja {
  position: absolute;
  z-index: 5;
  top: calc(100% + 10px);
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--ag-space-2);
  max-width: min(100%, 22rem);
  padding: var(--ag-space-3) var(--ag-space-4) var(--ag-space-3) var(--ag-space-3);
  border: 1px solid color-mix(in srgb, var(--ag-text) 14%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ag-surface) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ag-bg) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--ag-bg) 25%, transparent);
  color: var(--tinta);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  transform-origin: 24px 0;
  animation: burbuja 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  pointer-events: none;
}

/* La flecha: un cuadradito girado, del mismo vidrio, que asoma hacia el campo. */
.burbuja::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 20px;
  width: 11px;
  height: 11px;
  border-top: 1px solid color-mix(in srgb, var(--ag-text) 14%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--ag-text) 14%, transparent);
  border-top-left-radius: 3px;
  background: inherit;
  rotate: 45deg;
}

.burbuja.arriba {
  top: auto;
  bottom: calc(100% + 10px);
  transform-origin: 24px 100%;
}

.burbuja.arriba::before {
  top: auto;
  bottom: -6px;
  rotate: 225deg;
}

/* El signo: un círculo con el color de error y el «!» oscuro adentro (no depende solo del color). */
.burbuja-signo {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--papel);
  font-size: 14px;
  font-weight: 800;
}

@keyframes burbuja {
  from { opacity: 0; transform: translateY(-4px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* ---------- anotado ---------- */

.listo {
  outline: none;
}

.listo h1 {
  max-width: none;
}

/* El formulario se va hacia arriba, desvaneciéndose. */
.formulario.saliendo {
  opacity: 0;
  translate: 0 -8px;
  transition: opacity 200ms var(--curva), translate 200ms var(--curva);
}

/* Entran los textos del «Listo», de a uno. */
.listo > * {
  animation: entra 420ms var(--curva) both;
}

.listo > :nth-child(2) { animation-delay: 100ms; }
.listo > :nth-child(3) { animation-delay: 200ms; }
.listo > :nth-child(4) { animation-delay: 300ms; }
.listo > :nth-child(5) { animation-delay: 400ms; }

@keyframes entra {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- celular y tableta: la marca centrada y las dos separaciones iguales ---------- */

/* Del logo a «Agendamiento en línea» y del tablero a «Únete a la lista de espera» hay el mismo aire. El logo y el
   tablero van centrados; el título y la bajada ya ocupan todo el ancho. */
@media (max-width: 899px) {
  .marca {
    justify-items: center;
    padding-bottom: var(--sep-movil);
  }

  .marca .logo {
    margin-bottom: calc(var(--sep-movil) - var(--ag-space-3));
  }

  .frase {
    justify-items: center;
  }

  .panel {
    padding-top: 0;
  }
}

/* ---------- tableta ---------- */

@media (min-width: 560px) and (max-width: 899px) {
  .arte {
    --oy: calc(100% - 112px);
    --radio: 130vw;
    --alcance-y: 460px;
  }

  .marca {
    padding-top: calc(var(--ag-space-12) + env(safe-area-inset-top));
  }

  .logo {
    height: 64px;
  }

  .panel > * {
    max-width: 30rem;
  }
}

/* ---------- escritorio ---------- */

@media (min-width: 900px) {
  .ingreso {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: stretch;
  }

  /* A pantalla completa el horizonte cruza la parte baja, por detrás de las dos columnas. */
  .arte {
    --oy: 74%;
    --radio: 75vw;
    --giro: -14deg;
    --separacion: 46px;
    --alcance-x: 75%;
    --alcance-y: 75%;
  }

  .marca {
    align-content: center;
    gap: var(--ag-space-6);
    padding: var(--ag-space-16) 0;
  }

  /* El nombre es lo que se ve: grande, hasta donde da la columna. */
  .logo {
    width: min(100%, clamp(340px, 34vw, 500px));
    height: auto;
  }

  .frase {
    gap: var(--ag-space-4);
    font-size: 24px;
  }


  .panel {
    align-content: center;
    justify-items: end;
    padding: var(--ag-space-16) 0 var(--ag-space-16) 6vw;
  }

  .panel > * {
    width: min(100%, 30rem);
  }

  h1 {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.02em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boton,
  input {
    transition: none;
  }

  .logo-orbita,
  .boton.brilla::before,
  .boton.brilla::after,
  .boton-orbita,
  .boton-o,
  .listo > * {
    animation: none !important;
  }

  .boton.enviado .boton-punto {
    animation: none;
    translate: -20px 20px;
  }

  .boton.enviado .boton-aureola {
    animation: none;
    opacity: 0;
  }

  .boton-texto,
  .boton-o {
    transition: none;
  }

  .formulario.saliendo {
    transition: none;
  }

  .burbuja {
    animation: none;
  }

  .boton:active {
    translate: none;
  }
}