/* ==========================================================================
   Wawentu · sitio público v4
   Paleta, tipografía, radios y sombras tomados tal cual del FE (ui-v5 · Dashkit).
   No se introducen colores ni tipografías nuevas fuera del semáforo ético.
   ========================================================================== */

@font-face{font-family:"Cerebri Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cerebrisans-regular.woff) format("woff")}
@font-face{font-family:"Cerebri Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cerebrisans-medium.woff) format("woff")}
@font-face{font-family:"Cerebri Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cerebrisans-semibold.woff) format("woff")}
@font-face{font-family:"Cerebri Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cerebrisans-bold.woff) format("woff")}

:root{
  --primary:#669898;
  --primary-hover:#476a6a;
  --primary-emphasis:#293d3d;
  --primary-subtle:#e0eaea;
  --primary-border:#c2d6d6;

  --ink:#12263f;
  --gray-100:#f9fbfd;
  --gray-200:#edf2f9;
  --gray-300:#e3ebf6;
  --gray-400:#d2ddec;
  --gray-600:#95aac9;
  --gray-700:#6e84a3;
  --gray-800:#3b506c;
  --white:#fff;

  /* semáforo ético — tokens de estado del tema */
  --green:#00d97e;
  --yellow:#f6c343;
  --red:#e63757;

  --logo-deep:#2f3f3d;
  --logo-muted:#7c9190;

  --radius:.375rem;
  --radius-lg:.5rem;
  --radius-xl:1rem;
  --radius-pill:50rem;
  --shadow-sm:0 .125rem .25rem rgba(18,38,63,.075);
  --shadow:0 .5rem 1rem rgba(18,38,63,.15);
  --shadow-lg:0 1rem 3rem rgba(18,38,63,.175);

  --font:"Cerebri Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:1rem;line-height:1.6;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.2;font-weight:600}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

.wrap{width:min(var(--wrap),calc(100% - 2.5rem));margin-inline:auto}

/* ---------- utilidades ---------- */
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:.75rem}
.lead{font-size:1.125rem;color:var(--gray-700)}
.section{padding:5rem 0}
.section--tint{background:var(--gray-100);border-block:1px solid var(--gray-300)}
.section--dark{background:var(--ink);color:var(--white)}
.section__head{max-width:46rem;margin-bottom:3rem}
.section__head--center{margin-inline:auto;text-align:center}
.section__head h2{font-size:clamp(1.75rem,3.4vw,2.4rem)}
.section__head p{margin-top:1rem}
.section--dark .eyebrow{color:var(--primary-subtle)}
.section--dark .lead{color:var(--gray-400)}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.6rem;border-radius:var(--radius-pill);
  font-weight:600;font-size:.9375rem;border:1px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn--primary{background:var(--primary);color:var(--white)}
.btn--primary:hover{background:var(--primary-hover);color:var(--white)}
.btn--ghost{background:var(--white);color:var(--primary-emphasis);border-color:var(--gray-400)}
.btn--ghost:hover{background:var(--primary-subtle);color:var(--primary-emphasis);border-color:var(--primary-border)}
.btn--light{background:var(--white);color:var(--primary-emphasis)}
.btn--light:hover{background:var(--gray-200);color:var(--primary-emphasis)}

.grid{display:grid;gap:1.5rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}
.card h3{font-size:1.125rem;margin-bottom:.5rem}
.card p{color:var(--gray-700);font-size:.9375rem}

/* ---------- barra superior ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-300)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--ink)}
.brand img{height:34px;width:auto}
.topbar nav{display:flex;gap:1.75rem;font-size:.9375rem;font-weight:500;color:var(--gray-800)}
.topbar nav a{color:inherit}
.topbar nav a:hover{color:var(--primary)}

/* ---------- hero ---------- */
.hero{padding:4.5rem 0 4rem;background:linear-gradient(180deg,var(--primary-subtle) 0%,var(--white) 82%)}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.15rem);max-width:16ch}
.hero__sub{margin-top:1.5rem;max-width:38rem;font-size:1.125rem;color:var(--gray-800)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.pill{
  display:inline-block;padding:.4rem 1rem;margin-bottom:1.5rem;
  border-radius:var(--radius-pill);border:1px solid var(--primary-border);
  background:var(--white);color:var(--primary-emphasis);font-size:.8125rem;font-weight:600;
}
.hero__note{margin-top:1.5rem;font-size:.875rem;color:var(--gray-700)}

/* ---------- mockup de conversación ---------- */
.mock{background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.mock__bar{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--gray-300);background:var(--gray-100)}
.mock__dots{display:flex;gap:.35rem}
.mock__dots i{width:.55rem;height:.55rem;border-radius:50%;background:var(--gray-400)}
.mock__title{font-size:.8125rem;font-weight:600;color:var(--gray-800)}
.mock__tag{margin-left:auto;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);background:var(--primary-subtle);padding:.2rem .6rem;border-radius:var(--radius-pill)}
.mock__body{padding:1.25rem;display:grid;gap:.85rem;background:var(--white)}
.msg{max-width:88%;padding:.8rem 1rem;border-radius:var(--radius-lg);font-size:.9375rem;line-height:1.5}
.msg--user{margin-left:auto;background:var(--primary);color:var(--white);border-bottom-right-radius:.15rem}
.msg--bot{background:var(--gray-200);color:var(--ink);border-bottom-left-radius:.15rem}
.msg__who{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:.3rem}
.mock__foot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.9rem 1.25rem;border-top:1px solid var(--gray-300);background:var(--gray-100);font-size:.8125rem;color:var(--gray-700)}

/* semáforo */
.dot{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--gray-800)}
.dot::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--gray-400)}
.dot--green::before{background:var(--green)}
.dot--yellow::before{background:var(--yellow)}
.dot--red::before{background:var(--red)}

/* ---------- los cuatro pilares ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.pillar{
  background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius-xl);
  padding:1.75rem;box-shadow:var(--shadow-sm);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.pillar:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--primary-border)}
.pillar__icon{
  display:flex;align-items:center;justify-content:center;
  width:3.25rem;height:3.25rem;margin-bottom:1.25rem;
  border-radius:.9rem;background:var(--primary-subtle);color:var(--primary-hover);
}
.pillar__icon svg{width:1.85rem;height:1.85rem}
.pillar__icon--semaforo{color:var(--primary-emphasis)}
.pillar h3{font-size:1.125rem;margin-bottom:.6rem;color:var(--primary-emphasis)}
.pillar p{color:var(--gray-700);font-size:.9375rem}
@media (min-width:961px){.pillar h3{min-height:2.4em}}

/* ---------- cifras ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.stat{background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius-lg);padding:1.6rem}
.stat b{display:block;font-size:2.5rem;line-height:1;font-weight:700;color:var(--primary);letter-spacing:-.03em}
.stat span{display:block;margin-top:.6rem;color:var(--gray-700);font-size:.9375rem}
.source{margin-top:1rem;font-size:.8125rem;color:var(--gray-600)}
.quote{
  margin-top:2.5rem;padding:1.75rem 2rem;border-left:3px solid var(--primary);
  background:var(--primary-subtle);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  font-size:1.1875rem;font-weight:500;color:var(--primary-emphasis);
}

/* ---------- pasos ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:paso}
.flow__step{position:relative;background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}
.flow__step::before{
  counter-increment:paso;content:counter(paso);
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;margin-bottom:1rem;border-radius:var(--radius-pill);
  background:var(--primary);color:var(--white);font-size:.875rem;font-weight:700;
}
.flow__step h3{font-size:1.0625rem;margin-bottom:.5rem}
.flow__step p{color:var(--gray-700);font-size:.9375rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chip{padding:.35rem .8rem;border-radius:var(--radius-pill);background:var(--gray-200);color:var(--gray-800);font-size:.8125rem;font-weight:500}

/* ---------- diferenciación ---------- */
.analogy{max-width:48rem;margin-inline:auto;text-align:center}
.analogy p{font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.45;font-weight:500}
.analogy p+p{margin-top:1rem;font-size:1rem;font-weight:400;color:var(--gray-400)}
.verbs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.75rem}
.verb{padding:.45rem 1rem;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.22);color:var(--white);font-size:.875rem;font-weight:600}

/* ---------- audiencias ---------- */
.audience{display:flex;flex-direction:column;height:100%}
.audience__kicker{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-600);margin-bottom:.5rem}
.audience h3{font-size:1.25rem;margin-bottom:.75rem;color:var(--primary-emphasis)}
.audience__msg{color:var(--gray-700);font-size:.9375rem;margin-bottom:1.25rem}
.audience ul{display:grid;gap:.625rem;margin-top:auto}
.audience li{position:relative;padding-left:1.5rem;font-size:.9375rem;color:var(--ink)}
.audience li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--primary)}

/* ---------- trazabilidad ---------- */
.trace{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.panel{background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.panel__head{padding:1rem 1.25rem;border-bottom:1px solid var(--gray-300);background:var(--gray-100);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-700)}
.panel__body{padding:1.25rem;display:grid;gap:1rem}
.meter{display:grid;gap:.4rem}
.meter__top{display:flex;justify-content:space-between;font-size:.875rem;color:var(--gray-800)}
.meter__top b{font-weight:600;color:var(--ink)}
.bar{height:.5rem;border-radius:var(--radius-pill);background:var(--gray-200);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar i.g{background:var(--green)}
.bar i.y{background:var(--yellow)}
.bar i.r{background:var(--red)}
.bar i.p{background:var(--primary)}
.legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.25rem}
.log{display:grid;gap:.6rem;font-size:.875rem}
.log__row{display:grid;grid-template-columns:auto 1fr;gap:.6rem;color:var(--gray-800)}
.log__row b{color:var(--ink)}
.reasons{display:grid;gap:1rem;margin-top:2rem}
.reason{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.reason b{display:block;font-size:.9375rem;color:var(--ink)}
.reason span{font-size:.9375rem;color:var(--gray-700)}
.reason em{
  font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;border-radius:var(--radius-pill);
  background:var(--primary-subtle);color:var(--primary-emphasis);font-size:.8125rem;font-weight:700;
}

/* ---------- evidencia ---------- */
.study{background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.study__src{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-600);margin-bottom:.75rem}
.study b{display:block;font-size:1.5rem;line-height:1.25;color:var(--primary);letter-spacing:-.02em;margin-bottom:.5rem}
.study p{font-size:.9375rem;color:var(--gray-700)}
.study small{margin-top:.75rem;font-size:.8125rem;color:var(--gray-600)}

/* ---------- cierre ---------- */
.cta{background:var(--primary);color:var(--white);border-radius:var(--radius-xl);padding:3.5rem;text-align:center}
.cta h2{font-size:clamp(1.6rem,3.2vw,2.25rem);max-width:40ch;margin-inline:auto}
.cta p{margin:1.25rem auto 2rem;max-width:44rem;color:rgba(255,255,255,.88)}

footer{border-top:1px solid var(--gray-300);padding:2.5rem 0;background:var(--gray-100)}
.footer__inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.footer__inner p{color:var(--gray-700);font-size:.875rem}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero__inner,.trace{grid-template-columns:1fr;gap:2.5rem}
  .flow,.pillars{grid-template-columns:repeat(2,1fr)}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .topbar nav{display:none}
  .hero h1{max-width:none}
}
@media (max-width:640px){
  .section{padding:3.5rem 0}
  .hero{padding:3rem 0}
  .flow,.pillars,.stats,.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .cta{padding:2rem}
}