/* ================================================================
   MASCLICKS IA · SISTEMA DE DISEÑO COMPARTIDO (tema oscuro)
   ----------------------------------------------------------------
   Usado por index.html y diseno-web.html. Contiene tokens y todos
   los componentes que ambas páginas comparten tal cual. Cada página
   conserva en su propio <style> solo lo que le es exclusivo (mockups
   de hero, secciones que no existen en la otra landing, etc.).
   ================================================================ */

/* ============================================================
   1. TOKENS
   ------------------------------------------------------------
   Contraste medido (WCAG AA texto normal = 4,5:1):
     --text-1 #F5F5F7 sobre --bg #0A0A0F  → ~19,5:1  ✓ (AAA)
     --text-2 #A6A9BB sobre --bg #0A0A0F  → ~7,7:1   ✓ (AAA)
     --text-2 sobre --card #141420        → aún mayor contraste ✓
     --wa-dark #0B1220 sobre --wa #25D366 → ~8,9:1   ✓ (sin cambios)
   --ink se usa SOLO como fondo (nunca como color de texto) desde
   este rediseño; todo el texto usa --text-1/--text-2/--text-3.
   ============================================================ */
:root{
  --indigo:#635BFF;
  --indigo-deep:#4B44D6;
  --indigo-soft:#B6B2FF;

  /* ritmo de 4 tonos oscuros para alternar secciones (leve tinte azul-marino) */
  --bg:#08090F;
  --bg-alt:#0A0B14;
  --bg-raise:#0D0F1B;
  --ink:#040509;

  /* resplandor radial reutilizable (firma Open PRO) */
  --glow-strong:radial-gradient(closest-side,rgba(99,91,255,.28),rgba(99,91,255,.08) 55%,transparent 78%);
  --glow-soft:radial-gradient(closest-side,rgba(99,91,255,.16),transparent 72%);

  --card:#111119;
  --card-border:rgba(255,255,255,.10);
  --card-border-hover:rgba(124,108,255,.55);
  /* glassy: realce fino arriba (borde de cristal) + profundidad */
  --card-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  --card-shadow-hover:0 18px 44px rgba(0,0,0,.5),0 0 34px rgba(124,108,255,.16),inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(124,108,255,.28);

  --icon-grad:linear-gradient(135deg,rgba(124,108,255,.26),rgba(99,91,255,.08));
  --icon-fg:#C9C4FF;
  --icon-grad-danger:linear-gradient(135deg,rgba(255,90,90,.22),rgba(255,90,90,.06));
  --icon-fg-danger:#FF9C9C;

  --text-1:#F5F5F7;
  --text-2:#A6A9BB;
  --text-3:#6E7186;

  --line:rgba(255,255,255,.10);
  --white:#FFFFFF;

  --wa:#25D366;            /* SOLO botones que abren WhatsApp */
  --wa-hover:#1EBE5A;
  --wa-dark:#0B1220;

  --grad-cta-a:#6C5DFD;    /* CTA principal: morado → rosado */
  --grad-cta-b:#C65BFF;
  --sh-cta:0 6px 24px rgba(124,93,255,.38),0 2px 10px rgba(198,91,255,.22);
  --sh-cta-hover:0 10px 36px rgba(124,93,255,.55),0 4px 16px rgba(198,91,255,.38);

  --danger:#FF6B6B;
  --danger-bg:rgba(255,107,107,.12);

  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-sm:10px;
  --r:18px;
  --r-lg:24px;
  --r-xl:32px;
  --r-full:999px;

  --sh-sm:0 2px 10px rgba(0,0,0,.35);
  --sh:0 12px 40px rgba(0,0,0,.4);
  --sh-lg:0 30px 70px rgba(0,0,0,.5);
  --sh-wa:0 8px 22px rgba(37,211,102,.35);

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:72px;
}

/* ============================================================
   2. RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:1rem;line-height:1.65;
  color:var(--text-2);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{font-family:var(--font-display);color:var(--text-1);line-height:1.14;font-weight:700;letter-spacing:-.02em}
h4{font-family:var(--font-display);color:var(--text-1);font-weight:700}
strong{color:var(--text-1);font-weight:700}
:focus-visible{outline:3px solid var(--indigo-soft);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ============================================================
   3. UTILIDADES + RITMO DE SECCIONES + GLOWS
   ============================================================ */
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.section{position:relative;padding:5.5rem 0;background:var(--bg)}
.section--pale{background:var(--bg-raise);isolation:isolate}
.section--bg{background:var(--bg-alt)}
.section--ink{background:var(--ink);isolation:isolate}

.section--ink::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-25%;left:50%;transform:translateX(-50%);
  width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(99,91,255,.14) 0%,rgba(99,91,255,.05) 45%,transparent 70%);
  border-radius:50%;
}
.section--pale::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  bottom:-30%;right:-10%;
  width:50vw;height:50vw;max-width:640px;max-height:640px;
  background:radial-gradient(circle,rgba(99,91,255,.10) 0%,transparent 70%);
  border-radius:50%;
}

/* Etiqueta de sección flanqueada por líneas (firma Open PRO) */
.eyebrow{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--indigo-soft);background:none;border:none;
  padding:0;margin-bottom:1.15rem;
}
.eyebrow::before,.eyebrow::after{content:'';width:30px;height:1px;flex-shrink:0}
.eyebrow::before{background:linear-gradient(90deg,transparent,var(--indigo-soft))}
.eyebrow::after{background:linear-gradient(90deg,var(--indigo-soft),transparent)}

.head{max-width:680px;margin:0 auto 3.5rem;text-align:center;position:relative;z-index:1}
/* resplandor difuso detrás del titular de sección */
.head::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-40%;transform:translateX(-50%);
  width:min(560px,90vw);height:min(360px,60vw);
  background:var(--glow-strong);
}
.head h2{
  font-size:clamp(1.95rem,4.4vw,2.9rem);margin-bottom:1rem;
  background:linear-gradient(180deg,#FFFFFF 30%,#CFCBFF 115%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.head p{font-size:1.08rem;color:var(--text-2)}

em.key{font-style:normal;color:var(--indigo-soft);font-weight:800}

/* ============================================================
   4. BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-body);font-weight:700;font-size:.97rem;line-height:1;
  padding:1.05rem 1.7rem;border-radius:var(--r-full);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
  white-space:nowrap;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex-shrink:0}

.btn--cta{background:linear-gradient(135deg,var(--grad-cta-a),var(--grad-cta-b));color:#fff;box-shadow:var(--sh-cta)}
.btn--cta:hover{box-shadow:var(--sh-cta-hover)}

.btn--ghost{background:rgba(255,255,255,.03);color:var(--text-1);box-shadow:inset 0 0 0 1.5px var(--card-border)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--indigo-soft)}

.btn--light{background:var(--white);color:var(--indigo-deep);box-shadow:0 8px 22px rgba(0,0,0,.35)}

/* Verde WhatsApp con texto oscuro = ~8,9:1. Señala que al pulsar se abre WhatsApp. Sin cambios de marca. */
.btn--wa{background:var(--wa);color:var(--wa-dark);box-shadow:var(--sh-wa)}
.btn--wa:hover{background:var(--wa-hover);box-shadow:0 12px 28px rgba(37,211,102,.5)}
.btn--wa svg{width:20px;height:20px}

.btn--sm{padding:.72rem 1.3rem;font-size:.88rem}
.btn--block{width:100%}

/* ============================================================
   5. HEADER
   ============================================================ */
.header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:rgba(10,10,15,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.header.is-stuck{border-bottom-color:var(--card-border);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.header__in{display:flex;align-items:center;justify-content:space-between;height:100%;gap:1rem}
.logo{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.logo img{height:36px;width:auto}
.logo__word{font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;color:var(--text-1);line-height:1;white-space:nowrap}
.logo__word em{font-style:normal;color:var(--indigo-soft)}

.nav{display:flex;align-items:center;gap:1.9rem}
.nav>.btn{display:none}
.nav__link{font-size:.94rem;font-weight:500;color:var(--text-2);white-space:nowrap;position:relative;padding:.35rem 0;transition:color .2s}
.nav__link::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--indigo-soft);border-radius:2px;transition:width .25s var(--ease)}
.nav__link:hover{color:var(--text-1)}
.nav__link:hover::after{width:100%}

.header__end{display:flex;align-items:center;gap:.9rem}
.burger{display:none;width:44px;height:44px;border-radius:12px;place-items:center}
.burger span{display:block;width:20px;height:2px;background:var(--text-1);border-radius:2px;transition:.3s var(--ease)}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   6. HERO (cascarón compartido; el media/mockup es propio de cada página)
   ============================================================ */
.hero{position:relative;padding:4rem 0 5rem;background:var(--bg);overflow:hidden}
.hero::before{
  content:'';position:absolute;top:-30%;right:-14%;
  width:64vw;height:64vw;max-width:820px;max-height:820px;
  background:radial-gradient(circle,rgba(99,91,255,.22) 0%,rgba(99,91,255,.07) 45%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
/* resplandor difuso detrás del titular del hero */
.hero::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  top:6%;left:-6%;width:46vw;height:46vw;max-width:560px;max-height:560px;
  background:var(--glow-soft);border-radius:50%;
}
.hero__grid{z-index:1}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center;position:relative}

.hero__badge{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.04);border:1px solid var(--card-border);
  padding:.5rem 1rem;border-radius:var(--r-full);
  box-shadow:var(--sh-sm);margin-bottom:1.7rem;font-size:.85rem;font-weight:500;color:var(--text-2);
}
.hero__badge b{color:var(--text-1);font-weight:700}
.hero__badge .dot{width:8px;height:8px;border-radius:50%;background:var(--indigo-soft);box-shadow:0 0 0 4px rgba(99,91,255,.18)}

.hero h1{
  font-size:clamp(2.3rem,5.4vw,3.9rem);margin-bottom:1.3rem;
  background:linear-gradient(180deg,#FFFFFF 28%,#CFCBFF 118%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{font-size:1.14rem;max-width:33rem;margin-bottom:2.1rem;color:var(--text-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.5rem}
.hero__note{font-size:.86rem;color:var(--text-3);display:flex;align-items:center;gap:.5rem}
.hero__note svg{width:16px;height:16px;color:var(--indigo-soft);flex-shrink:0}

.hero__media{position:relative;display:flex;justify-content:center}

.hero__caption{
  position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-full);
  padding:.55rem 1.1rem;box-shadow:var(--sh);font-size:.78rem;font-weight:600;color:var(--text-1);
  display:flex;align-items:center;gap:.45rem;white-space:nowrap;
}
.hero__caption svg{width:15px;height:15px;color:var(--indigo-soft)}
.hero__caption span{color:var(--text-2);font-weight:500}

/* ============================================================
   7. BANDA DE CONTEXTO
   ============================================================ */
.strip{background:var(--ink);padding:1.4rem 0}
.strip__in{display:flex;align-items:center;justify-content:center;gap:1rem 2.2rem;flex-wrap:wrap;text-align:center}
.strip__item{display:flex;align-items:center;gap:.6rem;color:var(--text-2);font-size:.92rem;font-weight:500}
.strip__item svg{width:20px;height:20px;color:var(--indigo-soft);flex-shrink:0}
.strip__item b{color:var(--text-1);font-weight:700}
.strip__div{width:1px;height:22px;background:var(--card-border)}

/* ============================================================
   8. PROBLEMA (tarjetas de dolor — icono en tono rojo, semántica de "problema")
   ============================================================ */
.pain{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative;z-index:1}
.pain__card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--r);
  padding:1.9rem 1.6rem;position:relative;box-shadow:var(--card-shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.pain__card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:var(--card-border-hover)}
.pain__ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--icon-grad-danger);color:var(--icon-fg-danger);margin-bottom:1.2rem}
.pain__ico svg{width:24px;height:24px}
.pain__card h3{font-size:1.06rem;margin-bottom:.5rem}
.pain__card p{font-size:.92rem;color:var(--text-2)}
.pain__cost{
  position:relative;z-index:1;
  margin-top:3rem;text-align:center;max-width:760px;margin-inline:auto;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,2.6vw,1.5rem);
  line-height:1.45;color:var(--text-1);
}
.pain__cost em{font-style:normal;color:var(--indigo-soft)}

/* ============================================================
   9. TARJETA DE PASO NUMERADO (compartida: "cómo funciona" / "proceso")
   ============================================================ */
.step{
  position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-lg);
  padding:2rem 1.7rem;box-shadow:var(--card-shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.step:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:var(--card-border-hover)}
.step__n{
  counter-increment:s;width:52px;height:52px;margin-bottom:1.2rem;
  border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--grad-cta-a),var(--grad-cta-b));color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:1.3rem;
}
.step__n::before{content:'0' counter(s)}
.step h3{color:var(--text-1);font-size:1.15rem;margin-bottom:.5rem}
.step p{font-size:.94rem;color:var(--text-2)}
.step__tag{display:inline-block;margin-top:1rem;font-size:.78rem;font-weight:600;color:var(--indigo-soft)}

/* ============================================================
   10. PLANES / PRECIOS
   ============================================================ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start;position:relative;z-index:1}
.plan{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-lg);
  padding:2.2rem 1.9rem;position:relative;box-shadow:var(--card-shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.plan:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:var(--card-border-hover)}
.plan--featured{border:1px solid var(--indigo-soft);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 46px rgba(124,108,255,.24),inset 0 1px 0 rgba(255,255,255,.1);transform:translateY(-8px)}
.plan--featured::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-18%;transform:translateX(-50%);
  width:120%;height:60%;background:var(--glow-soft);
}
.plan--featured:hover{transform:translateY(-12px)}
.plan__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--grad-cta-a),var(--grad-cta-b));color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.35rem .9rem;border-radius:var(--r-full);box-shadow:var(--sh-cta);white-space:nowrap;
}
.plan__name{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--text-1);margin-bottom:.35rem}
.plan__for{font-size:.88rem;color:var(--text-2);margin-bottom:1.3rem;min-height:2.5em}
.plan__price{font-family:var(--font-display);font-weight:700;font-size:1.7rem;color:var(--indigo-soft);line-height:1;margin-bottom:.3rem}
.plan__price small{display:block;font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--text-3);margin-top:.4rem}
.plan__list{display:grid;gap:.7rem;margin:1.5rem 0;padding-top:1.5rem;border-top:1px solid var(--card-border)}
.plan__li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--text-1)}
.plan__li svg{width:18px;height:18px;color:var(--indigo-soft);flex-shrink:0;margin-top:.1rem}
.plan__li--off{color:var(--text-3)}
.plan__li--off svg{color:var(--text-3)}
.plans__note{text-align:center;margin-top:2.2rem;font-size:.9rem;color:var(--text-2)}

/* ============================================================
   11. TESTIMONIOS
   ============================================================ */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative;z-index:1}
.tst{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-lg);padding:1.9rem;
  display:flex;flex-direction:column;box-shadow:var(--card-shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tst:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:var(--card-border-hover)}
.tst__stars{display:inline-flex;gap:2px;color:#F5A623;margin-bottom:1rem}
.tst__stars svg{width:16px;height:16px}
.tst p{font-size:.96rem;color:var(--text-1);flex:1;margin-bottom:1.5rem}
.tst__who{display:flex;align-items:center;gap:.85rem;padding-top:1.2rem;border-top:1px solid var(--card-border)}
.tst__ini{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--icon-grad);color:var(--icon-fg);font-family:var(--font-display);font-weight:700}
.tst__who b{display:block;font-size:.92rem;color:var(--text-1)}
.tst__who small{font-size:.8rem;color:var(--text-3)}
.tst__ph{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo-soft);background:rgba(99,91,255,.12);padding:.2rem .5rem;border-radius:6px;margin-bottom:1rem;align-self:flex-start}

/* ============================================================
   12. FAQ
   ============================================================ */
.faq{max-width:820px;margin-inline:auto;position:relative;z-index:1}
.faq details{background:var(--card);border:1px solid var(--card-border);border-radius:var(--r);margin-bottom:.85rem;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq details[open]{border-color:var(--card-border-hover);box-shadow:var(--sh-sm)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.3rem 1.6rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-weight:700;color:var(--text-1);font-size:1rem;font-family:var(--font-display);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';width:11px;height:11px;flex-shrink:0;
  border-right:2px solid var(--indigo-soft);border-bottom:2px solid var(--indigo-soft);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq__a{padding:0 1.6rem 1.4rem;font-size:.96rem;color:var(--text-2)}

/* ============================================================
   13. BANDA CTA + FORMULARIO
   ============================================================ */
.cta{position:relative;background:var(--ink);overflow:hidden}
.cta::before{content:'';position:absolute;top:-40%;left:-10%;width:60vw;height:60vw;max-width:700px;max-height:700px;background:radial-gradient(circle,rgba(99,91,255,.4),transparent 65%);pointer-events:none}
.cta__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.cta__copy .eyebrow{background:rgba(255,255,255,.05)}
.cta__copy h2{color:var(--text-1);font-size:clamp(1.9rem,4.2vw,2.8rem);margin-bottom:1.1rem}
.cta__copy p{color:var(--text-2);font-size:1.05rem;margin-bottom:1.8rem}
.cta__points{display:grid;gap:.8rem;margin-bottom:2rem}
.cta__point{display:flex;gap:.65rem;align-items:center;color:var(--text-1);font-size:.96rem}
.cta__point svg{width:19px;height:19px;color:var(--wa);flex-shrink:0}
.cta__wa{display:inline-flex}

.form-card{position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-lg);padding:2.4rem;box-shadow:var(--sh-lg)}
.form-card h3{font-size:1.5rem;margin-bottom:.4rem;color:var(--text-1)}
.form-card>.form-body>.form-intro{font-size:.94rem;margin-bottom:1.7rem;color:var(--text-2)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.85rem;font-weight:700;color:var(--text-1);margin-bottom:.45rem}
.field label span{color:var(--text-3);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;padding:.92rem 1rem;
  border:1.5px solid var(--card-border);border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);font-size:.96rem;color:var(--text-1);font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--indigo-soft);box-shadow:0 0 0 4px rgba(99,91,255,.16)}
.field select{appearance:none;background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6B2FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.field select option{background:#14141F;color:var(--text-1)}
.field textarea{resize:vertical;min-height:96px}
.err{display:none;font-size:.8rem;color:var(--danger);margin-top:.35rem}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--danger)}
.field.bad .err{display:block}
.consent{display:flex;gap:.6rem;align-items:flex-start;margin:1.2rem 0 1.4rem}
.consent input{width:17px;height:17px;margin-top:.2rem;accent-color:var(--indigo);flex-shrink:0;cursor:pointer}
.consent label{font-size:.8rem;color:var(--text-2);line-height:1.55}
.consent a{color:var(--indigo-soft);text-decoration:underline}
.form-trust{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;font-size:.81rem;color:var(--text-3)}
.form-trust svg{width:15px;height:15px;color:var(--indigo-soft)}
.form-error{display:none;margin-top:1rem;padding:.9rem 1rem;border-radius:var(--r-sm);background:var(--danger-bg);color:var(--danger);font-size:.88rem}
.form-error a{color:var(--danger);font-weight:700;text-decoration:underline}
.form-error.show{display:block}
.done{display:none;text-align:center;padding:2.4rem 1rem}
.done__ico{width:66px;height:66px;border-radius:50%;margin:0 auto 1.3rem;background:rgba(37,211,102,.15);color:#3DDC84;display:grid;place-items:center}
.done__ico svg{width:32px;height:32px}
.done h3{margin-bottom:.6rem;color:var(--text-1)}
.done p{margin-bottom:1.6rem;color:var(--text-2)}
.is-sent .form-body{display:none}
.is-sent .done{display:block}

/* ============================================================
   14. FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--text-3);padding:4rem 0 0}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem}
.footer__brand{display:flex;align-items:center;gap:.6rem;margin-bottom:1.3rem}
.footer__logo{height:40px;width:auto}
.footer__word{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;color:var(--text-1);line-height:1}
.footer__word em{font-style:normal;color:var(--indigo-soft)}
.footer__about p{font-size:.92rem;max-width:26rem;margin-bottom:1.2rem;line-height:1.7;color:var(--text-2)}
.footer__also{font-size:.85rem;color:var(--text-3)}
.footer__also a{color:var(--indigo-soft);text-decoration:underline}
.footer h4{color:var(--text-1);font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:1.2rem;font-family:var(--font-body)}
.footer li+li{margin-top:.7rem}
.footer a{font-size:.92rem;transition:color .2s}
.footer a:hover{color:var(--text-1)}
.footer__contact li{display:flex;align-items:center;gap:.6rem;font-size:.92rem}
.footer__contact svg{width:16px;height:16px;color:var(--indigo-soft);flex-shrink:0}
.footer__bottom{border-top:1px solid var(--card-border);padding:1.6rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.84rem}
.legal{display:flex;gap:1.4rem;flex-wrap:wrap}

/* ============================================================
   15. WHATSAPP FLOTANTE
   ============================================================ */
.fab{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;
  display:flex;align-items:center;gap:.65rem;
  background:var(--wa);color:var(--wa-dark);font-weight:700;font-size:.92rem;
  padding:.85rem 1.25rem .85rem .9rem;border-radius:var(--r-full);
  box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.fab:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 32px rgba(37,211,102,.55)}
.fab svg{width:26px;height:26px;flex-shrink:0}
.fab::before{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid var(--wa);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.28);opacity:0}}

/* ============================================================
   16. REVEAL AL SCROLL
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}
[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}
[data-d="4"]{transition-delay:.32s}

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

/* ============================================================
   17. RESPONSIVE COMPARTIDO
   ------------------------------------------------------------
   Cada página añade, en su propio <style>, las reglas de las
   mismas franjas (1024/860/640px) para sus grids exclusivos
   (.serv-grid, .why-grid, .proc-grid, .port-grid, .steps, .vs,
   .sol__grid, .results…).
   ============================================================ */
@media (max-width:1024px){
  .hero__grid,.cta__grid{grid-template-columns:1fr;gap:3rem}
  .hero__media{order:-1}
  .pain{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .plan--featured{transform:none;order:-1}
  .plan--featured:hover{transform:translateY(-5px)}
  .tst-grid{grid-template-columns:1fr 1fr}
  .tst-grid .tst:last-child{grid-column:1/-1}
  .footer__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .nav{
    position:fixed;inset:var(--header-h) 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--card-border);
    padding:1rem 1.25rem 1.5rem;box-shadow:var(--sh);
    transform:translateY(-120%);opacity:0;pointer-events:none;
    transition:transform .35s var(--ease),opacity .3s var(--ease);
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav__link{padding:.95rem .25rem;border-bottom:1px solid var(--card-border);font-size:1rem}
  .nav__link::after{display:none}
  .nav>.btn{display:inline-flex;margin-top:1.1rem;width:100%}
  .burger{display:grid}
  .header__end .btn--cta{display:none}
  .section{padding:3.8rem 0}
  .form-card{padding:1.8rem}
}

@media (max-width:640px){
  .pain,.tst-grid{grid-template-columns:1fr}
  .tst-grid .tst:last-child{grid-column:auto}
  .strip__div{display:none}
  .hero__actions .btn{width:100%}
  .footer__grid{grid-template-columns:1fr;gap:2.2rem}
  .footer__bottom{flex-direction:column;text-align:center}
  .fab span{display:none}
  .fab{padding:1rem;border-radius:50%}
  .hero__caption{white-space:normal;text-align:center;width:max-content;max-width:90%}
}