/* ============================================================
   LA RED QUE PIENSA — Sistema de marca (v2 · neuronal)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#111111;
  --ink-2:#1B1C1A;
  --ink-3:#252622;
  --paper:#F5F5F2;
  --paper-2:#ECEAE1;
  --sage:#7FA38D;
  --sage-ink:#557A64;     /* verde legible sobre claro */
  --sage-soft:#D8E2D8;
  --sand:#D6C6B8;
  --blue:#6FA8FF;
  --text:#1B1C1A;
  --text-dim:#6E6F69;
  --on-dark:#E8E7E0;
  --dim-dark:#9A9C94;
  --line:#DCDAD0;
  --line-dark:rgba(245,245,242,.13);
  --sans:'Archivo', system-ui, sans-serif;
  --maxw:1180px;
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px;--s7:128px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}

/* sections */
section{padding:var(--s7) 0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4);}
.dark{background:var(--ink);color:var(--on-dark);}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff;}

/* type */
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;letter-spacing:-0.01em;line-height:1.05;}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-ink);}
.dark .eyebrow{color:var(--sage);}
.eyebrow .n{opacity:.55;margin-right:.7em;font-weight:500;}
.wordmark{font-family:var(--sans);font-weight:500;text-transform:uppercase;line-height:.94;letter-spacing:.005em;color:var(--ink);}
.wordmark b{font-weight:600;}
.dark .wordmark{color:#fff;}
.kicker{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-ink);}
.dark .kicker{color:var(--sage);}
.h-sec{font-size:clamp(28px,3.6vw,46px);font-weight:600;letter-spacing:-.02em;}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--text);font-weight:400;}
.dark .lede{color:var(--on-dark);}
.muted{color:var(--text-dim);}
.dark .muted{color:var(--dim-dark);}
.sage-t{color:var(--sage-ink);}.dark .sage-t{color:var(--sage);}

/* layout helpers */
.grid{display:grid;gap:var(--s3);}
.c2{grid-template-columns:repeat(2,1fr);}
.c3{grid-template-columns:repeat(3,1fr);}
.c4{grid-template-columns:repeat(4,1fr);}
.c6{grid-template-columns:repeat(6,1fr);}
.rule{height:1px;background:var(--line);border:0;}
.dark .rule{background:var(--line-dark);}
.divider-sage{width:64px;height:2px;background:var(--sage);border:0;margin:var(--s3) 0;}

@media(max-width:920px){.c6{grid-template-columns:repeat(3,1fr);}.c4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.c2,.c3,.c4,.c6{grid-template-columns:1fr;}.wrap{padding:0 var(--s3);}section{padding:var(--s6) 0;}}

/* lockup */
.lockup{display:flex;align-items:center;gap:26px;}
.lockup .wm{display:flex;flex-direction:column;}
.lockup .tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink);margin-top:10px;font-weight:500;}
.dark .lockup .tag{color:var(--sage);}

/* icons */
.ico{display:inline-flex;width:34px;height:34px;color:var(--ink);}
.dark .ico{color:var(--on-dark);}
.ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* stat row */
.stat{display:flex;flex-direction:column;gap:14px;}
.stat .ico{color:var(--ink);}
.stat .lab{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;}

/* concept diagram */
.concept{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:var(--s3);}
.concept .op{font-size:28px;color:var(--sage);font-weight:300;}
.concept .glyph{aspect-ratio:1;display:grid;place-items:center;}
.concept .cl{text-align:center;}
.concept .cl .t{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:14px;}
.concept .cl .s{font-size:12px;color:var(--dim-dark);letter-spacing:.05em;}
@media(max-width:760px){.concept{grid-template-columns:1fr;}.concept .op{transform:rotate(90deg);justify-self:center;}}

/* significado list */
.signif{list-style:none;margin:0;padding:0;}
.signif li{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line-dark);font-size:16px;}
.signif li:first-child{border-top:0;}
.signif li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sage);flex:none;}

/* badge / versiones */
.badge{display:flex;flex-direction:column;align-items:center;gap:16px;}
.badge .circle{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;}
.badge .nm{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:center;line-height:1.5;}

/* swatches */
.sw{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;}
.sw .chip{height:96px;}
.sw .m{padding:12px 14px;}
.sw .m .nm{font-size:13px;font-weight:600;}
.sw .m .hx{font-size:12px;color:var(--text-dim);letter-spacing:.06em;margin-top:3px;}

/* materia card */
.materia{border:1px solid var(--line-dark);border-radius:8px;padding:var(--s3);background:var(--ink-2);}
.materia .ico{width:40px;height:40px;color:var(--sage);}
.materia h4{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:18px 0 0;color:#fff;}
.materia p{font-size:14px;line-height:1.5;color:var(--dim-dark);margin:10px 0 0;}

/* habilidad */
.hab{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;}
.hab .ico{width:36px;height:36px;color:var(--sage);}
.hab .lab{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;color:var(--on-dark);}

/* type specimen */
.specimen{border:1px solid var(--line);border-radius:8px;background:#fff;padding:var(--s4);}
.scale-row{display:grid;grid-template-columns:120px 1fr;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-top:1px solid var(--line);}
.scale-row:first-of-type{border-top:0;}
.scale-row .meta{font-size:12px;color:var(--text-dim);}
.scale-row .meta b{display:block;color:var(--ink);font-size:13px;}
@media(max-width:760px){.scale-row{grid-template-columns:1fr;gap:6px;}}

/* application mockups */
.app-stage{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:var(--s5) var(--s3);display:grid;place-items:center;overflow:hidden;}
.notebook{width:230px;max-width:100%;aspect-ratio:.72;background:var(--ink);border-radius:6px 12px 12px 6px;box-shadow:0 30px 60px -28px rgba(0,0,0,.5);padding:32px 26px;display:flex;flex-direction:column;justify-content:space-between;position:relative;}
.notebook::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--line-dark);}
.tote{width:210px;aspect-ratio:.84;background:var(--ink);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:relative;}
.tote::before,.tote::after{content:"";position:absolute;top:-46px;width:14px;height:70px;border:3px solid var(--ink);border-bottom:none;border-radius:14px 14px 0 0;}
.tote::before{left:48px;}.tote::after{right:48px;}
.card-b{width:240px;aspect-ratio:1.75;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 40px -24px rgba(0,0,0,.3);}
.phone{width:190px;aspect-ratio:.49;background:var(--ink);border-radius:26px;padding:12px;box-shadow:0 30px 60px -28px rgba(0,0,0,.5);}
.phone .screen{background:linear-gradient(180deg,#151614,#0d0e0c);border-radius:16px;height:100%;padding:26px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;position:relative;overflow:hidden;}

/* digital app */
.browser{border:1px solid var(--line-dark);border-radius:10px;overflow:hidden;}
.browser .bar{height:42px;background:var(--ink-3);display:flex;align-items:center;gap:7px;padding:0 16px;}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#3a3b37;}
.btn{font-family:var(--sans);font-weight:600;font-size:14px;padding:13px 24px;border-radius:100px;border:0;cursor:pointer;}
.btn-sage{background:var(--sage);color:#10231a;}
.btn-ghost{background:transparent;border:1px solid var(--line-dark);color:#fff;}

/* closing */
.closing{background:var(--sage);color:#13261c;}
.closing .big{font-size:clamp(26px,3.4vw,42px);font-weight:600;letter-spacing:-.01em;line-height:1.1;}