/* ==========================================================================
   Colombia House Blog · tema 1.0.0
   Tokens y componentes del prototipo aprobado (24-sep-2026), sistema "web" del sitio en vivo:
   Inter, azules sky, grises slate y amber. Solo modo claro (el sitio principal no tiene modo oscuro).
   Contrastes medidos: propuesta-estructura.md §6. Sin Tailwind, sin CDN, sin estilos en línea.
   ========================================================================== */

/* ---------- Inter servida desde el propio dominio (SIL OFL 1.1, assets/fonts/OFL.txt) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  --barra-admin: 0px;             /* barra de WordPress para usuarios con sesión */
  --cab-alto: 72px;               /* 80px desde 1180px, como el sitio */
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fondo: #FFFFFF; --fondo-suave: #F8FAFC; --fondo-tarjeta: #F1F5F9;
  --texto: #0F172A; --texto-prosa: #1E293B; --texto-2: #334155; --texto-3: #475569;
  --primario: #0284C7;            /* azul del sitio: solo bordes, íconos y acentos */
  --enlace: #0369A1; --enlace-hover: #075985;
  --cab-fondo: #0369A1;           /* corrección de contraste: el sitio usa #0284C7 */
  --cab-hover: #075985; --panel-fondo: #082F49;
  --amber: #FBBF24; --amber-hover: #F59E0B; --sobre-amber: #0F172A;
  --wa: #25D366; --wa-texto: #0F172A;
  --pie-fondo: #0F172A; --pie-texto: #CBD5E1; --pie-legal: #020617;
  --borde: #E2E8F0; --borde-2: #CBD5E1; --borde-control: #64748B;
  --chip-fondo: #E0F2FE; --chip-texto: #075985; --ceja: #075985; --migas: #0C4A6E;
  --foco: #0369A1; --foco-oscuro: #FDE68A; --foco-pie: #7DD3FC;
  --degradado: linear-gradient(180deg, #CBE2F8 0%, #F1F5F9 100%);
  --radio-s: 6px; --radio-m: 10px; --radio-l: 16px; --radio-xl: 20px;
  --sombra-1: 0 1px 2px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .10);
  --sombra-2: 0 12px 28px -8px rgb(15 23 42 / .18), 0 2px 6px rgb(15 23 42 / .06);
  --ancho: 72rem; --ancho-lectura: 40rem; --ancho-articulo: 72rem;
  --transicion: 160ms ease-out;
  color-scheme: light;
}
@media (min-width: 1180px) { :root { --cab-alto: 80px; } }
/* La barra de WordPress es fija desde 601 px (32 px en escritorio, 46 px en tableta). */
:root:has(body.admin-bar) { --barra-admin: 32px; }
@media (max-width: 782px) { :root:has(body.admin-bar) { --barra-admin: 46px; } }
@media (max-width: 600px) { :root:has(body.admin-bar) { --barra-admin: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--fuente); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--barra-admin) + var(--cab-alto) + 16px); }
body { margin: 0; background: var(--fondo); color: var(--texto); font-size: 1.0625rem; line-height: 1.6; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; } /* la regla que WordPress 6.7+ imprime en línea */
h1, h2, h3 { margin: 0; line-height: 1.2; color: var(--texto); letter-spacing: -0.015em; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--enlace-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .contenedor { padding-inline: 24px; } }
@media (min-width: 1024px) { .contenedor { padding-inline: 32px; } }
svg { flex-shrink: 0; }
summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
summary::-webkit-details-marker { display: none; }
details[open] > summary .chev { transform: rotate(180deg); }
.chev { transition: transform var(--transicion); }

/* ---------- Saltar al contenido ---------- */
.saltar { position: fixed; left: 16px; top: calc(var(--barra-admin) + 12px); z-index: 1001; padding: 10px 16px; border-radius: 8px;
  background: #fff; color: var(--enlace); font-weight: 700; box-shadow: var(--sombra-2); }
.saltar:not(:focus) { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   CABECERA (misma estructura y enlaces que nuevoheader.php)
   ========================================================================== */
.cab { position: sticky; top: var(--barra-admin); z-index: 900; background: var(--cab-fondo); color: #fff;
  border-bottom: 1px solid var(--cab-hover); box-shadow: 0 2px 8px rgb(15 23 42 / .18); }
.cab-interior { position: relative; max-width: 80rem; margin: 0 auto; height: var(--cab-alto); padding: 0 12px 0 16px; display: flex; align-items: center; gap: 16px; }
@media (min-width: 1024px) { .cab-interior { padding: 0 32px; } }
.cab :focus-visible { outline-color: var(--foco-oscuro); }
.cab-logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 6px; margin-right: auto; }
.cab-logo img { height: 60px; width: auto; }
.cab-logo-texto { color: #fff; font-weight: 700; text-decoration: none; }
@media (min-width: 1180px) { .cab-logo { margin-right: 0; } .cab-logo img { height: 64px; } }

.nav-escritorio { display: none; }
.cab-acciones { display: none; }
@media (min-width: 1180px) {
  .nav-escritorio { display: block; flex: 1; }
  .cab-acciones { display: flex; gap: 8px; align-items: center; }
  .menu-movil { display: none; }
}
.nav-escritorio > ul { display: flex; justify-content: center; gap: 2px; list-style: none; }
.nav-enlace, .nav-escritorio summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 8px;
  color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.nav-enlace:hover, .nav-escritorio summary:hover, .nav-escritorio details[open] > summary { background: var(--cab-hover); color: #fff; text-decoration: none; }
.nav-enlace[aria-current] { box-shadow: inset 0 -3px 0 var(--foco-oscuro); }
.submenu { position: relative; }
.submenu-panel { position: absolute; top: calc(100% + 12px); left: 0; min-width: 17rem; z-index: 950; list-style: none; padding: 8px;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-2); }
.submenu-panel a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--texto);
  text-decoration: none; font-size: .9375rem; white-space: nowrap; }
.submenu-panel li:first-child a { font-weight: 600; }
.submenu-panel a:hover { background: var(--fondo-tarjeta); color: var(--enlace); }
.submenu-panel :focus-visible { outline-color: var(--foco); outline-offset: -3px; }

.btn-amber { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px;
  background: var(--amber); color: var(--sobre-amber); font-weight: 700; font-size: .8125rem; letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; box-shadow: var(--sombra-1); white-space: nowrap; }
.btn-amber:hover { background: var(--amber-hover); color: var(--sobre-amber); text-decoration: none; }

/* Menú móvil: <details> nativo, abre y cierra sin JavaScript */
.menu-movil > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgb(255 255 255 / .6); color: #fff; font-weight: 600; font-size: .9375rem; }
.menu-movil[open] > summary, .menu-movil > summary:hover { background: var(--cab-hover); }
.menu-movil .ico-cerrar { display: none; }
.menu-movil[open] .ico-cerrar { display: block; }
.menu-movil[open] .ico-abrir { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel-fondo); padding: 8px 16px 24px;
  max-height: calc(100vh - var(--barra-admin) - var(--cab-alto)); max-height: calc(100dvh - var(--barra-admin) - var(--cab-alto)); overflow-y: auto;
  box-shadow: 0 16px 32px rgb(2 6 23 / .4); border-top: 1px solid rgb(255 255 255 / .12); }
.mp-lista { list-style: none; max-width: 40rem; margin: 0 auto; }
.mp-lista > li { border-bottom: 1px solid rgb(255 255 255 / .14); }
.mp-lista > li > a, .mp-grupo > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: #fff;
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; padding: 0 4px; border-radius: 6px; }
.mp-lista a[aria-current] { color: var(--foco-oscuro); }
.mp-grupo ul { list-style: none; padding: 0 0 12px 12px; }
.mp-grupo ul a { display: flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; font-size: 1rem; padding: 0 4px; border-radius: 6px; }
.mp-grupo ul a:hover, .mp-lista > li > a:hover { text-decoration: underline; color: #fff; }
.mp-rotulo { display: block; max-width: 40rem; color: #BAE6FD; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 20px auto 10px; padding: 0 4px; }
.mp-acciones { display: grid; gap: 10px; max-width: 40rem; margin: 0 auto; }
.mp-acciones .btn-amber { min-height: 48px; font-size: .875rem; }

/* ==========================================================================
   BARRA DEL BLOG (categorías)
   ========================================================================== */
.blogbar { background: #fff; border-bottom: 1px solid var(--borde); }
.chips { display: flex; gap: 6px; list-style: none; overflow-x: auto; padding: 12px 4px; scrollbar-width: thin; }
@media (min-width: 1024px) { .chips { flex-wrap: wrap; overflow: visible; } }
.chip-nav { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--borde-2); background: #fff; color: var(--texto-2); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.chip-nav:hover { border-color: var(--enlace); color: var(--enlace); text-decoration: none; }
.chip-nav[aria-current] { background: var(--enlace); border-color: var(--enlace); color: #fff; }
.chip-nav[aria-current]:hover { color: #fff; }
.chip-nav .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-hover); }

/* ==========================================================================
   ENCABEZADOS DE VISTA (mismo degradado del hero de la portada del sitio)
   ========================================================================== */
.cabecera-blog { background: var(--degradado); padding: 20px 0 32px; }
@media (min-width: 768px) { .cabecera-blog { padding: 28px 0 48px; } }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; list-style: none; font-size: .875rem; color: var(--migas); }
.migas a, .migas [aria-current] { display: inline-flex; align-items: center; min-height: 24px; color: var(--migas); }
.migas [aria-current] { font-weight: 600; }
.migas .sep { color: var(--texto-3); margin-right: 8px; }
.ceja { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ceja); }
.cabecera-blog .ceja { margin-top: 18px; }
@media (min-width: 768px) { .cabecera-blog .ceja { margin-top: 24px; } }
.h1-blog { font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -.025em; margin: 10px 0 14px; max-width: 16em; overflow-wrap: anywhere; }
.bajada { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--texto-2); max-width: 40rem; }
.bajada p + p { margin-top: .6em; }
.firma-blog { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; color: var(--texto-2); font-size: .875rem; }
@media (min-width: 768px) { .firma-blog { font-size: .9375rem; } }
.firma-blog span { display: inline-flex; align-items: center; gap: 8px; }
.firma-blog svg { color: var(--enlace); }

/* Buscador (formulario GET nativo: action = portada del blog, name = s) */
.buscador { margin-top: 24px; max-width: 34rem; }
.buscador label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 6px; color: var(--texto); }
.buscador-fila { display: flex; }
.buscador input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--borde-control); border-right: 0; border-radius: 10px 0 0 10px;
  font: inherit; font-size: 1.0625rem; color: var(--texto); background: #fff; -webkit-appearance: none; appearance: none; }
.buscador input::placeholder { color: #64748B; opacity: 1; }
.buscador input::-webkit-search-decoration { -webkit-appearance: none; }
.buscador button { height: 48px; padding: 0 18px; border: 1px solid var(--enlace); border-radius: 0 10px 10px 0; background: var(--enlace); color: #fff;
  font: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.buscador button:hover { background: var(--enlace-hover); }
.buscador input:focus-visible, .buscador button:focus-visible { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .cabecera-blog .contenedor { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 56px; }
  .cabecera-blog .contenedor > * { grid-column: 1; }
  .cabecera-blog .contenedor > .buscador { grid-column: 2; grid-row: 2 / span 4; align-self: end; margin: 0; padding: 22px 22px 24px;
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-2); }
}

/* ==========================================================================
   COMPONENTES EDITORIALES
   ========================================================================== */
.chip { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 999px;
  background: var(--chip-fondo); color: var(--chip-texto); font-size: .8125rem; font-weight: 600; text-decoration: none; line-height: 1.3; }
a.chip:hover { background: #BAE6FD; color: var(--chip-texto); text-decoration: none; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--texto-3); font-size: .875rem; }
.meta span, .meta time { display: inline-flex; align-items: center; gap: 6px; }
.meta .sep { color: var(--borde-2); }
.media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #E2E8F0 url("../img/casa.svg") center / 44px no-repeat; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--enlace); color: #fff;
  font-weight: 700; font-size: .9375rem; letter-spacing: .02em; flex-shrink: 0; }
img.avatar { object-fit: cover; }
.autor-linea { display: flex; align-items: center; gap: 12px; }
.autor-nombre { font-weight: 600; color: var(--texto); font-size: .9375rem; line-height: 1.35; }
.autor-cargo { color: var(--texto-3); font-size: .875rem; line-height: 1.35; }

/* Artículo destacado */
.destacado { padding: 32px 0 40px; }
.destacado-art { position: relative; display: grid; gap: 20px; }
@media (min-width: 900px) { .destacado-art { grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; } }
.destacado .media { border-radius: var(--radio-l); aspect-ratio: 16 / 10; }
.destacado-cuerpo { display: grid; gap: 14px; justify-items: start; }
.destacado h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.18; letter-spacing: -.02em; }
.destacado h2 a { color: var(--texto); text-decoration: none; }
.destacado h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio-l); }
.destacado-art:hover h2 a { text-decoration: underline; text-decoration-thickness: 2px; }
.destacado-extracto { font-size: 1.0625rem; color: var(--texto-2); line-height: 1.6; max-width: 36rem; }
.destacado-pie { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding-top: 4px; }

/* Rejilla de tarjetas: 1 columna en móvil, 2 en tableta, 3 en escritorio */
.seccion { padding: 48px 0; }
@media (min-width: 1024px) { .seccion { padding: 72px 0; } }
.seccion-suave { background: var(--fondo-suave); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.seccion-titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.seccion-titulo h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); }
.seccion-titulo p { color: var(--texto-3); font-size: .9375rem; }
.rejilla { display: grid; gap: 24px; list-style: none; }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.tarjeta { position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio-l); overflow: hidden; box-shadow: var(--sombra-1); transition: box-shadow var(--transicion), transform var(--transicion); }
.tarjeta:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.tarjeta-cuerpo { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; align-items: flex-start; }
.tarjeta h2, .tarjeta h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.01em; }
.tarjeta h2 a, .tarjeta h3 a { color: var(--texto); text-decoration: none; }
.tarjeta h2 a::after, .tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.tarjeta:hover h2 a, .tarjeta:hover h3 a { text-decoration: underline; }
.tarjeta:focus-within { box-shadow: var(--sombra-2); }
.tarjeta-extracto { color: var(--texto-2); font-size: .9688rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta .meta { margin-top: auto; padding-top: 6px; }
.vacio { color: var(--texto-2); }

/* Paginación */
.paginacion { margin-top: 40px; }
.paginacion ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; }
.paginacion a, .paginacion span[aria-current] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--borde-2); background: #fff; color: var(--enlace); font-weight: 600; text-decoration: none; }
.paginacion a:hover { border-color: var(--enlace); background: #F0F9FF; }
.paginacion span[aria-current] { background: var(--enlace); border-color: var(--enlace); color: #fff; }
.paginacion .dots { display: inline-grid; place-items: center; min-width: 24px; min-height: 44px; color: var(--texto-3); }
.paginacion-estado { text-align: center; color: var(--texto-3); font-size: .875rem; margin-top: 10px; }

/* Bloque de confianza */
.confianza { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .confianza { grid-template-columns: 1fr 1fr; gap: 56px; } }
.confianza figure { margin: 0; }
.confianza .media { aspect-ratio: 1200 / 630; border-radius: var(--radio-l); }
.confianza figcaption { margin-top: 8px; font-size: .875rem; color: var(--texto-3); }
.confianza h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); margin: 10px 0 12px; letter-spacing: -.02em; }
.confianza-texto { color: var(--texto-2); max-width: 36rem; }
.datos { margin: 24px 0 24px; display: grid; gap: 0; border: 1px solid var(--borde); border-radius: var(--radio-l); overflow: hidden; }
.datos h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); padding: 14px 18px 0; }
.datos dl { margin: 0; padding: 4px 18px 8px; }
.datos .dato { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.datos .dato:last-child { border-bottom: 0; }
.datos svg { color: var(--primario); }
.datos dt { display: flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--texto-3); }
.datos dd { margin: 0 0 0 32px; color: var(--texto); font-weight: 600; font-size: .9688rem; line-height: 1.45; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--radio-m);
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.25; text-decoration: none; text-align: center; border: 1px solid transparent; cursor: pointer; }
.btn:hover { text-decoration: none; }
.btn-azul { background: var(--enlace); color: #fff; }
.btn-azul:hover { background: var(--enlace-hover); color: #fff; }
.btn-borde { background: #fff; color: var(--enlace); border-color: var(--enlace); }
.btn-borde:hover { background: #F0F9FF; color: var(--enlace-hover); }
.btn-wa { background: var(--wa); color: var(--wa-texto); }
.btn-wa:hover { background: #22C35E; color: var(--wa-texto); }
.btn-principal { background: var(--amber); color: var(--sobre-amber); font-weight: 700; font-size: 1.0625rem; min-height: 52px; padding: 12px 24px; box-shadow: var(--sombra-1); }
.btn-principal:hover { background: var(--amber-hover); color: var(--sobre-amber); }
.btn-principal:focus-visible { outline-color: var(--foco); }

/* Llamado para propietarios (un solo llamado principal por vista) */
.cta-prop { position: relative; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-xl); box-shadow: var(--sombra-2); overflow: hidden;
  padding: 28px 20px; display: grid; gap: 20px; }
.cta-prop::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--primario); }
@media (min-width: 768px) { .cta-prop { padding: 40px; } }
@media (min-width: 1024px) { .cta-prop { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 48px; padding: 48px 56px; } }
.cta-prop h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); margin: 10px 0 12px; letter-spacing: -.02em; }
.cta-prop p.texto { color: var(--texto-2); max-width: 34rem; }
.cta-acciones { display: grid; gap: 12px; justify-items: stretch; }
@media (min-width: 480px) { .cta-acciones { justify-items: start; } }
.cta-secundaria { font-size: .9375rem; color: var(--texto-2); margin-top: 4px; }
.cta-secundaria a, .cta-intermedia .alterna a, .autor-nombre a { display: inline-block; padding: 3px 0; }
.fondo-degradado { background: var(--degradado); }

/* ==========================================================================
   ARTÍCULO
   ========================================================================== */
.art-cab { max-width: var(--ancho-articulo); margin: 0 auto; padding: 16px 16px 0; }
@media (min-width: 768px) { .art-cab { padding: 24px 24px 0; } }
@media (min-width: 1024px) { .art-cab { padding: 28px 32px 0; } }
.art-cab-col { max-width: 46rem; }
.art-cab .migas { margin-bottom: 24px; }
.art-cab .migas [aria-current] { display: inline; font-weight: 600; }
.art-h1 { font-size: clamp(1.875rem, 1.35rem + 2.3vw, 2.75rem); line-height: 1.14; letter-spacing: -.025em; margin: 14px 0 16px; overflow-wrap: anywhere; }
.art-bajada { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); line-height: 1.55; color: var(--texto-2); }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.art-meta .autor-nombre a { color: var(--texto); }
.art-fechas { display: grid; gap: 2px; color: var(--texto-3); font-size: .875rem; }
.art-fechas span { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.art-figura { max-width: var(--ancho-articulo); margin: 28px auto 0; padding: 0 16px; }
@media (min-width: 768px) { .art-figura { padding: 0 24px; } }
@media (min-width: 1024px) { .art-figura { padding: 0 32px; } }
.art-figura .media { border-radius: var(--radio-l); }
@media (min-width: 1024px) { .art-figura .media { aspect-ratio: 2 / 1; } }
.art-figura figcaption { margin-top: 8px; font-size: .875rem; color: var(--texto-3); }
.art-layout { max-width: var(--ancho-articulo); margin: 0 auto; padding: 28px 16px 0; display: grid; gap: 24px; }
@media (min-width: 768px) { .art-layout { padding: 36px 24px 0; } }
@media (min-width: 1024px) { .art-layout { grid-template-columns: minmax(0, 1fr) 16rem; column-gap: 72px; padding: 44px 32px 0; }
  .art-layout.sin-indice { grid-template-columns: minmax(0, 1fr); }
  .art-principal { grid-column: 1; grid-row: 1; } .toc-escritorio { grid-column: 2; grid-row: 1; } }
.art-principal { min-width: 0; }
.pagina .art-layout { padding-bottom: 56px; }

/* Tabla de contenido: <details> en móvil, lista fija en escritorio */
.toc-movil { border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo-suave); }
.toc-movil > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; font-weight: 600; color: var(--texto); }
.toc-movil > summary small { font-weight: 400; color: var(--texto-3); font-size: .875rem; }
.toc-movil[open] > summary { border-bottom: 1px solid var(--borde); }
.toc-movil ol { padding: 8px 16px 12px 16px; }
.toc-escritorio { display: none; }
@media (min-width: 1024px) { .toc-escritorio { display: block; } .toc-movil { display: none; } }
.toc-escritorio nav { position: sticky; top: calc(var(--barra-admin) + var(--cab-alto) + 24px); max-height: calc(100vh - var(--barra-admin) - var(--cab-alto) - 48px); overflow-y: auto; padding: 2px 4px 2px 2px; }
.toc-titulo { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 12px; }
.toc ol { list-style: none; counter-reset: toc; }
.toc-escritorio ol { border-left: 2px solid var(--borde); }
.toc a { display: flex; gap: 8px; padding: 5px 0 5px 14px; color: var(--texto-2); text-decoration: none; font-size: .875rem; line-height: 1.4; }
.toc-escritorio a { margin-left: -2px; border-left: 2px solid transparent; }
.toc-movil a { padding: 8px 0; align-items: baseline; }
.toc a::before { counter-increment: toc; content: counter(toc) "."; color: var(--texto-3); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.toc a:hover { color: var(--enlace); text-decoration: underline; }
.toc a[aria-current="true"] { color: var(--enlace); border-left-color: var(--primario); font-weight: 600; }

/* Cuerpo de lectura: 17 px en móvil, 18 px desde 768 px; interlineado 1,7; 40rem ≈ 65–75 caracteres */
.prosa { max-width: var(--ancho-lectura); font-size: 1.0625rem; line-height: 1.7; color: var(--texto-prosa); overflow-wrap: break-word; }
@media (min-width: 768px) { .prosa { font-size: 1.125rem; } }
.prosa p, .prosa ul, .prosa ol, .prosa blockquote, .prosa figure, .prosa table, .prosa pre, .prosa dl, .prosa .wp-caption, .prosa iframe { margin: 0 0 1.1em; }
.prosa h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); line-height: 1.25; margin: 2em 0 .65em; }
.prosa h3 { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); line-height: 1.3; margin: 1.6em 0 .5em; }
.prosa h4, .prosa h5, .prosa h6 { font-size: 1.0625rem; line-height: 1.4; margin: 1.4em 0 .4em; color: var(--texto); font-weight: 700; }
.prosa > h2:first-child, .prosa > h3:first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li { margin: .3em 0; padding-left: .2em; }
.prosa li::marker { color: var(--primario); }
.prosa ol li::marker { color: var(--texto-3); font-weight: 600; }
.prosa strong, .prosa b { color: var(--texto); }
.prosa a { overflow-wrap: anywhere; }
.prosa img { border-radius: var(--radio-m); }
.prosa figure { max-width: 100%; }
.prosa figcaption, .prosa .wp-caption-text, .prosa .wp-element-caption { margin-top: 8px; font-size: .875rem; line-height: 1.5; color: var(--texto-3); }
.prosa .wp-caption { max-width: 100%; }
.prosa blockquote { padding: 4px 0 4px 18px; border-left: 4px solid var(--primario); color: var(--texto-2); font-style: normal; }
.prosa blockquote p:last-child { margin-bottom: 0; }
.prosa hr { border: 0; border-top: 1px solid var(--borde); margin: 2em 0; }
.prosa table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.prosa th, .prosa td { padding: 8px 10px; border: 1px solid var(--borde); text-align: left; vertical-align: top; }
.prosa th { background: var(--fondo-suave); color: var(--texto); }
.prosa pre { overflow-x: auto; padding: 14px 16px; background: var(--fondo-tarjeta); border-radius: var(--radio-m); font-size: .875rem; line-height: 1.5; }
.prosa code { font-size: .9em; background: var(--fondo-tarjeta); padding: .1em .3em; border-radius: 4px; }
.prosa pre code { background: none; padding: 0; }
.prosa iframe, .prosa video, .prosa embed, .prosa object { max-width: 100%; }
.prosa iframe[src*="youtube"], .prosa iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prosa .aligncenter { margin-left: auto; margin-right: auto; }
@media (min-width: 640px) {
  .prosa .alignleft { float: left; margin: .3em 1.2em .8em 0; max-width: 50%; }
  .prosa .alignright { float: right; margin: .3em 0 .8em 1.2em; max-width: 50%; }
}
.prosa::after { content: ""; display: table; clear: both; }
.paginas-entrada { margin-top: 24px; font-weight: 600; }
.paginas-entrada a, .paginas-entrada .post-page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

.cta-intermedia { margin: 2.2em 0; padding: 20px; background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 14px; display: grid; gap: 10px; justify-items: start; }
.prosa .cta-intermedia p { margin: 0; }
.cta-intermedia .titulo { font-size: 1.125rem; font-weight: 700; color: var(--texto); line-height: 1.4; }
.cta-intermedia p { font-size: 1rem; line-height: 1.6; color: var(--texto-2); }
.cta-intermedia .alterna { font-size: .9375rem; }
.cta-intermedia .ceja { font-size: .8125rem; color: var(--ceja); line-height: 1.3; }
.prosa .cta-intermedia .btn-azul { color: #fff; }

.art-cierre { display: grid; gap: 28px; max-width: var(--ancho-lectura); margin-top: 40px; }
.temas-grupo { display: grid; gap: 8px; }
.temas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9375rem; color: var(--texto-3); }
.temas .chip { min-height: 32px; }
.compartir h2 { font-size: 1rem; margin-bottom: 10px; letter-spacing: 0; }
.aviso { display: flex; gap: 12px; padding: 16px 18px; background: var(--fondo-tarjeta); border-left: 4px solid var(--borde-control); border-radius: 0 12px 12px 0;
  color: var(--texto-2); font-size: .9375rem; line-height: 1.6; }
.aviso svg { color: var(--texto-3); margin-top: 3px; }
.compartir ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.btn-compartir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--borde-2);
  background: #fff; color: var(--texto); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.btn-compartir:hover { border-color: var(--enlace); color: var(--enlace); text-decoration: none; }
.estado-copia { font-size: .875rem; color: #15803D; font-weight: 600; min-height: 1.5em; margin-top: 6px; }
.caja-autor { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 24px; border: 1px solid var(--borde); border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-1); }
.caja-autor .avatar { width: 72px; height: 72px; font-size: 1.375rem; }
.caja-autor h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 4px; }
.caja-autor .nombre { font-size: 1.1875rem; font-weight: 700; color: var(--texto); }
.caja-autor .cargo { color: var(--texto-3); font-size: .9375rem; margin-bottom: 10px; }
.caja-autor .bio { color: var(--texto-2); font-size: .9688rem; line-height: 1.6; margin-bottom: 12px; }
@media (max-width: 479px) { .caja-autor { grid-template-columns: 1fr; } }
.relacionados { margin-top: 56px; }
.relacionados .buscador { margin-top: 40px; }

/* Comentarios (solo visibles si la Gerencia los abre) */
.comentarios { max-width: var(--ancho-lectura); margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--borde); display: grid; gap: 16px; }
.comentarios h2 { font-size: 1.25rem; }
.lista-comentarios { list-style: none; display: grid; gap: 16px; }
.lista-comentarios .comment-body { padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio-m); }
.comentarios-cerrados, .comentario-nota { color: var(--texto-3); font-size: .9375rem; }
.comment-form { display: grid; gap: 12px; }
.comment-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--borde-control); border-radius: 10px; font: inherit; }
.comment-form input[type="submit"] { min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--enlace); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* ==========================================================================
   BÚSQUEDA Y 404
   ========================================================================== */
.col-resultados { max-width: 56rem; }
.resultados { list-style: none; display: grid; gap: 16px; }
.resultado { position: relative; display: grid; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-1); }
@media (min-width: 768px) { .resultado { grid-template-columns: 13.5rem 1fr; align-items: start; gap: 24px; } }
.resultado .media { display: none; border-radius: 10px; aspect-ratio: 16 / 10; }
@media (min-width: 768px) { .resultado .media { display: block; } }
.resultado-cuerpo { display: grid; gap: 10px; justify-items: start; }
.resultado h2 { font-size: 1.25rem; line-height: 1.3; }
.resultado h2 a { color: var(--texto); text-decoration: none; }
.resultado h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio-l); }
.resultado:hover h2 a { text-decoration: underline; }
.resultado:focus-within { box-shadow: var(--sombra-2); }
.resultado p.ext { color: var(--texto-2); font-size: .9688rem; }
mark { background: #FEF08A; color: var(--texto); padding: 0 .12em; border-radius: 3px; }
.ayuda { margin-top: 32px; padding: 24px; border-radius: var(--radio-l); background: var(--fondo-suave); border: 1px solid var(--borde); display: grid; gap: 12px; }
.ayuda:first-child { margin-top: 0; }
.ayuda h2 { font-size: 1.25rem; }
.ayuda ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.ayuda-sin-resultados { background: #fff; }
.opciones { display: grid; gap: 16px; list-style: none; }
@media (min-width: 768px) { .opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opcion { position: relative; display: grid; gap: 8px; padding: 22px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-1); height: 100%; }
.opcion svg { color: var(--primario); }
.opcion h3 { font-size: 1.125rem; }
.opcion h3 a { color: var(--texto); text-decoration: none; }
.opcion h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio-l); }
.opcion:hover h3 a { text-decoration: underline; }
.opcion:focus-within { box-shadow: var(--sombra-2); }
.opcion p { color: var(--texto-2); font-size: .9375rem; }
.lista-simple { list-style: none; display: grid; gap: 2px; }
.ayuda .lista-simple { display: grid; }
.lista-simple a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
a[href^="tel:"] { white-space: nowrap; }

/* ==========================================================================
   PIE (misma estructura y datos que nuevofooter.php)
   ========================================================================== */
.pie { background: var(--pie-fondo); color: var(--pie-texto); font-size: .9375rem; line-height: 1.6; }
.pie :focus-visible { outline-color: var(--foco-pie); }
.pie a { color: var(--pie-texto); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie-rejilla { display: grid; gap: 36px; padding-top: 48px; padding-bottom: 40px; }
@media (min-width: 640px) { .pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pie-rejilla { grid-template-columns: 1.35fr 1fr 1fr 1.35fr; gap: 40px; padding-top: 64px; } }
.pie h2 { color: #fff; font-size: 1rem; margin-bottom: 14px; letter-spacing: 0; }
.pie-logo { display: inline-block; }
.pie-logo img { height: 64px; width: auto; }
.pie-marca p { margin: 16px 0 12px; max-width: 22rem; }
.pie-marca .enlace-nos { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.redes { display: flex; gap: 10px; list-style: none; margin-top: 8px; }
.redes a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(203 213 225 / .45); color: #fff; }
.redes a:hover { background: #1E293B; text-decoration: none; }
.pie-lista { list-style: none; display: grid; gap: 2px; }
.pie-lista a { display: inline-flex; align-items: center; min-height: 36px; }
.contacto-item { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; margin-bottom: 14px; }
.contacto-item svg { color: #7DD3FC; margin-top: 3px; grid-row: span 3; }
.contacto-item strong { color: #fff; font-weight: 600; }
.contacto-item .acciones { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.contacto-item .acciones a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-underline-offset: .2em; }
.pie-legal { background: var(--pie-legal); border-top: 1px solid #1E293B; }
.pie-legal .contenedor { padding-top: 18px; padding-bottom: 22px; font-size: .875rem; display: grid; gap: 8px; }
.pie-legal .enlace-legal { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .tarjeta:hover { transform: none; }
}

/* ---------- Impresión: solo el artículo ---------- */
@media print {
  .cab, .blogbar, .toc-movil, .toc-escritorio, .cta-intermedia, .compartir, .relacionados, .cta-prop, .pie-rejilla, .buscador { display: none !important; }
  body { color: #000; }
  .art-layout { display: block; }
}