/* ============================================================================
   DojoPay — hoja de estilo de la landing (/index.html).
   Vivía como <style> en línea dentro de index.html; se sacó al crecer la
   página a trece secciones. Ninguna otra pantalla la carga: el panel usa
   app.css y el super admin admin.css.

   Lenguaje visual: precisión fintech + personalidad editorial de artes
   marciales. Carbón muy oscuro, crema tibia, terracota fuerte, una sección
   tonal verde pálido. Fraunces para display, Inter para interfaz.
   Bordes finos, radios chicos, sombras contenidas, botones compactos.
   ========================================================================= */

/* [hidden] tiene que ganar SIEMPRE.
   El navegador aplica display:none al atributo desde su hoja de usuario, que
   pierde contra cualquier regla de autor: un `.wa-fab{display:inline-flex}`
   basta para que un elemento marcado como oculto se vea. Paso en vivo con los
   tres CTAs de WhatsApp, que salieron a pantalla sin destino porque todavia no
   hay numero. Como regla global evita que vuelva a pasar con el siguiente
   componente que nazca oculto. */
[hidden]{display:none !important;}

:root{
  /* Paleta oficial DojoPay: terracota, carbón, crema, gris */
  --ink:#1f1f1f;
  --ink-2:#2b2b2b;
  --ink-3:#171717;
  --paper:#f5efe6;
  --paper-2:#ece3d3;
  --line:#e0d5bf;
  --line-2:#d3c6ab;
  --text:#221f1c;
  --muted:#6b6b6b;
  --ember:#e4572e;
  --ember-dark:#b8401f;
  --ember-tint:#fbe4d8;
  --good:#1f7a4d;
  --good-tint:#e5f4ec;
  --warn:#a9760a;
  --warn-tint:#fdf1dc;
  /* Sección tonal verde pálido (beneficios) */
  --moss:#dee2d4;
  --moss-2:#cfd5c2;
  --moss-line:#bfc7ae;
  /* Verde de WhatsApp, sólo dentro de la maqueta del chat */
  --wa:#1faa54;
  --wa-bubble:#e2f7cd;

  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:96px;
  --sp-8:120px;

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;

  --container:1120px;
  /* Radios chicos a propósito: la referencia visual es editorial, no el
     "tarjeta muy redondeada" genérico de SaaS. */
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  padding-bottom:64px; /* espacio para la barra fija del Fundador */
  /* Ninguna maqueta de producto debe empujar la página a lo ancho en móvil. */
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.08;letter-spacing:-0.01em;}
p{margin:0;}
section{scroll-margin-top:88px;}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-4);}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ember-dark);
  margin-bottom:var(--sp-3);
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ember);display:inline-block;}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Glifo de WhatsApp ----------
   La marca real es una silueta rellena, no de trazo, así que anula el
   `stroke` que su contenedor aplica a los demás iconos y se pinta con `fill`.
   Aparece en un solo lugar — el panel oscuro de la banda — porque es el único
   con caja suficiente (30px) para que se lea. A 12 o 14px se volvía un
   borrón, y ahí se usa geometría simple o nada. */
.icon-wa{stroke:none;}
.band-opt-mark .icon-wa{fill:#ffb18a;}

/* ---------- Botones (compactos, radio chico — nunca pastilla) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
/* Fondo ember-dark (no ember) a propósito: blanco sobre #E4572E da ~3.7:1
   de contraste y falla AA; sobre #B8401F da ~5.5:1. */
.btn-primary{
  background:var(--ember-dark);color:#fff;
  box-shadow:0 6px 16px -8px rgba(184,64,31,.55);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(184,64,31,.65);background:#9c3418;}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(250,247,242,.32);}
.btn-ghost:hover{transform:translateY(-1px);border-color:rgba(250,247,242,.68);}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line-2);}
.btn-outline:hover{transform:translateY(-1px);border-color:var(--ink);}
.btn-dark{background:var(--ink);color:var(--paper);}
.btn-dark:hover{transform:translateY(-1px);background:#000;}
.btn-light{background:var(--paper);color:var(--ink);}
.btn-light:hover{transform:translateY(-1px);background:#fff;}
.btn-sm{padding:10px 18px;font-size:14px;}
.btn-block{width:100%;}
.btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px;}

/* ---------- Logo (marca oficial: torii + cinturón) ---------- */
.logo{display:flex;align-items:center;text-decoration:none;}
.logo img{display:block;}

/* ---------- Nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(18,16,20,.80);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  max-width:var(--container);margin:0 auto;padding:0 var(--sp-4);
  height:68px;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);
}
.nav-links{display:flex;align-items:center;gap:var(--sp-4);list-style:none;margin:0;padding:0;}
.nav-links a{
  color:rgba(250,247,242,.76);text-decoration:none;font-size:14px;font-weight:600;
  transition:color .2s var(--ease);
}
.nav-links a:hover{color:var(--paper);}
.nav-right{display:flex;align-items:center;gap:var(--sp-3);}
.nav-login-link{
  color:rgba(250,247,242,.76);text-decoration:none;font-size:14px;font-weight:600;
  transition:color .2s var(--ease);white-space:nowrap;
}
.nav-login-link:hover{color:var(--paper);}
/* El checkbox no se esconde con display:none para que siga siendo enfocable
   con teclado (Tab + Espacio abren el menú, sin depender de JS). */
.nav-toggle{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.nav-toggle-label{
  display:none;cursor:pointer;width:40px;height:40px;border-radius:var(--radius-xs);
  align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);
}
.nav-toggle:focus-visible ~ .nav-toggle-label{outline:2px solid var(--ember);outline-offset:2px;}
.nav-toggle-label svg{stroke:var(--paper);}

@media (max-width: 900px){
  .nav-links{
    display:none;
    position:absolute;top:68px;left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:rgba(18,16,20,.98);
    padding:var(--sp-2) var(--sp-4) var(--sp-3);
    gap:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-links a{display:block;padding:13px 0;} /* área táctil ≥44px */
  .nav-toggle-label{display:inline-flex;}
  .nav-toggle:checked ~ .nav-links{display:flex;}
  .nav-login-link{display:none;}
}
@media (max-width: 560px){
  .nav{padding:0 var(--sp-2);}
}

/* ---------- Reveal al hacer scroll (mejora progresiva) ---------- */
.reveal{opacity:1;transform:none;}
html.js .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
html.js .reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Cascarón de secciones ---------- */
.section{padding:var(--sp-8) 0;}
.section-head{max-width:660px;margin:0 auto var(--sp-6);text-align:center;}
.section-head.is-left{margin-left:0;text-align:left;}
.section-head h2{font-size:clamp(28px, 3.8vw, 42px);font-weight:600;}
.section-head h2 em{font-style:italic;color:var(--ember-dark);}
.section-head p{margin-top:var(--sp-2);color:var(--muted);font-size:16.5px;}
.section-alt{background:var(--paper-2);}
.section-dark{background:var(--ink);color:var(--paper);}
.section-dark .section-head h2{color:var(--paper);}
.section-dark .section-head h2 em{color:var(--ember);}
.section-dark .section-head p{color:rgba(250,247,242,.66);}
.section-dark .eyebrow{color:#ffb18a;}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--sp-7) + 68px) 0 var(--sp-7);
  background:
    radial-gradient(120% 90% at 15% 0%, #3a1a12 0%, transparent 55%),
    radial-gradient(100% 80% at 100% 15%, #26140f 0%, transparent 50%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 60%, #201b1e 100%);
}
.hero-shape{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none;}
.shape-a{
  width:520px;height:520px;background:radial-gradient(circle, var(--ember) 0%, transparent 70%);
  top:-160px;right:-120px;
}
.shape-b{
  width:420px;height:420px;background:radial-gradient(circle, #ffb18a 0%, transparent 70%);
  bottom:-180px;left:-100px;opacity:.26;
}
/* Una sola columna desde que se quitó la maqueta del panel.
   El panel se sigue enseñando, pero abajo y en movimiento —la sección
   "DojoPay trabajando"—, que es donde convence: enseñarlo quieto aquí arriba
   gastaba el efecto antes de tiempo.
   Centrado y con tope de ancho: a media pantalla la copia se quedaba pegada a
   la izquierda con un hueco enorme a la derecha, que se lee como que falta
   algo. Centrada se lee como una decisión. El tope es de medida, no de
   estética — un h1 de 66px a todo lo ancho del contenedor no se puede leer. */
.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr;justify-items:center;
}
.hero-copy{min-width:0;max-width:760px;text-align:center;}
/* Señal de origen, arriba del eyebrow y por debajo de él en peso: sin
   mayúsculas, sin letterspacing y sin el punto terracota. Son dos elementos
   secundarios seguidos, y si compiten, el h1 deja de ser lo primero que se
   lee. La bandera va en un <span aria-hidden>: un lector de pantalla que
   anuncia "bandera de México" a media frase no aporta nada.

   `display:flex` y no `inline-flex`: los dos son <span>, y en línea el badge
   y el eyebrow se pegan en el mismo renglón. Flex es de bloque, así que se
   lleva su propia línea; `width:max-content` con márgenes automáticos lo deja
   centrado sin estirarse al ancho de la columna. */
.hero-mx{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;
  width:max-content;max-width:100%;
  margin:0 auto var(--sp-2);
  font-size:12.5px;font-weight:600;
  color:rgba(250,247,242,.74);
  border:1px solid rgba(250,247,242,.18);
  background:rgba(250,247,242,.05);
  padding:6px 13px;border-radius:var(--radius-xs);
}
.hero-copy .eyebrow{color:#ffb18a;}
.hero-copy h1{
  font-size:clamp(38px, 5.2vw, 66px);
  color:var(--paper);font-weight:700;letter-spacing:-0.025em;
}
/* El énfasis editorial de la referencia: itálica terracota, sin subrayado.
   nowrap porque "sin perseguir" es la unidad que carga el mensaje: partida en
   dos renglones deja de leerse como un bloque y pierde el énfasis. Mide
   ~200px a 31px, así que cabe hasta en una pantalla de 320px. */
.hero-copy h1 em{font-style:italic;color:var(--ember);white-space:nowrap;}
.hero-copy p.lead{
  margin-top:var(--sp-3);font-size:17px;
  color:rgba(250,247,242,.76);max-width:52ch;margin-left:auto;margin-right:auto;
}
/* Descriptor de producto: qué es, en cuatro piezas separadas por punto medio */
.hero-descriptor{
  margin-top:var(--sp-3);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 10px;list-style:none;padding:0;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(250,247,242,.62);
}
.hero-descriptor li{display:inline-flex;align-items:center;gap:10px;}
.hero-descriptor li+li::before{
  content:'';width:4px;height:4px;border-radius:50%;background:var(--ember);flex-shrink:0;
}
.hero-cta{margin-top:var(--sp-4);display:flex;align-items:center;justify-content:center;gap:var(--sp-2);flex-wrap:wrap;}
.hero-note{margin-top:var(--sp-2);font-size:13px;color:rgba(250,247,242,.66);}
.hero-disciplines{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;}
.hero-disciplines li{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  color:rgba(250,247,242,.55);
  border:1px solid rgba(250,247,242,.16);
  padding:5px 11px;border-radius:var(--radius-xs);
}
.hero-visual{position:relative;min-width:0;}
.hero-caption{text-align:center;font-size:12.5px;color:rgba(250,247,242,.6);margin-top:var(--sp-2);}

/* ============================================================================
   DashboardPreview — maqueta del panel real (/dashboard) con datos de ejemplo.
   Dos tamaños: .is-compact para el hero, .is-full para la sección de panel
   único. El chrome de ventana y las clases internas son las mismas.
   ========================================================================= */
.dash{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
  overflow:hidden;
  min-width:0;
}
.dash.is-full{box-shadow:0 24px 60px -32px rgba(18,16,20,.3);}
.dash-bar{
  background:var(--ink);padding:9px 14px;
  display:flex;align-items:center;gap:7px;
}
.dash-bar span{font-size:11px;color:rgba(245,239,230,.55);font-weight:600;margin-left:6px;}
.dash-dot{width:8px;height:8px;border-radius:50%;background:rgba(245,239,230,.22);flex-shrink:0;}
.dash-body{padding:var(--sp-3);}
.dash-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--sp-2);}
.dash-head b{font-family:var(--font-display);font-size:18px;font-weight:600;}
.dash-head > span{font-size:11.5px;color:var(--muted);}

/* MetricCard */
.dash-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.dash.is-full .dash-metrics{grid-template-columns:repeat(4,1fr);}
.metric{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px;min-width:0;}
.metric small{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.metric b{font-family:var(--font-display);font-size:20px;font-weight:600;display:block;line-height:1.1;}
.dash.is-full .metric b{font-size:23px;}
.metric span{color:var(--muted);font-size:11px;display:block;margin-top:2px;}
.metric .up{color:var(--good);font-size:11px;font-weight:600;display:block;margin-top:2px;}
.metric .warn{color:#8a6206;font-size:11px;font-weight:600;display:block;margin-top:2px;}
/* mismo acento que el dashboard real cuando hay dinero pendiente */
.metric.is-alerta{border-color:#eabfa9;}
.metric.is-alerta b{color:var(--ember-dark);}
/* Un valor que cambia durante la demo: se resalta un instante al actualizarse. */
.metric b.is-flash{animation:metricFlash .9s var(--ease);}
@keyframes metricFlash{
  0%{background:var(--ember-tint);box-shadow:0 0 0 6px var(--ember-tint);}
  100%{background:transparent;box-shadow:0 0 0 6px transparent;}
}

/* Barra de cobranza del mes, igual que en /dashboard */
.dash-progress{
  margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;
}
.dash-progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.dash-progress-head b{font-family:var(--font-display);font-size:13.5px;font-weight:600;}
/* sólo el hijo directo es el porcentaje; el span del mes vive dentro del <b> */
.dash-progress-head > span{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ember-dark);}
.dash-progress-track{height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden;margin:9px 0 7px;}
.dash-progress-track span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--ember), var(--ember-dark));
  transition:width .9s var(--ease);
}
.dash-progress p{font-size:11.5px;color:var(--muted);}

/* Bloque de filas (padrón o actividad) */
.dash-block{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.dash-block-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 13px;border-bottom:1px solid var(--paper-2);
}
.dash-block-head b{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-family:var(--font-body);}
.dash-block-head span{font-size:11px;color:var(--muted);}

/* PaymentStatusRow */
.prow{
  display:flex;align-items:center;gap:10px;
  padding:10px 13px;border-top:1px solid var(--paper-2);font-size:13px;
  transition:background .3s var(--ease);
}
.prow:first-child{border-top:none;}
/* La fila que ACABA de cambiar. Se resalta y se apaga, igual que los números
   de arriba con `metricFlash`.

   Era un `background` permanente, y con eso el demo terminaba con cuatro
   alumnos "Al corriente" de los cuales dos quedaban verdes para siempre. El
   verde dejaba de leerse como "esto acaba de pasar" y empezaba a leerse como
   "estos dos son de otra categoría" — que es justo lo que no son. La misma
   intención ya estaba resuelta bien para los números; esto se había quedado a
   medias.

   Dura más que el flash de los números (1.8s contra 0.9s) porque una fila es
   más grande y el ojo va llegando a ella, no está puesto encima. Lo que
   permanece como evidencia del cambio es el badge, que pasa de "Pendiente" a
   "Al corriente". */
.prow.is-updated{animation:prowUpdated 1.8s var(--ease);}
@keyframes prowUpdated{
  0%{background:var(--good-tint);}
  60%{background:var(--good-tint);}
  100%{background:transparent;}
}
/* Sin animación, el resalte no aporta y el badge ya dice todo. */
@media (prefers-reduced-motion: reduce){
  .prow.is-updated{animation:none;}
}
.prow-avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:var(--ember-dark);background:var(--ember-tint);
  font-family:var(--font-body);
}
.prow-main{flex:1;min-width:0;}
.prow-main b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prow-main span{display:block;font-size:11px;color:var(--muted);}
.prow-amount{font-family:var(--font-display);font-size:13.5px;font-weight:600;flex-shrink:0;}
.prow-badge{
  flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:3px 8px;border-radius:var(--radius-xs);white-space:nowrap;
  font-family:var(--font-body);
}
.prow-badge.is-ok{background:var(--good-tint);color:var(--good);}
.prow-badge.is-pending{background:var(--warn-tint);color:#8a6206;}
.prow-badge.is-late{background:var(--ember-tint);color:var(--ember-dark);}
.prow-badge.is-working{background:var(--paper-2);color:var(--muted);}
.prow-icon{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.prow-icon.ok{background:var(--good-tint);}
.prow-icon.ok svg{stroke:var(--good);}
.prow-icon.wa{background:var(--ember-tint);}
.prow-icon.wa svg{stroke:var(--ember-dark);}
.prow-meta{color:var(--muted);white-space:nowrap;font-size:11.5px;flex-shrink:0;}

@media (max-width: 720px){
  .dash.is-full .dash-metrics{grid-template-columns:repeat(2,1fr);}
}
/* En pantallas angostas la fila no cabe en un renglón: a 320px, después del
   avatar, el monto y el estado, al nombre le quedan ~83px y su subtítulo cae
   en tres líneas. Se reacomoda en la retícula de dos renglones que usan las
   listas móviles — nombre, monto y estado arriba, el detalle abajo con el
   ancho completo — sin recortar nada y bajando la fila de ~92px a ~62px.
   El corte va en 560px y no en 430: a 430 el renglón único todavía deja al
   detalle unos 158px y volvía a partirse en dos o tres líneas.

   display:contents en .prow-main sube sus dos hijos a la retícula del padre;
   es puramente presentacional, así que no cambia el orden de lectura. */
@media (max-width: 560px){
  .prow{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    grid-template-areas:
      "avatar name amount badge"
      "avatar sub  sub    sub";
    column-gap:9px;row-gap:1px;align-items:center;
  }
  .prow-avatar, .prow-icon{grid-area:avatar;align-self:center;}
  .prow-main{display:contents;}
  .prow-main b{grid-area:name;align-self:center;}
  /* El subtítulo se lleva el renglón completo: es el texto más largo de la
     fila ("Transferencia · le escribimos hace 2 días") y con 208px entra en
     una línea, mientras compartiendo renglón con el estado caía en tres. */
  .prow-main span{grid-area:sub;align-self:center;}
  .prow-amount{grid-area:amount;justify-self:end;}
  .prow-meta{grid-area:amount;justify-self:end;}
  .prow-badge{grid-area:badge;justify-self:end;}
}
@media (max-width: 400px){
  .dash-body{padding:var(--sp-2);}
  .dash-bar span{display:none;}
  .prow{padding:9px 11px;gap:8px;}
  .prow-amount{font-size:12.5px;}
}

/* ============================================================================
   Demo de producto — DojoPay haciendo el trabajo (Carlos y Ana).
   Cada tarjeta avanza sus pasos al entrar en pantalla y termina en
   "Al corriente", con el panel actualizándose al mismo tiempo.
   Sin JS o con prefers-reduced-motion se pinta el estado final completo.
   ========================================================================= */
.demos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);align-items:start;}
.demo{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  overflow:hidden;min-width:0;display:flex;flex-direction:column;
}
.demo-head{
  padding:var(--sp-3);border-bottom:1px solid var(--paper-2);
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2);
}
.demo-head h3{font-size:18.5px;font-weight:600;}
.demo-head p{margin-top:5px;font-size:13px;color:var(--muted);max-width:34ch;}
.demo-method{
  flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--radius-xs);white-space:nowrap;
}
.demo-method.is-wa{background:var(--ember-tint);color:var(--ember-dark);}
.demo-method.is-card{background:var(--ink);color:var(--paper);}
.demo-body{padding:var(--sp-3);flex:1;}

/* Cada paso de la demo aparece uno tras otro. */
.dstep{
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.dstep.is-on{opacity:1;transform:none;}
/* Sin JS todo se ve: la demo cuenta la historia igual, sólo sin animarse. */
html:not(.js) .dstep{opacity:1;transform:none;}
.dstep + .dstep{margin-top:11px;}
/* Flecha vertical entre pasos. */
.dstep-arrow{display:flex;justify-content:center;padding:1px 0;color:var(--line-2);}
.dstep-arrow svg{stroke:currentColor;}

/* Etiqueta de lo que acaba de pasar.
   Sin icono a propósito: a 14px, con un viewBox de 24 y trazo de 2, el trazo
   efectivo queda en ~1.2px y las formas complejas (un cursor, la silueta de
   WhatsApp) se vuelven una astilla o un borrón. El brief pedía uso mínimo de
   iconos y el texto ya dice qué pasó, así que el ancla visual es el mismo
   punto que usan los eyebrows de la página — que no puede salir mal. */
.dstep-label{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--ember-dark);
}
.dstep-label::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0;
}
.dstep-label.is-good{color:var(--good);}
.dstep-label.is-muted{color:#5c5c5c;}
.dstep-note{margin-top:5px;font-size:12.5px;color:var(--muted);}

/* WhatsAppPreview — maqueta del mensaje real (plantilla de 7 variables). */
.wa{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#efe7db;}
.wa-bar{background:#075e54;color:#fff;padding:8px 12px;display:flex;align-items:center;gap:9px;}
.wa-bar-avatar{
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:10px;font-weight:700;
}
.wa-bar div{min-width:0;}
/* Acotado a > div a propósito: `.wa-bar span` también alcanzaba a
   .wa-bar-avatar — que es un <span> hermano — y le ganaba en especificidad
   (0,1,1 contra 0,1,0), dejándolo en display:block. El avatar perdía su
   centrado flex y las iniciales se iban a la esquina. */
.wa-bar b{font-size:12.5px;font-weight:600;font-family:var(--font-body);display:block;line-height:1.25;}
.wa-bar > div span{font-size:10.5px;color:rgba(255,255,255,.72);display:block;line-height:1.25;}
.wa-thread{padding:12px;display:flex;flex-direction:column;gap:8px;}
.wa-msg{
  max-width:90%;background:#fff;border-radius:10px;padding:9px 11px;
  font-size:13px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.wa-msg.is-out{align-self:flex-end;background:var(--wa-bubble);}
.wa-msg .wa-strong{font-weight:700;}
.wa-msg-link{color:#0a7cba;text-decoration:underline;overflow-wrap:anywhere;}
/* La hora va un tono más oscura que en WhatsApp real: su #8a8a8a da 3.4:1
   sobre la burbuja blanca y no pasa AA a 10px. */
.wa-msg-time{display:block;text-align:right;font-size:10px;color:#767676;margin-top:3px;}
.wa-msg-time svg{stroke:#4fc3f7;vertical-align:-2px;margin-left:3px;}
/* El adjunto del alumno: la foto de su comprobante.
   Es una maqueta, no la imagen — un comprobante de verdad aquí sería un dato
   bancario inventado en una página pública. Se representa como lo que WhatsApp
   enseña antes de abrirla: un bloque con su icono y su nombre. */
.wa-foto{
  display:flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.05);border-radius:8px;
  padding:14px 12px;margin-bottom:6px;
  font-size:12px;color:#4a4a4a;font-weight:600;
}
.wa-foto svg{stroke:#5a5a5a;flex-shrink:0;}
/* Datos bancarios dentro del mensaje: se leen como datos, no como prosa. */
.wa-bank{
  margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,.08);
  font-size:12px;line-height:1.75;
}
.wa-bank code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:rgba(0,0,0,.05);padding:1px 4px;border-radius:3px;overflow-wrap:anywhere;
}
/* Burbuja de "escribiendo" mientras la demo avanza. */
.wa-typing{
  align-self:flex-start;background:#fff;border-radius:10px;padding:10px 12px;
  display:inline-flex;gap:4px;box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.wa-typing i{width:6px;height:6px;border-radius:50%;background:#b7b7b7;display:block;animation:waTyping 1.2s infinite var(--ease);}
.wa-typing i:nth-child(2){animation-delay:.18s;}
.wa-typing i:nth-child(3){animation-delay:.36s;}
@keyframes waTyping{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
@media (prefers-reduced-motion: reduce){
  .wa-typing i{animation:none;opacity:.5;}
}

/* Cargo con tarjeta: el bloque técnico del cobro recurrente. */
.charge{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);padding:12px 13px;}
.charge-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;}
.charge-row + .charge-row{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);}
.charge-row > span{color:var(--muted);flex-shrink:0;}
.charge-row b{font-family:var(--font-body);font-weight:600;text-align:right;}
.charge-card{display:inline-flex;align-items:center;gap:7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;}
.charge-card i{width:22px;height:15px;border-radius:2px;background:var(--ink);flex-shrink:0;display:block;}
/* Barra de progreso del cobro en curso. */
.charge-progress{height:4px;border-radius:999px;background:var(--paper-2);overflow:hidden;margin-top:10px;}
.charge-progress span{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg, var(--ember), var(--ember-dark));
  transition:width 1.4s var(--ease);
}
.dstep.is-on .charge-progress span{width:100%;}
html:not(.js) .charge-progress span{width:100%;}
@media (prefers-reduced-motion: reduce){
  .charge-progress span{transition:none;}
}

/* Resultado: la franja verde de "Al corriente". */
.dresult{
  display:flex;align-items:center;gap:10px;
  border:1px solid #b9dfc9;background:var(--good-tint);
  border-radius:var(--radius-sm);padding:11px 13px;
}
.dresult-check{
  width:24px;height:24px;border-radius:50%;background:var(--good);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.dresult-check svg{stroke:#fff;}
.dresult b{display:block;font-family:var(--font-body);font-size:13.5px;font-weight:700;color:#155f3b;}
/* Mismo caso que .wa-bar: sin el > div, esta regla alcanzaba a
   .dresult-check y le quitaba el centrado al check blanco. */
.dresult > div span{display:block;font-size:12px;color:#2d7350;}

/* Lo que el sensei dejó de hacer, al pie de cada demo. */
.demo-foot{border-top:1px solid var(--paper-2);background:var(--paper);padding:var(--sp-3);}
.demo-foot small{
  display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#5c5c5c;margin-bottom:9px;
}
.demo-foot ul{list-style:none;margin:0;padding:0;}
.demo-foot li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text);padding:3px 0;}
.demo-foot li svg{stroke:var(--ember-dark);flex-shrink:0;margin-top:4px;}

/* Panel que se actualiza junto con las demos. */
.demo-panel{margin-top:var(--sp-5);}
.demo-panel-head{
  text-align:center;margin-bottom:var(--sp-3);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5c5c5c;
}

/* ============================================================================
   Precios
   ========================================================================= */
.pricing-lead{
  text-align:center;max-width:56ch;margin:0 auto var(--sp-5);
  font-size:15.5px;color:var(--muted);
}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);align-items:stretch;}
.price-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4);display:flex;flex-direction:column;min-width:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.price-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -24px rgba(18,16,20,.2);}
.price-card.featured{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
  box-shadow:0 26px 52px -26px rgba(18,16,20,.45);position:relative;
}
.price-badge{
  position:absolute;top:-12px;left:var(--sp-4);
  background:var(--ember-dark);color:#fff;font-size:11px;font-weight:700;
  padding:5px 12px;border-radius:var(--radius-xs);letter-spacing:.06em;text-transform:uppercase;
}
.price-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ember-dark);}
.price-card.featured .price-name{color:#ffb18a;}
.price-tagline{margin-top:8px;font-size:14px;color:var(--muted);}
.price-card.featured .price-tagline{color:rgba(250,247,242,.65);}
.price-amount{display:flex;align-items:baseline;gap:6px;margin:var(--sp-3) 0;}
.price-amount b{font-family:var(--font-display);font-size:clamp(38px,4.4vw,46px);font-weight:600;letter-spacing:-0.02em;}
.price-amount span{color:var(--muted);font-size:14px;}
.price-card.featured .price-amount span{color:rgba(250,247,242,.6);}
.price-cap{
  font-size:13px;font-weight:600;color:var(--text);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);margin-bottom:var(--sp-2);
}
.price-card.featured .price-cap{color:var(--paper);border-bottom-color:rgba(255,255,255,.14);}
.price-features{list-style:none;margin:0 0 var(--sp-3);padding:0;flex:1;}
.price-features li{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-size:14px;}
.price-features svg{flex-shrink:0;margin-top:4px;stroke:var(--ember);}
.price-card.featured .price-features svg{stroke:#ffb18a;}
.pricing-note{
  text-align:center;color:var(--muted);font-size:13.5px;margin:var(--sp-4) auto 0;max-width:64ch;
}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  font-weight:600;font-size:15.5px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:focus-visible{outline:2px solid var(--ember);outline-offset:-2px;}
.faq-plus{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ember);position:relative;}
.faq-plus::before, .faq-plus::after{
  content:"";position:absolute;background:var(--ember);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.faq-plus::before{width:9px;height:1.6px;}
.faq-plus::after{width:1.6px;height:9px;transition:transform .25s var(--ease);}
.faq-item[open] .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.faq-answer{padding:0 20px 18px;color:var(--muted);font-size:14.5px;max-width:64ch;}

/* ---------- CTA final ---------- */
.final-cta{background:var(--ink);padding:var(--sp-7) 0;text-align:center;}
.final-cta h2{color:var(--paper);font-size:clamp(32px,5vw,54px);font-weight:600;max-width:16ch;margin:0 auto;letter-spacing:-0.025em;}
.final-cta h2 em{font-style:italic;color:var(--ember);}
.final-cta p{color:rgba(250,247,242,.68);margin:var(--sp-3) auto 0;font-size:16px;max-width:50ch;}
.final-cta .btn{margin-top:var(--sp-4);}
.final-points{
  list-style:none;margin:var(--sp-3) auto 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
  font-size:13px;color:rgba(250,247,242,.66);
}
.final-points li{display:inline-flex;align-items:center;gap:7px;}
.final-points svg{stroke:#8fd6ac;flex-shrink:0;}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:rgba(250,247,242,.6);padding:var(--sp-5) 0;border-top:1px solid rgba(255,255,255,.07);}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);font-size:13.5px;}
.footer-brand{display:flex;flex-direction:column;gap:4px;}
.footer-logo{display:flex;align-items:center;}
.footer-tagline{font-size:13px;color:rgba(245,239,230,.68);}
.footer-links{display:flex;gap:var(--sp-4);list-style:none;padding:0;margin:0;flex-wrap:wrap;}
.footer-links a{display:inline-block;padding:8px 0;text-decoration:none;color:rgba(250,247,242,.65);transition:color .2s var(--ease);}
.footer-links a:hover{color:var(--paper);}
/* La fila legal: mismo estilo, un escalón más discreta y separada por un
   filete. Discreta, no escondida — sigue siendo clicable, legible y del mismo
   tamaño de objetivo táctil que el resto del pie. */
.footer-legal{
  gap:var(--sp-3);
  font-size:13px;
  margin-top:var(--sp-2);
  padding-top:var(--sp-2);
  border-top:1px solid rgba(255,255,255,.10);
  width:100%;
}
.footer-legal a{color:rgba(250,247,242,.5);}

/* ============================================================================
   Responsive. La referencia visual es móvil: el escritorio expande la misma
   página en columnas, no la rediseña.
   ========================================================================= */
@media (max-width: 980px){
  .hero-inner{gap:var(--sp-5);}
  .flows, .demos, .pricing-grid{grid-template-columns:1fr;}
  .retention-wrap, .trust-wrap, .band-inner, .contact-wrap{grid-template-columns:1fr;gap:var(--sp-5);}
  .steps{grid-template-columns:1fr;}
  .step{padding:var(--sp-4) 0;border-bottom:1px solid var(--line);}
  .step + .step{padding-left:0;border-left:none;}
  .step:last-child{border-bottom:none;}
  .pains, .gains{grid-template-columns:1fr;}
  .pain{padding:var(--sp-4) 0;}
  .pain:nth-child(even){padding-left:0;border-left:none;}
  .gain{padding:var(--sp-4) 0;}
  .gain:nth-child(even){padding-left:0;border-left:none;}
}
@media (max-width: 720px){
  .money-track{flex-direction:column;}
  .money-arrow{width:100%;height:26px;transform:rotate(90deg);}
}
@media (max-width: 560px){
  :root{--sp-7:64px;--sp-8:76px;}
  .hero{padding:calc(var(--sp-6) + 68px) 0 var(--sp-6);}
  .hero-copy h1{font-size:clamp(31px,8.6vw,42px);}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
  .flow{padding:var(--sp-3);}
  .demo-head{flex-direction:column;gap:12px;}
  .form-row{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
  section{scroll-margin-top:130px;}
  .promo-inner{flex-direction:column;align-items:flex-start;}
  .promo-band .btn{width:100%;}
  .band-copy .btn, .final-cta .btn{width:100%;}
  .sticky-text span{display:none;}
  body{padding-bottom:74px;}
  .sticky-inner{flex-wrap:nowrap;}
  .sticky-text strong{font-size:12.5px;}
  .sticky-bar .btn{padding:9px 13px;font-size:13px;}
}
@media (max-width: 400px){
  .container{padding:0 var(--sp-2);}
  .flow, .demo-head, .demo-body, .demo-foot, .contact-form, .price-card, .band-panel, .money{padding:var(--sp-2);}
  .price-badge{left:var(--sp-2);}
  .wa-thread{padding:9px;}
  .wa-msg{max-width:95%;font-size:12.5px;}
  .step-num{font-size:46px;}
}
/* En táctil no hay hover: sin esto, el primer tap "pega" la tarjeta levantada. */
@media (hover: none){
  .price-card:hover{transform:none;box-shadow:none;}
  .price-card.featured:hover{box-shadow:0 26px 52px -26px rgba(18,16,20,.45);}
  .btn:hover{transform:none;}
}

/* ============================================================================
   REDISEÑO 2026-08-26 — secciones nuevas.

   Todo usa los tokens de arriba: no hay un solo color literal fuera de la
   paleta. Los radios siguen siendo chicos por la misma razón editorial.
   ========================================================================= */

.container-narrow{max-width:760px;}
.btn-lg{padding:15px 30px;font-size:16px;}

/* ---- 3. Dos formas de cobrar -------------------------------------------
   Dos tarjetas y una cadena de pasos. Sustituye a .flows/.flow, que tenía
   cinco pasos de tres líneas cada uno por columna: la idea se entendía
   igual y la sección medía el doble. */
.cobros{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}
.cobro{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4);
}
.cobro.is-dark{background:var(--ink);border-color:var(--ink-2);color:var(--paper);}
.cobro-tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ember);margin-bottom:var(--sp-2);
}
.cobro.is-dark .cobro-tag{color:#f2a58c;}
.cobro h3{font-family:var(--font-display);font-size:22px;line-height:1.25;margin:0 0 var(--sp-3);}
.cobro > p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:var(--sp-3) 0 0;}
.cobro.is-dark > p{color:rgba(245,239,230,.72);}

/* La cadena: cada paso lleva al siguiente. La flecha es un pseudo-elemento y
   no un carácter en el HTML, para que un lector de pantalla lea los pasos y
   no siete flechas. */
.cadena{list-style:none;margin:0;padding:0;}
.cadena li{
  position:relative;padding:11px 14px;font-size:14px;font-weight:600;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.cobro.is-dark .cadena li{background:var(--ink-2);border-color:#3a3a3a;}
.cadena li + li{margin-top:22px;}
.cadena li + li::before{
  content:"";position:absolute;left:50%;top:-18px;width:1px;height:13px;
  background:var(--line-2);
}
.cadena li + li::after{
  content:"";position:absolute;left:calc(50% - 4px);top:-8px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--line-2);
}
.cobro.is-dark .cadena li + li::before{background:#4a4a4a;}
.cobro.is-dark .cadena li + li::after{border-top-color:#4a4a4a;}
.cadena .is-fin{
  background:var(--good-tint);border-color:#bfe3d0;color:var(--good);
}
.cobro.is-dark .cadena .is-fin{
  background:rgba(31,122,77,.22);border-color:rgba(31,122,77,.5);color:#7ddcaa;
}

/* ---- 5. Panel ----------------------------------------------------------
   Ya no hay seccion de dashboard aparte: se ensenaba el MISMO panel dos veces
   seguidas, una animada y otra estatica. Quedo la animada, que es la que
   muestra los numeros moviendose, y hereda aqui el mensaje de control que
   traia la seccion borrada. */
.panel-cierre{
  max-width:640px;margin:var(--sp-4) auto 0;text-align:center;
  font-size:15px;line-height:1.7;color:var(--muted);
}
.dash-ejemplo{
  font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--muted);
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px;
}

/* ---- 6. Tres beneficios ------------------------------------------------- */
.bene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
.bene{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4);
}
.bene-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-sm);
  background:var(--ember-tint);color:var(--ember-dark);margin-bottom:var(--sp-3);
}
.bene-icon svg{stroke:currentColor;}
.bene h3{font-family:var(--font-display);font-size:20px;margin:0 0 var(--sp-1);}
.bene p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0;}

/* ---- 5. Hecho para cómo se cobra en México ------------------------------
   Reutiliza `.bene`, la tarjeta blanca con chip de icono que ya vivía en esta
   hoja: mismo borde, mismo radio, mismo tinte terracota. Aquí va en cuatro
   columnas y más compacta, porque son etiquetas de una línea y no
   funcionalidades que explicar — eso ya pasó en las dos secciones de arriba.

   Las columnas se declaran con `.bene-grid.is-cuatro` (especificidad 0,2,0) a
   propósito: el corte de 900px baja `.bene-grid` a una sola columna, y sin
   esto cuatro tarjetas apiladas en una tablet serían una pantalla entera de
   scroll. Con la especificidad mayor, esta rejilla lleva sus propios cortes.
   ------------------------------------------------------------------------ */
.bene-grid.is-cuatro{
  grid-template-columns:repeat(4,1fr);
  list-style:none;margin:0;padding:0;
}
.bene.is-compacta{padding:var(--sp-3);}
.bene.is-compacta .bene-icon{width:36px;height:36px;margin-bottom:var(--sp-2);}
.bene.is-compacta h3{font-size:17px;}
.bene.is-compacta p{font-size:14px;line-height:1.6;}

.mx-cierre{
  max-width:640px;margin:var(--sp-5) auto 0;text-align:center;
  font-size:16.5px;line-height:1.7;color:var(--muted);
}
/* `.posicionamiento` nace alineado a la izquierda porque en "¿Te suena?" vive
   dentro de una columna angosta. Aquí cierra una sección centrada. */
.mx-posicion{margin:var(--sp-3) auto 0;text-align:center;}

/* ---- 7. El recorrido del dinero ---------------------------------------- */
.ruta{
  list-style:none;margin:0 auto;padding:0;max-width:760px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);
}
.ruta li{
  position:relative;text-align:center;padding:var(--sp-3);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.ruta li + li::before{
  content:"";position:absolute;left:calc(var(--sp-3) * -1);top:50%;
  width:var(--sp-3);height:1px;background:var(--line-2);
}
.ruta b{display:block;font-family:var(--font-display);font-size:18px;margin-bottom:4px;}
.ruta span{font-size:13.5px;color:var(--muted);}
.ruta .is-fin{background:var(--good-tint);border-color:#bfe3d0;}
.ruta .is-fin b{color:var(--good);}
/* ---- La otra objeción: "¿y si me mandan un comprobante falso?" ----------
   Misma tarjeta blanca y mismo ancho que `.no-hiciste`, que es el bloque
   equivalente de la sección de la demo. No la reusa tal cual porque aquélla
   tacha sus renglones —son cosas que NO pasaron— y aquí es al revés: son
   comprobaciones que sí ocurren, con palomita.
   ------------------------------------------------------------------------ */
.comprobantes-confianza{
  max-width:640px;margin:var(--sp-5) auto 0;padding:var(--sp-4);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.comprobantes-confianza h3{
  font-family:var(--font-display);font-size:21px;line-height:1.3;
  margin:0 0 var(--sp-2);
}
.comprobantes-confianza ul{list-style:none;margin:0;padding:0;}
.comprobantes-confianza li{
  position:relative;padding:9px 0 9px 30px;
  font-size:15px;line-height:1.55;color:var(--muted);
}
.comprobantes-confianza li + li{border-top:1px solid var(--line);}
/* La palomita es un pseudo-elemento y no un carácter en el HTML, para que un
   lector de pantalla lea las cuatro comprobaciones y no cuatro palomitas. */
.comprobantes-confianza li::before{
  content:"\2713";position:absolute;left:7px;top:9px;
  font-size:14px;font-weight:700;color:var(--good);
}
.comprobantes-confianza > p{
  margin:var(--sp-3) 0 0;padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  font-family:var(--font-display);font-size:18px;line-height:1.45;
  color:var(--text);
}

.ruta-nota{
  max-width:640px;margin:var(--sp-4) auto 0;text-align:center;
  font-size:15px;line-height:1.7;color:var(--muted);
}

/* ---- 8. Cómo empezar ---------------------------------------------------- */
.pasos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);
}
.pasos li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);}
.paso-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-display);font-size:16px;font-weight:700;
  margin-bottom:var(--sp-3);
}
.pasos h3{font-family:var(--font-display);font-size:19px;margin:0 0 6px;}
.pasos p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0;}

/* ---- 9. Pricing: prueba y Plan Fundador -------------------------------- */
.trial-nota{
  max-width:640px;margin:var(--sp-4) auto 0;text-align:center;
  font-size:15px;line-height:1.7;color:var(--muted);
}
.trial-nota b{color:var(--text);}

/* El Fundador va aparte de la reja de planes a propósito: no es un cuarto
   plan, es una condición de entrada limitada. */
.fundador{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;
  margin-top:var(--sp-5);padding:var(--sp-4);
  background:var(--ink);color:var(--paper);
  border-radius:var(--radius);
}
.fundador-copy{flex:1 1 380px;}
.fundador-tag{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);background:#f2a58c;
  border-radius:999px;padding:3px 10px;margin-bottom:var(--sp-2);
}
/* Los cinco lugares ocupados. El durazno de arriba grita urgencia y aquí ya no
 * hay nada que apurar, así que la etiqueta se apaga a un gris de la propia
 * tarjeta. Medido: texto --paper sobre este fondo da 7.39:1, pasa AA de sobra
 * (el estado normal, --ink sobre #f2a58c, da 8.27:1). */
.fundador-tag.is-agotado{background:rgba(245,239,230,.22);color:var(--paper);}
.fundador h3{font-family:var(--font-display);font-size:21px;line-height:1.3;margin:0 0 var(--sp-1);}
.fundador p{font-size:14px;line-height:1.65;color:rgba(245,239,230,.72);margin:0;}
.fundador .btn{flex:0 0 auto;}

/* ---- 10. Hablar con nosotros ------------------------------------------- */
.hablar{
  margin-top:var(--sp-5);padding:var(--sp-4);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.hablar-copy b{display:block;font-family:var(--font-display);font-size:19px;margin-bottom:4px;}
.hablar-copy span{font-size:14.5px;color:var(--muted);}
.hablar-form{margin-top:var(--sp-3);}
.hablar-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;}
.campo input{
  width:100%;padding:11px 13px;font-family:var(--font-body);font-size:15px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);
}
.campo input:focus-visible{outline:2px solid var(--ember);outline-offset:1px;border-color:var(--ember);}
.hablar-form .btn{margin-top:var(--sp-3);}

/* ---- 11. CTA final ------------------------------------------------------ */
.final-inner{text-align:center;}
.final-actions{
  display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;
  margin-top:var(--sp-4);
}
.final-note{margin-top:var(--sp-3);font-size:14px;color:rgba(245,239,230,.62);}

/* ---- 2. Video de la demo ------------------------------------------------ */
.video-wrap{max-width:860px;margin:0 auto;}
.video-poster{
  display:block;position:relative;width:100%;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--ink);
}
.video-poster img{display:block;width:100%;height:auto;opacity:.55;}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:66px;height:66px;border-radius:50%;
  background:var(--ember);color:#fff;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.55);
  transition:transform .18s ease;
}
.video-poster:hover .video-play{transform:translate(-50%,-50%) scale(1.06);}
.video-label{
  position:absolute;left:50%;bottom:var(--sp-3);transform:translateX(-50%);
  font-size:14px;font-weight:600;color:var(--paper);
  background:rgba(0,0,0,.55);border-radius:999px;padding:7px 16px;white-space:nowrap;
}
.video-poster:focus-visible{outline:3px solid var(--ember);outline-offset:2px;}

.video-modal{
  border:none;padding:0;background:transparent;
  width:min(960px,94vw);overflow:visible;
}
.video-modal::backdrop{background:rgba(15,13,12,.82);}
.video-frame{position:relative;padding-top:56.25%;background:#000;border-radius:var(--radius);overflow:hidden;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-close{
  position:absolute;top:-42px;right:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);border:none;color:#fff;
}
.video-close svg{stroke:currentColor;}
.video-close:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* ---- Botón flotante de WhatsApp ----------------------------------------
   Quieto: no pulsa, no rebota y no abre nada solo. En móvil el texto se
   esconde y queda el círculo, para no tapar los CTAs de ancho completo.
   `--wa-fab-bottom` existe para poder subirlo si algo ocupa la parte baja de
   la pantalla. */
.wa-fab{
  position:fixed;right:20px;bottom:var(--wa-fab-bottom,20px);z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px 12px 14px;border-radius:999px;
  background:var(--wa);color:#fff;text-decoration:none;
  font-size:14px;font-weight:600;line-height:1;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
  transition:transform .18s ease;
}
.wa-fab:hover{transform:translateY(-2px);color:#fff;}
/* Mientras el banner de cookies esté abierto, el flotante se quita.
   El banner es fijo, alto (287px en un teléfono) y va en z-index 9999, así que
   sepultaba al botón: se veía a medias y no se podía tocar. Dos cosas flotando
   compitiendo abajo a la derecha es peor que una. La clase la pone cookies.js
   en <html>, y desaparece en cuanto la persona elige. */
html.dojo-cookies-abierto .wa-fab{display:none;}
.wa-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.wa-fab svg{flex-shrink:0;}

/* ---- Móvil --------------------------------------------------------------
   Una columna en todo, y el flotante reducido a círculo para no competir con
   los CTAs de ancho completo. */
@media (max-width: 980px){
  /* Dos y dos antes de apilar: cuatro etiquetas de una línea caben de sobra
     en media tablet, y bajar a una columna aquí sería scroll regalado. */
  .bene-grid.is-cuatro{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 900px){
  .cobros,.bene-grid,.pasos,.ruta,.hablar-campos{grid-template-columns:1fr;}
  .ruta li + li::before{
    left:50%;top:calc(var(--sp-3) * -1);width:1px;height:var(--sp-3);
  }
}
@media (max-width: 560px){
  .cobro,.bene,.pasos li,.hablar,.fundador{padding:var(--sp-3);}
  /* En el teléfono, el icono se va a la izquierda. Con el chip arriba, cuatro
     tarjetas apiladas miden una pantalla completa; en fila miden la mitad y la
     sección sigue leyéndose de un vistazo, que es lo que tiene que hacer. */
  .bene-grid.is-cuatro{grid-template-columns:1fr;gap:var(--sp-2);}
  .bene.is-compacta{
    display:grid;grid-template-columns:36px 1fr;gap:2px var(--sp-3);
    align-items:start;
  }
  .bene.is-compacta .bene-icon{grid-row:1 / span 2;margin-bottom:0;}
  .bene.is-compacta h3{align-self:center;}
  .mx-cierre{text-align:left;font-size:15.5px;}
  .mx-posicion{text-align:left;font-size:18px;}
  .fundador{flex-direction:column;align-items:flex-start;}
  .fundador .btn{width:100%;text-align:center;}
  .final-actions .btn{width:100%;}
  .video-label{font-size:12.5px;padding:6px 12px;}
  .video-play{width:54px;height:54px;}
  .video-close{top:-38px;}
  /* Sólo el círculo: el rótulo ocuparía media pantalla y taparía botones. */
  .wa-fab{
    right:14px;bottom:var(--wa-fab-bottom,14px);
    padding:0;width:52px;height:52px;justify-content:center;gap:0;
  }
  .wa-fab-text{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .wa-fab,.video-play,.video-poster:hover .video-play{transition:none;transform:none;}
  .video-play{transform:translate(-50%,-50%);}
  .wa-fab:hover{transform:none;}
}

/* ---- 2. ¿Te suena? ------------------------------------------------------
   El beat de problema. Deliberadamente austero: una lista sin tarjetas, sin
   iconos y sin fondo. Si esta seccion se ve "disenada" deja de leerse como el
   lunes del sensei y empieza a leerse como marketing. */
.suena{list-style:none;margin:0;padding:0;max-width:620px;}
.suena li{
  position:relative;padding:14px 0 14px 30px;
  font-size:16px;line-height:1.55;color:var(--text);
}
.suena li + li{border-top:1px solid var(--line);}
.suena li::before{
  content:"";position:absolute;left:6px;top:22px;
  width:7px;height:7px;border-radius:50%;background:var(--ember);
}
.posicionamiento{
  max-width:620px;margin:var(--sp-4) 0 0;
  font-family:var(--font-display);font-size:20px;line-height:1.45;
  color:var(--muted);
}
.posicionamiento em{font-style:normal;color:var(--text);}

/* ---- Lo que tu NO hiciste ----------------------------------------------
   Cierra la demo de Carlos y Ana. Palomas tachadas en vez de vinetas: la
   lista no es de cosas que pasaron, es de cosas que NO tuviste que hacer. */
.no-hiciste{
  max-width:620px;margin:var(--sp-5) auto 0;padding:var(--sp-4);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.no-hiciste h3{
  font-family:var(--font-display);font-size:21px;margin:0 0 var(--sp-3);
}
.no-hiciste h3 em{font-style:italic;color:var(--ember);}
.no-hiciste ul{list-style:none;margin:0;padding:0;}
.no-hiciste li{
  position:relative;padding:9px 0 9px 30px;
  font-size:15px;line-height:1.55;color:var(--muted);
  text-decoration:line-through;text-decoration-color:var(--line-2);
}
.no-hiciste li::before{
  content:"\00d7";position:absolute;left:7px;top:8px;
  font-size:16px;font-weight:700;color:var(--line-2);text-decoration:none;
}
.no-hiciste-cierre{
  margin:var(--sp-3) 0 0;padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  font-family:var(--font-display);font-size:19px;line-height:1.4;
  color:var(--muted);
}
.no-hiciste-cierre em{font-style:normal;color:var(--text);}

/* La idea de retencion, en una linea dentro de la tarjeta de domiciliacion.
   No es una seccion: es una consecuencia de lo que ya dice la tarjeta. */
.cobro-nota{
  margin:var(--sp-2) 0 0;font-size:13.5px;line-height:1.6;font-style:italic;
}
.cobro.is-dark .cobro-nota{color:rgba(245,239,230,.58);}

/* ---- Los puntos de "tu dinero" ----------------------------------------- */
.dinero-puntos{
  list-style:none;margin:var(--sp-4) auto 0;padding:0;max-width:660px;
}
.dinero-puntos li{
  position:relative;padding:11px 0 11px 26px;
  font-size:15px;line-height:1.6;color:var(--muted);
}
.dinero-puntos li + li{border-top:1px solid var(--line);}
.dinero-puntos li b{color:var(--text);}
.dinero-puntos li::before{
  content:"";position:absolute;left:4px;top:20px;
  width:6px;height:6px;border-radius:50%;background:var(--line-2);
}

/* ---- El boton del Plan Fundador ----------------------------------------
   Deja de ser primario. El CTA que tiene que dominar toda la pagina es
   "Probar DojoPay gratis"; si el Fundador compite con el mismo peso visual,
   la pagina ofrece dos caminos igual de fuertes y el visitante elige ninguno.
   Sobre fondo carbon, un boton de contorno claro se lee sin gritar. */
.btn-fundador{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:15px;font-weight:600;
  background:transparent;color:var(--paper);
  border:1px solid rgba(245,239,230,.45);
  text-decoration:none;cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.btn-fundador:hover{background:rgba(245,239,230,.10);border-color:var(--paper);color:var(--paper);}
.btn-fundador:focus-visible{outline:2px solid var(--paper);outline-offset:3px;}

@media (max-width: 560px){
  /* 44px es el minimo tocable; el boton del nav se quedaba en 43. */
  .nav-right .btn-sm{min-height:44px;}
  .no-hiciste,.comprobantes-confianza{padding:var(--sp-3);}
  .suena li{font-size:15px;}
  .posicionamiento{font-size:18px;}
  .no-hiciste-cierre{font-size:17px;}
  .comprobantes-confianza h3{font-size:19px;}
  .comprobantes-confianza > p{font-size:17px;}
  .btn-fundador{width:100%;}
}