/* ============================================================
   blog.css — extensión aditiva de site.css para el sistema de
   blog con páginas individuales por artículo (SEO friendly).
   No sobreescribe reglas existentes: solo añade componentes
   nuevos (thumbnails reales, banner con foto, breadcrumb).
   ============================================================ */

/* Grid de la landing: 3 columnas desktop / 2 tablet / 1 móvil */
@media(min-width:1081px){.post-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1080px) and (min-width:821px){.post-grid{grid-template-columns:repeat(2,1fr)}}

/* Thumbnail con imagen real dentro de post-card */
.post-card .thumb{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;margin:0 0 16px 0;background:rgba(var(--rgb-fg),.06)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.post-card:hover .thumb img{transform:scale(1.06)}

/* Banner de artículo con foto real (sustituye al banner-ícono cuando hay imagen destacada) */
.post-banner-photo{position:relative;height:340px;border-radius:20px;overflow:hidden;background:rgba(var(--rgb-fg),.06)}
.post-banner-photo img{width:100%;height:100%;object-fit:cover;display:block}
.post-banner-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,13,35,0) 55%,rgba(0,13,35,.55) 100%),linear-gradient(100deg,color-mix(in srgb,var(--post-ac,var(--accent)) 22%,transparent),transparent 55%)}
@media(max-width:640px){.post-banner-photo{height:210px;border-radius:16px}}

/* Breadcrumb de navegación */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-family:var(--font-mono);font-size:12px;color:var(--plata);margin-bottom:18px}
.breadcrumb a{color:var(--plata);text-decoration:none;transition:.2s}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--text)}

/* CTA secundaria (link a la unidad de negocio) dentro de post-cta */
.post-cta .cta-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.post-cta .btn-outline{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12.5px;color:var(--post-ac,var(--accent));border:1px solid color-mix(in srgb,var(--post-ac,var(--accent)) 45%,transparent);padding:11px 18px;border-radius:999px;transition:.2s;text-decoration:none}
.post-cta .btn-outline:hover{background:color-mix(in srgb,var(--post-ac,var(--accent)) 14%,transparent);transform:translateY(-2px)}

/* Categoría + unidad en el head del artículo (chip de unidad de negocio) */
.post-head .unit-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--plata);margin-top:8px}
.post-head .unit-tag a{color:var(--post-ac,var(--accent));text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--post-ac,var(--accent)) 45%,transparent)}
.post-head .unit-tag a:hover{border-color:var(--post-ac,var(--accent))}

/* H1 de artículo individual — mismo tratamiento visual que .post-head h2, pero como único H1 real de la página */
.post-head h1{font-size:clamp(26px,3.6vw,42px);letter-spacing:-.02em;line-height:1.1;margin-top:14px;max-width:22ch}

/* Contenedor de página de artículo individual: compensa el header fijo (no hay unit-hero delante) */
.blog-article-body{padding:150px 0 90px;background:var(--panel-bg)}
@media(max-width:640px){.blog-article-body{padding:120px 0 70px}}