/*
 * POSICIONA | BLOG-GENERAL.CSS
 * Base compartida para artículos. No sustituye estilos de la portada ni del índice del blog.
 * Autónomo: no cargar junto a article-speed, visibilidad, medias o blogsdif.
 * Rutas relativas: /css/blog-general.css, /fonts/ y /imagenes/ al mismo nivel.
 * Cada blog##.html carga esta hoja y después su <style> con selectores
 * .article-page--blog-##. No editar este archivo para una variación individual.
 * Los bloques editoriales son opcionales; no fijan el orden de cada artículo.
 */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/fraunces-normal-400-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/hanken-grotesk-normal-400-700-latin.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2'); }


:root {
  --color-primary: #14304b;
  --color-secondary: #2f6da4;
  --color-slate-blue: #5b7589;

  --color-cta: #c2671e;
  --color-cta-hover: #9e5214;

  --color-text: #353b43;
  --color-surface: #fbfaf7;
  --color-surface-alt: #edf0f3;
  --color-white: #ffffff;

  --color-success: #2e8062;
  --color-error: #b8443a;

  /* Tonos de superficie extendidos */
  --color-surface-warm: #f6f1ea;
  --color-ink: #0e2238;
  --color-cta-light: #e08542;

  --font-body:
    "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-heading: "Fraunces", Georgia, serif;
  --font-mono:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --container: 1200px;
  --container-narrow: 1080px;
  --container-center: 980px;

  --space-section: 130px;
  --space-section-small: 96px;
  --space-page-x: 40px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --border-soft: rgba(91, 117, 137, 0.22);
  --border-soft-dark: rgba(251, 250, 247, 0.18);

  /* Sistema de sombras en capas: nitidez + profundidad */
  --shadow-card-rest:
    0 1px 2px rgba(20, 48, 75, 0.04), 0 4px 12px -4px rgba(20, 48, 75, 0.08),
    0 12px 32px -12px rgba(20, 48, 75, 0.1);
  --shadow-card-hover:
    0 2px 4px rgba(20, 48, 75, 0.06), 0 10px 24px -8px rgba(20, 48, 75, 0.14),
    0 24px 48px -16px rgba(20, 48, 75, 0.18);
  --shadow-soft:
    0 1px 2px rgba(20, 48, 75, 0.04), 0 16px 44px -22px rgba(20, 48, 75, 0.24);

  --shadow-cta:
    inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(20, 48, 75, 0.12),
    0 6px 14px -4px rgba(194, 103, 30, 0.32);
  --shadow-cta-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(20, 48, 75, 0.14),
    0 14px 28px -6px rgba(158, 82, 20, 0.42), 0 0 0 4px rgba(194, 103, 30, 0.12);

  --transition-fast: 160ms ease;
  --transition-base: 200ms ease;
  --transition-soft: 260ms ease;

  /* Curvas de salida para movimientos sutiles */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* 01. Base de página y accesibilidad */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
.article-page {
  --article-accent:var(--color-secondary);
  --article-accent-soft:rgba(47,109,164,.08);
  --article-reading-width:760px;
  --article-wide-width:1080px;
  --article-section-gap:clamp(40px,6vw,72px);
  margin:0; background:var(--color-surface); color:var(--color-text);
  font:400 18px/1.75 var(--font-body); -webkit-font-smoothing:antialiased;
}
.article-page :where(h1,h2,h3,h4,p,figure,blockquote,ul,ol) { margin:0; }
.article-page :where(h1,h2,h3,h4) { color:var(--color-primary); font-family:var(--font-heading); font-weight:600; letter-spacing:-.02em; }
.article-page :where(img,svg,video) { display:block; max-width:100%; height:auto; }
.article-page :where(button,input,textarea,select) { font:inherit; }
.article-page :where(a) { color:var(--color-secondary); text-underline-offset:.22em; }
.article-page a:hover { color:var(--color-primary); }
.article-page :where(.site-brand,.site-nav a,.site-footer a,.btn) { text-decoration:none; }
.article-page :where([id]) { scroll-margin-top:100px; }
.article-page [hidden] { display:none !important; }
.article-page ::selection { background:var(--color-primary); color:var(--color-surface); }
.container { width:100%; max-width:var(--container); margin-inline:auto; }
.article-skip-link { position:fixed; z-index:100; top:10px; left:16px; padding:10px 18px; transform:translateY(-160%); background:var(--color-primary); color:white !important; border-radius:var(--radius-md); }
.article-skip-link:focus { transform:translateY(0); }
.article-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* 02. Contenedores: lectura, ancho editorial y composición opcional */
.article-shell { width:min(calc(100% - var(--space-page-x)*2),var(--article-wide-width)); margin-inline:auto; }
.article-readable { width:min(calc(100% - var(--space-page-x)*2),var(--article-reading-width)); margin-inline:auto; }
.article-shell .article-readable { width:100%; max-width:var(--article-reading-width); }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; }
.article-layout > * { min-width:0; }
.article-layout--aside { grid-template-columns:minmax(0,1fr) 260px; align-items:start; }
.article-layout--aside .article-readable { width:100%; }
.article-sidebar { padding:24px; border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--color-surface-alt); font-size:15px; }

/* 03. Encabezado editorial. Composición neutra, modificable por artículo. */
.article-breadcrumb { padding-block:24px; font-size:14px; line-height:1.5; }
.article-breadcrumb ol { display:flex; flex-wrap:wrap; gap:8px 12px; padding:0; list-style:none; }
.article-breadcrumb li { min-width:0; overflow-wrap:anywhere; }
.article-breadcrumb li + li::before { content:'/'; margin-right:12px; color:var(--color-slate-blue); }
.article-hero { padding-block:clamp(28px,5vw,64px); border-bottom:1px solid var(--border-soft); background:radial-gradient(ellipse at 75% 0%,rgba(47,109,164,.06),transparent 65%); }
.article-kicker { display:flex; align-items:center; gap:12px; margin-bottom:20px; color:var(--color-primary); font:400 11px/1.6 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.article-kicker::before { content:''; width:22px; height:1px; background:currentColor; opacity:.5; flex-shrink:0; }
.article-hero__title { max-width:100%; font-size:clamp(34px,4.8vw,60px); line-height:1.08; text-wrap:balance; overflow-wrap:break-word; }
.article-hero__lead { max-width:760px; margin-top:24px; font-size:clamp(19px,2vw,22px); line-height:1.6; }
.article-hero__meta { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:28px; color:var(--color-text); font-size:14px; }
.article-hero__meta a { font-weight:600; }
.article-main { padding-block:clamp(40px,6vw,72px); }

/* 04. Lectura. Los selectores de baja especificidad permiten CSS propio. */
.article-content { min-width:0; overflow-wrap:break-word; }
.article-content :where(p,ul,ol,figure,blockquote,dl,pre,.article-callout,.article-table-wrap,.article-faq) { margin-block:24px; }
.article-content > :first-child { margin-top:0; }
.article-content :where(section + section) { margin-top:var(--article-section-gap); }
.article-content :where(h2) { margin-block:48px 20px; font-size:clamp(28px,3vw,38px); line-height:1.18; text-wrap:balance; }
.article-content :where(h3) { margin-block:32px 16px; font-size:clamp(23px,2.3vw,28px); line-height:1.3; }
.article-content :where(h4) { margin-block:24px 12px; font-size:21px; line-height:1.35; }
.article-content :where(p) { text-wrap:pretty; }
.article-content :where(ul,ol) { padding-left:1.4em; }
.article-content :where(li + li) { margin-top:12px; }
.article-content :where(li)::marker { color:var(--color-secondary); }
.article-content :where(strong) { font-weight:700; }
.article-content :where(a) { overflow-wrap:anywhere; text-decoration:underline; text-decoration-thickness:1px; }
.article-content :where(hr) { margin-block:40px; border:0; border-top:1px solid var(--border-soft); }
.article-content :where(blockquote) { padding:24px 28px; border-left:3px solid var(--article-accent); background:var(--article-accent-soft); border-radius:0 var(--radius-md) var(--radius-md) 0; }
.article-content :where(blockquote p) { margin-block:0; }
.article-content :where(blockquote cite) { display:block; margin-top:16px; font-size:15px; font-style:normal; }
.article-content :where(code,pre) { font-family:var(--font-mono); font-size:.86em; }
.article-content :where(pre) { overflow-x:auto; padding:20px; background:var(--color-surface-alt); border-radius:var(--radius-md); }
.article-content :where(dt) { font-weight:700; }
.article-content :where(dd) { margin:8px 0 20px; }

/* 05. Bloques opcionales. Cada artículo utiliza sólo los que necesita. */
/* Índice editorial: cabecera breve y recorrido numerado, sin caja de enlaces. */
.article-toc { display:grid; grid-template-columns:170px minmax(0,1fr); gap:24px; padding:28px; margin-bottom:56px; border:0; border-radius:var(--radius-xl); background:linear-gradient(120deg,#eaf1ed 0%,rgba(234,241,237,.28) 100%); }
.article-toc__header { padding-top:12px; }
.article-toc__header .article-kicker { font-size:10px; letter-spacing:.1em; margin-bottom:14px; }
.article-toc h2 { max-width:150px; font-size:27px; line-height:1.15; margin:0; }
.article-toc ol { padding:0; margin:0; list-style:none; counter-reset:article-index; }
.article-toc li { counter-increment:article-index; }
.article-toc li + li { margin-top:0; border-top:1px solid rgba(20,48,75,.12); }
.article-toc a { display:grid; grid-template-columns:25px minmax(0,1fr) 16px; gap:12px; align-items:baseline; padding:16px 0; color:var(--color-primary); font-size:16px; font-weight:500; line-height:1.45; text-decoration:none; }
.article-toc a::before { content:counter(article-index,decimal-leading-zero); color:var(--color-secondary); font:400 11px/1.5 var(--font-mono); }
.article-toc a::after { content:'↓'; color:var(--color-secondary); transition:transform var(--transition-base); }
.article-toc a:hover { color:var(--color-cta-hover); }
.article-toc a:hover::after { transform:translateY(3px); }
.article-toc a:focus-visible { border-radius:4px; }
/* Nota editorial: señal pequeña y contenido destacado, sin franja lateral pesada. */
.article-callout { position:relative; padding:26px 28px 26px 76px; border:1px solid rgba(47,109,164,.15); background:linear-gradient(110deg,rgba(47,109,164,.06),rgba(47,109,164,.015)); border-radius:var(--radius-lg); }
.article-callout::before { content:''; position:absolute; top:29px; left:28px; width:24px; height:24px; border:1px solid var(--article-accent); border-radius:50%; background:radial-gradient(circle,var(--article-accent) 0 3px,transparent 3.5px); }
.article-callout p > strong:first-child { display:block; margin-bottom:8px; color:var(--color-primary); font-size:18px; line-height:1.4; }
.article-callout > :first-child { margin-top:0; }
.article-callout > :last-child { margin-bottom:0; }
.article-callout--warm { --article-accent:var(--color-cta); background:linear-gradient(110deg,#f6f1ea,rgba(246,241,234,.3)); border-color:rgba(194,103,30,.16); }
.article-card { padding:28px; border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-card-rest); }
.article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.article-grid > * { min-width:0; }
.article-figure { overflow:hidden; border:1px solid var(--border-soft); border-radius:var(--radius-lg); }
.article-figure img { width:100%; }
.article-figure figcaption { padding:14px 20px; color:var(--color-text); font-size:14px; line-height:1.6; }
.article-media-placeholder { display:grid; place-content:center; min-height:180px; padding:24px; text-align:center; background:var(--color-surface-alt); color:var(--color-primary); font:400 12px/1.7 var(--font-mono); }
/* Comparativa: superficies claras, etiquetas editoriales y divisores precisos. */
.article-table-wrap { overflow-x:auto; border:1px solid rgba(20,48,75,.12); border-top:2px solid var(--article-accent); border-radius:var(--radius-lg); background:rgba(255,255,255,.66); box-shadow:0 10px 30px -24px rgba(20,48,75,.2); }
.article-table-wrap:focus-visible { outline:2px solid var(--color-secondary); outline-offset:4px; }
.article-content table { width:100%; border-collapse:collapse; text-align:left; font-size:16px; line-height:1.6; }
.article-content caption { padding:23px 24px 20px; text-align:left; font-weight:600; color:var(--color-primary); font-size:17px; }
.article-content thead th { padding:14px 24px; background:rgba(47,109,164,.055); color:var(--color-primary); font:400 10px/1.6 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; }
.article-content tbody th { background:transparent; color:var(--color-primary); font-size:18px; font-weight:600; }
.article-content :where(th,td) { padding:24px; vertical-align:top; min-width:170px; border-bottom:1px solid rgba(20,48,75,.1); }
.article-content tbody tr:nth-child(even) { background:transparent; }
.article-content tbody tr { transition:background-color var(--transition-base); }
.article-content tbody tr:hover { background:rgba(47,109,164,.035); }
.article-content tbody tr:last-child :where(th,td) { border-bottom:0; }
.article-faq details { border-bottom:1px solid var(--border-soft); }
.article-faq summary { padding:20px 6px; color:var(--color-primary); font-weight:600; cursor:pointer; }
.article-faq summary::marker { color:var(--color-secondary); }
.article-faq details > div { padding:0 6px 20px; }
.article-faq details p { margin:0; }

/* 06. Autoría, referencias, navegación y siguiente paso */
.article-author { display:flex; align-items:flex-start; gap:20px; padding-block:32px; margin-top:48px; border-top:1px solid var(--border-soft); }
.article-author img { width:72px; height:72px; object-fit:cover; border-radius:50%; }
.article-author h2 { font-size:24px; line-height:1.3; margin:0 0 8px; }
.article-author p { margin:0; font-size:16px; }
.article-sources { padding-block:28px; border-top:1px solid var(--border-soft); font-size:15px; }
.article-sources h2 { font-size:24px; margin:0 0 16px; }
.article-sources ol { padding-left:1.4em; }
.article-sources a { overflow-wrap:anywhere; }
.article-related { padding-block:32px; border-top:1px solid var(--border-soft); }
.article-related h2 { font-size:28px; margin-bottom:24px; }
.article-related h3 { font-size:23px; line-height:1.3; margin-bottom:12px; }
.article-related p { font-size:16px; }
.article-cta { padding:clamp(28px,5vw,48px); background:#eaf1ed; border:1px solid var(--border-soft); border-radius:var(--radius-xl); }
.article-cta h2 { max-width:680px; font-size:clamp(28px,3.3vw,40px); line-height:1.15; margin-bottom:20px; }
.article-cta p { max-width:720px; margin-bottom:24px; }
.article-cta .btn { white-space:normal; }
.article-cta small { display:block; max-width:720px; margin-top:16px; font-size:14px; }


/* Componentes de marca: portada aprobada */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  isolation: isolate;
  transition:
    transform 280ms var(--ease-out-quint),
    box-shadow 280ms var(--ease-out-quint),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.btn--primary {
  background: linear-gradient(180deg, #d27328 0%, #c2671e 60%, #b15d18 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-cta);
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  transition: opacity 200ms ease;
}

.btn--primary:hover {
  background: linear-gradient(180deg, #c2671e 0%, #ad5916 60%, #9e5214 100%);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

.btn--primary:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

.btn--primary span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 280ms var(--ease-out-quint);
}

.btn--primary:hover span[aria-hidden="true"] {
  transform: translateX(4px);
}

.btn--nav {
  min-height: 42px;
  padding: 11px 20px;
  font-size: 14px;
}

.btn--full {
  width: 100%;
}

.btn--outline-light {
  border-color: rgba(251, 250, 247, 0.4);
  color: var(--color-surface);
  background: transparent;
}

.btn--outline-light:hover {
  border-color: var(--color-surface);
  background: rgba(251, 250, 247, 0.08);
  color: var(--color-surface);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
}

.link-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 14px 4px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
}

.link-action::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 12px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 320ms var(--ease-out-quint);
}

.link-action:hover {
  color: var(--color-cta);
}

.link-action:hover::after {
  transform: scaleX(1);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 247, 0.78);
  border-bottom: 1px solid rgba(91, 117, 137, 0.18);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  background: rgba(251, 250, 247, 0.92);
  border-color: rgba(91, 117, 137, 0.28);
  box-shadow: 0 1px 0 rgba(20, 48, 75, 0.05);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--space-page-x);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
}

.site-brand:hover {
  color: var(--color-primary);
}

.site-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

/* ================================
   NAVBAR | Logo de marca
================================ */

.site-brand__mark.site-brand__mark--logo {
  background: transparent;
  color: inherit;
  padding: 0;
  overflow: visible;
}

.site-brand__mark.site-brand__mark--logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-brand__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

.site-brand__name {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
}

.site-brand__label {
  color: var(--color-slate-blue);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav__toggle {
  display: none;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--color-cta);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 280ms var(--ease-out-quint);
}

.site-nav__link:hover {
  color: var(--color-primary);
}

.site-nav__link:hover::after {
  transform: scaleX(1);
}

.site-footer {
  padding: 64px var(--space-page-x) 40px;
  background: var(--color-primary);
  color: var(--color-surface);
}

.site-footer__inner {
  max-width: var(--container);
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.site-brand__mark--footer {
  background: var(--color-surface);
  color: var(--color-primary);
}

.site-brand__name--footer {
  color: var(--color-surface);
}

.site-brand__label--footer {
  color: rgba(251, 250, 247, 0.6);
}

.site-footer__brand p {
  max-width: 340px;
  color: rgba(251, 250, 247, 0.7);
  font-size: 14.5px;
  line-height: 1.6;
}

.site-footer__column h2 {
  margin-bottom: 18px;
  color: rgba(251, 250, 247, 0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__column ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.site-footer__column a {
  position: relative;
  display: inline-block;
  transition:
    color 200ms ease,
    transform 200ms var(--ease-out-quint);
}

.site-footer__column a:hover {
  color: var(--color-cta);
  transform: translateX(3px);
}

.site-footer__column a,
.site-footer__column li {
  color: rgba(251, 250, 247, 0.78);
  font-size: 14px;
}

.site-footer__column li {
  list-style: none;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(251, 250, 247, 0.16);
}

.site-footer__bottom span {
  color: rgba(251, 250, 247, 0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ================================
   ACCESIBILIDAD | Estados de foco
================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}

.btn:focus-visible {
  outline-color: var(--color-primary);
}

.section--dark .btn:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--color-surface);
}

@media (max-width: 900px) {
  .site-nav {
    position: relative;
  }

  .site-nav__inner {
    padding: 12px var(--space-page-x);
  }

  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(91, 117, 137, 0.24);
    border-radius: var(--radius-md);
    background: rgba(251, 250, 247, 0.8);
    color: var(--color-primary);
  }

  .site-nav__toggle-line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-primary);
    transition:
      transform var(--transition-base),
      opacity var(--transition-base);
  }

  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-line:nth-child(2) {
    opacity: 0;
  }

  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-nav__menu {
    position: absolute;
    top: calc(100% + 1px);
    right: var(--space-page-x);
    left: var(--space-page-x);
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    border: 1px solid rgba(91, 117, 137, 0);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: rgba(251, 250, 247, 0.96);
    box-shadow: 0 18px 40px -28px rgba(20, 48, 75, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
      max-height 260ms ease,
      opacity 200ms ease,
      transform 200ms ease,
      padding 200ms ease,
      border-color 200ms ease;
  }

  .site-nav__menu.is-open {
    max-height: 420px;
    padding: 18px;
    border-color: rgba(91, 117, 137, 0.22);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav__list {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .site-nav__list li {
    border-bottom: 1px solid rgba(91, 117, 137, 0.14);
  }

  .site-nav__list li:last-child {
    border-bottom: 0;
  }

  .site-nav__link {
    display: block;
    min-height: 44px;
    padding: 12px 0;
    font-size: 15px;
  }

  .btn--nav {
    width: 100%;
  }
}


/* 07. Ajustes comunes: navegación accesible, móvil, impresión y movimiento */
.btn { max-width:100%; white-space:normal; }
.article-page .btn--primary { color:var(--color-white); }
.site-nav__link[aria-current]::after { transform:scaleX(1); }
@media (max-width:900px) {
  .site-nav__menu { visibility:hidden; max-height:min(480px,calc(100dvh - 80px)); overflow-y:auto; }
  .site-nav__menu.is-open { visibility:visible; }
  .article-layout--aside { grid-template-columns:minmax(0,1fr); }
  .site-footer__main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
}
@media (max-width:680px) {
  :root { --space-page-x:20px; }
  .article-page { font-size:17px; line-height:1.75; }
  .article-hero__title { font-size:clamp(32px,7vw,42px); }
  .article-grid { grid-template-columns:minmax(0,1fr); }
  .article-card { padding:22px; }
  .article-toc { grid-template-columns:minmax(0,1fr); gap:12px; padding:24px; margin-bottom:40px; }
  .article-toc__header { padding-top:0; }
  .article-toc__header .article-kicker { margin-bottom:10px; }
  .article-toc h2 { max-width:none; font-size:25px; }
  .article-toc a { padding-block:16px; }
  .article-callout { padding:24px 22px 24px 62px; }
  .article-callout::before { top:26px; left:22px; width:22px; height:22px; }
  .article-content :where(th,td) { padding:20px; }
  .article-content thead th { padding:14px 20px; }
  .article-hero__meta { gap:8px 16px; }
  .site-footer { padding-top:48px; }
  .site-footer__main { gap:32px 20px; }
  .site-footer__brand { grid-column:1 / -1; }
}
@media (max-width:390px) {
  :root { --space-page-x:16px; }
  .site-nav__inner { gap:12px; }
  .site-brand__label { font-size:9px; }
  .site-footer__main { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}
@media print {
  .site-header,.site-footer,.article-skip-link,.article-toc,.article-related,.article-cta { display:none; }
  .article-page { background:white; color:black; font-size:11pt; }
  .article-shell,.article-readable { width:100%; max-width:none; }
  .article-hero,.article-main { padding-block:20px; }
  .article-layout--aside { display:block; }
  .article-sidebar { display:none; }
  .article-table-wrap { overflow:visible; }
  .article-content :where(th,td) { min-width:0; padding:8px; }
  .article-card,.article-callout { break-inside:avoid; box-shadow:none; }
  .article-content :where(h2,h3,h4) { break-after:avoid; }
}

/* Colección editorial: presentación de imágenes y módulos comunes */
.article-hero__inner { display:grid; gap:40px; align-items:center; }
.article-hero__visual { margin:0; overflow:hidden; border-radius:24px; background:#edf0f3; }
.article-hero__visual img { width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.article-hero__visual figcaption { padding:12px 18px; font-size:12px; line-height:1.5; color:#353b43; background:#fbfaf7; }
.article-hero .article-kicker a { color:inherit; }
.article-hero__lead { font-size:clamp(18px,1.8vw,21px); }
.article-hero__title { font-size:clamp(34px,4vw,55px); }
.article-steps { padding:0 !important; list-style:none; counter-reset:steps; }
.article-steps li { position:relative; padding:24px 24px 24px 68px; border-bottom:1px solid var(--border-soft); counter-increment:steps; }
.article-steps li::before { position:absolute; top:24px; left:16px; content:counter(steps,decimal-leading-zero); font:400 12px/2 var(--font-mono); color:var(--article-accent); }
.article-content .post-faq { margin-top:40px; }
.article-content .post-faq details { border-bottom:1px solid var(--border-soft); }
.article-content .post-faq summary { cursor:pointer; padding:20px 0; font-weight:600; color:var(--color-primary); }
.post-faq__icon { display:none; }
.post-sources { font-size:15px; }
.article-author img { flex-shrink:0; }
.article-content > section:first-child > h2:first-child { margin-top:0; }
.article-faq { margin-top:48px; }
.article-faq h2 { margin-bottom:20px; }
.article-summary { margin-bottom:40px; }
.article-related .article-card { display:flex; flex-direction:column; gap:12px; }
.article-related .article-card a { text-decoration:underline; text-underline-offset:4px; font-weight:600; }
.article-sources li + li { margin-top:12px; }
@media(max-width:680px) { .article-hero__inner { gap:28px; } .article-hero__visual { border-radius:18px; } }