/* 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;}

/* --- recuadro azul con pregunta para llevarse --- */
.post-body .callout{
  margin:38px 0;padding:24px 30px;background:#E4ECF8;border-left:4px solid var(--deep);
  border-radius:24px 24px 24px 48px;display:flex;gap:16px;align-items:flex-start;
  font-size:18px;line-height:1.65;color:var(--ink);
}
.callout-icono{font-size:26px;line-height:1.3;flex:none;}
.post-body .callout p{margin:0;}
.post-body .callout strong{font-family:var(--display);}

/* --- llamado a escribir al final del cuerpo --- */
.post-body .post-cta{margin:8px 0 0;}
.post-body a.btn{text-decoration:none;}
.post-body a.btn-coral{color:#fff;}

/* tarjeta destacada: portada de curvas de nivel + texto; los siguientes artículos entran en dos columnas */
.post-card{padding:0;overflow:hidden;}
.post-card .portada{display:block;min-height:150px;background:var(--deep) url("/assets/blog/contornos.svg") 80% center/cover no-repeat;}
.post-card-texto{padding:30px 34px 34px;}
.post-card:first-child{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
.post-card:first-child .portada{min-height:260px;}
.post-card:first-child h2{font-size:clamp(24px,2.8vw,34px);}
@media(min-width:900px){.blog-list{grid-template-columns:1fr 1fr;} .post-card:first-child{grid-column:1/-1;}}
@media(max-width:760px){.post-card:first-child{grid-template-columns:1fr;} .post-card:first-child .portada{min-height:130px;background-image:url("/assets/blog/contornos-sin-brujula.svg");}}

/* --- artículo: cabecera, índice, progreso, entrada, figura --- */
.progreso{position:fixed;left:0;right:0;top:0;height:4px;z-index:70;pointer-events:none;}
.progreso span{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--peach));transform:scaleX(0);transform-origin:left;}

.post-hero{
  background:var(--deep) url("/assets/blog/contornos.svg") right center/cover no-repeat;
  color:#fff;padding:56px 0 84px;position:relative;overflow:hidden;
}
.post-hero .orbe{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;width:340px;height:340px;left:-120px;bottom:-140px;background:radial-gradient(circle at 40% 40%,rgba(143,168,216,.35),rgba(143,168,216,0) 70%);}
.post-hero .wrap{position:relative;max-width:900px;}
.post-hero .volver{margin:0 0 34px;max-width:none;}
.post-hero .volver a{color:var(--peach);}
.post-hero h1{font-size:clamp(34px,5.4vw,62px);line-height:1.06;max-width:18ch;margin-bottom:28px;}
.post-hero .post-meta{margin:0;max-width:none;color:rgba(255,255,255,.78);font-size:14.5px;}
.post-hero .post-meta .sep{color:rgba(255,255,255,.4);}
.post{padding-top:0;}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-top:48px;}
.toc{max-width:680px;margin:0 auto 38px;width:100%;background:#fff;border-radius:22px;padding:20px 26px;box-shadow:0 6px 22px rgba(21,27,51,.05);}
.toc-titulo{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-text);margin:0 0 10px;}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:6px;}
.toc li{counter-increment:t;font-size:15.5px;}
.toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--display);color:var(--ink-mute);margin-right:12px;font-size:13px;}
.toc a{text-decoration:none;color:var(--ink);}
.toc a:hover{color:var(--coral-text);text-decoration:underline;text-underline-offset:4px;}
.post-grid .aviso-edu{width:100%;}
@media(min-width:1100px){
  .post-grid{grid-template-columns:230px 680px;justify-content:center;column-gap:56px;}
  .toc{grid-column:1;grid-row:1 / span 2;position:sticky;top:110px;align-self:start;margin:0;background:none;box-shadow:none;padding:0;border-left:2px solid var(--bg-2);padding-left:20px;border-radius:0;}
  .post-body,.post-grid .aviso-edu{grid-column:2;}
}
.post-body .entrada{font-size:clamp(20px,2.2vw,23px);line-height:1.6;color:var(--ink);font-weight:300;}
.post-body h2{counter-increment:sec;position:relative;padding-top:22px;}
.post-body{counter-reset:sec;}
.post-body h2::before{
  content:counter(sec,decimal-leading-zero);display:block;font-family:var(--display);font-size:14px;font-weight:600;
  letter-spacing:.14em;color:var(--coral-text);margin-bottom:10px;
}
.post-body h2::after{content:"";display:block;width:44px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--coral),var(--peach));margin-top:16px;}
.post-body h2:first-child{padding-top:0;}
.ciclo{margin:38px 0;padding:24px 20px 18px;background:var(--bg-2);border-radius:28px 28px 28px 56px;}
.ciclo svg{width:100%;height:auto;}
.ciclo-v{display:none;max-width:340px;margin:0 auto;}
@media(max-width:620px){.ciclo-h{display:none;} .ciclo-v{display:block;}}
.ciclo figcaption{text-align:center;font-size:14.5px;color:var(--ink-mute);margin-top:10px;}
@media(max-width:620px){
  .post-hero{background-image:url("/assets/blog/contornos-sin-brujula.svg");}
  .post-hero .post-meta{flex-direction:column;align-items:flex-start;gap:4px;}
  .post-hero .post-meta .sep{display:none;}
}
@media(max-width:620px){.ciclo{padding:16px 8px 14px;border-radius:22px 22px 22px 40px;} .post-hero{padding:40px 0 60px;}}

/* --- 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;}
  .progreso span{transition:none;}
}