/* ---------- Blog · artículo (se carga después de pages.css) ---------- */
/* Título: ocupa todo el ancho útil (antes se limitaba a 24 caracteres y quedaba pegado a la izquierda) */
.art-hero.phero.solo .phero-copy{max-width:1096px}
.art-hero .h1{max-width:none;font-size:clamp(2rem,4cqw,3.6rem);line-height:1.05;text-wrap:balance}
.art-hero .lead{max-width:70ch}
.art-fig{max-width:1096px;aspect-ratio:16/9}
@container site (max-width:759px){.art-fig{aspect-ratio:3/2}}
.art-cap{max-width:1096px}

/* Estructura: índice a la derecha (escritorio) o fila deslizable (móvil) */
.art-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"toc" "art";gap:clamp(14px,2.4cqw,26px);max-width:1096px}
.art-layout>.art-prose{grid-area:art}
.art-side{grid-area:toc;min-width:0}
@container site (min-width:1100px){
  .art-layout{grid-template-columns:minmax(0,760px) 280px;grid-template-areas:"art toc";justify-content:space-between;gap:56px}
  .art-side{position:sticky;top:calc(var(--stick,72px) + 20px);align-self:start}
}
.art-box-t,.art-prose .art-box-t{margin:0 0 10px;font:700 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink)}
.art-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:toc}
.art-toc li{counter-increment:toc}
.art-toc a{display:flex;gap:10px;padding:7px 8px;border-radius:10px;font:500 .9rem/1.35 var(--sans);color:var(--ink);text-decoration:none}
.art-toc a::before{content:counter(toc,decimal-leading-zero);flex:none;font:600 .78rem/1.7 var(--sans);color:var(--muted)}
.art-toc a:hover{background:var(--soft)}
.art-toc a:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
@container site (min-width:1100px){.art-toc{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:18px 14px 12px}.art-toc .art-box-t{padding-left:8px}}
@container site (max-width:1099px){
  .art-toc ol{flex-direction:row;overflow-x:auto;gap:8px;padding:2px 0 8px;scroll-snap-type:x proximity}
  .art-toc li{flex:none;scroll-snap-align:start}
  .art-toc a{max-width:78vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:1px solid var(--line);border-radius:99px;background:var(--paper);padding:8px 14px}
  .art-toc a::before{display:none}
}

/* Artículos publicados con la plantilla anterior (sin índice lateral): columna de lectura de ancho cómodo */
.wrap>.art-prose{max-width:760px}

/* Texto: más aire, apartados numerados, listas y pasos con marcadores propios */
.art-prose{max-width:none;gap:18px;counter-reset:sec}
.art-prose p,.art-prose li{font-size:1.0625rem;line-height:1.78}
.art-prose strong{color:var(--ink);font-weight:600}
.art-prose>h2{counter-increment:sec;margin:clamp(20px,3cqw,40px) 0 0;padding-top:clamp(18px,2.2cqw,28px);border-top:1px solid var(--line);font-size:clamp(1.8rem,2.6cqw,2.35rem);line-height:1.08;scroll-margin-top:96px}
.art-prose>h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:10px;font:700 .8rem/1 var(--sans);letter-spacing:.14em;color:var(--coral-ink)}
.art-prose>h3{margin-top:6px;font:600 1.2rem/1.3 var(--sans);color:var(--ink)}
.art-prose>ul,.art-prose>ol{list-style:none;padding:0;margin:0;gap:14px}
.art-prose>ul>li{position:relative;padding-left:28px}
.art-prose>ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--coral)}
.art-prose>ol{counter-reset:st}
.art-prose>ol>li{position:relative;padding-left:50px;min-height:34px;counter-increment:st}
.art-prose>ol>li::before{content:counter(st);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font:600 .9rem/1 var(--sans)}

/* En resumen */
.art-prose .art-box-t{font:700 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink)}
.art-resumen{margin:0;padding:clamp(18px,2.2cqw,26px);border-radius:20px;background:var(--soft);border:1px solid var(--line)}
.art-resumen ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.art-resumen li{position:relative;padding-left:32px;font:500 1.02rem/1.55 var(--sans);color:var(--ink)}
.art-resumen li::before{content:"";position:absolute;left:5px;top:.34em;width:7px;height:13px;border:solid var(--coral);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* Fotos dentro del texto */
.art-img{margin:clamp(6px,1.4cqw,16px) 0;padding:0}
.art-img img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:20px;background:var(--soft)}
.art-img figcaption{margin-top:10px;font:400 .85rem/1.4 var(--sans);color:var(--muted)}

/* Notas: consejo, ojo, dato */
.art-note{margin:clamp(4px,1.2cqw,14px) 0;padding:clamp(16px,2cqw,24px) clamp(18px,2.2cqw,28px);border-radius:16px;border:1px solid var(--line);border-left:5px solid var(--coral);background:var(--paper)}
.art-prose .art-note p{margin:0}
.art-prose .art-note .art-note-t{margin-bottom:8px;font:700 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink)}
.art-prose .art-note p:not(.art-note-t){font:500 1.04rem/1.65 var(--sans);color:var(--ink)}
.art-note--ojo{border-left-color:var(--ink)}
.art-prose .art-note--ojo .art-note-t{color:var(--ink)}
.art-note--dato{border-left-color:#2E7D6B;background:#F3F9F7}
.art-prose .art-note--dato .art-note-t{color:#1F5E50}

/* Tabla comparativa (en móvil, cada fila se muestra como una tarjeta) */
.art-tabla{margin:clamp(4px,1.2cqw,14px) 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper)}
.art-tabla table{width:100%;border-collapse:collapse}
.art-tabla caption{padding:14px 16px;text-align:left;font:700 .74rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink)}
.art-tabla th,.art-tabla td{padding:12px 16px;border:0;border-top:1px solid var(--line);text-align:left;vertical-align:top;font:400 .97rem/1.5 var(--sans);color:var(--text)}
.art-tabla thead th{background:var(--soft);color:var(--ink);font-weight:600}
.art-tabla tbody td:first-child{font-weight:600;color:var(--ink)}
@container site (max-width:759px){
  .art-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .art-tabla table,.art-tabla tbody,.art-tabla tr,.art-tabla td,.art-tabla caption{display:block;width:100%}
  .art-tabla tr{border-top:1px solid var(--line);padding:8px 0}
  .art-tabla td{border:0;padding:5px 16px}
  .art-tabla td::before{content:attr(data-label);display:block;margin-bottom:2px;font:700 .7rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .art-tabla td:first-child::before{display:none}
}

/* Autor */
.art-autor{display:flex;gap:18px;align-items:flex-start;margin-top:clamp(22px,3cqw,40px);padding:clamp(18px,2.4cqw,28px);border-radius:20px;background:var(--soft);border:1px solid var(--line)}
.art-autor-av{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;font:600 1.6rem/1 var(--serif)}
.art-prose .art-autor p{margin:0 0 8px;font:400 .97rem/1.6 var(--sans)}
.art-prose .art-autor .art-autor-n{margin:0;font:600 1.08rem/1.2 var(--sans);color:var(--ink)}
.art-prose .art-autor .art-autor-r{margin-bottom:10px;font:500 .85rem/1.3 var(--sans);color:var(--muted)}
@container site (max-width:559px){.art-autor{flex-direction:column;gap:12px}}

.art-prose .art-cta .art-cta-t{margin:0 0 6px;font:600 clamp(1.45rem,2cqw,1.85rem)/1.12 var(--serif);color:var(--ink)}
.art-prose .art-cta p:not(.art-cta-t){font:400 .97rem/1.55 var(--sans)}

/* Preguntas frecuentes y «Sigue leyendo» */
.art-faq{padding-block:clamp(32px,4.5cqw,72px)}
.art-more .psec-head .h2{font-size:clamp(1.9rem,3cqw,2.7rem)}