/* ==========================================================================
   Índice del blog (/blog/)
   Lista de entradas: la primera va destacada (.post--destacada); las demás usan .post.
   Solo complementa sitio.css: no reduce tamaños de letra.
   ========================================================================== */

/* Lista de entradas */
.post-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:24px}
.post-list > li{display:flex}
.post-list > li:has(.post--destacada){grid-column:1/-1}

.post{flex:1;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s}
.post:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.post-media{position:relative;display:block;aspect-ratio:16/10;background:var(--slate-900);overflow:hidden}
.post-media img{width:100%;height:100%;object-fit:cover}
.post-badge{position:absolute;left:18px;top:18px;background:var(--red);color:#fff;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:.45em .95em;border-radius:999px;box-shadow:0 4px 14px rgba(20,30,36,.25)}
.post-body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.post-tag{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-700)}
.post h3{margin:0;font-size:1.35rem;line-height:1.25;color:var(--slate-900);text-wrap:balance}
.post h3 a{color:inherit;text-decoration:none}
.post h3 a:hover{color:var(--red-700);text-decoration:underline;text-underline-offset:4px}
.post-body > p{margin:0;color:var(--muted);line-height:1.6}
.post-body > .post-fecha{color:var(--slate-600);font-weight:600}
.post-more{align-self:flex-start;margin-top:auto}
.post-body a.post-more:not(.btn){display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--red-700);text-decoration:none}
.post-more svg{width:18px;height:18px;flex:none}

/* Temas de la entrada */
.post-temas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.post-temas li{background:var(--bg-alt);border:1px solid var(--line);color:var(--slate);border-radius:999px;padding:.3em .85em;font-size:.85rem;font-weight:600;line-height:1.4}

/* Entrada destacada: imagen y texto en dos columnas */
@media (min-width:861px){
  .post--destacada{flex-direction:row;align-items:stretch}
  .post--destacada .post-media{flex:0 0 46%;aspect-ratio:auto;min-height:100%}
  .post--destacada .post-body{padding:40px 44px;gap:14px}
  .post--destacada h3{font-size:clamp(1.5rem,2.3vw,1.9rem)}
  .post--destacada .post-more{margin-top:10px}
}
@media (max-width:480px){
  .post-body{padding:22px 20px 24px}
  .post--destacada .post-more.btn{width:100%}
}

/* Servicios relacionados */
.blog-relacionados{background:var(--bg-alt)}
.blog-relacionados .card .more{align-self:flex-start}

/* Cierre */
section.block.blog-cierre{padding-top:96px}
@media (max-width:760px){section.block.blog-cierre{padding-top:72px}}
@media (max-width:480px){
  .blog-cierre .cta-band .actions .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){.post:hover{transform:none}}

/* Escala de escritorio (2026-10-01): etiquetas ≥ 18 px y textos auxiliares ≥ 20 px; en móvil no cambia */
@media (min-width:981px){
  .post-tag{font-size:.9rem}
  .post-badge,.post-temas li{font-size:1rem}
  .post p{font-size:1.1rem}
}