/* Shared components · Dirección C · Editorial Cálido
   Inyectable en todas las páginas del site.
   v3 final — 2026-04-20 */

*, *::before, *::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{ margin:0; min-height:100vh; position:relative }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer }
::selection{ background:var(--accent); color:#fff }

/* ===== Eyebrow ===== */
.eyebrow{
  display:inline-flex; gap:10px; align-items:center;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.12em; color:var(--mute); text-transform:uppercase;
  margin-bottom:var(--sp-5); font-weight:500;
}
.eyebrow::before{
  content:''; width:28px; height:1px; background:var(--accent);
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500; cursor:pointer;
  transition:all var(--dur-base) var(--ease);
  border:1px solid transparent; white-space:nowrap;
  text-decoration:none; font-family:inherit;
  background:none;
}
.btn-lg{ padding:15px 26px; font-size:14.5px }
.btn-ink{ background:var(--ink); color:var(--paper) }
.btn-ink:hover{ background:var(--accent); transform:translateY(-1px) }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2) }
.btn-ghost:hover{ border-color:var(--ink); background:var(--paper) }
.btn-accent{ background:var(--accent); color:#fff }
.btn-accent:hover{ background:var(--ink) }

/* ===== Nav ===== */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line);
  height:var(--nav-h);
}
.nav-inner{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter); height:100%;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
}
.brand-mark{
  font-family:var(--font-serif); font-weight:500; font-size:22px;
  letter-spacing:-0.02em; color:var(--ink); text-decoration:none;
}
.brand-mark i{ font-style:italic; color:var(--accent); font-weight:400 }
.nav-links{ display:flex; gap:28px; justify-content:center }
.nav-links a{
  color:var(--ink-2); font-size:14px; text-decoration:none;
  font-weight:500; transition:color var(--dur-fast);
  position:relative; padding:4px 0;
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink) }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px;
  height:1.5px; background:var(--accent);
}
.nav-cta{ display:flex; gap:10px; align-items:center }
.nav-theme{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line);
  color:var(--ink-2); transition:all var(--dur-fast);
  cursor:pointer; font-size:14px;
}
.nav-theme:hover{ border-color:var(--ink); color:var(--ink) }
.nav-burger{
  display:none; width:36px; height:36px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--ink); cursor:pointer;
}
.nav-burger span{ width:16px; height:1.5px; background:currentColor; display:block; position:relative }
.nav-burger span::before, .nav-burger span::after{
  content:''; position:absolute; left:0; width:16px; height:1.5px; background:currentColor;
}
.nav-burger span::before{ top:-5px }
.nav-burger span::after{ top:5px }
@media (max-width:820px){
  .nav-links{ display:none }
  .nav-cta .btn-ghost{ display:none }
  .nav-burger{ display:inline-flex }
  .nav-inner{ gap:16px }
}

/* Mobile drawer */
.nav-drawer{
  position:fixed; inset:0; z-index:100;
  background:rgba(26,23,18,0.55);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base);
}
.nav-drawer.open{ opacity:1; pointer-events:auto }
.nav-drawer-panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(320px, 85vw);
  background:var(--bg);
  padding:var(--sp-6);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px;
  transform:translateX(100%);
  transition:transform var(--dur-base) var(--ease-out);
}
.nav-drawer.open .nav-drawer-panel{ transform:none }
.nav-drawer-panel a{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line);
  font-family:var(--font-serif); font-size:20px; color:var(--ink);
  font-weight:400;
}
.nav-drawer-panel a:last-of-type{ border-bottom:0 }
.nav-drawer-panel a::after{ content:'→'; color:var(--accent) }
.nav-drawer-close{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px; border-radius:50%;
  background:transparent; border:1px solid var(--line);
  color:var(--ink); cursor:pointer; font-size:18px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ===== Footer ===== */
.footer{
  border-top:1px solid var(--line);
  padding:var(--sp-8) var(--gutter) var(--sp-6);
  background:var(--paper);
  position:relative;
}
.footer-inner{ max-width:var(--max); margin:0 auto }
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:var(--sp-7);
}
.footer h4{
  font-family:var(--font-mono); font-size:11px; color:var(--mute);
  letter-spacing:0.1em; text-transform:uppercase; margin:0 0 18px;
  font-weight:500;
}
.footer ul{ list-style:none; padding:0; margin:0 }
.footer li{ margin-bottom:10px }
.footer a{ color:var(--ink-2); text-decoration:none; font-size:14px; transition:color var(--dur-fast) }
.footer a:hover{ color:var(--accent) }
.footer .tag{
  font-family:var(--font-serif); font-weight:300;
  font-size:22px; line-height:1.2; letter-spacing:-0.015em;
  color:var(--ink); max-width:300px; margin:8px 0 20px;
}
.footer .tag em{ font-style:italic; color:var(--accent); font-weight:400 }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--sp-5); border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:11px;
  color:var(--mute); letter-spacing:0.06em; flex-wrap:wrap; gap:12px;
}
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr } }

/* ===== Grain overlay ===== */
.grain::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:40;
  opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}
[data-theme="dark"] .grain::before{ opacity:.08; mix-blend-mode:overlay }

/* ===== Reveal (con fallback: solo oculto si JS se cargó) ===== */
html.js-loaded [data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
html.js-loaded [data-reveal].in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  html.js-loaded [data-reveal]{ opacity:1; transform:none; transition:none }
}

/* ===== Links ===== */
.link-u{
  display:inline-flex; gap:6px; align-items:center;
  color:var(--accent); text-decoration:none; font-weight:500;
  font-size:14px; border-bottom:1px solid currentColor;
  padding-bottom:2px; transition:gap var(--dur-base) var(--ease);
}
.link-u:hover{ gap:10px }

/* ===== Mono label helper ===== */
.mono-label{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.1em; color:var(--mute); text-transform:uppercase;
}

/* ===== Cards genéricas ===== */
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-6);
}

/* ===== Sections ===== */
.section{ padding:var(--sp-9) var(--gutter); border-top:1px solid var(--line) }
.section-inner{ max-width:var(--max); margin:0 auto }
.section-title{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(36px,4.4vw,72px); line-height:1;
  letter-spacing:-0.028em; margin:0;
}
.section-title em{ font-style:italic; color:var(--accent); font-weight:400 }

/* ===== Breadcrumb ===== */
.crumb{
  display:flex; gap:10px; align-items:center;
  font-family:var(--font-mono); font-size:11px;
  color:var(--mute); letter-spacing:0.06em; text-transform:uppercase;
  padding:var(--sp-5) 0;
}
.crumb a{ color:var(--mute); text-decoration:none; transition:color var(--dur-fast) }
.crumb a:hover{ color:var(--accent) }
.crumb .sep{ color:var(--line-2) }
.crumb .cur{ color:var(--ink) }

/* ===== Badges inline ===== */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-2);
}
.pill-accent{ background:var(--accent-soft); border-color:var(--accent-soft); color:var(--ink) }
.pill-good{ background:rgba(74,122,58,0.12); border-color:transparent; color:var(--good) }
.pill-loss{ background:rgba(217,58,31,0.10); border-color:transparent; color:var(--loss) }

/* ===== Utilities ===== */
.hidden{ display:none !important }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }