/* Sales demo shell. Tokens are the dashboard's own, so both panels read as one
   system; nothing new is invented here.

   Una clase suelta aquí es global para todo el documento. El tablero ya vive en
   un iframe y no la alcanza, pero el teléfono sí: whatsapp.css tiene todo bajo
   `.wa`, y una regla sin prefijo de aquí le gana a lo que `.wa` no fije. Antes
   pasó: un `.pill` global le puso IBM Plex Mono a los chips del tablero, cuando
   el tablero era una réplica en este mismo documento. Prefijos nuevos, bajo
   .shell, .home, .stage o .step-. */

/* ---------- tokens ---------- */
/* The dashboard's reference design is light-only, so the demo is too. */
:root {
  --bg: #f3f7f4;
  --surface: #ffffff;
  --surface-2: #eef4f0;
  --line: #dbe7e0;
  --text: #10231b;
  --text-2: #44604f;
  --muted: #63806e;
  --faint: #93aa9c;
  --accent: #2e7d55;
  --accent-soft: #d7ecdf;
  --accent-dim: #eaf5ee;
  --shadow: 0 20px 50px rgba(16, 35, 27, 0.14);
  /* El hueco que el paso le deja arriba a la barra, que flota fuera del flujo.
     Sale del alto de la barra —relleno, píldora y lo que crece la abierta— más
     un respiro. Está aquí y no repetido en cada paso porque al achicar la barra
     hay que achicarlo con ella, o queda un hoyo. */
  --stepbar-clear: 104px;

  /* El acabado de porcelana: una cara con la luz cayendo de arriba a la
     izquierda, un filo blanco y una sombra que la levanta del fondo. Nació en
     las teclas que orbitan el teléfono del paso 2 (`.phone-orbit-tile`), la
     tarjeta del registro lo copió, y al pedirlo la barra de pasos —el tercero—
     subió aquí, que era el trato. Ahora los tres beben de estos tokens. */
  --tile-face: linear-gradient(145deg, #fbfdfb 0%, #edf3ed 48%, #dce6dc 100%);
  --tile-edge: rgb(255 255 255 / 88%);
  --tile-lift:
    -7px -7px 20px rgb(255 255 255 / 86%),
    10px 14px 24px rgb(50 78 58 / 18%),
    2px 3px 5px rgb(47 75 54 / 10%),
    inset 1px 1px 2px #fff,
    inset -2px -3px 5px rgb(128 153 133 / 18%);
  /* La misma luz a la escala de la barra: una tecla de 42px no puede cargar la
     sombra de una de 90px, se ve como un sello. Las distancias van a la mitad;
     los colores no se tocan, para que sea la misma porcelana. */
  --tile-lift-sm:
    -4px -4px 12px rgb(255 255 255 / 86%),
    5px 7px 14px rgb(50 78 58 / 16%),
    1px 2px 3px rgb(47 75 54 / 9%),
    inset 1px 1px 2px #fff,
    inset -1px -2px 4px rgb(128 153 133 / 16%);
  /* Lo contrario: hundido en la superficie en vez de apoyado encima. La luz
     sigue viniendo de arriba a la izquierda, así que la sombra se va adentro y
     el brillo queda abajo a la derecha. */
  --tile-well: inset 2px 3px 6px rgb(50 78 58 / 15%), inset -2px -2px 5px rgb(255 255 255 / 92%);
}

/* ---------- base ---------- */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background: var(--bg);
}
/* Only the split view owns the viewport; the other pages scroll normally. */
body:has(.shell) {
  overflow: hidden;
}

.shell,
.shell *,
.shell *::before,
.shell *::after {
  box-sizing: border-box;
}
.shell {
  font-family: "Outfit", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 14px;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- left: the simulator stage ---------- */
.stage {
  width: var(--stage-width, 440px);
  flex: 0 0 auto;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
}
.brand span,
.stage-head .brand {
  line-height: 1;
}
.brand {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -1.1px;
  color: var(--accent);
}
.brand i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  align-self: flex-end;
  margin-bottom: 4px;
}
.tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 6px 12px;
}

/* Aparece sólo cuando el simulador trae respuestas guardadas: en la cabecera
   del simulador de dos paneles, y debajo del teléfono en el paso 2. */
.stage-head .reset,
.step-stage .reset {
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.stage-head .reset:hover,
.step-stage .reset:hover {
  color: var(--text);
  background: var(--accent-dim);
  border-color: var(--accent-soft);
}

.stage-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
}

/* The phone keeps a real handset's proportions so the simulator drops in later
   without the layout shifting. */
.phone {
  width: 100%;
  max-width: 372px;
  aspect-ratio: 9 / 19.5;
  max-height: 100%;
  /* El marco es de la casa: el aparato se lee como de veeda antes de que nadie
     alcance a leer la pantalla. El verde va en el marco y no en la pantalla
     —ésa es de WhatsApp y debe verse tal cual. */
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 34px;
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
}

/* ---------- the divider ---------- */
.split {
  flex: 0 0 auto;
  width: 18px;
  cursor: col-resize;
  display: grid;
  place-items: center;
  border-radius: 999px;
  touch-action: none;
}
.grip {
  width: 4px;
  height: 46px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.13s;
}
.split:hover .grip,
.split:focus-visible .grip,
.shell[data-resizing] .grip {
  background: var(--accent);
}
.split:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- right: the company portal (real app in an iframe) ---------- */
.panel {
  flex: 1;
  min-width: 420px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.panel {
  display: flex;
  flex-direction: column;
}
.panel > iframe {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 0;
  background: var(--surface);
}

/* Mode switch above the portal: what the tablero starts with. */
.panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
  font-family: Outfit, system-ui, sans-serif;
}
.mode {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg);
}
.mode button {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #556);
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.mode button[aria-checked="true"] {
  background: var(--accent);
  color: #fff;
}
.panel-reset {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.panel-reset:hover {
  background: var(--bg);
}
/* While dragging, the portal must not swallow the pointer or select text. */
.shell[data-resizing] .panel {
  pointer-events: none;
  user-select: none;
}

/* ---------- home: the two ways into the demo ---------- */
.home {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 44px;
  padding: 48px 16px;
  color: var(--text);
  font-family: "Outfit", system-ui, -apple-system, sans-serif;
}
.home,
.home *,
.home *::before,
.home *::after {
  box-sizing: border-box;
}

.home-head {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.brand-lg {
  font-size: 46px;
  letter-spacing: -1.8px;
}
.brand-lg i {
  width: 9px;
  height: 9px;
  margin-bottom: 7px;
}
.home-lead {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 720px;
}
@media (max-width: 640px) {
  .home-choices {
    grid-template-columns: minmax(0, 1fr);
  }
}

.choice {
  display: grid;
  gap: 12px;
  padding: 30px 28px 26px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease;
}
.choice:hover,
.choice:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 26px 54px rgba(16, 35, 27, 0.16);
}
.choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.choice-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--accent-dim);
  color: var(--accent);
}
.choice-icon svg {
  width: 25px;
  height: 25px;
}
.choice b {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.choice p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.choice-go {
  color: var(--accent);
}
.choice-go svg {
  width: 20px;
  height: 20px;
}
.choice:hover .choice-go {
  transform: translateX(3px);
  transition: transform 0.14s ease;
}

/* ---------- a page that is not built yet ---------- */
.stub {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  max-width: 460px;
  padding: 44px 40px 36px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.stub b {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.stub p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.home-back {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.home-back:hover {
  text-decoration: underline;
}

/* ---------- back to home, from inside the simulator ---------- */
.back {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-2);
  text-decoration: none;
  transition:
    background 0.13s,
    color 0.13s;
}
.back:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
.back svg {
  width: 17px;
  height: 17px;
}
.stage-head .brand {
  margin-right: auto;
}

/* ---------- la barra de pasos: cuatro píldoras flotando ---------- */
/* Vive en una sola página; la dibuja pasos/steps.js para que la lista de pasos
   se escriba una vez. La barra no tiene fondo — flota sobre el paso — y sólo
   las píldoras se ven. */
.step-body {
  margin: 0;
  /* Una ventana y ni un pixel más: el demo se ve de un vistazo, así que ningún
     paso puede estirar la página. Lo que no quepa scrollea dentro del paso. */
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.step-body *,
.step-body *::before,
.step-body *::after {
  box-sizing: border-box;
}

/* ---------- el fondo del recorrido ---------- */
/* La capa fija donde gradient-wave.js cuelga su canvas: cubre la ventana detrás
   de la barra y del paso. El `--bg` de .step-body se queda debajo, así que si el
   canvas no llega (sin WebGL, o el módulo no cargó) no hay hueco que tapar.

   `z-index: 0` y no `-1`: con -1 se iría detrás del fondo de .step-body y no se
   vería nunca. Por eso el paso necesita su propia capa encima —#view abajo—, que
   sin `position` quedaría debajo de este canvas por el orden de pintado. */
.gradient-wave {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Decorativo: los clics son del paso, no del fondo. */
  pointer-events: none;
}
.gradient-wave canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.stepbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 20px;
  /* Sin fondo, a propósito: lo único que se ve son las píldoras. */
  background: none;
  border: 0;
  /* Fuera de las píldoras no hay barra que estorbe: el clic pasa de largo. */
  pointer-events: none;
}

.pills {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

/* Los chevrones de los extremos: un paso atrás, un paso adelante. Viven fuera
   de `.pills` para que el filtro de la gota no los alcance. */
.arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  color: var(--text-2);
  /* La misma porcelana de las teclas que orbitan el teléfono. Opaca y no
     translúcida: lo que levanta una tecla neumórfica es que la luz le pegue
     encima, y un fondo transparente deja pasar el degradado y la aplana. */
  background: var(--tile-face);
  border: 1px solid var(--tile-edge);
  box-shadow: var(--tile-lift-sm);
  pointer-events: auto;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.18s ease,
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.arrow svg {
  width: 16px;
  height: 16px;
}
.arrow:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent-soft);
  transform: scale(1.08);
}
.arrow:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: var(--tile-well);
}
.arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
/* En los extremos no hay a dónde ir, y se nota antes de pulsarlo: la tecla se
   apaga y se queda al ras de la superficie, sin sombra que la levante. */
.arrow:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .arrow,
  .arrow:hover:not(:disabled),
  .arrow:active:not(:disabled) {
    transform: none;
  }
}

/* El filtro se queda en su propia capa, debajo de las píldoras: si tocara el
   texto lo dejaría borroso. */
.goo-def {
  position: absolute;
  width: 0;
  height: 0;
}
.goo {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: url(#goo);
}

/* La marca del paso abierto. Viaja; no se prende y se apaga. */
.drop {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: var(--accent-soft);
}

/* El tramo entre dos píldoras. Va suelto y no dentro de una, porque la píldora
   abierta crece con un `transform` y arrastraría su línea al crecer. */
.pill-link {
  width: 34px;
  height: 1px;
  flex: 0 0 auto;
  background: rgb(50 78 58 / 16%);
  /* Un filo blanco debajo de la línea: así no es una raya pintada encima sino
     un surco en la superficie, que es de donde vive todo lo demás de la barra. */
  box-shadow: 0 1px 0 rgb(255 255 255 / 80%);
}

/* La píldora crece al abrirse, así que reserva su tamaño grande desde el
   principio: se escala con transform y nada se recorre alrededor. */
.pill {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px 9px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-2);
  background: var(--tile-face);
  border: 1px solid var(--tile-edge);
  box-shadow: var(--tile-lift-sm);
  transform-origin: center;
  /* Dura lo mismo que el viaje de la gota, que cambia con la distancia: lo
     escribe pasos/steps.js en `--travel` antes de cada salida, para que la
     píldora y su fondo lleguen juntos. */
  transition:
    transform var(--travel, 620ms) cubic-bezier(0.32, 0.9, 0.3, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow var(--travel, 620ms) ease,
    color 0.3s ease;
}
/* El anillo interior de las teclas del paso 2, a esta escala: un filo de luz
   por dentro del borde que le da grosor a la porcelana. */
.pill::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 45%);
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 70%);
  pointer-events: none;
  /* Se va con el mismo reloj que la gota, para que la tecla no pierda el filo
     antes de que el verde llegue a llenarla. */
  transition: opacity var(--travel, 620ms) ease;
}
.pill:hover {
  color: var(--text);
  border-color: var(--accent-soft);
}
.pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
/* El paso abierto crece, y deja de pintarse: debajo está la gota, que es su
   fondo. El borde se va con ella para que no quede un aro sobre el líquido.
   En lugar de la sombra que lo levantaba lleva la de adentro: la tecla está
   hundida y la gota verde es lo que quedó en el hueco. */
.pill.is-current {
  transform: scale(1.12);
  color: var(--accent);
  background: none;
  border-color: transparent;
  box-shadow: var(--tile-well);
}
/* Sin el filo de luz: el anillo pertenece a la tecla levantada, y sobre algo
   hundido se lee como un aro suelto encima de la gota. */
.pill.is-current::before {
  opacity: 0;
}

/* El número va en mono: se lee como un contador, no como parte del nombre. */
.pill-n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface-2);
  /* Picado en la cara de la tecla, como un contador embutido. */
  box-shadow:
    inset 1px 2px 3px rgb(50 78 58 / 16%),
    inset -1px -1px 2px rgb(255 255 255 / 90%);
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}
/* El del paso abierto se llena y sale a la superficie: es lo único de la barra
   que se levanta sobre algo hundido, y por eso se ve encendido. */
.pill.is-current .pill-n {
  background: var(--accent);
  color: #fff;
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 28%),
    0 1px 2px rgb(16 35 27 / 22%);
}
.pill.is-current b {
  color: var(--text);
}
.pill b {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* Crecer es decorativo: quien pida menos movimiento se queda con el color. */
/* Crecer y viajar son decorativos: quien pida menos movimiento se queda con el
   color, y la gota aparece ya puesta (jump, en pasos/steps.js). */
@media (prefers-reduced-motion: reduce) {
  .pill,
  .pill:hover,
  .pill.is-current {
    transform: none;
    transition: none;
  }
}

/* ---------- lo que hay debajo: por ahora, el nombre del paso ---------- */
/* La barra flota encima, así que el paso ocupa el alto completo y se centra
   contra la ventana, no contra lo que sobra. */
#view {
  flex: 1;
  min-height: 0;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  outline: none;
  /* Encima del fondo animado. Sin esto el canvas —que está posicionado— se
     pintaría arriba del paso, que no lo está. */
  position: relative;
  z-index: 1;
}
.step-page {
  flex: 1;
  min-height: 0;
  max-height: 100dvh;
  /* Si el contenido pasa del alto de la ventana, scrollea aquí adentro en vez
     de empujar la página: la barra de pasos flota y debe quedarse quieta. */
  overflow: auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  /* Arriba y abajo lo mismo, para que centrado se vea centrado; alcanza para
     pasar por debajo de la barra, que flota fuera del flujo. */
  padding: var(--stepbar-clear) 32px;
  text-align: center;
}
.step-page-n {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.step-page h1 {
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -1.4px;
}

/* ---------- el simulador y el servicio que estás explorando ---------- */
.simulator-page {
  /* El teléfono viaja a la derecha cuando los iconos dejan la órbita y ocupan
     su composición estática a la izquierda. */
  --simulator-shift: min(23vw, 320px);

  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Se traslada el escenario completo, no sólo el HTML del teléfono: el marco
   WebGL y la pantalla conservan exactamente la misma posición. */
.simulator-page > .step-stage {
  min-width: 100%;
  /* Un poco más arriba al abrir, para dar aire a la barra inferior del chat. */
  transform: translateY(-20px);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.simulator-page:is(.is-menu-open, .is-exploring) > .step-stage {
  transform: translateX(var(--simulator-shift));
}

.service-preview {
  /* Aire para que las sombras quepan dentro del recorte.

     El panel scrollea, y un recorte no perdona sombras: la tecla del título y
     el punto del rubro nacen pegados al borde izquierdo, así que su resplandor
     se cortaba en seco contra él. El panel se corre hacia afuera esta misma
     medida y se la devuelve por dentro como padding, de modo que el texto
     queda exactamente donde estaba y lo único que gana es el margen que la luz
     necesitaba. */
  --glow-room: 30px;

  position: absolute;
  z-index: 4;
  top: calc(var(--stepbar-clear) + 8px);
  bottom: 28px;
  left: calc(max(32px, calc(50% - 620px)) - var(--glow-room));
  width: calc(min(43vw, 480px) + var(--glow-room));
  display: flex;
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.service-preview[hidden] {
  display: none;
}
.service-content {
  flex: 0 0 auto;
  margin: auto 0;
  padding: 24px 12px 24px var(--glow-room);
}
.service-category {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.service-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-dim);
}
.service-heading {
  display: flex;
  align-items: center;
  gap: 20px;
}
.service-title-icon {
  flex: 0 0 auto;
  width: clamp(52px, 5vw, 68px);
  height: clamp(52px, 5vw, 68px);
}
.service-title-icon > .phone-orbit-tile {
  position: relative;
  width: 100%;
  height: 100%;
}
.service-icon-flight {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.phone-orbit-tile.is-transferring {
  will-change: transform;
}
.service-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  /* El tamaño de arriba, y `fitTitle` en services.js lo baja cuando el nombre
     no cabe de un renglón. Un nombre partido en dos se lee como una frase, no
     como un título, y a esta escala parte la página en dos. */
  font-size: clamp(36px, 4.1vw, 60px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.service-tagline {
  margin: 18px 0 0;
  color: var(--accent);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.service-description {
  margin: 20px 0 0;
  color: var(--text-2);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
}
.service-details {
  display: grid;
  gap: 13px;
  list-style: none;
  margin: 26px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.service-details li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}
.service-details li::before {
  content: "↗";
  color: var(--accent);
}
.service-details:empty {
  display: none;
}
.service-hint {
  margin: 32px 0 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .simulator-page.is-exploring {
    flex-direction: column;
    padding-top: var(--stepbar-clear);
    overflow-y: auto;
  }
  .simulator-page.is-exploring > .step-stage {
    transform: none;
    flex: 1 0 480px;
    max-height: none;
    padding: 18px 14px;
  }
  .simulator-page.is-menu-open > .step-stage {
    transform: none;
  }
  .service-preview {
    /* El mismo trato en columna, a la escala de aquí: el panel se ensancha lo
       que la luz necesita y el texto se queda a 24px del borde, como siempre. */
    --glow-room: 16px;

    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: auto;
    max-height: 220px;
    margin: 0 calc(24px - var(--glow-room));
  }
  .service-content {
    margin: 0;
    padding: 8px var(--glow-room) 16px;
  }
  .service-category {
    margin-bottom: 12px;
    font-size: 11px;
  }
  .service-title {
    font-size: 30px;
  }
  .service-heading {
    gap: 14px;
  }
  .service-title-icon {
    width: 48px;
    height: 48px;
  }
  .service-tagline {
    margin-top: 10px;
    font-size: 18px;
  }
  .service-description {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
  }
  .service-details,
  .service-hint {
    margin-top: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .simulator-page > .step-stage {
    transition: none;
  }
}

.step-stage {
  /* El escenario del vuelo de entrada se posiciona contra esta caja, y el
     teléfono entra por su borde de abajo. */
  position: relative;
  flex: 1;
  min-height: 0;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Un poco más que el hueco de la barra: el teléfono entra por abajo y quiere
     aire arriba. */
  padding: calc(var(--stepbar-clear) + 8px) 24px 28px;
}

/* En columna, el alto es lo que manda: se pide el del teléfono a su tamaño
   máximo —372px de ancho, en su proporción— y el flex lo encoge si la ventana
   no da para tanto. El ancho sale solo, del `aspect-ratio` de .phone, así que
   al encogerse sigue siendo un teléfono y no una rendija. */
.step-stage .phone {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  height: 806px;
  min-height: 0;
}

.step-stage .reset {
  flex: 0 0 auto;
}

/* Órbita de diez piezas: dos capas reales para que arriba desaparezcan detrás
   de la pantalla y abajo crucen delante, también con el marco CSS de respaldo. */
.phone-orbit-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 280ms ease,
    visibility 0s linear 280ms;
}
.phone-orbit-back {
  z-index: 0;
}
.phone-orbit-front {
  z-index: 4;
}
.has-phone-orbit > .phone-orbit-layer {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 0s;
}
.step-stage:has(> .step-flight) > .phone-orbit-layer {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.phone-orbit-tile {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  border-radius: 27%;
  color: var(--accent);
  background: var(--tile-face);
  border: 1px solid var(--tile-edge);
  box-shadow: var(--tile-lift);
  pointer-events: none;
  user-select: none;
}
.phone-orbit-tile::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 24%;
  border: 1px solid rgb(255 255 255 / 40%);
  box-shadow: inset 0 1px 3px rgb(255 255 255 / 70%);
}
.phone-orbit-tile svg {
  width: 37%;
  height: 37%;
  filter: drop-shadow(0 1px 0 #fff);
}
.has-phone-orbit .phone-orbit-tile {
  will-change: transform;
}
.phone-orbit-toggle {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-2);
  background: var(--surface-2);
  cursor: pointer;
  transition: background 160ms ease;
}
.phone-orbit-toggle[hidden] {
  display: none;
}
.phone-orbit-toggle svg {
  width: 18px;
  height: 18px;
}
.phone-orbit-toggle:hover {
  background: var(--accent-soft);
}
.phone-orbit-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .phone-orbit-layer,
  .has-phone-orbit > .phone-orbit-layer,
  .phone-orbit-toggle {
    transition: none;
  }
}

/* ---------- el teléfono de titanio del paso 2 ---------- */
/* La silueta coincide con pasos/phone.js (372 × 806, radio 50). El marco CSS
   es también el respaldo completo cuando el navegador no tiene WebGL. */
.step-stage .phone--device {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 13.4409% / 6.2035%;
  background: linear-gradient(
    118deg,
    #f1f7ec 0%,
    #a9bab0 12%,
    #435b4c 30%,
    #c3d1c5 53%,
    #617b6c 72%,
    #e6eee3 89%,
    #40594a 100%
  );
  box-shadow: none;
}
.phone--device::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 2px 3px rgb(13 31 21 / 16%),
    0 12px 18px -8px rgb(18 44 29 / 24%),
    0 36px 60px -16px rgb(29 56 41 / 24%),
    0 66px 100px -35px rgb(45 79 58 / 16%);
  pointer-events: none;
}
.phone--device > .device-screen {
  position: absolute;
  inset: 1.4888% 3.2258%;
  border-radius: 10.9195% / 4.8593%;
  overflow: hidden;
  background: #f7f8fa;
  z-index: 1;
}
.phone--device > span {
  position: absolute;
  pointer-events: none;
}
.phone--device .device-rim {
  inset: 0.55% 1.2%;
  border-radius: 12.7% / 5.75%;
  background: #0a100d;
  box-shadow:
    0 0 0 1px rgb(235 248 236 / 64%),
    inset 0 0 0 1px #273b2e;
}
.phone--device .device-island {
  z-index: 2;
  top: 2.4814%;
  left: 38.172%;
  width: 23.656%;
  height: 2.9777%;
  border-radius: 999px;
  background: linear-gradient(155deg, #1a2521, #020605 60%);
  box-shadow: inset 0 0 0 0.5px #2a3530;
}
.phone--device .device-island::after {
  content: "";
  position: absolute;
  right: 12%;
  top: 30%;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 28%,
    #8297b9 0 8%,
    #152f43 20%,
    #071017 58%,
    #35463f 75%,
    #080f0c 80%
  );
}
.phone--device .device-earpiece {
  z-index: 2;
  top: 0.7%;
  left: 44.35%;
  width: 11.3%;
  height: 1.5px;
  border-radius: 10px;
  background: #17251d;
}
.phone--device .device-home {
  z-index: 2;
  bottom: 2.55%;
  left: 35%;
  width: 30%;
  height: 4px;
  border-radius: 999px;
  background: #17231d;
}
.phone--device :is(.device-power, .device-action, .device-volume-up, .device-volume-down) {
  width: 4px;
  left: -3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #364d3f, #bbcdbd 55%, #4c6856);
  box-shadow: 0 0 0 0.5px #435d4c;
}
.phone--device .device-power {
  left: auto;
  right: -3px;
  top: 28.4%;
  height: 8.7%;
  border-radius: 0 3px 3px 0;
}
.phone--device .device-action {
  top: 20.35%;
  height: 2.73%;
}
.phone--device .device-volume-up {
  top: 26.15%;
  height: 5.83%;
}
.phone--device .device-volume-down {
  top: 33.85%;
  height: 5.83%;
}
.step-stage .phone--device.has-hardware {
  background: transparent;
}
.phone--device.has-hardware
  > :is(
    .device-rim,
    .device-island,
    .device-earpiece,
    .device-power,
    .device-action,
    .device-volume-up,
    .device-volume-down
  ) {
  visibility: hidden;
}
.phone-hardware {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
/* Tapa de respaldo durante la vuelta, visible sólo si WebGL no está dibujando.
   CSS3D mueve esta cara por separado; no es el chat visto desde atrás. */
.phone-back {
  border-radius: 13.4409% / 6.2035%;
  backface-visibility: hidden;
  background: linear-gradient(135deg, #c2d1c3, #8fa995 38%, #6c8a76 78%, #aec2af);
  border: 3px solid #a5b7a5;
  box-shadow:
    inset 0 0 0 1px #e5eee1,
    0 18px 48px rgb(16 39 24 / 18%);
}
.phone-back::before {
  content: "";
  position: absolute;
  top: 6.5%;
  left: 7%;
  width: 39%;
  height: 19%;
  border-radius: 24%;
  background:
    radial-gradient(
      circle at 31% 28%,
      #172b39 0 11%,
      #030b09 12% 16%,
      #bdcbbb 17% 19%,
      transparent 20%
    ),
    radial-gradient(
      circle at 31% 73%,
      #172b39 0 11%,
      #030b09 12% 16%,
      #bdcbbb 17% 19%,
      transparent 20%
    ),
    radial-gradient(
      circle at 75% 50%,
      #172b39 0 11%,
      #030b09 12% 16%,
      #bdcbbb 17% 19%,
      transparent 20%
    ), linear-gradient(135deg, #9fb69f, #67866f);
  box-shadow:
    inset 0 0 0 1px #d4dfce,
    2px 3px 6px rgb(21 45 26 / 24%);
}
/* La isla y el indicador de inicio ocupan espacio físico, también en Flows.
   Nada del aparato tapa texto, botones, el scroll o los campos del simulador. */
.phone--device .wa-status {
  height: 46px;
  padding-inline: 20px;
}
.phone--device .wa-composer {
  padding-bottom: 23px;
}
.phone--device :is(.wa-flow, .wa-picker) {
  padding-top: 38px;
  padding-bottom: 18px;
  border-radius: inherit;
}
.phone--device .wa-sheet {
  padding-bottom: 18px;
}

/* ---------- el vuelo de entrada del teléfono (pasos/entrance.js) ---------- */
/* Lo dibuja el CSS3DRenderer de three.js: el teléfono de verdad, movido por una
   matriz. Estas dos clases son todo lo que necesita de aquí — la escena donde
   vuela y el hueco que deja mientras no está. */

/* La escena cubre el paso entero, y recorta: el teléfono arranca por fuera del
   borde de abajo y ahí no se ve. No atrapa el puntero —de eso se encarga el
   propio teléfono, al que el renderer sí se lo devuelve—, así que el botón de
   abajo se sigue pudiendo apretar mientras el otro sube. */
.step-flight {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* El hueco del teléfono mientras vuela: mismo tamaño, nada dentro. Sin él, el
   botón de «Reiniciar» se centraría solo y brincaría al aterrizar. */
.step-ghost {
  flex: 0 0 auto;
}

/* ---------- el MacBook y la presentación del dashboard ---------- */
.step-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: var(--stepbar-clear) 24px 22px;
}

/* El hueco donde three.js encuadra el MacBook. Las dos capas —el iframe y el
   aluminio— se apilan aquí, así que necesita ser el bloque de referencia. */
.mac {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  isolation: isolate;
  overflow: hidden;
}
.step-panel.step-panel--laptop {
  padding: 0;
}
.mac-css,
.mac-gl {
  position: absolute;
  inset: 0;
}
.mac-css {
  z-index: 1;
  pointer-events: none;
}
/* El aluminio va encima del iframe, pero no le quita el clic: donde va la
   pantalla no dibuja nada, y el puntero lo atraviesa completo. */
.mac-gl {
  z-index: 2;
  pointer-events: none;
}
/* CSS3DRenderer le pone su propia perspectiva al contenedor; el iframe sólo
   tiene que no traer marco ni fondo propio. */
.mac-screen {
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  backface-visibility: hidden;
}

/* Sin WebGL el monitor no se arma y el tablero se queda en el marco de siempre. */
.step-panel.is-bare .mac {
  display: flex;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.step-panel.step-panel--laptop.is-bare {
  padding: var(--stepbar-clear) 24px 22px;
}
.step-panel.is-bare .mac-screen {
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  :root {
    --stepbar-clear: 92px;
  }
  .stepbar {
    gap: 10px;
    padding: 16px 12px;
  }
  .arrow {
    width: 32px;
    height: 32px;
  }
  .arrow svg {
    width: 15px;
    height: 15px;
  }
  .pills {
    gap: 8px;
  }
  .pill-link {
    width: 16px;
  }
  .pill {
    padding: 8px 15px 8px 9px;
    gap: 8px;
  }
  .pill.is-current {
    transform: scale(1.1);
  }
  .step-page {
    padding: var(--stepbar-clear) 22px;
  }
  .step-page h1 {
    font-size: 34px;
  }
  .step-stage {
    padding: calc(var(--stepbar-clear) + 8px) 14px 18px;
  }
  .step-panel {
    padding: var(--stepbar-clear) 14px 18px;
  }
}

/* ---------- paso 1: el registro, un renglón por persona ---------- */
.reg {
  /* `safe` importa: cuando la tarjeta no cabe en la ventana, centrar la
     empujaría hacia arriba y quedaría debajo de la barra fija, sin manera de
     bajar a ella. Así, si no cabe, arranca desde arriba. */
  align-content: safe center;
  gap: 0;
  /* Más ancha que la conversación de antes: tres columnas sobre un surco
     necesitan aire, o el correo se come al nombre. */
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

/* El anillo interior de las teclas: un filo de luz por dentro del borde. */
.reg-ask-icon::before,
.reg-seal::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 24%;
  border: 1px solid rgb(255 255 255 / 40%);
  box-shadow: inset 0 1px 3px rgb(255 255 255 / 70%);
  pointer-events: none;
}

.reg-card {
  width: 100%;
  display: grid;
  gap: 26px;
  padding: 34px 36px 32px;
  /* En píxeles y no en porcentaje: un radio relativo sobre una caja ancha se
     estira y deja de ser un cuadrado redondeado. */
  border-radius: 30px;
  background: var(--tile-face);
  border: 1px solid var(--tile-edge);
  /* Sin sombra: la que flota es cada tecla, no el panel que las contiene. Una
     sombra aquí compite con las de adentro y las aplana. */
  box-shadow: none;
  text-align: left;
}

/* ---------- el riel ---------- */
/* Un punto por renglón: nacen y se van con ellos, y el riel los reparte. */
.reg-rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 10px;
  padding: 0 3px;
}
.reg-rail-track {
  position: absolute;
  left: 3px;
  right: 3px;
  height: 3px;
  border-radius: 3px;
  background: rgb(128 153 133 / 20%);
  box-shadow:
    inset 0 1px 2px rgb(50 78 58 / 16%),
    0 1px 0 rgb(255 255 255 / 85%);
}
.reg-rail-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.reg-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e2eae2;
  /* El halo recorta el riel alrededor del punto, así que toma el color de la
     cara de la tarjeta y no el blanco liso de antes. */
  box-shadow:
    0 0 0 4px #f8fbf8,
    inset 0 1px 1px rgb(255 255 255 / 90%);
  transition: background 0.3s ease;
}
.reg-dot[data-state="live"],
.reg-dot[data-state="done"] {
  background: var(--accent);
}

/* ---------- la cabecera ---------- */
.reg-ask {
  display: grid;
  gap: 14px;
  align-content: start;
}

/* La misma tecla que orbita el teléfono, con el ícono de la pregunta dentro. */
.reg-ask-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 27%;
  color: var(--accent);
  background: var(--tile-face);
  border: 1px solid var(--tile-edge);
  box-shadow: var(--tile-lift);
}
.reg-ask-icon svg {
  width: 37%;
  height: 37%;
  filter: drop-shadow(0 1px 0 #fff);
}

.reg-ask-text {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -1px;
}
/* Cada palabra entra por su cuenta, así que necesita ser su propia caja. */
.reg-ask-text span {
  display: inline-block;
}

.reg-hint {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- la tabla ---------- */
.reg-stage {
  display: grid;
  gap: 22px;
  align-content: start;
}
.reg-table {
  display: grid;
  gap: 4px;
}

/* Las columnas, compartidas por los títulos y cada renglón: el número, las tres
   columnas y el botón de quitar. Viven en una variable para que no se
   desalineen si una cambia. */
.reg-head,
.reg-row {
  display: grid;
  grid-template-columns: var(--reg-columns, 26px 1.1fr 1.15fr 1.3fr 30px);
  column-gap: 16px;
  align-items: end;
}
.reg-head {
  padding: 0 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.reg-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* `overflow: hidden` para que al cerrarse el renglón se pueda encoger a cero
   sin que sus campos asomen por abajo. */
.reg-row {
  position: relative;
  padding: 6px 0 0;
  overflow: hidden;
}

/* El número va en mono: se lee como un contador, no como parte del nombre. */
.reg-row-n {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--faint);
  padding-bottom: 28px;
}

/* Cada columna es el campo de antes: texto sobre un surco, reclamo debajo. */
.reg-cell {
  position: relative;
  display: grid;
  min-width: 0;
  padding-bottom: 20px;
}
/* La etiqueta de columna la lee el lector de pantalla; en pantalla ya está en
   la cabecera de la tabla y repetirla en cada renglón sobra. En angosto, donde
   la cabecera no existe, vuelve a verse. */
.reg-lab {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El renglón del campo: la lada a la izquierda y el número a la derecha, los
   dos sobre el mismo surco. */
.reg-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* La lada va lisa, sin la porcelana del resto de la tarjeta: es una pastilla
   sentada justo encima del surco del campo, y su sombra le caería atravesada.
   Plana, la lada y el número se leen como un solo teléfono sobre una sola
   raya, que es lo que son.

   El `<select>` sigue siendo el de siempre, sin su apariencia: el menú que
   abre es el del sistema — con su rueda en el teléfono y su teclado en la
   Mac. */
.reg-lada {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.reg-lada-pick {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--text);
  appearance: none;
  background: none;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  padding: 6px 18px 6px 0;
  cursor: pointer;
  transition: color 0.16s ease;
}
.reg-lada-pick:hover {
  color: var(--accent);
}
.reg-lada-pick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.reg-lada-caret {
  position: absolute;
  right: 2px;
  width: 13px;
  height: 13px;
  color: var(--faint);
  /* El clic es del `select`: la flecha sólo está dibujada encima. */
  pointer-events: none;
  transition: color 0.16s ease;
}
.reg-lada:hover .reg-lada-caret {
  color: var(--accent);
}

.reg-cell input {
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 6px 2px;
  width: 100%;
  min-width: 0;
}
.reg-cell input:focus {
  outline: none;
}
.reg-cell input::placeholder {
  color: var(--faint);
  font-weight: 400;
}

/* El subrayado hace de campo: una caja completa alrededor de cada dato se
   vería como formulario, y esto se lee como una hoja que se está llenando. */
.reg-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 2px;
  border-radius: 2px;
  background: rgb(128 153 133 / 34%);
  /* Un filo de luz debajo: la raya se lee como un surco en la porcelana y no
     como una línea pintada encima. */
  box-shadow: 0 1px 0 rgb(255 255 255 / 90%);
  transform-origin: left center;
  transition: background 0.2s ease;
}
.reg-cell:focus-within .reg-rule {
  background: var(--accent);
}
.reg-cell[data-invalid] .reg-rule {
  background: #b3261e;
}

.reg-gripe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: #b3261e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quitar un renglón: una tecla chica, apagada hasta que el renglón se toca. */
.reg-drop {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 22px;
  color: var(--faint);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.55;
  transition:
    color 0.16s ease,
    opacity 0.16s ease,
    background 0.16s ease;
}
.reg-drop svg {
  width: 15px;
  height: 15px;
}
.reg-row:hover .reg-drop,
.reg-row:focus-within .reg-drop {
  opacity: 1;
}
.reg-drop:hover {
  color: #b3261e;
  background: rgb(179 38 30 / 8%);
}
.reg-drop:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- el pie ---------- */
.reg-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.reg-count {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
}
.reg-go {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 14px 22px 14px 26px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    box-shadow 0.22s ease,
    transform 0.22s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.reg-go svg {
  width: 18px;
  height: 18px;
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.reg-go {
  box-shadow:
    -3px -3px 9px rgb(255 255 255 / 55%),
    8px 12px 22px rgb(50 78 58 / 26%),
    inset 1px 1px 1px rgb(255 255 255 / 35%),
    inset -2px -3px 6px rgb(12 40 24 / 24%);
}
.reg-go:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  box-shadow:
    -3px -3px 9px rgb(255 255 255 / 55%),
    12px 18px 30px rgb(50 78 58 / 30%),
    inset 1px 1px 1px rgb(255 255 255 / 35%),
    inset -2px -3px 6px rgb(12 40 24 / 24%);
}
/* Al pulsarlo se hunde: la luz de arriba se apaga y la sombra se mete adentro. */
.reg-go:active {
  box-shadow:
    inset 3px 4px 9px rgb(12 40 24 / 32%),
    inset -1px -1px 3px rgb(255 255 255 / 20%);
}
.reg-go:hover svg {
  transform: translateX(4px);
}
.reg-go:active {
  transform: scale(0.98);
}
.reg-go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.reg-go:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}
.reg-send-error {
  margin: 8px 4px 0;
  color: #a42b25;
  font-size: 13px;
  font-weight: 550;
  text-align: right;
}

/* ---------- activadas ---------- */
.reg-done {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
  padding: 18px 0 28px;
}
/* El sello es la misma tecla, redonda: es el final del recorrido y una moneda
   cierra mejor que un cuadrado. */
.reg-seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--tile-face);
  border: 1px solid var(--tile-edge);
  box-shadow: var(--tile-lift);
}
.reg-seal::before {
  border-radius: 50%;
}
.reg-seal svg {
  width: 40%;
  height: 40%;
  filter: drop-shadow(0 1px 0 #fff);
}
.reg-done h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.8px;
}

/* Las personas dadas de alta, como constancia. */
.reg-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  max-width: 620px;
}
/* Lo activado también flota, en pequeño: la luz cae del mismo lado, pero la
   sombra es corta porque una pastilla de 30px con la sombra de la tarjeta se
   vería despegada de ella. */
.reg-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  background: var(--tile-face);
  border: 1px solid var(--tile-edge);
  box-shadow:
    -3px -3px 8px rgb(255 255 255 / 80%),
    4px 6px 11px rgb(50 78 58 / 14%),
    inset 1px 1px 2px #fff;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 500;
  max-width: 100%;
}
.reg-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reg-chip svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* El botón hereda el verde del de «Activar cuentas», pero aquí manda la
   rejilla del final: el `margin-left: auto` que lo empujaba a la derecha del
   pie sobra, y lo tiraría contra el borde de la tarjeta. */
.reg-next {
  margin-left: 0;
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .reg-go,
  .reg-go:active,
  .reg-go:hover svg {
    transform: none;
  }
}

/* En angosto la tabla se apila: cada persona es una tarjeta de tres renglones,
   con su número arriba a la izquierda y el botón de quitar arriba a la
   derecha. Las etiquetas vuelven a cada campo, porque la cabecera se va. */
@media (max-width: 760px) {
  .reg-card {
    padding: 24px 22px;
    border-radius: 22px;
  }
  .reg-ask-text {
    font-size: 24px;
  }
  .reg-head {
    display: none;
  }
  .reg-row {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 30px 0 4px;
    border-top: 1px solid rgb(128 153 133 / 22%);
  }
  .reg-row:first-child {
    border-top: 0;
    padding-top: 22px;
  }
  .reg-row-n {
    position: absolute;
    top: 8px;
    left: 0;
    padding: 0;
  }
  .reg-row:first-child .reg-row-n {
    top: 0;
  }
  .reg-drop {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 1;
  }
  .reg-row:first-child .reg-drop {
    top: -8px;
  }
  .reg-cell {
    padding-bottom: 22px;
  }
  .reg-lab {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .reg-rule {
    bottom: 22px;
  }
  .reg-foot {
    flex-wrap: wrap;
  }
}