/* ==========================================================================
   Academia para Padres — Blog
   Hoja chica que se apoya en landing.css: de ahí salen los tokens (crema,
   berry, Fraunces + Figtree), los botones, el nav y el pie. Acá va solo lo
   que la landing no tiene: la columna de lectura, los callouts y las tarjetas
   del índice.
   No se toca landing.css.
   ========================================================================== */

body{ background:var(--cream); }

/* El nav de la landing es fixed y sobre el hero se pinta claro. En el blog no
   hay video detrás, así que la clase `solid` va puesta en el HTML y la página
   arranca con aire suficiente para no quedar debajo de la barra. */
.blog-body{
  padding-top:76px;
  /* Ancho de la columna de lectura. Va en px y no en `ch` porque el aviso
     médico, la ficha de la autora y el CTA usan tamaños de letra distintos:
     con `68ch` cada bloque salía de un ancho y el artículo se veía escalonado. */
  --col:786px;
}

/* ============ Franja discreta de CTA (arriba) ============ */
.cta-strip{
  background:var(--berry-tint);
  border-bottom:1px solid var(--line);
}
.cta-strip .wrap{
  display:flex; align-items:center; justify-content:center; gap:14px 18px;
  flex-wrap:wrap; padding-top:11px; padding-bottom:11px;
  font-size:14.5px; color:var(--berry-dark); font-weight:600; text-align:center;
}
.cta-strip a{
  font-weight:800; color:var(--berry-deep);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px;
}
.cta-strip a:hover{ color:var(--berry-dark); }
.cta-strip .icon{ color:var(--berry); }

/* ============ Hero del índice ============ */
.blog-hero{ position:relative; overflow:hidden; background:#241019; }
.blog-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.72;
}
.blog-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(36,16,25,.34) 0%, rgba(36,16,25,.62) 62%, rgba(36,16,25,.86) 100%);
}
.blog-hero .wrap{ position:relative; z-index:2; padding-top:clamp(64px,9vw,104px); padding-bottom:clamp(56px,8vw,92px); }
.blog-hero .eyebrow{ color:var(--amber-soft); }
.blog-hero h1{ color:#fff; margin-top:16px; max-width:16ch; }
.blog-hero h1 em{ color:var(--amber-soft); }
.blog-hero p{
  margin-top:18px; max-width:56ch;
  color:rgba(255,255,255,.9); font-size:clamp(16.5px,1.6vw,19px); line-height:1.6;
}

/* ============ Migas ============ */
.crumbs{ padding:20px 0 0; font-size:13.5px; color:var(--ink-50); font-weight:600; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.crumbs a{ color:var(--ink-70); }
.crumbs a:hover{ color:var(--berry); }
.crumbs li + li::before{ content:"›"; margin-right:8px; color:var(--ink-50); }
.crumbs [aria-current]{ color:var(--ink); }

/* ============ Cabecera del artículo ============ */
.art{ padding:0 0 clamp(56px,7vw,84px); }
.art-head{ max-width:var(--col); margin:0 auto; padding:clamp(26px,4vw,44px) 0 0; }
.art-head h1{ margin-top:14px; font-size:clamp(31px,4.4vw,52px); }
.art-lede{
  margin-top:20px;
  font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(19px,2.1vw,24px); line-height:1.45; color:var(--ink-70);
}
.art-meta{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.art-meta .quien{ display:flex; align-items:center; gap:11px; }
.art-meta .ini{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--berry-tint); color:var(--berry-deep);
  font-family:var(--font-display); font-weight:600; font-size:17px;
}
.art-meta .nom{ font-size:15px; font-weight:800; color:var(--ink); line-height:1.3; }
.art-meta .cred{ font-size:13px; font-weight:600; color:var(--ink-70); }
.art-meta .tiempo{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:700; color:var(--ink-70);
}
.art-meta .tiempo .icon{ width:17px; height:17px; color:var(--berry); }

.chip-cat{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:var(--berry-tint); color:var(--berry-deep);
  font-size:11.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
}

/* ============ Columna de lectura ============ */
.prose{
  max-width:var(--col); margin:0 auto;
  font-size:18px; line-height:1.72; color:var(--ink);
}
.prose > * + *{ margin-top:1.15em; }
.prose h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(23px,2.7vw,31px); line-height:1.16; letter-spacing:-.015em;
  color:var(--ink); margin-top:2em;
}
.prose p{ color:var(--ink); }
.prose strong{ font-weight:800; color:var(--ink); }
.prose em{ font-style:italic; }
.prose code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.92em; background:var(--sand); border:1px solid var(--line);
  border-radius:6px; padding:1px 6px;
}
.prose .nota{
  font-size:16px; color:var(--ink-70); font-style:italic;
  border-left:3px solid var(--berry-soft); padding-left:18px;
}
.prose ul, .prose ol{ padding-left:1.35em; }
.prose li + li{ margin-top:.55em; }
.prose li::marker{ color:var(--berry); font-weight:700; }
.prose ul ul{ margin-top:.55em; padding-left:1.2em; }
.prose ul ul li::marker{ color:var(--berry-soft); }

/* El nav es fixed: cualquier ancla tiene que dejarle su alto de aire. */
.prose h2[id], .cat-bloque[id]{ scroll-margin-top:96px; }

/* Tablas: en móvil se deslizan en vez de reventar el ancho de la página.
   `.tabla-scroll` es focusable a propósito — un contenedor con scroll que no
   se puede alcanzar con el teclado deja fuera la mitad de la tabla. */
.tabla-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:-4px; padding:4px; border-radius:var(--r-md); }
.tabla-scroll:focus-visible{ outline:3px solid var(--berry); outline-offset:2px; }
.prose table{
  width:100%; min-width:min(100%, 520px); border-collapse:separate; border-spacing:0;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-sm); font-size:15.5px;
}
.prose thead th{
  background:var(--sand); text-align:left; vertical-align:bottom;
  font-size:12.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  color:var(--berry-deep); padding:13px 16px;
}
.prose tbody th{
  text-align:left; font-weight:800; color:var(--ink);
  padding:13px 16px; vertical-align:top;
}
.prose tbody td{ padding:13px 16px; vertical-align:top; color:var(--ink-70); }
.prose tbody tr + tr th, .prose tbody tr + tr td{ border-top:1px solid var(--line); }

/* ============ Callouts ============ */
/* Los tramos de "cuándo consultar" y "lo que nunca se hace" se leen con el
   niño en brazos: tienen que saltar a la vista sin gritar. */
.callout{
  margin-top:2.2em; padding:clamp(22px,3vw,30px) clamp(20px,3vw,32px);
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--white); box-shadow:var(--shadow-sm);
}
.callout > * + *{ margin-top:1.05em; }
.callout h2{ margin-top:0; display:flex; align-items:flex-start; gap:12px; }
.callout h2 .icon{ width:26px; height:26px; margin-top:4px; flex:none; }
.callout--alerta{ background:var(--berry-tint); border-color:var(--berry-soft); }
.callout--alerta h2{ color:var(--berry-dark); }
.callout--alerta h2 .icon{ color:var(--berry); }
.callout--alerta li::marker{ color:var(--berry-deep); }
.callout--ojo{ background:var(--amber-tint); border-color:#F0D8AE; }
.callout--ojo h2{ color:#42250B; }
.callout--ojo h2 .icon{ color:#B97516; }
.callout--ojo li::marker{ color:#B97516; }
.callout table{ box-shadow:none; }

/* ============ Ficha de la autora ============ */
.autora{
  max-width:var(--col); margin:clamp(44px,6vw,64px) auto 0;
  padding:clamp(22px,3vw,30px);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
}
.autora img{ width:76px; height:76px; border-radius:50%; object-fit:cover; flex:none; }
.autora .txt{ flex:1 1 260px; }
.autora .nom{ font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--ink); }
.autora .cred{ margin-top:3px; font-size:13.5px; font-weight:800; color:var(--berry-deep); letter-spacing:.01em; }
.autora p{ margin-top:11px; font-size:15.5px; line-height:1.6; color:var(--ink-70); }
.autora .ig{
  margin-top:13px; display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:800; color:var(--berry-deep);
}
.autora .ig:hover{ color:var(--berry-dark); }
.autora .ig .icon{ width:18px; height:18px; }

/* ============ Disclaimer médico del artículo ============ */
.aviso-medico{
  max-width:var(--col); margin:26px auto 0;
  padding:20px 22px; border-radius:var(--r-md);
  background:var(--sand); border:1px solid var(--line);
  display:flex; gap:13px; align-items:flex-start;
}
.aviso-medico .icon{ width:21px; height:21px; color:var(--berry); flex:none; margin-top:2px; }
.aviso-medico p{ font-size:13.8px; line-height:1.6; color:var(--ink-70); }
.aviso-medico b{ color:var(--ink); }

/* ============ CTA fuerte del final ============ */
.cta-final{
  max-width:var(--col); margin:clamp(44px,6vw,64px) auto 0;
  padding:clamp(30px,4.4vw,46px);
  border-radius:var(--r-xl);
  background:linear-gradient(150deg, #45112A 0%, var(--berry-dark) 48%, #2E0A1C 100%);
  color:#fff; text-align:center;
  box-shadow:var(--shadow-lg);
}
.cta-final .eyebrow{ color:var(--amber-soft); justify-content:center; }
.cta-final h2{
  font-family:var(--font-display); font-weight:600; color:#fff;
  font-size:clamp(25px,3.2vw,36px); line-height:1.1; letter-spacing:-.02em;
  margin-top:14px;
}
.cta-final h2 em{ font-style:italic; color:var(--amber-soft); }
.cta-final p{
  margin:16px auto 0; max-width:46ch;
  font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.88);
}
.cta-final .btn{ margin-top:26px; }
.cta-final .luego{ margin-top:16px; font-size:13.5px; color:rgba(255,255,255,.66); }

/* ============ Relacionados ============ */
.rel{ max-width:min(1040px, 100%); margin:clamp(52px,7vw,80px) auto 0; }
.rel h2{
  font-family:var(--font-display); font-weight:600; font-size:clamp(23px,2.6vw,30px);
  letter-spacing:-.02em; color:var(--ink);
}
.rel .grid{ margin-top:26px; display:grid; gap:18px; grid-template-columns:1fr; }

/* ============ Tarjeta de artículo ============ */
.post-card{
  display:flex; flex-direction:column; gap:12px;
  padding:26px 26px 28px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .22s var(--ease), border-color .2s;
}
.post-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--berry-soft); }
.post-card .chip-cat{ align-self:flex-start; }
.post-card h3{
  font-family:var(--font-display); font-weight:600;
  font-size:21px; line-height:1.2; letter-spacing:-.015em; color:var(--ink);
}
.post-card p{ font-size:15.3px; line-height:1.6; color:var(--ink-70); }
.post-card .pie{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12.8px; font-weight:700; color:var(--ink-70);
}
.post-card .pie .leer{ color:var(--berry-deep); display:inline-flex; align-items:center; gap:7px; }
.post-card .pie .leer .icon{ width:16px; height:16px; }

/* ============ Índice ============ */
.listado .cta-final{ max-width:none; }
.listado{ padding:clamp(48px,6vw,74px) 0 clamp(56px,7vw,84px); }
.cat-bloque + .cat-bloque{ margin-top:clamp(46px,6vw,66px); }
.cat-bloque > h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(24px,2.8vw,33px); letter-spacing:-.02em; color:var(--ink);
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.cat-bloque > h2 .cuenta{
  font-family:var(--font-ui); font-size:13px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-50);
}
.cat-bloque .grid{ margin-top:24px; display:grid; gap:18px; grid-template-columns:1fr; }

.indice-cats{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:clamp(30px,4vw,40px);
}
.indice-cats a{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 17px; border-radius:999px;
  background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-size:14px; font-weight:800; color:var(--ink);
  transition:border-color .18s, color .18s, transform .18s var(--ease);
}
.indice-cats a:hover{ border-color:var(--berry); color:var(--berry-deep); transform:translateY(-2px); }
.indice-cats a b{ color:var(--berry); font-weight:900; }

/* ============ Media queries ============ */
@media (min-width:700px){
  .rel .grid, .cat-bloque .grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1000px){
  .rel .grid, .cat-bloque .grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (prefers-reduced-motion:reduce){
  .post-card, .indice-cats a{ transition:none; }
  .post-card:hover, .indice-cats a:hover{ transform:none; }
}