/* Fuentes alojadas en este dominio (Roboto, licencia SIL OFL): no se contacta con Google. */
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 900; font-style: normal; font-display: swap; src: url('../fonts/roboto-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/roboto-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/roboto-mono-latin-500-normal.woff2') format('woff2'); }

/* Rafael Sanz Prades · sitio nuevo · Roboto */
:root {
  --bg: #ffffff;
  --bg-soft: #f4f6fa;
  --ink: #0e1726;
  --ink-soft: #4a5568;
  --line: #e2e7ef;
  --accent: #d6182b;       /* rojo del logo */
  --accent-ink: #ffffff;
  --accent-soft: #fdecee;
  --tech: #0b3d91;         /* azul técnico */
  --tech-soft: #e8eefb;
  --card: #ffffff;
  --shadow: 0 1px 2px rgba(14,23,38,.06), 0 8px 24px rgba(14,23,38,.06);
  --radius: 14px;
  --max: 1120px;
  --chrome: #ffffff;        /* cabecera y pie: SIEMPRE blancos con texto oscuro, también en modo oscuro */
  --chrome-ink: #0e1726;
  --chrome-soft: #4a5568;
  --chrome-line: #e2e7ef;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --bg-soft: #111a2c; --ink: #e8edf6; --ink-soft: #9fb0c8;
    --line: #22304a; --accent: #ff4757; --accent-soft: #2a1519;
    --tech: #7aa7ff; --tech-soft: #14213d; --card: #0f182a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220; --bg-soft: #111a2c; --ink: #e8edf6; --ink-soft: #9fb0c8;
  --line: #22304a; --accent: #ff4757; --accent-soft: #2a1519;
  --tech: #7aa7ff; --tech-soft: #14213d; --card: #0f182a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--tech); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
.wrap { width: min(100% - 32px, var(--max)); margin-inline: auto; }
.mono { font-family: 'Roboto Mono', ui-monospace, monospace; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.eyebrow {
  font-family: 'Roboto Mono', monospace; font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; display: block;
}
.lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand img { height: 46px; width: auto; border-radius: 4px; display: block; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--chrome-ink); text-decoration: none; font-weight: 500; font-size: .95rem;
  padding: 9px 14px; border-radius: 999px; transition: background .15s, color .15s;
}
.nav a:hover { background: #f4f6fa; color: var(--chrome-ink); }
.nav a[aria-current="page"] { background: var(--chrome-ink); color: #fff; }
.nav-toggle { display: none; background: none; border: 1px solid var(--chrome-line); border-radius: 10px; padding: 8px 12px; color: var(--chrome-ink); font-size: 1.1rem; cursor: pointer; }
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--chrome); padding: 12px 16px 18px; border-bottom: 1px solid var(--chrome-line); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 13px 14px; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 700; font-size: .98rem;
  padding: 13px 22px; border-radius: 999px; border: 2px solid var(--ink); background: transparent;
  color: var(--ink); text-decoration: none; cursor: pointer; transition: transform .12s, background .15s, color .15s;
}
.btn:hover { transform: translateY(-2px); color: var(--ink); background: var(--bg-soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.soon { opacity: .55; pointer-events: none; border-style: dashed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 10vw, 120px) 0 clamp(48px, 8vw, 90px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 400px at 85% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, var(--tech-soft), transparent 60%);
}
.hero::after { /* rejilla técnica */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 48px; align-items: center; }
.hero-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; font-family: 'Roboto Mono', monospace; font-size: .86rem; color: var(--ink-soft);
}
.hero-card .dots { display: flex; gap: 6px; margin-bottom: 14px; }
.hero-card .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.hero-card .dots i:first-child { background: var(--accent); }
.hero-card b { color: var(--ink); }
.hero-card .row { padding: 7px 0; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 12px; }
.hero-card .row:first-of-type { border-top: 0; }
.hero-card .ok { color: #1a9d5a; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Secciones y tarjetas ---------- */
section.block { padding: clamp(48px, 7vw, 88px) 0; }
section.block.soft { background: var(--bg-soft); }
.section-head { max-width: 720px; margin-bottom: 2.4rem; }
.grid { display: grid; gap: 22px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card .ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 16px;
}
.card.tech .ico { background: var(--tech-soft); color: var(--tech); }
.card p { color: var(--ink-soft); }
.card .more { margin-top: auto; font-weight: 700; text-decoration: none; }
.card .more::after { content: " →"; }
.tag {
  display: inline-block; font-family: 'Roboto Mono', monospace; font-size: .72rem; font-weight: 500;
  padding: 3px 10px; border-radius: 999px; background: var(--tech-soft); color: var(--tech); margin: 0 6px 6px 0;
}
.tag.red { background: var(--accent-soft); color: var(--accent); }
.tag.grey { background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line); }

/* ---------- Cabecera de página interior ---------- */
.page-head { padding: clamp(44px, 7vw, 80px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }

/* ---------- Programación: índice dinámico ---------- */
.prog-layout { display: grid; grid-template-columns: 290px 1fr; gap: 40px; align-items: start; padding: 40px 0 80px; }
@media (max-width: 900px) { .prog-layout { grid-template-columns: 1fr; } }
.prog-side { position: sticky; top: 88px; }
@media (max-width: 900px) { .prog-side { position: static; } }
.search {
  width: 100%; font: inherit; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); margin-bottom: 14px;
}
.search:focus { outline: 2px solid var(--accent); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  font: inherit; font-size: .85rem; font-weight: 500; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.toc { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 6px 14px; color: var(--ink-soft); text-decoration: none; font-size: .93rem; border-left: 2px solid transparent; margin-left: -2px; }
.toc a:hover, .toc a.active { color: var(--accent); border-left-color: var(--accent); }
.macro { margin-bottom: 44px; scroll-margin-top: 90px; }
.macro > header { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 18px; }
.macro > header .num { font-family: 'Roboto Mono', monospace; color: var(--accent); font-weight: 500; }
.macro > header h2 { margin: 0; font-size: 1.6rem; }
.macro > header .count { margin-left: auto; font-family: 'Roboto Mono', monospace; font-size: .8rem; color: var(--ink-soft); }
.entry {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  margin-bottom: 10px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.entry:hover { border-color: var(--accent); transform: translateX(3px); color: inherit; }
.entry .n { font-family: 'Roboto Mono', monospace; color: var(--ink-soft); font-size: .9rem; }
.entry h3 { margin: 0 0 2px; font-size: 1.05rem; }
.entry p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.status { font-family: 'Roboto Mono', monospace; font-size: .72rem; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.status.ok { background: #e3f6ec; color: #13774a; }
.status.wip { background: #fff3d6; color: #8a5a00; }
.status.todo { background: var(--bg-soft); color: var(--ink-soft); border: 1px dashed var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .status.ok { background: #0f2a1d; color: #5fd69b; } :root:not([data-theme="light"]) .status.wip { background: #2f2410; color: #f0b54a; } }
.empty { padding: 30px; text-align: center; color: var(--ink-soft); border: 1px dashed var(--line); border-radius: 12px; display: none; }
.note { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 14px 18px; border-radius: 0 10px 10px 0; font-size: .95rem; margin-bottom: 24px; }
@media (max-width: 560px) { .entry { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Taller (Cuaderno FP) ---------- */
.steps { counter-reset: s; display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: 'Roboto Mono', monospace; font-weight: 500; font-size: 1.6rem; color: var(--accent);
}
.step h3 { margin-bottom: .3em; }
.step p { margin: 0 0 .6em; color: var(--ink-soft); }
.layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.layers > div { padding: 24px; border-right: 1px solid var(--line); background: var(--card); }
.layers > div:last-child { border-right: 0; }
.layers .k { font-family: 'Roboto Mono', monospace; font-size: .75rem; color: var(--accent); letter-spacing: .1em; }
@media (max-width: 760px) { .layers { grid-template-columns: 1fr; } .layers > div { border-right: 0; border-bottom: 1px solid var(--line); } }
.cta-band { background: var(--ink); color: var(--bg); border-radius: 20px; padding: clamp(28px, 5vw, 54px); display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.cta-band h2 { color: var(--bg); }
.cta-band p { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.cta-band .btn { border-color: var(--bg); color: var(--bg); }
.cta-band .btn:hover { background: var(--bg); color: var(--ink); }
.cta-band .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 800px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- Currículo ---------- */
.timeline { position: relative; margin-left: 12px; padding-left: 28px; border-left: 2px solid var(--line); }
.tl { position: relative; padding-bottom: 34px; }
.tl::before { content: ""; position: absolute; left: -37px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--accent); }
.tl .year { font-family: 'Roboto Mono', monospace; color: var(--accent); font-weight: 500; font-size: .9rem; }

/* ---------- Prosa (legal, contacto) ---------- */
.prose { max-width: 780px; }
.prose h2 { margin-top: 2em; font-size: 1.5rem; }
.prose h3 { margin-top: 1.5em; font-size: 1.1rem; }
.prose p, .prose li { color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--chrome); color: var(--chrome-soft); padding: 44px 0 30px; margin-top: 0; }
.site-footer a { color: var(--chrome-ink); text-decoration: none; font-weight: 500; }
.site-footer a:hover { color: #d6182b; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--chrome-line); font-size: .85rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-footer { border-top: 1px solid var(--chrome-line); }
.site-footer .logo-chip { height: 54px; width: auto; border-radius: 4px; }

/* ---------- Cookies ---------- */
#cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 720px; margin-inline: auto;
  background: var(--ink); color: var(--bg); padding: 18px 20px; border-radius: 14px; display: none; gap: 14px 20px; align-items: center; flex-wrap: wrap; box-shadow: var(--shadow); font-size: .92rem; }
#cookie p { margin: 0; flex: 1 1 320px; }
#cookie a { color: var(--bg); }
#cookie .acts { display: flex; gap: 10px; }
#cookie button { font: inherit; font-weight: 700; border-radius: 999px; padding: 9px 20px; cursor: pointer; border: 2px solid var(--bg); background: transparent; color: var(--bg); }
#cookie button.yes { background: var(--bg); color: var(--ink); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: 500; text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.entry .ruta { display: inline-block; font-family: 'Roboto Mono', monospace; font-size: .74rem; color: var(--tech); background: var(--tech-soft); padding: 2px 8px; border-radius: 6px; margin-bottom: 6px; }
.subs { margin: 6px 0 0; padding-left: 1.1em; font-size: .9rem; color: var(--ink-soft); }
.subs li { margin: 1px 0; }
.entry { align-items: start; }

/* ---------- Currículo ---------- */
.cv { max-width: 980px; }
.cv h2 { margin-top: .2em; }
.cv h3 { margin-top: 1.8em; }
.cv h3.sub { margin-top: 3em; padding-top: 1.2em; border-top: 2px solid var(--ink); font-size: 1.6rem; }
.cv h4 { margin-top: 1.4em; color: var(--accent); }
.cv ul { color: var(--ink-soft); padding-left: 1.2em; }
.cv-intro { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.avatar { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
@media (max-width: 640px) { .cv-intro { grid-template-columns: 1fr; } }
a.chip { text-decoration: none; display: inline-block; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 1.2em 0 1.6em; }
.gallery figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.gallery img { width: 100%; height: auto; }
.gallery figcaption { padding: 12px 14px; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }

/* ---------- Accesibilidad ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 0 0 10px 10px; text-decoration: none; font-weight: 700; transition: top .15s; }
.skip:focus { top: 0; color: var(--bg); }

/* ---------- Legal (pestañas + índice) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tab { font: inherit; font-weight: 700; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.legal-index { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .92rem; }
.legal-index a { color: var(--ink-soft); text-decoration: none; }
.legal-index a:hover { color: var(--accent); }
.panel[hidden] { display: none; }
.legal-body { max-width: 860px; padding: 40px 0 90px; }
.legal-body section { scroll-margin-top: 90px; margin-bottom: 2.6rem; }
.legal-body h2 { display: flex; gap: 14px; align-items: baseline; font-size: 1.5rem; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.legal-body h2 .num { font-family: 'Roboto Mono', monospace; color: var(--accent); font-weight: 500; font-size: 1.1rem; }
.legal-body h3 { margin-top: 1.6em; font-size: 1.1rem; }
.legal-body p, .legal-body li { color: var(--ink-soft); }
.legal-body li { margin: .25em 0; }
.legal-body strong { color: var(--ink); }
.legal-body code { font-family: 'Roboto Mono', monospace; font-size: .86em; background: var(--bg-soft); padding: 1px 6px; border-radius: 5px; }
.callout { border: 1px solid var(--line); border-left: 4px solid var(--tech); background: var(--tech-soft); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 1em 0; }
.callout.warn { border-left-color: var(--accent); background: var(--accent-soft); }
.callout p { margin: 0 0 .5em; color: var(--ink); }
.callout p:last-child { margin: 0; }
.table-wrap { overflow-x: auto; margin: 1em 0; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
.legal-body th, .legal-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-body th { color: var(--ink); background: var(--bg-soft); }
.legal-body .yes::before { content: "✔ "; color: #1a9d5a; }
.legal-body .no::before { content: "✘ "; color: var(--accent); }
.fecha { font-family: 'Roboto Mono', monospace; font-size: .8rem; color: var(--ink-soft); }

/* ---- Artículos de la guía (/guia/*.html) ---- */
.post-layout { padding-block: 28px 56px; max-width: 820px; }
.crumbs { font-size: .9rem; color: var(--ink-soft); margin-bottom: 18px; }
.post { font-size: 1.05rem; line-height: 1.7; }
.post h2 { margin: 2em 0 .5em; font-size: 1.5rem; padding-top: .4em; border-top: 1px solid var(--line); }
.post h3 { margin: 1.6em 0 .4em; font-size: 1.15rem; }
.post p, .post ul, .post ol, .post blockquote, .post figure { margin: 0 0 1.1em; }
.post ul, .post ol { padding-left: 1.4em; }
.post img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.post figure { margin-inline: 0; }
.post blockquote { border-left: 4px solid var(--accent); padding: 6px 16px; background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.post code, .ruta { font-family: 'Roboto Mono', monospace; font-size: .9em; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.post-nav a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; flex: 1 1 260px; background: var(--card); }
.post-nav a:hover { border-color: var(--accent); }
.post-nav .next { text-align: right; }
.post-nav span { font-family: 'Roboto Mono', monospace; font-size: .75rem; color: var(--ink-soft); }

/* ---- Imagen suelta a la derecha, encajada con el texto (currículo) ---- */
.media-row::after { content: ""; display: block; clear: both; }
.media-row > figure { float: right; width: min(40%, 340px); margin: .4em 0 1em 1.8em; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.media-row > figure img { width: 100%; height: auto; display: block; }
.media-row > h3:first-of-type, .media-row > h4:first-of-type { margin-top: 0; }
@media (max-width: 640px) { .media-row > figure { float: none; width: 100%; margin: 1em 0; } }

/* ---- Currículo: texto a la izquierda y botones a la derecha, alineados ---- */
.cv-lead { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.cv-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.cv-actions .btn { white-space: nowrap; justify-content: center; }
@media (max-width: 760px) { .cv-lead { grid-template-columns: 1fr; gap: 16px; } .cv-actions { flex-direction: row; flex-wrap: wrap; } }

/* ---- Artículos: normas, recuadros, tablas, referencias ---- */
.post a.ley, .post blockquote.ley, .post blockquote.ley p { color: #0b3d91; font-weight: 700; }
:root[data-theme="dark"] .post a.ley, :root[data-theme="dark"] .post blockquote.ley, :root[data-theme="dark"] .post blockquote.ley p { color: #7aa7ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .post a.ley, :root:not([data-theme="light"]) .post blockquote.ley, :root:not([data-theme="light"]) .post blockquote.ley p { color: #7aa7ff; } }
.post blockquote.ley { border-left: 4px solid #0b3d91; background: var(--tech-soft); }
.post blockquote.ley .callout-t, .callout-t { display: block; font-family: 'Roboto Mono', monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin-bottom: 4px; }
.callout { border: 1px solid var(--line); border-left-width: 4px; border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0 0 1.2em; background: var(--bg-soft); }
.callout.consejo { border-left-color: #13774a; }
.callout.debate { border-left-color: #8a5a00; }
.callout.pregunta { border-left-color: var(--accent); }
.callout > :last-child { margin-bottom: 0; }
.tabla { overflow-x: auto; margin: 0 0 1.4em; }
.post table { border-collapse: collapse; width: 100%; font-size: .96rem; }
.post th, .post td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.post th { background: var(--bg-soft); }
.post .refs { font-size: .95rem; }
.post .refs p, .post .refs li { padding-left: 2em; text-indent: -2em; margin-bottom: .7em; list-style: none; }
.post .refs ul, .post .refs ol { padding-left: 0; }
.revision { font-family: 'Roboto Mono', monospace; font-size: .8rem; color: var(--ink-soft); margin: 0 0 18px; }

/* Capturas de la app (tema oscuro): marquito fino blanco para separarlas del fondo */
img[src*="images/app/"] { border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }

/* ---- Pie mínimo: misma altura que la cabecera ---- */
.site-footer { padding: 0; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 68px; padding-block: 10px; flex-wrap: wrap; }
.foot-id { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.foot-sub { display: flex; gap: 14px; font-size: .85rem; }
.site-footer .foot-links { gap: 18px; font-size: .85rem; }
@media (max-width: 640px) { .foot-row { padding-block: 14px; } .site-footer .foot-links { gap: 12px; } }


/* ---- Compromiso de gratuidad ---- */
.gratis { background: var(--accent-soft); border-block: 1px solid var(--line); padding: clamp(36px, 6vw, 64px) 0; }
.gratis h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin: .1em 0 .3em; color: var(--accent); }
.gratis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 1.6em 0 1em; }
.gratis-grid h3 { margin: 0 0 .3em; font-size: 1.05rem; }
.gratis-grid p { margin: 0; color: var(--ink-soft); }
.gratis .small { font-size: .88rem; color: var(--ink-soft); max-width: 78ch; }

/* Insignia «En obras»: dentro de las páginas que están en construcción (no en la cabecera) */
.page-head .wrap, .hero > .wrap { position: relative; }
.obras { position: absolute; top: 0; right: 0; font-family: 'Roboto Mono', monospace; font-size: .75rem; font-weight: 500; color: #c2410c; border: 1px solid #f59e0b; background: #fff7ed; border-radius: 8px; padding: 5px 10px; white-space: nowrap; }
@media (max-width: 640px) { .obras { position: static; display: inline-block; margin-bottom: 10px; } }

/* Pie: nombre arriba a la derecha; abajo, enlaces a izquierda y derecha */
.foot-grid2 { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "top top" "left right"; gap: 6px 24px; align-items: end; padding-block: 12px; }
.foot-top { grid-area: top; justify-self: start; font-size: .85rem; }
.foot-left { grid-area: left; justify-self: start; display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; }
.foot-right { grid-area: right; justify-self: end; display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; font-size: .85rem; }
@media (max-width: 760px) { .foot-grid2 { grid-template-columns: 1fr; grid-template-areas: "top" "left" "right"; } .foot-top, .foot-left, .foot-right { justify-self: start; justify-content: flex-start; } }
.foot-right .link-btn { text-decoration: none; }

.site-footer .ico-link { display: inline-flex; align-items: center; gap: 6px; }
.site-footer .ico-link svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Ritmo vertical común (2026-10-11) ----------
   Mismo espacio entre cabecera y título en todas las páginas (hero y page-head),
   mismo arranque del contenido bajo la cabecera y mismo cierre antes del pie. */
:root { --sec-y: clamp(48px, 7vw, 88px); --head-gap: clamp(28px, 4vw, 44px); }
.hero { padding-top: clamp(44px, 7vw, 80px); }
.gratis { padding-block: var(--sec-y); }
.prog-layout { padding: var(--head-gap) 0 var(--sec-y); }
.legal-body { padding: var(--head-gap) 0 var(--sec-y); }
.post-layout { padding-block: var(--head-gap) var(--sec-y); }
.page-head + section.block { padding-top: var(--head-gap); }