/* La Libreta v2: el artículo sobre la hoja rayada (los 12 posts del blog + /historia/).
 * Carga DESPUÉS de /v2.css, que ya trae .article (Newsreader 21 px, columna de 680 px),
 * .article-head, .pull, .note y .cta-compact. Aquí va lo propio del artículo:
 *   .post/.sheet   la hoja rayada con la línea de margen roja
 *   .fig-wide      foto horizontal que sale de la columna en desktop
 *   .print         fotos pegadas (centro, flotando a la derecha o a la izquierda); ancho en --w
 *   .facts         los datos al margen
 *   .next-step     el paso gratis (calculadora), más discreto que el CTA
 *   .post-back     volver a La Libreta */

/* ── la hoja ─────────────────────────────────────────── */
.post{padding:clamp(20px,3vw,48px) var(--gutter) clamp(64px,8vw,104px);}
.sheet{max-width:1120px;margin:0 auto;padding:clamp(56px,7vw,88px) 0 clamp(56px,7vw,80px);
  border:1px solid var(--line);border-radius:var(--r-l);--margin-x:calc(50% - 470px);}
.sheet .article-head{margin-bottom:clamp(36px,5vw,56px);}
.article-head h1 em{font-weight:450;}
.article-head .ah-meta a{color:inherit;}
@media (max-width:1179px){
  .sheet{padding-inline:72px 40px;--margin-x:max(40px,calc(50% - 470px));}
}
@media (max-width:760px){
  .post{padding:0;}
  .sheet{border:0;border-radius:0;padding:32px 20px 48px 44px;--margin-x:22px;}
  .sheet .article-head{gap:14px;}
}

/* ── texto ───────────────────────────────────────────── */
.article h2{clear:both;}
.article .hl{font-weight:600;}
.article .arw{color:var(--accent);}
/* botones y enlaces-botón dentro del artículo: sin el subrayado del texto corrido */
.article .btn{text-decoration:none;}
.article .btn--primary,.article .btn--primary:hover{color:#fff;}
.article .link{text-decoration-color:currentColor;}

/* cita destacada: v2.css le da el tamaño y la regla roja; en desktop sale de la columna */
.article .pull{clear:both;}
.article .pull p{margin:0;}

/* notas ("honestidad primero", pasos numerados) */
.article .note{clear:both;margin-block:1.6em;}
.article .note p{margin:0;}
.article .note p + p{margin-top:.8em;}
.article .note + .note{margin-top:-.6em;}

/* ── fotos ───────────────────────────────────────────── */
.article figure{clear:both;}
.article .fig-wide img{width:100%;height:auto;}
@media (min-width:1000px){ .article > .fig-wide{max-width:840px;} }

/* la foto pegada (hereda .print de v2.css): marco, sombra, giro; pie a mano debajo, sin recortar la foto */
.article > .print{width:min(var(--w,440px),86%);max-width:none;padding:10px 10px 12px;--rot:-1deg;}
.article .print img{height:auto;border-radius:0;}
.article .print figcaption{position:static;margin-top:8px;padding:0 4px;font-family:var(--hand);font-size:19px;line-height:1.3;color:var(--ink);}
.article > .print--tape{margin-top:2.2em;}
.article > .fig-side{--rot:1.5deg;}
.article > .fig-left{--rot:-1.5deg;}
@media (min-width:1000px){
  .article{--hang:0px;--hang-l:0px;}
  .article > .fig-side,.article > .facts{float:right;clear:right;width:var(--w,300px);
    margin:8px max(0px,calc((100% - 680px) / 2 - var(--hang))) 28px 36px;}
  .article > .fig-left{float:left;clear:left;width:var(--w,260px);
    margin:8px 36px 28px max(0px,calc((100% - 680px) / 2 - var(--hang-l)));}
  .article > .facts{--w:280px;}
}
@media (min-width:1180px){ .article{--hang:110px;--hang-l:80px;} }

/* ── datos al margen ─────────────────────────────────── */
.facts{clear:both;display:flex;flex-direction:column;margin-block:1.6em;padding:16px 20px 8px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-m);font-family:var(--sans);}
.article .facts p{margin:0;}
.facts .t-hand{margin-bottom:8px;font-size:20px;}
.fact{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);}
.facts .t-hand + .fact{border-top:1.5px solid var(--ink);}
.fact-n{font-family:var(--serif);font-size:30px;font-weight:500;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;}
.fact-n--accent{color:var(--accent);}
.fact-l{font-size:14px;line-height:1.35;color:var(--ink-2);text-align:right;}

/* ── cierre del artículo ─────────────────────────────── */
.next-step{clear:both;display:flex;flex-direction:column;gap:4px;margin-block:2em 1.4em;padding:18px 0 8px;
  border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line-2);font-family:var(--sans);}
.article .next-step p{margin:0;}
.next-step .t-hand{font-size:20px;}
.next-step .ns-t{font-family:var(--serif);font-size:clamp(22px,2vw,26px);line-height:1.25;}
.next-step .link{align-self:flex-start;font-size:17px;}

.article .cta-compact{clear:both;margin-block:1.4em 0;}
.article .cta-compact p{margin:0;}
.cta-compact .cc-alt{font-size:15px;line-height:1.5;color:var(--ink-2);}
@media (max-width:640px){
  .cta-compact .cc-row{flex-direction:column;align-items:stretch;gap:10px;}
  .cta-compact .cc-row .btn{width:100%;}
  .cta-compact .cc-price{text-align:center;}
}

.post-back{clear:both;margin-top:1.6em;font-family:var(--sans);font-size:16px;}
.article .post-back{margin-bottom:0;}

@media print{
  #bn,#bf,.skip,.next-step,.cta-compact,.post-back{display:none!important;}
  .post{padding:0;}
  .sheet{border:0;background:none;}
  .sheet::before{display:none;}
  .article .print{box-shadow:none;transform:none;}
}