/* ═══════════════════════════════════════════════════════════════
   blog.css — SOLO lo que el blog agrega.
   La marca (colores, tipografia, header, footer, .btn, .container,
   .bkh, .eyebrow, .hl) viene de /assets/css/main.css del sitio.
   Aca no se redefine ningun color: se usan las variables de marca.
   ═══════════════════════════════════════════════════════════════ */

/* ── Contenedor de lectura ──────────────────────────────────────
   65-75 caracteres por linea es donde el ojo deja de saltar de
   renglon. En un ancho de 1530px un parrafo es ilegible. */
.container--narrow { max-width: 760px; }


/* ── Cabecera del post ─────────────────────────────────────────── */
.post__head { padding:120px 0 26px }
.post__head h1 { margin:10px 0 14px }
.post__meta { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
              font-size:14px; opacity:.7; margin:0 }
.post__meta i { font-style:normal; opacity:.4 }

.post__hero { margin-bottom:38px }
.post__hero img { width:100%; height:auto; border-radius:16px; display:block }

/* ── Cuerpo del post ───────────────────────────────────────────── */
.post__body { font-size:17.5px; line-height:1.75 }
.post__body > * + * { margin-top:1.15em }
.post__body h2 { font-size:29px; line-height:1.2; margin-top:1.9em }
.post__body h3 { font-size:22px; line-height:1.25; margin-top:1.6em }
.post__body p  { margin-bottom:0 }
.post__body ul,
.post__body ol { padding-left:1.35em }
.post__body li + li { margin-top:.5em }
.post__body a { text-decoration:underline; text-underline-offset:3px }
.post__body img,
.post__body figure img { width:100%; height:auto; border-radius:14px; display:block }
.post__body figure { margin-top:1.8em }
.post__body figcaption { font-size:13.5px; opacity:.65; margin-top:9px; text-align:center }
.post__body blockquote { border-left:4px solid currentColor; padding:2px 0 2px 20px;
                         margin-left:0; font-size:19px; opacity:.9 }
.post__body table { width:100%; border-collapse:collapse; font-size:15.5px; display:block; overflow-x:auto }
.post__body th, .post__body td { padding:11px 13px; text-align:left; border-bottom:1px solid rgba(0,0,0,.1) }
.post__body th { font-weight:700 }
.post__body code { font-size:.9em; padding:2px 6px; border-radius:5px; background:rgba(0,0,0,.06) }

/* ── CTA de cierre ─────────────────────────────────────────────── */
.post__cta { margin:56px 0 0; padding:34px 32px; border-radius:20px;
             background:var(--acc, #2656A6); color:#fff; text-align:center }
.post__cta h2 { margin:0 0 10px; font-size:27px }
.post__cta p  { margin:0 auto 22px; max-width:52ch; opacity:.92 }
.post__cta-acts { display:flex; align-items:center; justify-content:center;
                  gap:18px; flex-wrap:wrap }
.post__tel { color:#fff; font-weight:700; text-decoration:none; font-size:17px }
.post__tel:hover { text-decoration:underline }

/* ── Relacionados ──────────────────────────────────────────────── */
.post__rel { margin-top:64px }
.post__rel h2 { font-size:25px; margin-bottom:22px }

/* ── Rejilla de fichas ─────────────────────────────────────────── */
.blog__grid { display:grid; gap:26px;
              grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)) }
.blog__grid--3 { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px }

.blog__c { border-radius:18px; overflow:hidden; background:rgba(0,0,0,.03);
           transition:transform .25s ease, box-shadow .25s ease }
.blog__c:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.13) }
.blog__c-link { display:block; color:inherit; text-decoration:none; height:100% }
.blog__c-img { aspect-ratio:16/10; overflow:hidden }
.blog__c-img img { width:100%; height:100%; object-fit:cover; display:block }
.blog__c-body { padding:20px 21px 23px }
.blog__c-t { font-size:19px; line-height:1.28; margin:9px 0 8px }
.blog__c-x { font-size:14.5px; line-height:1.6; opacity:.75; margin:0 0 13px }
.blog__c-meta { display:flex; align-items:center; gap:7px;
                font-size:12.5px; opacity:.6 }
.blog__c-meta i { font-style:normal; opacity:.5 }

/* ── Paginacion ────────────────────────────────────────────────── */
.pagination { margin-top:46px; display:flex; justify-content:center }
.pagination .nav-links { display:flex; gap:9px; flex-wrap:wrap }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center;
                            min-width:42px; height:42px; padding:0 13px; border-radius:11px;
                            text-decoration:none; background:rgba(0,0,0,.05); color:inherit }
.pagination .page-numbers.current { background:var(--acc, #2656A6); color:#fff; font-weight:700 }
.pagination .page-numbers:hover { background:rgba(0,0,0,.11) }
.pagination .page-numbers.current:hover { background:var(--acc, #2656A6) }

/* ── Movil ─────────────────────────────────────────────────────── */
@media (max-width:700px) {
  .post__head { padding-top:96px }
  .post__body { font-size:16.5px }
  .post__body h2 { font-size:24px }
  .post__body h3 { font-size:19.5px }
  .post__cta { padding:28px 22px; border-radius:16px }
  .blog__grid { grid-template-columns:1fr }
}