/* =========================================================================
   Neural Studio — Agencia de marketing digital (Temuco, Chile)
   Hoja de estilos de producción (rediseño "Tarifario navy", 2026-07)

   Paleta 60-30-10 invertida: navy domina (60), crema en bloques de acento
   (sección web, plan destacado, fila destacada de combos y CTA = 30),
   lima solo en botones, badges y E-bars (10).
   Firma única: Vanta.js NET (red neuronal, líneas claras) en el hero.
   La versión crema alternativa se conserva en index-crema.html.
   ========================================================================= */

/* ----------------------------- Tokens ----------------------------------- */
:root{
  --hueso:  #F8F7F1;
  --paper:  #FFFFFF;
  --navy:   #0A1224;
  --navy-2: #0D1730;
  --lima:   #D6F740;
  --slate:  #5B6478;                 /* secundario sobre claro */
  --mist:   #B9BFCE;                 /* secundario sobre navy  */
  --line:   rgba(10,18,36,.12);      /* hairline sobre claro   */
  --line-2: rgba(10,18,36,.28);      /* hairline fuerte claro  */
  --line-l: rgba(248,247,241,.16);   /* hairline sobre navy    */
  --line-l2:rgba(248,247,241,.32);   /* hairline fuerte navy   */

  --maxw: 1180px;
  --pad-x: clamp(20px,5vw,56px);
  --r: 18px;                         /* paneles y bandas; botones pill */
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  margin:0;
  background:var(--navy);
  color:var(--hueso);
  font-family:"Outfit",system-ui,sans-serif;
  font-size:clamp(15px,.35vw + 14px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{ font-family:"Syne",sans-serif; font-weight:800; margin:0; letter-spacing:-.02em; line-height:1.06; }
p,ul{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }

/* ---------- Firma de marca: la "E" de NEURAL ----------
   3 barras horizontales lima idénticas, medidas del wordmark:
   largo : grosor : espacio = 5 : 1 : 2 (110 : 22 : 44 px). */
.ebars{ display:inline-flex; flex-direction:column; justify-content:space-between; width:20px; height:28px; }
.ebars i{ display:block; width:100%; height:4px; background:var(--lima); }

/* ============================ BOTONES ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Outfit"; font-weight:600; font-size:1rem; line-height:1;
  padding:16px 26px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .25s, border-color .2s;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn-primary{ background:var(--lima); color:var(--navy); }
.btn-primary svg{ fill:var(--navy); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,.6); }
.btn-ghost{ background:transparent; border-color:var(--line-l2); color:var(--hueso); }
.btn-ghost:hover{ border-color:var(--hueso); }
.btn-nav{ padding:11px 20px; font-size:.92rem; }

/* ============================ NAV (sólido siempre) ============================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--navy);
  border-bottom:1px solid var(--line-l);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav__logo img{ width:118px; height:auto; }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a:not(.btn){ color:var(--mist); font-weight:500; font-size:.95rem; transition:color .2s; }
.nav__links a:not(.btn):hover{ color:var(--hueso); }

.burger{ display:none; background:none; border:0; width:44px; height:44px; padding:10px; cursor:pointer; }
.burger span{ display:block; height:2px; background:var(--hueso); border-radius:2px; margin:5px 0; }

.menu{
  position:fixed; inset:0; z-index:59;
  background:var(--navy-2); color:var(--hueso);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad-x);
  transform:translateY(-102%); transition:transform .45s var(--ease);
}
.menu.is-open{ transform:none; }
.menu a{ font-family:"Syne",sans-serif; font-weight:700; font-size:1.9rem; padding:12px 0; border-bottom:1px solid var(--line-l); }
.menu a.btn{ margin-top:24px; border:0; font-family:"Outfit"; font-size:1.05rem; align-self:flex-start; }

/* ============================ HERO ============================ */
.hero{
  position:relative;
  min-height:calc(100dvh - 68px);
  display:flex; align-items:center;
  overflow:hidden;
  padding:56px 0;
}
.hero__net{ position:absolute; inset:0; }
/* velo: garantiza legibilidad del texto sobre la red */
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, var(--navy) 0%, var(--navy) 40%, rgba(10,18,36,.6) 64%, rgba(10,18,36,0) 86%);
}
.hero__content{ position:relative; max-width:880px; }
.hero__eyebrow{ color:var(--mist); font-weight:500; font-size:.98rem; margin-bottom:22px; }
.hero h1{ font-size:clamp(2.2rem,3.6vw,2.9rem); letter-spacing:-.03em; text-wrap:balance; max-width:24ch; }
.hero__lead{ color:var(--mist); font-size:clamp(1.05rem,1.5vw,1.2rem); max-width:46ch; margin:24px 0 36px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* ============================ SECCIONES ============================ */
.section{ padding:clamp(72px,9vw,120px) 0; }
.section__head{ max-width:700px; margin-bottom:48px; }
.section__head h2{ font-size:clamp(1.8rem,4vw,2.7rem); }
.section__head .sub{ color:var(--mist); margin-top:16px; max-width:60ch; }
.section__head .ebars{ margin-bottom:20px; }
.section--paper{ background:var(--hueso); color:var(--navy); }
.section--paper .section__head .sub{ color:var(--slate); }

/* píldora lima montada sobre el borde superior de la tarjeta destacada
   (detalle traído de la propuesta PPT) */
.badge{
  position:absolute; top:-13px; left:28px;
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; line-height:1;
  color:var(--navy); background:var(--lima); border-radius:999px; padding:7px 14px;
}
.unit{ font-family:"Outfit"; font-weight:400; font-size:.8rem; color:var(--mist); }
.section--paper .unit, .tier--paper .unit, tr.feat .unit{ color:var(--slate); }

/* ---------- MARKETING: escalera acumulativa ---------- */
.ladder{ display:flex; flex-direction:column; }
.tier{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;
  gap:32px; align-items:center;
  background:var(--navy-2); border:1px solid var(--line-l); border-radius:var(--r);
  padding:32px 36px;
}
.tier h3{ font-size:1.5rem; }
.tier .desc{ color:var(--mist); font-size:.95rem; margin-top:8px; max-width:38ch; }
.tier__carry{ font-weight:600; font-size:.9rem; margin-bottom:10px; }
.tier__feats{ list-style:none; padding:0; }
.tier__feats li{ position:relative; padding-left:16px; margin-bottom:7px; font-size:.92rem; color:var(--mist); }
.tier__feats li:last-child{ margin-bottom:0; }
.tier__feats li::before{ content:""; position:absolute; left:0; top:.66em; width:6px; height:6px; background:var(--hueso); border-radius:1px; }
.tier__price{ text-align:right; }
.tier__price strong{ display:block; font-family:"Syne"; font-weight:800; font-size:1.9rem; letter-spacing:-.02em; }
.tier__price .unit{ display:block; margin-top:4px; }

/* plan destacado: banda crema sobre la base navy */
.tier--paper{ position:relative; background:var(--paper); border-color:var(--paper); color:var(--navy); }
.tier--paper .desc, .tier--paper .tier__feats li{ color:var(--slate); }
.tier--paper .tier__feats li::before{ background:var(--navy); }

/* conector "+" entre bandas */
.ladder__plus{ display:flex; flex-direction:column; align-items:center; }
.ladder__plus i{ width:1px; height:10px; background:var(--line-l2); }
.ladder__plus span{
  width:26px; height:26px; display:grid; place-items:center;
  border:1px solid var(--line-l2); border-radius:50%; background:var(--navy);
  font-family:"Syne"; font-weight:700; font-size:.95rem; line-height:1;
}

/* ---------- PACKS: carta de menú con puntos ---------- */
.menu-card{
  margin-top:22px; background:var(--navy-2); border:1px solid var(--line-l);
  border-radius:var(--r); padding:clamp(26px,3.4vw,40px);
}
.menu-card h3{ font-weight:700; font-size:1.2rem; }
.menu-card .hint{ color:var(--mist); font-size:.88rem; font-family:"Outfit"; font-weight:400; }
.menu-group{ margin-top:22px; }
.menu-group + .menu-group{ margin-top:34px; }
.mrow{ display:flex; align-items:baseline; gap:12px; padding:11px 0; }
.mrow .n{ font-size:.98rem; }
.mrow .dots{ flex:1; border-bottom:2px dotted rgba(248,247,241,.25); transform:translateY(-5px); min-width:24px; }
.mrow .p{ font-family:"Syne"; font-weight:700; font-size:1.05rem; white-space:nowrap; }

/* ---------- WEB: tarifario sobre crema (bloque 30%) ---------- */
.wrows{ margin-top:8px; }
.wrow{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;
  gap:32px; align-items:center;
  padding:30px 2px; border-top:1px solid var(--line);
}
.wrow:last-of-type{ border-bottom:1px solid var(--line); }
.wrow h3{ font-size:1.35rem; }
.wrow .desc{ color:var(--slate); font-size:.93rem; margin-top:6px; max-width:34ch; }
.secmeta{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.secviz{ display:inline-flex; gap:5px; }
.secviz i{ width:11px; height:11px; border-radius:2px; border:1px solid rgba(10,18,36,.35); }
.secviz i.on{ background:var(--navy); border-color:var(--navy); }
.secmeta b{ font-size:.9rem; font-weight:600; }
.wfeats{ list-style:none; padding:0; }
.wfeats li{ font-size:.9rem; color:var(--slate); margin-bottom:4px; }
.wfeats li:last-child{ margin-bottom:0; }
.wrow__price{ text-align:right; }
.wrow__price strong{ display:block; font-family:"Syne"; font-weight:800; font-size:1.7rem; letter-spacing:-.02em; }
.wrow__price .unit{ display:block; margin-top:4px; }

/* plan destacado: banda navy sobre el bloque crema.
   El margen negativo compensa el padding para que el texto quede
   alineado con las filas abiertas (que llevan padding lateral de 2px). */
.wrow--top{
  position:relative;
  background:var(--navy); border:1px solid var(--navy) !important;
  border-radius:var(--r); padding:30px 31px; margin:8px -30px;
  color:var(--hueso);
}
.wrow--top + .wrow{ border-top:0; }
.wrow--top .desc, .wrow--top .wfeats li, .wrow--top .unit{ color:var(--mist); }
.wrow--top .secviz i{ border-color:rgba(248,247,241,.3); }
.wrow--top .secviz i.on{ background:var(--hueso); border-color:var(--hueso); }

.wextra{ display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:42px; }
.xrow{ display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:20px; }
.xrow .n{ font-family:"Syne"; font-weight:700; font-size:1.05rem; }
.xrow .s{ color:var(--slate); font-size:.87rem; margin-top:4px; }
.xrow .p{ font-family:"Syne"; font-weight:700; font-size:1.1rem; white-space:nowrap; text-align:right; }

/* ---------- COMBOS: tabla comparativa sobre navy ---------- */
.ctable{ width:100%; border-collapse:separate; border-spacing:0; }
.ctable thead th{
  text-align:left; font-family:"Outfit"; font-weight:600; font-size:.85rem; color:var(--mist);
  padding:0 20px 14px; border-bottom:2px solid var(--hueso);
}
.ctable thead th.money-h{ text-align:right; }
.ctable tbody th, .ctable tbody td{
  padding:28px 20px; border-bottom:1px solid var(--line-l);
  vertical-align:top; text-align:left; font-weight:400;
}
.ctable .plan h3{ font-size:1.25rem; }
.ctable .plan p{ color:var(--mist); font-size:.88rem; margin-top:6px; max-width:24ch; font-family:"Outfit"; }
.ctable ul{ list-style:none; padding:0; }
.ctable ul li{ position:relative; padding-left:14px; font-size:.9rem; color:var(--mist); margin-bottom:6px; }
.ctable ul li:last-child{ margin-bottom:0; }
.ctable ul li::before{ content:""; position:absolute; left:0; top:.66em; width:5px; height:5px; background:var(--hueso); border-radius:1px; }
.ctable .money{ text-align:right; font-family:"Syne"; font-weight:700; font-size:1.3rem; letter-spacing:-.01em; white-space:nowrap; }
.ctable .money .unit{ display:block; margin-top:4px; }

/* fila destacada: banda crema sobre navy */
tr.feat > th, tr.feat > td{ background:var(--hueso); color:var(--navy); border-bottom-color:var(--hueso); }
tr.feat > th:first-child{ border-radius:14px 0 0 14px; }
tr.feat > td:last-child{ border-radius:0 14px 14px 0; }
tr.feat .plan p, tr.feat ul li{ color:var(--slate); }
tr.feat ul li::before{ background:var(--navy); }
/* ancla del badge en la fila destacada de la tabla */
.ctable tbody th.plan{ position:relative; }
tr.feat .badge{ left:20px; }

.accesible{
  margin-top:26px; background:var(--navy-2); border:1px solid var(--line-l); border-radius:var(--r);
  padding:clamp(26px,4vw,42px);
  display:grid; grid-template-columns:minmax(0,1.6fr) auto; gap:32px; align-items:center;
}
.accesible h3{ font-weight:700; font-size:1.3rem; margin-bottom:12px; }
.accesible p{ color:var(--mist); font-size:.95rem; max-width:54ch; }
.accesible__price{ text-align:right; }
.accesible__price strong{ display:block; font-family:"Syne"; font-weight:800; font-size:2rem; letter-spacing:-.02em; }
.accesible__price small{ display:block; color:var(--mist); font-size:.84rem; margin-top:6px; }

.note{ margin-top:28px; border-left:2px solid var(--hueso); padding:4px 0 4px 20px; color:var(--mist); font-size:.92rem; max-width:80ch; }
.note strong{ color:var(--hueso); }

/* ---------- PROCESO ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.step{ border-top:2px solid var(--hueso); padding-top:18px; }
.step__num{ font-family:"Syne"; font-weight:800; font-size:1.5rem; }
.step h3{ font-size:1.12rem; margin:12px 0 8px; }
.step p{ color:var(--mist); font-size:.92rem; }

/* ---------- TESTIMONIOS ---------- */
.tq{ margin:0; }
.tq blockquote{
  margin:0; font-weight:500; font-size:clamp(1.3rem,2.6vw,1.75rem);
  line-height:1.45; letter-spacing:-.01em; max-width:34ch;
}
.tq figcaption, .qs figcaption{ margin-top:18px; font-size:.92rem; }
.tq .who, .qs .who{ font-weight:600; }
.tq .role, .qs .role{ color:var(--mist); }
.quotes-sm{ display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:52px; }
.qs{ margin:0; border-left:2px solid var(--line-l2); padding-left:22px; }
.qs blockquote{ margin:0; font-size:1rem; color:var(--mist); line-height:1.6; }
.qs figcaption{ margin-top:14px; }

/* ---------- CTA: panel crema sobre navy ---------- */
.cta{
  background:var(--hueso); color:var(--navy); border-radius:var(--r);
  text-align:center; padding:clamp(56px,8vw,96px) 24px;
}
.cta h2{ font-size:clamp(1.8rem,4vw,2.7rem); max-width:20ch; margin-inline:auto; }
.cta__lead{ color:var(--slate); margin:18px auto 34px; }
.cta__contact{ margin-top:26px; color:var(--slate); font-size:.9rem; }

/* ---------- FOOTER ---------- */
.footer{ border-top:1px solid var(--line-l); margin-top:clamp(72px,9vw,120px); padding:68px 0 38px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; }
.footer__brand img{ height:42px; width:auto; margin-bottom:18px; }
.footer__brand p{ color:var(--mist); font-size:.95rem; max-width:42ch; }
.footer__cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.footer__col p:first-child{ font-family:"Syne"; font-weight:700; margin-bottom:14px; }
.footer__col a, .footer__col p{ display:block; color:var(--mist); font-size:.92rem; margin-bottom:10px; transition:color .2s; }
.footer__col a:hover{ color:var(--hueso); }
.footer__legal{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:52px; padding-top:26px; border-top:1px solid var(--line-l); }
.footer__legal p{ color:var(--mist); font-size:.85rem; }

/* ============================ REVEAL (sutil, sin blur) ============================ */
.has-js .r{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--d,0s); }
.has-js .r.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .has-js .r{ opacity:1; transform:none; transition:none; }
  .btn{ transition:none; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:960px){
  .tier{ grid-template-columns:minmax(0,1fr) auto; }
  .tier__feats-wrap{ grid-column:1 / -1; }
  .wrow{ grid-template-columns:minmax(0,1fr) auto; }
  .wrow__mid{ grid-column:1 / -1; }
  .wrow--top{ margin:8px -12px; padding:28px 13px; }
  .steps{ grid-template-columns:1fr 1fr; }
  .footer__top{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:880px){
  /* tabla de combos -> fichas */
  .ctable, .ctable tbody, .ctable tr, .ctable td, .ctable tbody th{ display:block; width:100%; }
  .ctable thead{ display:none; }
  .ctable tbody tr{ border:1px solid var(--line-l); border-radius:var(--r); padding:24px 22px; margin-bottom:14px; background:var(--navy-2); }
  .ctable tbody tr.feat{ position:relative; background:var(--hueso); border-color:var(--hueso); margin-top:20px; }
  .ctable tbody tr.feat th.plan{ position:static; }
  tr.feat .badge{ left:22px; }
  tr.feat > th, tr.feat > td{ background:transparent; }
  .ctable tbody th, .ctable tbody td{ padding:0; border-bottom:0; }
  .ctable tbody td{ margin-top:16px; }
  .ctable td[data-label]::before{
    content:attr(data-label); display:block; font-family:"Outfit"; font-weight:600;
    font-size:.78rem; color:var(--mist); margin-bottom:6px;
  }
  tr.feat td[data-label]::before{ color:var(--slate); }
  .ctable td.money{ display:flex; align-items:baseline; gap:8px; }
  .ctable td.money::before{ display:inline; margin:0 auto 0 0; }
  .ctable .money .unit{ display:inline; margin-left:2px; }
  .accesible{ grid-template-columns:1fr; }
  .accesible__price{ text-align:left; }
}

@media (max-width:720px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .badge{ left:22px; }
  .hero{ min-height:auto; padding:72px 0 64px; }
  .hero__veil{ background:rgba(10,18,36,.8); }
  .tier{ grid-template-columns:1fr; gap:18px; padding:26px 22px; }
  .tier__price{ text-align:left; }
  .tier__price .unit{ display:inline; margin-left:6px; }
  .wrow{ grid-template-columns:1fr; gap:16px; }
  .wrow__price{ text-align:left; }
  .wrow__price .unit{ display:inline; margin-left:6px; }
  .wextra{ grid-template-columns:1fr; gap:0; }
  .xrow{ padding:20px 0; }
  .quotes-sm{ grid-template-columns:1fr; gap:32px; }
  .footer__legal{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .xrow{ flex-direction:column; align-items:flex-start; gap:8px; }
  .xrow .p{ text-align:left; }
}