/* ==========================================================================
   HAVES — landing V0
   Claro por defecto, cálido, con los colores de la marca. El oscuro queda
   como alternativa, con el botón de la barra. Identidad todavía provisional:
   lo decidido de verdad vive en /brand.
   ========================================================================== */

@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:300 500; font-display:swap;
  src:url('fonts/newsreader.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('fonts/nunito.woff2') format('woff2');
}
@font-face{
  font-family:'Sono'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('fonts/sono.woff2') format('woff2');
}

/* ------------------------------------------------------- tokens: claro --- */
/* El claro es el default deliberado de la marca: no sigue al sistema. */
:root{
  --bg:#F6F2E8;
  --bg-alt:#EFE8D8;
  --surface:#FCFAF4;
  --surface-2:#F1EBDC;
  --line:rgba(43,58,46,.13);
  --line-strong:rgba(43,58,46,.26);

  --ink:#242B20;
  --dim:#5C6353;
  --faint:rgba(36,43,32,.5);

  --accent:#2B3A2E;
  --accent-hover:#384B3B;
  --accent-ink:#F6F2E8;
  --eyebrow:#A9552C;

  --sage:#6F7A5C;
  --terra:#C15A34;
  --sand:#CBBBA4;
  --pine:#2B3A2E;

  --icon:#2B3A2E;
  --thumb-ink:#2B3A2E;
  --soft:rgba(43,58,46,.05);
  --soft-2:rgba(43,58,46,.09);
  --halo-a:rgba(111,122,92,.22);
  --halo-b:rgba(193,90,52,.1);

  --phone-body:#E8E1CF;
  --phone-edge:rgba(43,58,46,.18);
  --phone-screen:#FCFAF4;
  --phone-shadow:0 34px 70px -34px rgba(43,58,46,.45);

  --chip-have-bg:rgba(111,122,92,.16);
  --chip-have-line:rgba(111,122,92,.55);
  --chip-want-bg:rgba(193,90,52,.13);
  --chip-want-line:rgba(193,90,52,.5);
  --edge:rgba(43,58,46,.18);
  --edge-on:rgba(111,122,92,.65);
  --node-face:#FCFAF4;
  --node-ring:rgba(43,58,46,.3);

  --watermark:rgba(43,58,46,.07);
  --foot-a:#F6F2E8;
  --foot-b:#EAE6D2;
  --foot-c:#DFE3CE;

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --ui:'Nunito',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Sono',ui-monospace,'SF Mono',Menlo,monospace;

  --maxw:1180px;
  --gut:clamp(20px,5vw,56px);
  --sect:clamp(76px,10vw,144px);
  --r:14px;
}

/* ------------------------------------------------------ tokens: oscuro --- */
:root[data-theme="dark"]{
  --bg:#0F0E0B;
  --bg-alt:#141310;
  --surface:#1B1A15;
  --surface-2:#22211A;
  --line:rgba(239,234,221,.11);
  --line-strong:rgba(239,234,221,.22);

  --ink:#EFEADD;
  --dim:#A7A294;
  --faint:rgba(239,234,221,.45);

  --accent:#D8C3A0;
  --accent-hover:#E6D3B2;
  --accent-ink:#17160F;
  --eyebrow:#C4A87A;

  --sage:#8A9A6E;
  --terra:#D4703F;
  --sand:#CBBBA4;
  --pine:#3E5140;

  --icon:#EFEADD;
  --thumb-ink:#CBBBA4;
  --soft:rgba(239,234,221,.05);
  --soft-2:rgba(239,234,221,.09);
  --halo-a:rgba(62,81,64,.5);
  --halo-b:rgba(184,156,110,.14);

  --phone-body:#201F18;
  --phone-edge:rgba(239,234,221,.16);
  --phone-screen:#131209;
  --phone-shadow:0 40px 90px -30px rgba(0,0,0,.9);

  --chip-have-bg:rgba(138,154,110,.2);
  --chip-have-line:rgba(138,154,110,.55);
  --chip-want-bg:rgba(212,112,63,.17);
  --chip-want-line:rgba(212,112,63,.5);
  --edge:rgba(239,234,221,.14);
  --edge-on:rgba(216,195,160,.45);
  --node-face:#22211A;
  --node-ring:rgba(239,234,221,.28);

  --watermark:rgba(239,234,221,.055);
  --foot-a:#0F0E0B;
  --foot-b:#16190F;
  --foot-c:#1A2016;
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ui); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--terra); outline-offset:3px; border-radius:3px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ----------------------------------------------------------- tipografía -- */
h1,h2,h3{
  font-family:var(--display); font-weight:300; line-height:1.04;
  letter-spacing:-.015em; margin:0; text-wrap:balance; color:var(--ink);
}
h1{font-size:clamp(40px,6.2vw,70px)}
h2{font-size:clamp(32px,5vw,56px)}
h3{font-size:clamp(21px,2.4vw,27px); line-height:1.18}
p{margin:0}

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--eyebrow);
  margin:0; line-height:1.7;
}
.lede{font-size:clamp(17px,1.45vw,19.5px); color:var(--dim); line-height:1.68; max-width:52ch}

/* ---------------------------------------------------------------- layout -- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
section{padding-block:var(--sect); position:relative}
.band{background:var(--bg-alt)}
.shead{display:flex; flex-direction:column; gap:18px; max-width:44ch}
.shead .eyebrow{margin-bottom:-4px}

/* ------------------------------------------------------------- wordmark -- */
.mark{display:flex; align-items:center; gap:11px}
.mark .word{
  font-family:var(--ui); font-weight:700; font-size:18px; letter-spacing:-.018em;
  color:var(--ink); text-transform:lowercase; line-height:1;
}
.mark svg{flex:none}

/* --------------------------------------------------------------- botones -- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:var(--accent-ink); border-radius:999px;
  padding:14px 26px; font-weight:700; font-size:15.5px; letter-spacing:-.005em;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), background .2s ease;
}
.btn:hover{background:var(--accent-hover); transform:translateY(-1px)}
.btn .arw{stroke:currentColor; fill:none; transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.btn:hover .arw{transform:translateX(3px)}
.btn-ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line-strong); padding:13px 24px; font-weight:600;
}
.btn-ghost:hover{background:var(--soft); border-color:var(--sage)}
@media (prefers-reduced-motion:reduce){.btn,.btn .arw{transition:none}}

/* ------------------------------------------------------------------ nav -- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s ease;
}
.nav.stuck{border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; gap:24px; height:72px}
.nav .links{display:flex; flex-wrap:wrap; gap:8px 26px; margin-left:10px}
.nav .links a{
  font-size:15px; color:var(--dim); transition:color .18s ease;
  padding-bottom:2px; border-bottom:1.5px solid transparent;
}
.nav .links a:hover{color:var(--ink)}
.nav .links a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--sage)}
.nav .right{margin-left:auto; display:flex; align-items:center; gap:10px}
.nav .btn{padding:11px 20px; font-size:14.5px}

.lang{display:flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden}
.lang button{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  padding:6px 11px; color:var(--faint);
}
.lang button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.icon-btn{
  display:grid; place-items:center; width:34px; height:34px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--dim);
}
.icon-btn svg{stroke:currentColor; fill:none}
.icon-btn:hover{color:var(--ink); background:var(--soft)}
@media (max-width:860px){
  .nav .wrap{
    height:auto; flex-wrap:wrap; gap:10px 14px;
    padding-top:11px; padding-bottom:11px;
  }
  .nav .right{margin-left:auto}
  .nav .links{
    order:3; width:100%; margin-left:0; gap:20px;
    padding-top:9px; border-top:1px solid var(--line);
  }
  .nav .links a{font-size:14px}
}

/* ------------------------------------------------------------- vistas --- */
/* La página es una sola, pero se muestra de a una vista por vez para que no haya
   que scrollear eternamente. Sin JS se ven todas, que es el fallback correcto. */
.js [data-view]{display:none}
.js [data-view].on{display:block}

/* ----------------------------------------------------------------- hero -- */
.hero{
  padding-top:clamp(48px,6.5vw,88px); padding-bottom:0;
  background:
    radial-gradient(120% 90% at 78% 6%, var(--halo-a), transparent 62%),
    radial-gradient(90% 70% at 6% 0%, var(--halo-b), transparent 60%);
}
.hero .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(32px,5vw,64px); align-items:center;
}
.hero-copy{display:flex; flex-direction:column; gap:26px; padding-bottom:clamp(60px,8vw,110px)}
.hero-copy .eyebrow{max-width:32ch}
.hero h1 em{font-style:italic; color:var(--terra)}
.hero-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px}
.hero-note{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:8px}
  .hero-copy{padding-bottom:40px}
}

/* ------------------------------------------------------- phone mockups --- */
.phones{display:flex; justify-content:center; align-items:flex-end; gap:clamp(10px,2vw,22px); padding-bottom:clamp(40px,6vw,80px)}
.phone{
  width:clamp(168px,21vw,246px); flex:none;
  background:var(--phone-body);
  border:1px solid var(--phone-edge); border-radius:30px; padding:9px;
  box-shadow:var(--phone-shadow);
}
.phone.back{transform:translateY(26px) scale(.93); opacity:.94}
.phone .screen{
  background:var(--phone-screen); border-radius:23px; overflow:hidden;
  display:flex; flex-direction:column; min-height:330px;
}
.phone .status{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 15px 3px; font-family:var(--mono); font-size:8.5px; color:var(--faint);
}
.phone .ptitle{
  text-align:center; padding:6px 0 10px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink);
}
.phone .tabs{display:flex; gap:4px; padding:0 13px 11px}
.phone .tab{
  flex:1; text-align:center; padding:6px 0; border-radius:8px;
  font-size:10.5px; font-weight:700; color:var(--faint);
}
.phone .tab.on{background:var(--soft-2); color:var(--ink)}
.phone .grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 13px}
.phone .bar{margin-top:auto; display:flex; justify-content:space-around; padding:12px 0 13px; border-top:1px solid var(--line)}
.phone .bar i{width:13px; height:13px; border-radius:4px; background:var(--soft-2)}
.phone .bar i.on{background:var(--sage)}

.item{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:9px; display:flex; flex-direction:column; gap:7px;
}
.item .thumb{
  aspect-ratio:1/1; border-radius:6px; display:grid; place-items:center;
  background:linear-gradient(145deg,rgba(203,187,164,.35),rgba(203,187,164,.12));
}
.item .thumb svg{width:44%; height:44%; stroke:var(--thumb-ink); fill:none; opacity:.95}
.item b{font-size:10.5px; font-weight:700; letter-spacing:-.01em}
.item span{font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}

.detail{padding:0 13px; display:flex; flex-direction:column; gap:10px}
.detail .hero-img{
  aspect-ratio:4/3; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(145deg,rgba(111,122,92,.3),rgba(203,187,164,.14));
}
.detail .hero-img svg{width:38%; height:38%; stroke:var(--thumb-ink); fill:none}
.detail h4{font-family:var(--display); font-weight:400; font-size:15px; margin:0; line-height:1.2}
.detail .meta{font-family:var(--mono); font-size:8px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint)}
.detail .line{font-size:10px; color:var(--dim); line-height:1.5}
.detail .cta{
  margin-top:2px; background:var(--accent); color:var(--accent-ink); text-align:center;
  border-radius:999px; padding:8px 0; font-size:10.5px; font-weight:800;
}

/* ------------------------------------------------------------- problema -- */
.problem .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,80px); align-items:center}
.problem-copy{display:flex; flex-direction:column; gap:22px}
.problem-copy p{color:var(--dim); max-width:46ch}
.problem-copy strong{color:var(--ink); font-weight:600}
@media (max-width:860px){.problem .wrap{grid-template-columns:1fr}}

.idle{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:radial-gradient(90% 70% at 30% 0%, var(--halo-a), transparent 70%), var(--surface);
  border:1px solid var(--line); padding:clamp(18px,3vw,30px);
}
.idle-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.4vw,14px)}
.idle-cell{
  aspect-ratio:1/1; border-radius:10px; display:grid; place-items:center;
  background:var(--soft); border:1px solid var(--line);
}
.idle-cell svg{width:42%; height:42%; stroke:var(--icon); fill:none; opacity:.26}
.idle-cell.lit{background:rgba(203,187,164,.3); border-color:rgba(193,90,52,.3)}
.idle-cell.lit svg{opacity:1; stroke:var(--terra)}
.idle-cap{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:18px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.idle-cap b{color:var(--terra); font-size:13px; letter-spacing:.06em; font-variant-numeric:tabular-nums}
@media (max-width:420px){.idle-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------------------------------------------------------------- red ---- */
.network{background:var(--bg-alt)}
.network .wrap{display:flex; flex-direction:column; gap:clamp(28px,4vw,46px)}
.net-head{display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap}
.net-stage{
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:radial-gradient(70% 70% at 50% 45%, var(--halo-a), transparent 72%), var(--surface);
  padding:clamp(14px,2.5vw,26px);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.net-stage svg{width:100%; min-width:620px; height:auto; display:block}
.net-toggle{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.net-state{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.net-hint{display:none; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
@media (max-width:700px){.net-hint{display:block}}

.edge{stroke:var(--edge); stroke-width:1; fill:none; transition:stroke .7s ease, stroke-width .7s ease}
.node-ring{fill:none; stroke:var(--node-ring); stroke-width:1}
.node-face{fill:var(--node-face)}
.node-label{font-family:var(--ui); font-size:11px; font-weight:700; fill:var(--ink); text-anchor:middle}
.chip{opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.6); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1)}
.chip rect{stroke-width:1}
.chip.have rect{fill:var(--chip-have-bg); stroke:var(--chip-have-line)}
.chip.want rect{fill:var(--chip-want-bg); stroke:var(--chip-want-line)}
.chip text{font-family:var(--ui); font-size:9.6px; font-weight:600; fill:var(--ink)}
.chip .dot{stroke:none}
.chip.have .dot{fill:var(--sage)}
.chip.want .dot{fill:var(--terra)}
.net-stage[data-on="1"] .chip{opacity:1; transform:scale(1)}
.net-stage[data-on="1"] .edge{stroke:var(--edge-on); stroke-width:1.2}
@media (prefers-reduced-motion:reduce){.chip,.edge{transition:none}}

.legend{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
.legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:7px}
.legend .h i{background:var(--sage)}
.legend .w i{background:var(--terra)}

/* ------------------------------------------------- haves & wants -------- */
.hw{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); margin-top:clamp(30px,4vw,48px)}
.hw-card{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,3vw,34px);
  background:var(--surface); display:flex; flex-direction:column; gap:16px;
}
.hw-card .tagl{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.hw-card.h .tagl{color:var(--sage)}
.hw-card.w .tagl{color:var(--terra)}
.hw-card p{color:var(--dim); font-size:15.5px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
.chips span{
  border-radius:999px; padding:7px 13px; font-size:13px; font-weight:600;
  border:1px solid var(--line-strong); color:var(--ink);
}
.hw-card.h .chips span{background:var(--chip-have-bg); border-color:var(--chip-have-line)}
.hw-card.w .chips span{background:var(--chip-want-bg); border-color:var(--chip-want-line)}
@media (max-width:760px){.hw{grid-template-columns:1fr}}

/* ---------------------------------------------------------- cómo funciona */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px); margin-top:clamp(36px,5vw,58px)}
.step{display:flex; flex-direction:column; gap:16px}
.step .frame{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:14px; overflow:hidden; height:272px;
}
.step .num{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--eyebrow)}
.step h3{font-size:clamp(18px,1.6vw,21px)}
.step p{font-size:14.5px; color:var(--dim); line-height:1.58}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){
  .steps{grid-template-columns:1fr; gap:34px}
  .step .frame{height:auto}
}

.mini{display:flex; flex-direction:column; gap:9px}
.mini .row{display:flex; align-items:center; gap:9px}
.mini .av{width:30px; height:30px; border-radius:50%; background:var(--sage); flex:none; display:grid; place-items:center; font-size:11px; font-weight:800; color:#F6F2E8}
.mini .nm{font-size:12px; font-weight:700}
.mini .sb{font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.mini .list{display:flex; flex-direction:column; gap:6px; margin-top:2px}
.mini .li{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--soft); border-radius:7px; padding:7px 10px; font-size:11.5px}
.mini .li b{font-family:var(--mono); font-size:10px; color:var(--terra); flex:none}
.mini .card{background:var(--soft); border-radius:9px; padding:9px; display:flex; flex-direction:column; gap:7px}
.mini .card .thumb{aspect-ratio:16/9; border-radius:6px; background:linear-gradient(145deg,rgba(203,187,164,.35),rgba(203,187,164,.1)); display:grid; place-items:center}
.mini .card .thumb svg{width:34%; stroke:var(--thumb-ink); fill:none; opacity:.95}
.mini .post{background:var(--accent); color:var(--accent-ink); border-radius:999px; text-align:center; padding:6px 0; font-size:10.5px; font-weight:800}
.mini .search{background:var(--soft); border-radius:999px; padding:7px 12px; font-size:10.5px; color:var(--faint); display:flex; gap:7px; align-items:center}
.mini .pills{display:flex; gap:5px; flex-wrap:wrap}
.mini .pills span{font-size:9.5px; padding:4px 9px; border-radius:999px; border:1px solid var(--line-strong); color:var(--dim)}
.mini .pills span.on{background:var(--chip-have-bg); border-color:transparent; color:var(--ink)}
.mini .msg{max-width:88%; padding:8px 11px; border-radius:12px; font-size:11px; line-height:1.4}
.mini .msg.them{background:var(--soft-2); border-bottom-left-radius:4px}
.mini .msg.me{background:var(--chip-have-bg); align-self:flex-end; border-bottom-right-radius:4px}
.mini .thread{display:flex; flex-direction:column; gap:7px}


/* ------------------------------------------- el circulo que se abre ------ */
.rings{
  margin-top:clamp(28px,4vw,46px);
  border:1px solid var(--line); border-radius:var(--r);
  background:radial-gradient(60% 60% at 50% 55%, var(--halo-a), transparent 72%), var(--surface);
  padding:clamp(12px,2vw,24px);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.rings svg{width:100%; min-width:560px; height:auto; display:block}

/* Cada anillo es un grado de confianza: el de adentro es firme, los de afuera
   se van soltando porque todavía no están abiertos. */
.ring{fill:none}
.ring.r1{stroke:var(--sage); stroke-width:2.2}
.ring.r2{stroke:var(--terra); stroke-width:1.4; stroke-dasharray:11 7; opacity:.7}
.ring.r3{stroke:var(--sand); stroke-width:1.2; stroke-dasharray:6 9}
.ring.r4{stroke:var(--line-strong); stroke-width:1.1; stroke-dasharray:2 11}

.pers.r1{fill:var(--sage)}
.pers.r2{fill:var(--terra); opacity:.7}
.pers.r3{fill:var(--sand); opacity:.85}
.pers.r4{fill:var(--dim); opacity:.4}

.yo{fill:var(--pine)}
.yo-t{font-family:var(--ui); font-size:13px; font-weight:700; fill:#F6F2E8; text-anchor:middle}

.tag rect{fill:var(--surface); stroke:var(--line-strong); stroke-width:1}
.tag text{font-family:var(--mono); font-size:11px; font-weight:600; fill:var(--dim); text-anchor:middle; letter-spacing:.04em}
.tag.r1 rect{stroke:var(--sage)}
.tag.r1 text{fill:var(--ink)}

.grow-note{
  margin-top:clamp(22px,3vw,34px); max-width:56ch;
  font-family:var(--display); font-weight:300; font-size:clamp(19px,2.1vw,25px);
  line-height:1.35; color:var(--ink);
}

/* ---------------------------------------------------- mecánica abierta --- */
.open-mech{
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:linear-gradient(135deg, var(--halo-a), var(--surface) 70%);
  padding:clamp(28px,4.5vw,56px); display:flex; flex-direction:column; gap:22px;
}
.open-mech h2{max-width:20ch}
.verbs{display:flex; flex-wrap:wrap; gap:10px}
.verbs span{
  font-family:var(--display); font-size:clamp(19px,2.2vw,26px); font-style:italic;
  padding:8px 20px; border-radius:999px; border:1px dashed var(--line-strong); color:var(--ink);
}
.verbs span:nth-child(2n){color:var(--terra)}

/* ------------------------------------------------------------- pilares --- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(30px,4vw,48px)}
.pillar{display:flex; flex-direction:column; gap:12px; padding-top:18px; border-top:1.5px solid var(--sage)}
.pillar h3{font-family:var(--ui); font-size:17.5px; font-weight:700; letter-spacing:-.01em; line-height:1.3}
.pillar p{font-size:14.5px; color:var(--dim); line-height:1.6}
@media (max-width:820px){.pillars{grid-template-columns:1fr; gap:26px}}

/* --------------------------------------------------------------- valores -- */
.values{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,36px)}
.value{display:flex; flex-direction:column; gap:10px}
.value svg{width:24px; height:24px; stroke:var(--sage); fill:none}
.value h3{font-size:19px; font-family:var(--ui); font-weight:700; letter-spacing:-.01em}
.value p{font-size:14px; color:var(--dim); line-height:1.55}
@media (max-width:820px){.values{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------------------ cta -- */
.cta-final{
  background:radial-gradient(80% 120% at 50% 110%, var(--halo-a), transparent 65%), var(--bg-alt);
  text-align:center;
}
.cta-final .wrap{display:flex; flex-direction:column; align-items:center; gap:24px}
.cta-final h2{max-width:16ch}
.cta-final .lede{text-align:center}
.cta-final .hero-note{margin-top:-8px}
@media (max-width:520px){
    }

/* ------------------------------------------------------------------ faq -- */
.faq-list{margin-top:clamp(26px,4vw,44px); border-top:1px solid var(--line); max-width:840px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 0; text-align:left; font-size:clamp(17px,1.7vw,20px); font-weight:600;
}
.faq-q .ic{flex:none; transition:transform .3s cubic-bezier(.2,.8,.3,1); color:var(--eyebrow)}
.faq-item[data-open="1"] .faq-q .ic{transform:rotate(45deg)}
.faq-a{overflow:hidden; height:0; transition:height .3s cubic-bezier(.2,.8,.3,1)}
.faq-a .inner{padding:0 0 24px; color:var(--dim); font-size:15.5px; max-width:64ch; line-height:1.65}
@media (prefers-reduced-motion:reduce){.faq-q .ic,.faq-a{transition:none}}

/* --------------------------------------------------------------- footer -- */
footer{
  position:relative; overflow:hidden; padding-top:var(--sect);
  background:linear-gradient(180deg, var(--foot-a) 0%, var(--foot-b) 55%, var(--foot-c) 100%);
}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr); gap:clamp(26px,4vw,50px); position:relative; z-index:2}
.foot-claim{font-family:var(--display); font-size:clamp(20px,2.4vw,27px); line-height:1.3; font-weight:300; max-width:24ch}
.foot-col h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; font-weight:600}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot-col a{font-size:14.5px; color:var(--dim)}
.foot-col a:hover{color:var(--ink)}
.watermark{
  position:relative; z-index:1; margin-top:clamp(40px,7vw,90px);
  font-family:var(--ui); font-weight:700; text-transform:lowercase;
  font-size:clamp(90px,22vw,290px); line-height:.8; letter-spacing:-.045em;
  color:var(--watermark); user-select:none; white-space:nowrap;
}
.foot-base{
  border-top:1px solid var(--line); margin-top:clamp(18px,3vw,34px);
  padding:22px 0 30px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
  position:relative; z-index:2;
}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-claim{grid-column:1/-1}}

/* --------------------------------------------------- reveal al scrollear -- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}