/* ============================================================
   JN ∴  — Sistema de diseño
   Dark-first · editorial + tech · Bodoni / Geist / Geist Mono
   Tokens del doc 03 §2 · motion del doc 03 §6 / doc 05 §4.5
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* color */
  --ink:#0E0E12;
  --ink-soft:#15151B;
  --ink-2:#1C1C24;
  --ink-3:#23232D;
  --bone:#F4F0E8;
  --bone-2:#EAE4D6;
  --gold:#E3A53E;
  --gold-deep:#C9871F;
  --gold-soft:rgba(227,165,62,.14);
  --muted:#B5AE9F;
  --lead:#CFC8BA;
  --line:rgba(244,240,232,.12);
  --hair:rgba(244,240,232,.10);
  --hair-strong:rgba(244,240,232,.18);
  --ok:#3DD68C;
  --wa:#25D366;
  --tg:#2AABEE;

  /* theme-adaptive (default = dark) */
  --bg:var(--ink);
  --fg:var(--bone);

  /* type */
  --display:"Bodoni Moda", "Times New Roman", serif;
  --sans:"Geist","Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* radius / shadow */
  --r-card:16px;
  --r-sm:10px;
  --r-pill:999px;
  --shadow-1:0 1px 0 rgba(244,240,232,.04) inset, 0 18px 50px -28px rgba(0,0,0,.7);
  --shadow-2:0 24px 70px -32px rgba(0,0,0,.8);

  /* motion */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --t-micro:140ms;
  --t-enter:360ms;
  --t-scroll:480ms;

  /* layout */
  --maxw:1200px;
  --pad:clamp(20px,5vw,64px);
  --sect:clamp(72px,9vw,128px);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-feature-settings:"tnum" 1,"cv01" 1,"ss01" 1;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
li{text-wrap:pretty}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,textarea{font:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* tabular numerals helper */
.tnum{font-variant-numeric:tabular-nums}

/* ---------- TYPE ---------- */
.display{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
h1,h2,h3{margin:0}
.h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,6.2vw,76px);line-height:1.0;letter-spacing:-0.015em;text-wrap:balance}
.h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.6vw,52px);line-height:1.04;letter-spacing:-0.01em;text-wrap:balance}
.h3{font-family:var(--display);font-weight:500;font-size:clamp(23px,2.6vw,32px);line-height:1.1}
.lead{font-size:clamp(17px,1.9vw,22px);line-height:1.55;color:var(--lead);text-wrap:pretty}
.body{color:var(--muted);text-wrap:pretty}
.italic{font-style:italic}
em{font-style:italic;color:var(--lead)}
strong{font-weight:600;color:var(--fg)}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"∴";
  font-family:var(--display);
  color:var(--gold);
  font-size:15px;
  letter-spacing:0;
  transform:translateY(1px);
}
.eyebrow.plain::before{display:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.gold{color:var(--gold)}
.serif{font-family:var(--display)}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sect);position:relative}
.section--soft{background:var(--ink-soft)}
.section--bone{background:var(--bone);color:var(--ink)}
.section--bone .body{color:#5A554A}
.section--bone .lead{color:#3a362e}
.section--bone .eyebrow{color:#6b6557}
.section--bone .hair-divider{border-color:rgba(14,14,18,.12)}
.divider{height:1px;background:var(--hair);border:0;margin:0}
.stack{display:flex;flex-direction:column}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.gap-24{gap:24px}.gap-32{gap:32px}.gap-48{gap:48px}.gap-64{gap:64px}
.row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.center{text-align:center}
.measure{max-width:60ch}
.measure-tight{max-width:48ch}

/* ---------- BUTTONS (6 states) ---------- */
.btn{
  --bg-btn:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;
  border-radius:var(--r-pill);
  font-weight:560;
  font-size:15.5px;
  line-height:1;
  letter-spacing:-0.005em;
  position:relative;
  transition:transform var(--t-micro) var(--ease-out),
             background-color var(--t-micro) var(--ease-out),
             border-color var(--t-micro) var(--ease-out),
             color var(--t-micro) var(--ease-out),
             box-shadow var(--t-micro) var(--ease-out);
  will-change:transform;
}
.btn .arw{transition:transform var(--t-enter) var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.btn--primary{background:var(--gold);color:#1A1206;box-shadow:0 8px 22px -16px rgba(0,0,0,.55)}
.btn--primary:hover{background:var(--gold-deep)}

.btn--ghost{border:1px solid var(--hair-strong);color:var(--fg)}
.btn--ghost:hover{border-color:var(--gold);color:var(--fg);background:var(--gold-soft)}

.btn--text{padding:10px 4px;color:var(--fg)}
.btn--text:hover{color:var(--gold)}

.btn--sm{padding:10px 16px;font-size:14px}
.btn--lg{padding:17px 28px;font-size:16.5px}
.btn--block{width:100%}
.section--bone .btn--ghost{border-color:rgba(14,14,18,.18);color:var(--ink)}
.section--bone .btn--ghost:hover{border-color:var(--gold-deep)}

/* link with animated underline */
.link-arrow{display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-weight:540;font-size:15px}
.link-arrow .arw{transition:transform var(--t-enter) var(--ease-out)}
.link-arrow:hover .arw{transform:translateX(4px)}

/* reassurance row */
.reassure{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;font-family:var(--mono);letter-spacing:.01em}
.reassure span{display:inline-flex;align-items:center;gap:7px}
.reassure svg{color:var(--gold)}

/* ---------- CARDS ---------- */
.card{
  background:var(--ink-soft);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  padding:clamp(22px,3vw,32px);
  position:relative;
  transition:transform var(--t-enter) var(--ease-out),
             border-color var(--t-enter) var(--ease-out),
             background-color var(--t-enter) var(--ease-out);
}
.card--raise:hover{transform:translateY(-4px);border-color:var(--hair-strong)}

/* ---------- ICONS (un solo set: 1.6 stroke, round) ---------- */
.ico{width:24px;height:24px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:30px;height:30px}
.ico-chip{
  width:46px;height:46px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--hair);background:var(--ink-2);color:var(--gold);
}

/* ---------- PILL / BADGE / CHIP ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--hair);font-size:12.5px;color:var(--muted);
  font-family:var(--mono);letter-spacing:.02em;
}
.badge-new{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(227,165,62,.4);border-radius:var(--r-pill);
  padding:3px 8px;background:var(--gold-soft);
}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 13px;border-radius:var(--r-pill);
  border:1px solid var(--hair);background:var(--ink-2);
  color:var(--lead);font-size:13.5px;
  transition:border-color var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out),transform var(--t-micro) var(--ease-out);
}
.chip:hover{border-color:var(--gold);color:var(--fg)}
.chip:active{transform:scale(.97)}

/* ---------- SCROLL REVEAL (variadas) ---------- */
[data-rev]{opacity:0;will-change:transform,opacity}
[data-rev="up"]{transform:translateY(26px)}
[data-rev="up-lg"]{transform:translateY(46px)}
[data-rev="fade"]{transform:none}
[data-rev="left"]{transform:translateX(-28px)}
[data-rev="right"]{transform:translateX(28px)}
[data-rev="scale"]{transform:scale(.96)}
[data-rev].in{
  opacity:1;transform:none;
  transition:opacity var(--t-scroll) var(--ease-out),transform var(--t-scroll) var(--ease-out);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-rev],.bubble,.tg-line,.tg-msg,.tg-sent{opacity:1 !important;transform:none !important}
}

html{scroll-behavior:smooth}
section[id],[id]{scroll-margin-top:88px}

/* hide visually but keep for AT */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hairline grid lines decoration */
.edge-top{border-top:1px solid var(--hair)}
.edge-bottom{border-bottom:1px solid var(--hair)}