/* INVESTIGACIONES · motor compartido del índice (investigaciones.html) y de cada
   investigación (investigaciones/<slug>.html). Propuesta del 2026-10-29.
   Manual: audit/MARCA.md §18 (biblia) y §19; movimiento: audit/ANIMACIONES.md.
   Tokens, tonos, botón y búho copiados de ./index.html; lo nuevo es la familia
   de portadas generativas, el índice de la lectura, los gráficos y la escena. */

@font-face{ font-family:'DM Sans'; font-style:normal; font-display:swap; font-weight:400 700; src:url('../../fonts/dm-sans-variable.woff2') format('woff2'); }

:root{
  --vino:#A3122A;
  --rosa:#FF9EAE;
  --salmon:#FFD9D2;
  --coral:#A3122A;
  --tinta:#2A0A10;
  --papel:#FFF8F6;
  --arena:#EDE6E3;

  --topbar-height: 0px;
  --max-ancho: 1240px;
  --pad-x: clamp(16px, 5vw, 64px);
  --texto-ancho: 680px;          /* columna de lectura, edita aquí */
  --seccion: clamp(90px, 11vw, 150px);

  --resorte-suave:  cubic-bezier(.32, .72, 0, 1);    --dur-suave: .5s;
  --resorte-agil:   cubic-bezier(.25, .9, .3, 1.02); --dur-agil: .51s;
  --resorte-rebote: cubic-bezier(.3, 1.3, .5, 1);    --dur-rebote: .73s;
  --resorte-pulso:  cubic-bezier(.3, 1.6, .5, 1);    --dur-pulso: .47s;
  --dur-presion: .1s;

  --t-display: clamp(44px, 7vw, 104px);
  --t-titulo: clamp(38px, 5.4vw, 76px);
  --t-h2: clamp(28px, 3vw, 40px);
  --t-h3: clamp(21px, 1.8vw, 25px);
  --t-lead: clamp(17px, 1.35vw, 20px);

  --sombra-1: 0 1px 2px rgba(42,10,16,.06), 0 10px 30px rgba(42,10,16,.08);
  --sombra-2: 0 2px 6px rgba(42,10,16,.08), 0 30px 70px rgba(42,10,16,.20);

  --cambio-tono: .8s;
}
@supports (transition-timing-function: linear(0, 1)){
  :root{
    --resorte-suave:  linear(0, 0.177, 0.322, 0.443, 0.541, 0.622, 0.689, 0.744, 0.789, 0.827, 0.857, 0.882, 0.903, 0.92, 0.934, 0.946, 0.955, 0.963, 0.97, 0.975, 0.98, 0.983, 0.986, 0.989, 0.991, 0.992, 0.994, 0.995, 0.996, 0.996, 0.997, 0.998, 1);
    --resorte-agil:   linear(0, 0.027, 0.094, 0.183, 0.283, 0.384, 0.481, 0.57, 0.65, 0.72, 0.779, 0.829, 0.87, 0.903, 0.93, 0.951, 0.967, 0.979, 0.988, 0.994, 0.999, 1.002, 1.003, 1.005, 1.005, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1);
    --resorte-rebote: linear(0, 0.036, 0.124, 0.242, 0.372, 0.501, 0.621, 0.727, 0.816, 0.888, 0.944, 0.985, 1.014, 1.032, 1.042, 1.046, 1.045, 1.042, 1.037, 1.031, 1.025, 1.019, 1.014, 1.01, 1.006, 1.003, 1.001, 1, 0.999, 0.998, 0.998, 0.998, 1);
    --resorte-pulso:  linear(0, 0.042, 0.146, 0.285, 0.437, 0.586, 0.722, 0.838, 0.931, 1, 1.048, 1.078, 1.092, 1.095, 1.089, 1.078, 1.064, 1.05, 1.036, 1.024, 1.013, 1.005, 0.999, 0.995, 0.992, 0.991, 0.991, 0.992, 0.993, 0.994, 0.996, 0.997, 1);
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

/* Tonos (como la portada): cada bloque declara data-tono; el JS lo copia al body. */
body{
  --fondo: var(--papel);
  --fg: var(--tinta);
  --fg2: rgba(42,10,16,.72);
  --lectura: rgba(42,10,16,.84);
  --linea: rgba(42,10,16,.12);
  --senal: var(--vino);            /* indicador del índice y detalles chicos: sigue al tono */
  --bg: var(--fondo); --ink: var(--fg); --ink-soft: var(--fg2); --rule: var(--linea); --marca: var(--vino);
  font-family:'DM Sans', system-ui, sans-serif;
  background: var(--papel);
  color: var(--fg);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.fondos{ position:fixed; inset:-10vh 0; z-index:-1; pointer-events:none; }
.fondos__capa{ position:absolute; inset:0; opacity:0; will-change:opacity; transition: opacity var(--cambio-tono) var(--resorte-suave); }
.fondos__capa--vino{ background: var(--vino); }
.fondos__capa--salmon{ background: var(--salmon); }
.fondos__capa--tinta{ background: var(--tinta); }
body[data-tono="vino"] .fondos__capa--vino, body[data-tono="salmon"] .fondos__capa--salmon, body[data-tono="tinta"] .fondos__capa--tinta{ opacity:1; }
main{ color: var(--fg); transition: color .5s ease; }
body[data-tono="vino"]{ --fondo: var(--vino); --fg:#FFFFFF; --fg2: rgba(255,255,255,.86); --lectura: rgba(255,255,255,.92); --linea: rgba(255,255,255,.24); --senal:#FFFFFF; }
body[data-tono="tinta"]{ --fondo: var(--tinta); --fg:#FFFFFF; --fg2: rgba(255,255,255,.8); --lectura: rgba(255,255,255,.9); --linea: rgba(255,255,255,.16); --senal:#FFFFFF; }
body[data-tono="salmon"]{ --fondo: var(--salmon); --fg: var(--tinta); --fg2: rgba(42,10,16,.78); --lectura: rgba(42,10,16,.86); --linea: rgba(42,10,16,.14); }

.envase{ width: min(100% - 2 * var(--pad-x), var(--max-ancho)); margin-inline:auto; }
.solo-cuenta{ display:none !important; }
.mv-logueado .solo-cuenta{ display:inline-flex !important; }
.mv-logueado .solo-anon{ display:none !important; }

/* NAV: vidrio que sigue al tono */
.nav{
  background: rgba(255,248,246,.76);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: opacity .5s var(--resorte-suave), transform .6s var(--resorte-suave), border-color .3s ease, background-color .5s ease;
}
body[data-tono="vino"] .nav{ background: rgba(163,18,42,.82); }
body[data-tono="salmon"] .nav{ background: rgba(255,217,210,.82); }
body[data-tono="tinta"] .nav{ background: rgba(42,10,16,.78); }
.nav--scrolled{ border-bottom-color: var(--linea); }
.nav__links > li > a{ color: var(--fg); transition: color .5s ease, opacity .2s ease; }
.nav__dropdown, .nav__drawer{ --ink: var(--tinta); --ink-soft: rgba(42,10,16,.62); --bg: var(--papel); --fg: var(--tinta); color: var(--tinta); }
.nav .nav__cta{ border-radius:999px; border-color: var(--fg); background: transparent; color: var(--fg);
  transition: transform var(--dur-rebote) var(--resorte-rebote), padding-right .25s ease, background-color .4s ease, color .4s ease, border-color .4s ease; }
.nav .nav__cta--registro{ background: var(--fg) !important; color: var(--fondo); border-color: var(--fg); }
.nav .nav__cta:active{ transform: scale(.96); transition-duration: var(--dur-presion); }
body[data-tono="vino"] .nav__brand img, body[data-tono="tinta"] .nav__brand img{ filter: brightness(0) invert(1); }
.site-footer{ --foot-bg: var(--tinta); --foot-ink:#FFE9EC; --foot-ink-soft: rgba(255,233,236,.66); --foot-rule: rgba(255,255,255,.1); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{ outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; }
::selection{ background: var(--rosa); color: var(--tinta); }

/* BOTÓN (el de la portada: se hunde al tocar, flecha que se asoma) */
.boton{
  --b-bg: var(--tinta); --b-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 32px;
  border-radius:999px; background: var(--b-bg); color: var(--b-fg); border:0; cursor:pointer;
  font: 600 16px/1 'DM Sans', system-ui, sans-serif; text-decoration:none; white-space:nowrap;
  transition: transform var(--dur-rebote) var(--resorte-rebote), padding-right .25s ease, background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.boton:active{ transform: scale(.97); transition-duration: var(--dur-presion), .25s, .4s, .4s, .4s; }
.boton__flecha{ display:inline-flex; align-items:center; width:0; margin-left:0; overflow:hidden; transition: width .25s ease, margin-left .25s ease; }
.boton__flecha svg{ width:16px; height:16px; flex-shrink:0; opacity:0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease; }
.boton:hover, a:hover .boton{ padding-right:18px; }
.boton:hover .boton__flecha, a:hover .boton .boton__flecha{ width:16px; margin-left:8px; }
.boton:hover .boton__flecha svg, a:hover .boton .boton__flecha svg{ opacity:1; transform:none; }
.boton--fantasma{ --b-bg: transparent; --b-fg: var(--fg); box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton--fantasma:hover{ box-shadow: inset 0 0 0 1.5px var(--fg); }
.boton--blanco{ --b-bg:#fff; --b-fg: var(--vino); }
.boton--chico{ min-height:44px; padding:0 20px; font-size:15px; }
.boton--chico:hover{ padding-right:12px; }

.bajada{ font-size: var(--t-lead); line-height:1.5; color: var(--fg2); text-wrap:pretty; transition: color .5s ease; }

/* APARECER una sola vez (escalera de 60 ms con --i) */
.js [data-aparece]{ opacity:0; transform: translateY(18px);
  transition: opacity .6s var(--resorte-suave), transform .8s var(--resorte-suave);
  transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-aparece].visto{ opacity:1; transform:none; }

/* BÚHO: mira al cursor, parpadea, saluda con el casco */
.buho{ display:block; width:100%; height:auto; overflow:visible; }
.buho__pupila{ transition: transform .35s var(--resorte-agil); }
.buho__ojo{ transform-box: fill-box; transform-origin: center; }
.buho__ojo.parpadea{ animation: parpadeo .2s ease-in-out; }
@keyframes parpadeo{ 50%{ transform: scaleY(.08); } }
.buho__casco{ transform-box: fill-box; transform-origin: 15% 100%; transition: transform .6s var(--resorte-rebote); }
.buho--saluda .buho__casco{ transform: translateY(-5px) rotate(-12deg); }

/* META: categoría y fecha, igual en filas, tarjetas y cabecera */
.meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap: 4px 16px; font-size:14px; line-height:1.4; color: var(--fg2); }
.meta__cat{ color: var(--fg); font-weight:600; }
.meta time{ font-variant-numeric: tabular-nums; }


/* ═══ PORTADAS GENERATIVAS ═══════════════════════════════════════════════
   Cada investigación trae data-portada="lotes|skyline|curvas|puntos" y una
   semilla; el JS dibuja el SVG. Con datos reales, la portada se dibuja con la
   serie del estudio (data-serie) y deja de ser adorno. */
.portada{ position:relative; overflow:hidden; aspect-ratio: 3 / 2; border-radius: 30px; background: var(--salmon); isolation:isolate; }
.portada svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.portada--skyline{ background: var(--rosa); }
.portada--lotes{ background: var(--salmon); }
.portada--curvas{ background: var(--vino); }
.portada--puntos{ background: var(--tinta); }
/* Portada con imagen (img/investigaciones/<slug>/portada.webp, 3:2): la pone el índice que arma
   scripts/lib/investigaciones.mjs. Fondo tinta mientras carga. */
.portada--imagen{ background: var(--tinta); }
.portada--imagen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.js .portada .pz{ opacity:0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s var(--resorte-suave), transform .5s var(--resorte-rebote); transition-delay: calc(var(--k, 0) * 14ms); }
.js .portada .pz--barra{ transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--resorte-suave); transition-delay: calc(var(--k, 0) * 35ms); }
.js .portada .pz--trazo{ transform:none; opacity:1; stroke-dasharray: var(--largo); stroke-dashoffset: var(--largo); transition: stroke-dashoffset .8s var(--resorte-suave); transition-delay: calc(var(--k, 0) * 60ms); }
.js .portada.viva .pz{ opacity:1; transform:none; }
.js .portada.viva .pz--trazo{ stroke-dashoffset:0; }


/* ═══ ÍNDICE (investigaciones.html) ═══════════════════════════════════════ */
.inv-hero{ position:relative; padding: calc(var(--nav-height) + clamp(56px, 7vw, 104px)) 0 clamp(56px, 6vw, 88px); }
/* Papel cuadriculado de fondo: el idioma de cuadritos de la marca, apenas. */
.inv-hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: linear-gradient(rgba(42,10,16,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(42,10,16,.055) 1px, transparent 1px);
  background-size: 24px 24px;   /* tamaño del cuadrito, edita aquí */
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
}
.inv-hero__titulo{ font-size: var(--t-display); font-weight:700; letter-spacing:-.045em; line-height:.95; text-wrap:balance; text-align:center; }
.inv-hero .bajada{ max-width: 34em; margin-top: 24px; }

/* Barra de filtros: control segmentado con UNA pastilla que se desliza */
.inv-lista{ padding: clamp(80px, 9vw, 128px) 0 var(--seccion); }
.filtros{ display:flex; align-items:center; justify-content:space-between; gap: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--linea); }
.segmentado{ position:relative; display:flex; gap:2px; padding:4px; border-radius:999px; overflow-x:auto; scrollbar-width:none; max-width:100%; }
.segmentado::-webkit-scrollbar{ display:none; }
.segmentado__pastilla{ position:absolute; z-index:0; top:4px; bottom:4px; left:0; width: var(--w, 0px); transform: translateX(var(--x, 0px)); border-radius:999px; background:#fff; box-shadow: 0 1px 2px rgba(42,10,16,.08), 0 4px 12px rgba(42,10,16,.08);
  transition: transform var(--dur-agil) var(--resorte-agil), width var(--dur-agil) var(--resorte-agil); }
.segmentado button{ position:relative; z-index:1; flex-shrink:0; min-height:40px; padding: 0 18px; border:0; background:none; border-radius:999px; cursor:pointer;
  font: 500 15px/1 'DM Sans', system-ui, sans-serif; color: var(--fg2); transition: color .25s ease; }
.segmentado button[aria-pressed="true"]{ color: var(--tinta); font-weight:600; }
.segmentado button:hover{ color: var(--fg); }
.vistas{ display:flex; gap:4px; flex-shrink:0; }
.vistas button{ width:44px; height:44px; display:grid; place-items:center; border:0; background:none; border-radius:12px; cursor:pointer; color: var(--fg2); opacity:.55; transition: opacity .2s ease, background-color .2s ease; }
.vistas button svg{ width:20px; height:20px; }
.vistas button[aria-pressed="true"]{ opacity:1; color: var(--fg); }
.vistas button:hover{ background: rgba(42,10,16,.05); opacity:1; }
.vistas button:active{ transform: scale(.9); }

/* Filas (vista lista) */
.coleccion{ transition: opacity .2s ease, transform .3s var(--resorte-suave); }
.coleccion.cambia{ opacity:0; transform: translateY(6px); }
.ficha{ text-decoration:none; color: var(--fg); }
.ficha.fuera{ display:none; }
.coleccion[data-vista="lista"] .ficha{
  display:grid; grid-template-columns: 220px minmax(0, 1fr) 176px; gap: 24px 48px; align-items:start;
  padding: 36px 0; border-bottom: 1px solid var(--linea);
}
.ficha__titulo{ font-size: var(--t-h3); font-weight:700; letter-spacing:-.03em; line-height:1.2; text-wrap:balance; max-width: 30em; }
.ficha__flecha{ display:inline-block; width:.8em; height:.8em; margin-left:.25em; vertical-align:-.04em; opacity:0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.ficha:hover .ficha__flecha, .ficha:focus-visible .ficha__flecha{ opacity:1; transform:none; }
.ficha__resumen{ margin-top: 12px; color: var(--fg2); font-size:16px; line-height:1.55; max-width: 38em; text-wrap:pretty; }
/* Meta de la fila: al centro de su columna, en los dos ejes; la fecha manda (Mateo, 2026-10-30) */
.coleccion[data-vista="lista"] .meta{ flex-direction:column; align-self:center; align-items:center; justify-content:center; gap: 6px; text-align:center; }
.coleccion[data-vista="lista"] .meta time{ order:-1; font-size: clamp(22px, 1.9vw, 28px); font-weight:700; letter-spacing:-.025em; line-height:1.1; color: var(--fg); }
.coleccion[data-vista="lista"] .meta__cat{ font-weight:500; color: var(--fg2); }
.coleccion[data-vista="lista"] .ficha .portada{ border-radius: 18px; }
.ficha:active{ transform: scale(.99); }

/* Tarjetas (vista cuadrícula) */
.coleccion[data-vista="cuadricula"]{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; padding-top: 44px; }
.coleccion[data-vista="cuadricula"] .ficha{ display:flex; flex-direction:column; }
.coleccion[data-vista="cuadricula"] .ficha .portada{ order:-1; margin-bottom: 20px; }
.coleccion[data-vista="cuadricula"] .ficha__resumen{ display:none; }
.coleccion[data-vista="cuadricula"] .ficha__texto{ margin-top: 10px; }
.coleccion[data-vista="cuadricula"] .ficha__titulo{ font-size: 21px; }

.js .coleccion .ficha{ animation: entra-ficha .45s var(--resorte-suave) both; animation-delay: calc(var(--n, 0) * 30ms); }
@keyframes entra-ficha{ from{ opacity:0; transform: translateY(8px); } }



/* ═══ UNA INVESTIGACIÓN (investigaciones/<slug>.html) ══════════════════════════════ */
.art-cab{ padding: calc(var(--nav-height) + clamp(56px, 7vw, 96px)) 0 clamp(48px, 5vw, 72px); text-align:center; }
.art-cab .meta{ justify-content:center; gap: 6px 20px; font-size:15px; }
.art-cab .meta a{ color: var(--fg2); text-decoration:none; transition: color .2s ease; }
.art-cab .meta a:hover{ color: var(--fg); }
.art-cab__titulo{ margin: 28px auto 0; max-width: 15em; font-size: var(--t-titulo); font-weight:700; letter-spacing:-.045em; line-height:1; text-wrap:balance; }
.art-cab .bajada{ margin: 24px auto 0; max-width: 34em; }
.art-cab__barra{ display:flex; align-items:center; justify-content:space-between; gap: 16px; max-width: var(--texto-ancho); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--linea); text-align:left; font-size:15px; color: var(--fg2); }
.art-cab__barra strong{ color: var(--fg); font-weight:600; }

.copiar{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 4px; border:0; background:none; cursor:pointer; font: 600 15px/1 'DM Sans', system-ui, sans-serif; color: var(--fg); }
.copiar svg{ width:18px; height:18px; flex-shrink:0; }
.copiar .copiar__ok{ display:none; }
.copiar.hecho .copiar__icono{ display:none; }
.copiar.hecho .copiar__ok{ display:block; }
.copiar__ok path{ stroke-dasharray: 20; stroke-dashoffset: 20; }
.copiar.hecho .copiar__ok path{ animation: trazar .4s var(--resorte-suave) forwards; }
@keyframes trazar{ to{ stroke-dashoffset:0; } }
.copiar:active{ transform: scale(.96); }

/* Figura de portada: ancha, sobre bloque rosa girado */
.art-figura{ position:relative; margin-bottom: clamp(72px, 9vw, 120px); }
.art-figura .portada{ position:relative; aspect-ratio: 21 / 9; border-radius: 34px; box-shadow: var(--sombra-2); }

/* Retícula de lectura: índice a la izquierda, texto al centro, aire a la derecha.
   Lo ancho (.ancho) se sale hacia la derecha: texto + margen. */
.art{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--texto-ancho)) minmax(0, 1fr); column-gap: 0; }
/* Aire antes del pie cuando la investigación es lo último (sin "Más investigaciones", que trae el suyo) */
main > article:last-child{ padding-bottom: var(--seccion); }
.art__indice{ grid-column:1; padding-right: 48px; }
.art__cuerpo{ grid-column: 2 / 4; display:flex; flex-direction:column; }
.bloque{ width: 100%; max-width: var(--texto-ancho); }
.bloque.ancho{ max-width:none; }

/* Índice: pista fina y UNA marca que se desliza a la sección que lees */
.indice{ position:sticky; top: calc(var(--nav-height) + 40px); max-width: 220px; }
.indice__titulo{ font-size:13px; font-weight:600; color: var(--fg2); margin-bottom: 14px; }
.indice ol{ position:relative; list-style:none; padding-left: 16px; }
.indice ol::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:1.5px; background: var(--linea); border-radius:2px; }
.indice__marca{ position:absolute; left:0; top:0; width:2px; height: var(--h, 20px); transform: translateY(var(--y, 0px)); background: var(--senal); border-radius:2px;
  transition: transform var(--dur-agil) var(--resorte-agil), height var(--dur-agil) var(--resorte-agil), background-color .5s ease; }
.indice a{ display:block; padding: 7px 0; color: var(--fg2); text-decoration:none; font-size:14px; line-height:1.35; transition: color .2s ease; }
.indice a.sub{ padding-left: 14px; font-size:13px; }
.indice a:hover{ color: var(--fg); }
.indice a.activo{ color: var(--fg); font-weight:600; }

/* Texto de lectura */
.prosa{ font-size: 18px; line-height:1.72; color: var(--lectura); }
.prosa > * + *{ margin-top: 1.1em; }
.prosa p{ text-wrap: pretty; transition: color .5s ease; }
.prosa h2{ margin-top: 2.6em; font-size: var(--t-h2); line-height:1.08; letter-spacing:-.035em; font-weight:700; color: var(--fg); text-wrap:balance; scroll-margin-top: calc(var(--nav-height) + 32px); }
.prosa h3{ margin-top: 2em; font-size: var(--t-h3); line-height:1.2; letter-spacing:-.03em; font-weight:700; color: var(--fg); text-wrap:balance; scroll-margin-top: calc(var(--nav-height) + 32px); }
.prosa h2 + p, .prosa h3 + p{ margin-top: .7em; }
.prosa .entrada{ font-size: clamp(20px, 1.6vw, 23px); line-height:1.55; color: var(--fg); letter-spacing:-.01em; }
.prosa a:not(.nota-ref){ color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; }
.prosa a:not(.nota-ref):hover{ text-decoration-color: currentColor; }
.prosa strong{ color: var(--fg); font-weight:600; }
.prosa ul{ padding-left: 1.2em; }
.prosa li + li{ margin-top: .5em; }
.prosa li::marker{ color: var(--fg2); }
.bloque:first-child .prosa > h2:first-child{ margin-top:0; }

/* Notas: número volado que abre un globito con la fuente */
.nota-ref{ display:inline-grid; place-items:center; min-width: 20px; height:20px; padding: 0 5px; margin-left: 2px; border-radius:999px; vertical-align: 2px;
  background: rgba(42,10,16,.07); color: var(--fg); font-size:12px; font-weight:600; line-height:1; text-decoration:none; font-variant-numeric: tabular-nums; transition: background-color .2s ease, color .2s ease; }
.nota-ref:hover, .nota-ref:focus-visible{ background: var(--tinta); color:#fff; }
.nota-pop{ position:fixed; z-index:60; max-width: 320px; padding: 14px 16px; border-radius: 16px; font-size:14px; line-height:1.5; pointer-events:none;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sombra-2); color: var(--tinta); opacity:0; transform: translateY(4px) scale(.98); transition: opacity .18s ease, transform .3s var(--resorte-suave); }
.nota-pop.ver{ opacity:1; transform:none; }

/* Cifras: dos teselas de salmón */
.cifras{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 56px 0 8px; }
.cifra{ background: var(--salmon); border-radius: 30px; padding: 36px 30px 30px; color: var(--tinta); }
.cifra__valor{ font-size: clamp(48px, 5vw, 68px); font-weight:700; letter-spacing:-.045em; line-height:1; font-variant-numeric: tabular-nums; }
.cifra__valor small{ font-size:.45em; letter-spacing:-.02em; margin-left:.1em; }
.cifra__texto{ margin-top: 16px; font-size:16px; line-height:1.45; font-weight:500; }
.cifra__nota{ margin-top: 8px; font-size:13px; color: rgba(42,10,16,.72); }

/* Tarjeta blanca de datos (gráfico, simulador, tabla): redefine sus colores
   para no heredar el blanco del tono vino (§18.11). */
.tarjeta{ --fg: var(--tinta); --fg2: rgba(42,10,16,.72); --linea: rgba(42,10,16,.12); color: var(--fg);
  background:#fff; border-radius: 32px; box-shadow: var(--sombra-1); padding: clamp(22px, 3vw, 40px); }
.figura{ margin: 64px 0 16px; }
.figura__cab{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: 14px 24px; }
.figura__titulo{ font-size: 19px; font-weight:700; letter-spacing:-.02em; line-height:1.3; max-width: 28em; }
.figura__pie{ margin-top: 20px; font-size: 13px; color: var(--fg2); line-height:1.5; }

/* Leyenda que también filtra: el color sigue a la serie, nunca a su orden */
.leyenda{ display:flex; flex-wrap:wrap; gap: 6px; }
.leyenda button{ display:inline-flex; align-items:center; gap: 8px; min-height:36px; padding: 0 14px 0 12px; border-radius:999px; border:0; cursor:pointer;
  background: rgba(42,10,16,.05); font: 500 14px/1 'DM Sans', system-ui, sans-serif; color: var(--tinta); transition: opacity .2s ease, background-color .2s ease; }
.leyenda button[aria-pressed="false"]{ opacity:.45; }
.leyenda button:hover{ background: rgba(42,10,16,.09); }
.leyenda i{ width:16px; height:3px; border-radius:2px; background: var(--c); }

/* Gráfico de líneas */
.linea{ position:relative; margin-top: 28px; touch-action: pan-y; }
.linea svg{ display:block; width:100%; height:auto; overflow:visible; }
.linea .rejilla line{ stroke: rgba(42,10,16,.09); stroke-width:1; }
.linea .eje text{ fill: rgba(42,10,16,.62); font: 500 12px 'DM Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.linea .serie{ fill:none; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; transition: opacity .3s ease; }
.linea .area{ transition: opacity .3s ease; }
.linea .serie.oculta, .linea .area.oculta, .linea .fin.oculta{ opacity:0; }
.linea .fin text{ font: 600 13px 'DM Sans', system-ui, sans-serif; fill: var(--tinta); }
.linea .guia{ stroke: rgba(42,10,16,.28); stroke-width:1; opacity:0; transition: opacity .15s ease; }
.linea .punto{ stroke:#fff; stroke-width:2; opacity:0; transition: opacity .15s ease; }
.linea.mira .guia, .linea.mira .punto:not(.oculta){ opacity:1; }
.js .linea .serie{ stroke-dasharray: var(--largo); stroke-dashoffset: var(--largo); }
.js .linea.dibujada .serie{ stroke-dashoffset:0; transition: stroke-dashoffset .8s var(--resorte-suave), opacity .3s ease; }
.js .linea .area{ opacity:0; }
.js .linea.dibujada .area{ opacity:1; transition: opacity .6s ease .5s; }
.js .linea.dibujada .area.oculta{ opacity:0; }
.globo{ position:absolute; top:0; left:0; z-index:2; min-width: 150px; padding: 12px 14px; border-radius: 14px; pointer-events:none;
  background: var(--tinta); color:#fff; font-size: 13px; line-height:1.4; box-shadow: var(--sombra-2);
  opacity:0; transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(.97); transition: opacity .15s ease; }
.linea.mira .globo{ opacity:1; transform: translate(var(--gx, 0px), var(--gy, 0px)); }
.globo__mes{ font-weight:600; margin-bottom: 6px; }
.globo__fila{ display:flex; align-items:center; gap: 8px; justify-content:space-between; }
.globo__fila span{ display:inline-flex; align-items:center; gap:6px; color: rgba(255,255,255,.78); }
.globo__fila i{ width:8px; height:8px; border-radius:50%; background: var(--c); box-shadow: 0 0 0 1.5px #fff; }
.globo__fila b{ font-weight:600; font-variant-numeric: tabular-nums; }

/* Ver los datos (tabla del gráfico) */
.datos{ margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 14px; }
.datos summary{ display:inline-flex; align-items:center; gap:8px; min-height:36px; cursor:pointer; list-style:none; font-size:14px; font-weight:600; color: var(--tinta); }
.datos summary::-webkit-details-marker{ display:none; }
.datos summary svg{ width:14px; height:14px; transition: transform .3s var(--resorte-agil); }
.datos [open] > summary svg{ transform: rotate(90deg); }
.datos__fila details{ flex: 1 1 auto; min-width:0; }
.datos__fila .bajar{ align-self:flex-start; }
.tabla-envase{ overflow-x:auto; margin-top: 10px; }
.tabla{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.4; color: rgba(42,10,16,.84); }
.tabla th, .tabla td{ padding: 12px 14px 12px 0; border-top: 1px solid var(--linea); text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums; }
.tabla th:first-child, .tabla td:first-child{ text-align:left; }
.tabla thead th{ white-space:normal; vertical-align:bottom; border-top:0; font-weight:600; color: var(--tinta); font-size:13px; }
.tabla tbody th{ font-weight:600; color: var(--tinta); }

/* ESCENA: el gráfico queda fijo y los pasos pasan a su lado (scrollytelling) */
.escena{ display:grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); margin: clamp(40px, 6vw, 88px) 0; }
.escena__pasos{ padding: 30vh 0 40vh; }
.paso{ min-height: 62vh; display:flex; align-items:center; }
.paso:last-child{ min-height: 40vh; }
.paso__texto{ font-size: 18px; line-height:1.6; color: var(--lectura); opacity:.75; transition: opacity .4s ease; text-wrap:pretty; }   /* .75 = 5,1:1 sobre salmón; menos baja de 4,5 */
.paso__texto strong{ color: var(--fg); font-weight:600; }
.paso.activo .paso__texto{ opacity:1; }
.escena__grafico{ position:sticky; top: calc(var(--nav-height) + max(24px, (100svh - var(--nav-height) - 560px) / 2)); align-self:start; }
.escena__lamina{ position:relative; }
.escena__bloque{ position:absolute; inset: 5% -3% -4% 6%; background: var(--vino); border-radius: 44px; transform: rotate(-4deg); }
.escena .tarjeta{ position:relative; padding: clamp(18px, 2.4vw, 30px); }
.edificio svg{ display:block; width:100%; height:auto; max-height: min(52svh, 440px); margin-inline:auto; }
.edificio__cuerpo{ fill: var(--arena); }
.edificio__techo, .edificio__piso{ stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; fill:none; }
.edificio__puerta{ fill: var(--tinta); fill-opacity:.85; }
.unidad{ fill:#fff; stroke: rgba(42,10,16,.22); stroke-width:1; transition: fill .35s ease, stroke .35s ease; transition-delay: calc(var(--k, 0) * 5ms); }
.unidad.t-vino{ fill: var(--vino); stroke: var(--vino); }
.unidad.t-rosa{ fill: var(--rosa); stroke: rgba(42,10,16,.6); }
.unidad.t-tinta{ fill: var(--tinta); stroke: var(--tinta); }
.estados{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 18px; }
.estado{ padding: 12px 12px 10px; border-radius: 16px; background: rgba(42,10,16,.04); transition: opacity .3s ease; }
.estado__nombre{ display:flex; align-items:center; gap: 7px; font-size:13px; color: rgba(42,10,16,.72); }
.estado__nombre i{ width:10px; height:10px; border-radius:3px; background:#fff; box-shadow: inset 0 0 0 1px rgba(42,10,16,.25); flex-shrink:0; }
.estado__num{ display:block; margin-top: 4px; font-size: 26px; font-weight:700; letter-spacing:-.03em; font-variant-numeric: tabular-nums; }
.estado__nombre .sw-vino{ background: var(--vino); }
.estado__nombre .sw-rosa{ background: var(--rosa); }
.estado__nombre .sw-tinta{ background: var(--tinta); }
.estado__num.salta{ animation: salta var(--dur-pulso) var(--resorte-pulso); }
@keyframes salta{ from{ transform: scale(.6); } }

/* Hallazgo: la frase que hay que llevarse, sobre vino */
.hallazgo{ padding: clamp(90px, 10vw, 140px) 0; }
.hallazgo blockquote{ font-size: clamp(30px, 3.6vw, 50px); line-height:1.12; letter-spacing:-.035em; font-weight:700; color: var(--fg); text-wrap:balance; max-width: 18em; }
.hallazgo blockquote::before{ content:''; display:block; width: 56px; height: 6px; border-radius: 3px; background: var(--rosa); margin-bottom: 32px; }

/* Simulador: deslizadores que recalculan la cifra */
.simulador{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items:center; margin-top: 28px; }
.control + .control{ margin-top: 26px; }
.control__cab{ display:flex; justify-content:space-between; align-items:baseline; gap: 12px; font-size:14px; color: rgba(42,10,16,.72); }
.control__cab output{ font-size: 16px; font-weight:600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.control input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height: 28px; margin-top: 8px; background:none; cursor:pointer; --p: 50%; }
.control input[type="range"]::-webkit-slider-runnable-track{ height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--tinta) var(--p), rgba(42,10,16,.12) var(--p)); }
.control input[type="range"]::-moz-range-track{ height: 6px; border-radius: 999px; background: rgba(42,10,16,.12); }
.control input[type="range"]::-moz-range-progress{ height: 6px; border-radius: 999px; background: var(--tinta); }
.control input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width: 26px; height: 26px; margin-top: -10px; border-radius:50%; background:#fff; box-shadow: 0 0 0 1px rgba(42,10,16,.1), 0 2px 8px rgba(42,10,16,.22); transition: transform .3s var(--resorte-rebote); }
.control input[type="range"]::-moz-range-thumb{ width: 26px; height: 26px; border:0; border-radius:50%; background:#fff; box-shadow: 0 0 0 1px rgba(42,10,16,.1), 0 2px 8px rgba(42,10,16,.22); }
.control input[type="range"]:active::-webkit-slider-thumb{ transform: scale(1.12); }
.resultado{ padding: 28px; border-radius: 24px; background: var(--salmon); }
.resultado__rotulo{ font-size:14px; color: rgba(42,10,16,.72); }
.resultado__cifra{ margin-top: 6px; font-size: clamp(40px, 4.4vw, 60px); font-weight:700; letter-spacing:-.045em; line-height:1; font-variant-numeric: tabular-nums; }
/* Barra partida: capital (tinta) e intereses (vino) con un corte de 2 px; solo transform */
.reparto{ position:relative; height: 12px; margin-top: 24px; border-radius: 4px; overflow:hidden; background: var(--vino); --a: .7; }
.reparto span{ position:absolute; inset:0; transition: transform .45s var(--resorte-suave); }
.reparto__capital{ background: var(--tinta); transform-origin: 0 50%; transform: scaleX(var(--a)); }
.reparto__corte{ transform: translateX(calc(var(--a) * 100%)); }
.reparto__corte::before{ content:''; position:absolute; left:-1px; top:0; bottom:0; width:2px; background: var(--salmon); }
.reparto-leyenda{ display:flex; justify-content:space-between; gap: 12px; margin-top: 10px; font-size:13px; color: rgba(42,10,16,.72); }
.reparto-leyenda b{ color: var(--tinta); font-weight:600; font-variant-numeric: tabular-nums; }
.reparto-leyenda i{ display:inline-block; width:8px; height:8px; border-radius:2px; background: var(--c); margin-right:6px; }

/* Notas y fuentes, cómo citar */
.notas{ margin-top: 20px; padding-left: 1.4em; font-size: 15px; line-height:1.6; color: var(--fg2); }
.notas li + li{ margin-top: 10px; }
.notas li::marker{ font-variant-numeric: tabular-nums; color: var(--fg); font-weight:600; }
.notas li:target{ color: var(--fg); }
.notas a.volver{ margin-left: 4px; color: var(--fg); text-decoration:none; }
.citar{ margin-top: 56px; padding: 26px 28px; border-radius: 22px; background: rgba(42,10,16,.045); }
.citar__cab{ display:flex; justify-content:space-between; align-items:center; gap: 12px; }
.citar__cab h3{ font-size: 16px; font-weight:600; letter-spacing:-.01em; }
.citar p{ margin-top: 10px; font-size: 14px; line-height:1.6; color: var(--fg2); }

/* Más investigaciones */
.relacionadas{ padding: var(--seccion) 0; }
.relacionadas__cab{ display:flex; justify-content:space-between; align-items:flex-end; gap: 16px; margin-bottom: 40px; }
.relacionadas__cab h2{ font-size: var(--t-h2); letter-spacing:-.035em; line-height:1.05; font-weight:700; }
.relacionadas__cab a{ font-weight:600; color: var(--fg); text-decoration:none; white-space:nowrap; }
.relacionadas .coleccion{ padding-top:0; }


/* Lo principal: los hallazgos en una lista con divisores, la cifra en tinta */
.prosa .claves{ padding-left:0; }
.claves{ list-style:none; margin-top: 8px; border-top: 1px solid var(--linea); }
.claves li{ padding: 18px 0; border-bottom: 1px solid var(--linea); font-size: 17px; line-height:1.55; color: var(--lectura); text-wrap: pretty; }
.claves li + li{ margin-top:0; }
.claves strong{ color: var(--fg); font-weight:700; }

/* Detalle del globo (el valor en su unidad original) y línea base del índice */
.globo__det{ margin: -2px 0 6px 14px; font-size: 12px; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
.globo__det:last-child{ margin-bottom:0; }
.linea .base{ stroke: var(--tinta); stroke-opacity:.4; stroke-width:1; stroke-dasharray: 4 4; }

/* Pie de figura con "Ver los datos" y la descarga del CSV en la misma fila */
.datos__fila{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 8px 16px; }
.bajar{ display:inline-flex; align-items:center; gap: 8px; min-height:36px; padding: 0 14px; border:0; border-radius:999px; cursor:pointer;
  background: rgba(42,10,16,.05); font: 600 13px/1 'DM Sans', system-ui, sans-serif; color: var(--tinta); transition: background-color .2s ease; }
.bajar svg{ width:14px; height:14px; }
.bajar:hover{ background: rgba(42,10,16,.09); }
.bajar:active{ transform: scale(.96); }

/* Barras horizontales: crecen desde la izquierda (scaleX), el valor las sigue */
.barras{ position:relative; margin-top: 28px; }
.barras__fila{ display:grid; grid-template-columns: 112px minmax(0, 1fr); align-items:center; gap: 16px; min-height: 40px; }
.barras__fila + .barras__fila{ margin-top: 6px; }
.barras__nombre{ font-size: 14px; font-weight:500; color: var(--tinta); }
.barras__pista{ position:relative; height: 26px; }
.barras__barra{ position:absolute; left:0; top:3px; bottom:3px; width:100%; border-radius: 0 4px 4px 0; background: rgba(42,10,16,.82);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--resorte-suave); transition-delay: calc(var(--i, 0) * 60ms); }
.barras__barra--destaca{ background: var(--vino); }
.barras__valor{ position:absolute; top:50%; left: calc(var(--v) * 100%); margin-left: 10px; transform: translateY(-50%); font-size: 13px; font-weight:600; color: var(--tinta); font-variant-numeric: tabular-nums; white-space:nowrap;
  opacity:0; transition: opacity .3s ease .5s; }
.barras.dibujada .barras__barra{ transform: scaleX(var(--v)); }
.barras.dibujada .barras__valor{ opacity:1; }
.barras__ref{ position:absolute; top:-6px; bottom:-6px; left: calc(112px + 16px + (100% - 128px) * var(--v)); width:0; border-left: 1.5px dashed rgba(42,10,16,.45); pointer-events:none; }
.barras__ref span{ position:absolute; bottom: 100%; left:0; transform: translate(-50%, -4px); font-size: 12px; font-weight:600; color: rgba(42,10,16,.72); white-space:nowrap; }
.barras-envase{ padding-top: 22px; }

/* De cada 10: pictograma de unidades; la fracción se pinta una vez al aparecer */
.diez{ display:grid; gap: 0; margin-top: 8px; }
.diez__fila{ display:grid; grid-template-columns: minmax(0, 1fr) auto; align-items:center; gap: 12px 28px; padding: 22px 0; border-top: 1px solid var(--linea); }
.diez__fila:last-child{ border-bottom: 1px solid var(--linea); }
.diez__texto{ font-size: 16px; line-height:1.5; color: rgba(42,10,16,.84); text-wrap: pretty; }
.diez__texto strong{ display:block; font-size: 26px; letter-spacing:-.03em; line-height:1.1; color: var(--tinta); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.diez__puntos{ display:flex; gap: 6px; }
.diez i{ width: 18px; height: 18px; border-radius:50%; box-shadow: inset 0 0 0 1.5px rgba(42,10,16,.3);
  background: linear-gradient(90deg, var(--vino) calc(var(--f, 0) * 100%), transparent 0); transform: scale(.6); opacity:.4;
  transition: transform .45s var(--resorte-rebote), opacity .3s ease; transition-delay: calc(var(--k, 0) * 40ms); }
html:not(.js) .diez i, .diez__fila.visto i{ transform:none; opacity:1; }

/* Comparador de precios: dos barras que se reparten el ancho según el costo */
.comparador{ display:grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items:center; margin-top: 28px; }
.cmp__fila + .cmp__fila{ margin-top: 22px; }
.cmp__cab{ display:flex; justify-content:space-between; align-items:baseline; gap: 12px; font-size: 14px; color: rgba(42,10,16,.72); }
.cmp__cab output{ font-size: 22px; font-weight:700; letter-spacing:-.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cmp__pista{ position:relative; height: 14px; margin-top: 10px; border-radius: 4px; background: rgba(42,10,16,.06); overflow:hidden; }
.cmp__barra{ position:absolute; inset:0; transform-origin: 0 50%; transform: scaleX(var(--v, 0)); transition: transform .45s var(--resorte-suave); }
.cmp__barra--a{ background: rgba(42,10,16,.82); }
.cmp__barra--b{ background: var(--vino); }
.cmp__lectura{ margin-top: 22px; font-size: 16px; font-weight:600; color: var(--tinta); }

/* Tabla de lectura: problema medido → lo que hace el sistema */
.tabla--lectura td, .tabla--lectura th{ white-space:normal; text-align:left; vertical-align:top; line-height:1.5; padding-right: 20px; }
.tabla--lectura tbody th{ width: 44%; font-weight:600; }
.tabla--lectura td:last-child, .tabla--lectura th:last-child{ padding-right:0; }

/* MAPA DEL PERÚ EN CUADRITOS (portada): tinta como cielo de noche, la luz son las compras.
   Rampa de un solo tono, de oscuro a claro: vino → rosa → blanco (Lima). */
.portada-peru{ background: var(--tinta); padding: clamp(56px, 7vw, 104px) 0; margin-bottom: clamp(72px, 9vw, 120px); }
.mapa-peru{
  --m0: rgba(255,255,255,.11); --m1: #A3122A; --m2: #C24156; --m3: #E06F82; --m4: #FF9EAE; --m5: #FFFFFF;   /* colores de la rampa, edita aquí */
  --fg:#fff; --fg2: rgba(255,255,255,.72); --linea: rgba(255,255,255,.16);
  position:relative; display:grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); align-items:center; gap: clamp(24px, 4vw, 56px); color:#fff;
}
.mapa-peru__titulo{ font-size: clamp(22px, 2.2vw, 30px); font-weight:700; letter-spacing:-.03em; line-height:1.12; text-wrap:balance; max-width: 13em; }
.mapa-peru .segmentado{ margin-top: 24px; width:max-content; max-width:100%; }
.mapa-peru .segmentado button{ color: rgba(255,255,255,.74); font-size:14px; min-height:38px; padding: 0 16px; }
.mapa-peru .segmentado button:hover{ color:#fff; }
.mapa-peru .segmentado button[aria-pressed="true"]{ color: var(--tinta); }
.mapa-peru__cien{ display:grid; grid-template-columns: repeat(10, 14px); gap: 4px; margin-top: 28px; }
.mapa-peru__cien i{ width:14px; height:14px; border-radius: 3px; background: var(--m0); transition: background-color .35s ease; }
.mapa-peru[data-modo="compra"] .mapa-peru__cien .es-resto{ background: var(--m4); }
.mapa-peru .mapa-peru__cien .es-lima{ background: var(--m5); }
.mapa-peru.barre .mapa-peru__cien i{ transition-delay: calc(var(--k, 0) * 7ms); }
.mapa-peru__reparto{ display:flex; flex-wrap:wrap; gap: 6px 20px; margin-top: 16px; font-size: 14px; color: var(--fg2); }
.mapa-peru__reparto span{ display:inline-flex; align-items:center; gap: 8px; }
.mapa-peru__reparto i{ width:10px; height:10px; border-radius:3px; background: var(--c); }
.mapa-peru__reparto b{ color:#fff; font-weight:600; font-variant-numeric: tabular-nums; }
.mapa-peru__escala{ display:flex; align-items:center; gap: 4px; margin-top: 24px; font-size: 12px; color: var(--fg2); }
.mapa-peru__escala i{ width:14px; height:10px; border-radius: 2px; background: var(--c); }
.mapa-peru__escala span:first-child{ margin-right: 6px; }
.mapa-peru__escala span:last-child{ margin-left: 6px; }
.mapa-peru__fuente{ margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.6); }
.mapa-peru__lienzo{ position:relative; width:100%; max-width: 600px; margin-left:auto; aspect-ratio: var(--ar, 1); touch-action: pan-y; }
.mapa-peru__lienzo::before{ content:''; position:absolute; inset:0; pointer-events:none;   /* papel cuadriculado que se desvanece: el mapa queda libre */
  background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: var(--paso) var(--paso);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.mapa-peru__lienzo canvas, .mapa-peru__lienzo svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mapa-peru__lienzo svg{ overflow:visible; pointer-events:none; }

.mapa-peru .etq line{ stroke: rgba(255,255,255,.4); stroke-width:.12; }
.mapa-peru .etq circle{ fill:#fff; }
.mapa-peru .etq__nombre{ font: 600 2.4px 'DM Sans', system-ui, sans-serif; fill:#fff; }
.mapa-peru .etq__dato{ font: 500 2.1px 'DM Sans', system-ui, sans-serif; fill: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.mapa-peru .etq{ opacity:0; transition: opacity .5s ease; }
.mapa-peru.viva .etq--lima, .mapa-peru.viva[data-modo="compra"] .etq{ opacity:1; }
.mapa-peru.viva[data-modo="compra"] .etq:not(.etq--lima){ transition-delay: .7s; }
.mapa-peru__globo{ position:absolute; top:0; left:0; z-index:3; display:grid; gap:2px; padding: 10px 14px; border-radius: 12px; pointer-events:none;
  background:#fff; color: var(--tinta); font-size: 13px; line-height:1.35; box-shadow: var(--sombra-2);
  opacity:0; transform: translate(var(--gx, 0px), var(--gy, 0px)); transition: opacity .15s ease; }
.mapa-peru__globo b{ font-weight:700; }
.mapa-peru__globo span{ color: rgba(42,10,16,.72); font-variant-numeric: tabular-nums; }
.mapa-peru__globo.ver{ opacity:1; }

/* LO QUE MEDIMOS EN MODERNIVA: cuadritos libres sobre papel, el mismo idioma del mapa de la portada.
   Cada cuadrito es una persona, un mensaje o un día (MARCA.md §21.51). */
.medido{
  --m0: rgba(42,10,16,.07); --m1: #FF9EAE; --m2: #E06F82; --m3: #C24156; --m4: #A3122A; --m5: #2A0A10;   /* rampa del calendario, edita aquí */
  position:relative;
}
.medido .figura__cab{ align-items:flex-end; }
.medido .figura__titulo{ max-width: 22em; }
.medido__grande{ display:flex; align-items:flex-end; gap: 14px; }
.medido__grande b{ font-size: clamp(64px, 8vw, 112px); font-weight:700; letter-spacing:-.055em; line-height:.82; font-variant-numeric: tabular-nums; }
.medido__grande b small{ font-size:.42em; letter-spacing:-.02em; margin-left:.06em; }
.medido__grande > span{ max-width: 10em; padding-bottom: 4px; font-size: 15px; line-height:1.35; color: var(--fg2); }
.medido .hueco{ background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(42,10,16,.5); }
.medido__globo{ position:absolute; top:0; left:0; z-index:3; display:grid; gap:2px; padding: 10px 14px; border-radius: 12px; pointer-events:none;
  background:#fff; color: var(--tinta); font-size: 13px; line-height:1.35; box-shadow: var(--sombra-2); white-space:nowrap;
  opacity:0; transform: translate(var(--gx, 0px), var(--gy, 0px)); transition: opacity .15s ease; }
.medido__globo b{ font-weight:700; }
.medido__globo span{ color: rgba(42,10,16,.72); font-variant-numeric: tabular-nums; }
.medido__globo.ver{ opacity:1; }

/* Leyenda que enciende su grupo (pasar el cursor o enfocar) */
.cuadros__leyenda{ display:flex; flex-wrap:wrap; gap: 6px; margin-top: 28px; }
.cuadros__leyenda button{ display:inline-flex; align-items:center; gap: 10px; min-height: 38px; padding: 0 14px 0 12px; border:0; border-radius:999px; cursor:default;
  background: rgba(42,10,16,.05); color: var(--tinta); font: 500 14px/1 'DM Sans', system-ui, sans-serif; transition: opacity .2s ease, background-color .2s ease; }
.cuadros__leyenda button:hover, .cuadros__leyenda button:focus-visible{ background: rgba(42,10,16,.09); }
.cuadros__leyenda button.apagado{ opacity:.4; }
.cuadros__leyenda i{ width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.cuadros__leyenda b{ font-weight:600; font-variant-numeric: tabular-nums; color: var(--fg2); }

/* Pieza 1: un cuadrito por persona */
.cuadros__rejilla{ display:grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: clamp(5px, .8vw, 9px); max-width: 680px; margin-top: 44px; }
.cuadros__rejilla i{ aspect-ratio: 1; border-radius: 22%; background: var(--c, var(--tinta)); transition: opacity .2s ease; }
.cuadros__rejilla i.apagado{ opacity:.18; }
.js .cuadros[data-aparece] .cuadros__rejilla i{ opacity:0; transform: scale(.3);
  transition: opacity .3s ease calc(var(--k) * 22ms), transform var(--dur-rebote) var(--resorte-rebote) calc(var(--k) * 22ms); }   /* escalera de entrada (22 ms), edita aquí */
.js .cuadros.visto .cuadros__rejilla i{ opacity:1; transform:none; }
.js .cuadros.visto .cuadros__rejilla i.apagado{ opacity:.18; }
.js .cuadros.marcado .cuadros__rejilla i{ transition-delay: 0s; }

/* Pieza 2: los mismos cuadritos en dos órdenes */
.respuestas .segmentado{ margin-top: 28px; width:max-content; }
.respuestas .segmentado button{ font-size:14px; min-height:38px; padding: 0 16px; }
.respuestas__lienzo{ position:relative; margin-top: 36px; padding-bottom: 34px; }
.respuestas__campo{ position:relative; width:100%; touch-action: pan-y; }
.respuestas__campo i{ position:absolute; left:0; top:0; width: calc(var(--u, 10px) * .8); height: calc(var(--u, 10px) * .8); border-radius: 22%; background: var(--c, var(--tinta));
  --dy: 0px;
  transform: translate(calc((var(--x, 0) + .1) * var(--u, 10px)), calc((var(--y, 0) + .1) * var(--u, 10px) + var(--dy)));
  transition: transform .62s var(--resorte-agil) calc(var(--k, 0) * 1ms), opacity .2s ease; }   /* el reacomodo dura .62 s, edita aquí */
.respuestas__campo i.apagado{ opacity:.18; }
.js .respuestas:not(.viva) .respuestas__campo i{ opacity:0; --dy: calc(var(--u, 10px) * -3); }
.js .respuestas.viva:not(.quieta) .respuestas__campo i{ transition: transform var(--dur-rebote) var(--resorte-rebote) calc(var(--k, 0) * 2.2ms), opacity .35s ease calc(var(--k, 0) * 2.2ms); }
.respuestas__horario{ position:absolute; top: calc(var(--u, 10px) * -1.6); bottom:0; border-radius: 10px; background: rgba(42,10,16,.05);
  padding: 6px 8px; font-size: 12px; color: rgba(42,10,16,.68); white-space:nowrap; transition: opacity .4s ease; }
.respuestas[data-modo="rapidez"] .respuestas__horario{ opacity:0; }
.respuestas__ejes span{ position:absolute; bottom: 0; transform: translateX(-50%); font-size: 12px; color: var(--fg2); white-space:nowrap; transition: opacity .35s ease; }
.respuestas[data-modo="hora"] .eje--rapidez, .respuestas[data-modo="rapidez"] .eje--hora{ opacity:0; }
.respuestas .cuadros__leyenda{ margin-top: 20px; }

/* Pieza 3: un cuadrito por día */
.calendario__envase{ --lado: clamp(12px, 2.3vw, 26px); --separa: clamp(3px, .5vw, 5px);   /* tamaño de cada día, edita aquí */
  display:grid; grid-template-columns: auto minmax(0, max-content); grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; margin-top: 40px; overflow-x:auto; scrollbar-width:none; }
.calendario__envase::-webkit-scrollbar{ display:none; }
.calendario__dias{ grid-column:1; grid-row:2; display:grid; grid-template-rows: repeat(7, var(--lado)); gap: var(--separa); font-size: 12px; color: var(--fg2); }
.calendario__dias span{ display:flex; align-items:center; line-height:1; }
.calendario__meses{ grid-column:2; grid-row:1; display:grid; grid-template-columns: repeat(var(--semanas, 20), var(--lado)); column-gap: var(--separa); font-size: 12px; color: var(--fg2); }
.calendario__meses span{ white-space:nowrap; }
.calendario__rejilla{ grid-column:2; grid-row:2; display:grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--lado)); grid-auto-columns: var(--lado); gap: var(--separa); }
.calendario__rejilla i{ border-radius: 22%; background: var(--m0); }
.calendario__rejilla i.fuera{ visibility:hidden; }
.calendario__rejilla i[data-nivel="1"]{ background: var(--m1); }
.calendario__rejilla i[data-nivel="2"]{ background: var(--m3); }
.calendario__rejilla i[data-nivel="3"]{ background: var(--m4); }
.calendario__rejilla i[data-nivel="4"]{ background: var(--m5); }
.calendario__rejilla i[data-f]:hover{ box-shadow: 0 0 0 2px var(--tinta); }
.js .calendario[data-aparece] .calendario__rejilla i{ opacity:0; transform: scale(.4);
  transition: opacity .3s ease calc(var(--k) * 35ms), transform var(--dur-rebote) var(--resorte-rebote) calc(var(--k) * 35ms); }   /* ola por semana (35 ms), edita aquí */
.js .calendario.visto .calendario__rejilla i{ opacity:1; transform:none; }
.calendario__escala{ display:flex; align-items:center; gap: 4px; margin-top: 22px; font-size: 12px; color: var(--fg2); }
.calendario__escala i{ width: 14px; height: 14px; border-radius: 3px; background: var(--c); }
.calendario__escala span:first-child{ margin-right: 6px; }
.calendario__escala span:last-child{ margin-left: 6px; }
.medido__cifras{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linea); }
.medido__cifras dt{ font-size: 14px; line-height:1.35; color: var(--fg2); }
.medido__cifras dd{ margin-top: 8px; font-size: clamp(34px, 3.6vw, 48px); font-weight:700; letter-spacing:-.045em; line-height:1; font-variant-numeric: tabular-nums; }
.medido__cifras dd small{ font-size: .4em; font-weight:500; letter-spacing:0; color: var(--fg2); margin-left: .2em; }

@media (max-width: 720px){
  .medido__cifras{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .medido__grande b{ font-size: 64px; }
  .respuestas .segmentado{ width:auto; }
  .respuestas__horario{ font-size: 11px; padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce){
  .js .cuadros[data-aparece] .cuadros__rejilla i, .js .calendario[data-aparece] .calendario__rejilla i{ opacity:1; transform:none; transition:none; }
  .respuestas__campo i{ transition:none !important; }
  .js .respuestas:not(.viva) .respuestas__campo i{ opacity:1; --dy: 0px; }
}

/* ═══ RESPONSIVO ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px){
  .art{ grid-template-columns: minmax(0, 1fr); }
  .art__indice{ display:none; }
  .art__cuerpo{ grid-column: 1; align-items:center; }
  .bloque.ancho{ width:100%; }
  .coleccion[data-vista="lista"] .ficha{ grid-template-columns: 180px minmax(0, 1fr) 150px; gap: 20px 32px; }
}
@media (max-width: 1024px){
  .coleccion[data-vista="cuadricula"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .escena{ grid-template-columns: minmax(0, 1fr); gap:0; }
  .escena__grafico{ grid-row:1; top: calc(var(--nav-height) + 12px); z-index:0; }
  .escena__pasos{ grid-row:2; position:relative; z-index:1; padding: 0 0 20vh; margin-top: -30vh; }
  .paso{ min-height: 80vh; align-items:flex-end; }
  .paso__texto{ opacity:1; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--tinta); padding: 20px 22px; border-radius: 22px; box-shadow: var(--sombra-2); font-size:16px; }
  .paso__texto strong{ color: var(--tinta); }
  .escena__bloque{ display:none; }
  .simulador{ grid-template-columns: minmax(0, 1fr); }
  .mapa-peru{ grid-template-columns: minmax(0, 1fr); }
  .mapa-peru__lienzo{ order:-1; margin: 0 auto; }
  .comparador{ grid-template-columns: minmax(0, 1fr); }
  .diez__fila{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px){
  .coleccion[data-vista="lista"] .ficha{ grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 28px 0; }
  .coleccion[data-vista="lista"] .meta{ flex-direction:row; align-self:start; align-items:baseline; justify-content:flex-start; gap: 4px 14px; text-align:left; }
  .coleccion[data-vista="lista"] .meta time{ font-size: 17px; }
  .coleccion[data-vista="lista"] .ficha .portada{ display:none; }
  .coleccion[data-vista="cuadricula"]{ grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .filtros{ flex-direction:column; align-items:stretch; }
  .vistas{ display:none; }
  .cifras{ grid-template-columns: minmax(0, 1fr); }
  .art-cab__barra{ flex-wrap:wrap; }
  .art-figura .portada{ aspect-ratio: 4 / 3; border-radius: 26px; }
  .estados{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barras__fila{ grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .barras__ref{ left: calc(84px + 10px + (100% - 94px) * var(--v)); }
  .diez i{ width: 16px; height: 16px; }
  .tabla--lectura tbody th{ width:auto; }
  .tabla--lectura tr{ display:grid; padding: 12px 0; border-top: 1px solid var(--linea); }
  .tabla--lectura th, .tabla--lectura td{ border-top:0; padding: 2px 0; }
  .tabla--lectura thead{ display:none; }
  .prosa{ font-size: 17px; }
  .relacionadas__cab{ flex-direction:column; align-items:flex-start; }
}

/* MENOS MOVIMIENTO: todo en su estado final */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js [data-aparece]{ opacity:1; transform:none; transition:none; }
  .js .portada .pz, .js .portada .pz--barra{ opacity:1; transform:none; transition:none; }
  .js .portada .pz--trazo{ stroke-dashoffset:0; transition:none; }
  .js .linea .serie{ stroke-dashoffset:0; }
  .js .linea .area{ opacity:1; }
  .js .coleccion .ficha{ animation:none; }
  .unidad, .estado, .paso__texto, .barras__barra, .barras__valor, .cmp__barra, .diez i, .reparto span, .reparto__corte, .indice__marca, .segmentado__pastilla, .coleccion{ transition:none; }
  .estado__num.salta, .copiar.hecho .copiar__ok path{ animation:none; stroke-dashoffset:0; }
  .barras__barra{ transform: scaleX(var(--v)); }
  .mapa-peru .etq, .mapa-peru__cien i{ transition:none !important; }
  .barras__valor{ opacity:1; }
  .diez i{ transform:none; opacity:1; }
  *, *::before, *::after{ animation-duration: .01ms !important; }
}

.subrayado{
  background: linear-gradient(#A3122A, #A3122A) no-repeat 0 50% / 0% 100%;
  transition: background-size 1.1s cubic-bezier(.22,.8,.3,1);
}
.subrayado > span{
  background:
    linear-gradient(#FFF8F6, #FFF8F6) no-repeat 0 50% / 0% 100%,
    linear-gradient(#2A0A10, #2A0A10);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-size 1.1s cubic-bezier(.22,.8,.3,1);
}
.subrayado.is-on{ background-size: 100% 100%; }
.subrayado.is-on > span{ background-size: 100% 100%, 100% 100%; }
@media (prefers-reduced-motion: reduce){
  .subrayado, .subrayado > span{ transition: none; }
}