/* Blog de Vida Valiosa — estilos propios del canal psicoeducativo.
   Hereda tokens, nav, botones y footer de corriente.css; aquí solo vive
   lo que el blog añade: tipografía de lectura larga, índice y cierre. */

/* --- cabecera de página --- */
.blog-head{background:var(--deep);color:#fff;padding:60px 0 92px;overflow:hidden;position:relative;}
.blog-head .kicker{color:var(--peach);}
.blog-head h1{max-width:20ch;}
.blog-head .lead{max-width:56ch;color:rgba(255,255,255,.8);margin-top:24px;}
.blog-head .orbe{
  position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;
  width:380px;height:380px;right:-80px;top:-60px;
  background:radial-gradient(circle at 34% 34%, rgba(255,122,89,.5), rgba(255,122,89,0) 68%);
}
@media(max-width:860px){.blog-head .orbe{width:240px;height:240px;right:-90px;}}

/* --- índice de artículos --- */
.blog-list{display:grid;gap:22px;}
.post-card{
  display:block;text-decoration:none;background:#fff;border-radius:30px 30px 30px 60px;
  padding:34px 38px;box-shadow:0 8px 30px rgba(21,27,51,.06);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease);
}
.post-card:nth-child(even){border-radius:30px 30px 60px 30px;}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(21,27,51,.12);}
.post-card h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:10px;}
.post-card p{color:var(--ink-mute);margin:0;}
.post-card .kicker{margin-bottom:12px;}
.mecanismo{
  display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:#B03A1B;background:var(--bg-2);border-radius:999px;padding:5px 14px;margin-bottom:16px;
}
.blog-vacio{background:var(--bg-2);border-radius:26px;padding:34px 38px;color:var(--ink-mute);}

/* --- artículo --- */
.post{padding:84px 0 0;}
.post-body{max-width:680px;margin:0 auto;font-size:18.5px;line-height:1.75;}
.post-body p{margin:0 0 26px;}
.post-body h2{font-size:clamp(25px,3vw,34px);margin:52px 0 18px;}
.post-body h2:first-child{margin-top:0;}
.post-body blockquote{
  margin:38px 0;padding:24px 30px;background:var(--bg-2);
  border-radius:24px 24px 24px 48px;font-size:19px;line-height:1.6;
}
.post-body blockquote p:last-child{margin:0;}
.post-body em{color:var(--ink);}
.post-body a{color:var(--coral-text);text-underline-offset:3px;}
.post-meta{
  max-width:680px;margin:0 auto 10px;font-size:14px;color:var(--ink-mute);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.post-meta .sep{color:#C9C4BC;}
.firma{max-width:680px;margin:44px auto 0;font-family:var(--display);font-size:20px;color:var(--ink);}
.volver{max-width:680px;margin:0 auto 26px;font-size:14.5px;}
.volver a{color:var(--coral-text);text-decoration:none;}
.volver a:hover{text-decoration:underline;}

/* --- aviso de contenido educativo (obligatorio en cada artículo) --- */
.aviso-edu{
  max-width:680px;margin:54px auto 0;padding:20px 26px;background:#fff;
  border-left:4px solid var(--coral-btn);border-radius:20px;
  font-size:14.5px;line-height:1.65;color:var(--ink-mute);
  box-shadow:0 6px 22px rgba(21,27,51,.05);
}
.aviso-edu strong{color:var(--ink);}
.aviso-edu a{color:var(--coral-text);}

/* --- banda de la guía al cierre --- */
.cta-guia{
  background:linear-gradient(150deg,var(--coral) 0%,#FF9C71 55%,var(--peach) 100%);
  color:#3A1B12;padding:96px 0;margin-top:96px;
}
.cta-guia .wrap{max-width:760px;text-align:center;}
.cta-guia .kicker{color:#571F11;}
.cta-guia h2{color:#2E1109;}
.cta-guia p{color:#5E2213;}
.cta-guia .acciones{justify-content:center;}
.cta-guia .btn-ink{background:var(--deep);color:#fff;border-color:var(--deep);}
.cta-guia .btn-ink:hover{background:#0D1226;border-color:#0D1226;}
.cta-guia .legal{font-size:12.5px;line-height:1.6;color:#6B2E1C;margin-top:24px;}
.cta-guia .legal a{color:#2E1109;}

/* La barra no se superpone a la cabecera: ocupa su propio espacio sobre el fondo
   claro del documento. En su versión translúcida el texto blanco se queda sin
   contraste, así que en el blog nace sólida. */
.nav{background:rgba(21,27,51,.94);backdrop-filter:blur(12px);}

/* Última regla de la hoja: apaga el movimiento que el blog introduce. */
@media (prefers-reduced-motion:reduce){
  .post-card:hover{transform:none;}
}