/* lulú · blog (muestra Typers, oct 2026). Se apoya en ../estilos.css y suma la lectura de artículos. */
.envoltura-nota { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.nota-cabeza { padding: 48px 0 0; background: linear-gradient(180deg, #FFF7F1, var(--crema)); }
.migas { font-size: 14px; color: var(--tinta-2); margin-bottom: 16px; }
.migas a { color: var(--tinta-2); text-decoration: none; font-weight: 700; }
.migas a:hover { color: var(--violeta); }
.migas span { margin: 0 4px; }
.nota h1 { margin: 6px 0 18px; font: 800 clamp(34px, 5.4vw, 52px)/1.06 var(--f-tit); color: var(--noche); text-wrap: balance; }
.firma-nota { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--tinta-2); line-height: 1.45; }
.firma-nota b { color: var(--noche); }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--noche); display: grid; place-items: center; }
.avatar svg { width: 28px; height: 28px; }
.avatar.grande { width: 72px; height: 72px; }
.avatar.grande svg { width: 46px; height: 46px; }
.borrador { display: inline-block; margin: 16px 0 0; padding: 4px 12px; border-radius: 999px; background: #FFF1C9; color: #7A5300; font: 800 12px/1.4 var(--f-txt); letter-spacing: .02em; }
.portada-nota { margin: 28px 0 0; border-radius: 30px; overflow: hidden; aspect-ratio: 800 / 420; box-shadow: 0 24px 50px rgba(102, 36, 130, .14); }
.portada-nota svg, .articulo .tapa svg { width: 100%; height: 100%; display: block; }

.respuesta { margin: 40px 0 28px; padding: 24px 26px; border-radius: 24px 24px 24px 8px; background: #fff; border: 2px solid var(--menta); box-shadow: 0 12px 30px rgba(102, 36, 130, .06); }
.respuesta-tit { margin: 0 0 6px; font: 400 22px var(--f-mano); color: var(--menta); }
.respuesta p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--tinta); }

.indice { margin: 0 0 40px; padding: 22px 26px; border-radius: 22px; background: #FFF7F1; }
.indice-tit { margin: 0 0 8px; font: 800 15px var(--f-txt); letter-spacing: .06em; text-transform: uppercase; color: var(--violeta); }
.indice ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; }
.indice a { color: var(--noche); font-weight: 700; text-decoration: none; }
.indice a:hover { text-decoration: underline; }

.texto { padding-bottom: 40px; }
.texto section { scroll-margin-top: 90px; }
.texto h2 { margin: 48px 0 14px; font: 800 clamp(26px, 3.6vw, 34px)/1.15 var(--f-tit); color: var(--noche); text-wrap: balance; }
.texto h3 { margin: 30px 0 8px; font: 800 22px/1.25 var(--f-tit); color: var(--violeta); }
.texto p, .texto li { color: var(--tinta); }
.texto p { margin: 0 0 16px; }
.texto a { color: var(--violeta); font-weight: 700; }
.texto ul, .texto ol { padding-left: 24px; margin: 0 0 18px; }
.texto li { margin-bottom: 8px; }
.lista-check { list-style: none; padding-left: 0 !important; }
.lista-check li { position: relative; padding-left: 34px; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--crema) 0 28%, var(--durazno) 30%); box-shadow: 0 0 0 3px rgba(240, 215, 184, .45); }
.lista-num { counter-reset: n; list-style: none; padding-left: 0 !important; }
.lista-num li { counter-increment: n; position: relative; padding-left: 50px; min-height: 36px; }
.lista-num li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--orquidea); color: #fff; display: grid; place-items: center; font: 800 18px var(--f-tit); }

.tabla-envoltura { overflow-x: auto; margin: 8px 0 22px; border-radius: 20px; border: 1px solid var(--linea); background: #fff; }
.tabla-envoltura table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 460px; }
.tabla-envoltura caption { text-align: left; padding: 14px 18px 4px; font: 700 14px var(--f-txt); color: var(--tinta-2); }
.tabla-envoltura th { text-align: left; background: var(--noche); color: var(--crema); padding: 12px 18px; font: 800 15px var(--f-txt); }
.tabla-envoltura td { padding: 12px 18px; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla-envoltura tbody tr:nth-child(even) td { background: #FFF7F1; }

.pediatra { margin-top: 48px; padding: 6px 26px 14px; border-radius: 24px; background: #E1EFEE; border-left: 6px solid var(--pizarra); }
.pediatra h2 { margin-top: 22px; }

.cta-suave { margin: 44px 0 10px; padding: 30px 28px; border-radius: 30px; background: var(--noche); color: var(--crema); }
.cta-suave p { color: rgba(255, 247, 241, .92); }
.cta-suave .ante { color: var(--durazno); }
.cta-suave a:not(.btn) { color: var(--durazno); }
.cta-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.cta-suave .btn-borde { color: var(--crema); border-color: rgba(255, 247, 241, .7); }
.texto .cta-suave .btn { color: var(--noche-2); }
.texto .cta-suave .btn-borde { color: var(--crema); }

.texto .preguntas { margin: 0; max-width: none; }

.autora { display: flex; gap: 18px; align-items: flex-start; margin: 40px 0 20px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--linea); }
.autora p { margin: 0 0 6px; font-size: 16px; color: var(--tinta-2); }
.autora .autora-nombre { font: 800 20px var(--f-tit); color: var(--noche); }
.aviso-salud { font-size: 15px; color: var(--tinta-2); padding: 14px 18px; border-radius: 16px; background: #FFF7F1; }
.fuentes h2 { font-size: 24px; }
.fuentes ol { font-size: 15px; }
.fuentes li { color: var(--tinta-2); }
.revisado { font-size: 14px; color: var(--tinta-2); }

.relacionados h2 { font-size: clamp(28px, 3.6vw, 38px); }
.articulo .tapa { overflow: hidden; }
.articulo .etiqueta-tema, .etiqueta-tema { font: 800 12px var(--f-txt); letter-spacing: .06em; text-transform: uppercase; color: var(--orquidea); margin: 0 0 6px; }

/* Índice del blog */
.blog-cabeza { padding: 64px 0 40px; background: linear-gradient(180deg, #FFF7F1, var(--crema)); }
.blog-cabeza h1 { margin: 6px 0 14px; font: 800 clamp(36px, 5.6vw, 58px)/1.05 var(--f-tit); color: var(--noche); max-width: 20ch; text-wrap: balance; }
.blog-cabeza p.intro { max-width: 60ch; color: var(--tinta-2); margin: 0; }
.blog-lista { padding: 20px 0 80px; }
.blog-lista .articulos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.articulo .meta-tarjeta { margin-top: 12px; font: 700 13px var(--f-txt); color: var(--tinta-2); }

@media (max-width: 600px) {
  .nota-cabeza { padding-top: 28px; }
  .respuesta { padding: 20px; } .respuesta p { font-size: 17.5px; }
  .portada-nota { border-radius: 22px; }
  .pediatra, .cta-suave { padding-left: 20px; padding-right: 20px; }
  .autora { flex-direction: column; }
  .tabla-envoltura table { min-width: 0; font-size: 15px; }
  .tabla-envoltura th, .tabla-envoltura td { padding: 10px 12px; }
  .tabla-envoltura caption { padding: 12px 12px 4px; }
  .cta-botones .btn { width: 100%; text-align: center; }
}