/* blog.css — el blog. Se carga SIEMPRE después de styles.css, que aporta los tokens
   (--ink, --bone, --min-*, --brass-text, --focus, --press*) y las tres familias
   autoalojadas. Aquí no se define ni un color nuevo: si hace falta uno, va a la guía.

   Dos decisiones de fondo:
   · **Una columna de lectura, no una retícula.** Un artículo de 1.800 palabras se lee mejor
     en 68ch que en un grid de revista. Los diagramas y las tablas son lo único que se sale.
   · **La capa de datos es la mono.** Cifras, fuentes y cotas van en IBM Plex Mono, igual que
     en el hero y en el informe: es la señal de "esto está medido" en todo el producto. */

/* --- cabecera del artículo ------------------------------------------------ */
.bhead{max-width:var(--bw,72ch);margin:0 auto;padding:clamp(5rem,11vw,8rem) var(--bpad,1.5rem) 0}
.bkicker{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:0 0 1.4rem}
.bkicker a{color:var(--min-d);text-decoration:none;border-bottom:1px solid transparent}
.bkicker a:hover{border-bottom-color:var(--min-d)}
/* La barra separadora es texto, no adorno: con --min-l medía 2,60:1 sobre hueso (--min-l la
   guía lo reserva para SUPERFICIES, y ya costó una regresión el 04-08 en el checkout). */
.bkicker .sep{color:var(--min-d)}
.bhead h1{font-size:clamp(2.1rem,5.6vw,3.5rem);line-height:1.04;letter-spacing:-.02em;
  margin:0 0 1.1rem;text-wrap:balance}
.bmeta{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--min-d);margin:0}
.bmeta time{color:var(--min-d)}

/* --- respuesta rápida (el bloque que Google extrae) ------------------------ */
.bfast{max-width:var(--bw,72ch);margin:clamp(2rem,4vw,3rem) auto 0;padding:0 var(--bpad,1.5rem)}
.bfast>div{background:var(--ink);color:var(--bone);border-radius:14px;
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.4rem,3.4vw,2.2rem)}
.bfast p{margin:0;font-size:clamp(1.02rem,2.1vw,1.16rem);line-height:1.6;color:var(--bone)}
.bfast .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);display:block;margin:0 0 .7rem}

/* --- cuerpo ---------------------------------------------------------------- */
.bbody{max-width:var(--bw,72ch);margin:0 auto;padding:clamp(2.4rem,5vw,3.4rem) var(--bpad,1.5rem) 0;
  font-size:clamp(1rem,2vw,1.09rem);line-height:1.72}
.bbody h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.6vw,2.25rem);
  line-height:1.12;letter-spacing:-.015em;margin:clamp(2.6rem,5vw,3.6rem) 0 .9rem}
.bbody h3{font-size:clamp(1.08rem,2.2vw,1.24rem);font-weight:600;letter-spacing:-.005em;
  margin:2rem 0 .6rem}
.bbody p{margin:0 0 1.15rem}
.bbody ul,.bbody ol{margin:0 0 1.3rem;padding-left:1.25rem}
.bbody li{margin:0 0 .5rem}
.bbody li::marker{color:var(--min-m)}
.bbody strong{font-weight:600}
.bbody a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass-text);
  transition:background var(--press-dur) ease-out}
.bbody a:hover{background:rgba(205,176,106,.16)}
.bbody hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}
.bbody blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:2px solid var(--brass-text);
  color:var(--min-d)}

/* Cifras y unidades en mono: la "capa de datos" del producto, también aquí. */
.bbody .num{font-family:var(--mono);font-weight:500;font-size:.94em;letter-spacing:.01em}

/* --- tablas (se salen de la columna si hace falta) ------------------------- */
.btable{margin:1.8rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.btable table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.94rem}
.btable th,.btable td{text-align:left;padding:.72rem .9rem;border-bottom:1px solid var(--line);
  vertical-align:top}
.btable thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--min-d);border-bottom-color:var(--ink)}
.btable tbody tr:last-child td{border-bottom:0}

/* --- diagramas ------------------------------------------------------------- */
/* Van a sangre de la columna de lectura porque son la pieza propia: el resto del mundo
   ilustra, nosotros medimos. La nota de pie dice de dónde salen los números. */
.bfig{margin:clamp(2rem,4.4vw,3rem) 0;width:min(100%,var(--bfigw,58rem));
  margin-inline:calc((min(100%,var(--bw,72ch)) - min(100%,var(--bfigw,58rem)))/2)}
.bfig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);
  background:var(--bone)}
.bfig figcaption{font-family:var(--mono);font-size:.7rem;line-height:1.6;letter-spacing:.04em;
  color:var(--min-d);margin:.7rem 0 0;text-align:center}
.bfig figcaption b{color:var(--ink);font-weight:500}

/* --- FAQ -------------------------------------------------------------------- */
.bfaq{max-width:var(--bw,72ch);margin:clamp(3rem,6vw,4.5rem) auto 0;padding:0 var(--bpad,1.5rem)}
.bfaq h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.6vw,2.25rem);
  margin:0 0 1.4rem}
.bfaq details{border-top:1px solid var(--line)}
.bfaq details:last-of-type{border-bottom:1px solid var(--line)}
.bfaq summary{cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;position:relative;
  font-weight:600;font-size:1.02rem}
.bfaq summary::-webkit-details-marker{display:none}
.bfaq summary::after{content:"";position:absolute;right:.35rem;top:50%;width:.62rem;height:.62rem;
  border-right:1.5px solid var(--min-d);border-bottom:1.5px solid var(--min-d);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease-out}
.bfaq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.bfaq details p{margin:0 0 1.1rem;color:var(--min-d);line-height:1.7}

/* --- fuentes ---------------------------------------------------------------- */
/* Se publican enteras y numeradas. Es la parte que la competencia no enseña, y en este
   proyecto ya ha pasado por una verificación una a una: merece estar a la vista. */
.bsrc{max-width:var(--bw,72ch);margin:clamp(3rem,6vw,4.5rem) auto 0;padding:0 var(--bpad,1.5rem)}
.bsrc h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 .6rem}
.bsrc .intro{color:var(--min-d);margin:0 0 1.3rem;font-size:.98rem}
.bsrc ol{margin:0;padding-left:1.6rem;font-size:.9rem;line-height:1.62}
.bsrc li{margin:0 0 .8rem;color:var(--min-d)}
.bsrc li::marker{font-family:var(--mono);font-size:.8em;color:var(--min-m)}
.bsrc a{color:var(--ink);word-break:break-word;text-decoration:none;
  border-bottom:1px solid var(--line)}
.bsrc a:hover{border-bottom-color:var(--brass-text)}
.bsrc .tipo{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--min-m)}

/* --- aviso de alcance (principio 6: ni médico ni diagnóstico) --------------- */
.bnote{max-width:var(--bw,72ch);margin:clamp(2.6rem,5vw,3.6rem) auto 0;padding:0 var(--bpad,1.5rem)}
.bnote>div{border:1px solid var(--line);border-left:2px solid var(--min-d);border-radius:10px;
  padding:1.1rem 1.3rem;color:var(--min-d);font-size:.94rem;line-height:1.65}

/* --- seguir leyendo --------------------------------------------------------- */
.bnext{max-width:var(--bw,72ch);margin:clamp(3.4rem,7vw,5rem) auto 0;padding:0 var(--bpad,1.5rem)}
.bnext h2{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--min-d);margin:0 0 1.1rem;font-weight:400}
.bnext ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.bnext a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:12px;text-decoration:none;
  color:var(--ink);transition:border-color .2s ease-out,transform var(--press-dur) ease-out}
@media (hover:hover){.bnext a:hover{border-color:var(--ink)}}
.bnext a:active{transform:scale(var(--press))}
.bnext .kw{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--min-m);
  white-space:nowrap}

/* --- CTA al producto -------------------------------------------------------- */
/* Uno solo y al final. Un blog que interrumpe el artículo para vender deja de ser fuente. */
.bcta{max-width:var(--bw,72ch);margin:clamp(3.4rem,7vw,5rem) auto clamp(4rem,8vw,6rem);
  padding:0 var(--bpad,1.5rem)}
.bcta>div{background:var(--min-d);color:var(--bone);border-radius:16px;
  padding:clamp(1.6rem,4vw,2.4rem);display:flex;flex-wrap:wrap;gap:1.2rem;
  align-items:center;justify-content:space-between}
.bcta p{margin:0;max-width:32ch;font-size:1.04rem;line-height:1.55;color:var(--bone)}
.bcta .btn{border-color:var(--bone);background:var(--bone);color:var(--ink);flex:none}

/* --- índice del blog --------------------------------------------------------- */
.bidx{max-width:74rem;margin:0 auto;padding:clamp(5rem,11vw,8rem) var(--bpad,1.5rem) 0}
.bidx h1{font-size:clamp(2.4rem,7vw,4.2rem);line-height:1;margin:0 0 1rem}
.bidx .lede{max-width:56ch;color:var(--min-d);font-size:clamp(1.02rem,2.1vw,1.16rem);
  line-height:1.65;margin:0 0 clamp(2.4rem,5vw,3.4rem)}
.bgrid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
  padding-bottom:clamp(4rem,9vw,7rem)}
.bcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);
  transition:border-color .2s ease-out,transform var(--press-dur) ease-out}
@media (hover:hover){.bcard:hover{border-color:var(--ink)}}
.bcard:active{transform:scale(var(--press-lg))}
/* `height:auto` NO es decorativo: los <img> llevan width/height como atributos (evitan el
   salto de layout al cargar), y esa altura cuenta como explícita. `aspect-ratio` solo actúa
   si una de las dos dimensiones es auto, así que sin esto la tarjeta salía de 362×1080 px
   —medido— en vez de 16:9. */
.bcard img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--bone)}
.bcard .in{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.bcard h2{font-size:1.06rem;line-height:1.32;margin:0;font-weight:600;letter-spacing:-.005em}
.bcard p{margin:0;color:var(--min-d);font-size:.92rem;line-height:1.55;flex:1}
.bcard .kw{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--min-m)}
/* Post encargado y aún no escrito: se anuncia, no se enlaza. Enlazar un post inexistente
   es un 404 con la marca puesta. */
.bcard.soon{background:transparent;border-style:dashed;cursor:default}
.bcard.soon .in{opacity:.72}

@media (max-width:640px){
  :root{--bpad:1.15rem}
  .bcta>div{flex-direction:column;align-items:flex-start}
}

/* Sin movimiento si el sistema lo pide. Queda la señal, se retira el desplazamiento:
   misma regla que el resto del sitio (styles.css). */
@media (prefers-reduced-motion:reduce){
  .bfaq details[open] summary::after,.bnext a,.bcard{transition-duration:.01ms}
}

/* ============ CONTRASTE ALTO ============
   El blog no tiene ni una superficie translúcida —de ahí que no lleve bloque de
   transparencia reducida—: lo único atenuado es la tarjeta de post pendiente. */
@media (prefers-contrast: more){
  .bcard.soon .in{opacity:1}
  .bbody a:hover{background:rgba(205,176,106,.32)}
}