/* ══════════════════════════════════════════════════════════════════════
   MasterBook — stffvb.com

   Concepto: la página ES un libro de citas. Secciones oscuras (la tapa de
   cuero, donde va el argumento) alternando con secciones de papel reglado
   (la página, donde van los datos). El oro del logo se usa como estampado
   en relieve — filetes, guardas, bordes — nunca como brillo decorativo.

   Paleta derivada del logo, no inventada:
     tinta  #090D16  fondo del círculo
     oro    #F59E0B → #D97706  degradado del aro y el separador
     verde  #22C55E  el check de confirmación (solo estados confirmados)
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ══════════════════════════════════════════════════════════════════
     La landing va en claro, con azul como único color funcional.
     ══════════════════════════════════════════════════════════════════
     Antes la portada era una tapa oscura sobre papel crema. Se pasa todo a
     claro: un negocio que entra desde el celular en la calle lee mejor sobre
     blanco, y el contraste del azul hace el trabajo que hacía el oro.

     Tripletes RGB para poder escribir rgb(var(--acento-rgb) / .12) sin
     repetir el color en cada tinte.
  */
  /* El verde de la marca, el mismo del panel: verde-700. El tono del logo
     (#22C55E) no sirve —2,28:1 con blanco encima—; este da 5,02:1 como
     texto sobre blanco y aguanta como fondo de botón. */
  --acento-rgb:       21  128 61;
  --acento-hondo-rgb: 22  101 52;
  --verde-rgb:        5   150 105;
  /* El verde de marca NO se lee como TEXTO pequeño: 3,77:1 sobre blanco,
     por debajo de AA. Este es el mismo tono oscurecido hasta 7,13:1, y es el
     que va en una frase. El de arriba sigue valiendo para un punto, un check
     o un borde, donde no hay que leer nada.
     Mismo criterio que `--verde-texto-rgb` en el panel. El tema oscuro lo
     redefine igual al base: ahí el fondo es oscuro y el que contrasta es el
     tono vivo (4,74:1 sobre la superficie oscura). */
  /* Era `22 101 52`, que ahora ES el acento hondo: el verde de «incluido» y
     el de la marca habrían quedado idénticos. Emerald-800 está a 21° de tono
     y da 7,68:1 sobre blanco. */
  --verde-texto-rgb:  6   95  70;
  /* Grises NEUTROS, sin tinte. Eran la escala `slate`, que lleva azul
     dentro: con el acento azul no se notaba, con el verde el fondo se lee
     como azulado y pelea con la marca. Mismas luminancias, croma cero. */
  --texto-rgb:        23  23  23;
  --texto-2-rgb:      99  99  99;

  /* Portada: un punto más clara que el cuerpo, para separarla sin romper la
     lectura. */
  --tinta:        #F7F7F7;
  --tinta-2:      #FFFFFF;
  --tinta-3:      #E3E3E3;
  --tinta-texto:  rgb(var(--texto-2-rgb));

  /* Cuerpo de la página */
  --papel:        #FFFFFF;
  --papel-2:      #E8E8E8;
  --papel-texto:  rgb(var(--texto-rgb));
  --papel-gris:   rgb(var(--texto-2-rgb));

  --oro:          rgb(var(--acento-rgb));
  --oro-hondo:    rgb(var(--acento-hondo-rgb));
  --oro-filete:   linear-gradient(135deg, rgb(var(--acento-rgb)), rgb(var(--acento-hondo-rgb)));

  --verde:        rgb(var(--verde-rgb));
  --verde-texto:  rgb(var(--verde-texto-rgb));
  --sobre-acento: #FFFFFF;

  /* Nombres que `registro.css` ya usaba y que NO existían aquí: estuvo todo
     este tiempo viviendo de sus respaldos (`var(--borde, #e2e8f0)`), que es
     como un valor escrito a mano que nadie revisa. Y `--texto` es una FUENTE:
     `color: var(--texto)` recibía una familia tipográfica, la declaración se
     descartaba, y el paso activo del registro nunca se destacó. */
  --borde-rgb:    229 229 229;
  --borde:        rgb(var(--borde-rgb));
  --gris:         rgb(var(--texto-2-rgb));
  --acento:       rgb(var(--acento-rgb));
  --superficie:   #FFFFFF;

  --display: 'Fraunces', Georgia, serif;
  --texto:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --libro:   'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Áreas seguras de iOS, en variables propias para poder sobreescribirlas al
     probar: Chrome sin cabecera devuelve env() en cero y el fallo no se vería
     hasta tener el teléfono en la mano. */
  --sa-arriba: env(safe-area-inset-top, 0px);
  --sa-abajo:  env(safe-area-inset-bottom, 0px);
  --sa-izq:    env(safe-area-inset-left, 0px);
  --sa-der:    env(safe-area-inset-right, 0px);

  --lim: 1180px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--texto);
  background: var(--tinta);
  color: var(--papel-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.lim { max-width: var(--lim); margin: 0 auto; padding: 0 var(--gutter); }

/* Enfoque visible sin excepción: el formulario se llena con teclado. */
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 3px; }

/* ── Tipografía ──────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; }
h1 { font-size: clamp(2.5rem, 5.3vw, 4.05rem); font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-variation-settings: 'opsz' 96, 'WONK' 1; }
h3 { font-size: 1.22rem; font-variation-settings: 'opsz' 24; letter-spacing: -.005em; }
h1 em, h2 em {
  font-style: italic; font-weight: 600;
  background: var(--oro-filete);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Rótulo de sección: la voz del índice de un libro. */
.rotulo {
  font-family: var(--libro); font-size: .72rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.rotulo::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.rotulo.centro { justify-content: center; }
.rotulo.centro::before { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.papel .rotulo { color: var(--oro-hondo); }
.tapa  .rotulo { color: var(--oro); }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border: 1px solid transparent; border-radius: 4px;
  font-family: var(--texto); font-size: .97rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, border-color .18s;

  /* En táctil, un toque con arrastre mínimo sobre el texto selecciona en vez
     de pulsar: el botón parece muerto en el centro y vivo en los bordes. */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { pointer-events: none; }
.btn-oro {
  background: var(--oro-filete); color: var(--sobre-acento);
  box-shadow: 0 6px 18px -8px rgb(var(--acento-rgb) / .55);
}
.btn-oro:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgb(var(--acento-rgb) / .65); }
.btn-linea { border-color: rgb(var(--acento-rgb) / .45); color: var(--oro); background: transparent; }
.btn-linea:hover { border-color: var(--oro); background: rgb(var(--acento-rgb) / .08); transform: translateY(-2px); }
.papel .btn-linea { border-color: rgb(var(--acento-hondo-rgb) / .5); color: var(--oro-hondo); }
.papel .btn-linea:hover { background: rgb(var(--acento-hondo-rgb) / .07); }
.btn-bloque { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Encabezado ──────────────────────────────────────────────────────── */
.encabezado {
  position: sticky; top: 0; z-index: 60;
  /* Translúcido sobre el fondo claro, no sobre la tinta: la barra se quedó
     oscura cuando el resto de la página pasó a claro. */
  background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--papel-2);
  /* Sin el margen de arriba, el logo y «Ingresar» quedan bajo la cámara al
     abrir desde la pantalla de inicio o con la barra del navegador oculta.
     En horizontal, la muesca se come el lado izquierdo. */
  padding-top: var(--sa-arriba);
  padding-left: var(--sa-izq);
  padding-right: var(--sa-der);
}
/* Filete de acento: separa la barra del contenido al desplazar. */
.encabezado::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--oro-filete); opacity: .5; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marca img { width: 40px; height: 40px; display: block; }
.marca span { font-family: var(--display); font-size: 1.3rem; font-weight: 600; font-variation-settings: 'opsz' 24; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 34px; }
.nav-links a {
  color: var(--tinta-texto); text-decoration: none; font-size: .93rem; font-weight: 500;
  position: relative; padding: 4px 0; transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--oro-filete); transition: right .28s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover { color: var(--oro); }
.nav-links a:hover::after { right: 0; }

/* ── Portada (la tapa) ───────────────────────────────────────────────── */
.tapa { background: var(--tinta); position: relative; }
.portada { padding: 86px 0 104px; position: relative; overflow: hidden; }
/* Halo de oro muy bajo: sugiere el relieve de un estampado, no ilumina. */
.portada::before {
  content: ''; position: absolute; top: -280px; left: 50%; width: 900px; height: 700px;
  transform: translateX(-46%);
  background: radial-gradient(ellipse at center, rgb(var(--acento-rgb) / .10), transparent 62%);
  pointer-events: none;
}
.portada-rejilla { display: grid; grid-template-columns: 1.02fr 1.08fr; gap: 66px; align-items: center; position: relative; }

.sello {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--libro); font-size: .71rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--oro);
  border: 1px solid rgb(var(--acento-rgb) / .32); border-radius: 3px;
  padding: 7px 14px; margin-bottom: 26px;
}
.sello i { width: 5px; height: 5px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgb(var(--verde-rgb) / .2); }

.portada p.entrada { font-size: 1.16rem; color: var(--tinta-texto); max-width: 500px; margin: 24px 0 34px; }
.acciones { display: flex; gap: 14px; flex-wrap: wrap; }

.garantias { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--tinta-3); }
.garantias div { font-family: var(--libro); font-size: .715rem; letter-spacing: .06em; color: var(--tinta-texto); display: flex; align-items: center; gap: 8px; }
.garantias svg { width: 14px; height: 14px; color: var(--verde); flex-shrink: 0; }

/* ── EL LIBRO ABIERTO (elemento firma) ───────────────────────────────── */
.libro {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--papel);
  border-radius: 5px;
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.85),
    0 0 0 1px rgb(var(--acento-rgb) / .22),
    0 0 0 9px rgb(var(--texto-rgb) / .6);
  position: relative; overflow: hidden;
}
/* El lomo: sombra del pliegue central, lo que hace que se lea como libro. */
.libro::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 34px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--texto-rgb) / .16) 42%, rgb(var(--texto-rgb) / .22) 50%, rgb(var(--texto-rgb) / .16) 58%, transparent);
}
.hoja { padding: 22px 20px; min-height: 428px; }
.hoja-rotulo {
  font-family: var(--libro); font-size: .63rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--papel-gris); padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--papel-2);
  display: flex; justify-content: space-between; align-items: center;
}

/* Página izquierda: la conversación */
.hoja-chat { display: flex; flex-direction: column; gap: 9px; padding-top: 16px; }
.burbuja {
  max-width: 88%; padding: 10px 13px; font-size: .855rem; line-height: 1.48;
  border-radius: 12px; color: var(--papel-texto);
  animation: entra .5s both cubic-bezier(.2,.7,.3,1); animation-delay: calc(var(--i) * .26s);
}
.burbuja.cliente { background: var(--papel); border: 1px solid var(--papel-2); border-bottom-left-radius: 3px; align-self: flex-start; }
.burbuja.negocio { background: #DCF8C6; border: 1px solid #CBEBB2; border-bottom-right-radius: 3px; align-self: flex-end; }
.burbuja .t { display: block; font-family: var(--libro); font-size: .62rem; color: var(--papel-gris); text-align: right; margin-top: 5px; }
.burbuja.audio { display: flex; align-items: center; gap: 9px; }
.onda { display: flex; align-items: center; gap: 2px; height: 17px; }
.onda i { width: 2px; border-radius: 2px; background: var(--papel-gris); height: var(--h); }

/* Página derecha: la agenda reglada */
.hoja-agenda { padding-top: 6px; }
.renglon {
  display: grid; grid-template-columns: 62px 1fr; align-items: center;
  min-height: 56px; border-bottom: 1px solid var(--papel-2);
}
.renglon .hora {
  font-family: var(--libro); font-size: .76rem; font-weight: 500; color: var(--papel-gris);
  border-right: 2px solid rgb(var(--acento-rgb) / .4); height: 100%;
  display: flex; align-items: center; padding-right: 12px;
}
.renglon .cupo { padding-left: 14px; }
/* Color del sistema, no escrito a mano: `#A9AEBC` daba 2,22:1 sobre la
   tarjeta —la mitad del 4,5:1 que pide WCAG AA— y además era uno de los
   colores sueltos que el proyecto dejó de permitir al pasar a tripletes. */
.renglon .cupo .libre { font-family: var(--libro); font-size: .74rem; color: var(--tinta-texto); letter-spacing: .06em; }
.renglon .cupo .quien { font-weight: 700; font-size: .9rem; color: var(--papel-texto); display: flex; align-items: center; gap: 7px; }
.renglon .cupo .que { font-family: var(--libro); font-size: .69rem; color: var(--papel-gris); letter-spacing: .04em; margin-top: 1px; }

/* El estampado: cada cupo entra con el check dorado, uno tras otro. */
.renglon.estampa .cupo > * { animation: estampa .46s both cubic-bezier(.2,.8,.3,1); animation-delay: calc(1.5s + var(--i) * .3s); }
.visto {
  width: 15px; height: 15px; border-radius: 50%; background: var(--verde);
  display: inline-grid; place-items: center; flex-shrink: 0;
}
.visto svg { width: 9px; height: 9px; color: #fff; }

@keyframes entra  { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes estampa { from { opacity: 0; transform: translateY(7px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── Secciones de papel ──────────────────────────────────────────────── */
.papel {
  background: var(--papel); color: var(--papel-texto);
  position: relative;
}
.papel::before, .papel::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--oro-filete); opacity: .55;
}
.papel::before { top: 0; } .papel::after { bottom: 0; }
section { padding: 96px 0; }
.cabecera-seccion { max-width: 660px; margin-bottom: 56px; }
.cabecera-seccion p { margin-top: 16px; font-size: 1.06rem; }
.papel .cabecera-seccion p { color: var(--papel-gris); }
.tapa  .cabecera-seccion p { color: var(--tinta-texto); }

/* ── Fichas de beneficio ─────────────────────────────────────────────── */
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 1px; background: var(--papel-2); border: 1px solid var(--papel-2); }
.ficha { background: var(--papel); padding: 34px 30px; transition: background .25s; }
.ficha:hover { background: #F6F3EC; }
.ficha .num { font-family: var(--libro); font-size: .68rem; letter-spacing: .18em; color: var(--oro-hondo); display: block; margin-bottom: 16px; }
.ficha h3 { margin-bottom: 11px; }
.ficha p { font-size: .96rem; color: var(--papel-gris); }

/* ── El recordatorio ─────────────────────────────────────────────────── */
.recordatorio-rejilla { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.plantilla {
  background: var(--papel); border-radius: 13px; padding: 17px; max-width: 366px;
  box-shadow: 0 24px 60px -30px rgb(var(--texto-rgb) / .35), 0 0 0 1px var(--papel-2);
  color: var(--papel-texto);
}
.plantilla .de { font-weight: 700; font-size: .92rem; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.plantilla .de img { width: 22px; height: 22px; }
.plantilla p { font-size: .885rem; line-height: 1.56; }
.plantilla p + p { margin-top: 9px; }
.respuestas { margin-top: 13px; border-top: 1px solid var(--papel-2); display: grid; gap: 1px; }
.respuestas span {
  /* Son los botones de respuesta de WhatsApp dentro de la ilustración de la
     plantilla. El azul de WhatsApp era un color escrito a mano más. */
  text-align: center; padding: 11px; color: var(--oro-hondo); font-weight: 600; font-size: .88rem;
  border-top: 1px solid var(--papel-2);
}
.respuestas span:first-child { border-top: none; }

.puntos { list-style: none; display: grid; gap: 22px; }
.puntos li { display: grid; grid-template-columns: 22px 1fr; gap: 15px; align-items: start; }
.puntos .marca { width: 22px; height: 22px; border-radius: 50%; background: rgb(var(--acento-rgb) / .14); display: grid; place-items: center; margin-top: 2px; }
.puntos .marca svg { width: 11px; height: 11px; color: var(--oro); }
.puntos strong { display: block; font-weight: 700; margin-bottom: 4px; }
.puntos span.txt { color: var(--tinta-texto); font-size: .97rem; }

/* ── Planes ──────────────────────────────────────────────────────────── */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(282px, 1fr)); gap: 22px; align-items: stretch; }
.plan {
  background: var(--tinta); border: 1px solid var(--papel-2); border-radius: 5px;
  padding: 36px 30px 32px; display: flex; flex-direction: column; position: relative;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -22px rgb(var(--texto-rgb) / .4); }
.plan.recomendado { border-color: rgb(var(--acento-hondo-rgb) / .55); box-shadow: 0 0 0 1px rgb(var(--acento-hondo-rgb) / .3), 0 18px 40px -20px rgb(var(--texto-rgb) / .35); }
.plan.recomendado::before { content: ''; position: absolute; inset: -1px -1px auto; height: 3px; background: var(--oro-filete); border-radius: 5px 5px 0 0; }
.cinta {
  position: absolute; top: -11px; left: 30px;
  background: var(--oro-filete); color: var(--sobre-acento);
  font-family: var(--libro); font-size: .63rem; font-weight: 600; letter-spacing: .13em;
  padding: 4px 12px; border-radius: 3px;
}
.plan h3 { margin-bottom: 6px; }
.plan .cupo-plan { font-family: var(--libro); font-size: .74rem; letter-spacing: .09em; color: var(--oro-hondo); text-transform: uppercase; margin-bottom: 24px; }
.plan .valor { font-family: var(--display); font-size: 2.5rem; font-weight: 600; font-variation-settings: 'opsz' 72; letter-spacing: -.02em; line-height: 1; }
.plan .periodo { font-family: var(--texto); font-size: .9rem; color: var(--papel-gris); font-weight: 400; }
.plan .iva { font-family: var(--libro); font-size: .7rem; color: var(--papel-gris); letter-spacing: .07em; margin: 8px 0 26px; }
.plan ul { list-style: none; display: grid; gap: 12px; margin-bottom: 30px; flex: 1; }
.plan li { font-size: .93rem; color: var(--papel-gris); display: grid; grid-template-columns: 16px 1fr; gap: 11px; }
.plan li svg { width: 16px; height: 16px; color: var(--verde); margin-top: 4px; }

/* ── Ciclo de cobro (sí es una secuencia: los días importan) ─────────── */
.ciclo { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 0; border: 1px solid var(--tinta-3); }
.paso { padding: 30px 26px; border-right: 1px solid var(--tinta-3); position: relative; }
.paso:last-child { border-right: none; }
.paso .dia { font-family: var(--display); font-size: 2.6rem; font-weight: 600; font-variation-settings: 'opsz' 72; line-height: 1; color: var(--oro); }
.paso .dia small { font-family: var(--libro); font-size: .64rem; letter-spacing: .16em; display: block; color: var(--tinta-texto); margin-bottom: 8px; text-transform: uppercase; }
.paso h3 { font-size: 1.04rem; margin: 14px 0 8px; }
.paso p { font-size: .9rem; color: var(--tinta-texto); }
.paso.corte { background: rgb(var(--acento-rgb) / .05); }
.paso.corte .dia { background: var(--oro-filete); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paso.tope .dia { color: #E06C4F; }

/* ── Registro ────────────────────────────────────────────────────────── */
.registro { max-width: 660px; margin: 0 auto; background: var(--tinta); border: 1px solid var(--papel-2); border-radius: 5px; padding: 44px; }
.registro::before { content: ''; display: block; height: 3px; background: var(--oro-filete); margin: -44px -44px 34px; border-radius: 5px 5px 0 0; }
.campo { margin-bottom: 19px; }
.campo label { display: block; font-family: var(--libro); font-size: .69rem; letter-spacing: .13em; text-transform: uppercase; color: var(--papel-gris); margin-bottom: 8px; }
.campo input, .campo select {
  width: 100%; padding: 13px 15px; background: var(--papel); color: var(--papel-texto);
  border: 1px solid var(--papel-2); border-radius: 4px; font-family: var(--texto);
  /* 16 px exactos: por debajo, Safari en iOS amplía la página al tocar. */
  font-size: 16px;
  transition: border-color .18s, box-shadow .18s;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--oro-hondo); box-shadow: 0 0 0 3px rgb(var(--acento-rgb) / .14); }
.campo input::placeholder { color: rgb(var(--texto-2-rgb) / .62); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nota { font-size: .82rem; color: var(--papel-gris); margin-top: 7px; }
.promo-estado { font-family: var(--libro); font-size: .78rem; margin-top: 8px; min-height: 19px; letter-spacing: .03em; }
/* Emerald, no el verde de la marca: `#17803D` era prácticamente el acento
   nuevo, y «el código vale» se leía igual que cualquier adorno de marca. */
.promo-estado.si { color: var(--verde-texto); }
.promo-estado.no { color: #C2410C; }
.aviso { padding: 14px 17px; border-radius: 4px; font-size: .93rem; margin-bottom: 22px; display: none; }
.aviso.si { display: block; background: rgb(var(--verde-rgb) / .12); border: 1px solid rgb(var(--verde-rgb) / .4); color: var(--verde-texto); }
.aviso.no { display: block; background: rgba(194,65,12,.1); border: 1px solid rgba(194,65,12,.35); color: #9A3412; }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie { padding: 64px 0 calc(40px + var(--sa-abajo)); border-top: 1px solid var(--papel-2); }
.pie-rejilla { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.pie p { color: var(--tinta-texto); font-size: .92rem; max-width: 340px; margin-top: 16px; }
.pie h4 { font-family: var(--libro); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); margin-bottom: 16px; }
.pie ul { list-style: none; display: grid; gap: 11px; }
.pie a { color: var(--tinta-texto); text-decoration: none; font-size: .92rem; transition: color .2s; }
.pie a:hover { color: var(--oro); }
.pie-legal {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--papel-2);
  font-family: var(--libro); font-size: .73rem; color: var(--papel-gris); letter-spacing: .04em;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

/* ── Revelado al entrar en pantalla ──────────────────────────────────── */
.revelar { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.revelar.visible { opacity: 1; transform: none; }

/* ── Adaptación ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .portada-rejilla, .recordatorio-rejilla { grid-template-columns: 1fr; gap: 46px; }
  .nav-links { display: none; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .paso { border-right: none; border-bottom: 1px solid var(--tinta-3); }
  .paso:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  section, .portada { padding: 64px 0; }
  .libro { grid-template-columns: 1fr; }
  .libro::after { display: none; }
  .hoja { min-height: auto; }
  .hoja-chat { padding-bottom: 8px; }
  .par { grid-template-columns: 1fr; }
  .registro { padding: 28px; }
  .registro::before { margin: -28px -28px 24px; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 32px; }
  .acciones .btn { width: 100%; }
}

/* Quien pide menos movimiento, no recibe ninguno. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .revelar { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   Páginas legales — privacidad, condiciones, eliminación de datos.
   Se leen, no se recorren: una columna estrecha y jerarquía clara.
   ══════════════════════════════════════════════════════════════════════ */
.legal { background: var(--papel); color: var(--papel-texto); padding: 56px 0 90px; }
.legal .lim { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: 10px; }
.legal .actualizado { font-family: var(--libro); font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--papel-gris); margin-bottom: 40px; }
.legal h2 { font-size: 1.42rem; margin: 40px 0 14px; padding-top: 22px; border-top: 1px solid var(--papel-2); }
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal h3 { font-size: 1.06rem; margin: 24px 0 8px; font-family: var(--texto); font-weight: 700; }
.legal p { margin-bottom: 14px; }
.legal ul, .legal ol { margin: 0 0 16px 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--oro-hondo); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .92rem; }
.legal th, .legal td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--papel-2); vertical-align: top; }
.legal th { font-family: var(--libro); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--papel-gris); }
.legal .recuadro { background: var(--tinta); border: 1px solid var(--papel-2); border-left: 3px solid var(--oro-hondo);
  border-radius: 4px; padding: 18px 20px; margin: 22px 0; }
.legal .recuadro p:last-child { margin-bottom: 0; }
.legal .volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px;
  font-family: var(--libro); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--papel-gris); }
.legal .volver:hover { color: var(--oro-hondo); }

/* Los nichos, a la vista: el texto del producto habla en general, pero quien
   entra necesita reconocerse en una línea. Un spa que lee "barbería" cierra
   la página. */
.nichos {
  font-family: var(--libro, 'IBM Plex Mono', monospace);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--papel-gris); margin: 18px 0 0; line-height: 1.9;
}
@media (max-width: 520px) { .nichos { font-size: .66rem; letter-spacing: .04em; } }

/* El dólar es una referencia, no el precio: va en segundo plano, junto al
   IVA, nunca compitiendo con la cifra en pesos que es la que se cobra. */
.en-dolares { color: var(--papel-gris); white-space: nowrap; }
.nota-dolar {
  font-size: .82rem; line-height: 1.6; color: var(--papel-gris);
  max-width: 62ch; margin-top: 10px;
}

/* ── Zonas táctiles ─────────────────────────────────────────────────── */
/*
 * Apple pide 44×44 pt para lo que se toca con el dedo. Un enlace de texto mide
 * 20 px de alto: se falla al tocarlo y el usuario acaba pulsando el de al lado.
 *
 * Solo en punteros gruesos (dedo). Con ratón, 20 px se aciertan de sobra y
 * estirar los enlaces separaría el menú sin motivo.
 */
@media (pointer: coarse) {
  /* La marca, «Volver» y los enlaces del pie se medían en 16–30 px de alto.
     Con el dedo eso no se acierta, y son justo los que sacan a alguien de un
     paso en el que se atascó. Relleno hacia fuera y margen negativo: la zona
     viva crece sin mover nada de sitio. */
  .marca,
  .reg-marca,
  .reg-volver,
  .reg-pie a,
  .pie a,
  .campo small a { padding-block: 14px; margin-block: -14px; }
  /* `.marca` es un flex con el logo dentro: el relleno vertical lo
     descuadraría si no se centra explícitamente. */
  .marca, .reg-marca { align-items: center; }

  /* En la barra, el enlace puede crecer: está solo en su fila. */
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-links a::after { bottom: 12px; }

  /* Dentro de un párrafo NO: `min-height` convierte el enlace en una caja
     alta y parte la frase. El relleno hacia fuera con margen negativo agranda
     lo que responde al dedo sin tocar la línea. */
  .pie a,
  .legal a {
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* El complemento va bajo el precio, no entre las ventajas: es un coste más y
   colarlo en la lista de beneficios sería tramposo. */
.complemento {
  font-size: .82rem; color: var(--papel-gris); line-height: 1.5;
  padding: 10px 0; margin: 12px 0 4px;
  border-top: 1px dashed var(--papel-2);
  border-bottom: 1px dashed var(--papel-2);
}
.complemento span {
  display: block; font-family: var(--libro); font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-top: 2px;
}

/* ── Escribirnos por WhatsApp ────────────────────────────────────────
   Va al FINAL de la hoja: nada lo pisa y no pisa nada. El verde es el de
   WhatsApp, no el de la marca — es su botón, no el nuestro, y cambiarlo
   lo haría menos reconocible justo donde la familiaridad es el valor. */
.flotante-wa {
  position: fixed; z-index: 50;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 6px 20px rgb(0 0 0 / .28);
  transition: transform .18s ease;
}
.flotante-wa:hover { transform: scale(1.07); }
.flotante-wa svg { width: 29px; height: 29px; }
@media (prefers-reduced-motion: reduce) { .flotante-wa { transition: none; } }