/* =========================================================
   Blog: portada, tarjetas y detalle de artículo.
   Solo se carga en blog.php y blog-post.php, sobre style.css:
   reutiliza los tokens de marca (--blue-*) y el lenguaje visual
   de las cards del sitio (radio 16px, sombra tintada, hover elevado).
   Breakpoints del sitio: 880px y 540px. Detalle: docs/blog/README.md.
   ========================================================= */
:root{
  --blog-radius: 16px;
  --blog-shadow: 0 12px 28px rgba(22,48,75,0.08);
  --blog-shadow-hover: 0 18px 40px rgba(22,48,75,0.14);
  --blue-50: #eef4fb;
  --blue-100: #dbe8f6;
  --blog-line: rgba(22,48,75,0.10);
}
.blog-main{padding-bottom:1rem}
.blog-btn{display:inline-flex;align-items:center;gap:0.45rem;padding:0.55rem 1rem;border-radius:999px;border:1px solid rgba(22,48,75,0.18);background:#fff;color:var(--blue-900);font:inherit;font-size:0.88rem;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color 160ms,background 160ms}
.blog-btn:hover{border-color:var(--blue-500);background:var(--blue-50);text-decoration:none}
.blog-btn svg{flex:0 0 auto}

/* --- Hero de la portada --- */
.blog-hero{position:relative;overflow:hidden;color:#fff}
.blog-hero__bg{position:absolute;inset:0}
.blog-hero__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(0.5)}
.blog-hero__overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(22,48,75,0.86) 0%,rgba(11,70,145,0.55) 100%)}
.blog-hero__inner{position:relative;padding-top:3.6rem;padding-bottom:3.2rem}
.blog-hero__kicker{margin:0 0 0.4rem;font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.8)}
.blog-hero h1{margin:0 0 0.7rem;font-size:2.4rem;line-height:1.1}
.blog-hero__lead{max-width:58ch;margin:0 0 1.4rem;color:rgba(255,255,255,0.92);font-size:1.05rem}
.blog-search{display:flex;max-width:520px;background:#fff;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,0.18);overflow:hidden}
.blog-search input{flex:1;min-width:0;padding:0.85rem 1.2rem;border:0;font:inherit;font-size:0.95rem;color:var(--blue-900);background:transparent}
.blog-search input:focus{outline:none}
.blog-search:focus-within{box-shadow:0 0 0 4px rgba(255,255,255,0.35)}
.blog-search button{display:grid;place-items:center;width:52px;border:0;background:var(--blue-700);color:#fff;cursor:pointer;transition:background 160ms}
.blog-search button:hover{background:var(--blue-900)}

/* --- Píldoras de categoría --- */
.blog-pills{display:flex;gap:0.5rem;margin:1.6rem 0 0.4rem;padding:0 0 0.4rem;overflow-x:auto;scrollbar-width:thin}
.blog-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.4rem;min-height:40px;padding:0.4rem 1rem;border:1px solid rgba(22,48,75,0.16);border-radius:999px;background:#fff;color:var(--blue-900);font-size:0.9rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color 160ms,background 160ms}
.blog-pill:hover{border-color:var(--blue-500);background:var(--blue-50);text-decoration:none}
.blog-pill.is-active{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.blog-pill small{font-size:0.75rem;font-weight:700;opacity:0.75}
.blog-resultados{margin:0.6rem 0 0;color:var(--muted);font-size:0.92rem}

/* --- Destacado --- */
.blog-featured{display:grid;grid-template-columns:1.15fr 1fr;margin:1.4rem 0 0.4rem;background:var(--surface);border:1px solid rgba(22,48,75,0.06);border-radius:var(--blog-radius);box-shadow:var(--blog-shadow);overflow:hidden;transition:transform 200ms,box-shadow 200ms}
.blog-featured:hover{transform:translateY(-4px);box-shadow:var(--blog-shadow-hover)}
.blog-featured__media{display:block;min-height:280px;background:var(--blue-900)}
.blog-featured__media img{width:100%;height:100%;object-fit:cover;display:block}
.blog-featured__body{display:flex;flex-direction:column;justify-content:center;gap:0.6rem;padding:1.8rem}
.blog-featured__title{margin:0;font-size:1.6rem;line-height:1.2}
.blog-featured__title a{color:var(--blue-900)}
.blog-featured__title a:hover{color:var(--blue-700);text-decoration:none}
.blog-featured__excerpt{margin:0;color:var(--muted)}

/* --- Tarjetas --- */
.blog-badge{display:inline-block;align-self:flex-start;padding:0.2rem 0.65rem;border-radius:999px;background:var(--blue-50);color:var(--blue-700);font-size:0.8rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.3rem;margin-top:1.4rem}
.blog-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid rgba(22,48,75,0.06);border-radius:var(--blog-radius);box-shadow:var(--blog-shadow);overflow:hidden;transition:transform 200ms,box-shadow 200ms}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--blog-shadow-hover)}
.blog-card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--blue-900)}
.blog-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 300ms}
.blog-card:hover .blog-card__media img{transform:scale(1.04)}
.blog-card__body{display:flex;flex-direction:column;gap:0.5rem;flex:1;padding:1.2rem 1.3rem 1.3rem}
.blog-card__title{margin:0;font-size:1.05rem;line-height:1.3}
.blog-card__title a{color:var(--blue-900)}
.blog-card__title a:hover{color:var(--blue-700);text-decoration:none}
/* el enlace del título cubre toda la card: un solo destino táctil */
.blog-card__title a::after{content:"";position:absolute;inset:0}
.blog-card{position:relative}
.blog-card__excerpt{margin:0;color:var(--muted);font-size:0.92rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__meta{margin:auto 0 0;padding-top:0.4rem;display:flex;flex-wrap:wrap;gap:0.4rem;font-size:0.8rem;color:var(--muted)}

/* --- Directorio de temas --- */
.blog-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.2rem}
.blog-topic{display:flex;flex-direction:column;gap:0.4rem;padding:1.2rem;background:var(--surface);border:1px solid rgba(22,48,75,0.06);border-radius:var(--blog-radius);box-shadow:var(--blog-shadow);color:var(--blue-900);text-decoration:none;transition:transform 200ms,box-shadow 200ms}
.blog-topic:hover{transform:translateY(-4px);box-shadow:var(--blog-shadow-hover);text-decoration:none}
.blog-topic__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(29,113,184,0.12);color:var(--blue-700)}
.blog-topic strong{font-size:1rem;color:var(--blue-700)}
.blog-topic span{font-size:0.86rem;color:var(--muted)}

/* --- Paginación --- */
.blog-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:0.4rem;margin:2rem 0 0}
.blog-pagination a,.blog-pagination span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 0.8rem;border:1px solid rgba(22,48,75,0.16);border-radius:10px;background:#fff;color:var(--blue-900);font-weight:600;text-decoration:none}
.blog-pagination a:hover{border-color:var(--blue-500);background:var(--blue-50);text-decoration:none}
.blog-pagination .is-current{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.blog-pagination .is-disabled{opacity:0.4}

/* --- Estado vacío y CTA --- */
.blog-empty{margin:2rem 0;padding:2.4rem 1.4rem;text-align:center;background:var(--blue-50);border:1px dashed rgba(29,113,184,0.35);border-radius:var(--blog-radius)}
.blog-empty h2{margin:0 0 0.4rem;font-size:1.3rem}
.blog-empty p{margin:0 auto 1rem;max-width:52ch;color:var(--muted)}
.blog-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin:2.4rem 0 1rem;padding:1.8rem 2rem;border-radius:var(--blog-radius);background:linear-gradient(120deg,var(--blue-900),var(--blue-700));color:#fff}
.blog-cta h2{margin:0 0 0.2rem;font-size:1.35rem}
.blog-cta p{margin:0;color:rgba(255,255,255,0.88)}
.blog-cta .btn.primary{background:#fff;color:var(--blue-900)}

/* --- Detalle: barra de progreso y cabecera --- */
.post-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:transparent;pointer-events:none}
.post-progress span{display:block;height:100%;background:var(--blue-500);transform:scaleX(0);transform-origin:left}
.post-header{padding-top:1.6rem}
.blog-breadcrumb{margin:0 0 1rem;font-size:0.85rem;color:var(--muted)}
.blog-breadcrumb ol{display:flex;flex-wrap:wrap;gap:0.35rem;margin:0;padding:0;list-style:none}
.blog-breadcrumb li+li::before{content:"/";margin-right:0.35rem;opacity:0.6}
.post-header h1{margin:0.6rem 0 0.8rem;font-size:2.3rem;line-height:1.15;max-width:24ch}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem 0.9rem;margin:0;font-size:0.88rem;color:var(--muted)}
.post-meta span{display:inline-flex;align-items:center;gap:0.3rem}
.post-cover{margin:1.4rem 0 0;border-radius:var(--blog-radius);overflow:hidden;box-shadow:var(--blog-shadow)}
.post-cover img{display:block;width:100%;height:440px;max-height:440px;object-fit:cover} /* height explícita: antes la daba el atributo height="440" del HTML */

/* --- Detalle: cuerpo y barra lateral --- */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.6rem;align-items:start;padding-top:1.6rem;padding-bottom:0.5rem}
.post-lead{margin:0 0 1.4rem;font-size:1.15rem;line-height:1.6;color:var(--blue-900);font-weight:500}
.post-summary{margin:0 0 1.6rem;padding:1.1rem 1.3rem;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--blog-radius)}
.post-summary h2{margin:0 0 0.4rem;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue-700)}
.post-summary p{margin:0}
.post-body{font-size:1.05rem;line-height:1.8;color:#1f3550}
.post-body h2{margin:2.2rem 0 0.7rem;font-size:1.55rem;line-height:1.25;color:var(--blue-900);scroll-margin-top:1rem}
.post-body h3{margin:1.6rem 0 0.5rem;font-size:1.2rem;color:var(--blue-700);scroll-margin-top:1rem}
.post-body p{margin:0 0 1.1rem}
.post-body ul,.post-body ol{margin:0 0 1.2rem;padding-left:1.4rem}
.post-body li{margin:0.35rem 0}
.post-body a{text-decoration:underline;text-underline-offset:2px}
.post-body blockquote{margin:1.4rem 0;padding:0.9rem 1.2rem;background:var(--blue-50);border-radius:12px;color:var(--blue-900)}
.post-body blockquote p:last-child{margin:0}
.post-body img{max-width:100%;height:auto;border-radius:12px}
.post-body table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:1.4rem 0;font-size:0.95rem}
.post-body th,.post-body td{padding:0.6rem 0.8rem;border:1px solid var(--blog-line);text-align:left;vertical-align:top}
.post-body th{background:var(--blue-50);color:var(--blue-900)}
.post-toc{padding:1.1rem 1.2rem;background:var(--surface);border:1px solid rgba(22,48,75,0.08);border-radius:var(--blog-radius);box-shadow:var(--blog-shadow)}
.post-toc h2,.post-toc summary{margin:0 0 0.5rem;font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue-700)}
.post-toc ol{margin:0;padding:0;list-style:none}
.post-toc li{margin:0}
.post-toc a{display:block;padding:0.35rem 0.6rem;border-left:2px solid var(--blog-line);font-size:0.9rem;line-height:1.35;color:var(--blue-900);text-decoration:none}
.post-toc a:hover{color:var(--blue-700);text-decoration:none}
.post-toc a.is-active{border-left-color:var(--blue-500);color:var(--blue-700);font-weight:600}
.post-toc--inline{display:none;margin:0 0 1.4rem}
.post-toc--inline summary{cursor:pointer;margin:0}
/* top tiene en cuenta el header (sticky, con alto variable): sin esto, esta tarjeta se pega a
   1rem del borde de la ventana y el header (arriba, con más z-index) le queda encima. --header-h
   la actualiza main.js con el alto real del header en cada momento; 90px es el respaldo por si
   ese JS no llegó a correr todavía. */
.post-aside{position:sticky;top:calc(var(--header-h, 90px) + 1rem);display:grid;gap:1.1rem}
.post-aside__cta{padding:1.3rem;border-radius:var(--blog-radius);background:linear-gradient(140deg,var(--blue-900),var(--blue-700));color:#fff}
.post-aside__cta h2{margin:0 0 0.4rem;font-size:1.1rem}
.post-aside__cta p{margin:0 0 0.9rem;font-size:0.9rem;color:rgba(255,255,255,0.88)}
.post-aside__cta .btn.primary{width:100%;text-align:center;background:#fff;color:var(--blue-900)}

/* --- Detalle: FAQ, compartir, relacionados --- */
.post-faq{margin:2.2rem 0 0}
.post-faq h2{margin:0 0 0.8rem;font-size:1.4rem}
.post-faq details{margin:0 0 0.6rem;border:1px solid var(--blog-line);border-radius:12px;background:#fff}
.post-faq summary{padding:0.9rem 1.1rem;cursor:pointer;font-weight:600;color:var(--blue-900);list-style:none}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";float:right;font-size:1.3rem;line-height:1;color:var(--blue-500)}
.post-faq details[open] summary::after{content:"–"}
.post-faq details p{margin:0;padding:0 1.1rem 1rem;color:#1f3550}
.post-share{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;margin:2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--blog-line)}
.post-share__label{font-size:0.85rem;font-weight:700;color:var(--muted);margin-right:0.3rem}
.post-share__status{font-size:0.85rem;color:var(--blue-700)}
.post-related{margin-top:2.4rem}
.post-related h2{margin:0;font-size:1.4rem}
.post-nota{margin:1rem 0 0;padding:0.7rem 1rem;border-radius:10px;background:#fff7e0;border:1px solid #f0d98a;color:#6b4e00;font-size:0.9rem}

@media (max-width:880px){
  .blog-hero h1{font-size:2rem}
  .blog-featured{grid-template-columns:1fr}
  .blog-featured__media{min-height:0;aspect-ratio:16/9}
  .post-header h1{font-size:1.9rem;max-width:none}
  .post-layout{grid-template-columns:minmax(0,1fr)}
  .post-aside{position:static}
  .post-toc--side{display:none}
  .post-toc--inline{display:block}
  .blog-cta{padding:1.4rem}
}
@media (max-width:540px){
  .blog-hero__inner{padding-top:2.6rem;padding-bottom:2.4rem}
  .blog-hero h1{font-size:1.7rem}
  .blog-featured__body{padding:1.3rem}
  .blog-featured__title{font-size:1.3rem}
  .post-header h1{font-size:1.6rem}
  .post-body{font-size:1rem}
  .blog-cta .btn{width:100%;text-align:center}
}
/* Plegables cerrados (~280px): minmax(290px,1fr) exige más ancho del que hay, y la tarjeta se
   sale de la pantalla. A este ancho solo cabe 1 por fila de todas formas. */
@media (max-width:340px){
  .blog-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .blog-card,.blog-featured,.blog-topic,.blog-card__media img,.blog-btn,.blog-pill{transition:none}
  .blog-card:hover,.blog-featured:hover,.blog-topic:hover{transform:none}
  .blog-card:hover .blog-card__media img{transform:none}
}