/* ============================================================
   nexx0.com — sistema de diseño
   ------------------------------------------------------------
   Misma arquitectura que el sitio de esmel. (3 niveles de token),
   con las anclas de marca de NEXO: navy, azul y violeta.
   Fuente de los valores: docs/arquitectura/10_DESIGN_SYSTEM.md
   del repositorio del producto.

   REGLA DE ORO: antes de escribir CSS nuevo, buscá si el
   componente ya existe. El sistema crece por reutilización.
   ============================================================ */

/* ============================================================
   TOKENS
   ------------------------------------------------------------
   Nivel 1 (primitivo): el valor crudo. NUNCA en un componente.
   Nivel 2 (semántico): el rol que cumple. Es el que se usa.
   ============================================================ */
:root{

  /* ---------- NIVEL 1 · PRIMITIVOS ---------- */

  /* Las dos familias del logotipo, muestreadas del archivo: el tono
     dominante es violeta (264°, 33% de los pixeles con color) y verde
     menta (150°, 31%). El gradiente pasa por cian entre las dos.
     No hay azul de marca: el #3D7EFC de la hoja de producto no esta
     en el logotipo. */
  --violet-500:#8035F2;
  --violet-400:#A06BF7;
  --violet-300:#C0A3FA;
  --mint-500:#35F2A0;
  --mint-400:#6DF5BA;
  --cyan-500:#35D4F2;

  /* Negros. El logotipo vive sobre negro y se deshace sobre blanco:
     sus sombras SON negras, asi que al quitarles el fondo se vuelven
     transparentes y la marca queda hueca. Comprobado componiendola
     sobre tres fondos. El sitio es oscuro por esa razon, no por gusto. */
  --ink-1000:#000000;  /* el negro del logotipo */
  --ink-950:#07070C;   /* lienzo de la pagina */
  --ink-900:#0E0E16;   /* superficie de tarjeta */
  --ink-850:#14141F;   /* superficie alternada */
  --ink-800:#1C1C2A;   /* borde */
  --ink-700:#2A2A3D;   /* borde fuerte */

  /* Texto sobre negro. Los tres pasan AA a 14px sobre --ink-950. */
  --fog-50:#FFFFFF;
  --fog-200:#D7D9E6;
  --fog-400:#9EA2B8;

  /* Estado, en version para fondo oscuro. */
  --green-400:#3FD98A;
  --red-400:#FF6B75;
  --amber-400:#F0B952;

  /* ---------- NIVEL 2 · SEMANTICOS ---------- */

  /* Texto y superficie. */
  --color-text:var(--fog-50);
  --color-text-body:var(--fog-200);
  --color-text-soft:var(--fog-400);
  --color-border:var(--ink-800);
  --color-border-strong:var(--ink-700);
  --color-surface:var(--ink-900);
  --color-surface-soft:var(--ink-850);
  --color-page-bg:var(--ink-950);

  /* Accion. El rol, no el color.
     El violeta #8035F2 sobre negro da 3,3:1 — sirve de relleno y no de
     texto. Como texto y como borde se usa --violet-400 (6,0:1), y el
     boton relleno lleva texto NEGRO sobre menta, que es la unica forma
     de que un boton de marca pase AA sin apagar la marca. */
  --color-action:var(--violet-400);
  --color-action-hover:var(--violet-300);
  --color-action-soft:rgba(128,53,242,.16);
  --color-action-soft-2:rgba(128,53,242,.26);
  --color-focus:var(--mint-500);

  /* Marca: superficies y gradientes, nunca texto de parrafo. */
  --color-brand-fill:var(--violet-500);
  --color-brand-deep:var(--ink-1000);
  --color-brand-grad:linear-gradient(90deg,var(--violet-500) 0%,var(--cyan-500) 55%,var(--mint-500) 100%);
  --color-brand-grad-diag:linear-gradient(135deg,var(--violet-500) 0%,var(--cyan-500) 52%,var(--mint-500) 100%);

  /* Estado. */
  --color-success:var(--green-400);
  --color-success-soft:rgba(63,217,138,.14);
  --color-error:var(--red-400);
  --color-warning:var(--amber-400);
  --color-warning-soft:rgba(240,185,82,.14);

  /* ---------- TIPOGRAFÍA ---------- */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-bold:var(--font);

  /* Escala fluida. No inventar tamaños fuera de esta escala. */
  --step--1:clamp(.82rem,.79rem + .14vw,.9rem);
  --step-0:clamp(1rem,.96rem + .18vw,1.09rem);
  --step-1:clamp(1.19rem,1.12rem + .33vw,1.4rem);
  --step-2:clamp(1.42rem,1.3rem + .58vw,1.8rem);
  --step-3:clamp(1.69rem,1.48rem + .95vw,2.33rem);
  --step-4:clamp(2.02rem,1.68rem + 1.5vw,3rem);
  --step-5:clamp(2.4rem,1.87rem + 2.3vw,3.9rem);

  /* ---------- ESPACIADO Y FORMA ---------- */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:40px;
  --space-5:64px;
  --space-6:88px;
  --space-7:120px;

  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:30px;
  --radius-pill:999px;

  /* Sobre negro una sombra gris no se ve: la elevacion se dice con un
     borde claro por dentro, no con una sombra por fuera. */
  --shadow-sm:inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-md:inset 0 1px 0 rgba(255,255,255,.07),0 18px 44px rgba(0,0,0,.6);

  --maxw:1180px;
  --tap-min:44px;

  /* ---------- MOVIMIENTO ---------- */
  /* Una sola curva para todo el sistema. */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-instant:100ms;
  --dur-fast:160ms;
  --dur-base:240ms;
  --dur-slow:400ms;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* El foco no puede quedar tapado por el header fijo. */
  scroll-padding-top:96px;
}

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--color-text-body);
  background:var(--color-page-bg);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-bold);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--color-text);
  margin:0 0 var(--space-2);
  text-wrap:balance;
}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}

p{margin:0 0 var(--space-2)}
p:last-child{margin-bottom:0}

a{color:var(--color-action);text-underline-offset:3px}
a:hover{color:var(--color-action-hover)}

img,svg,video{max-width:100%;height:auto;display:block}

ul,ol{margin:0 0 var(--space-2);padding-left:1.25em}
li{margin-bottom:.4em}
li:last-child{margin-bottom:0}

strong{color:var(--color-text);font-weight:700}

/* El foco nunca se anima: aparece instantáneo. */
:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:2px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:var(--space-2);top:-100px;
  z-index:200;
  background:var(--color-surface);
  border:1px solid var(--color-border-strong);
  color:var(--color-action);
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  font-weight:700;
}
.skip-link:focus{top:var(--space-2)}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--space-3);
}

.section{padding-block:var(--space-6)}
.section-soft{background:var(--color-surface-soft)}

.section-head{
  max-width:52ch;
  margin-bottom:var(--space-4);
}
.section-head.center{
  margin-inline:auto;
  text-align:center;
}
.section-head p{
  font-size:var(--step-1);
  color:var(--color-text-soft);
  margin-bottom:0;
}

.eyebrow{
  display:inline-block;
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-action);
  margin-bottom:var(--space-1);
}

/* Banda oscura: el único lugar donde el azul y el violeta de
   marca pueden usarse como texto. Sobre el navy superan 7:1. */
.section-dark{
  background:var(--ink-1000);
  color:var(--color-text-body);
}
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark strong{color:var(--color-text)}
.section-dark .eyebrow{color:var(--color-action)}
.section-dark .section-head p{color:var(--color-text-body)}

.grid{display:grid;gap:var(--space-3)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}

/* ============================================================
   LOGOTIPO
   ------------------------------------------------------------
   Es una imagen, no texto: el arte tiene volumen y degradados que
   ninguna tipografia reproduce. PNG con alfa recto, sacado del
   original keyeando el negro (alfa = canal maximo, color sin
   premultiplicar), asi que compone bien sobre cualquier fondo
   oscuro y no arrastra un rectangulo negro.
   ============================================================ */
.logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  flex:0 0 auto;
}
.logo img{
  height:34px;
  width:auto;
  display:block;
}
@media (max-width:420px){
  .logo img{height:28px}
}
.site-footer .logo img{height:42px}

/* ============================================================
   BOTÓN
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  min-height:var(--tap-min);
  padding:.7em 1.5em;
  border:2px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-bold);
  font-size:var(--step-0);
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
  transition:background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.55;cursor:not-allowed;transform:none;
}

.btn-ink{
  background:var(--mint-500);
  color:var(--ink-1000);
  border-color:var(--mint-500);
}
.btn-ink:hover{
  background:var(--mint-400);
  border-color:var(--mint-400);
  color:var(--ink-1000);
}

.btn-outline{
  background:transparent;
  color:var(--color-action);
  border-color:var(--color-border-strong);
}
.btn-outline:hover{
  border-color:var(--color-action);
  background:var(--color-action-soft);
  color:var(--color-action-hover);
}

.btn-on-dark{
  background:var(--mint-500);
  color:var(--ink-1000);
  border-color:var(--mint-500);
}
.btn-on-dark:hover{background:var(--mint-400);border-color:var(--mint-400);color:var(--ink-1000)}

.btn-ghost-on-dark{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.45);
}
.btn-ghost-on-dark:hover{border-color:var(--white);background:rgba(255,255,255,.08);color:var(--white)}

.btn-sm{padding:.5em 1.1em;font-size:var(--step--1)}
.btn-block{width:100%}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.btn-row.center{justify-content:center}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(7,7,12,.82);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--color-border);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  min-height:72px;
}
.nav{display:flex;align-items:center;gap:var(--space-3)}
.nav a:not(.btn){
  color:var(--color-text-body);
  text-decoration:none;
  font-weight:600;
  font-size:var(--step--1);
  padding:.5em 0;
}
.nav a:not(.btn):hover{color:var(--color-action)}

.nav-toggle{
  display:none;
  width:var(--tap-min);
  height:var(--tap-min);
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);
  cursor:pointer;
  color:var(--color-text);
}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;
    inset-inline:0;
    top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--color-surface);
    border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-md);
    padding:var(--space-2) var(--space-3) var(--space-3);
  }
  .nav a:not(.btn){
    padding:.85em 0;
    border-bottom:1px solid var(--color-border);
    font-size:var(--step-0);
  }
  .nav .btn{margin-top:var(--space-2)}
  .nav[hidden]{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--ink-1000);
  color:var(--color-text-body);
  padding-block:var(--space-6) var(--space-7);
}
/* Dos manchas del gradiente de marca, muy diluidas. No es
   decoración gratuita: separa el hero del resto sin añadir una
   imagen que haya que descargar. */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.3;
  pointer-events:none;
}
.hero::before{
  width:520px;height:520px;
  top:-180px;right:-120px;
  background:var(--violet-500);
}
.hero::after{
  width:420px;height:420px;
  bottom:-200px;left:-140px;
  background:var(--mint-500);
}
.hero .wrap{position:relative;z-index:1}

.hero-grid{
  display:grid;
  gap:var(--space-5);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
}

.hero h1{color:var(--color-text);max-width:18ch}
.hero strong{color:var(--color-text)}
.hero-lede{
  font-size:var(--step-1);
  color:var(--color-text-body);
  max-width:52ch;
  margin-bottom:var(--space-3);
}
.hero-kicker{
  display:inline-block;
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  /* Menta y no el violeta de accion: el kicker se apoya sobre las
     manchas de color del hero, y alli el violeta cae a 4,22:1. */
  color:var(--mint-500);
  margin-bottom:var(--space-2);
}
.hero-note{
  margin-top:var(--space-3);
  font-size:var(--step--1);
  color:var(--color-text-soft);
}

/* Tarjeta de canales dentro del hero. */
.hero-panel{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  padding:var(--space-3);
}
.hero-panel h2{
  font-size:var(--step-1);
  color:var(--color-text);
  margin-bottom:var(--space-1);
}
.hero-panel > p{
  font-size:var(--step--1);
  color:var(--color-text-soft);
  margin-bottom:var(--space-3);
}
.channel-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.channel-list li{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-1) var(--space-2);
  background:rgba(255,255,255,.05);
  border-radius:var(--radius-sm);
  margin:0;
}
.channel-list .ch-name{color:var(--color-text);font-weight:700}
.channel-list .ch-note{
  display:block;
  font-size:var(--step--1);
  color:var(--color-text-soft);
  font-weight:400;
}
.ch-dot{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#FFFFFF;
}
.ch-whatsapp{background:#25D366;color:#07371A}
.ch-instagram{background:linear-gradient(135deg,#F9CE34,#EE2A7B 55%,#6228D7)}
.ch-messenger{background:linear-gradient(135deg,#00B2FF,#006AFF)}
.ch-ads{background:#0866FF}

/* ============================================================
   BANDA DE DATOS
   ============================================================ */
.stat-band{
  border-block:1px solid var(--color-border);
  background:var(--color-surface);
  padding-block:var(--space-4);
}
.stat{text-align:center}
.stat dt{
  font-size:var(--step--1);
  color:var(--color-text-soft);
  order:2;
}
.stat dd{
  margin:0 0 .2em;
  font-family:var(--font-bold);
  font-weight:800;
  font-size:var(--step-3);
  color:var(--color-text);
  letter-spacing:-.03em;
}
.stat{display:flex;flex-direction:column}

/* ============================================================
   EL PROCESO — las ocho etapas
   ============================================================ */
.steps{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  gap:var(--space-2);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  counter-reset:paso;
}
.step{
  position:relative;
  margin:0;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  box-shadow:var(--shadow-sm);
}
/* El número no es decoración: es el orden del embudo, y por eso
   va en el contenido y no sólo en un ::before invisible al
   lector de pantalla. */
.step-num{
  display:inline-grid;
  place-items:center;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--color-action-soft);
  color:var(--color-action);
  font-family:var(--font-bold);
  font-weight:800;
  font-size:var(--step--1);
  margin-bottom:var(--space-1);
}
.step h3{font-size:var(--step-1);margin-bottom:.35em}
.step p{font-size:var(--step--1);margin-bottom:0;color:var(--color-text-soft)}
/* La última etapa es el resultado: se marca distinto. */
.step-win{border-color:var(--color-success);background:var(--color-success-soft)}
.step-win .step-num{background:var(--white);color:var(--color-success)}

/* ============================================================
   TARJETA GENÉRICA
   ============================================================ */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  box-shadow:var(--shadow-sm);
}
.card h3{font-size:var(--step-1)}
.card p:last-child{margin-bottom:0}
.card-icon{
  width:46px;height:46px;
  border-radius:14px;
  display:grid;place-items:center;
  background:var(--color-action-soft);
  color:var(--color-action);
  margin-bottom:var(--space-2);
}
.section-dark .card{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
.section-dark .card p{color:var(--color-text-body)}
.section-dark .card-icon{background:rgba(255,255,255,.1);color:var(--color-action)}

/* Lista con palomita. */
.check-list{list-style:none;margin:0 0 var(--space-2);padding:0}
.check-list li{
  position:relative;
  padding-left:1.9em;
  margin-bottom:.55em;
}
.check-list li::before{
  content:"";
  position:absolute;
  left:0;top:.42em;
  width:1.15em;height:1.15em;
  border-radius:50%;
  background:var(--color-success-soft);
  /* La palomita, dibujada con bordes. El color nunca es el único
     portador: la forma dice "cumplido" por sí sola. */
  box-shadow:inset 0 0 0 1.5px var(--color-success);
}
.check-list li::after{
  content:"";
  position:absolute;
  left:.36em;top:.68em;
  width:.3em;height:.56em;
  border:solid var(--color-success);
  border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.section-dark .check-list li::before{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px var(--color-success)}
.section-dark .check-list li::after{border-color:var(--color-success)}

/* Cita. */
.pull-quote{
  margin:0;
  padding:var(--space-3);
  border-left:4px solid var(--color-brand-fill);
  background:var(--color-action-soft);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.pull-quote p{
  font-family:var(--font-bold);
  font-size:var(--step-1);
  font-weight:700;
  color:var(--color-text);
  margin-bottom:0;
}
.section-dark .pull-quote{
  background:rgba(255,255,255,.06);
  border-left-color:var(--color-action);
}
.section-dark .pull-quote p{color:var(--color-text)}

/* ============================================================
   LO QUE VAS A SABER — lista de resultados
   ============================================================ */
.insight-list{
  list-style:none;margin:0;padding:0;
  display:grid;
  gap:var(--space-2);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.insight-list li{
  display:flex;
  gap:var(--space-2);
  align-items:flex-start;
  margin:0;
  padding:var(--space-2);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
}
.insight-list b{display:block;color:var(--color-text)}
.insight-list span{font-size:var(--step--1);color:var(--color-text-soft)}
.insight-dot{
  flex:0 0 auto;
  width:10px;height:10px;
  border-radius:50%;
  margin-top:.55em;
  background:var(--color-brand-grad-diag);
}

/* ============================================================
   ROLES
   ============================================================ */
.role-card{position:relative;overflow:hidden}
.role-card::before{
  content:"";
  position:absolute;
  inset-inline:0;top:0;
  height:4px;
  background:var(--color-brand-grad);
}

/* ============================================================
   ACORDEÓN / FAQ
   ============================================================ */
.faq{max-width:780px;margin-inline:auto}
.faq-item{
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  margin-bottom:var(--space-1);
  overflow:hidden;
}
.faq-q{
  width:100%;
  min-height:var(--tap-min);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:var(--space-2);
  background:transparent;
  border:0;
  font-family:var(--font-bold);
  font-size:var(--step-0);
  font-weight:700;
  color:var(--color-text);
  text-align:left;
  cursor:pointer;
}
.faq-q:hover{background:var(--color-surface-soft)}
.faq-icon{
  flex:0 0 auto;
  width:22px;height:22px;
  position:relative;
  color:var(--color-action);
}
.faq-icon::before,.faq-icon::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:currentColor;
  border-radius:2px;
  transform:translate(-50%,-50%);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.faq-icon::before{width:14px;height:2px}
.faq-icon::after{width:2px;height:14px}
.faq-q[aria-expanded="true"] .faq-icon::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--dur-base) var(--ease-out);
}
.faq-a > div{padding:0 var(--space-2) var(--space-2)}

/* ============================================================
   FORMULARIO
   ============================================================ */
.form-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  box-shadow:var(--shadow-md);
}
.field{margin-bottom:var(--space-2)}
.field label{
  display:block;
  font-weight:700;
  font-size:var(--step--1);
  color:var(--color-text);
  margin-bottom:.35em;
}
.field .hint{
  display:block;
  font-weight:400;
  font-size:var(--step--1);
  color:var(--color-text-soft);
}
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:var(--tap-min);
  padding:.6em .85em;
  font-family:inherit;
  font-size:var(--step-0);
  color:var(--color-text);
  background:var(--color-surface);
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.field textarea{min-height:110px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-text-soft)}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--color-error)}
.field-error{
  display:block;
  margin-top:.3em;
  font-size:var(--step--1);
  font-weight:700;
  color:var(--color-error);
}
.form-msg{
  margin-top:var(--space-2);
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:var(--step--1);
}
.form-msg[data-state="ok"]{background:var(--color-success-soft);color:var(--color-success)}
.form-msg[data-state="error"]{background:rgba(255,107,117,.14);color:var(--color-error)}
.form-msg[hidden]{display:none}

/* ============================================================
   CIERRE
   ============================================================ */
.finale{
  position:relative;
  overflow:hidden;
  background:var(--ink-1000);
  color:var(--color-text-body);
  text-align:center;
  padding-block:var(--space-6);
}
/* El gradiente, detras y difuminado: asi la marca esta presente y
   ningun texto se apoya en el. */
.finale::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:min(880px,120%);
  aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:var(--color-brand-grad-diag);
  filter:blur(110px);
  opacity:.4;
  pointer-events:none;
}
.finale .wrap{position:relative;z-index:1}
.finale h2{color:var(--color-text);max-width:20ch;margin-inline:auto}
.finale p{
  color:var(--color-text-body);
  font-size:var(--step-1);
  max-width:50ch;
  margin-inline:auto var(--space-3);
  margin-inline-start:auto;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink-1000);
  color:var(--color-text-soft);
  padding-block:var(--space-5) var(--space-3);
  font-size:var(--step--1);
}
.footer-grid{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:minmax(0,1.3fr) repeat(auto-fit,minmax(150px,1fr));
  margin-bottom:var(--space-4);
}
.site-footer h3{
  font-size:var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-text);
  margin-bottom:var(--space-2);
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.2em}
/* 17px de alto no llega a los 24 de WCAG 2.2 SC 2.5.8. Los enlaces de
   una lista no entran en la excepción «inline»; los de una frase sí, y
   por eso no se tocan. */
.site-footer li a{display:inline-block;padding-block:5px;min-height:24px}
.site-footer a{color:var(--color-text-soft);text-decoration:none}
.site-footer a:hover{color:var(--color-action);text-decoration:underline}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:var(--space-3);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-3);
  justify-content:space-between;
  /* var(--color-text-soft) daba 3,93:1 sobre el navy del pie — por debajo de 4,5:1
     a 14px. Un paso de claridad más, mismo matiz: 4,63:1. */
  color:var(--color-text-soft);
}

/* El titular legal va como TEXTO en el pie de todas las páginas:
   la verificación de Twilio (18601) busca el nombre legal en el HTML,
   y lo que esté en una imagen no cuenta. */
.footer-titular{display:grid;gap:.2em}
.footer-titular p{margin:0}
.footer-dominio{margin:0;align-self:flex-end;max-width:36ch}
.footer-enlaces{margin:var(--space-2) 0 0;font-size:var(--step--1)}
.footer-enlaces a{color:var(--color-text-soft)}
.footer-enlaces a:hover{color:var(--color-action)}

/* ============================================================
   PÁGINAS INTERNAS
   ------------------------------------------------------------
   El sitio pasó de una página a nueve (brief de SEO y GEO,
   §4). Estas piezas son las que hacían falta para eso.
   ============================================================ */

/* Héroe de página interna: el mismo negro, menos alto. */
.hero-sm{padding-block:var(--space-5) var(--space-6)}
.hero-sm h1{font-size:var(--step-4);max-width:24ch}
.hero-sm .hero-lede{max-width:62ch}

/* Migas: van como texto rastreable, con su BreadcrumbList en el JSON-LD. */
.breadcrumbs{background:var(--color-brand-deep);border-bottom:1px solid var(--color-border)}
.breadcrumbs ol{list-style:none;margin:0;padding:.7em 0;display:flex;flex-wrap:wrap;gap:.4em;font-size:var(--step--1)}
.breadcrumbs li{margin:0;color:var(--color-text-soft)}
.breadcrumbs li+li::before{content:"›";margin-right:.4em;color:var(--color-text-soft)}
.breadcrumbs a{color:var(--color-text-soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--color-action);text-decoration:underline}
.breadcrumbs [aria-current]{color:var(--color-text-body)}

/* Enlace al pie de una tarjeta: texto descriptivo, nunca «ver más». */
.card-link{
  display:inline-flex;align-items:center;gap:.35em;
  margin-top:var(--space-2);min-height:24px;
  font-weight:700;font-size:var(--step--1);text-decoration:none;
}
.card-link::after{content:"→";transition:transform var(--dur-fast) var(--ease-out)}
.card-link:hover::after{transform:translateX(3px)}

/* Lista de preguntas del home: enlaces al hub de preguntas. */
.qlist{list-style:none;margin:0 auto var(--space-3);padding:0;max-width:780px;display:grid;gap:var(--space-1)}
.qlist li{margin:0}
.qlist a{
  display:block;padding:var(--space-2);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  color:var(--color-text);font-weight:700;text-decoration:none;
}
.qlist a:hover{border-color:var(--color-action);color:var(--color-action)}

.center-text{text-align:center}
.faq-pie{max-width:780px;margin:var(--space-3) auto 0;text-align:center;color:var(--color-text-soft);font-size:var(--step--1)}

/* La página en la que estás, marcada en el menú. */
.nav a[aria-current="page"]:not(.btn){color:var(--color-text);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--mint-500)}

/* ============================================================
   REVEAL
   ------------------------------------------------------------
   Prohibido sobre CTAs, formularios, datos de contacto y
   cualquier cosa del hero: la información que convierte no
   espera una animación para existir.
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
}

/* ============================================================
   PÁGINAS DE TEXTO (privacidad, legales, 404)
   ============================================================ */
.prose{max-width:72ch}
.prose h2{font-size:var(--step-2);margin-top:var(--space-4)}
.prose h3{font-size:var(--step-1);margin-top:var(--space-3)}
.prose table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:var(--space-3);
  font-size:var(--step--1);
}
.prose th,.prose td{
  text-align:left;
  padding:.6em .8em;
  border-bottom:1px solid var(--color-border);
  vertical-align:top;
}
.prose th{color:var(--color-text);font-weight:700;background:var(--color-surface-soft)}

/* ============================================================
   IMPRESIÓN
   ============================================================ */
@media print{
  .site-header,.site-footer,.finale,.nav-toggle{display:none}
  body{background:#fff;color:#000}
  .hero{background:#fff;color:#000}
  .hero h1,.hero-lede{color:#000}
  .card,.step,.insight-list li{background:#fff;border-color:#999}
}