/* ==========================================================================
   BLIXTOR · css/p/blog.css  (solo /blog y /blog/<artículo> · "El índice",
   7 oct 2026)
   --------------------------------------------------------------------------
   Hilo: el blog explica la publicidad con números, y su índice se lee como
   el sumario de una revista. Cada artículo lleva su numeral (01 a 07) en
   trazo hueco que se llena cuando se lee o se señala; el primero es la
   portada, a escala de cartel; las pestañas de tema llevan su cuenta y un
   indicador que se desliza; la línea de puntos entre entradas es la del
   sumario. Una familia por sección:
   1 cabecera: el H1 a escala de cartel con "números" como palabra clave y
   la entradilla a la derecha · 2 pestañas · 3 el índice: portada (01) y
   entradas (02-07) · 4 la calculadora · 5 cierre.
   Artículos ("la lectura"): cabecera editorial (tema, título, entradilla y
   una fila de datos con filete), índice fijo en 1-3, prosa en 4-10, fuentes,
   autor y CTA con filetes, y "Sigue leyendo" como índice con numerales.
   Retícula de 12 columnas; cortes: >=1200 · 961-1199 · 600-960 · <600.
   Nada se oculta aquí a la espera de JS: sin JS o con movimiento reducido
   todo se ve en su estado final (los numerales huecos son un estado válido).
   Ver DESIGN.md, "Blog".
   ========================================================================== */

:root{
  --col-gap:clamp(1rem,2vw,2rem);
  --edge:max(var(--gutter),(100vw - var(--wrap)) / 2);
  --bl-dots:rgba(36,16,22,.34);
}
.bh__grid,.bl__item,.ba__grid,.ba__layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}

/* Piezas de la portada acotadas a estas páginas (candidatas a site.css):
   WhatsApp como icono en la cabecera móvil y CTA compacto por debajo de
   380 px. */
@media(max-width:560px){
  .site-header .site-header__cta{display:inline-flex!important;width:44px;min-height:44px;padding:0;gap:0}
  .site-header .site-header__cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-header .site-header__cta .icon{width:22px;height:22px}
}
@media(max-width:379.98px){
  main .btn--lg{font-size:.875rem;padding-inline:.75rem;gap:.4rem}
}
@media(max-width:339.98px){
  main .btn--lg{font-size:.8125rem;padding-inline:.6rem}
}
/* En el índice (con ScrollTrigger y foco en las pestañas) el documento no
   lleva scroll suave: WebKit volvía arriba en cada refresh con el foco
   dentro de la página. Los artículos sí lo conservan para su índice. */
html:has(.bi){scroll-behavior:auto}

/* ==========================================================================
   1. CABECERA DEL BLOG · el H1 de siempre ("Blog:" en 400 y el resto en
   600) a escala de cartel en 1-8, con "números" en el color de señal; la
   entradilla, en 9-12, alineada al pie del titular.
   ========================================================================== */
.bh{padding-block:clamp(.75rem,.4rem + 1.2vw,1.5rem) 0}
.bh .breadcrumbs{margin-bottom:clamp(1.25rem,.75rem + 2vw,2.75rem)}
.bh .breadcrumbs li[aria-current="page"]{display:inline-flex}
.bh__grid{row-gap:1.5rem;align-items:end}
.bh__title{grid-column:1 / span 8;max-width:none;font-size:var(--fs-display);line-height:.96;letter-spacing:-.045em}
.bh__lead{grid-column:9 / -1;padding-bottom:.4em;font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:36ch}
@media(max-width:960.98px){
  .bh__title{grid-column:1 / -1}
  .bh__lead{grid-column:1 / span 9;padding-bottom:0}
}
@media(max-width:599.98px){
  .bh__lead{grid-column:1 / -1}
}

/* ==========================================================================
   2. PESTAÑAS DE TEMA · una fila de texto con la cuenta de cada tema, bajo
   un filete de tinta. La activa lleva el subrayado de señal; con JS un solo
   indicador se desliza entre pestañas (js/p/blog.js) y la fila se desplaza
   en el teléfono. Sin JS no hay filtros: se ven todos los artículos.
   ========================================================================== */
.bi{padding-bottom:var(--space-chapter)}
.bf{
  position:relative;display:flex;gap:clamp(1.25rem,1rem + 2vw,2.75rem);margin-top:clamp(2rem,1.5rem + 2vw,3.5rem);
  border-top:2px solid var(--c-ink);border-bottom:1px solid var(--c-rule);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.bf::-webkit-scrollbar{display:none}
.bf__tab{
  position:relative;flex:none;display:inline-flex;align-items:baseline;gap:.45em;min-height:56px;padding:0 .1rem;
  font-family:var(--font-display);font-size:clamp(1rem,.95rem + .3vw,1.1875rem);font-weight:500;letter-spacing:-.01em;line-height:1;
  color:var(--c-muted);white-space:nowrap;transition:color .25s var(--ease-out);
}
.bf__tab:hover{color:var(--c-ink)}
.bf__tab[aria-pressed="true"]{color:var(--c-ink)}
.bf__tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.bf__tab[aria-pressed="true"]::after{transform:scaleX(1)}
.bf.is-live .bf__tab::after{display:none}
.bf__n{font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;color:var(--c-muted);font-variant-numeric:tabular-nums;transition:color .25s var(--ease-out)}
.bf__tab[aria-pressed="true"] .bf__n{color:var(--accent)}
.bf__ind{position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);pointer-events:none;opacity:0}
.bf.is-live .bf__ind{opacity:1}
.bf__status{margin-top:.75rem;min-height:1.5em;font-size:var(--fs-label);color:var(--c-muted)}
html:not(.js) .bf,html:not(.js) .bf__status{display:none}

/* ==========================================================================
   3. EL ÍNDICE · cada entrada en una fila de la retícula: numeral hueco en
   1-2, tema, título (enlace; la fila entera es el enlace) y resumen en 3-9,
   minutos y fecha en 10-12. Línea de puntos entre entradas, como en un
   sumario; al señalar, un filete de señal la cubre, el título se desplaza
   y el numeral se llena. La portada (01) va a escala de cartel con un
   filete de tinta arriba.
   ========================================================================== */
.bl{list-style:none;margin-top:.5rem;border-bottom:1px solid var(--c-rule)}
.bl__item{
  position:relative;isolation:isolate;row-gap:.5rem;align-items:start;
  padding-block:clamp(1.5rem,1.2rem + 1.4vw,2.5rem);border-top:1px dotted var(--bl-dots);
}
.bl__item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.bl__num{
  grid-column:1 / span 2;margin-top:.05em;
  font-family:var(--font-display);font-size:clamp(2.5rem,1.6rem + 3.5vw,5rem);font-weight:400;line-height:.9;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  /* Numeral hueco: trazo de señal y relleno del color del papel pintado
     encima (paint-order), que tapa los contornos internos del glifo
     variable. Lleno = relleno de señal. */
  color:var(--accent);-webkit-text-fill-color:var(--bg);-webkit-text-stroke:2px var(--accent);paint-order:stroke fill;
  transition:-webkit-text-fill-color .45s var(--ease-out);
}
.bl__item.is-on .bl__num{-webkit-text-fill-color:var(--accent)}
.bl__body{grid-column:3 / span 7}
.bl__topic{display:block;margin-bottom:.55rem}
.bl__title{font-size:clamp(1.375rem,1.1rem + 1.1vw,2.125rem);font-weight:500;line-height:1.12;letter-spacing:-.025em;max-width:24ch}
.bl__title a{color:inherit;text-decoration:none}
.bl__title a::after{content:"";position:absolute;inset:0;z-index:1}
.bl__t{display:inline-block;transition:transform .45s var(--ease-out)}
.bl__desc{margin-top:.7rem;max-width:56ch;font-size:var(--fs-small);line-height:1.55;color:var(--c-body)}
.bl__meta{
  grid-column:10 / -1;display:grid;gap:.3rem;justify-items:end;padding-top:.4rem;
  text-align:right;font-size:var(--fs-label);font-weight:500;color:var(--c-muted);font-variant-numeric:tabular-nums;
}
.bl__arrow{position:absolute;right:0;bottom:clamp(1.5rem,1.2rem + 1.4vw,2.5rem);width:1.35rem;height:1.35rem;color:var(--accent);opacity:0;transform:translate(-6px,6px);transition:opacity .3s,transform .45s var(--ease-out)}
.bl__arrow .icon{width:100%;height:100%;display:block}
.bl__item:focus-within{outline:2px solid var(--c-signal);outline-offset:4px}
.bl__item :focus-visible{outline:none}
.bl__item[hidden]{display:none}
@media(hover:hover) and (pointer:fine){
  .bl__item:hover::before{transform:scaleX(1)}
  .bl__item:hover .bl__t{transform:translateX(6px)}
  .bl__item:hover .bl__num{-webkit-text-fill-color:var(--accent)}
  .bl__item:hover .bl__arrow{opacity:1;transform:none}
}

/* La portada del índice */
.bl__item--lead{border-top:0;padding-block:clamp(1.5rem,1rem + 2vw,3rem) clamp(2.5rem,2rem + 2.5vw,4.5rem)}
.bl__item--lead .bl__num{grid-column:1 / span 3;font-size:var(--fs-mega);font-weight:500;line-height:.85;letter-spacing:-.06em;-webkit-text-stroke:3px var(--accent);clip-path:inset(-6% -6% -6% -6%)}
.bl__item--lead .bl__body{grid-column:4 / span 7}
.bl__item--lead .bl__title{font-size:clamp(2rem,1.3rem + 3vw,4.25rem);font-weight:600;line-height:1;letter-spacing:-.04em;max-width:16ch}
.bl__item--lead .bl__desc{margin-top:1.25rem;font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
.bl__item--lead .bl__meta{grid-column:11 / -1;padding-top:.7rem}

@media(max-width:960.98px){
  .bl__body{grid-column:3 / -1}
  .bl__meta{grid-column:3 / -1;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;justify-items:start;text-align:left;padding-top:.25rem}
  .bl__item--lead .bl__num{grid-column:1 / -1;font-size:clamp(4rem,2rem + 10vw,7rem)}
  .bl__item--lead .bl__body,.bl__item--lead .bl__meta{grid-column:1 / -1}
  .bl__arrow{display:none}
}
@media(max-width:599.98px){
  .bl__item{grid-template-columns:minmax(0,1fr);row-gap:.6rem}
  .bl__num{grid-column:1;font-size:2.5rem}
  .bl__body,.bl__meta{grid-column:1}
  .bl__item--lead .bl__num{font-size:clamp(4rem,2rem + 12vw,5.5rem)}
  .bl__title{max-width:none}
}

/* 4. La calculadora */
.bi__calc{margin-top:clamp(2rem,1.5rem + 2vw,3.5rem);max-width:44ch;font-size:var(--fs-lead);line-height:1.5;color:var(--c-body)}

/* Entradas de carga, solo CSS y una vez: el numeral de la portada sube en
   su máscara y las pestañas aparecen en cascada. Nada de texto se oculta
   más de medio segundo y nada espera al JS. */
@media(prefers-reduced-motion:no-preference){
  .bl__item--lead .bl__num{animation:bl-num .9s .1s var(--ease-out) backwards}
  .bf__tab{animation:bf-in .5s var(--ease-out) backwards}
  .bf__tab:nth-child(2){animation-delay:.06s}
  .bf__tab:nth-child(3){animation-delay:.12s}
  .bf__tab:nth-child(4){animation-delay:.18s}
  .bf__tab:nth-child(5){animation-delay:.24s}
  .bf__tab:nth-child(6){animation-delay:.3s}
}
@keyframes bl-num{from{clip-path:inset(-6% -6% 106% -6%);transform:translateY(.12em)}}
@keyframes bf-in{from{opacity:0;transform:translateY(6px)}}

/* ==========================================================================
   5. ARTÍCULO · cabecera editorial: tema, título en 1-9, entradilla en 1-7 y
   la fila de datos (autor, fechas, minutos) bajo un filete de tinta. El
   índice fijo en 1-3 y la prosa en 4-10 (4-12 entre 961 y 1199). Por
   debajo de 961 el índice es un <details> con filetes.
   ========================================================================== */
.ba__head{padding-block:clamp(.75rem,.4rem + 1.2vw,1.5rem) clamp(2rem,1.5rem + 2vw,3.5rem)}
.ba__head .breadcrumbs{margin-bottom:clamp(1.5rem,1rem + 2vw,3rem)}
.ba__grid{row-gap:1rem}
.ba__topic{grid-column:1 / -1}
.ba__title{grid-column:1 / span 9;font-size:var(--fs-h1);max-width:20ch}
.ba__dek{grid-column:1 / span 7;margin-top:.5rem;font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:52ch}
.ba__meta{
  grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);row-gap:.5rem;
  margin-top:clamp(1.5rem,1.2rem + 1.2vw,2.5rem);padding-top:1rem;border-top:1px solid var(--c-ink);
  font-size:var(--fs-small);line-height:1.4;color:var(--c-muted);
}
.ba__meta > span{display:flex;align-items:center;gap:.6rem;min-height:2.25rem}
.ba__meta a{color:var(--c-ink);font-weight:600;text-decoration:none}
.ba__meta a:hover{text-decoration:underline}
.ba__author img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 25%}
@media(max-width:760px){
  .ba__title,.ba__dek{grid-column:1 / -1}
  .ba__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:419.98px){
  .ba__meta{grid-template-columns:minmax(0,1fr)}
}

.ba__layout{align-items:start;padding-bottom:var(--space-chapter)}
.ba__aside{grid-column:1 / span 3}
.ba__main{grid-column:4 / span 7}
.toc-mobile{display:none}
@media(min-width:961px){
  .ba__aside{position:sticky;top:calc(var(--header-h) + 1.5rem)}
}
@media(min-width:961px) and (max-width:1199.98px){
  .ba__main{grid-column:4 / -1}
}
@media(max-width:960.98px){
  .ba__aside{display:none}
  .ba__main{grid-column:1 / -1}
  .toc-mobile{display:block}
}

.toc h2{font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;color:var(--c-muted);margin-bottom:.75rem}
.toc ol{list-style:none;border-left:1px solid var(--c-rule)}
.toc a{
  display:block;padding:.4rem 0 .4rem 1rem;margin-left:-1px;border-left:2px solid transparent;
  font-size:var(--fs-small);line-height:1.4;color:var(--c-muted);text-decoration:none;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.toc a:hover{color:var(--c-ink);border-left-color:var(--c-ink)}
.toc a.is-active{color:var(--accent-deep);border-left-color:var(--accent);font-weight:600}

.toc-mobile{margin-bottom:2rem;border-top:1px solid var(--c-ink);border-bottom:1px solid var(--c-rule)}
.toc-mobile summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.75rem 0;
  font-family:var(--font-display);font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;color:var(--c-ink);cursor:pointer;
}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary::after{
  content:"";flex:none;width:16px;height:16px;color:var(--accent);
  background:linear-gradient(currentColor,currentColor) center/16px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 16px no-repeat;
  transition:transform .35s var(--ease-out);
}
.toc-mobile[open] summary::after{transform:rotate(135deg)}
.toc-mobile ol{display:grid;gap:.45rem;padding:0 0 1.1rem 1.25rem;font-size:var(--fs-small)}
.toc-mobile li::marker{color:var(--accent)}

/* La prosa */
.prose{max-width:var(--measure);font-size:var(--fs-body);line-height:1.7;color:var(--c-body)}
.prose > * + *{margin-top:1.2em}
.prose p{color:var(--c-body)}
.prose h2{
  margin-top:2.4em;padding-top:1.1rem;border-top:1px solid var(--c-ink);
  font-size:clamp(1.625rem,1.3rem + 1.3vw,2.375rem);line-height:1.08;letter-spacing:-.03em;
  scroll-margin-top:calc(var(--header-h) + 1.5rem);
}
.prose h3{margin-top:1.8em;font-size:var(--fs-h3)}
.prose h2 + *,.prose h3 + *{margin-top:.75em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--accent)}
.prose a:not(.btn){
  color:var(--accent-deep);font-weight:550;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .2s,text-decoration-thickness .2s;
}
.prose a:not(.btn):hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.prose .answer{padding:.15rem 0 .25rem 1.5rem;border-left:2px solid var(--accent);font-size:var(--fs-lead);line-height:1.5}
.prose .answer p{color:var(--c-ink)}
.prose .answer strong{color:var(--accent-deep)}
.table-wrap{overflow-x:auto;overscroll-behavior-x:contain}
.table-wrap table{width:100%;min-width:520px;font-size:var(--fs-small);line-height:1.5}
.table-wrap th,.table-wrap td{padding:.85rem 1rem .85rem 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--c-rule)}
.table-wrap thead th{padding-top:.25rem;font-family:var(--font-display);font-weight:500;font-size:1.0625rem;letter-spacing:-.015em;color:var(--c-ink);border-bottom:1px solid var(--c-ink)}
.table-wrap tbody th{font-weight:600;color:var(--c-ink)}
.table-wrap tbody tr:last-child td,.table-wrap tbody tr:last-child th{border-bottom:0}
.formula{
  display:block;padding:.75rem 0 .75rem 1.25rem;border-left:2px dashed var(--accent);
  font-family:var(--font-display);font-weight:500;font-size:1.0625rem;line-height:1.5;letter-spacing:-.01em;color:var(--c-ink);font-variant-numeric:tabular-nums;
}
.formula small{display:block;margin-top:.35rem;font-family:var(--font-body);font-weight:400;font-size:var(--fs-small);color:var(--c-muted)}
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;padding:.25rem 0 .25rem 1.25rem;border-left:2px solid var(--accent)}
.callout > .icon{width:22px;height:22px;margin-top:.2rem;color:var(--accent)}
.callout p{font-size:var(--fs-small);line-height:1.6}
.callout p + p,.callout p + ol,.callout p + ul,.callout ol + p,.callout ul + p{margin-top:.6rem}
.callout ol,.callout ul{padding-left:1.3em;font-size:var(--fs-small)}
.callout--example{border-left-style:dashed}
.callout__label{display:block;margin-bottom:.4rem;font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;color:var(--accent-deep)}
.sources{margin-top:3.5rem;padding-top:1.25rem;border-top:1px solid var(--c-ink)}
.sources h2{margin:0;padding:0;border:0;font-size:var(--fs-h3)}
.sources ol{margin-top:1rem;padding-left:1.4em;font-size:var(--fs-small);line-height:1.55}
.sources li + li{margin-top:.5em}
.sources a{word-break:break-word}
.sources__note{margin-top:1rem;font-size:var(--fs-label);color:var(--c-muted)}
.author-box{display:grid;grid-template-columns:72px minmax(0,1fr);gap:1rem 1.25rem;align-items:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--c-rule)}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.author-box strong a{color:var(--c-ink);text-decoration:none}
.author-box strong a:hover{text-decoration:underline}
.author-box p{margin-top:.3rem;font-size:var(--fs-small);line-height:1.55;color:var(--c-muted)}
.article-cta{margin-top:3rem;padding:1.5rem 0 0;border-left:0;border-top:1px solid var(--c-ink)}
.article-cta > .icon{width:26px;height:26px;margin-top:.15rem;color:var(--accent)}
.article-cta p{font-size:var(--fs-body);line-height:1.6;color:var(--c-body)}
.article-cta__act{margin-top:1rem}
.article-cta .btn{max-width:100%}
@media(max-width:480px){
  .article-cta{grid-template-columns:minmax(0,1fr)}
  .article-cta > .icon{display:none}
  .article-cta .btn{width:100%}
}
@media(max-width:379.98px){
  .article-cta .btn{font-size:.875rem;padding-inline:.75rem;gap:.4rem}
}

/* Sigue leyendo: el mismo índice, en corto */
.ba__more{padding-block:clamp(3rem,2rem + 4vw,6rem) var(--space-chapter);border-top:1px solid var(--c-rule)}
.ba__more-title{font-size:var(--fs-h2);max-width:14ch}
.bl--related{margin-top:clamp(1.5rem,1rem + 2vw,2.5rem)}
.bl--related .bl__item{padding-block:clamp(1.25rem,1rem + 1vw,1.75rem)}
.bl--related .bl__num{font-size:clamp(2rem,1.5rem + 2vw,3.25rem)}
.bl--related .bl__title{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem)}

/* Make me preferred dentro de la prosa de un artículo: la pieza vive en
   site.css (sección 16b); aquí solo se anulan las reglas de .prose. */
.prose .pref{margin-top:3rem}
.prose .pref__steps{padding:0}
.prose .pref__steps li + li{margin-top:0}
.prose .pref__body > * + *{margin-top:.4rem}
.prose .pref__body .pref__act,.prose .pref__body .pref__note{margin-top:.9rem}
.prose .pref__lab,.prose .pref__fine{color:var(--c-muted)}
.prose .pref__t{color:var(--c-ink)}

/* ==========================================================================
   IMPRESIÓN
   ========================================================================== */
@media print{
  .bl__num{color:#000!important;-webkit-text-fill-color:#000!important;-webkit-text-stroke:0;animation:none!important;clip-path:none!important}
  .bl__item::before,.bl__arrow,.bf{display:none!important}
  .bl__item,.bl__num,.bl__body,.bl__meta,.bf__tab{opacity:1!important;transform:none!important;animation:none!important}
  .ba__aside{position:static!important}
}