/*
 * Activación web de Números Claros (Negocio Pro y Finance Pro), versión 3 (27-oct-2026).
 *
 * Sistema de diseño v3 de Números Claros (minimalista, medido en Apple, Linear y Family):
 *   - Fondo gris claro #F5F5F7, tarjetas blancas, texto en tres tonos y UN solo color de acción (azul).
 *   - La marca entra por el logo de tres barras (celeste, azul, turquesa), el nombre del producto con
 *     el degradado azul → turquesa y el visto de éxito en turquesa.
 *   - Movimiento: los estados (hover, foco, elegido) solo cambian color o borde, en 100-200 ms y sin
 *     rebotes; lo que aparece entra con un fundido y 8 px de subida (curva de salida suave).
 *     Con «reducir movimiento» no se anima nada.
 * Sin tipografías ni imágenes externas: todo sale de este mismo sitio (la política de seguridad
 * del servidor solo permite recursos propios). Tampoco hay estilos "en línea" en el HTML ni data: URLs.
 * Pensada primero para celular: todo lo de pantalla ancha va en los @media del final.
 */

:root {
  color-scheme: light dark;
  --fondo: #F5F5F7;
  --tarjeta: #FFFFFF;
  --texto: #1D1D1F;
  --texto-2: #6E6E73;
  --texto-3: #86868B;
  --separador: rgba(0, 0, 0, .08);
  --borde: #D2D2D7;
  --relleno: #F2F2F5;
  --entrada: #FFFFFF;
  --acento: #0064E1;            /* texto, bordes y anillos de foco */
  --boton: #0064E1;             /* relleno del botón principal: 5,7:1 con texto blanco */
  --boton-hover: #0057C4;
  --acento-suave: rgba(0, 100, 225, .08);
  --anillo: rgba(0, 100, 225, .24);
  --exito: #00B894;             /* turquesa de la marca (solo el icono) */
  --exito-boton: #0A7F5A;       /* verde del botón «¡Copiada!»: 5,1:1 con texto blanco */
  --error: #C4281C;
  --error-fondo: #FFF3F2;
  --whatsapp: #25D366;
  --whatsapp-fondo: #E9F9EF;
  --whatsapp-texto: #0B5C2C;
  --degradado: linear-gradient(90deg, #1E6FE0 0%, #1E88E5 45%, #00A884 100%);
  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .05);
  --sombra-flotante: 0 2px 6px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .12);
  --radio: 20px;
  --curva: cubic-bezier(.4, 0, .6, 1);        /* cambios de estado (Apple) */
  --curva-salida: cubic-bezier(.16, 1, .3, 1); /* lo que entra a la pantalla */
  --fuente: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-codigo: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --tarjeta: #1C1C1E;
    --texto: #F5F5F7;
    --texto-2: #A1A1A6;
    --texto-3: #8E8E93;
    --separador: rgba(255, 255, 255, .1);
    --borde: #48484A;
    --relleno: #2C2C2E;
    --entrada: #2C2C2E;
    --acento: #4DA3FF;
    --boton: #0071E3;
    --boton-hover: #0A7CF0;
    --acento-suave: rgba(77, 163, 255, .14);
    --anillo: rgba(77, 163, 255, .32);
    --exito-boton: #0A7F5A;
    --error: #FF6B5E;
    --error-fondo: rgba(255, 69, 58, .12);
    --whatsapp-fondo: rgba(37, 211, 102, .14);
    --whatsapp-texto: #7BE3A3;
    --degradado: linear-gradient(90deg, #5AB0FF 0%, #4FC3F7 45%, #2FD3AE 100%);
    --sombra: none;
    --sombra-flotante: 0 10px 30px rgba(0, 0, 0, .5);
  }
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.012em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }

h1, h2, h3, p, ol, figure { margin: 0; }

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

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

.saltar {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 10;
  background: var(--tarjeta);
  color: var(--acento);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: var(--sombra-flotante);
}
.saltar:focus { top: 12px; }

/* ---------- Cabecera ---------- */

.cabecera__interior {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
}
.marca__logo { flex: none; }

.cabecera__seccion {
  font-size: 13px;
  color: var(--texto-2);
}

/* ---------- Contenido ---------- */

.contenido {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px 120px;          /* espacio para que la esquina de soporte nunca tape el final */
  outline: none;
}

/* ---------- Presentación: título y los tres pasos ---------- */

.presentacion {
  text-align: center;
  padding: 18px 0 24px;
  animation: aparecer 420ms var(--curva-salida) both;
}

.presentacion__titulo {
  font-size: clamp(32px, 9vw, 48px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.028em;
}

/* El nombre del producto lleva el degradado de la marca. */
.presentacion__producto {
  background: var(--degradado);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--acento);
}

.presentacion__texto {
  margin-top: 10px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--texto-2);
}

.pasos {
  list-style: none;
  padding: 0;
  margin: 26px auto 0;
  max-width: 480px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}

.paso {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-top: 10px;
  border-top: 3px solid var(--borde);
  color: var(--texto-3);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  transition: color 200ms var(--curva), border-color 200ms var(--curva);
}
.paso__numero { font-variant-numeric: tabular-nums; font-weight: 600; }
.paso[aria-current="step"] { border-top-color: var(--acento); color: var(--texto); }
.paso--hecho { border-top-color: var(--acento); color: var(--texto-2); }

/* ---------- Tutorial «Mira cómo se hace» (oculto hasta que exista el video) ---------- */

.tutorial { margin-top: 18px; }
.tutorial__boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background-color 100ms var(--curva);
}
.tutorial__boton::-webkit-details-marker { display: none; }
.tutorial__boton:hover { background: rgba(0, 100, 225, .13); }
.tutorial__duracion { font-weight: 400; opacity: .8; }
.tutorial__marco {
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  animation: aparecer-corto 320ms var(--curva-salida) both;
}
.tutorial__video { display: block; width: 100%; height: 100%; }

/* ---------- Tarjetas ---------- */

.tarjeta {
  background: var(--tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px 18px 22px;
  animation: aparecer 420ms var(--curva-salida) 60ms both;
}
.tarjeta + .tarjeta { margin-top: 16px; }

.tarjeta__titulo {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
  outline: none;
}

.tarjeta--aviso .tarjeta__titulo { margin-bottom: 8px; }
.aviso__texto { color: var(--texto-2); margin-bottom: 18px; }

/* ---------- Campos ---------- */

.campo { margin: 0; }
.campo + .campo { margin-top: 30px; }

.campo__etiqueta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 10px;
}
.campo__etiqueta--chica { font-size: 15px; margin-bottom: 8px; color: var(--texto-2); font-weight: 500; }
.campo__nota { font-weight: 400; color: var(--texto-2); font-size: 15px; }

/* Número de cada paso del formulario */
.num {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--relleno);
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.entrada {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font: inherit;
  font-size: 17px;              /* ≥ 16 px: evita el zoom automático en iPhone */
  letter-spacing: -.01em;
  color: var(--texto);
  background: var(--entrada);
  border: 1px solid var(--borde);
  border-radius: 12px;
  transition: border-color 150ms var(--curva), box-shadow 150ms var(--curva), background-color 150ms var(--curva);
}
.entrada::placeholder { color: var(--texto-3); opacity: 1; }
.entrada:hover { border-color: var(--texto-3); }
.entrada:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 4px var(--anillo);
}
.entrada[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-fondo);
}
.entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(196, 40, 28, .18); }

.entrada--codigo {
  font-family: var(--fuente-codigo);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
  resize: none;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.entrada--licencia {
  font-family: var(--fuente-codigo);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  resize: none;
  word-break: break-all;
  overflow-wrap: anywhere;
  color: var(--texto-2);
  background: var(--relleno);
  border-color: transparent;
  margin-bottom: 14px;
}

.campo__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 8px;
}

.campo__ayuda {
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto-2);
  margin-top: 8px;
}
.campo__ayuda--arriba { margin: -4px 0 12px; }
.campo__fila .campo__ayuda { margin-top: 0; flex: 1 1 200px; }

/* Código ya recibido desde el programa: la ayuda lleva un visto. */
.campo--listo #ayuda-codigo { color: var(--texto); }
.campo--listo #ayuda-codigo::before {
  content: "";
  display: inline-block;
  width: 5px; height: 10px;
  margin: 0 9px 2px 3px;
  border: solid var(--exito);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.campo__vista {
  margin-top: 8px;
  font-size: 14px;
  color: var(--texto);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.campo__error {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--error);
  animation: aparecer-corto 200ms var(--curva-salida) both;
}

/* ---------- Selector de producto con la captura de cada programa ---------- */

.productos {
  border: 0;
  padding: 0;
  margin: 30px 0 0;
  min-width: 0;
}
.productos .campo__etiqueta { padding: 0; width: 100%; }

.productos__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.producto {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* El botón de opción real cubre toda la tarjeta (invisible): se maneja con teclado y lectores de pantalla. */
.producto__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.producto__tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px;
  background: var(--tarjeta);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--borde);
  transition: box-shadow 150ms var(--curva), background-color 150ms var(--curva);
}
.producto:hover .producto__tarjeta { box-shadow: inset 0 0 0 1px var(--texto-3); }

.producto__marco {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 11px;
  overflow: hidden;
  background: var(--relleno);
}
.producto__marco::after {          /* filo de 1 px sobre la captura, como en las fotos de producto */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.producto__captura {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  transition: transform 300ms cubic-bezier(0, 0, .5, 1);
}
.producto:hover .producto__captura { transform: scale(1.03); }

.producto__pie {
  display: grid;
  gap: 2px;
  padding: 10px 6px 6px;
}
.producto__nombre { font-weight: 600; font-size: 16px; line-height: 1.25; }
.producto__detalle { font-size: 13px; line-height: 1.3; color: var(--texto-2); }

/* Círculo de «elegido» sobre la captura, dibujado con CSS (sin imágenes). */
.producto__tarjeta::before {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .12);
  transition: background-color 150ms var(--curva), box-shadow 150ms var(--curva);
}
.producto__tarjeta::after {
  content: "";
  position: absolute;
  top: 17px; right: 20px;
  z-index: 2;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: transform 200ms var(--curva-salida), opacity 120ms var(--curva);
}

.producto__radio:checked + .producto__tarjeta {
  box-shadow: inset 0 0 0 2px var(--acento);
  background: var(--acento-suave);
}
.producto__radio:checked + .producto__tarjeta::before {
  background: var(--acento);
  box-shadow: 0 0 0 2px var(--tarjeta), 0 1px 3px rgba(0, 0, 0, .2);
}
.producto__radio:checked + .producto__tarjeta::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.producto__radio:focus-visible + .producto__tarjeta {
  outline: 3px solid var(--anillo);
  outline-offset: 3px;
}

/* ---------- ¿Dónde está el código? (captura señalada) ---------- */

.donde { margin-top: 14px; }

.donde__titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--acento);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.donde__titulo::-webkit-details-marker { display: none; }
.donde__flecha { transition: transform 200ms var(--curva); }
.donde[open] .donde__flecha { transform: rotate(180deg); }
.donde[open] .captura { animation: aparecer-corto 320ms var(--curva-salida) both; }

.captura { margin-top: 6px; }

.captura__marco {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--separador), 0 6px 20px rgba(0, 0, 0, .06);
}
.captura__marco--oscuro { background: #111; }
.captura__imagen {
  display: block;
  width: 100%;
  height: auto;
}

/* Recuadro que señala dónde mirar: un borde azul con un halo que late tres veces y se queda quieto. */
.captura__zona {
  position: absolute;
  border: 2px solid var(--boton);
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(0, 100, 225, .22);
  animation: senalar 1600ms ease-in-out 400ms 3;
}
.captura__zona[data-n]::after {
  content: attr(data-n);
  position: absolute;
  top: -11px; left: -11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--boton);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}

/* Posiciones en % de cada captura (las imprime capturas/recortar.py; cambian si cambia la captura). */
.captura__zona--np-codigo  { left: 2.45%;  top: 29.51%; width: 94.92%; height: 7.77%; }
.captura__zona--np-pegar   { left: 69.88%; top: 53.2%;  width: 27.5%;  height: 7.57%; }
.captura__zona--np-activar { left: 50.44%; top: 84.27%; width: 24.52%; height: 8.35%; }
.captura__zona--fp-codigo  { left: 23.26%; top: 50%;    width: 53.34%; height: 9.62%; }
.captura__zona--fp-pegar   { left: 76.32%; top: 70.51%; width: 22.28%; height: 10.26%; }
.captura__zona--fp-activar { left: 45.68%; top: 91.2%;  width: 9.47%;  height: 7.6%; }

.captura__pie {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto-2);
}
.captura__pie b { color: var(--texto); font-weight: 600; }

/* ---------- PIN ---------- */

.entrada--pin {
  max-width: 14rem;
  font-family: var(--fuente-codigo);
  font-size: 22px;
  letter-spacing: .3em;
}

/* ---------- Botones ---------- */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 100ms var(--curva), color 100ms var(--curva), transform 100ms var(--curva), opacity 150ms var(--curva);
}
.boton:active:not(:disabled) { transform: scale(.98); }
.boton:disabled, .boton[aria-disabled="true"] { cursor: progress; opacity: .72; }

.boton--principal {
  background: var(--boton);
  color: #fff;
}
.boton--principal:hover:not(:disabled) { background: var(--boton-hover); }

.boton--grande {
  width: 100%;
  min-height: 54px;
  margin-top: 30px;
  font-size: 17px;
  border-radius: 14px;
}

.boton--discreto {
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px 8px 13px;
  border-radius: 999px;
}
.boton--discreto:hover { background: rgba(0, 100, 225, .13); }

.boton--whatsapp {
  background: var(--whatsapp-fondo);
  color: var(--whatsapp-texto);
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-size: 15px;
}
.boton--whatsapp svg { color: var(--whatsapp); }
.boton--whatsapp:hover { background: rgba(37, 211, 102, .2); }

/* Giro de «Activando…» (solo mientras se espera la respuesta) */
.boton__giro {
  display: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: girar 700ms linear infinite;
}
.boton[aria-busy="true"] .boton__giro { display: inline-block; }

/* Copiar → ¡Copiada! (el botón pasa a verde y el icono a un visto) */
.boton__icono-listo { display: none; }
.boton--hecho, .boton--hecho:hover:not(:disabled) { background: var(--exito-boton); }
.boton--hecho .boton__icono-copiar { display: none; }
.boton--hecho .boton__icono-listo { display: inline; animation: aparecer-corto 200ms var(--curva-salida) both; }

.enlace {
  display: block;
  margin: 18px auto 0;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--acento);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.enlace:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Alertas ---------- */

.alerta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 26px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--error-fondo);
  outline: none;
  animation: aparecer-corto 250ms var(--curva-salida) both;
}
.alerta__icono { flex: none; color: var(--error); margin-top: 1px; }
.alerta__cuerpo { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.alerta__texto { font-size: 15px; line-height: 1.45; color: var(--texto); }
.alerta + .boton--grande { margin-top: 16px; }

/* ---------- Textos al pie del formulario ---------- */

.recuperacion {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto-2);
  text-align: center;
}
.recuperacion strong { color: var(--texto); font-weight: 600; }

.privacidad {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-3);
  text-align: center;
}
.privacidad svg { display: inline-block; vertical-align: -2px; margin-right: 5px; }

/* ---------- Resultado ---------- */

.resultado__cabecera {
  text-align: center;
  margin-bottom: 22px;
}
.resultado__icono {
  display: block;
  margin: 2px auto 12px;
  color: var(--exito);
  animation: brotar 450ms var(--curva-salida) 120ms both;
}
.resultado__visto {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: trazar 380ms var(--curva-salida) 380ms forwards;
}
.resultado__nota {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 14px;
  font-weight: 500;
}
.resultado__nombre {
  margin-top: 6px;
  font-size: 15px;
  color: var(--texto-2);
  overflow-wrap: anywhere;
}

#boton-copiar { margin-top: 0; }

.copiado {
  min-height: 22px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--texto-2);
  text-align: center;
}
.copiado:empty { min-height: 0; margin-top: 0; }

.siguiente {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--separador);
}
.siguiente__titulo { font-weight: 600; font-size: 17px; margin-bottom: 12px; }
.instrucciones { display: grid; gap: 10px; margin-bottom: 16px; }
.instruccion {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.35;
}
.instruccion strong { font-weight: 600; }

.pie {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--texto-3);
}

/* ---------- Esquina de soporte por WhatsApp (siempre a la mano) ----------
   Celular: el círculo verde de WhatsApp (52 px) para no tapar el formulario; el texto queda para lectores de
   pantalla. Desde 600 px: la píldora con el texto completo. En pantallas táctiles se aparta mientras se escribe
   (el teclado ya ocupa media pantalla) y vuelve al salir del campo. El final de la página tiene 120 px libres. */

.soporte-fijo {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 8px 22px rgba(0, 0, 0, .18);
  transition: opacity 200ms var(--curva), transform 200ms var(--curva), background-color 150ms var(--curva);
  animation: aparecer 500ms var(--curva-salida) 400ms backwards;
}
.soporte-fijo__icono { width: 28px; height: 28px; }
.soporte-fijo__texto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.soporte-fijo:hover { background: #20BD5A; }
.soporte-fijo:active { transform: scale(.96); }

@media (pointer: coarse), (max-width: 599px) {
  body:has(.entrada:focus:not([readonly])) .soporte-fijo {
    opacity: 0;
    transform: translateY(12px) scale(.9);
    pointer-events: none;
  }
}

/* ---------- Movimiento ---------- */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes aparecer-corto {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes brotar {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: none; }
}
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes senalar {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 100, 225, .22); }
  50% { box-shadow: 0 0 0 8px rgba(0, 100, 225, .08); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .boton__giro { animation: girar 1.5s linear infinite !important; }
}

/* ---------- Pantallas más anchas ---------- */

@media (min-width: 600px) {
  .cabecera__interior { padding: 18px 24px; }
  .presentacion { padding: 40px 0 34px; }
  .presentacion__texto { font-size: 21px; }
  .pasos { margin-top: 34px; gap: 12px; font-size: 14px; }
  .paso { font-size: 14px; }
  .tarjeta { padding: 36px 40px 32px; }
  .productos__rejilla { gap: 14px; }
  .producto__nombre { font-size: 17px; }
  .producto__detalle { font-size: 14px; }
  .instruccion { font-size: 17px; }
  .soporte-fijo {
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    min-height: 46px;
    padding: 10px 18px 10px 14px;
    border-radius: 999px;
    background: var(--tarjeta);
    color: var(--texto);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    box-shadow: 0 0 0 1px var(--separador), var(--sombra-flotante);
  }
  .soporte-fijo__icono { width: 20px; height: 20px; color: var(--whatsapp); flex: none; }
  .soporte-fijo__texto { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  .soporte-fijo:hover { background: var(--relleno); }
}