/* Blog estático (/blog/ y /blog/<slug>/), generado por tools/blog.js.
   Se carga después de styles.css y ui-system.css y reutiliza sus tokens; solo
   añade lo propio de la lectura larga: columna de ~68 caracteres, ritmo de
   párrafos y listas de artículos. La web solo tiene tema claro. */

.blog-page{background:var(--bg,#f5f6f2);color:var(--text,#20362f);min-height:100vh}
.blog-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.blog-brand{text-decoration:none;color:inherit}
.blog-topnav{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex:0 0 auto}
.blog-topnav .btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
/* En móvil sobra el enlace "Blog" (ya estás en él) y el subtítulo de la
   marca: así la barra cabe en una sola línea hasta 320 px. */
@media (max-width:560px){
  .blog-topnav a[href$="blog/"]:not(.btn),.blog-brand small{display:none}
  .blog-topnav a:not(.btn){padding:8px}
}
/* Por debajo de 420 px tampoco cabe "Test gratis" junto a la marca; sigue
   al final de cada artículo y en la portada. */
@media (max-width:420px){.blog-topnav a:not(.btn){display:none}}
.blog-topnav a:not(.btn){color:var(--text,#20362f);text-decoration:none;font-weight:600;font-size:14px;padding:8px 12px;border-radius:var(--radius-sm,8px)}
.blog-topnav a:not(.btn):hover{background:var(--panel-2,#f1f5f2)}

.blog-main{max-width:1080px;margin:0 auto;padding:32px 16px 72px}
@media (min-width:720px){.blog-main{padding:44px clamp(16px,3vw,32px) 88px}}

.blog-hero{max-width:720px;margin:0 0 32px}
.blog-title{font-family:var(--font-display,system-ui,sans-serif);font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-1.2px;font-weight:700;margin:8px 0 14px;color:var(--text,#20362f);text-wrap:balance}
.blog-title em{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:italic;color:var(--orange,#17634d);letter-spacing:-.5px}
.blog-hero .lead,.blog-article-header .lead{font-size:17px;line-height:1.6;max-width:640px;margin:0}

/* Listado de artículos */
.blog-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:720px){.blog-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.blog-card a{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 22px 24px;background:var(--panel,#fff);border:1px solid var(--border,#dce5de);border-radius:var(--radius-lg,20px);text-decoration:none;color:inherit;box-shadow:var(--shadow-card-rest,none);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.blog-card a:hover{box-shadow:var(--shadow-card-hover,0 12px 30px #20362f0d);border-color:var(--color-accent-300,#24765d);transform:translateY(-2px)}
.blog-card a:focus-visible{outline:3px solid var(--orange,#17634d);outline-offset:3px}
.blog-card-meta{font-size:12px;color:var(--muted,#53665b);letter-spacing:.2px}
.blog-card-title{font-size:20px;line-height:1.25;letter-spacing:-.3px;color:var(--text,#20362f)}
.blog-card-desc{font-size:15px;line-height:1.55;color:var(--muted,#53665b)}
.blog-draft{display:inline-block;padding:1px 7px;border-radius:999px;background:#fff4d6;color:#7a5200;font-size:11px;font-weight:700}

/* Artículo */
.blog-breadcrumb{display:flex;gap:8px;font-size:13px;color:var(--muted,#53665b);max-width:720px;margin:0 auto 20px}
.blog-breadcrumb a{color:inherit}
.blog-article{max-width:720px;margin:0 auto}
.blog-article-header{margin-bottom:28px}
.blog-meta{font-size:13px;color:var(--muted,#53665b);margin:16px 0 0}

.blog-toc{background:var(--panel,#fff);border:1px solid var(--border,#dce5de);border-radius:var(--radius-md,14px);padding:16px 20px;margin:0 0 32px}
.blog-toc strong{display:block;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--orange,#17634d);margin-bottom:8px}
.blog-toc ol{margin:0;padding-left:20px;display:grid;gap:4px}
.blog-toc a{color:var(--text,#20362f);font-size:15px}

.blog-prose{font-size:17px;line-height:1.75;color:var(--text,#20362f)}
.blog-prose>*{margin:0 0 1.1em}
.blog-prose h2{font-family:var(--font-display,system-ui,sans-serif);font-size:clamp(23px,3vw,28px);line-height:1.2;letter-spacing:-.5px;margin:1.9em 0 .6em;scroll-margin-top:24px}
.blog-prose h3{font-size:19px;line-height:1.3;margin:1.5em 0 .5em;scroll-margin-top:24px}
.blog-prose ul,.blog-prose ol{padding-left:1.3em}
.blog-prose li{margin:.35em 0}
.blog-prose li::marker{color:var(--orange,#17634d)}
.blog-prose a{color:var(--orange,#17634d);text-underline-offset:3px}
.blog-prose strong{color:var(--color-neutral-100,#20362f)}
.blog-prose blockquote{margin:1.5em 0;padding:4px 0 4px 18px;border-left:3px solid var(--orange,#17634d);color:var(--color-neutral-200,#354b42)}
.blog-prose blockquote p{margin:0;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:19px;line-height:1.6}
.blog-prose hr{border:0;border-top:1px solid var(--border,#dce5de);margin:2em 0}
.blog-prose code{font-size:.9em;background:var(--panel-2,#f1f5f2);padding:1px 5px;border-radius:5px}

.blog-cta{display:flex;flex-direction:column;gap:16px;margin:40px 0 0;padding:24px;background:var(--panel,#fff);border:1px solid var(--border,#dce5de);border-radius:var(--radius-lg,20px)}
.blog-cta strong{font-size:19px}
.blog-cta p{margin:6px 0 0;color:var(--muted,#53665b);line-height:1.55}
.blog-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:720px){.blog-cta{flex-direction:row;align-items:center;justify-content:space-between}.blog-cta-actions{flex:0 0 auto}}

.blog-related{max-width:1080px;margin:64px auto 0}
.blog-related .section-title{margin-bottom:16px}

.blog-footer{border-top:1px solid var(--border,#dce5de);padding:24px 16px 40px;text-align:center;font-size:13px;color:var(--muted,#53665b)}
.blog-footer a{color:inherit}

@media (prefers-reduced-motion:reduce){.blog-card a{transition:none}.blog-card a:hover{transform:none}}

/* Índice y categorías: navegación por secciones, artículo destacado y un
   bloque por categoría con su descripción y enlace a la página completa. */
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.blog-cats a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border,#dce5de);border-radius:999px;background:var(--panel,#fff);color:var(--text,#20362f);text-decoration:none;font-size:14px;font-weight:600}
.blog-cats a span{font-size:12px;font-weight:700;color:var(--muted,#53665b);background:var(--panel-2,#f1f5f2);border-radius:999px;padding:1px 7px}
.blog-cats a:hover{border-color:var(--color-accent-300,#24765d)}
.blog-cats a[aria-current="page"]{background:var(--orange,#17634d);border-color:var(--orange,#17634d);color:#fff}
.blog-cats a[aria-current="page"] span{background:#ffffff26;color:#fff}
.blog-cats a:focus-visible{outline:3px solid var(--orange,#17634d);outline-offset:2px}
.blog-card-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--orange,#17634d)}
.blog-card-meta{margin-top:auto;padding-top:6px}
/* Dentro de una sección o de la página de su categoría, la etiqueta repetiría
   el título que ya está encima. */
.blog-section .blog-card-tag,.blog-list-category .blog-card-tag{display:none}
.blog-featured{margin:0 0 8px}
@media (min-width:720px){.blog-list-featured{grid-template-columns:1fr}}
.blog-card-featured a{padding:28px 28px 30px;background:linear-gradient(135deg,var(--panel,#fff) 55%,var(--panel-2,#f1f5f2))}
.blog-card-featured .blog-card-title{font-family:var(--font-display,system-ui,sans-serif);font-size:clamp(22px,3vw,30px);line-height:1.18;letter-spacing:-.6px}
.blog-card-featured .blog-card-desc{font-size:16px;max-width:680px}
.blog-section{margin:56px 0 0}
.blog-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border,#dce5de)}
.blog-section-head .section-title{margin:0 0 4px}
.blog-section-head p{margin:0;max-width:620px;color:var(--muted,#53665b);font-size:15px;line-height:1.55}
.blog-section-more{color:var(--orange,#17634d);font-weight:700;font-size:14px;text-underline-offset:3px;white-space:nowrap}
@media (min-width:1000px){.blog-section .blog-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.blog-breadcrumb-wide{max-width:none;margin:0 0 20px}
.blog-kicker-link{display:inline-block;text-decoration:none}
.blog-kicker-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Página pública de cada oposición (/oposiciones/<slug>/), generada por
   buildOppositionPageHtml en tools/prepare-frontend-seo.js con la misma
   estructura que el blog. */
.opp-breadcrumb{margin:0 0 20px}
.opp-hero{max-width:760px}
.opp-hero .blog-cta-actions{margin-top:22px}
.opp-facts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.opp-facts li{display:flex;flex-direction:column;gap:2px;min-width:120px;padding:12px 16px;background:var(--panel,#fff);border:1px solid var(--border,#dce5de);border-radius:var(--radius-md,14px)}
.opp-facts strong{font-family:var(--font-display,system-ui,sans-serif);font-size:24px;line-height:1.1;color:var(--orange,#17634d)}
.opp-facts span{font-size:13px;color:var(--muted,#53665b)}
.opp-section{margin:48px 0 0;max-width:860px}
.opp-section .section-title{margin-bottom:12px}
.opp-features{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:720px){.opp-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opp-features li{display:flex;flex-direction:column;gap:4px;padding:18px 20px;background:var(--panel,#fff);border:1px solid var(--border,#dce5de);border-radius:var(--radius-md,14px)}
.opp-features strong{font-size:16px}
.opp-features span{font-size:15px;line-height:1.55;color:var(--muted,#53665b)}
.opp-topics{margin:16px 0 0;padding:18px 20px 18px 48px;background:var(--panel,#fff);border:1px solid var(--border,#dce5de);border-radius:var(--radius-md,14px);display:grid;gap:6px;font-size:15px;line-height:1.5}
.opp-topics li::marker{color:var(--orange,#17634d);font-weight:700}
.opp-steps{margin:0;padding-left:1.3em;display:grid;gap:8px;font-size:16px;line-height:1.6}
.opp-steps li::marker{color:var(--orange,#17634d);font-weight:700}
.opp-others{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.opp-others a{display:inline-flex;padding:10px 14px;background:var(--panel,#fff);border:1px solid var(--border,#dce5de);border-radius:999px;color:var(--text,#20362f);text-decoration:none;font-weight:600;font-size:14px}
.opp-others a:hover{border-color:var(--color-accent-300,#24765d)}
.opp-page .blog-cta{max-width:860px}