/* Paleta — tomada del producto (admin dashboard), hexes exactos. Superficie oscura única:
   la landing y la app son la misma marca; el lima solo existe sobre negro (9.08:1 · 1.94:1 sobre crema). */
:root{
  --bg:#0F0D0D;           /* fondo de página del dashboard */
  --surface:#161313;      /* sidebar / banda */
  --surface-2:#1A1817;    /* cards */
  --ink:#F9F9F8;          /* 18.39:1 */
  --ink-2:#9D9591;        /* secundario cálido — 6.59:1 */
  --line:#262525;
  --line-2:#3A3836;
  --lime:#67C800;         /* acento del producto — 9.08:1 sobre --bg */
  --accent-text:var(--lime);
  --band:var(--surface); --band-ink:var(--ink);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
[data-lang="en"] .es,[data-lang="es"] .en{display:none}
.mono{font-family:"JetBrains Mono","SF Mono",Menlo,monospace}
.serif{font-family:"IBM Plex Serif",Georgia,serif}

/* --- entrada: viva pero sobria --- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}
@media(prefers-reduced-motion:reduce){.rise{animation:none}}

nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.75rem 0}
.brand{display:flex;align-items:baseline;gap:.65rem;min-width:0}
.wm{font-size:1.25rem;font-weight:650;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.tag{font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.langs{display:flex;gap:.25rem}
.langs button{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.06em;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--ink-2);padding:.3rem .55rem;border-radius:4px}
.langs button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.langs button:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

.kicker{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text)}
h1{margin:0;font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;
  font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.14;letter-spacing:-.015em;max-width:20ch;text-wrap:balance}
.lead{margin:0;font-size:clamp(1.05rem,2.1vw,1.2rem);line-height:1.62;color:var(--ink-2);max-width:44ch}
.lead b{color:var(--ink);font-weight:600}
.btn{display:inline-block;background:var(--lime);color:#0F0D0D;font-size:.95rem;font-weight:600;
  padding:.85rem 1.7rem;border-radius:6px;text-decoration:none;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn:hover{background:#74DC08}

/* --- acceso en el nav --- */
.navr{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}
.ghost{font-size:.85rem;font-weight:550;color:var(--ink);text-decoration:none;
  padding:.5rem .95rem;border:1px solid var(--line-2);border-radius:6px;transition:border-color .15s ease}
.ghost:hover{border-color:var(--ink-2)}
.ghost:focus-visible,.btn-sm:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.btn-sm{background:var(--lime);color:#0F0D0D;font-size:.85rem;font-weight:600;
  padding:.5rem .95rem;border-radius:6px;text-decoration:none;transition:background .15s ease}
.btn-sm:hover{background:#74DC08}
@media(max-width:620px){nav .tag{display:none}}

/* --- hero a dos columnas: copy + escenario --- */
.hero{padding:clamp(3rem,7vw,4.75rem) 0 clamp(3rem,7vw,4.5rem);display:grid;
  grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.55rem}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:2.5rem}}

/* --- escenario: la cadena de atestaciones, en profundidad --- */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;min-height:340px;perspective:1300px}
.stage>*{position:relative;z-index:1}
.glow{position:absolute;inset:-14% -18%;z-index:0;pointer-events:none;
  background:radial-gradient(44% 42% at 60% 42%,rgba(103,200,0,.17),transparent 70%);
  animation:breathe 7.5s ease-in-out infinite alternate}
.gridlines{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(58% 54% at 55% 46%,#000 30%,transparent 76%);
  mask-image:radial-gradient(58% 54% at 55% 46%,#000 30%,transparent 76%);
  animation:drift 26s linear infinite}
@keyframes drift{to{background-position:46px 46px}}
@keyframes breathe{to{opacity:.5;transform:scale(1.07)}}

.chain{display:flex;flex-direction:column;gap:.6rem;width:min(100%,352px);
  transform-style:preserve-3d;animation:sway 13s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotateX(10deg) rotateY(-18deg)}to{transform:rotateX(3deg) rotateY(-7deg)}}
.node{--z:0px;--d:0s;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:.7rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:.72rem .85rem;
  box-shadow:0 20px 44px -26px #000;transform:translateZ(var(--z));
  animation:pop 9s cubic-bezier(.2,.7,.3,1) var(--d) infinite both}
.chain>.node:nth-child(1){--z:36px;--d:0s}
.chain>.node:nth-child(2){--z:24px;--d:.85s}
.chain>.node:nth-child(3){--z:12px;--d:1.7s}
.chain>.node:nth-child(4){--z:0px;--d:2.55s}
@keyframes pop{0%,7%{opacity:.3;transform:translateZ(var(--z)) translateY(7px)}
  15%,100%{opacity:1;transform:translateZ(var(--z)) translateY(0)}}
.node .dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);
  animation:seal 9s linear var(--d) infinite both}
@keyframes seal{0%,11%{background:var(--line-2);box-shadow:0 0 0 0 rgba(103,200,0,0)}
  17%{background:var(--lime);box-shadow:0 0 0 6px rgba(103,200,0,.2)}
  24%,100%{background:var(--lime);box-shadow:0 0 0 0 rgba(103,200,0,0)}}
.node.kept .dot{animation:none;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.node .idx{font-family:"JetBrains Mono",monospace;font-size:.64rem;color:var(--ink-2);opacity:.7}
.node .nm{font-size:.86rem;font-weight:550;letter-spacing:-.005em}
.node .st{position:relative;font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;min-width:82px;text-align:right}
.node .st i{font-style:normal;display:block}
.node .st .p{color:var(--ink-2);opacity:.55;animation:swap-out 9s var(--d) infinite both}
.node .st .s{position:absolute;top:0;right:0;color:var(--lime);opacity:0;animation:swap-in 9s var(--d) infinite both}
.node.kept .st .s{color:var(--ink-2)}
@keyframes swap-in{0%,15%{opacity:0}22%,100%{opacity:1}}
@keyframes swap-out{0%,15%{opacity:.55}22%,100%{opacity:0}}
.stage .cap{font-family:"JetBrains Mono",monospace;font-size:.63rem;line-height:1.6;letter-spacing:.05em;
  color:var(--ink-2);text-align:center;max-width:34ch}
@media(prefers-reduced-motion:reduce){
  .glow,.gridlines,.chain,.node,.node .dot,.node .st .p,.node .st .s{animation:none}
  .chain{transform:none}.node{opacity:1;transform:none}
  .node .dot{background:var(--lime)}.node.kept .dot{background:transparent}
  .node .st .p{display:none}.node .st .s{position:static;opacity:1}}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(1.75rem,4vw,2.5rem);
  padding-bottom:clamp(3.5rem,8vw,5.5rem)}
.col{display:flex;flex-direction:column;gap:.85rem;border-top:1px solid var(--line);padding-top:1.6rem}
.col h3{margin:0;font-size:1.05rem;font-weight:650;letter-spacing:-.005em}
.col p{margin:0;font-size:.94rem;line-height:1.62;color:var(--ink-2)}

.band{background:var(--band);color:var(--band-ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .wrap{padding-top:clamp(3.5rem,7vw,4.5rem);padding-bottom:clamp(3.5rem,7vw,4.5rem)}
.band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(2rem,4vw,3rem)}
.proof{display:flex;flex-direction:column;gap:.7rem}
.proof .k{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime)}
.proof .h{font-family:"IBM Plex Serif",Georgia,serif;font-size:1.3rem;line-height:1.38}
.proof p{margin:0;font-size:.88rem;line-height:1.62;opacity:.72}
.proof .honest{font-family:"JetBrains Mono",monospace;font-size:.74rem;line-height:1.6;
  opacity:.62;border-left:2px solid rgba(103,200,0,.45);padding-left:.7rem;margin-top:.15rem}

.close{padding:clamp(4rem,9vw,6rem) 0 clamp(3rem,7vw,4.5rem);display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:1.5rem}
.close h2{margin:0;font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.15rem);line-height:1.26;letter-spacing:-.01em;max-width:22ch;text-wrap:balance}
.close .mail{font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--ink-2);text-decoration:none}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  padding-top:1.4rem;padding-bottom:1.4rem}
footer span{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.06em;color:var(--ink-2)}

/* --- enlace simple del nav --- */
.navlink{font-size:.85rem;font-weight:500;color:var(--ink-2);text-decoration:none;padding:.5rem .3rem}
.navlink:hover{color:var(--ink)}
.navlink:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.navlink[aria-current="page"]{color:var(--ink)}

/* --- páginas de texto (about) --- */
.page-head{padding:clamp(3rem,7vw,4.5rem) 0 clamp(1.5rem,4vw,2.5rem);max-width:60ch}
.page-head h1{max-width:22ch}
.mv{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.5rem,3vw,2.25rem);
  padding-bottom:clamp(3rem,7vw,4.5rem)}
.mv .card{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:clamp(1.4rem,3vw,1.9rem);display:flex;flex-direction:column;gap:.85rem}
.mv .k{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime)}
.mv .card p{margin:0;font-family:"IBM Plex Serif",Georgia,serif;font-size:1.12rem;line-height:1.52}
.prose{max-width:64ch;padding-bottom:clamp(3rem,7vw,4.5rem);display:flex;flex-direction:column;gap:1.1rem}
.prose h2{margin:0 0 .2rem;font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;
  font-size:clamp(1.4rem,3vw,1.85rem);line-height:1.28;letter-spacing:-.01em}
.prose p{margin:0;font-size:1rem;line-height:1.7;color:var(--ink-2)}
.prose p b,.prose p strong{color:var(--ink);font-weight:600}
.rule{border:0;border-top:1px solid var(--line);margin:0 0 clamp(2rem,5vw,3rem)}
.whos{display:flex;flex-direction:column;gap:1rem;max-width:64ch}
.who{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:clamp(1.3rem,3vw,1.7rem);max-width:64ch}
.who .mono-init{width:46px;height:46px;border-radius:10px;background:var(--surface);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",monospace;font-size:.9rem;color:var(--lime)}
.who .nm{font-size:1rem;font-weight:600;letter-spacing:-.005em}
.who .ro{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-top:.15rem}
.who p{margin:.7rem 0 0;font-size:.94rem;line-height:1.65;color:var(--ink-2)}
@media(max-width:520px){.who{grid-template-columns:1fr}}