/* ============================================================
   VOXEO · sistema de diseño
   Papel y tinta para la escuela como es hoy.
   Azul eléctrico ÚNICAMENTE para la capa de IA.
   ============================================================ */

:root{
  --paper:#F5F1E8;
  --paper-2:#FBF9F4;
  --white:#FFFFFF;
  --ink:#12100E;
  --ink-2:#3A342C;
  --ink-3:#6B6156;
  --ink-4:#9A9084;
  --rule:#E3DCCD;
  --rule-soft:rgba(18,16,14,.08);

  --ai:#2148E5;
  --ai-2:#5B7CF5;
  --ai-wash:#EAEEFE;
  --ai-line:#BFCCFA;

  --navy:#011744;
  --purple:#6D28D9;
  --amber:#D9631A;
  --gold:#D2B352;
  --hot:#C2452C;
  --hot-wash:#FBEDE9;
  --good:#2F7D4F;

  --serif:"Fraunces","Iowan Old Style","Hoefler Text",Palatino,"Palatino Linotype",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --sh-1:0 1px 2px rgba(18,16,14,.05);
  --sh-2:0 1px 2px rgba(18,16,14,.04),0 8px 20px -10px rgba(18,16,14,.16);
  --sh-3:0 1px 2px rgba(18,16,14,.04),0 10px 24px -12px rgba(18,16,14,.16),0 30px 60px -30px rgba(18,16,14,.22);
  --sh-ai:0 10px 26px -14px rgba(33,72,229,.55),0 28px 56px -30px rgba(33,72,229,.4);

  --r-s:8px; --r-m:14px; --r-l:22px;
  --pad:clamp(20px,5vw,64px);
  --max:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ai);color:#fff}

/* ---------- subrayados de marcador ---------- */
.hl-p,.hl-o{padding:.06em .12em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-p{background:var(--purple);color:#fff;font-weight:600;box-shadow:0 0 0 1px var(--purple)}
.hl-o{background:var(--gold);color:#3A2A05;font-weight:700;box-shadow:0 0 0 1px var(--gold)}
.band.ink .hl-p{background:#8B5CF6;color:#fff;box-shadow:0 0 0 1px #8B5CF6}
.band.ink .hl-o{background:var(--gold);color:#28200A;box-shadow:0 0 0 1px var(--gold)}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.022em;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,74px);line-height:1.02;letter-spacing:-.032em}
h2{font-size:clamp(30px,4vw,54px);line-height:1.06;letter-spacing:-.028em}
h3{font-size:clamp(20px,2.1vw,27px);line-height:1.2}
h4{font-size:19px;line-height:1.3}
p{margin:0}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--ink-3);max-width:62ch;text-wrap:pretty}
.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ai);display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--ai);flex:none;border-radius:2px}
.eyebrow.hot{color:var(--hot)}.eyebrow.hot::before{background:var(--hot)}
.eyebrow.pale{color:var(--ai-2)}.eyebrow.pale::before{background:var(--ai-2)}
.eyebrow.plain{color:var(--ink-4)}.eyebrow.plain::before{background:var(--ink-4)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
.band{padding-block:clamp(64px,8vw,124px)}
.band.paper{background:var(--paper)}
.band.white{background:var(--white)}
.band.ink{background:var(--navy);color:#C6CEE0}
.band.ink h1,.band.ink h2,.band.ink h3{color:var(--white)}
.band.ink .lead{color:#AEB8CE}
.hr{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s,border-color .18s,color .18s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--ink);color:var(--white);box-shadow:var(--sh-2)}
.btn-primary:hover{box-shadow:var(--sh-3);transform:translateY(-1px)}
.btn-ai{background:var(--ai);color:#fff;box-shadow:var(--sh-ai)}
.btn-ai:hover{transform:translateY(-1px);background:#1B3ECB}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink-3);background:rgba(18,16,14,.03)}
.band.ink .btn-ghost{color:var(--paper-2);border-color:rgba(255,255,255,.22)}
.band.ink .btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4)}
.band.ink .btn-primary{background:var(--white);color:var(--ink)}
.btn-lg{padding:16px 28px;font-size:16px}
.arrow{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- navegación ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(245,241,232,.72);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.stuck{border-bottom-color:var(--rule);background:rgba(245,241,232,.88)}
.nav .wrap{display:flex;align-items:center;gap:12px;height:66px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:800;
  font-size:19px;letter-spacing:.02em;text-decoration:none;color:var(--navy);white-space:nowrap}
.brand img{width:30px;height:30px;display:block;flex:none}
.foot .brand{color:#fff}
@media (max-width:420px){.brand{font-size:17px;gap:7px}.brand img{width:24px;height:24px}}
.navlinks{display:flex;gap:4px;margin-left:26px;flex:1}
.navlinks a{
  font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:8px 12px;border-radius:999px;transition:background .18s,color .18s;
}
.navlinks a:hover{background:rgba(18,16,14,.055);color:var(--ink)}
.navlinks a[aria-current]{color:var(--ink);font-weight:600}
.navtail{display:flex;align-items:center;gap:10px}
.lang{
  display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;
  font-size:12px;font-weight:700;letter-spacing:.04em;background:var(--white)
}
.lang a{padding:6px 11px;text-decoration:none;color:var(--ink-4);transition:background .18s,color .18s}
.lang a[aria-current]{background:var(--ink);color:var(--white)}
.lang a:not([aria-current]):hover{background:rgba(18,16,14,.05);color:var(--ink)}
.burger{display:none;border:1px solid var(--rule);background:var(--white);border-radius:10px;width:40px;height:38px;cursor:pointer}
.burger i{display:block;width:16px;height:1.6px;background:var(--ink);margin:3.5px auto;border-radius:2px}

/* ---------- tarjetas ---------- */
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);box-shadow:var(--sh-1)}
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* las tres ramas: columnas editoriales, sin caja ni esquinas redondeadas */
.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.6vw,58px);margin-top:52px;border-top:1px solid var(--ink)}
.branch{
  display:flex;flex-direction:column;padding:26px 0 4px;
  text-decoration:none;color:inherit;position:relative;background:none;
}
.branch::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ai);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)
}
.branch:hover::before{transform:scaleX(1)}
.branch:hover h3{color:var(--ai)}
.branch h3{transition:color .25s}
.branch .who{font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--ai);font-weight:600}
.branch h3{margin:14px 0 10px;font-size:23px}
.branch p{color:var(--ink-3);font-size:15.5px;line-height:1.58;flex:1}
.branch ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:7px}
.branch li{font-size:14px;color:var(--ink-2);padding-left:20px;position:relative}
.branch li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--ai-line)}
.branch .go{margin-top:24px;padding-top:16px;border-top:1px solid var(--rule);font-size:14.5px;font-weight:600;color:var(--ai);display:flex;align-items:center;gap:6px}
.branch:hover .go .arrow{transform:translateX(3px)}
.branch .go .arrow{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
@media (max-width:1000px){.branches{grid-template-columns:1fr;gap:0}
 .branch{border-bottom:1px solid var(--rule);padding:24px 0 22px}
 .branch:last-child{border-bottom:0}}

/* ---------- listas de funciones ---------- */
.feat{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--rule)}
.feat:last-child{border-bottom:1px solid var(--rule)}
.feat .num{font-family:var(--mono);font-size:12px;color:var(--ai);font-weight:600;padding-top:4px;min-width:26px}
.feat h4{margin-bottom:6px}
.feat p{color:var(--ink-3);font-size:15.5px;line-height:1.55}

/* ---------- reveal al hacer scroll (aditivo, nunca oculta) ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.on{opacity:1;transform:none}
.no-js .rv,html:not(.js) .rv{opacity:1;transform:none}

/* ---------- "ver otra vez": las animaciones terminan y se quedan quietas ---------- */
.replay{margin-top:18px;font-size:13px;color:var(--ink-4);display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;font-family:var(--sans);cursor:pointer;padding:0;
  opacity:0;pointer-events:none;transition:opacity .5s,color .2s}
.replay.on{opacity:1;pointer-events:auto}
.replay:hover{color:var(--ai)}
.replay span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--rule);font-size:11px;transition:border-color .2s}
.replay:hover span{border-color:var(--ai)}
.band.ink .replay{color:#9C9388}.band.ink .replay span{border-color:rgba(255,255,255,.22)}

/* ---------- pie ---------- */
.foot{background:var(--navy);color:#8E99B4;padding-block:56px 40px;font-size:14px}
.foot a{color:#C6CEE0;text-decoration:none}
.foot a:hover{color:#fff}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot h5{font-family:var(--sans);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 14px;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot .legal{padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

@media (max-width:1000px){
  .g3,.g4{grid-template-columns:1fr 1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .navtail .btn-ai{display:none}
  .nav .wrap{gap:8px}
  .btn{white-space:normal;text-align:center}
  .btn-lg{padding:15px 22px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .navlinks{display:none}
  .burger{display:block}
  .navlinks.open{
    display:grid;position:absolute;top:66px;left:0;right:0;margin:0;padding:10px var(--pad) 18px;
    background:var(--paper-2);border-bottom:1px solid var(--rule);gap:2px
  }
  .navlinks.open a{padding:11px 12px;font-size:16px}
  .foot .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}