/* ============================================================
   base.css - chrome y utilidades compartidas (GENAI AREDEZ)
   Generado: reglas identicas en >=6 paginas del set de diseno.
   Lo afinado/especifico vive en assets/css/pages/<slug>.css.
   Carga con tokens.css + fonts.css desde el layout base.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

a { color: inherit; text-decoration: none; }

p { margin: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

::selection { background: var(--ink); color: var(--paper); }

:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    transition: outline-offset var(--t-fast) ease;
  }

.dark :focus-visible { outline-color: var(--ink-inverse); }

.display {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    font-weight: 400;
  }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    font-weight: 500;
  }

.muted { color: var(--ink-muted); }

.accent { color: var(--accent); }

.page { max-width: var(--w-page); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

.prose { max-width: var(--w-prose); }

.wide { max-width: var(--w-wide); }

section { padding: var(--space-section) 0; }

.section-rule { border-top: 1px solid var(--rule); }

.prose a, a.link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: text-decoration-thickness var(--t-fast) ease, color var(--t-fast) ease;
  }

.prose a:hover, a.link:hover {
    color: var(--accent);
    text-decoration-thickness: 2px;
  }

.topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

.wordmark {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    letter-spacing: 0.18em;
    font-weight: 500;
  }

.nav {
    display: flex;
    gap: 1.75rem;
    align-items: baseline;
    font-size: 0.9375rem;
  }

.nav a {
    color: var(--ink-muted);
    transition: color var(--t-fast) ease;
  }

.nav a:hover { color: var(--ink); }

.nav .cta-mini {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
  }

.nav .cta-mini:hover { color: var(--accent); border-bottom-color: var(--accent); }

.masthead {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 0.65rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
  }

.masthead .sep { color: var(--rule); }

.masthead .now { color: var(--ink); }

.hero {
    padding-top: clamp(4rem, 9vw, 8rem);
    padding-bottom: clamp(5rem, 11vw, 10rem);
  }

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }

.hero-tail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 38rem;
    margin-left: auto;
  }

.hero-sub {
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: 36rem;
  }

.hero-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }

@media (min-width: 900px) {
    .hero-grid { grid-template-columns: 7fr 5fr; align-items: end; }
  }

.sec-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }

.sec-head .num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }

.sec-head .ante {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    max-width: 22ch;
    text-wrap: balance;
  }

@media (min-width: 900px) {
    .sec-head { grid-template-columns: 16rem 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: baseline; }
  }

.prose-block {
    display: grid;
    gap: 1.25rem;
    max-width: var(--w-prose);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
  }

.prose-block + .prose-block { margin-top: 1.25rem; }

.dark {
    background: var(--paper-inverse);
    color: var(--ink-inverse);
  }

.dark .sec-head .num { color: var(--ink-inverse-muted); }

.dark .prose-block { color: var(--ink-inverse); }

.inline-links a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.2em;
  }

.inline-links a:hover { color: var(--accent); }

.closing .quote em { font-style: italic; color: var(--accent); }

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: baseline;
  }

.cta-primary {
    display: inline-block;
    background: var(--ink);
    color: var(--paper);
    padding: 0.95rem 1.75rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.01em;
    transition: background var(--t-cta) ease;
  }

.cta-primary:hover { background: var(--accent); }

.cta-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cta-note {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
  }

footer {
    border-top: 1px solid var(--rule);
    padding: 3rem 0 4rem;
    margin-top: clamp(2rem, 4vw, 4rem);
  }

.foot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: baseline;
  }

.monogram {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    letter-spacing: 0.04em;
    font-style: italic;
    color: var(--ink);
  }

.foot-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
  }

.foot-links { display: flex; gap: 1.5rem; }

.foot-links a { color: var(--ink-muted); }

.foot-links a:hover { color: var(--ink); }

@media (min-width: 720px) {
    .foot-grid { grid-template-columns: auto 1fr auto; }
  }

@media (max-width: 720px) { .nav.compact a:not(.cta-mini) { display: none; } }

.nav a.current { color: var(--ink); }

.hero h1 em { font-style: italic; color: var(--accent); }

.closing {
    padding-top: clamp(4rem, 8vw, 8rem);
    padding-bottom: clamp(5rem, 9vw, 9rem);
  }