/* =====================================================================
   NIUVO BEBÉS · ARTÍCULOS DEL BLOG
   Hoja de estilos única. Todas las clases usan el prefijo "nbb-"
   (Niuvo Bebés Blog) y todas las reglas viven dentro de .nbb-pagina,
   así no pisan los estilos del resto del sitio.
   ===================================================================== */

.nbb-pagina {
  /* ---- Colores ---- */
  --nbb-azul: #0b8fd3;
  --nbb-azul-oscuro: #0874ad;
  --nbb-azul-suave: #e7f4fc;
  --nbb-rosa: #f7e3ec;
  --nbb-rosa-fuerte: #e86a9a;
  --nbb-turquesa: #2f9e94;
  --nbb-turquesa-suave: #e3f4f2;
  --nbb-amarillo-suave: #fff6dd;
  --nbb-texto: #2c2a35;
  --nbb-texto-suave: #5d5b68;
  --nbb-borde: #e9e7ef;
  --nbb-fondo: #ffffff;
  --nbb-fondo-gris: #f5f6f9;

  /* ---- Tipografía ---- */
  --nbb-fuente-titulos: "Fredoka", "Nunito", system-ui, sans-serif;
  --nbb-fuente-texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Medidas ---- */
  --nbb-radio: 18px;
  --nbb-radio-chico: 12px;
  --nbb-sombra: 0 10px 30px rgba(44, 42, 53, .07);
  --nbb-ancho: 1240px;
  --nbb-margen-lateral: clamp(14px, 4vw, 32px);

  font-family: var(--nbb-fuente-texto);
  color: var(--nbb-texto);
  background: var(--nbb-fondo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.nbb-pagina *,
.nbb-pagina *::before,
.nbb-pagina *::after { box-sizing: border-box; }

.nbb-pagina img { max-width: 100%; height: auto; display: block; }
.nbb-pagina a { color: var(--nbb-azul); text-decoration: none; }
.nbb-pagina a:hover { color: var(--nbb-azul-oscuro); }

/* ---------- Barra de progreso de lectura ---------- */
.nbb-progreso {
  position: fixed; top: 0; left: 0; height: 4px; width: 0;
  background: linear-gradient(90deg, var(--nbb-azul), var(--nbb-rosa-fuerte));
  z-index: 9999; transition: width .1s linear;
}

/* ---------- Contenedor ---------- */
.nbb-contenedor {
  width: 100%;
  max-width: var(--nbb-ancho);
  margin: 0 auto;
  padding: 0 var(--nbb-margen-lateral);
}

/* ---------- Cabecera del artículo ---------- */
.nbb-cabecera { padding: 0 0 clamp(18px, 3vw, 28px); }
.nbb-contenedor { padding-top: clamp(24px, 5vw, 56px); }

.nbb-migas {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: .85rem; color: var(--nbb-texto-suave); margin: 0 0 14px; padding: 0; list-style: none;
}
.nbb-cuerpo .nbb-migas { padding: 0; margin: 0 0 14px; }
.nbb-cuerpo .nbb-migas li { margin: 0; color: var(--nbb-texto-suave); }
.nbb-migas li { display: flex; align-items: center; gap: 6px; }
.nbb-migas li + li::before { content: "›"; color: #b4b2bd; }
.nbb-migas a { color: var(--nbb-texto-suave); }
.nbb-migas a:hover { color: var(--nbb-azul); }
.nbb-migas [aria-current] {
  color: var(--nbb-texto); font-weight: 600;
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nbb-titulo {
  font-family: var(--nbb-fuente-titulos);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1.18;
  margin: 0 0 16px;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.nbb-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: .85rem; color: var(--nbb-texto-suave);
  padding-bottom: 18px; border-bottom: 1px solid var(--nbb-borde);
}
.nbb-meta__dato { display: inline-flex; align-items: center; gap: 6px; }
.nbb-meta__dato svg { width: 16px; height: 16px; flex-shrink: 0; }

.nbb-categoria {
  display: inline-block;
  background: var(--nbb-turquesa-suave);
  color: var(--nbb-turquesa) !important;
  font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}

/* ---------- Imagen principal ---------- */
.nbb-portada {
  margin: 0 0 clamp(24px, 4vw, 40px);
  border-radius: var(--nbb-radio);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--nbb-azul-suave), var(--nbb-rosa));
}
.nbb-portada img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Rejilla principal ---------- */
.nbb-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: clamp(40px, 6vw, 80px);
}

/* ---------- Cuerpo del artículo ---------- */
.nbb-cuerpo { min-width: 0; font-size: clamp(1rem, .96rem + .2vw, 1.075rem); }

.nbb-cuerpo h2 {
  font-family: var(--nbb-fuente-titulos);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.25; margin: 2.2em 0 .6em;
  scroll-margin-top: 90px;
}
.nbb-cuerpo h3 {
  font-family: var(--nbb-fuente-titulos);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  line-height: 1.3; margin: 1.6em 0 .5em;
}
.nbb-cuerpo p { margin: 0 0 1.1em; color: #3b3945; }
.nbb-cuerpo strong { color: var(--nbb-texto); }
.nbb-cuerpo ul, .nbb-cuerpo ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.nbb-cuerpo li { margin-bottom: .45em; color: #3b3945; }
.nbb-cuerpo li::marker { color: var(--nbb-azul); font-weight: 700; }

.nbb-entrada {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  color: var(--nbb-texto-suave) !important;
}

/* ---------- Índice de contenido ---------- */
.nbb-indice {
  background: var(--nbb-fondo-gris);
  border-radius: var(--nbb-radio);
  padding: 4px 22px;
  margin: 0 0 2em;
}
.nbb-indice summary {
  cursor: pointer; list-style: none;
  font-family: var(--nbb-fuente-titulos); font-weight: 600; font-size: 1.05rem;
  padding: 14px 0; display: flex; justify-content: space-between; align-items: center;
}
.nbb-indice summary::-webkit-details-marker { display: none; }
.nbb-indice summary::after {
  content: "+"; font-size: 1.4rem; line-height: 1; color: var(--nbb-azul); transition: transform .2s;
}
.nbb-indice[open] summary::after { transform: rotate(45deg); }
.nbb-indice ol { margin: 0 0 16px; padding-left: 1.2em; counter-reset: none; }
.nbb-indice li { margin-bottom: 6px; }
.nbb-indice a { color: var(--nbb-texto); font-size: .95rem; }
.nbb-indice a:hover, .nbb-indice a.nbb-activo { color: var(--nbb-azul); font-weight: 700; }

/* ---------- Cajas destacadas ---------- */
.nbb-caja {
  border-radius: var(--nbb-radio-chico);
  padding: 18px 20px 18px 56px;
  margin: 1.6em 0;
  position: relative;
  background: var(--nbb-azul-suave);
  font-size: .97rem;
}
.nbb-caja p:last-child, .nbb-caja ul:last-child { margin-bottom: 0; }
.nbb-caja::before {
  position: absolute; left: 18px; top: 16px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: .9rem; color: #fff;
  background: var(--nbb-azul); content: "i";
}
.nbb-caja__titulo { display: block; font-weight: 800; margin-bottom: 4px; color: var(--nbb-texto); }
.nbb-caja--consejo { background: var(--nbb-turquesa-suave); }
.nbb-caja--consejo::before { background: var(--nbb-turquesa); content: "✓"; }
.nbb-caja--alerta { background: var(--nbb-amarillo-suave); }
.nbb-caja--alerta::before { background: #e0a100; content: "!"; }
.nbb-caja--rosa { background: var(--nbb-rosa); }
.nbb-caja--rosa::before { background: var(--nbb-rosa-fuerte); content: "♥"; }

/* ---------- Tablas ---------- */
.nbb-tabla-envoltura {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 1.4em 0 1.8em;
  border: 1px solid var(--nbb-borde); border-radius: var(--nbb-radio-chico);
}
.nbb-tabla { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 560px; }
.nbb-tabla th, .nbb-tabla td { padding: 12px 14px; text-align: left; vertical-align: top; }
.nbb-tabla thead th {
  background: var(--nbb-azul); color: #fff; font-weight: 700; white-space: nowrap;
}
.nbb-tabla tbody tr:nth-child(even) { background: var(--nbb-fondo-gris); }
.nbb-tabla tbody td:first-child { font-weight: 700; color: var(--nbb-texto); }

/* ---------- Pasos numerados ---------- */
.nbb-pasos { list-style: none; padding: 0 !important; counter-reset: nbbpaso; }
.nbb-pasos > li {
  counter-increment: nbbpaso;
  position: relative; padding: 4px 0 14px 54px; margin: 0;
}
.nbb-pasos > li::before {
  content: counter(nbbpaso);
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--nbb-azul); color: #fff;
  font-family: var(--nbb-fuente-titulos); font-weight: 700;
  display: grid; place-items: center;
}
.nbb-pasos > li:not(:last-child)::after {
  content: ""; position: absolute; left: 18px; top: 42px; bottom: 2px;
  width: 2px; background: var(--nbb-borde);
}

/* ---------- Tarjetas en rejilla (tipos, categorías) ---------- */
.nbb-tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin: 1.4em 0 1.8em;
}
.nbb-tarjeta {
  border: 1px solid var(--nbb-borde); border-radius: var(--nbb-radio-chico);
  padding: 18px; background: #fff;
}
.nbb-tarjeta h3 { margin: 0 0 6px !important; font-size: 1.08rem !important; }
.nbb-tarjeta p { margin: 0; font-size: .93rem; }
.nbb-tarjeta__icono {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--nbb-azul-suave); font-size: 1.3rem; margin-bottom: 10px;
}

/* ---------- Lista de verificación ---------- */
.nbb-checklist { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.nbb-checklist li { margin: 0; }
.nbb-checklist label {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 10px 14px; border-radius: var(--nbb-radio-chico);
  background: var(--nbb-fondo-gris); transition: background .2s;
}
.nbb-checklist input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 22px; height: 22px; margin: 2px 0 0; border-radius: 7px;
  border: 2px solid #c9c6d3; background: #fff; display: grid; place-items: center; cursor: pointer;
}
.nbb-checklist input::after { content: "✓"; color: #fff; font-size: .8rem; font-weight: 800; opacity: 0; }
.nbb-checklist input:checked { background: var(--nbb-turquesa); border-color: var(--nbb-turquesa); }
.nbb-checklist input:checked::after { opacity: 1; }
.nbb-checklist input:checked + span { text-decoration: line-through; color: var(--nbb-texto-suave); }
.nbb-checklist input:focus-visible { outline: 3px solid var(--nbb-azul); outline-offset: 2px; }

/* ---------- Chips de prioridad ---------- */
.nbb-chip {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 999px; margin-left: 6px;
  vertical-align: 2px; white-space: nowrap;
}
.nbb-chip--esencial { background: var(--nbb-azul-suave); color: var(--nbb-azul-oscuro); }
.nbb-chip--util { background: var(--nbb-turquesa-suave); color: var(--nbb-turquesa); }
.nbb-chip--extra { background: var(--nbb-rosa); color: #b84576; }

/* ---------- Preguntas frecuentes ---------- */
.nbb-faq { display: grid; gap: 10px; margin: 1em 0 2em; }
.nbb-faq details {
  border: 1px solid var(--nbb-borde); border-radius: var(--nbb-radio-chico); background: #fff;
}
.nbb-faq summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; position: relative;
  font-weight: 700; color: var(--nbb-texto);
}
.nbb-faq summary::-webkit-details-marker { display: none; }
.nbb-faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--nbb-azul); transition: transform .2s;
}
.nbb-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.nbb-faq details > div { padding: 0 18px 16px; }
.nbb-faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Fuentes ---------- */
.nbb-fuentes {
  font-size: .85rem; color: var(--nbb-texto-suave);
  border-top: 1px solid var(--nbb-borde); padding-top: 16px; margin-top: 2em;
}
.nbb-fuentes ul { padding-left: 1.1em; margin: 6px 0 0; }
.nbb-fuentes li { color: var(--nbb-texto-suave); margin-bottom: 2px; }

/* ---------- Compartir ---------- */
.nbb-compartir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 2.2em 0 0; padding: 18px 0; border-top: 1px solid var(--nbb-borde); border-bottom: 1px solid var(--nbb-borde);
}
.nbb-compartir__texto { font-weight: 800; margin-right: 4px; }
.nbb-compartir a, .nbb-compartir button {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--nbb-fondo-gris); color: var(--nbb-texto); transition: transform .15s, background .15s;
  font: inherit;
}
.nbb-compartir a:hover, .nbb-compartir button:hover { background: var(--nbb-azul); color: #fff; transform: translateY(-2px); }
.nbb-compartir svg { width: 18px; height: 18px; }
.nbb-compartir__aviso { font-size: .85rem; color: var(--nbb-turquesa); font-weight: 700; opacity: 0; transition: opacity .2s; }
.nbb-compartir__aviso.nbb-visible { opacity: 1; }

/* ---------- Relacionados ---------- */
.nbb-relacionados { margin-top: clamp(36px, 5vw, 56px); }
.nbb-relacionados__titulo {
  font-family: var(--nbb-fuente-titulos); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
}
.nbb-relacionados__titulo::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 4px solid var(--nbb-azul); flex-shrink: 0;
}
.nbb-relacionados__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.nbb-mini {
  display: flex; flex-direction: column; border-radius: var(--nbb-radio);
  background: var(--nbb-fondo-gris); overflow: hidden; color: var(--nbb-texto) !important;
  transition: transform .2s, box-shadow .2s;
}
.nbb-mini:hover { transform: translateY(-4px); box-shadow: var(--nbb-sombra); }
.nbb-mini__imagen {
  aspect-ratio: 16 / 10; position: relative;
  background: linear-gradient(135deg, var(--nbb-azul-suave), var(--nbb-rosa));
}
.nbb-mini__imagen img { width: 100%; height: 100%; object-fit: cover; }
.nbb-mini__imagen .nbb-categoria {
  position: absolute; left: 10px; top: 10px; background: #fff; font-size: .65rem;
}
.nbb-mini__cuerpo { padding: 14px 16px 18px; }
.nbb-mini__fecha { font-size: .78rem; color: var(--nbb-texto-suave); }
.nbb-mini__titulo { font-weight: 800; line-height: 1.35; margin-top: 4px; font-size: .98rem; }

/* ---------- Barra lateral ---------- */
.nbb-lateral {
  position: sticky; top: 24px;
  display: grid; gap: 22px; min-width: 0;
}
.nbb-bloque { }
.nbb-bloque__titulo {
  font-family: var(--nbb-fuente-titulos); font-size: 1.15rem; font-weight: 600; margin: 0 0 12px;
}

.nbb-buscador { display: flex; border: 1px solid var(--nbb-borde); border-radius: 999px; overflow: hidden; }
.nbb-buscador input {
  flex: 1; min-width: 0; border: 0; outline: 0; padding: 12px 18px;
  font: inherit; font-size: .92rem; color: var(--nbb-texto); background: #fff;
}
.nbb-buscador button {
  border: 0; background: var(--nbb-azul); color: #fff; width: 52px; cursor: pointer;
  display: grid; place-items: center; transition: background .15s;
}
.nbb-buscador button:hover { background: var(--nbb-azul-oscuro); }
.nbb-buscador svg { width: 18px; height: 18px; }
.nbb-buscador:focus-within { border-color: var(--nbb-azul); box-shadow: 0 0 0 3px var(--nbb-azul-suave); }

.nbb-pestanas__botones {
  display: grid; grid-template-columns: 1fr 1fr; background: var(--nbb-fondo-gris);
  border-radius: 999px; padding: 4px; margin-bottom: 12px;
}
.nbb-pestanas__boton {
  border: 0; background: transparent; padding: 9px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .92rem; color: var(--nbb-texto-suave);
}
.nbb-pestanas__boton[aria-selected="true"] { background: var(--nbb-azul); color: #fff; }
.nbb-pestanas__panel[hidden] { display: none; }

.nbb-lista-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nbb-lista-posts a {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center;
  color: var(--nbb-texto); padding: 6px; border-radius: var(--nbb-radio-chico); transition: background .15s;
}
.nbb-lista-posts a:hover { background: var(--nbb-fondo-gris); color: var(--nbb-texto); }
.nbb-lista-posts a[aria-current="page"] { background: var(--nbb-azul-suave); }
.nbb-lista-posts__imagen {
  width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, var(--nbb-azul-suave), var(--nbb-rosa));
}
.nbb-lista-posts__imagen img { width: 100%; height: 100%; object-fit: cover; }
.nbb-lista-posts__fecha { display: block; font-size: .74rem; font-weight: 700; color: var(--nbb-texto-suave); }
.nbb-lista-posts__titulo {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .88rem; line-height: 1.35;
}

.nbb-lista-categorias { list-style: none; margin: 0; padding: 0; }
.nbb-lista-categorias a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 2px; border-bottom: 1px dashed var(--nbb-borde); color: var(--nbb-texto); font-size: .95rem;
}
.nbb-lista-categorias a:hover { color: var(--nbb-azul); }
.nbb-lista-categorias span {
  font-size: .75rem; font-weight: 800; background: var(--nbb-fondo-gris);
  min-width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; padding: 0 8px;
}

.nbb-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.nbb-etiquetas a {
  border: 1.5px solid var(--nbb-texto); border-radius: 999px; padding: 5px 13px;
  font-size: .8rem; font-weight: 700; color: var(--nbb-texto); transition: all .15s;
}
.nbb-etiquetas a:hover { background: var(--nbb-azul); border-color: var(--nbb-azul); color: #fff; }

.nbb-promo {
  background: linear-gradient(150deg, var(--nbb-rosa), #fdf3f7);
  border-radius: var(--nbb-radio); padding: 22px; text-align: left;
}
.nbb-promo__titulo { font-family: var(--nbb-fuente-titulos); font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; line-height: 1.25; }
.nbb-promo p { font-size: .9rem; color: var(--nbb-texto-suave); margin: 0 0 14px; }

.nbb-boton {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--nbb-azul); color: #fff !important; font-weight: 800; font-size: .92rem;
  padding: 11px 20px; border-radius: 999px; transition: background .15s, transform .15s;
}
.nbb-boton:hover { background: var(--nbb-azul-oscuro); transform: translateY(-2px); }

/* ---------- Volver arriba ---------- */
.nbb-arriba {
  position: fixed; right: 22px; bottom: 100px; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--nbb-azul); color: #fff; box-shadow: var(--nbb-sombra);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.nbb-arriba.nbb-visible { opacity: 1; pointer-events: auto; }
.nbb-arriba:hover { transform: translateY(-3px); }
.nbb-arriba svg { width: 20px; height: 20px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Laptops */
@media (max-width: 1200px) {
  .nbb-rejilla { grid-template-columns: minmax(0, 1fr) 290px; }
}

/* Tablets: la barra lateral baja debajo del artículo */
@media (max-width: 992px) {
  .nbb-rejilla { grid-template-columns: minmax(0, 1fr); }
  .nbb-lateral {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    border-top: 1px solid var(--nbb-borde); padding-top: 28px;
  }
  .nbb-bloque--buscador { grid-column: 1 / -1; }
  .nbb-portada { aspect-ratio: 16 / 8; }
}

/* Tablets chicas */
@media (max-width: 768px) {
  .nbb-relacionados__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nbb-relacionados__rejilla > :nth-child(3) { display: none; }
  .nbb-portada { aspect-ratio: 16 / 9; border-radius: var(--nbb-radio-chico); }
  .nbb-migas [aria-current] { max-width: 28ch; }
}

/* Celulares */
@media (max-width: 576px) {
  .nbb-lateral { grid-template-columns: minmax(0, 1fr); }
  .nbb-relacionados__rejilla { grid-template-columns: minmax(0, 1fr); }
  .nbb-relacionados__rejilla > :nth-child(3) { display: flex; }
  .nbb-mini { flex-direction: row; }
  .nbb-mini__imagen { width: 112px; flex-shrink: 0; aspect-ratio: auto; min-height: 100px; }
  .nbb-mini__imagen .nbb-categoria { display: none; }
  .nbb-mini__cuerpo { padding: 12px 14px; }
  .nbb-caja { padding: 16px 16px 16px 50px; }
  .nbb-caja::before { left: 14px; }
  .nbb-indice { padding: 2px 16px; }
  .nbb-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .nbb-pasos > li { padding-left: 48px; }
  .nbb-arriba { right: 16px; bottom: 90px; width: 42px; height: 42px; }
  .nbb-migas [aria-current] { max-width: 20ch; }
}

/* Celulares muy chicos */
@media (max-width: 380px) {
  .nbb-pagina { --nbb-margen-lateral: 12px; }
  .nbb-meta { font-size: .8rem; gap: 6px 10px; }
  .nbb-mini__imagen { width: 88px; }
  .nbb-lista-posts a { grid-template-columns: 52px minmax(0, 1fr); }
  .nbb-lista-posts__imagen { width: 52px; height: 52px; }
  .nbb-compartir a, .nbb-compartir button { width: 36px; height: 36px; }
  .nbb-pasos > li { padding-left: 44px; }
  .nbb-pasos > li::before { width: 32px; height: 32px; font-size: .9rem; }
  .nbb-pasos > li:not(:last-child)::after { left: 15px; top: 36px; }
}

/* Pantallas grandes */
@media (min-width: 1600px) {
  .nbb-pagina { --nbb-ancho: 1320px; }
  .nbb-rejilla { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .nbb-pagina *, .nbb-pagina *::before, .nbb-pagina *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Impresión: solo el artículo */
@media print {
  .nbb-lateral, .nbb-compartir, .nbb-relacionados, .nbb-progreso, .nbb-arriba, .nbb-migas { display: none !important; }
  .nbb-rejilla { grid-template-columns: 1fr; }
  .nbb-indice { display: none; }
}