/* ══════════════════════════════════════════════════════════════════════════
   blog.css — índice y artículos del blog de Marcas Millonarias.

   Extiende public/css/mm-2026.css. Mismo navy, misma Mirano Extended, mismos
   tokens: el blog no es un tema aparte, es el sitio con una columna de lectura.

   La medida de lectura se fija en ch, no en px, para que el ancho de línea
   siga al tamaño de fuente y no al viewport.
   ══════════════════════════════════════════════════════════════════════════ */

.blog-mm main{min-width:0}
.blog-mm [id]{scroll-margin-top:100px}
.blog-mm a:focus-visible{outline:2px solid var(--lav);outline-offset:4px}
.skip-link{position:fixed;top:12px;left:12px;z-index:1000;transform:translateY(-160%);
  padding:12px 18px;background:var(--ink-0);color:var(--td-1);border:2px solid var(--lav)}
.skip-link:focus{transform:translateY(0)}

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.blog-head{padding:clamp(124px,14vw,180px) 0 clamp(44px,5vw,68px);border-bottom:1px solid var(--line)}
.blog-head h1{font-size:clamp(2rem,1.2rem + 3.4vw,3.9rem);line-height:1.06;letter-spacing:-.045em;
  margin:22px 0 0}
.blog-head .lead{max-width:40ch;margin:24px 0 0;font-size:clamp(14.5px,1.1vw,17px);line-height:1.8;
  color:var(--td-2)}

/* ── Índice ──────────────────────────────────────────────────────────────── */

.blog-list{padding:clamp(48px,6vw,84px) 0 clamp(64px,8vw,110px)}
.blog-entry{display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr) auto;
  gap:clamp(18px,3vw,44px);align-items:start;padding:clamp(26px,3vw,38px) 0;
  border-bottom:1px solid var(--line);position:relative;transition:padding-left .4s var(--ease)}
.blog-entry:first-child{border-top:1px solid var(--line)}
.blog-entry:hover{padding-left:12px}
.blog-entry-meta{display:flex;flex-direction:column;gap:8px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--td-3);padding-top:6px}
.blog-entry h2{font-size:clamp(1.15rem,1rem + 1vw,1.85rem);font-weight:500;line-height:1.28;
  letter-spacing:-.03em;overflow-wrap:break-word}
.blog-entry p{font-size:14px;line-height:1.75;color:var(--td-2);margin-top:12px;max-width:46ch}
.blog-entry-go{font-size:22px;color:var(--lav);line-height:1;padding-top:6px;
  transition:transform .4s var(--ease)}
.blog-entry:hover .blog-entry-go{transform:translate(3px,-3px)}

.blog-note{margin-top:clamp(36px,4vw,52px);padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line);background:var(--ink-1);color:var(--td-2);
  font-size:13px;line-height:1.8;max-width:52ch}

/* ── Artículo ────────────────────────────────────────────────────────────── */

.post-head{padding:clamp(118px,13vw,168px) 0 clamp(32px,4vw,48px)}
.post-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--td-2);
  font-size:12.5px;transition:gap .35s var(--ease),color .35s var(--ease)}
.post-back:hover{gap:15px;color:var(--lav)}
.post-head h1{font-size:clamp(1.85rem,1.1rem + 3vw,3.4rem);line-height:1.1;letter-spacing:-.045em;
  margin:26px 0 0;max-width:20ch}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--td-3)}

.post-body{padding:0 0 clamp(64px,8vw,104px);max-width:48ch}
.post-body>*{margin-top:26px}
.post-body>:first-child{margin-top:0}
.post-body p{font-size:16px;line-height:1.85;color:var(--td-2)}
.post-body .post-intro{font-size:clamp(16.5px,1.3vw,19px);line-height:1.8;color:var(--td-1)}
.post-body h2{font-size:clamp(1.3rem,1.05rem + 1.1vw,1.95rem);font-weight:500;line-height:1.3;
  letter-spacing:-.03em;color:var(--td-1);margin-top:clamp(44px,5vw,64px);
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.post-body h3{font-size:clamp(1.02rem,.95rem + .5vw,1.25rem);font-weight:500;line-height:1.4;
  color:var(--td-1);margin-top:36px}
.post-body ul,.post-body ol{padding-left:22px;color:var(--td-2)}
.post-body li{font-size:15.5px;line-height:1.8;margin-top:12px}
.post-body li::marker{color:var(--lav)}
.post-body strong{color:var(--td-1);font-weight:600}
.post-body a{color:var(--lav);text-decoration:underline;text-underline-offset:4px}
.post-body a:hover{color:var(--lav-hi)}

/* Cita: barra de color a la izquierda, sin comillas decorativas. */
.post-body blockquote{margin-left:0;padding:4px 0 4px 26px;border-left:2px solid var(--lav);
  font-size:clamp(1.02rem,1rem + .5vw,1.3rem);line-height:1.6;color:var(--td-1);letter-spacing:-.01em}

/* Caja de dato: lo que hay que recordar de la sección. */
.post-box{border:1px solid var(--line-2);background:var(--ink-1);padding:clamp(20px,2.4vw,30px)}
.post-box p{margin:0;font-size:14.5px}
.post-box p+p{margin-top:14px}
.post-box .k{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lav);margin-bottom:12px}

.post-foot{border-top:1px solid var(--line);padding:clamp(34px,4vw,52px) 0 0;margin-top:clamp(48px,6vw,72px)}
.post-foot p{font-size:13.5px;line-height:1.8;color:var(--td-2);max-width:46ch;margin:0}
.post-foot .home-link,.blog-list .home-link{display:inline-flex;align-items:center;gap:10px;
  min-height:44px;margin-top:18px;color:var(--lav);font-size:13px;
  transition:gap .35s var(--ease),color .35s var(--ease)}
.post-foot .home-link:hover,.blog-list .home-link:hover{gap:16px;color:var(--lav-hi)}

.blog-mm .footer-in{grid-template-columns:1fr;justify-items:center;text-align:center}
.blog-mm .footer-links{gap:8px 26px;justify-content:center}
.blog-mm .footer-links a{color:var(--td-2);min-height:44px;display:inline-flex;align-items:center}

@media(max-width:760px){
 .blog-entry{grid-template-columns:minmax(0,1fr) auto;gap:14px 18px}
 .blog-entry-meta{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:6px 16px;padding-top:0}
 .post-head h1{max-width:none}
 /* Mirano Extended es ancha: al tamaño de escritorio la línea de móvil queda en
    unos 33 caracteres, demasiado corta para leer seguido. Bajar el cuerpo aquí
    devuelve la medida a un rango legible sin cambiar de tipografía. */
 .post-body p{font-size:14.5px;line-height:1.8}
 .post-body .post-intro{font-size:15.5px}
 .post-body li{font-size:14px}
 .post-body blockquote{font-size:1rem;padding-left:18px}
 .post-box p{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
 .blog-entry,.blog-entry-go,.post-back,.home-link,.post-foot .home-link{transition:none}
}