/* DocuListo — tema editorial claro (2026-10) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --accent:#3F3AC9;
  --accent-hover:#332FAB;
  --accent-active:#2A268F;
  --accent-light:#EEEDFB;
  --accent-border:#D9D6F7;
  --accent-glow:rgba(63,58,201,.16);

  --bg:#FBFAF6;
  --surface:#FFFFFF;
  --surface-alt:#F4F1E9;
  --surface-subtle:#F8F6F0;
  --line:#E7E4DC;
  --line-strong:#D3CEC2;

  --text:#0B1220;
  --text-secondary:#3B465A;
  --muted:#5F6A7C;
  --muted-light:#68727F;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px;

  --shadow-subtle:0 1px 2px rgba(11,18,32,.04);
  --shadow-card:0 18px 40px -24px rgba(11,18,32,.28);
  --shadow-glow:0 0 30px -8px var(--accent-glow);

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter Tight",Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}

html{scroll-padding-top:104px}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 520px at 92% -6%,rgba(63,58,201,.055),transparent 62%),
    radial-gradient(700px 480px at -8% 18%,rgba(169,116,31,.045),transparent 60%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.022em;line-height:1.12;color:var(--text)}
h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:2.4rem 0 .9rem}
h3{font-size:1.24rem;margin:1.8rem 0 .6rem}
p{color:#26313F}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-hover)}

/* Cabecera */
.site-header{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 12px 30px -22px rgba(11,18,32,.35);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.brand{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.03em}
.brand-mark{box-shadow:0 6px 16px -8px rgba(63,58,201,.6)}
.nav{gap:24px;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.nav a:not(.nav-button){color:var(--muted)}
.nav a:not(.nav-button):hover{color:var(--text)}
.nav-button{
  background:var(--text);color:#FBFAF6!important;border:0;border-radius:999px;
  padding:11px 20px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:0;
  box-shadow:none;transition:transform .2s,opacity .2s;
}
.nav-button:hover{background:var(--text);opacity:.88;transform:translateY(-1px)}

/* Etiquetas y secciones */
.section-label,.eyebrow{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#8A8172;
}
.section-heading h2{font-family:var(--font-display);letter-spacing:-.025em}
.section-heading > p{color:var(--muted);font-size:16.5px}

/* Tarjetas */
.article-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:none;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s;
}
.article-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.article-card h3{font-family:var(--font-display);font-weight:600}
.article-card .text-link{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.step-card{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.step-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.step-number{font-family:var(--font-mono);color:var(--accent)}

/* Artículos */
.article-page h1,.legal-page h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.03em;color:var(--text);
  margin:0 0 18px;
}
.article-page p,.legal-page p{font-size:17.5px;line-height:1.78;color:#26313F}
.article-page ul,.article-page ol{color:#26313F}
.article-page h2{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,1.95rem)}
.article-page h3{font-family:var(--font-display);font-size:1.22rem}
.article-callout{
  background:#F5F2EA;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 14px 14px 0;padding:20px 22px;
}
.article-cta{
  background:var(--text);color:#FBFAF6;border:0;border-radius:20px;text-align:left;
  padding:34px;
}
.article-cta h2,.article-cta h3,.article-cta p,.article-cta a{color:#FBFAF6}
.article-cta a{text-decoration:underline;text-underline-offset:3px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq summary{font-weight:600;color:var(--text)}
.faq summary:hover{color:var(--accent)}

/* Pie */
.site-footer{border-top:1px solid var(--line);padding-top:44px}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text)}
.legal-footnote{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light)}

/* Detalles */
::selection{background:var(--accent-light);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto}

@media(max-width:900px){
  body{font-size:16.5px}
  .article-page h1,.legal-page h1{font-size:clamp(1.9rem,7vw,2.4rem)}
  .nav{font-size:10px}
}