/* ══ BLOG · la lista y el artículo (30-sep-2026) ═══════════════════════════════════════════════
   Medido contra 9 referencias en vivo (Linear, Cuberto, Vercel, Instrument, Apple, Stripe, rauno,
   paco.me, Basecamp): columna de 40rem a 17 px ≈ 72 caracteres por renglón, H1 48, imágenes que salen
   de la columna, índice fijo sólo con 4 secciones o más, sin barra de progreso (0 de 9 la usan).
   Un solo peso (400); la jerarquía es de TONO (--tx-1/2/3), como el resto del sitio.
   Lo genera tools/blog/generar.py: las páginas NO se editan a mano. */

/* ── monocromo: la misma capa que la home de pruebas (prueba-monocromo). `caliber.css` es de
   producción y todavía trae el acento azul; aquí se redefinen sus tokens (el «Empezar» salía azul). */
:root{ --acento:#EDEFF3; --acento-vivo:#F6F7F9; --acento-hondo:#2B2E35 }

/* ── escala: la MISMA regla que la home (prueba-escala-2k). Laptop 1470×956 = 16 px; arriba de 1600
   la raíz crece con el lado que menos crece. Todo aquí va en rem, así que escala entero. */
@media (min-width:1600px){
  html{ font-size:max(100%, min(calc(100vw / 91.875), calc(100vh / 59.75))) }
  :root{ --borde: max(clamp(1.5rem, 5vw, 5rem), (100vw - 85.125rem) / 2) }
}

/* ══ EL ARTÍCULO ══════════════════════════════════════════════════════════════════════════════ */
.art{ --col:40rem; padding-top:clamp(7rem,16vh,10rem) }
/* el encabezado va al ancho de la portada (70rem) y el título llena ese ancho en dos renglones parejos:
   a 20ch quedaba una columna angosta de tres renglones, 240 px más adentro que la foto y con media pantalla vacía */
.art__cab{ max-width:70rem; margin:0 auto }
.art__ruta{ margin:0 0 1.25rem; font-size:var(--t6); color:var(--tx-3) }
.art__ruta a{ color:var(--tx-2); text-decoration:none } .art__ruta a:hover{ color:var(--tx-1) }
.art__t{ margin:0 0 clamp(1.25rem,3vh,2rem); font-weight:400; font-size:clamp(2.125rem, 3.4vw + 1.1rem, 4.25rem); line-height:1.04;
  letter-spacing:-.028em; color:var(--tx-1); max-width:21em; text-wrap:balance }
.art__sub{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem 3rem; align-items:end }
.art__bajada{ margin:0; font-size:var(--t4); line-height:1.45; color:var(--tx-2); max-width:44ch; text-wrap:pretty }
.art__meta{ margin:0; font-size:var(--t6); line-height:1.5; color:var(--tx-3); text-align:right }
@media (max-width:899px){
  .art__sub{ grid-template-columns:minmax(0,1fr) } .art__meta{ text-align:left }
}
.art__portada{ max-width:70rem; margin:clamp(2rem,5vh,3rem) auto 0 }
.art__portada img, .img3d img, .bl-dest img, .bl-tarjeta img{ display:block; width:100%; height:auto; border-radius:clamp(.75rem,2vw,1.125rem) }

.art__cuerpo{ position:relative; max-width:var(--col); margin:clamp(2.5rem,7vw,3.5rem) auto 0 }
.art__indice{ display:none }
/* el índice vive FUERA del sangrado de las imágenes (-8rem): antes a 4rem, las imágenes le pasaban encima.
   A 9.5rem quedaba a 1rem de las fotos anchas (medido a 1920) y a 24 px del borde de la ventana a 1360:
   ahora 2.5rem de aire contra la foto, y sólo aparece donde cabe con el margen del sitio (≥1440). */
@media (min-width:1440px){
  .art__indice{ display:block; position:absolute; top:0; bottom:0; right:calc(100% + 10.5rem); width:11rem }
  .art__indice > *{ position:sticky }
  .art__indice p{ top:7rem; margin:0 0 .75rem; font-size:var(--t6); color:var(--tx-3) }
  .art__indice ol{ top:9rem; list-style:none; margin:0; padding:0 }
  .art__indice li{ margin:0 0 .5rem }
  .art__indice a{ font-size:var(--t6); line-height:1.4; color:var(--tx-3); text-decoration:none; transition:color .2s ease }
  .art__indice a:hover, .art__indice a[aria-current]{ color:var(--tx-1) }
}

.prosa{ font-size:var(--t5); line-height:1.6; color:var(--tx-2) }
.prosa p{ margin:0 0 1.125rem; text-wrap:pretty }
.prosa strong{ font-weight:400; color:var(--tx-1) }
.prosa h2{ margin:3.5rem 0 1rem; font-weight:400; font-size:clamp(1.5rem,5.6vw,1.75rem); line-height:1.2; color:var(--tx-1);
  text-wrap:balance; scroll-margin-top:6rem }
.prosa h3{ margin:2rem 0 .5rem; font-weight:400; font-size:var(--t4); color:var(--tx-1) }
.prosa ol, .prosa ul{ margin:0 0 1.25rem; padding-left:1.2em } .prosa li{ margin:0 0 .625rem }
.prosa li::marker{ color:var(--tx-3) }
/* la respuesta corta: arriba de todo, para quien tiene prisa, Google y los buscadores con IA */
.prosa .art__corta-r{ margin:0 0 .625rem; font-size:var(--t6); color:var(--tx-3) }
.prosa .art__corta-r + p{ margin:0 0 .5rem; padding:1.375rem 1.5rem; border-radius:1rem; background:rgba(255,255,255,.035);
  font-size:var(--t4); line-height:1.5; color:var(--tx-1) }

.tabla{ margin:1.75rem 0 } .prosa table{ border-collapse:collapse; width:100%; font-size:.9375rem; font-variant-numeric:tabular-nums }
.prosa th{ padding:.625rem .875rem .625rem 0; border-bottom:1px solid var(--tx-linea); text-align:left; font-weight:400; font-size:var(--t6); color:var(--tx-3) }
.prosa td{ padding:.75rem .875rem .75rem 0; border-bottom:1px solid var(--tx-linea); vertical-align:top }
.prosa td:first-child{ color:var(--tx-1) }
.prosa th, .prosa td.-n{ white-space:nowrap }

.prosa figure{ margin:2.25rem 0 } .prosa figcaption{ margin-top:.875rem; font-size:var(--t6); line-height:1.5; color:var(--tx-3) }
/* las imágenes salen de la columna (Linear, Vercel, Apple: 976 a 1184 px contra ~650 de texto) */
.img3d{ margin-inline:calc(var(--borde) * -1) !important }
.img3d img{ border-radius:0 }
.img3d figcaption{ padding-inline:var(--borde) }
@media (min-width:1000px){
  .img3d{ margin-inline:-8rem !important } .img3d img{ border-radius:1rem } .img3d figcaption{ padding-inline:8rem }
}

/* visual en código · rangos */
.rg__f, .rg__eje{ display:grid; grid-template-columns:9.5rem 1fr 8.5rem; gap:1rem; align-items:center }
.rg__f{ padding:.5rem 0 } .rg__n{ font-size:.9375rem; color:var(--tx-1) }
.rg__v{ font-size:var(--t6); color:var(--tx-3); font-variant-numeric:tabular-nums; text-align:right }
.rg__pista{ position:relative; height:.5rem; border-radius:1rem; background:rgba(255,255,255,.05) }
.rg__b{ position:absolute; top:0; bottom:0; border-radius:1rem; background:rgba(237,239,243,.86) }
.rg__b.-abierta{ background:linear-gradient(90deg, rgba(237,239,243,.86), rgba(237,239,243,0)) }
.rg__eje{ margin-top:.25rem } .rg__marcas{ position:relative; height:1.25rem }
.rg__marcas span{ position:absolute; transform:translateX(-50%); font-size:.75rem; color:var(--tx-3); font-variant-numeric:tabular-nums }
.rg__marcas span:first-child{ transform:none } .rg__marcas span:last-child{ transform:translateX(-100%) }

/* visual en código · el primer año */
.ln__meses{ display:grid; grid-template-columns:repeat(13,1fr); margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--tx-linea);
  font-size:.75rem; color:var(--tx-3); font-variant-numeric:tabular-nums }
.ln__meses span:first-child{ white-space:nowrap }
.ln__c{ margin-bottom:1.25rem } .ln__nom{ margin:0 0 .5rem !important; font-size:var(--t6); color:var(--tx-3) }
.ln__c ol{ display:grid; grid-template-columns:repeat(13,1fr); row-gap:.625rem; list-style:none; margin:0; padding:0 }
.ln__i{ position:relative; min-width:0; margin:0 !important; grid-column:calc(var(--a) + 1) / span max(1, calc(var(--b) - var(--a) + 1)) }
.ln__i i{ display:block; height:.5rem; border-radius:1rem; background:rgba(237,239,243,.86) }
.ln__i.-punto i{ width:.5rem }
.ln__i.-puntos i{ height:.1875rem; margin:.15625rem 0; background:repeating-linear-gradient(90deg, rgba(237,239,243,.6) 0 .25rem, transparent .25rem .5rem) }
.ln__i span{ display:block; margin-top:.375rem; font-size:.8125rem; line-height:1.35; color:var(--tx-2); white-space:nowrap }
.ln__i.-fin{ grid-column:13; justify-self:end; text-align:right } .ln__i.-fin i{ margin-left:auto } .ln__i.-fin span{ direction:rtl }

/* el cierre del artículo: grande, con UNA salida clara (y WhatsApp de respaldo) */
.art__cierre{ max-width:var(--col); margin:clamp(4rem,10vh,6rem) auto 0; padding-top:clamp(2.5rem,6vh,3.5rem); border-top:1px solid var(--tx-linea) }
.art__cierre h2{ margin:0 0 1rem; font-weight:400; font-size:var(--t2); line-height:1.06; color:var(--tx-1); text-wrap:balance }
.art__cierre p{ margin:0 0 1.5rem; font-size:var(--t4); line-height:1.45; color:var(--tx-2) }
.art__botones{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem }
.art__wa{ font-size:var(--t5); color:var(--tx-1); text-decoration:none; border-bottom:1px solid rgba(237,239,243,.25); padding-bottom:2px }
.art__wa:hover{ border-bottom-color:var(--tx-1) }

/* ══ LA LISTA /blog ═══════════════════════════════════════════════════════════════════════════ */
.bl-pag{ padding-top:clamp(8rem,20vh,11rem) }
/* 6-oct-2026 · la cabecera: centrada y mediana (Cuberto mide 83 px a 1470; aquí 91). La marca no la pone el
   tamaño sino la «o», que es el eclipse del sitio en miniatura. Rechazadas antes: «Blog» gigante, frase a
   t0 y párrafo en dos tonos («se ve muy grande, nada estético»). */
.bl-pag__cab{ text-align:center; margin-bottom:clamp(3.5rem,10vh,6.5rem) }
.bl-pag__t{ margin:0; font-weight:400; font-size:clamp(4rem,6.2vw,6rem); line-height:1; letter-spacing:-.045em; color:var(--tx-1) }
.bl-pag__sub{ margin:clamp(1.25rem,3vh,1.75rem) auto 0; max-width:60ch; font-size:var(--t4); line-height:1.45; color:var(--tx-2); text-wrap:balance }
/* la «o»: la letra se queda (lectores de pantalla, copiar, buscar) pero transparente; encima, sol y luna.
   La luna es 0.03em más chica: deja el anillo de luz. `bottom` asienta los dos discos en la línea base de
   Switzer (medido: .165em) y el diámetro iguala la altura de la x. */
.bl-ecl{ position:relative; display:inline-block; color:transparent; --dx:0; --dy:0 }
.bl-ecl i{ position:absolute; left:50%; border-radius:50%; pointer-events:none }
.bl-ecl__sol{ bottom:.165em; width:.52em; height:.52em; margin-left:-.26em; background:#F6F7F9;
  box-shadow:0 0 .03em .01em rgba(246,247,249,.9), 0 0 .14em .04em rgba(237,239,243,.45), 0 0 .5em .12em rgba(237,239,243,.16), 0 0 1.1em .2em rgba(237,239,243,.06);
  animation:bl-ecl-respira 7s ease-in-out infinite; transition:box-shadow .9s var(--curva) }
.bl-ecl__luna{ bottom:.18em; width:.49em; height:.49em; margin-left:-.245em; background:#08090C;
  transform:translate(calc(var(--dx) * .07em), calc(var(--dy) * .07em)); transition:transform 1.1s var(--curva) }
@keyframes bl-ecl-respira{ 50%{ box-shadow:0 0 .03em .012em rgba(246,247,249,.95), 0 0 .17em .05em rgba(237,239,243,.52), 0 0 .6em .14em rgba(237,239,243,.2), 0 0 1.3em .24em rgba(237,239,243,.08) } }
/* sobre la palabra: la luna se centra y la corona se abre (la totalidad del final de cada página) */
.bl-pag__t:hover .bl-ecl__luna{ transform:none }
.bl-pag__t:hover .bl-ecl__sol{ box-shadow:0 0 .03em .014em #fff, 0 0 .2em .06em rgba(237,239,243,.62), 0 0 .75em .18em rgba(237,239,243,.26), 0 0 1.6em .3em rgba(237,239,243,.1) }
@media (prefers-reduced-motion:reduce){ .bl-ecl__sol{ animation:none } .bl-ecl__luna{ transition:none } }
/* la más nueva, destacada: portada grande y el texto al lado (Apple Newsroom baja el tamaño por nivel) */
.bl-dest{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding-top:clamp(1.5rem,3vh,2rem); border-top:1px solid var(--tx-linea); color:inherit; text-decoration:none }
.bl-dest figure, .bl-tarjeta figure{ margin:0; overflow:hidden; border-radius:clamp(.75rem,2vw,1.125rem) }
.bl-dest img, .bl-tarjeta img{ transition:transform .8s var(--curva) }
.bl-dest__meta, .bl-tarjeta__meta{ margin:0 0 .75rem; font-size:var(--t6); color:var(--tx-3) }
.bl-dest h2{ margin:0 0 1rem; font-weight:400; font-size:var(--t3); line-height:1.2; color:var(--tx-1); text-wrap:balance }
.bl-dest__bajada{ margin:0 0 1.5rem; font-size:var(--t5); line-height:1.55; color:var(--tx-2) }
.bl-dest__ir{ font-size:var(--t5); color:var(--tx-1) }
.bl-rejilla{ --hueco:clamp(40px,5vw,80px); display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); column-gap:var(--hueco);
  list-style:none; margin:clamp(3rem,8vh,5rem) 0 0; padding:0 }
.bl-tarjeta{ position:relative; min-width:0 }
.bl-tarjeta a{ display:block; color:inherit; text-decoration:none }
.bl-tarjeta__meta{ margin-top:1.25rem }
/* 6-oct-2026: el título solo y la bajada abajo, en su renglón (antes iban pegados en el mismo párrafo y se leía
   como un bloque). Sin la línea vertical entre tarjetas: el hueco ya las separa. */
.bl-tarjeta h3{ margin:0; font-weight:400; font-size:var(--t4); line-height:1.3; color:var(--tx-1); text-wrap:balance }
.bl-tarjeta__bajada{ margin:.625rem 0 0; max-width:52ch; font-size:var(--t5); line-height:1.55; color:var(--tx-3); text-wrap:pretty; transition:color .25s ease }
.bl-mas{ padding-top:0 } .bl-mas__t{ margin:0; padding-top:clamp(2.5rem,6vh,3.5rem); border-top:1px solid var(--tx-linea);
  font-weight:400; font-size:var(--t3); color:var(--tx-1) }
@media (hover:hover) and (pointer:fine){
  .bl-dest:hover img, .bl-tarjeta a:hover img{ transform:scale(1.03) }
  .bl-tarjeta a:hover .bl-tarjeta__bajada{ color:var(--tx-2) }
}
.bl-dest:focus-visible, .bl-tarjeta a:focus-visible{ outline:1px solid var(--tx-1); outline-offset:8px; border-radius:18px }

/* ── tableta y teléfono ─────────────────────────────────────────────────────────────────────── */
@media (max-width:899px){
  .bl-dest{ grid-template-columns:minmax(0,1fr) }
  .bl-rejilla{ grid-template-columns:minmax(0,1fr); border-top:1px solid var(--tx-linea) }
  .bl-tarjeta{ padding:1.25rem 0; border-bottom:1px solid var(--tx-linea) }
  .bl-tarjeta a{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); grid-template-rows:auto auto 1fr; column-gap:1rem; align-items:start }
  .bl-tarjeta figure{ grid-row:span 3 } .bl-tarjeta__meta{ margin:0 0 .5rem }
}
@media (max-width:600px){
  .prosa thead{ display:none } .prosa table, .prosa tbody, .prosa tr, .prosa td{ display:block; width:100% }
  .prosa tr{ padding:1rem 0; border-bottom:1px solid var(--tx-linea) } .prosa tr:first-child{ border-top:1px solid var(--tx-linea) }
  .prosa td{ display:grid; grid-template-columns:7.5rem 1fr; gap:.75rem; padding:.125rem 0; border:0 }
  .prosa td::before{ content:attr(data-l); font-size:var(--t6); color:var(--tx-3) }
  .prosa td:first-child{ display:block; margin-bottom:.375rem; font-size:var(--t5) } .prosa td:first-child::before{ content:none }
  .rg__f{ grid-template-columns:1fr auto; row-gap:.375rem } .rg__f .rg__pista{ grid-column:1 / -1; grid-row:2 }
  .rg__eje{ grid-template-columns:1fr } .rg__eje .rg__n, .rg__eje .rg__v{ display:none }
  .ln__meses{ display:none } .ln__c ol{ display:block }
  .ln__i{ display:grid; grid-template-columns:5.5rem 1fr; gap:.75rem; padding:.5rem 0; border-bottom:1px solid var(--tx-linea) }
  .ln__i i{ display:none } .ln__i::before{ content:attr(data-m); font-size:.8125rem; color:var(--tx-3) }
  .ln__i span{ margin:0; white-space:normal; direction:ltr !important; text-align:left } .ln__i.-fin{ justify-self:stretch; text-align:left }
  .prosa .art__corta-r + p{ padding:1.125rem 1.25rem }
  .bl-tarjeta a{ grid-template-columns:6.5rem minmax(0,1fr) } .bl-tarjeta figure{ aspect-ratio:1 } .bl-tarjeta img{ height:100%; object-fit:cover }
  .bl-tarjeta__bajada{ display:none }
  .bl-tarjeta__cat{ display:none }   /* en la columna angosta partía «7 min / de lectura» en dos renglones */   /* en el teléfono la pregunta ya dice de qué va: la bajada la volvía un bloque de 7 renglones */
}
@media (prefers-reduced-motion:reduce){ .bl-dest img, .bl-tarjeta img, .art__indice a{ transition:none } }

/* ══ PREGUNTAS FRECUENTES · acordeón (el mismo idioma que «Lo que preguntan antes de firmar» de la home)
   Sin imágenes a propósito: aquí se lee en diagonal buscando la pregunta propia; una foto sólo estorba.
   <details name> exclusivo y sin JS. Abrir = altura con interpolate-size + la respuesta entra con un
   desenfoque que se disuelve; el «+» es de dos trazos y el vertical se recoge. */
.fqa{ margin:1.5rem 0 0; interpolate-size:allow-keywords }
.fqa__p{ position:relative; border-top:1px solid var(--tx-linea) }
.fqa__p:last-child{ border-bottom:1px solid var(--tx-linea) }
.fqa__p::after{ content:''; position:absolute; left:-1.25rem; top:1.375rem; bottom:1.375rem; width:1px; background:var(--tx-1);
  transform:scaleY(0); transform-origin:50% 0; transition:transform .45s cubic-bezier(.23,1,.32,1) }
.fqa__p[open]::after{ transform:none }
.fqa__p > summary{ position:relative; isolation:isolate; display:grid; grid-template-columns:2.75rem minmax(0,1fr) 1.25rem; align-items:baseline;
  gap:0 .75rem; padding:clamp(1.125rem,2.6vh,1.5rem) 0; list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent }
.fqa__p > summary::-webkit-details-marker{ display:none }
.fqa__p > summary::before{ content:''; position:absolute; z-index:-1; inset:.375rem -1rem; border-radius:.875rem; background:rgba(237,239,243,.04);
  opacity:0; transition:opacity .2s ease }
.fqa__n{ font-size:var(--t6); color:var(--tx-3); font-variant-numeric:tabular-nums; transition:color .2s ease }
.fqa__q{ font-size:var(--t4); line-height:1.35; color:var(--tx-2); transition:color .2s ease, transform .3s cubic-bezier(.23,1,.32,1) }
.fqa__p[open] .fqa__q, .fqa__p[open] .fqa__n{ color:var(--tx-1) }
.fqa__x{ position:relative; width:.875rem; height:.875rem; align-self:center; justify-self:end }
.fqa__x::before, .fqa__x::after{ content:''; position:absolute; left:0; right:0; top:50%; height:1px; margin-top:-.5px; border-radius:1px;
  background:var(--tx-1); transition:transform .32s cubic-bezier(.23,1,.32,1) }
.fqa__x::after{ transform:rotate(90deg) }
.fqa__p[open] .fqa__x::after{ transform:rotate(90deg) scaleX(0) }
.fqa__p[open] .fqa__x::before{ transform:rotate(180deg) }
.fqa__p::details-content{ block-size:0; overflow:hidden; opacity:0;
  transition:block-size .38s cubic-bezier(.23,1,.32,1), opacity .3s ease, content-visibility .38s allow-discrete }
.fqa__p[open]::details-content{ block-size:auto; opacity:1 }
.fqa__r{ padding:0 2.75rem 1.75rem calc(2.75rem + .75rem); transition:transform .45s cubic-bezier(.23,1,.32,1), filter .45s cubic-bezier(.23,1,.32,1) }
.fqa__p:not([open]) .fqa__r{ transform:translateY(-8px); filter:blur(3px) }
.fqa__r p{ margin:0 0 .75rem; font-size:var(--t5); line-height:1.6; color:var(--tx-2) }
.fqa__r p:last-child{ margin-bottom:0 }
.fqa__r .fqa__ya{ margin-bottom:.5rem; font-size:var(--t4); line-height:1.4; color:var(--tx-1) }
@media (hover:hover) and (pointer:fine){
  .fqa__p > summary:hover::before{ opacity:1 }
  .fqa__p > summary:hover .fqa__q{ color:var(--tx-1); transform:translateX(4px) }
  .fqa__p > summary:hover .fqa__n{ color:var(--tx-2) }
}
.fqa__p > summary:focus-visible{ outline:1px solid var(--tx-1); outline-offset:4px; border-radius:.625rem }
@media (max-width:600px){
  .fqa__p > summary{ grid-template-columns:2.25rem minmax(0,1fr) 1.125rem }
  .fqa__r{ padding:0 0 1.5rem calc(2.25rem + .75rem) } .fqa__p::after{ left:-.75rem }
}
@media (prefers-reduced-motion:reduce){ .fqa *, .fqa__p::after, .fqa__p::details-content{ transition:none !important }
  .fqa__p:not([open]) .fqa__r{ transform:none; filter:none } }

/* ══ la cotización de EJEMPLO: una hoja con sus ocho renglones (llena el tramo más largo de puro texto,
   1.5 pantallas medidas, con algo que el lector puede usar: comparar contra lo que le mandaron) */
.ct{ margin:2.25rem 0 }
.ct__hoja{ padding:clamp(1.25rem,4vw,2rem) clamp(1.25rem,4vw,2.25rem); border-radius:1.125rem; background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(237,239,243,.08) }
.ct__rot{ margin:0 0 .375rem !important; font-size:var(--t6); color:var(--tx-3) }
.ct__t{ margin:0 0 1.25rem !important; font-size:var(--t4); color:var(--tx-1) }
.ct ol{ list-style:none; margin:0; padding:0 }
.ct li{ display:grid; grid-template-columns:2.25rem 7.5rem minmax(0,1fr); gap:.75rem; align-items:baseline; margin:0; padding:.75rem 0;
  border-top:1px solid var(--tx-linea) }
.ct__n{ font-size:.75rem; color:var(--tx-3); font-variant-numeric:tabular-nums }
.ct__k{ font-size:var(--t6); color:var(--tx-3) }
.ct__v{ font-size:.9375rem; line-height:1.45; color:var(--tx-1) }

/* ══ «Señales de alerta» como panel: cada señal con una ✕ (sin imagen; sólo que se distinga) */
.prosa ul.alertas{ list-style:none; margin:1.5rem 0; padding:.5rem clamp(1.25rem,4vw,1.75rem); border-radius:1.125rem;
  background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(237,239,243,.08) }
.prosa ul.alertas li{ position:relative; margin:0; padding:1rem 0 1rem 2rem; border-top:1px solid var(--tx-linea) }
.prosa ul.alertas li:first-child{ border-top:0 }
.prosa ul.alertas li::before, .prosa ul.alertas li::after{ content:''; position:absolute; left:.1875rem; top:1.6rem; width:.8125rem; height:1px;
  background:var(--tx-1); transform:rotate(45deg) }
.prosa ul.alertas li::after{ transform:rotate(-45deg) }
@media (max-width:600px){
  .ct li{ grid-template-columns:2rem minmax(0,1fr); row-gap:.125rem } .ct__v{ grid-column:2 }
}

/* ══ ARTÍCULO 2 · los plazos (30-sep-2026) ═══════════════════════════════════════════════════════
   Las barras de rango crecen al entrar (scroll, sin JS); el render de los seis pasos lleva sus
   etiquetas en HTML en el punto que Blender calculó (pasos.json); el dominó se prende y se apaga. */
@supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){
  .rg__b{ transform-origin:0 50%; animation-name:rg-crece; animation-duration:1ms; animation-timing-function:cubic-bezier(.23,1,.32,1);
    animation-fill-mode:both; animation-timeline:view(); animation-range:entry 30% cover 40% }
} }
@keyframes rg-crece{ from{ transform:scaleX(0) } }

/* · los seis pasos: render + etiquetas */
.ps__lienzo{ position:relative }
.ps__et{ position:absolute; inset:0; list-style:none; margin:0 !important; padding:0 !important; pointer-events:none }
.ps__e{ position:absolute; display:flex; flex-direction:column; align-items:center; width:7.5rem; margin:0 !important; text-align:center;
  transform:translate(-50%, calc(-100% - .875rem)) }
.ps__e::after{ content:''; position:absolute; left:50%; bottom:-.75rem; width:1px; height:.5rem; background:rgba(237,239,243,.4) }
.ps__e b{ font-weight:400; font-size:var(--t4); line-height:1.1; color:var(--tx-1); font-variant-numeric:tabular-nums; white-space:nowrap }
.ps__u{ font-size:var(--t6); color:var(--tx-2) }
.ps__n{ margin-top:.25rem; font-size:.8125rem; line-height:1.3; color:var(--tx-3); text-wrap:balance }
.ps__e em{ margin-top:.5rem; padding:.125rem .5rem; border-radius:1rem; box-shadow:inset 0 0 0 1px rgba(237,239,243,.4);
  font-style:normal; font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-1) }

/* · el dominó */
.dm{ margin:2.5rem 0 }
.dm__ctl{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.75rem }
.dm__b{ display:inline-flex; align-items:center; gap:.625rem; min-height:2.75rem; padding:.5rem 1rem .5rem .75rem; border:0; border-radius:2rem;
  background:transparent; box-shadow:inset 0 0 0 1px rgba(237,239,243,.14); font:inherit; font-size:var(--t6); color:var(--tx-3); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:color .2s ease, box-shadow .2s ease, transform .16s ease-out }
.dm__b b{ font-weight:400; color:var(--tx-2) }
.dm__b i{ position:relative; flex:none; width:1.75rem; height:1rem; border-radius:1rem; background:rgba(237,239,243,.12); transition:background .25s ease }
.dm__b i::after{ content:''; position:absolute; top:.1875rem; left:.1875rem; width:.625rem; height:.625rem; border-radius:50%; background:var(--tx-3);
  transition:transform .3s cubic-bezier(.23,1,.32,1), background .25s ease }
.dm__b[aria-pressed="true"]{ color:var(--tx-2); box-shadow:inset 0 0 0 1px rgba(237,239,243,.34) }
.dm__b[aria-pressed="true"] b{ color:var(--tx-1) }
.dm__b[aria-pressed="true"] i{ background:rgba(237,239,243,.86) }
.dm__b[aria-pressed="true"] i::after{ transform:translateX(.75rem); background:#08090C }
.dm__b:active{ transform:scale(.97) }
.dm__b:focus-visible{ outline:1px solid var(--tx-1); outline-offset:3px }
@media (hover:hover) and (pointer:fine){ .dm__b:hover{ color:var(--tx-1); box-shadow:inset 0 0 0 1px rgba(237,239,243,.4) } }

.dm__fila{ display:grid; grid-template-columns:6.5rem minmax(0,1fr) 7.5rem; gap:1rem; align-items:center; margin-bottom:.75rem }
.dm__nom, .dm__cuando{ margin:0 !important; font-size:var(--t6); color:var(--tx-3) }
.dm__cuando{ font-variant-numeric:tabular-nums; white-space:nowrap } .dm__cuando output{ color:var(--tx-1) }
.dm__pista{ position:relative; height:1.75rem }
.dm__s{ position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center; border-right:2px solid transparent;
  border-radius:.375rem; background:rgba(237,239,243,.86); background-clip:padding-box;
  transition:left .7s cubic-bezier(.23,1,.32,1) calc(var(--i) * 55ms), width .7s cubic-bezier(.23,1,.32,1) calc(var(--i) * 55ms), opacity .3s ease }
.dm__s span{ font-size:.6875rem; color:#08090C; font-variant-numeric:tabular-nums }
/* lo tuyo, como en el render: hueco, no macizo */
.dm__s.-tu{ background:transparent; box-shadow:inset 0 0 0 1px rgba(237,239,243,.6) } .dm__s.-tu span{ color:var(--tx-1) }
.dm__s.-espera{ background:repeating-linear-gradient(135deg, rgba(237,239,243,.3) 0 1.5px, transparent 1.5px 6px); background-clip:padding-box }
.dm__s.-cero{ opacity:0 }
.dm__fin{ position:absolute; top:-.5rem; bottom:-.5rem; width:1px; margin-left:-1px; background:var(--tx-1);
  transition:left .7s cubic-bezier(.23,1,.32,1) calc(var(--i) * 55ms) }
.dm__fila.-plan .dm__fin{ background:rgba(237,239,243,.35) }
.dm__eje{ position:relative; height:1.25rem; border-top:1px solid var(--tx-linea) }
.dm__eje span{ position:absolute; top:.375rem; transform:translateX(-50%); font-size:.75rem; color:var(--tx-3); font-variant-numeric:tabular-nums; white-space:nowrap }
.dm__eje span:first-child{ transform:none }
.dm__delta{ margin:1.25rem 0 .75rem !important; font-size:var(--t4); line-height:1.4; color:var(--tx-1) }
.dm__delta .dm__no, .dm__delta.-cero .dm__si{ display:none } .dm__delta.-cero .dm__no{ display:inline }
.dm__ley{ display:flex; flex-wrap:wrap; gap:.375rem 1.25rem; list-style:none; margin:0 !important; padding:0 !important }
.dm__ley li{ display:flex; align-items:center; gap:.5rem; margin:0; font-size:.8125rem; color:var(--tx-3) }
.dm__ley li span{ display:grid; place-items:center; width:1.125rem; height:1.125rem; border-radius:.25rem; background:rgba(237,239,243,.86);
  font-size:.625rem; color:#08090C; font-variant-numeric:tabular-nums }
.dm__ley li.-tu span{ background:transparent; box-shadow:inset 0 0 0 1px rgba(237,239,243,.6); color:var(--tx-1) }
@media (prefers-reduced-motion:reduce){ .dm__s, .dm__fin, .dm__b, .dm__b i, .dm__b i::after{ transition:none } }

/* · el recorte del portal: la pantalla real, sin aparato; se desvanece abajo porque la página sigue */
.ui{ margin:2.25rem 0 !important }
.ui img{ display:block; width:100%; height:auto; border-radius:.875rem; box-shadow:0 0 0 1px rgba(237,239,243,.1);
  -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent); mask-image:linear-gradient(to bottom, #000 82%, transparent) }
@media (min-width:1000px){ .ui{ margin-inline:-4rem !important } .ui figcaption{ padding-inline:4rem } }

@media (max-width:600px){
  .ps__e{ width:3rem; transform:translate(-50%, calc(-100% - .625rem)) } .ps__n, .ps__u{ display:none }
  .ps__e b{ font-size:.9375rem } .ps__e em{ margin-top:.25rem; padding:0 .375rem; font-size:.5625rem }
  .dm__fila{ grid-template-columns:minmax(0,1fr) auto; row-gap:.375rem; margin-bottom:1rem }
  .dm__pista, .dm__eje{ grid-column:1 / -1; grid-row:2 }
  .dm__fila.-eje .dm__nom, .dm__fila.-eje .dm__cuando{ display:none }
  .dm__s span{ font-size:.625rem }
}
/* ajustes medidos en la captura: el <i> trae cursiva de fábrica; «Dirección de diseño» chocaba con el bloque de al lado */
.dm__s, .dm__b i{ font-style:normal }
.ps__n{ max-width:5.75rem }
.prosa figcaption{ text-wrap:pretty }

/* · la semana a semana: etiqueta a la izquierda y un riel con un punto por semana; el margen va punteado */
.prosa ol.semanas{ position:relative; list-style:none; margin:1.75rem 0; padding:0 }
.semanas li{ position:relative; display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1.5rem; margin:0; padding:0 0 1.5rem }
.semanas li::before{ content:''; position:absolute; left:.25rem; top:1.1rem; bottom:-.25rem; width:1px; background:var(--tx-linea) }
.semanas li:last-child::before{ background:repeating-linear-gradient(to bottom, var(--tx-linea) 0 3px, transparent 3px 7px) }
.semanas__k{ position:relative; padding-left:1.5rem; font-size:var(--t5); line-height:1.6; color:var(--tx-1); white-space:nowrap }
.semanas__k::before{ content:''; position:absolute; left:0; top:.55em; width:.5625rem; height:.5625rem; border-radius:50%; background:var(--tx-1) }
.semanas li:last-child .semanas__k{ color:var(--tx-3) }
.semanas li:last-child .semanas__k::before{ background:transparent; box-shadow:inset 0 0 0 1px var(--tx-3) }
.semanas li p{ margin:0 }

/* · lo que te toca: cuatro tarjetas chicas en lugar de una lista larga */
.prosa ol.toca{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; list-style:none; margin:1.5rem 0; padding:0; counter-reset:toca }
.toca li{ margin:0; padding:1.25rem 1.25rem 1.375rem; border-radius:1rem; background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(237,239,243,.08); counter-increment:toca; font-size:.9375rem; line-height:1.5 }
.toca li::before{ content:counter(toca, decimal-leading-zero); display:block; margin-bottom:1rem; font-size:.75rem; color:var(--tx-3); font-variant-numeric:tabular-nums }
.toca li strong{ display:block; margin-bottom:.375rem; font-size:var(--t5) }
@media (max-width:600px){
  .semanas li{ grid-template-columns:minmax(0,1fr); gap:.375rem; padding-left:1.5rem }
  .semanas li::before{ left:.25rem } .semanas__k{ margin-left:-1.5rem }
  .prosa ol.toca{ grid-template-columns:minmax(0,1fr) }
}

/* · proyectos reales: lo que sale de cada semana (3 en fila) y el mosaico de tiendas (una ancha + dos teléfonos) */
.gl__l{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); list-style:none; margin:0 !important; padding:0 !important }
.gl__l li{ margin:0; min-width:0 }
.gl__img{ overflow:hidden; aspect-ratio:16 / 10; border-radius:.875rem; box-shadow:inset 0 0 0 1px rgba(237,239,243,.08); background:#0d0e12 }
.gl__img img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0 !important; transition:transform .8s cubic-bezier(.23,1,.32,1) }
.gl__k{ margin:1rem 0 .375rem !important; font-size:var(--t6); color:var(--tx-3); font-variant-numeric:tabular-nums }
.gl__t{ margin:0 !important; font-size:.9375rem; line-height:1.45; color:var(--tx-1); text-wrap:pretty } .gl__t span{ color:var(--tx-3) }
.mo__g{ display:grid; grid-template-columns:minmax(0,3.35fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(.625rem,1.4vw,1rem); align-items:stretch }
.mo__i{ overflow:hidden; border-radius:.875rem; box-shadow:inset 0 0 0 1px rgba(237,239,243,.08) }
.mo__i img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; border-radius:0 !important }
.mo__i:not(.-tel) img{ height:auto; aspect-ratio:1440 / 860 }
@media (hover:hover) and (pointer:fine){ .gl__l li:hover .gl__img img{ transform:scale(1.03) } }
@media (max-width:899px){ .gl__l{ grid-template-columns:minmax(0,1fr); padding-inline:var(--borde) !important; gap:2rem } }
@media (max-width:600px){
  .mo__g{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-inline:var(--borde) }
  .mo__i:not(.-tel){ grid-column:1 / -1 } .mo__i.-tel{ aspect-ratio:9 / 16 }
}
@media (prefers-reduced-motion:reduce){ .gl__img img{ transition:none } }

/* ══ LOOPS DE PORTADA (30-sep-2026): el video va ENCIMA de la foto y aparece cuando ya corre.
   Redondeado en el propio video; la figura que lo tiene NO recorta (recortar una tarjeta con video costó
   cuadros en la home). Por eso ahí tampoco va el acercamiento al pasar el mouse. */
.art__portada, .bl-dest figure, .bl-tarjeta figure{ position:relative }
video.loop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:clamp(.75rem,2vw,1.125rem);
  opacity:0; transition:opacity .9s var(--curva); pointer-events:none }
video.loop.-vivo{ opacity:1 }
.bl-dest figure:has(video.loop), .bl-tarjeta figure:has(video.loop){ overflow:visible }
.bl-dest:hover figure:has(video.loop) img, .bl-tarjeta a:hover figure:has(video.loop) img{ transform:none }
@media (prefers-reduced-motion:reduce){ video.loop{ display:none } }

/* · proyectos en 3D (30-sep): una toma ancha arriba y dos abajo, todas 16:10, cada una en el campo de su marca */
.mo.-volumen .mo__g{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.mo.-volumen .mo__i:first-child{ grid-column:1 / -1 }
.mo.-volumen .mo__i img{ height:auto; aspect-ratio:16 / 10; object-position:50% 50% }
@media (max-width:600px){ .mo.-volumen .mo__g{ grid-template-columns:minmax(0,1fr) } }

/* ══ ARTÍCULO 3 · cómo pagar (30-sep-2026) ═══════════════════════════════════════════════════════ */
/* · pagado contra recibido: una fila por momento, dos barras (el acento es lo pagado) */
.tp{ margin:2.25rem 0 } .tp ol{ list-style:none; margin:0 !important; padding:0 !important }
.tp__ley{ display:flex; gap:1.5rem; margin:0 0 1rem !important; font-size:var(--t6); color:var(--tx-3) }
.tp__ley span{ display:inline-flex; align-items:center; gap:.5rem }
.tp__ley span::before{ content:''; width:.75rem; height:.375rem; border-radius:1rem }
.tp__ley .-pagado::before{ background:var(--acento) } .tp__ley .-recibido::before{ background:rgba(237,239,243,.86) }
.tp__f{ display:grid; grid-template-columns:10rem minmax(0,1fr); gap:.375rem 1.25rem; align-items:center; margin:0 !important; padding:.875rem 0;
  border-top:1px solid var(--tx-linea) }
.tp__n{ margin:0 !important; font-size:.9375rem; color:var(--tx-1) }
.tp__barras{ display:grid; gap:.3125rem }
.tp__b{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 2.75rem; align-items:center; gap:.625rem }
.tp__b i{ position:relative; display:block; height:.375rem; border-radius:1rem; background:rgba(255,255,255,.05); overflow:hidden }
.tp__b i::after{ content:''; position:absolute; inset:0 auto 0 0; width:var(--v); border-radius:inherit }
.tp__b.-pagado i::after{ background:var(--acento) } .tp__b.-recibido i::after{ background:rgba(237,239,243,.86) }
.tp__b em{ font-style:normal; font-size:.75rem; color:var(--tx-3); font-variant-numeric:tabular-nums; text-align:right }
.tp__nota{ grid-column:2; margin:.125rem 0 0 !important; font-size:var(--t6); line-height:1.45; color:var(--tx-3) }

/* · sano contra riesgoso: dos columnas, un trazo por fila (✓ fino / ✕ fino), sin iconos de color */
.cm{ margin:2.25rem 0 } .cm ol{ list-style:none; margin:0 !important; padding:0 !important }
.cm__cab, .cm li{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem }
.cm__cab{ padding-bottom:.75rem } .cm__cab p{ margin:0 !important; font-size:var(--t6); color:var(--tx-3) }
.cm li{ margin:0 !important; padding:.875rem 0; border-top:1px solid var(--tx-linea) }
.cm li p{ position:relative; margin:0 !important; padding-left:1.625rem; font-size:.9375rem; line-height:1.45 }
.cm__si{ color:var(--tx-1) } .cm__no{ color:var(--tx-3) }
.cm__si::before{ content:''; position:absolute; left:.125rem; top:.3rem; width:.4rem; height:.75rem; border:solid var(--tx-1);
  border-width:0 1px 1px 0; transform:rotate(45deg) }
.cm__no::before, .cm__no::after{ content:''; position:absolute; left:0; top:.7rem; width:.75rem; height:1px; background:var(--tx-3); transform:rotate(45deg) }
.cm__no::after{ transform:rotate(-45deg) }

/* · lo que debe decir el acuerdo: una hoja con renglones numerados (el mismo idioma que la cotización del art. 1) */
.prosa ol.puntos{ list-style:none; counter-reset:pt; margin:1.5rem 0; padding:.5rem clamp(1.25rem,4vw,2rem); border-radius:1.125rem;
  background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(237,239,243,.08) }
.puntos li{ position:relative; counter-increment:pt; margin:0; padding:.9rem 0 .9rem 2.5rem; border-top:1px solid var(--tx-linea); font-size:.9375rem; line-height:1.5 }
.puntos li:first-child{ border-top:0 }
.puntos li::before{ content:counter(pt, decimal-leading-zero); position:absolute; left:0; top:1.05rem; font-size:.75rem; color:var(--tx-3); font-variant-numeric:tabular-nums }

/* · las llaves: las etiquetas cuelgan de la caña, no encima de la cabeza */
.ps.-llaves .ps__e{ transform:translate(-50%, .875rem); width:9rem }
.ps.-llaves .ps__e::after{ top:-.75rem; bottom:auto }
.ps.-llaves .ps__e b{ font-size:var(--t5) }

@media (max-width:600px){
  .tp__f{ grid-template-columns:minmax(0,1fr) } .tp__nota{ grid-column:1 }
  .cm__cab{ display:none } .cm li{ grid-template-columns:minmax(0,1fr); gap:.375rem }
  .ps.-llaves .ps__e{ width:6rem } .ps.-llaves .ps__e b{ font-size:.8125rem }
}
/* medido en la captura: con el monocromo del blog, --acento es blanco y las dos barras salían iguales.
   Lo pagado va lleno; lo recibido, translúcido (sin meter color) */
.tp__b.-pagado i::after, .tp__ley .-pagado::before{ background:rgba(237,239,243,.92) }
.tp__b.-recibido i::after, .tp__ley .-recibido::before{ background:rgba(237,239,243,.3) }

/* ══ PULIDO (30-sep-2026, segunda pasada) ════════════════════════════════════════════════════════
   El botón del cierre es LA salida del artículo: lleno, como «Empezar» de la cabecera. El contorno lo
   dejaba al mismo peso que el enlace de WhatsApp de al lado. */
.art__cierre .boton{ background:var(--tx-1); border-color:var(--tx-1); color:#08090C }
.art__cierre .boton:hover{ background:rgba(237,239,243,.84); border-color:rgba(237,239,243,.84); color:#08090C }
.art__cierre .boton:focus-visible, .art__wa:focus-visible{ outline:1px solid var(--tx-1); outline-offset:4px }
/* el filete de las capturas va ENCIMA de la imagen: como sombra interior del contenedor quedaba debajo de la
   foto y la captura oscura del plan se fundía con la página, sin borde */
.gl__img, .mo__i{ position:relative }
.gl__img::after, .mo__i::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(237,239,243,.1) }
/* del cierre al «Sigue leyendo»: en teléfono eran ~300 px de vacío con una costura de cielo y dos filetes.
   Cada `.oscuro` pinta su propio cielo con una franja clara arriba (el «terminador»); por eso el artículo y la
   lista viven en UNA sola sección (`.art-pag`): un cielo, sin costura. */
.seccion.art-pag{ padding-top:0 }   /* `.seccion:first-of-type` (0,2,0) le ganaba a `.art-pag` sola */
.bl-mas{ margin-top:clamp(3.5rem,9vh,6rem) }
.bl-mas .bl-rejilla{ margin-top:clamp(1.75rem,4vh,2.75rem) }

/* la meta en tres piezas separadas por aire, no por «·»: en teléfono el punto quedaba colgado al final
   del renglón («…de 2026 ·» y abajo «7 min de lectura») */
.art__meta{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.25rem 1.25rem }
.art__meta span{ white-space:nowrap }
@media (max-width:899px){ .art__meta{ justify-content:flex-start } }

/* ══ LA PORTADA RESPIRA CON EL SCROLL (30-sep, paco: «el scroll de Cuberto, de otro nivel»)
   La foto va un poco más grande que su marco y se desliza más despacio que la página mientras la
   portada cruza la pantalla: el objeto se queda y el marco pasa. Atado al scroll, sólo transform y
   sólo donde hay línea de tiempo de vista; con movimiento reducido, quieta. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* `clip`, no `hidden`: `hidden` vuelve al marco un contenedor de scroll y `view()` mide contra ÉL
       (que no se mueve): la animación se quedó clavada en 50% (medido) */
    .art__portada{ overflow:clip; border-radius:clamp(.75rem,2vw,1.125rem) }
    .art__portada img{ border-radius:0; scale:1.08; animation:portada-respira 1ms linear both;
      animation-timeline:view(); animation-range:cover 0% cover 100% }
  }
}
@keyframes portada-respira{ from{ translate:0 -3.5% } to{ translate:0 3.5% } }