/* blog.css — guías de Pasa Primero (/blog/). Se carga después de /estilos.css y usa sus tokens
 * (claro/oscuro incluidos). Móvil primero; columna de lectura de ~46rem. */

.b-main { background: var(--carroceria); }
.b-art { padding-block: 1.25rem 3.5rem; }
.b-art > .envoltura { max-width: 46rem; }

/* migas */
.b-migas ol { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .5rem;
  font: 700 .82rem var(--fuente-senal); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.b-migas li { display: inline-flex; align-items: center; gap: .5rem; }
.b-migas li + li::before { content: "›"; color: var(--tinta-3); }
.b-migas a { color: var(--tinta-2); display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.b-migas a:hover { text-decoration: underline; }
.b-migas [aria-current] { color: var(--tinta-3); display: inline-flex; min-height: 44px; align-items: center; }

/* cabeza */
.b-cabeza h1 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3rem); line-height: 1.04; }
.b-bajada { margin-top: .9rem; font-size: 1.15rem; line-height: 1.5; color: var(--tinta-2); }
.b-meta { margin-top: .9rem; font: 600 .9rem/1.4 var(--fuente-senal); letter-spacing: .02em; color: var(--tinta-3); }
.b-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.chip-doble, .b-chip { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 4px 8px; border-radius: 6px;
  font: 700 .75rem/1 var(--fuente-senal); letter-spacing: .05em; text-transform: uppercase; }
.chip-doble { background: var(--ambar); color: #1E2328; } /* ámbar: SOLO lo que vale doble */
.b-chip { background: var(--regla-2); color: var(--tinta); }

/* respuesta directa (GEO) en el LCD del validador */
.b-respuesta { margin-top: 1.5rem; padding: 1rem 1.1rem 1.15rem; }
.b-respuesta .lcd-rotulo { margin-bottom: .45rem; color: var(--lcd-verde); }
.b-respuesta p:not(.lcd-rotulo) { font: 500 1.06rem/1.55 var(--fuente); color: var(--lcd-texto); }
.b-respuesta p + p { margin-top: .5rem; }
.b-respuesta a { color: var(--lcd-texto); }

/* tabla de contenidos */
.b-toc { margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: var(--r); background: var(--suelo); }
.b-toc-tit { font: 700 .82rem var(--fuente-senal); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: .35rem; }
.b-toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0; }
.b-toc li { color: var(--tinta-3); }
.b-toc a { display: inline-flex; min-height: 40px; align-items: center; color: var(--tinta); font-weight: 600; text-decoration: none; }
.b-toc a:hover { text-decoration: underline; }

/* cuerpo */
.b-cuerpo { margin-top: .5rem; }
.b-cuerpo section { scroll-margin-top: 80px; }
.b-cuerpo h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); font-stretch: 84%; line-height: 1.12; margin: 2.5rem 0 .75rem; }
.b-cuerpo h3 { font-size: 1.15rem; margin: 1.6rem 0 .45rem; }
.b-cuerpo p, .b-cuerpo li { font-size: 1.06rem; line-height: 1.68; color: var(--tinta-2); }
.b-cuerpo p + p { margin-top: .85rem; }
.b-cuerpo p > b:first-child, .b-cuerpo strong { color: var(--tinta); }
.b-cuerpo ul, .b-cuerpo ol { margin: .75rem 0; padding-left: 1.3rem; display: grid; gap: .35rem; }
.b-cuerpo a { color: var(--tinta); font-weight: 600; }
.b-cuerpo .b-directa { color: var(--tinta); font-weight: 500; }
.b-cuerpo .b-ojo { margin: 1.1rem 0; padding: .85rem 1rem; border-radius: var(--r-s); background: var(--panel-2);
  box-shadow: inset 4px 0 0 var(--l4); color: var(--tinta); }
.b-cuerpo .b-ojo b { color: var(--tinta); }

/* tablas */
.b-tabla { margin: 1.1rem 0; overflow-x: auto; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--regla); }
.b-tabla table { width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 22rem; }
.b-tabla caption { text-align: left; padding: .7rem .85rem .2rem; font: 700 .82rem var(--fuente-senal); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.b-tabla th, .b-tabla td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--regla-2); vertical-align: top; color: var(--tinta-2); }
.b-tabla th { color: var(--tinta); font-weight: 750; background: var(--suelo); }
.b-tabla tr:last-child td { border-bottom: 0; }
.b-tabla td.num, .b-tabla th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* escena embebida */
.b-escena { margin: 1.5rem auto; max-width: 30rem; }
.b-caja { background: #DDE8D6; }
.b-espera { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.55) 46% 54%, transparent 54% 100%) center / 100% 22% no-repeat,
              linear-gradient(#5A6067, #5A6067) center / 100% 22% no-repeat, #CFE2C3; }
.b-espera span { padding: .4rem .8rem; border-radius: 99px; background: rgba(16,35,26,.86); color: var(--lcd-texto);
  font: 700 .8rem var(--fuente-senal); letter-spacing: .1em; text-transform: uppercase; }
.b-caja.lista .b-espera { display: none; }
.b-escena-pie { display: grid; gap: .6rem; margin-top: .75rem; }
.b-narr { min-height: 1.5em; font-size: 1rem; line-height: 1.5; color: var(--tinta); }
.b-narr:empty { display: none; }
.b-ver { justify-self: start; min-height: 48px; }
.b-escena figcaption { margin-top: .75rem; font-size: .98rem; line-height: 1.55; color: var(--tinta-2); }
.b-escena figcaption b { color: var(--tinta); }
.b-cita { display: inline-block; font: 700 .78rem var(--fuente-senal); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.b-noscript { margin-top: .5rem; font-size: .95rem; color: var(--tinta-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b-caja { background: #24352a; }
  :root:not([data-theme="light"]) .b-espera { background: linear-gradient(#3a3f45, #3a3f45) center / 100% 22% no-repeat, #24352a; }
}
:root[data-theme="dark"] .b-caja { background: #24352a; }
:root[data-theme="dark"] .b-espera { background: linear-gradient(#3a3f45, #3a3f45) center / 100% 22% no-repeat, #24352a; }

/* CTA */
.b-cta { margin: 2.25rem 0; padding: 1.25rem 1.2rem 1.35rem; border-radius: var(--r); background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--tinta); display: grid; gap: .55rem; justify-items: start; }
.b-cta p { color: var(--tinta-2); font-size: 1.02rem; line-height: 1.55; }
.b-cta .b-cta-tit { font: 800 1.3rem/1.15 var(--fuente); font-stretch: 86%; color: var(--tinta); }
.b-cta .btn { margin-top: .35rem; }
.b-cta.lcd { background: var(--lcd); border: 1px solid var(--lcd-borde); box-shadow: inset 0 2px 10px rgba(0,0,0,.45), var(--sombra); }
.b-cta.lcd p, .b-cta.lcd .b-cta-tit { color: var(--lcd-texto); font-family: var(--fuente); }
@media (max-width: 479px) { .b-cta .btn { width: 100%; } }

/* preguntas frecuentes y fuentes */
.b-faq h3 { font-size: 1.12rem; color: var(--tinta); }
.b-fuentes ul { font-size: .98rem; }
.b-fuentes li { font-size: .98rem; }
.b-aviso { margin-top: 1rem; font-size: .92rem !important; color: var(--tinta-3) !important; }

/* tarjetas (relacionadas e índice) */
.b-rel { padding-block: 2.75rem 4rem; background: var(--suelo); }
.b-rel h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 1.25rem; }
.b-indice { padding-top: 1.5rem; }
.b-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 720px) { .b-tarjetas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .b-indice .b-tarjetas { grid-template-columns: repeat(3, 1fr); } }
.b-tarjeta a { height: 100%; display: grid; gap: .45rem; align-content: start; padding: 1.1rem 1.15rem 1rem; border-radius: var(--r);
  background: var(--panel); box-shadow: var(--sombra); text-decoration: none; border-top: 6px solid var(--rojo);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.b-tarjeta a:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.b-tarjeta-tit { font: 800 1.15rem/1.2 var(--fuente); font-stretch: 88%; color: var(--tinta); }
.b-tarjeta-txt { color: var(--tinta-2); font-size: .98rem; line-height: 1.5; }
.b-tarjeta-ir { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; margin-top: .2rem; font-weight: 700; color: var(--tinta); }
.b-indice .b-cta { max-width: 46rem; }
@media (prefers-reduced-motion: reduce) { .b-tarjeta a { transition: none; } .b-tarjeta a:hover { transform: none; } }