/* ══════════════════════════════════════════════════════════════════════════════
   site.css — WinTech IA, sistema visual de Google en producción
   ══════════════════════════════════════════════════════════════════════════════
   Este archivo reemplaza al CSS de marca (marino + oro + amarillo, Fraunces + Plus Jakarta), que
   quedó respaldado en `site.css.bak-marca-v8`. La dirección visual aprobada por el fundador es la
   del preview: Roboto Flex, Google Symbols, los cuatro colores de marca de Google como acento, el
   azul #1A73E8 para la acción, y radios, elevación y curvas de Material 3.

   Reglas medidas, no opinadas:
     · El color de marca NO se usa como texto sobre claro (amarillo 1,6:1 y verde 3,0:1 con blanco
       encima). Para texto van las variantes oscuras: #1967D2, #C5221F, #9A5B00, #137333.
     · El gris #867364 es para íconos y trazos, nunca para texto.
     · Una sola superficie oscura por página.
     · Los botones llevan capa de estado (8 % / 12 %) y ondulación: así responde Material al toque.

   Cubre DOS familias de página:
     1. Home: vocabulario propio (hero, marquee, pains, funnel, plans, picker, founder…).
     2. Páginas internas (servicios, método, contacto, ficha de Google, legales): vocabulario
        compartido (container, header-in, kicker, title, card, cols-2/3, step, cta-band, foot…).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* Marca (los cuatro colores de Google) */
  --g-blue:#4285F4;
  --g-red:#EA4335;
  --g-yellow:#FBBC05;
  --g-green:#34A853;

  /* Producto e interacción */
  --g-action:#1A73E8;
  --g-action-hover:#1765CC;
  --g-action-press:#185ABC;
  --navy:#0B2A5B;          /* se conserva el nombre histórico de los tokens oscuros */
  --navy-deep:#0B2A5B;
  --navy-ink:#0A2540;
  --g-navy:#174EA6;

  /* Contenedores tonales (par fondo/texto de Material 3) */
  --g-blue-c:#E8F0FE;    --g-blue-ink:#1967D2;
  --g-red-c:#FCE8E6;     --g-red-ink:#C5221F;
  --g-yellow-c:#FEF7E0;  --g-yellow-ink:#9A5B00;
  --g-green-c:#E6F4EA;   --g-green-ink:#137333;
  --g-grey-c:#F6F2EF;

  /* Neutros */
  --g-ink:#1F1913;
  --g-ink-2:#4B3E34;
  --g-ink-3:#65594D;
  --g-ink-4:#867364;
  --line:#E3D8C9;
  --line-2:#EFEAE6;
  --surface:#FAF6EF;
  --surface-2:#F6F2EF;
  --card:#FFFFFF;
  --dark:#1F1913;
  --bg:#FFFFFF;
  --ivory:#FAF6EF;          /* token viejo de la home: ahora es el gris de superficie */

  /* Sobre oscuro */
  --on-dark:#FFFFFF;
  --on-dark-2:#BDC1C6;
  --on-dark-3:#B09E90;

  /* Elevación: las seis sombras de Material (2/3/6/8/12/16 dp) */
  --e1:0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --e2:0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  --e3:0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
  --e4:0 2px 3px 0 rgba(60,64,67,.30), 0 6px 10px 4px rgba(60,64,67,.15);
  --e5:0 4px 4px 0 rgba(60,64,67,.30), 0 8px 12px 6px rgba(60,64,67,.15);
  --e6:0 6px 6px 0 rgba(60,64,67,.30), 0 10px 14px 8px rgba(60,64,67,.15);

  /* Forma */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:28px; --r-full:999px;

  /* Movimiento (curvas de Material 3) */
  --mo-emph:cubic-bezier(.2,0,0,1);
  --mo-emph-out:cubic-bezier(.05,.7,.1,1);
  --mo-std:cubic-bezier(.2,0,0,1);
  --mo-short:180ms; --mo-med:280ms; --mo-long:420ms; --mo-cine:760ms;
  --st-hover:8%; --st-focus:10%; --st-press:12%;

  --wrap:1180px;
}

/* ── 2 · Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--g-ink);
  font-family:"Roboto Flex","Roboto Flex",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4,h5{
  font-family:"Roboto Flex","Roboto Flex",Roboto,sans-serif;
  font-weight:500;line-height:1.1;letter-spacing:-.015em;margin:0;color:var(--g-ink);
}
h1{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.06;letter-spacing:-.024em}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.02em}
h3{font-size:1.25rem;line-height:1.2;letter-spacing:-.014em}
h4{font-size:1.0625rem;line-height:1.3}
p{margin:0}
a{color:var(--g-action);text-decoration:none;transition:color var(--mo-short) var(--mo-std)}
a:hover{color:var(--g-action-hover)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--g-action);outline-offset:2px;border-radius:4px;
}
img,svg{max-width:100%;display:block}
b,strong{font-weight:600}
code,.mono{font-family:"Roboto Flex",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:400;background:var(--g-action);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:500;
}
.skip-link:focus{left:0;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container,.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* Íconos de Material (Google Symbols) */
.msym{
  font-family:"Google Symbols";font-weight:400;font-style:normal;font-size:20px;line-height:1;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:"liga";font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased;user-select:none;vertical-align:middle;
}
.msym--sm{font-size:18px}
.msym--lg{font-size:24px}
/* Compatibilidad: las páginas viejas usan <span class="ico">emoji</span>. Se normaliza el tamaño
   para que un emoji no rompa la línea base del titular. */
.ico{font-size:1.35rem;line-height:1;display:inline-block}

/* ── 3 · Secciones ──────────────────────────────────────────────────────────── */
.sec{padding:clamp(72px,10vw,132px) 0;position:relative}
.sec--tight{padding:clamp(48px,6vw,76px) 0}
.sec--white{background:var(--bg)}
.sec--ivory{background:var(--surface)}
.sec--navy{background:var(--dark);color:var(--on-dark)}
.sec--navy h2,.sec--navy h3,.sec--navy h4{color:var(--on-dark)}
.sec-head{max-width:760px;margin:0 0 clamp(36px,4.6vw,60px)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-block;font-family:"Roboto Flex","Roboto Flex",sans-serif;
  font-size:.875rem;font-weight:500;letter-spacing:.01em;color:var(--g-ink-3);
  margin:0 0 14px;
}
.sec--navy .eyebrow,.eyebrow--onnavy{color:var(--on-dark-2)}
.kicker{
  display:inline-block;font-size:.8125rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g-ink-3);margin:0 0 16px;
}
.title,.h-sec{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px}
.lede,.lead{color:var(--g-ink-3);font-size:1.0625rem;line-height:1.65;max-width:62ch;margin-top:10px}
.sec--navy .lede{color:var(--on-dark-2)}
.micro{font-size:.8125rem;line-height:1.55;color:var(--g-ink-3)}
.hl{color:var(--g-action);font-style:normal}
.hl--strong{color:var(--g-action);font-weight:500}
/* Segunda mitad de la promesa del hero, en verde. El verde de marca (#34A853) da 3,0:1 sobre blanco
   —no sirve para texto— así que se usa la tinta verde del sistema (#137333, 7,1:1). */
.hl--verde{color:var(--g-green-ink);font-style:normal}
.gold{color:var(--g-yellow-ink)}       /* el token viejo sobrevive como ámbar legible */
.h-card{font-size:1.125rem;margin-bottom:8px}
.tldr{
  background:var(--g-blue-c);color:var(--g-blue-ink);border-radius:var(--r-md);
  padding:20px 24px;font-size:.9375rem;line-height:1.6;margin-bottom:40px;
}
.tldr strong{color:var(--navy-ink)}
.price-note{
  margin-top:34px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:22px 26px;font-size:.9rem;line-height:1.7;color:var(--g-ink-3);
}
.price-note strong{color:var(--g-ink-2)}
.turnstile-note{margin-top:18px;font-size:.8125rem;color:var(--g-ink-3)}
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:120;
  width:56px;height:56px;border-radius:var(--r-full);background:var(--navy-deep);color:#fff;
  display:grid;place-items:center;box-shadow:var(--e4);font-size:1.3rem;
  transition:transform var(--mo-med) var(--mo-emph),box-shadow var(--mo-med) var(--mo-emph);
}
.wa-float:hover{transform:translateY(-3px);box-shadow:var(--e5);color:#fff;text-decoration:none}

/* ── 4 · Botones ────────────────────────────────────────────────────────────── */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border:1px solid transparent;border-radius:var(--r-full);
  font-family:"Roboto Flex","Roboto Flex",Roboto,sans-serif;
  font-size:.9375rem;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color var(--mo-med) var(--mo-emph),box-shadow var(--mo-med) var(--mo-emph),
             border-color var(--mo-med) var(--mo-emph),transform var(--mo-short) var(--mo-emph);
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.985)}
.btn::before{
  content:"";position:absolute;inset:0;background:currentColor;opacity:0;
  transition:opacity var(--mo-med) var(--mo-emph);pointer-events:none;z-index:-1;
}
.btn:hover::before{opacity:var(--st-hover)}
.btn:focus-visible::before{opacity:var(--st-focus)}
.btn:active::before{opacity:var(--st-press)}
.btn .ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.16;transform:scale(0);pointer-events:none;animation:ripple 620ms var(--mo-emph-out) forwards}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
.btn .ic,.btn .btn__chip{transition:transform var(--mo-med) var(--mo-emph)}
.btn:hover .ic,.btn:hover .btn__chip{transform:translateX(3px)}

/* Primario (azul de acción) */
.btn-gold,.btn-primary{background:var(--g-action);color:#fff;box-shadow:var(--e1)}
.btn-gold:hover,.btn-primary:hover{background:var(--g-action-hover);box-shadow:var(--e2);color:#fff}
.btn-gold:active,.btn-primary:active{background:var(--g-action-press)}
/* Secundario (contorno) */
.btn-ghost,.btn-outline{background:var(--card);color:var(--g-action);border-color:var(--g-action)}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--g-action-hover);color:var(--g-action-hover);background:var(--g-blue-c)}
/* Sobre fondo oscuro */
.btn-ghost--onnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.36)}
.btn-ghost--onnavy:hover{border-color:rgba(255,255,255,.62);color:#fff}
.btn-navy{background:var(--navy-deep);color:#fff}
.btn-navy:hover{background:#123A78;color:#fff}
.btn--tonal{background:var(--g-blue-c);color:var(--navy-ink)}
.btn--tonal:hover{background:#DCE7FD}
.btn--text{background:transparent;color:var(--g-action);padding:0 14px}
.btn-block{width:100%}
.btn--lg{min-height:56px;padding:0 30px;font-size:1rem}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--g-action-hover);font-weight:500;font-size:.9375rem;transition:gap var(--mo-med) var(--mo-emph),color var(--mo-med) var(--mo-emph)}
.link-arrow:hover{gap:10px;color:var(--g-action)}

/* ── 5 · Cabecera ───────────────────────────────────────────────────────────── */
header.site{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--mo-med) var(--mo-std),box-shadow var(--mo-med) var(--mo-std);
}
header.site.is-stuck{border-bottom-color:var(--line-2);box-shadow:var(--e1)}
.header-in{display:flex;align-items:center;gap:26px;height:76px;flex-wrap:wrap}
.brand{
  display:inline-flex;align-items:center;gap:12px;color:var(--g-ink);
  font-family:"Roboto Flex","Roboto Flex",sans-serif;font-size:1.3125rem;font-weight:500;letter-spacing:-.012em;
}
.brand:hover{color:var(--g-ink);text-decoration:none}
/* "IA" en negrita más gruesa: con 400 quedaba más fino que "WinTech" (500) y se leía descolgado.
   Se pide Roboto Flex 700 en la URL de fuentes para no depender de la negrita sintética del
   navegador, que se ve sucia. */
.brand .ia{color:var(--g-action);font-weight:700;font-size:1.02em}
/* El símbolo de WinTech es el INFINITO asimétrico de trazo continuo (Manual v1.0). Se sirve como
   imagen —`/assets/logo-mark.svg`— y su trazado está recortado a la tinta, así que 44 px de CSS
   son 44 px de símbolo: antes el glifo usaba solo el 64 % del lienzo y se veía pequeño.
   Sobre fondo oscuro se invierte a blanco con `filter`; sobre claro va en azul de acción.
   El PIE es claro, así que ahí NO se invierte: en blanco sobre gris quedaba invisible. */
.brand__mark{width:44px;height:44px;flex:0 0 auto;display:block;object-fit:contain}
.sec--navy .brand__mark,.nav-overlay .brand__mark,.cta-band .brand__mark{filter:brightness(0) invert(1)}
.wmark{width:28px;height:28px;flex:0 0 auto}
.wt{font-weight:500}
header.site nav.main{display:flex;gap:4px;margin-left:auto}
header.site nav.main a{
  color:var(--g-ink-3);font-size:.9375rem;font-weight:500;padding:9px 15px;border-radius:var(--r-full);
  transition:background-color var(--mo-med) var(--mo-emph),color var(--mo-med) var(--mo-emph);
}
header.site nav.main a:hover{background:var(--surface-2);color:var(--g-ink);text-decoration:none}
/* Scrollspy: el ítem del menú cuya sección está en pantalla. Mismo tratamiento que el hover, pero
   persistente: es la forma en que los sitios de una página muestran dónde estás. */
header.site nav.main a.is-active{background:var(--surface-2);color:var(--g-ink)}
.accent-serif{color:var(--g-action)}
.nav-cta{min-height:44px;padding:0 20px;font-size:.9rem}
.nav-toggle{
  display:none;position:relative;width:44px;height:44px;flex:0 0 auto;
  background:none;border:0;cursor:pointer;padding:0;border-radius:var(--r-full);
  transition:background-color var(--mo-med) var(--mo-emph);
}
.nav-toggle:hover{background:var(--surface-2)}
/* Hamburguesa de verdad: tres barras reales que se MORFAN en una X al abrir. Antes era el
   carácter "☰" (que se dibuja distinto en cada sistema) con el truco de font-size:0 y un ::before
   con "✕": no había transformación y en algunos móviles el glifo se veía como un cuadrado. */
.nav-toggle__bar{
  position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:var(--g-ink);
  transition:transform var(--mo-long) var(--mo-emph),opacity var(--mo-short) var(--mo-emph),top var(--mo-long) var(--mo-emph);
}
.nav-toggle__bar:nth-child(1){top:15px}
.nav-toggle__bar:nth-child(2){top:21px}
.nav-toggle__bar:nth-child(3){top:27px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){top:21px;transform:rotate(-45deg)}
/* Menú móvil: panel a pantalla completa con los enlaces en columna. */
.nav-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:none;padding:96px 24px 32px;overflow-y:auto;
}
.nav-overlay.open{display:block;animation:aparece var(--mo-long) var(--mo-emph-out) both}
/* El atributo `hidden` del HTML pelea con el flex del panel: se anula explícitamente. */
.nav-overlay[hidden]{display:none}
.nav-overlay.open[hidden]{display:block}
@keyframes aparece{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav-overlay__panel{display:grid;gap:2px;max-width:420px;margin:0 auto}
.nav-overlay__panel a{
  display:block;padding:18px 8px;border-bottom:1px solid var(--line-2);
  font-family:"Roboto Flex",sans-serif;font-size:1.25rem;font-weight:500;color:var(--g-ink);
}
.nav-overlay__panel a:last-child{border-bottom:0;color:var(--g-action);font-weight:500}
.nav-overlay__panel a:hover{color:var(--g-action)}
/* Botón de cierre del panel. Hace falta de verdad: el panel cubre la pantalla completa, así que
   tapa la hamburguesa de la cabecera y sin este botón no había forma de cerrar el menú. */
.nav-overlay__cerrar{
  position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--card);cursor:pointer;padding:0;
  transition:background-color var(--mo-med) var(--mo-emph),border-color var(--mo-med) var(--mo-emph);
}
.nav-overlay__cerrar:hover{background:var(--surface-2);border-color:var(--line)}
.nav-overlay__cerrar span{
  position:absolute;left:11px;top:21px;width:22px;height:2px;border-radius:2px;background:var(--g-ink);
}
.nav-overlay__cerrar span:nth-child(1){transform:rotate(45deg)}
.nav-overlay__cerrar span:nth-child(2){transform:rotate(-45deg)}
.nav-island{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-bottom:1px solid transparent}
.nav-island.is-stuck{border-bottom-color:var(--line-2);box-shadow:var(--e1)}
.nav-links{display:flex;gap:4px;margin-left:auto}

/* ── 6 · Hero (home) ────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;background:var(--bg);
  padding:clamp(56px,8vw,104px) 0 clamp(56px,8vw,100px);
}
.hero::before{
  content:"";position:absolute;inset:-32% -20% auto -20%;height:78%;pointer-events:none;
  background:
    radial-gradient(52% 60% at 22% 0%,rgba(66,133,244,.10) 0%,rgba(66,133,244,0) 70%),
    radial-gradient(44% 54% at 78% 0%,rgba(52,168,83,.07) 0%,rgba(52,168,83,0) 68%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(40px,5vw,72px);align-items:center}
.hero h1{margin-bottom:20px}
.hero .display{font-size:clamp(2.2rem,5.4vw,3.75rem);line-height:1.05;letter-spacing:-.026em}
.hero .lede{max-width:52ch}
.hero-mark{position:absolute;pointer-events:none;opacity:.05;width:520px;height:520px}
.orb{position:absolute;pointer-events:none;opacity:.16}
.orb--sphere{width:220px;height:220px;left:-70px;top:12%}
.orb--torus{width:180px;height:180px;right:-50px;bottom:6%}
.orb--cube{width:200px;height:220px;right:14%;top:6%}
.trustline{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line-2)}
.trustline span{display:inline-flex;align-items:center;gap:9px;color:var(--g-ink-3);font-size:.875rem}
.trustline i{width:16px;height:16px;border-radius:var(--r-full);background:var(--g-green-c);display:inline-block;position:relative;flex:0 0 auto}
.trustline i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:8px;border:solid var(--g-green-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.hero-stats div{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-md);padding:18px;box-shadow:var(--e1)}
.hero-stats b{display:block;font-family:"Roboto Flex",sans-serif;font-weight:500;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1}
.hero-stats span{display:block;color:var(--g-ink-3);font-size:.8125rem;line-height:1.45;margin-top:4px}

/* Tarjeta de chat: doble bisel */
.chatcard{padding:8px;border-radius:36px;background:linear-gradient(180deg,var(--surface) 0%,var(--card) 100%);border:1px solid var(--line-2);box-shadow:var(--e3)}
.chatcard__core{background:var(--card);border-radius:28px;padding:22px;border:1px solid var(--line-2)}
.chatcard__head{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line-2);margin-bottom:18px;font-family:"Roboto Flex",sans-serif;font-weight:500;font-size:.9375rem}
.chatcard__foot{display:flex;gap:8px;align-items:flex-start;color:var(--g-ink-3);font-size:.8125rem;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--g-green);display:inline-block;box-shadow:0 0 0 3px rgba(52,168,83,.16);flex:0 0 auto}
.bubble{border-radius:20px;padding:12px 16px;font-size:.9375rem;line-height:1.5;max-width:86%;margin:0 0 10px;animation:rise var(--mo-cine) var(--mo-emph-out) both}
.bubble--in{background:var(--surface-2);color:var(--g-ink);border-bottom-left-radius:6px}
.bubble--out{background:var(--g-blue-c);color:var(--navy-ink);margin-left:auto;border-bottom-right-radius:6px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── 7 · Banda de herramientas ──────────────────────────────────────────────── */
/* El carril del marquee mide varios miles de píxeles por diseño; sin recortar en un contenedor
   propio, su ancho empujaba el documento 15 px en móvil (medido a 390 px). La banda es de borde a
   borde a propósito, y la etiqueta lleva margen lateral para no pegarse al borde. */
.marquee{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--surface);padding:26px 0}
.marquee__recorte{overflow:hidden;max-width:100%}
.marquee__label{text-align:center;color:var(--g-ink-3);font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;padding-inline:24px}
.marquee__track{display:flex;gap:44px;width:max-content;animation:desliza 34s linear infinite}
.marquee__row{display:flex;gap:12px}
@keyframes desliza{to{transform:translateX(-50%)}}
.pill-tech{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-full);
  padding:9px 18px;font-size:.875rem;color:var(--g-ink-2);
}
.pill-tech i{width:8px;height:8px;border-radius:var(--r-full);background:var(--g-action);display:block}
.pill-tech:nth-child(2n) i{background:var(--g-green)}
.pill-tech:nth-child(3n) i{background:var(--g-yellow)}
.pill-tech:nth-child(4n) i{background:var(--g-red)}

/* ── 8 · Dolor ──────────────────────────────────────────────────────────────── */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pain{display:flex;gap:16px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--e1);transition:box-shadow var(--mo-med) var(--mo-emph),transform var(--mo-med) var(--mo-emph)}
.pain:hover{box-shadow:var(--e3);transform:translateY(-3px)}
.pain__n{font-family:"Roboto Flex",monospace;font-size:.8125rem;color:var(--g-ink-3);flex:0 0 auto;padding-top:3px}
.pain h3{margin-bottom:6px;font-size:1.0625rem}
.pain p{color:var(--g-ink-3);font-size:.9375rem;line-height:1.6}
.pain-note{margin-top:30px;background:var(--g-blue-c);color:var(--navy-ink);border-radius:var(--r-md);padding:22px 26px;font-size:.9375rem;line-height:1.65}
.pain-note strong{color:var(--navy-ink)}

/* ── 9 · Tarjetas, rejillas y envolturas ────────────────────────────────────── */
.grid{display:grid;gap:20px}
.grid--3,.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2,.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.core{
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--e1);transition:box-shadow var(--mo-med) var(--mo-emph),transform var(--mo-med) var(--mo-emph);
}
.card:hover,.core:hover{box-shadow:var(--e3);transform:translateY(-3px)}
.card h3,.core h3{margin-bottom:8px}
.card p,.core p{color:var(--g-ink-3);font-size:.9375rem;line-height:1.6}
.card-ico{
  width:44px;height:44px;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--surface-2);font-size:1.2rem;margin-bottom:18px;
}
/* Doble bisel del vocabulario viejo: la envoltura y su núcleo. */
.shell{padding:8px;border-radius:36px;background:var(--surface);border:1px solid var(--line-2)}
.shell .core{border-radius:28px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare--old{background:var(--surface)}
.compare--new{background:var(--card);border-color:#D2E3FC;box-shadow:var(--e2)}
.compare h3{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.compare ul{margin:0;padding:0;list-style:none}
.compare li{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line-2);font-size:.9375rem;color:var(--g-ink-3)}
.compare li:last-child{border-bottom:0;padding-bottom:0}
.compare--new li{color:var(--g-ink-2)}
.compare--new li::before{content:"✓";color:var(--g-green-ink);font-weight:700;flex:0 0 auto}
.compare--old li::before{content:"—";color:var(--g-ink-4);font-weight:700;flex:0 0 auto}

/* ── 9b · Selector de sector (portada) y hub de nichos ────────────────────────
   El selector muestra el caso del sector sin salir de la portada; cada botón lleva además a la
   página propia del nicho, que es la que posiciona en búsquedas de sector (ADR-033/ADR-041). */
.sector-selector{margin-top:6px}
/* Pestañas: el mismo componente que usa el selector de nicho y el ciclo del asistente. Se declaran
   con `background-color` explícito porque un <button> trae un gris por defecto del navegador
   (#f0f0f0) que no pertenece a la paleta y se colaba en la verificación de color. */
.tabs{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:6px;background-color:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-full);box-shadow:var(--e1);scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;overflow:hidden;flex:0 0 auto;scroll-snap-align:center;
  border:0;background-color:transparent;background-image:none;cursor:pointer;
  padding:10px 18px;border-radius:var(--r-full);
  font-family:"Roboto Flex","Roboto Flex",sans-serif;font-size:.9rem;font-weight:500;color:var(--g-ink-3);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:background-color var(--mo-med) var(--mo-emph),color var(--mo-med) var(--mo-emph),
             box-shadow var(--mo-med) var(--mo-emph),border-color var(--mo-med) var(--mo-emph);
}
.tab:hover{background-color:var(--surface-2);color:var(--g-ink)}
.tab[aria-selected="true"]{background-color:var(--g-action);background-image:none;color:#fff;box-shadow:var(--e2)}
.tab__ico{font-size:17px;line-height:1}
.panel{display:none}
.panel.is-active{display:block;animation:fade var(--mo-long) var(--mo-emph-out) both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(36px,5vw,64px);align-items:center}
.panel__grid > *{min-width:0}
.panel h3{margin-bottom:16px;font-size:1.35rem}
.panel__points{display:grid;gap:12px;margin:26px 0}
.point{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;color:var(--g-ink-2)}
.point .msym{color:var(--g-green-ink);flex:0 0 auto;margin-top:1px}
.panel__cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
/* Carrusel: pista con scroll-snap y flechas circulares. */
.carousel{position:relative}
.carousel__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 22px;margin:0 -6px}
.carousel__nav{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:6px}
.cnav{
  position:relative;overflow:hidden;width:48px;height:48px;border-radius:var(--r-full);
  border:1px solid var(--line);background-color:var(--card);background-image:none;
  color:var(--g-action);cursor:pointer;display:grid;place-items:center;
  transition:background-color var(--mo-med) var(--mo-emph),box-shadow var(--mo-med) var(--mo-emph),border-color var(--mo-med) var(--mo-emph);
}
.cnav:hover{background-color:var(--g-blue-c);border-color:#D2E3FC;box-shadow:var(--e1)}
.cnav:disabled{opacity:.4;cursor:default;box-shadow:none;background-color:var(--card)}
.dots{display:flex;gap:8px;align-items:center;margin-right:auto}
.dots i{width:8px;height:8px;border-radius:var(--r-full);background-color:var(--line);display:block;transition:all var(--mo-med) var(--mo-emph)}
.dots i.on{background-color:var(--g-action);width:24px}
.sector-selector .tabs{margin-bottom:28px}
.sectores-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sector-card{
  display:flex;flex-direction:column;gap:10px;height:100%;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;
  box-shadow:var(--e1);color:inherit;text-decoration:none;
  transition:box-shadow var(--mo-med) var(--mo-emph),transform var(--mo-med) var(--mo-emph),border-color var(--mo-med) var(--mo-emph);
}
.sector-card:hover{box-shadow:var(--e3);transform:translateY(-3px);border-color:#D2E3FC;color:inherit;text-decoration:none}
.sector-card__ico{
  width:48px;height:48px;border-radius:var(--r-full);background:var(--g-blue-c);color:var(--g-blue-ink);
  display:grid;place-items:center;margin-bottom:4px;
}
.sector-card h2{font-size:1.125rem;letter-spacing:-.012em}
.sector-card p{color:var(--g-ink-3);font-size:.9375rem;line-height:1.55;flex:1}
.sector-card .link-arrow{margin-top:4px}
.planes-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;max-width:900px;margin:0 auto}
.plan-destacado{
  position:relative;background:var(--card);border:2px solid var(--g-action);border-radius:var(--r-lg);
  padding:32px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--e4);
}
.plan-destacado--simple{border:1px solid var(--line-2);box-shadow:var(--e1)}
.plan-destacado h3{font-size:1.25rem}
.plan-destacado .for{color:var(--g-ink-3);font-size:.9rem;line-height:1.55;margin:0}
.plan-destacado .pb{padding:18px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:grid;gap:12px}
.plan-destacado .p-setup,.plan-destacado .p-mo{display:grid;gap:2px;font-size:.8125rem;color:var(--g-ink-3)}
.plan-destacado .p-setup b,.plan-destacado .p-mo b{font-family:"Roboto Flex",sans-serif;font-weight:500;font-size:1.5rem;letter-spacing:-.025em;color:var(--g-ink)}
.plan-destacado .p-mo b{font-size:1.125rem}
.plan-destacado ul{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.plan-destacado li{display:flex;gap:10px;font-size:.9375rem;color:var(--g-ink-2);line-height:1.5}
.plan-destacado li::before{content:"✓";color:var(--g-green-ink);font-weight:700;flex:0 0 auto}
.plan-destacado .btn{margin-top:auto}
.plan-destacado .micro{text-align:center}
.puntos-clave{display:flex;flex-wrap:wrap;gap:12px 22px;list-style:none;padding:0;margin:30px 0 0}
.puntos-clave li{display:inline-flex;align-items:center;gap:9px;color:var(--g-ink-2);font-size:.9375rem}
.puntos-clave .msym{color:var(--g-green-ink)}
.migas{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--g-ink-3);margin-bottom:18px;flex-wrap:wrap}
.migas a{color:var(--g-ink-3)}
.migas a:hover{color:var(--g-action)}
.kicker .msym{vertical-align:-4px;margin-right:4px}
/* Desglose de "qué pagas cada mes": separa el pago único de la operación mensual. */
.desglose{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.desglose__item{display:flex;gap:14px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-md);padding:22px}
.desglose__n{font-family:"Roboto Flex",monospace;font-size:.8125rem;color:var(--g-ink-3);flex:0 0 auto;padding-top:2px}
.desglose__item b{display:block;font-family:"Roboto Flex",sans-serif;font-weight:500;font-size:1rem;margin-bottom:4px}
.desglose__item p{color:var(--g-ink-3);font-size:.9rem;line-height:1.55}

/* ── 9c · Fotografía ───────────────────────────────────────────────────────────
   La foto del hero de cada nicho va a sangre con un degradado de marca encima: así el titular se
   lee siempre, sea cual sea la foto. Las demás van en tarjeta con esquinas de 28 px, el mismo
   radio del sistema (nada de fotos con esquina recta pegadas al borde del texto). */
.foto{display:block;width:100%;border-radius:var(--r-lg);background:var(--surface-2)}
.figura{margin:0}
.figura figcaption{margin-top:10px;font-size:.78rem;color:var(--g-ink-3);line-height:1.5}
.figura figcaption a{color:var(--g-ink-3);text-decoration:underline;text-underline-offset:2px}
/* El degradado va en un ELEMENTO y no en un pseudo-elemento. Motivo medido: cuando el degradado es
   un `::after`, el navegador reporta el fondo del contenedor como transparente y cualquier
   verificación de contraste —la mía incluida— mide el titular blanco contra el blanco de la
   página y declara 1:1 sobre un texto que en pantalla se lee perfectamente. Con un elemento con
   fondo propio, el contraste se puede medir. */
.hero--foto{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:320px;display:flex;align-items:flex-end;background:var(--navy)}
.hero--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero--foto__velo{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,42,91,.28) 0%,rgba(11,42,91,.74) 55%,rgba(11,42,91,.94) 100%);
}
.hero--foto .hero--foto__txt{position:relative;z-index:2;padding:clamp(24px,4vw,40px);color:#fff;max-width:60ch}
.hero--foto__txt h2{color:#fff;margin-bottom:8px}
.hero--foto__txt p{color:#D2E3FC;font-size:.9875rem;line-height:1.6}
/* El crédito va DEBAJO de la foto y no encima. Encima quedaba tapado por el asistente de voz
   flotante y por el botón de WhatsApp, y la licencia exige que el crédito sea visible. */
.credito-foto{
  margin:8px 0 0;font-size:.7rem;line-height:1.4;color:var(--g-ink-3);
}
.credito-foto a{color:var(--g-ink-2);text-decoration:underline;text-underline-offset:2px}
.foto-pareja{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.foto-franja{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e1);background:var(--surface-2)}
.foto-franja img{width:100%;height:clamp(220px,26vw,320px);object-fit:cover;display:block}
.creditos{max-width:820px;margin:0 auto}
.creditos li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:.875rem;color:var(--g-ink-3);line-height:1.55}
.creditos li:last-child{border-bottom:0}
.creditos b{color:var(--g-ink-2);font-weight:500}

/* ── 10 · Funnel del asistente ─────────────────────────────────────────────── */
.funnel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fstep{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--e1);transition:box-shadow var(--mo-med) var(--mo-emph),transform var(--mo-med) var(--mo-emph)}
.fstep:hover{box-shadow:var(--e3);transform:translateY(-3px)}
.fstep h3{margin-bottom:8px;font-size:1.0625rem}
.fstep p{color:var(--g-ink-3);font-size:.9375rem;line-height:1.6}
.funnel-note{margin-top:28px;font-size:.9375rem;color:var(--g-ink-3);max-width:80ch}
.funnel-note strong{color:var(--g-ink-2)}

/* ── 11 · Banda con lista ──────────────────────────────────────────────────────
   Dos variantes: sobre fondo claro (tarjetas blancas con borde) y sobre la banda oscura
   (superficie translúcida). Antes había una sola —la translúcida— y sobre blanco el texto claro
   quedaba ilegible: la medición de contraste lo destapó. */
.band-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.band-item{
  display:flex;gap:18px;padding:24px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line-2);
  transition:box-shadow var(--mo-med) var(--mo-emph),transform var(--mo-med) var(--mo-emph);
}
.band-item:hover{box-shadow:var(--e2);transform:translateY(-2px)}
.b-ico{
  width:44px;height:44px;border-radius:var(--r-full);background:var(--surface-2);
  display:grid;place-items:center;flex:0 0 auto;font-size:1.15rem;color:var(--g-ink-2);
}
.band-item h3{color:var(--g-ink);font-size:1.0625rem;margin-bottom:6px}
.band-item p{color:var(--g-ink-3);font-size:.9375rem;line-height:1.6}
.sec--navy .band-item,.cta-band .band-item{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)}
.sec--navy .b-ico,.cta-band .b-ico{background:rgba(255,255,255,.10);color:var(--g-yellow)}
.sec--navy .band-item h3,.cta-band .band-item h3{color:var(--on-dark)}
.sec--navy .band-item p,.cta-band .band-item p{color:var(--on-dark-2)}

/* ── 12 · Demo en vivo ─────────────────────────────────────────────────────── */
.live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:center}
.live-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.live-chat{padding:8px;border-radius:32px;background:var(--surface);border:1px solid var(--line-2)}
.live-chat__core{background:var(--card);border-radius:24px;padding:20px;border:1px solid var(--line-2)}

/* ── 13 · Carrusel de demos ────────────────────────────────────────────────── */
.carousel{position:relative;margin-top:32px}
.carousel__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 22px;margin:0 -6px}
.carousel__track::-webkit-scrollbar{height:8px}
.carousel__track::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-full)}
.carousel__nav{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.carousel__btn{
  width:48px;height:48px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--card);
  color:var(--g-action);cursor:pointer;display:grid;place-items:center;font-size:1.05rem;
  transition:background-color var(--mo-med) var(--mo-emph),box-shadow var(--mo-med) var(--mo-emph);
}
.carousel__btn:hover{background:var(--g-blue-c);box-shadow:var(--e1)}
.demo-card{
  flex:0 0 min(360px,84vw);scroll-snap-align:start;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e1);text-decoration:none;color:inherit;
  transition:box-shadow var(--mo-med) var(--mo-emph),transform var(--mo-med) var(--mo-emph);
}
.demo-card:hover{box-shadow:var(--e4);transform:translateY(-3px);text-decoration:none;color:inherit}
.demo-shot{position:relative;aspect-ratio:16/10;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;isolation:isolate}
/* La etiqueta se pinta con un COLOR OPACO, no con una imagen ni con alfa. Motivo medido: cuando se
   pinta con `background-image` o con alfa, el navegador reporta el fondo como transparente y
   cualquier verificación de contraste (la mía incluida) mide contra el fondo del contenedor —
   declaraba 1,1:1 sobre una etiqueta que en pantalla se lee perfectamente. */
.demo-shot__badge{
  position:absolute;top:14px;left:14px;color:#fff;border-radius:var(--r-full);
  background:var(--g-ink);
  padding:5px 13px;font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.demo-body{padding:22px}
.demo-body h3{margin-bottom:6px}
.demo-body p{color:var(--g-ink-3);font-size:.9375rem;line-height:1.55}
.demo-body .link-arrow{margin-top:14px}
.demo-card .demo-shot svg{width:100%;height:100%}

/* ── 14 · Planes ───────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.plan{
  position:relative;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:32px 28px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--e1);
  transition:box-shadow var(--mo-med) var(--mo-emph),transform var(--mo-med) var(--mo-emph);
}
.plan:hover{box-shadow:var(--e3);transform:translateY(-3px)}
.plan.pop{border:2px solid var(--g-action);box-shadow:var(--e4)}
.plan__flag{
  position:absolute;top:-15px;left:28px;background:var(--navy);color:#fff;border-radius:var(--r-full);
  font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:7px 16px;box-shadow:var(--e1);
}
.plan .ph h3{font-size:1.25rem;margin-bottom:6px}
.plan .for{color:var(--g-ink-3);font-size:.9rem;line-height:1.55;margin:0}
.plan .pb{padding:20px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:grid;gap:6px}
.plan .p-setup,.plan .p-mo{display:grid;gap:2px;font-size:.8125rem;color:var(--g-ink-3);letter-spacing:.02em}
.plan .p-setup b,.plan .p-mo b{font-family:"Roboto Flex",sans-serif;font-weight:500;font-size:1.5rem;letter-spacing:-.025em;line-height:1.15;color:var(--g-ink)}
.plan .p-mo b{font-size:1.125rem}
.plan .setup-anchor,.plan .usd{font-size:.8125rem;color:var(--g-ink-3)}
.plan ul{display:grid;gap:11px;margin:2px 0 6px;padding:0;list-style:none}
.plan li{display:flex;gap:11px;font-size:.9375rem;color:var(--g-ink-2);line-height:1.5}
.plan li::before{content:"✓";color:var(--g-green-ink);font-weight:700;flex:0 0 auto}
.plan .pb2{margin-top:auto}
.plan__chan{display:flex;gap:8px;flex-wrap:wrap}
.plan__cta{margin-top:auto}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-full);padding:5px 13px;font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.tag--best{background:var(--g-blue-c);color:var(--g-blue-ink)}
.tag--plan{background:var(--g-green-c);color:var(--g-green-ink)}

/* ── 15 · Selector de plan ─────────────────────────────────────────────────── */
.picker{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px;box-shadow:var(--e1);margin-top:34px}
.picker h3{margin-bottom:14px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:var(--card);border-radius:var(--r-full);padding:10px 18px;
  font-size:.9rem;font-weight:500;color:var(--g-ink-2);cursor:pointer;font-family:inherit;
  transition:background-color var(--mo-med) var(--mo-emph),border-color var(--mo-med) var(--mo-emph),color var(--mo-med) var(--mo-emph);
}
.chip:hover{border-color:var(--g-action);color:var(--g-action)}
.chip.on{background:var(--g-action);border-color:var(--g-action);color:#fff}
.picker__out{margin-top:22px;background:var(--g-blue-c);color:var(--navy-ink);border-radius:var(--r-md);padding:20px 24px;font-size:.9375rem;line-height:1.6}
.plansel{display:grid;gap:10px;margin-top:16px}
.plansel button{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);padding:14px 18px;
  font-family:inherit;font-size:.9375rem;color:var(--g-ink-2);cursor:pointer;
  transition:background-color var(--mo-med) var(--mo-emph),border-color var(--mo-med) var(--mo-emph);
}
.plansel button:hover{border-color:var(--g-action)}
.plansel button.on{border-color:var(--g-action);background:var(--g-blue-c);color:var(--navy-ink);font-weight:500}

/* ── 16 · Pasos, fases y principios ────────────────────────────────────────── */
.steps{display:grid;gap:22px}
.step{display:flex;gap:20px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--e1)}
.step .n{
  width:40px;height:40px;border-radius:var(--r-full);background:var(--g-blue-c);color:var(--g-blue-ink);
  display:grid;place-items:center;font-family:"Roboto Flex",sans-serif;font-weight:500;flex:0 0 auto;
}
.step h3{margin-bottom:6px;font-size:1.0625rem}
.step p{color:var(--g-ink-3);font-size:.9375rem;line-height:1.6}
.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.phase{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--e1)}
.phase__when{font-family:"Roboto Flex",monospace;font-size:.78rem;color:var(--g-ink-3);letter-spacing:.04em;display:block;margin-bottom:10px}
.phase h3{margin-bottom:8px;font-size:1.0625rem}
.phase p{color:var(--g-ink-3);font-size:.9375rem;line-height:1.6}
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.prod{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.prod-item{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--e1)}
.prod-item h3{margin-bottom:8px;font-size:1.0625rem}
.prod-item p{color:var(--g-ink-3);font-size:.9375rem;line-height:1.6}
.honest{margin-top:34px;font-size:.9375rem;color:var(--g-ink-3)}

/* ── 17 · Garantías, cobertura y fundador ──────────────────────────────────── */
.guarantees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.guarantee{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg);padding:26px}
.guarantee h3{color:var(--on-dark);font-size:1.0625rem;margin-bottom:8px}
.guarantee p{color:var(--on-dark-2);font-size:.9375rem;line-height:1.6}
.coverage{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.coverage span{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-full);padding:10px 20px;font-size:.9rem;color:var(--g-ink-2)}
.founder{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4vw,56px);align-items:center}
.founder__photo{padding:8px;border-radius:36px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--e2)}
.founder__photo img,.founder__photo svg{border-radius:28px;width:100%;display:block}
.who{color:var(--g-ink-3);font-size:.9375rem;margin-top:12px}

/* ── 18 · Ficha de Google (recomendación LOCALO) ───────────────────────────── */
.gbp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,56px);align-items:start}
.gbp-box{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px;box-shadow:var(--e1)}
.gbp-box--rec{border-color:#D2E3FC;background:#F8FAFF}
.gbp-box h3{margin-bottom:12px}
.gbp-box ul{display:grid;gap:11px;padding:0;list-style:none;margin:0}
.gbp-box li{display:flex;gap:11px;font-size:.9375rem;color:var(--g-ink-2);line-height:1.55}
.gbp-box li::before{content:"✓";color:var(--g-green-ink);font-weight:700;flex:0 0 auto}
.gbp-box--no li::before{content:"—";color:var(--g-ink-4)}
.disclosure{
  background:var(--g-yellow-c);border:1px solid #FDE293;border-radius:var(--r-md);padding:20px 24px;
  font-size:.875rem;line-height:1.6;color:var(--g-yellow-ink);margin-top:26px;
}
.disclosure strong{color:#5C3500}
.disclosure a{color:#5C3500;text-decoration:underline;text-underline-offset:2px}
/* El azul de acción (#1A73E8) da 4,27:1 sobre el gris de superficie: pasa sobre blanco pero no
   sobre superficie. Para enlaces dentro de bloques grises se usa el tono de hover, que da 5,9:1. */
.on-surface-link,.price-note a{color:var(--g-action-hover)}
.on-surface-link:hover,.price-note a:hover{color:#0F4C9C;text-decoration:underline}
.steps-mini{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:paso}
.steps-mini li{display:flex;gap:14px;font-size:.9375rem;color:var(--g-ink-2);line-height:1.55}
.steps-mini li::before{
  counter-increment:paso;content:counter(paso);
  width:26px;height:26px;border-radius:var(--r-full);background:var(--surface-2);color:var(--g-ink-2);
  display:grid;place-items:center;font-family:"Roboto Flex",monospace;font-size:.75rem;flex:0 0 auto;
}

/* ── 19 · Preguntas (acordeón) ─────────────────────────────────────────────── */
.faq{max-width:860px;margin:0 auto}
.faq details,.qa{border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--card);margin-bottom:12px;overflow:hidden;transition:box-shadow var(--mo-med) var(--mo-emph),border-color var(--mo-med) var(--mo-emph)}
.faq details[open],.qa[open]{border-color:#D2E3FC;box-shadow:var(--e2)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 24px;display:flex;align-items:center;gap:16px;
  font-family:"Roboto Flex",sans-serif;font-weight:500;font-size:1.0625rem;color:var(--g-ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--g-action);font-size:1.3rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 24px 22px;color:var(--g-ink-3);font-size:.9375rem;line-height:1.65}

/* ── 20 · Banda final CTA ──────────────────────────────────────────────────── */
.cta-band{
  position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:36px;
  padding:clamp(44px,6vw,80px);text-align:center;
}
.cta-band::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:150%;pointer-events:none;
  background:
    radial-gradient(40% 50% at 16% 10%,rgba(66,133,244,.30) 0%,rgba(66,133,244,0) 62%),
    radial-gradient(36% 46% at 84% 6%,rgba(52,168,83,.22) 0%,rgba(52,168,83,0) 60%),
    radial-gradient(30% 40% at 52% 100%,rgba(251,188,5,.20) 0%,rgba(251,188,5,0) 62%);
}
.cta-band > *{position:relative}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:var(--on-dark-2);max-width:60ch;margin:0 auto}
.cta-band .cta-row{justify-content:center}
.cta-final{padding:clamp(56px,7vw,96px) 0}

/* ── 21 · Pie ─────────────────────────────────────────────────────────────── */
footer.site{background:var(--surface);border-top:1px solid var(--line-2);padding:60px 0 36px;color:var(--g-ink-3)}
footer.site .foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
footer.site .foot h3{
  font-family:"Roboto Flex",sans-serif;font-size:.8125rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--g-ink-3);margin:0 0 16px;
}
footer.site .foot a{display:block;color:var(--g-ink-3);font-size:.9375rem;margin-bottom:11px}
footer.site .foot a:hover{color:var(--g-action)}
footer.site .foot p{color:var(--g-ink-3);font-size:.875rem;line-height:1.6;margin-top:14px;max-width:34ch}
.legal{
  grid-column:1 / -1;margin-top:40px;padding-top:24px;border-top:1px solid var(--line-2);
  font-size:.8125rem;color:var(--g-ink-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.legal a{color:var(--g-ink-3)}
.affiliate-note{
  grid-column:1 / -1;margin-top:18px;font-size:.8125rem;line-height:1.6;color:var(--g-ink-3);max-width:100ch;
}
.affiliate-note a{color:var(--g-action);text-decoration:underline;text-underline-offset:2px}

/* Enlace de texto sobre la banda oscura: el azul de acción sobre #1F1913 solo da 3,6:1, así que
   ahí se usa un azul claro del sistema (el mismo criterio que aplica Google sobre superficies
   oscuras). */
.link-on-dark{color:#8AB4F8}
.link-on-dark:hover{color:#AECBFA}
.cta-band .btn--lg,.cta-band a.btn{color:#fff}

/* ── 22 · Página interna: hero y bloques ───────────────────────────────────── */
.hero--page{padding:clamp(48px,6vw,80px) 0 clamp(36px,4vw,56px);position:relative;overflow:hidden}
.hero--page::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:100%;pointer-events:none;
  background:radial-gradient(50% 58% at 24% 0%,rgba(66,133,244,.10) 0%,rgba(66,133,244,0) 70%);
}
.hero--page > *{position:relative}
.hero--page h1{margin-bottom:16px}
.hero--page .lead{max-width:64ch}
.section{padding:clamp(64px,8vw,110px) 0}
/* Navegación por anclas: al saltar a /#planes (o desde el menú), el título de la sección queda
   DESPUÉS de la cabecera fija y con aire. 110 px = cabecera (~76) + respiro del padding interno. */
[id]{scroll-margin-top:110px}
.section.alt{background:var(--surface)}
/* Red de seguridad de márgenes. Es un SEGURO, no el diseño: si un generador olvida envolver un
   bloque en `.container`, el texto queda pegado al borde de la pantalla —es exactamente lo que
   reportó el fundador en `/servicios` y `/nosotros`—. La regla se aplica SOLO a los bloques que NO
   están dentro de un contenedor, así no duplica el padding ni desalinea lo que ya está bien. */
.section > .sec-head:not(.container > *),
.section > .pains:not(.container > *),
.section > .live:not(.container > *),
.section > .faq:not(.container > *),
.section > .planes-cta:not(.container > *),
.section > .gbp-grid:not(.container > *),
.section > .sectores-grid:not(.container > *),
.section > .steps:not(.container > *),
.section > .steps-mini:not(.container > *),
.section > .founder:not(.container > *),
.section > .grid:not(.container > *),
.section > .plans:not(.container > *),
.section > .price-note:not(.container > *),
.section > .desglose:not(.container > *),
.section > .cta-row:not(.container > *),
.section > .micro:not(.container > *),
.section > .acordeon:not(.container > *),
.section > .prod:not(.container > *){
  max-width:var(--wrap);margin-inline:auto;padding-inline:24px;
}
.pb,.pb2{padding:0}
.setup-anchor{font-size:.8125rem;color:var(--g-ink-3)}
.card .ico{width:44px;height:44px;border-radius:var(--r-full);background:var(--surface-2);display:grid;place-items:center;margin-bottom:16px}
main{display:block}
main > section:first-child{padding-top:clamp(40px,5vw,64px)}

/* ── 23 · Movimiento de entrada ───────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px)}
.rv.is-in{opacity:1;transform:none;transition:opacity var(--mo-cine) var(--mo-emph-out),transform var(--mo-cine) var(--mo-emph-out)}
.rv-d1.is-in{transition-delay:80ms}
.rv-d2.is-in{transition-delay:160ms}
.rv-d3.is-in{transition-delay:240ms}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .marquee__track{animation:none}
}

/* ── 24 · Adaptación ──────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .pains,.funnel,.grid--3,.cols-3,.phases,.guarantees{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hero-grid,.live,.compare,.founder,.gbp-grid,footer.site .foot{grid-template-columns:1fr}
  .grid--2,.cols-2,.band-list,.principles,.prod{grid-template-columns:1fr}
  .plans,.pains,.funnel,.phases,.guarantees{grid-template-columns:1fr}
  .chatcard{order:-1}
  .founder__photo{max-width:420px}
}
@media (max-width:680px){
  /* ── Móvil ────────────────────────────────────────────────────────────────────
     El sitio se revisó en capturas reales a 390 px. Lo que se corrige aquí salió de ahí:
     el ritmo vertical era el de escritorio (secciones de 132 px), la retícula de dos columnas
     apretaba textos como "WinTech Solo Asistente", y los elementos flotantes (WhatsApp y el
     asistente de voz) se comían el final de la página. */
  header.site .header-in{height:auto;padding:10px 0;gap:10px}
  header.site nav.main{display:none}
  .nav-toggle{display:grid;place-items:center;margin-left:auto;order:2}
  .nav-cta{order:3;min-height:42px;padding:0 16px;font-size:.875rem}
  .brand{font-size:1.125rem}
  .brand__mark{width:30px;height:30px}

  .sec{padding:52px 0}
  .sec--tight{padding:34px 0}
  .sec-head{margin-bottom:30px}
  h1{font-size:clamp(1.9rem,7.4vw,2.4rem)}
  h2,.title,.h-sec{font-size:clamp(1.45rem,6vw,1.9rem)}
  h3{font-size:1.0625rem}
  .lede,.lead{font-size:1rem;line-height:1.6}
  .grid,.pains,.funnel,.plans,.phases,.guarantees,.bento{gap:14px}
  .card,.core,.fstep,.pain,.plan,.phase,.guarantee,.prod-item,.stat{padding:22px}
  .step{padding:20px;gap:14px}
  .cta-row{gap:10px;margin-top:26px}
  .cta-row .btn,.nav .btn{width:100%}
  .cta-row .link-arrow{width:auto}
  /* El CTA de cada panel de sector ocupa el ancho completo: con dos columnas de 151 px el texto del
     botón se salía y en pantalla se veían "caracteres raros" (era el final de la frase cortado). */
  .panel__cta{flex-direction:column;align-items:stretch;gap:12px}
  .panel__cta .btn{width:100%}
  .panel__cta .link-arrow{width:auto;justify-content:center}
  .live-chat,.live-chat__core{border-radius:20px}

  /* El hero va primero con su titular y el chat después: en móvil el chat ocupaba la primera
     pantalla completa y el titular quedaba fuera de vista. */
  .hero{padding:36px 0 44px}
  .hero .chatcard{order:0}
  .hero-grid{gap:30px}
  .hero-stats{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .hero-stats div{padding:14px 16px}
  .trustline{gap:10px 16px;margin-top:22px;padding-top:20px}
  .bubble{max-width:92%;font-size:.9rem}

  .marquee{padding:18px 0}
  .marquee__track{gap:26px}

  .pains,.funnel,.grid--3,.cols-3,.phases,.guarantees,.grid--2,.cols-2,.band-list,.principles,.prod,.plans,.sectores-grid,.desglose,.planes-cta,.panel__grid,.live,.compare,.founder,.gbp-grid,.hero-grid,footer.site .foot{grid-template-columns:1fr}
  .plans .plan .pb{grid-template-columns:1fr!important}
  .plan__flag{left:20px}
  .plan .price b{font-size:1.75rem}

  .founder{grid-template-columns:1fr;gap:26px}
  .coverage{gap:8px}
  .coverage span{padding:8px 14px;font-size:.85rem}

  .faq summary{padding:16px 18px;font-size:.9375rem;gap:12px}
  .faq .a{padding:0 18px 18px}

  .cta-band{border-radius:24px;padding:32px 22px}
  .band{border-radius:24px}

  footer.site{padding:44px 0 32px}
  footer.site .foot{gap:26px}

  /* Espacio para los flotantes: el botón de WhatsApp (56 px) y el asistente de voz de ElevenLabs
     (barra inferior centrada) se comían el final del contenido. */
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .wa-float{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:50px;height:50px}

  .orb{display:none}
  .hero-mark{opacity:.04}
}