/* ==========================================================================
   blog.css: índice /blog y páginas de artículo. Se carga después de
   smile-pages.css y solo agrega lo propio del blog. El acento de cada
   categoría llega por variables en línea (--acento, --acento-dk, ...).
   ========================================================================== */

.blog { --acento:#7D8EA0; --acento-dk:#5A7088; --acento-lt:#9DAABB; --acento-tinte:rgba(125,142,160,.14); }

.topbar-links .solo-ancho { display:inline; }
@media (max-width:640px) { .topbar-links .solo-ancho { display:none; } .topbar-links { gap:16px; } }

/* --- Píldora de categoría --------------------------------------------- */
.pildora {
  display:inline-flex; align-items:center; gap:6px; width:max-content;
  padding:5px 12px; border-radius:var(--radius-pill);
  background:var(--acento-tinte); color:var(--acento-dk);
  font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
}
.pildora::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--acento); }
a.pildora:hover { color:var(--acento-dk); filter:brightness(.97); }

/* --- Índice: hero ------------------------------------------------------ */
.indice-hero { padding-block:calc(var(--gap-xl) * .8) var(--gap-l); position:relative; overflow:hidden; }
.indice-hero::before {
  content:''; position:absolute; inset:-30% -10% auto auto; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle,rgba(107,143,113,.14) 0%,rgba(234,192,178,.12) 40%,transparent 70%);
  pointer-events:none;
}
.indice-hero .wrap { position:relative; z-index:1; max-width:860px; text-align:center; align-items:center; }
.indice-hero h1 em { font-style:italic; color:var(--salvia-dk); }
.indice-hero .lead { max-width:60ch; }
.eyebrow { background:rgba(107,143,113,.12); color:var(--salvia-dk); }

.buscador {
  display:flex; align-items:center; gap:12px; width:min(560px,100%);
  margin-top:var(--gap-s); padding:16px 22px; border-radius:var(--radius-pill);
  background:var(--sand); box-shadow:var(--neu-inset); color:var(--muted);
  transition:box-shadow .25s;
}
.buscador:focus-within { box-shadow:var(--neu-inset),0 0 0 2px var(--focus-ring); }
.buscador input {
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:16px; color:var(--carbon);
}
.buscador input::placeholder { color:var(--muted); opacity:.8; }

/* --- Índice: filtros --------------------------------------------------- */
.indice-lista { padding-top:0; }
/* smile-origen.js revela una sección cuando se ve el 12% de ella; la lista
   completa es más alta que eso en cualquier pantalla y nunca aparecería. */
.indice-lista.reveal { opacity:1; transform:none; }
.chips {
  display:flex; gap:10px; overflow-x:auto; padding:6px 4px 12px; margin-inline:-4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar { display:none; }
.chip {
  flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border:0; border-radius:var(--radius-pill);
  background:var(--sand); box-shadow:var(--neu-flat);
  font:inherit; font-size:14px; font-weight:400; color:var(--piedra);
  transition:box-shadow .2s, color .2s, transform .2s;
}
.chip span { font-size:12px; color:var(--muted); }
.chip:hover { color:var(--carbon); transform:translateY(-1px); }
.chip.activo { box-shadow:var(--neu-inset); color:var(--acento-dk); font-weight:500; }
.chip.activo span { color:var(--acento-dk); }
.resultado { font-size:13px; color:var(--muted); margin-top:-8px; }

/* --- Tarjetas ---------------------------------------------------------- */
.rejilla { display:grid; gap:var(--gap-m); grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.rejilla[hidden], .tarjeta[hidden], .video-tarjeta[hidden], .bloque-videos[hidden] { display:none; }

.tarjeta {
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--sand-lt); border-radius:var(--radius-card-lg);
  box-shadow:var(--neu-raised); color:inherit;
  transition:box-shadow .3s, transform .3s;
}
.tarjeta:hover { box-shadow:var(--neu-raised-lg); transform:translateY(-4px); color:inherit; }
.tarjeta-media { aspect-ratio:16/9; overflow:hidden; background:var(--acento-tinte); }
.tarjeta-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.tarjeta:hover .tarjeta-img { transform:scale(1.04); }
.tarjeta-texto { display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1; }
.tarjeta h3 { font-size:19px; font-weight:400; line-height:1.3; }
.tarjeta p {
  font-size:14.5px; color:var(--piedra); max-width:none;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.tarjeta-meta { margin-top:auto; padding-top:6px; font-size:12.5px; color:var(--muted); }

.portada-vacia {
  width:100%; height:100%;
  background:
    radial-gradient(circle at 25% 30%,var(--acento-lt) 0,transparent 45%),
    radial-gradient(circle at 80% 75%,rgba(234,192,178,.55) 0,transparent 50%),
    linear-gradient(135deg,var(--acento-tinte),var(--sand));
}

/* La primera tarjeta, a lo ancho, mientras no se filtra. */
.rejilla:not(.filtrando) .tarjeta.destacada { grid-column:1 / -1; display:grid; grid-template-columns:1.25fr 1fr; }
.rejilla:not(.filtrando) .tarjeta.destacada .tarjeta-media { aspect-ratio:auto; min-height:340px; }
.rejilla:not(.filtrando) .tarjeta.destacada .tarjeta-texto { justify-content:center; padding:40px 44px; gap:14px; }
.rejilla:not(.filtrando) .tarjeta.destacada h3 { font-size:clamp(24px,2.8vw,32px); font-weight:300; letter-spacing:-.01em; }
.rejilla:not(.filtrando) .tarjeta.destacada p { -webkit-line-clamp:4; font-size:16px; }
@media (max-width:820px) {
  .rejilla:not(.filtrando) .tarjeta.destacada { grid-template-columns:1fr; }
  .rejilla:not(.filtrando) .tarjeta.destacada .tarjeta-media { aspect-ratio:16/9; min-height:0; }
  .rejilla:not(.filtrando) .tarjeta.destacada .tarjeta-texto { padding:24px; }
}

/* --- Videos de la academia -------------------------------------------- */
.bloque-videos { display:flex; flex-direction:column; gap:var(--gap-m); margin-top:var(--gap-l); }
.bloque-titulo p { color:var(--piedra); margin-top:6px; }
.rejilla-videos { display:grid; gap:var(--gap-m); grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.video-tarjeta { display:flex; flex-direction:column; gap:12px; color:inherit; }
.video-tarjeta:hover { color:inherit; }
.video-media {
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-card-lg);
  box-shadow:var(--neu-raised); background:var(--carbon);
  transition:box-shadow .3s, transform .3s;
}
.video-tarjeta:hover .video-media { box-shadow:var(--neu-raised-lg); transform:translateY(-4px); }
.video-media img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.play {
  position:absolute; left:14px; bottom:14px; width:44px; height:44px; border-radius:50%;
  background:rgba(253,252,251,.92); box-shadow:0 6px 18px rgba(58,53,50,.25);
}
.play::after {
  content:''; position:absolute; left:17px; top:13px;
  border-style:solid; border-width:9px 0 9px 14px; border-color:transparent transparent transparent var(--salvia-dk);
}
.video-tarjeta h3 { font-size:15px; font-weight:400; line-height:1.35; }

.vacio { text-align:center; padding:var(--gap-l) 0; display:flex; flex-direction:column; align-items:center; gap:var(--gap-s); }
.vacio[hidden] { display:none; }
.vacio p { color:var(--piedra); }

/* --- Artículo ---------------------------------------------------------- */
.articulo { padding-top:var(--gap-l); }
.art-cabecera { max-width:820px; display:flex; flex-direction:column; gap:18px; }
.art-cabecera h1 { font-size:clamp(32px,4.6vw,50px); }
.art-meta { font-size:13.5px; color:var(--muted); }

.art-portada { max-width:1080px; margin-block:var(--gap-l) 0; }
.art-img, .art-portada .portada-vacia {
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius-card-lg); box-shadow:var(--neu-raised-lg);
}

.art-cuerpo {
  max-width:1080px; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-l);
  padding-block:var(--gap-l) var(--gap-xl);
}
@media (min-width:1000px) {
  .art-cuerpo:has(.indice) { grid-template-columns:240px minmax(0,1fr); }
  .indice { position:sticky; top:96px; align-self:start; }
}
.indice {
  background:var(--sand-lt); border-radius:var(--radius-card); padding:20px 22px;
  box-shadow:var(--neu-flat); font-size:14px;
}
.indice-titulo { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.indice ol { list-style:none; display:flex; flex-direction:column; gap:9px; counter-reset:i; }
.indice li { counter-increment:i; display:flex; gap:10px; line-height:1.4; }
.indice li::before { content:counter(i); font-size:12px; color:var(--acento-dk); min-width:14px; padding-top:1px; }
.indice a { color:var(--piedra); }
.indice a:hover { color:var(--acento-dk); }

.prosa { max-width:var(--prose); display:flex; flex-direction:column; gap:20px; }
.prosa p, .prosa li { font-size:17.5px; color:var(--topo); line-height:1.75; }
.prosa h2 { margin-top:var(--gap-m); scroll-margin-top:96px; font-size:clamp(24px,3vw,31px); }
.prosa h3 { font-size:20px; font-weight:400; margin-top:6px; }
.prosa ul, .prosa ol { display:flex; flex-direction:column; gap:10px; padding-left:4px; }
.prosa ul { list-style:none; }
.prosa ul li { position:relative; padding-left:24px; }
.prosa ul li::before { content:''; position:absolute; left:4px; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--acento); }
.prosa ol { padding-left:24px; }
.prosa ol li::marker { color:var(--acento-dk); font-weight:500; }
.prosa strong { font-weight:500; color:var(--carbon); }
.prosa a { color:var(--acento-dk); text-decoration:underline; text-decoration-color:var(--acento-lt); text-underline-offset:3px; }

.nota-smile {
  position:relative; padding:24px 26px 24px 28px; border-radius:var(--radius-card);
  background:var(--sand-lt); box-shadow:var(--neu-raised);
  border-left:4px solid var(--acento);
}
.nota-marca {
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; color:var(--acento-dk); margin-bottom:8px;
}
.nota-smile p { font-size:16.5px; color:var(--piedra); }

.ejemplo { display:flex; flex-direction:column; gap:8px; max-width:520px; }
.ejemplo figcaption { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ejemplo blockquote {
  position:relative; padding:16px 20px; border-radius:20px 20px 20px 6px;
  background:#E7F3E3; color:var(--carbon); font-size:16px; line-height:1.6;
  box-shadow:var(--neu-flat);
}

.art-faq { padding-top:0; }
.art-faq .wrap { max-width:820px; }
.faq summary::after { color:var(--acento-dk); }
.blog .btn-primary { background:linear-gradient(145deg,var(--acento),var(--acento-dk)); box-shadow:5px 5px 14px rgba(58,53,50,.18),-4px -4px 10px rgba(255,255,255,.8); }
.cta-band h2 em { color:var(--acento-lt); }

.relacionados .rejilla { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.relacionados .wrap > p { text-align:center; }

@media (prefers-reduced-motion:reduce) {
  .tarjeta, .tarjeta-img, .video-media, .chip { transition:none; }
  .tarjeta:hover, .tarjeta:hover .tarjeta-img, .video-tarjeta:hover .video-media { transform:none; }
}