/* ==========================================================================
   MITSA 2026 · Base: tokens, reset, tipografía, botones, header y footer
   ========================================================================== */

:root {
    --ink: #0D1B2A;
    --navy: #1B263B;
    --steel: #415A77;
    --steel-2: #778DA9;
    --mist: #66727F;          /* Texto secundario sobre fondos claros (contraste ≥ 4,5:1) */
    --mist-on-dark: #8E9AA8;  /* Texto secundario sobre fondos oscuros */
    --line: #E0E1DD;
    --cream: #F8F6F0;
    --cream-bg: #E8E6DF; /* fondos crema (el texto claro sigue usando --cream) */
    --sand: #E8E6DF;
    --white: #fff;
    --on-dark-muted: rgba(248, 246, 240, .6);
    --on-dark-line: rgba(224, 225, 221, .16);

    --f-sans: 'Geist', system-ui, sans-serif;
    --f-body: 'Inter', system-ui, sans-serif;
    --f-mono: 'Geist Mono', ui-monospace, monospace;
    --f-serif: 'Instrument Serif', Georgia, serif;

    --r-sm: 14px;
    --r-md: 18px;
    --r-lg: 20px;
    --gutter: 40px;
    --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
    margin: 0;
    background: var(--cream-bg);
    color: var(--navy);
    font: 400 15px/1.6 var(--f-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--steel-2); outline-offset: 3px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Layout ─────────────────────────────────────────────── */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.container--mid { max-width: 1080px; }
.container--narrow { max-width: 1040px; }
.container--text { max-width: 800px; }

.text-center { text-align: center; }
.text-center .h1, .text-center .h2, .text-center .lead, .text-center .display,
.h1.text-center, .h2.text-center, .lead.text-center, .display.text-center { margin-left: auto; margin-right: auto; }
.measure-16 { max-width: 16ch; } .measure-18 { max-width: 18ch; } .measure-20 { max-width: 20ch; } .measure-22 { max-width: 22ch; }
.measure-38 { max-width: 38ch; } .measure-40 { max-width: 40ch; } .measure-42 { max-width: 42ch; } .measure-44 { max-width: 44ch; }
.measure-52 { max-width: 52ch; } .measure-56 { max-width: 56ch; } .measure-60 { max-width: 60ch; } .measure-64 { max-width: 64ch; }

/* ── Tipografía ─────────────────────────────────────────── */
.display, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); font-family: var(--f-sans); text-wrap: pretty; }
.display { font-weight: 700; font-size: clamp(36px, 5vw, 68px); line-height: 1; letter-spacing: -.045em; margin-bottom: 20px; }
.h1 { font-weight: 700; font-size: clamp(32px, 4.6vw, 62px); line-height: 1; letter-spacing: -.045em; margin-bottom: 16px; }
.h1--xl { font-size: clamp(38px, 5.6vw, 76px); line-height: .98; }
.h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -.04em; margin-bottom: 14px; }
.h3 { font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 10px; }
.h3--lg { font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; }
.h4 { font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 8px; }
.h5 { font-weight: 600; font-size: 15px; line-height: 1.35; margin-bottom: 4px; }
.h6 { font-weight: 600; font-size: 14px; line-height: 1.35; margin-bottom: 4px; }

.lead { font-size: 16px; line-height: 1.62; color: var(--steel); margin-bottom: 28px; max-width: 56ch; }
.lead--intro { max-width: 64ch; margin-bottom: 36px; }
.small { font-size: 13.5px; line-height: 1.6; }
.muted { color: var(--steel); }
.on-dark { color: var(--cream); }
.on-dark-muted { color: var(--on-dark-muted); }

.label-mono { display: block; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); margin-bottom: 12px; }
.label-mono.is-accent { color: var(--steel); }
.card--dark .label-mono, .card--navy .label-mono { color: var(--line); }

.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.eyebrow__line { width: 44px; height: 1px; background: var(--steel); flex: none; }
.eyebrow--light { color: var(--line); }
.eyebrow--center { justify-content: center; }

/* ── Botones y enlaces ──────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
    font: 600 14px/1.2 var(--f-sans); text-decoration: none; cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--light { background: var(--cream-bg); color: var(--ink); }
.btn--white { background: #fff; color: var(--ink); padding: 14px 30px; font-size: 14.5px; }
.btn--ghost { border-color: rgba(224, 225, 221, .28); color: var(--cream); padding: 12px 24px; }
.btn--ghost:hover { border-color: rgba(224, 225, 221, .6); }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: var(--navy); }
.btn--outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--outline:hover { border-color: var(--steel); }
.btn--sm { padding: 11px 20px; font-size: 13.5px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.link-arrow { display: inline-block; margin-top: 18px; font: 600 13.5px var(--f-sans); color: var(--ink); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow--muted { margin-top: 0; font-size: 14px; color: var(--steel); }
.link-arrow--sm { margin-top: auto; padding-top: 4px; }
.link-arrow.on-dark { color: var(--cream); }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ── Header ─────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(248, 246, 240, .94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow .2s; }
.admin-bar .site-header { top: 32px; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header__inner { max-width: 1180px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; gap: 20px; }
.site-header__logo { display: block; flex: none; }
.site-header__logo .logo { height: 38px; width: auto; }
.logo .lg-a { fill: var(--ink); }
.logo .lg-b { fill: var(--steel); }
.logo .lg-c { fill: var(--steel-2); }

.site-nav { margin: 0 auto; }
.site-nav__list { display: flex; gap: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px; font: 500 13.5px var(--f-body); color: var(--navy); }
.site-nav__list a { display: block; padding: 8px 15px; border-radius: 999px; text-decoration: none; transition: background-color .15s; }
.site-nav__list a:hover { background: #F1F0EC; }
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a { background: var(--ink); color: var(--cream); }
.site-nav__extra { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 20px; flex: none; }
.site-header__link { font: 500 13.5px var(--f-body); color: var(--navy); text-decoration: none; }
.site-header__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle__bar { width: 16px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--cream-bg); border-top: 1px solid var(--line); }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 56px; }
.site-footer__title { font: 600 13px var(--f-sans); color: var(--ink); margin-bottom: 12px; }
.site-footer__list, .site-footer__menu { font: 400 13px/2 var(--f-body); color: var(--steel); list-style: none; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__brand { padding-top: 40px; padding-bottom: 20px; }
.site-footer__brand .logo { width: min(29%, 280px); opacity: .9; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-bottom: 28px; font-size: 12px; color: var(--mist); }

/* ── Contenido editorial (artículos y páginas) ──────────── */
.prose { font-size: 16.5px; line-height: 1.75; color: var(--navy); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 700 clamp(24px, 2.6vw, 32px)/1.15 var(--f-sans); letter-spacing: -.03em; color: var(--ink); margin-top: 1.8em; }
.prose h3 { font: 600 20px/1.3 var(--f-sans); letter-spacing: -.02em; color: var(--ink); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--steel); text-underline-offset: 3px; }
.prose img, .prose .wp-block-image img { border-radius: var(--r-md); }
.prose figcaption { font-size: 13px; color: var(--mist); margin-top: 8px; }
.prose blockquote { border-left: 2px solid var(--steel); padding: 4px 0 4px 20px; font: italic 400 21px/1.5 var(--f-serif); color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { border-top: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--cream-bg); color: var(--ink); font-weight: 600; }
.prose .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--r-md); }