/* Estilos del sitio de documentación de Moderniva.
   Paleta "Notion warm" + acento borgoña de marca. Claro y oscuro.
   EDITA AQUÍ los tokens de color; el resto se deriva de ellos. */
:root{
  --ground:#F7F6F3; --panel:#FFFFFF; --panel-2:#FBFAF7; --panel-3:#F2F0EB;
  --ink:#37352F; --ink-soft:#514D45; --muted:#6F6A5F; --faint:#9C978C;
  --line:#E7E3DB; --line-strong:#D8D3C8;
  --marca:#7F1D1D; --marca-ink:#7F1D1D; --marca-soft:#7f1d1d12;
  --tut:#2F6B4F; --tut-soft:#2f6b4f16;
  --guia:#7F1D1D; --guia-soft:#7f1d1d14;
  --ref:#635C50; --ref-soft:#635c5014;  /* referencia: grafito cálido, sin azul (regla de marca §11) */
  --exp:#8A5A17; --exp-soft:#8a5a1716;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI','Helvetica Neue',sans-serif;
  --wordmark:'Poppins','Inter',system-ui,sans-serif;
  --mono:'Cascadia Code','SF Mono',ui-monospace,'Consolas',monospace;
  --shadow:0 1px 2px rgba(55,53,47,.05),0 6px 20px rgba(55,53,47,.06);
  --shadow-lg:0 10px 40px rgba(55,53,47,.14);
  --r:12px;
}
/* Sitio público = SOLO modo claro (regla de marca, MARCA.md §A). El modo oscuro
   se retiró a propósito para alinear con el resto del sitio público de Moderniva. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ===== transición nativa entre páginas (sin JS ni dependencias) ===== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:ease}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@keyframes mnvIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes mnvPulso{0%,100%{opacity:.4}50%{opacity:.85}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  line-height:1.62;-webkit-font-smoothing:antialiased;font-size:15.5px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--marca-soft)}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:4px}
code{font-family:var(--mono);font-size:.86em;background:var(--panel-3);color:var(--ink);
  padding:.1em .38em;border-radius:5px;border:1px solid var(--line)}

/* ===== header ===== */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:18px;height:60px;padding:0 22px;max-width:1440px;margin:0 auto}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.blogo{display:block;flex:0 0 auto}
.wordmark{font-family:var(--wordmark);font-weight:700;font-size:19px;letter-spacing:.005em;
  color:var(--ink);line-height:1;white-space:nowrap}
.bsub{color:var(--muted);font-weight:500;font-size:14px}
.search{flex:1;max-width:460px;margin:0 auto;position:relative}
.search input{width:100%;height:38px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--panel);color:var(--ink);padding:0 14px 0 38px;font-size:14px;font-family:inherit;
  transition:border-color .15s ease,box-shadow .15s ease}
.search input:focus-visible{border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-soft)}
.search input::placeholder{color:var(--faint)}
.search .si{position:absolute;left:12px;top:11px;width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:2}
.search kbd{position:absolute;right:9px;top:8px;font-family:var(--mono);font-size:11px;color:var(--muted);
  background:var(--panel-3);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.hactions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ask-btn{height:36px;border-radius:9px;border:1px solid var(--marca);background:var(--marca-soft);
  color:var(--marca-ink);font-weight:600;font-size:13.5px;padding:0 14px;display:flex;align-items:center;gap:7px;
  transition:background-color .15s ease,color .15s ease}
.ask-btn:hover{background:var(--marca);color:#fff}
.ask-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

/* ===== layout ===== */
.layout{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:264px minmax(0,1fr) 232px;
  gap:0;align-items:start}
nav.side{position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;padding:26px 16px 40px;
  border-right:1px solid var(--line)}
.side-group{margin-bottom:26px}
.side-group h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:0 0 8px;padding:0 10px}
.side-link{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:14px;
  color:var(--ink-soft);width:100%;text-align:left;line-height:1.35;
  transition:background-color .15s ease,color .15s ease,opacity .14s ease,transform .14s ease}
.side-link:hover{background:var(--panel-3);color:var(--ink)}
.side-link.active{background:var(--marca-soft);color:var(--marca-ink);font-weight:600}
.side-link .di{width:15px;height:15px;flex:0 0 auto;color:var(--dotc,var(--faint))}
.side-link.saliendo,.side-link.entrando{opacity:0;transform:translateY(-3px)}
.side-link.hide{display:none}
.side-empty{padding:10px;color:var(--muted);font-size:13px;display:none}

main{padding:38px 52px 90px;min-width:0}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap}
.crumbs .sep{color:var(--faint)}
.crumbs a{transition:color .15s ease}
.crumbs a:hover{color:var(--ink)}
.doctype{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;letter-spacing:.02em;
  padding:4px 11px;border-radius:100px;margin-bottom:16px}
.doctype .g{width:6px;height:6px;border-radius:50%;background:currentColor}
h1.title{font-size:33px;font-weight:650;letter-spacing:-.02em;line-height:1.14;margin:0;text-wrap:balance}
.lede{font-size:18px;color:var(--muted);margin:16px 0 0;max-width:64ch;line-height:1.55}
.art-tools{display:flex;gap:8px;margin:22px 0 6px;flex-wrap:wrap}
.tool{height:32px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);
  color:var(--ink-soft);font-size:13px;font-weight:550;padding:0 12px;display:flex;align-items:center;gap:7px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.tool:hover{background:var(--panel-3)}
.tool svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9}
.copy-flash{color:var(--tut)!important;border-color:var(--tut)!important}

section.block{margin-top:38px;scroll-margin-top:80px}
section.block h2{font-size:21px;font-weight:680;letter-spacing:-.01em;margin:0 0 4px}
.whatis{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;
  margin-top:14px;color:var(--ink-soft);font-size:15px}
.whatis b{color:var(--ink)}

ol.steps{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
ol.steps li{counter-increment:s;position:relative;padding:12px 0 14px 46px;border-bottom:1px solid var(--line)}
ol.steps li:last-child{border-bottom:none}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:11px;width:28px;height:28px;
  border-radius:8px;background:var(--marca-soft);color:var(--marca-ink);font-weight:700;font-size:14px;
  display:grid;place-items:center;font-family:var(--mono)}
ol.steps li b,.ui{font-weight:600;color:var(--ink)}
.ui{background:var(--panel-3);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:13.5px;
  white-space:nowrap}
ol.steps li .sub{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}

figure.shot{margin:22px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel-2)}
.shot .chrome{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1px solid var(--line);background:var(--panel-3)}
.shot .chrome i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.shot .chrome .url{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px 10px}
.shot .ph{aspect-ratio:16/8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:repeating-linear-gradient(45deg,transparent,transparent 11px,var(--panel-3) 11px,var(--panel-3) 12px)}
.shot .ph svg{width:28px;height:28px;stroke:var(--faint);fill:none;stroke-width:1.6}
.shot .shot-img{display:block;width:100%;height:auto}
.shot .ph b{color:var(--muted);font-size:13.5px;font-weight:600}
.shot .ph small{font-size:12px;color:var(--faint)}
figure.shot figcaption{padding:11px 15px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);line-height:1.5}
figure.shot figcaption b{color:var(--ink);font-weight:600}

.note{display:flex;gap:12px;background:var(--exp-soft);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 18px;margin-top:22px;font-size:14px;color:var(--ink-soft)}
.note .ni{flex:0 0 auto;color:var(--exp);font-weight:800;font-family:var(--mono);margin-top:1px}
.note.tip{background:var(--tut-soft)}.note.tip .ni{color:var(--tut)}
.note b{color:var(--ink)}

.related{margin-top:52px;border-top:1px solid var(--line);padding-top:24px}
.related h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rcard{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--panel);
  display:flex;flex-direction:column;gap:4px;transition:border-color .15s ease,background-color .15s ease}
.rcard:hover{border-color:var(--line-strong);background:var(--panel-2)}
.rcard .rt{font-weight:600;font-size:14.5px}
.rcard .rd{font-size:13px;color:var(--muted)}
.rcard .arr{color:var(--marca-ink);font-size:13px;font-weight:600;margin-top:2px;display:inline-block;transition:transform .15s ease}
.rcard:hover .arr{transform:translateX(2px)}

/* right rail */
aside.toc{position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;padding:38px 22px 40px 8px}
.toc h5{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 10px}
.toc a{display:block;font-size:13px;color:var(--muted);padding:5px 0 5px 12px;border-left:2px solid var(--line);line-height:1.4;
  transition:color .15s ease,border-color .15s ease}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--marca-ink);border-left-color:var(--marca);font-weight:600}
.ask-card{margin-top:26px;border:1px solid var(--line-strong);border-radius:var(--r);padding:16px;background:var(--panel-2)}
.ask-card p{margin:0 0 12px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.ask-card p b{color:var(--ink)}
.ask-card .mini{width:100%;height:34px;border-radius:8px;border:1px solid var(--marca);background:var(--marca);
  color:#fff;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:7px}
.ask-card .mini svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* ===== home ===== */
.home{max-width:1000px;margin:0 auto;padding:64px 24px 90px}
.home .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--marca-ink)}
.home h1{font-size:clamp(30px,5vw,44px);font-weight:650;letter-spacing:-.02em;margin:16px 0 0;text-wrap:balance;max-width:15ch}
.home .sub{font-size:19px;color:var(--muted);margin-top:16px;max-width:56ch;line-height:1.5}
.home .bigsearch{margin-top:32px;max-width:560px;position:relative}
.home .bigsearch input{width:100%;height:52px;border-radius:13px;border:1px solid var(--line-strong);
  background:var(--panel);color:var(--ink);padding:0 18px 0 48px;font-size:16px;font-family:inherit;box-shadow:var(--shadow)}
.home .bigsearch .si{position:absolute;left:17px;top:17px;width:19px;height:19px;stroke:var(--faint);fill:none;stroke-width:2}
.home-group{margin-top:52px}
.home-group h2{font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 16px}
.doc-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.doc-card{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--panel);
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease,opacity .14s ease}
.doc-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.doc-card .dtag{font-size:11.5px;font-weight:650;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px;align-self:flex-start}
.doc-card .dtag .g{width:6px;height:6px;border-radius:50%;background:currentColor}
.doc-card .dt{font-weight:650;font-size:17px;letter-spacing:-.01em}
.doc-card .dd{font-size:14px;color:var(--muted);line-height:1.5}
.doc-card .darr{color:var(--marca-ink);font-size:13.5px;font-weight:600;margin-top:2px;display:inline-block;transition:transform .15s ease}
.doc-card:hover .darr{transform:translateX(2px)}
.doc-card.saliendo,.doc-card.entrando{opacity:0;transform:translateY(-3px)}
.doc-card.hide{display:none}

/* agent drawer */
.scrim{position:fixed;inset:0;background:rgba(20,17,12,.42);backdrop-filter:blur(2px);z-index:60;opacity:0;
  pointer-events:none;transition:opacity .22s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--panel);z-index:70;
  box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;border-left:1px solid var(--line)}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;gap:11px;padding:18px 20px;border-bottom:1px solid var(--line)}
.dhead .dblogo{width:30px;height:30px}
.dhead .dt b{font-size:15px;display:block}
.dhead .dt span{font-size:12px;color:var(--muted)}
.dhead .x{margin-left:auto;width:32px;height:32px;border-radius:8px;border:none;background:var(--panel-3);
  color:var(--muted);font-size:17px;transition:background-color .15s ease,color .15s ease}
.dhead .x:hover{background:var(--line-strong);color:var(--ink)}
.dbody{flex:1;overflow-y:auto;padding:20px}
.bubble{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px;
  color:var(--ink-soft);line-height:1.55}
.bubble b{color:var(--ink)}
.suggest{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.suggest button{text-align:left;border:1px solid var(--line-strong);background:var(--panel);border-radius:9px;
  padding:10px 13px;font-size:13.5px;color:var(--ink-soft);transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.suggest button:hover{border-color:var(--marca);color:var(--marca-ink);background:var(--marca-soft)}
.dbody{display:flex;flex-direction:column}
.bubble,.msg-user,.msg-agente{white-space:pre-wrap}
.bubble,.msg-user{animation:mnvIn .18s ease both}
.msg-user{align-self:flex-end;max-width:85%;background:var(--marca);color:#fff;border-radius:12px 12px 4px 12px;
  padding:10px 14px;font-size:14px;line-height:1.5;margin-top:14px}
.msg-agente{margin-top:14px}
.pensando{font-style:italic;animation:mnvPulso 1.1s ease-in-out infinite}
.dfoot form{margin:0}
.dfoot{padding:14px 20px;border-top:1px solid var(--line)}
.dfoot input{width:100%;height:40px;border-radius:10px;border:1px solid var(--line-strong);background:var(--panel-2);
  color:var(--ink);padding:0 14px;font-size:14px;font-family:inherit}
.dnote{font-size:11.5px;color:var(--faint);text-align:center;margin-top:10px}
.dnote b{color:var(--muted)}

@media(max-width:1120px){
  .layout{grid-template-columns:240px minmax(0,1fr)}
  aside.toc{display:none}
  main{padding:34px 40px 80px}
}
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  nav.side{display:none}
  header .search{display:none}
  main{padding:28px 22px 70px}
  h1.title{font-size:27px}
  .related-grid,.doc-cards{grid-template-columns:1fr}
}

/* ── pie: los tres sitios de Moderniva ─────────────────────────────────────── */
.pie{border-top:1px solid var(--line);background:var(--panel-2);margin-top:auto}
.pie-in{max-width:1200px;margin:0 auto;padding:22px 40px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:12px 26px;
  font-size:13px;color:var(--muted)}
.pie-in nav{display:flex;flex-wrap:wrap;gap:12px 22px}
.pie-in a{color:var(--muted);text-decoration:none}
.pie-in a:hover{color:var(--marca-ink);text-decoration:underline}
@media(max-width:820px){ .pie-in{padding:20px 22px} }