/* AJPPM · Manual de identidad
   Cada lámina es una página 16:9 (contenedor de consultas) y todo lo que vive dentro se mide en cqi,
   centésimas del ancho de la lámina: el diseño es idéntico a 1280, 1440, 1920 y en el PDF. */

@font-face{font-family:Anybody;src:url('../assets/fuentes/anybody-150-800.woff2') format('woff2');font-weight:800;font-stretch:150%;font-display:swap}
@font-face{font-family:Anybody;src:url('../assets/fuentes/anybody-120-800.woff2') format('woff2');font-weight:800;font-stretch:120%;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fuentes/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fuentes/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fuentes/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fuentes/inter-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --negro:#0b0f14;--negro-2:#11161d;--blanco:#fff;--papel:#f5f4ef;--papel-2:#ebe9e2;
  --tinta:#111820;--gris:#a7b0ba;--gris-papel:#5a6470;--linea:rgba(255,255,255,.14);--linea-papel:#d8d6cf;
  --verde:#006847;--rojo:#ce1126;--gris-marca:#e5e7eb;
  --mesa:#05070a;--barra:calc(56px + env(safe-area-inset-bottom,0px));
  --salida:cubic-bezier(.23,1,.32,1);--dentro:cubic-bezier(.77,0,.175,1);
  --fd:Anybody,Inter,Arial,sans-serif;--ft:Inter,Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--mesa);color-scheme:dark;scroll-snap-type:y mandatory;scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mesa);color:var(--blanco);font-family:var(--ft);line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}ul,ol{padding:0;list-style:none}img,video,svg{display:block;max-width:100%}
button,a{font:inherit;color:inherit;touch-action:manipulation}button{background:none;border:0;padding:0;cursor:pointer}
.lamina:focus{outline:none}
::selection{background:var(--gris-marca);color:var(--negro)}
:focus-visible{outline:2px solid var(--blanco);outline-offset:3px}.papel :focus-visible{outline-color:var(--tinta)}
html{scrollbar-width:thin;scrollbar-color:#2a323c var(--mesa)}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#2a323c;border-radius:0}::-webkit-scrollbar-track{background:var(--mesa)}
.salto{position:fixed;z-index:100;left:16px;top:-80px;background:var(--blanco);color:var(--negro);padding:12px 18px;transition:top .2s var(--salida)}.salto:focus{top:12px}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Lámina y página 16:9 ---- */
.lamina{height:100svh;padding-bottom:var(--barra);scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center}
.pagina{
  --mx:5cqi;--gap:2cqi;--cab:4.2cqi;
  --t-disp:9.5cqi;--t-state:4.2cqi;--t-h2:3cqi;--t-h3:max(1.7cqi,17px);--t-lead:max(1.45cqi,16px);--t-body:max(1.12cqi,14px);--t-small:max(.82cqi,12px);--t-micro:max(.72cqi,11px);
  position:relative;width:min(100vw,calc((100svh - var(--barra)) * 16 / 9));aspect-ratio:16/9;container-type:inline-size;overflow:hidden;
  display:grid;grid-template-rows:var(--cab) minmax(0,1fr) var(--cab);background:var(--negro);color:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea)
}
.pagina.papel{background:var(--papel);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea-papel)}
.cab,.pie{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:0 var(--mx);font-size:var(--t-small);color:var(--gris);font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;background:var(--negro)}
.papel .cab,.papel .pie{color:var(--gris-papel);background:var(--papel)}
.cab{border-bottom:1px solid var(--linea)}.pie{border-top:1px solid var(--linea)}
.papel .cab{border-color:var(--linea-papel)}.papel .pie{border-color:var(--linea-papel)}
.cab__marca{font-family:var(--fd);font-weight:800;font-stretch:150%;font-size:var(--t-small);letter-spacing:.04em;color:inherit}
.cab__marca{color:var(--blanco)}.papel .cab__marca{color:var(--tinta)}
.folio b{color:var(--blanco);font-weight:600}.papel .folio b{color:var(--tinta)}

/* ---- Retícula del cuerpo: título siempre en el mismo sitio ---- */
.cuerpo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:var(--gap);row-gap:2.2cqi;padding:2.4cqi var(--mx) 2cqi;min-height:0;position:relative;overflow:auto;scrollbar-width:thin}
.cuerpo>*{min-width:0;min-height:0}
.titulo{grid-column:1/span 6;grid-row:1;font-family:var(--fd);font-weight:800;font-stretch:120%;font-size:var(--t-h2);line-height:.98;letter-spacing:-.02em;text-wrap:balance;align-self:start}
.texto{grid-column:1/span 5;grid-row:2;align-self:start;display:grid;gap:1.3cqi;font-size:var(--t-body);color:var(--gris)}
.papel .texto{color:var(--gris-papel)}
.texto .lead{font-size:var(--t-lead);line-height:1.3;color:var(--blanco);font-weight:500}.papel .texto .lead{color:var(--tinta)}
.texto p{max-width:46ch}
.visual{grid-column:7/-1;grid-row:1/-1;min-height:0;position:relative}
.nota{font-size:var(--t-micro);color:var(--gris);letter-spacing:.06em;text-transform:uppercase;font-weight:600}.papel .nota{color:var(--gris-papel)}
.dato{display:grid;gap:.2cqi;font-size:var(--t-small);color:var(--gris)}.dato b{font-size:var(--t-h3);font-family:var(--fd);font-stretch:120%;color:var(--blanco);line-height:1}
.papel .dato{color:var(--gris-papel)}.papel .dato b{color:var(--tinta)}
.datos{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:3cqi;padding-top:1.2cqi;border-top:1px solid var(--linea-papel)}
.h3{font-family:var(--fd);font-weight:800;font-stretch:120%;font-size:var(--t-h3);line-height:1.05;letter-spacing:-.01em;color:var(--blanco)}.papel .h3{color:var(--tinta)}
.lista-palabras{display:grid;align-content:center;height:100%}
.lista-palabras li{display:grid;gap:.7cqi;padding:1.7cqi 0;border-top:1px solid var(--linea-papel)}
.lista-palabras li:last-child{border-bottom:1px solid var(--linea-papel)}
.lista-palabras b{font-family:var(--fd);font-weight:800;font-stretch:150%;font-size:2.6cqi;line-height:1;color:var(--tinta)}
.lista-palabras span{font-size:var(--t-body);color:var(--gris-papel);max-width:40ch}

/* Diagonales del sistema: verde arriba a la izquierda, roja abajo a la derecha, a 67 grados. */
.diag{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.diag i{position:absolute;width:1.6cqi;height:140%;top:-20%;transform:skewX(-23deg);opacity:.9}
.diag .v{left:-6cqi;background:var(--verde)}.diag .r{right:-6cqi;background:var(--rojo)}
.diag.tenue i{opacity:.16}

/* ---- Portada ---- */
.portada .cuerpo{grid-template-rows:minmax(0,1fr);align-items:center}
.portada .lockup{grid-column:1/span 6;grid-row:1;height:100%;width:auto;max-width:100%;justify-self:center}
.portada .lema{grid-column:7/-1;grid-row:1;align-self:center;display:grid;gap:2.2cqi;--t-state:3.8cqi}
.portada h1{font-family:var(--fd);font-weight:800;font-stretch:150%;font-size:var(--t-state);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.portada .lema p{font-size:var(--t-lead);color:var(--gris);max-width:30ch;line-height:1.35}
.franja{display:grid;grid-template-columns:1fr 1fr 1fr;width:14cqi;height:.7cqi}
.franja i:nth-child(1){background:var(--verde)}.franja i:nth-child(2){background:var(--blanco);box-shadow:inset 0 0 0 1px var(--gris-marca)}.franja i:nth-child(3){background:var(--rojo)}

/* Momento 1: la A se arma pieza por pieza (portada al cargar, símbolo al entrar en vista). */
.js .arma [data-pieza]{transform-box:fill-box;opacity:0;translate:-38% 86%}
.js .arma .palabra,.js .arma .subtitulo,.js .arma .franja-svg{opacity:0;translate:0 1.4cqi}
.js .vista .arma [data-pieza]{animation:pieza .7s var(--salida) forwards}
.js .vista .arma [data-pieza="pierna"]{animation-delay:.05s}.js .vista .arma [data-pieza="cuna"]{animation-delay:.17s}
.js .vista .arma [data-pieza="verde"]{animation-delay:.29s}.js .vista .arma [data-pieza="roja"]{animation-delay:.41s}
.js .vista .arma .palabra{animation:subir .55s var(--salida) .62s forwards}
.js .vista .arma .subtitulo{animation:subir .55s var(--salida) .72s forwards}
.js .vista .arma .franja-svg{animation:subir .55s var(--salida) .8s forwards}
@keyframes pieza{to{opacity:1;translate:0 0}}
@keyframes subir{to{opacity:1;translate:0 0}}

/* ---- Apertura de capítulo ---- */
.capitulo .cuerpo{grid-template-rows:minmax(0,1fr)}
.capitulo .titulo-cap{grid-column:1/span 11;grid-row:1;align-self:end;font-family:var(--fd);font-weight:800;font-stretch:150%;font-size:8.4cqi;line-height:.92;letter-spacing:-.025em;text-wrap:balance;position:relative}
.capitulo .texto{grid-column:1/span 5;grid-row:1;align-self:start;position:relative}
.capitulo .pieza-fondo{position:absolute;right:-14cqi;top:-16cqi;width:70cqi;height:auto;pointer-events:none}
.capitulo[data-cap="3"] .pieza-fondo{right:4cqi}
.capitulo .pieza-fondo polygon{fill:var(--blanco)}
.capitulo[data-cap="2"] .pieza-fondo polygon{fill:var(--verde)}.capitulo[data-cap="3"] .pieza-fondo polygon{fill:var(--rojo)}

/* ---- Valores: la A explica los principios ---- */
.valores .visual{display:grid;place-items:center}
.valores .visual svg{height:100%;width:auto;max-width:100%}
.valores .lista{grid-column:1/span 5;grid-row:2;display:grid;align-content:start;gap:0}
.valor{display:grid;grid-template-columns:2cqi 1fr;column-gap:1.6cqi;align-items:start;padding:1.5cqi 0;border-top:1px solid var(--linea)}
.valor:last-child{border-bottom:1px solid var(--linea)}
.valor i{display:block;width:1.3cqi;height:3.1cqi;margin-top:.1cqi;transform:skewX(-23deg);background:var(--blanco)}
.valor:nth-child(2) i{background:var(--verde)}.valor:nth-child(3) i{background:var(--rojo)}
.valor h3{font-family:var(--fd);font-stretch:120%;font-weight:800;font-size:var(--t-h3);line-height:1.05}
.valor span{display:block;font-size:var(--t-body);color:var(--gris);margin-top:.5cqi;max-width:40ch}
.valores svg polygon{transition:opacity .22s var(--salida)}
.valores:has(.valor:nth-child(1):hover) svg polygon:not([data-pieza="pierna"]):not([data-pieza="cuna"]),
.valores:has(.valor:nth-child(2):hover) svg polygon:not([data-pieza="verde"]),
.valores:has(.valor:nth-child(3):hover) svg polygon:not([data-pieza="roja"]){opacity:.18}

/* ---- Personalidad ---- */
.personalidad .titulo{grid-column:1/span 7}
.personalidad .dos{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);column-gap:var(--gap);height:100%}
.personalidad .dos article{padding-top:1.6cqi;border-top:1px solid var(--linea-papel);display:grid;gap:1cqi;align-content:start}
.personalidad .dos p{font-size:2cqi;line-height:1.25;color:var(--gris-papel);max-width:24ch}
.personalidad .puente{grid-column:1/-1;align-self:end;font-size:var(--t-lead);color:var(--tinta);font-weight:500;max-width:60ch;padding-top:1.6cqi;border-top:1px solid var(--linea-papel)}

/* ---- Manifiesto ---- */
.manifiesto .cuerpo{grid-template-rows:minmax(0,1fr);align-items:center}
.manifiesto .grande{grid-column:1/span 8;grid-row:1;align-self:center;font-family:var(--fd);font-weight:800;font-stretch:150%;font-size:5cqi;line-height:.95;letter-spacing:-.025em;text-wrap:balance}
.manifiesto .texto{grid-column:9/-1;grid-row:1;align-self:center;gap:1.6cqi}
.manifiesto .texto p{font-size:var(--t-body);color:#d5d9dd;max-width:36ch}
.manifiesto .texto strong{display:block;font-family:var(--fd);font-stretch:120%;font-weight:800;font-size:var(--t-h3);line-height:1.05;color:var(--blanco);padding-top:1.6cqi;border-top:1px solid var(--linea)}

/* ---- Video ---- */
.video .titulo{grid-column:1/span 4}
.video .texto{grid-column:1/span 4}
.video .visual{grid-column:5/-1;display:grid;align-content:center}
.video video{width:100%;height:auto;max-height:100%;aspect-ratio:16/9;background:#000;object-fit:cover;outline:1px solid var(--linea);outline-offset:-1px}
.video figcaption{font-size:var(--t-small);color:var(--gris);margin-top:1cqi}

/* ---- Símbolo: construcción ---- */
.simbolo .visual{background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea-papel);display:grid;place-items:center;overflow:hidden}
.simbolo .visual svg.arma{width:66%;height:auto;position:relative;z-index:2}
.guia{position:absolute;top:-10%;height:120%;width:1px;background:rgba(17,24,32,.22);transform-origin:50% 50%;transform:rotate(-23deg) scaleY(1)}
.g1{left:44%}.g2{left:72%}
.js .simbolo .guia{transform:rotate(-23deg) scaleY(0)}
.js .vista .simbolo .guia,.js .simbolo.vista .guia{animation:guia .7s var(--salida) forwards}
.js .vista .g2{animation-delay:.1s}
@keyframes guia{to{transform:rotate(-23deg) scaleY(1)}}
.angulo{position:absolute;right:6%;bottom:6%;font-family:var(--fd);font-stretch:120%;font-weight:800;font-size:3.6cqi;line-height:1;color:var(--tinta)}
.angulo sup{font-size:.5em;vertical-align:top}

/* ---- Versiones y usos: fila de cuatro ---- */
.fila4{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);height:100%;min-height:0}
.fila4 figure{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1cqi;min-height:0}
.fila4 .caja{height:100%;min-height:0;display:grid;place-items:center;padding:2.6cqi;background:var(--negro);box-shadow:inset 0 0 0 1px var(--linea);position:relative;overflow:hidden}
.fila4 .caja.clara{background:var(--blanco)}
.fila4 .caja img{width:82%;max-height:76%;object-fit:contain}
.fila4 .caja.ancha img{width:90%}
.fila4 figcaption{display:grid;gap:.1cqi;font-size:var(--t-small);color:var(--gris)}
.fila4 figcaption b{color:var(--blanco);font-weight:600}
.etiqueta{position:absolute;z-index:1;left:1.2cqi;top:1.2cqi;padding:.45cqi .8cqi;background:var(--blanco);color:var(--negro);font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.etiqueta.anulado{background:transparent;color:var(--gris);box-shadow:inset 0 0 0 1px var(--linea)}
/* Anulado se marca con el propio sistema: una tacha a 67 grados, sin rojo. */
.caja:has(.anulado)::after{content:"";position:absolute;left:50%;top:-20%;height:140%;width:.35cqi;background:var(--blanco);transform:skewX(-23deg);opacity:.85}
.caja .girado{transform:rotate(-14deg)}.caja .estirado{transform:scaleX(1.5)}

/* ---- Área de protección ---- */
.proteccion .visual{display:grid;place-items:center}
.zona{position:relative;height:100%;aspect-ratio:1/1;max-width:100%;background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea-papel);display:grid;place-items:center;outline:1px dashed #767f87;outline-offset:-3.4cqi}
.zona img{width:62%;position:relative;z-index:1}
.zona::before,.zona::after{content:"";position:absolute;background:#e3e6e8}.zona::before{width:1px;height:100%;left:50%}.zona::after{height:1px;width:100%;top:50%}
.x{position:absolute;font-family:var(--fd);font-weight:800;font-stretch:120%;font-size:var(--t-small);color:var(--gris-papel);z-index:1}
.x1{left:1.3cqi;top:48%}.x2{right:1.3cqi;top:48%}.x3{top:1cqi;left:49%}.x4{bottom:1cqi;left:49%}

/* ---- Color ---- */
.color .titulo{grid-column:1/span 5}
.color .visual{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:.8cqi}
.muestra{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;padding:1.4cqi;font-size:var(--t-small);transition:transform .16s var(--salida),filter .2s;position:relative;overflow:hidden}
.muestra span{font-weight:600}.muestra b{font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.muestra:hover{filter:brightness(1.06)}.muestra:active{transform:scale(.985)}
.muestra:focus-visible{outline-offset:-4px}.m-blanco:focus-visible,.m-gris:focus-visible{outline-color:var(--negro)}
.m-negro{grid-row:1/span 2;background:var(--negro);color:var(--blanco);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.m-blanco{background:var(--blanco);color:var(--negro)}.m-gris{background:var(--gris-marca);color:var(--negro)}
.m-verde{background:var(--verde);color:var(--blanco)}.m-rojo{background:var(--rojo);color:var(--blanco)}
.js .color .muestra{clip-path:polygon(0 0,0 0,-45% 100%,-45% 100%)}
.js .vista .color .muestra{animation:barrido .7s var(--salida) forwards}
.js .vista .color .muestra:nth-child(2){animation-delay:.07s}.js .vista .color .muestra:nth-child(3){animation-delay:.14s}
.js .vista .color .muestra:nth-child(4){animation-delay:.21s}.js .vista .color .muestra:nth-child(5){animation-delay:.28s}
@keyframes barrido{to{clip-path:polygon(0 0,145% 0,100% 100%,-45% 100%)}}
.texto .estado{min-height:1.2em;font-size:var(--t-small);color:var(--blanco);max-width:none}
.texto.lado{grid-column:8/-1;grid-row:1;align-self:end}

/* ---- Tipografía ---- */
.tipografia .titulo{grid-column:1/span 7}
.tipografia .muestra-tipo{grid-column:1/span 6;grid-row:2;align-self:center;display:grid;gap:1.6cqi}
.tipografia .muestra-tipo strong{font-family:var(--fd);font-weight:800;font-stretch:150%;font-size:8.6cqi;line-height:.82;letter-spacing:-.04em;color:var(--tinta)}
.tipografia .muestra-tipo span{font-size:var(--t-small);color:var(--gris-papel)}
.tipografia .lectura{grid-column:8/-1;grid-row:2;align-self:center;display:grid;gap:1.4cqi;padding-left:var(--gap);border-left:1px solid var(--linea-papel)}
.tipografia .lectura p{font-size:var(--t-body);color:var(--gris-papel);max-width:40ch}
.ranking{width:100%;border-collapse:collapse;border-top:1px solid var(--linea-papel);border-bottom:1px solid var(--linea-papel);font-variant-numeric:tabular-nums;font-size:var(--t-body);color:var(--tinta)}
.ranking th,.ranking td{padding:.55cqi 0;text-align:left;font-weight:400}
.ranking th{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--gris-papel);padding-top:1cqi}
.ranking .pos{width:3ch;font-weight:600;color:var(--gris-papel)}.ranking .pts{text-align:right;font-weight:600}
.ranking tbody tr:first-child td{padding-top:.9cqi}.ranking tbody tr:last-child td{padding-bottom:1cqi}

/* ---- Recursos gráficos: diagonales sobre papel ---- */
.recursos .texto{grid-column:8/-1;grid-row:1;align-self:end}
.recursos .visual{grid-column:1/-1;grid-row:2;background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea-papel);overflow:hidden}
.recursos .visual .diag i{width:2cqi}
.recursos .visual .diag .v{left:18%}.recursos .visual .diag .r{right:18%}
.marcador{position:absolute;left:50%;bottom:10%;translate:-50% 0;display:grid;grid-template-columns:auto auto auto;align-items:stretch;background:var(--negro);color:var(--blanco);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.marcador span{grid-column:1/-1;padding:.5cqi 1cqi;font-size:var(--t-micro);letter-spacing:.14em;font-weight:600;color:var(--gris);border-bottom:1px solid var(--linea)}
.marcador b{font-family:var(--fd);font-stretch:120%;font-size:2.6cqi;padding:.6cqi 1.2cqi;line-height:1}
.marcador strong{display:grid;place-items:center;padding:0 1.2cqi;font-family:var(--fd);font-stretch:120%;font-size:var(--t-small);background:var(--negro-2)}
.recursos .franja{position:absolute;left:50%;top:12%;translate:-50% 0}

/* ---- Tono de voz ---- */
.tono .titulo{grid-column:1/span 6}
.tono .frases{grid-column:7/-1;grid-row:1/-1;align-self:center;display:grid}
.tono blockquote{font-family:var(--fd);font-weight:800;font-stretch:120%;font-size:2.3cqi;line-height:1.05;letter-spacing:-.01em;padding:1.6cqi 0;border-top:1px solid var(--linea-papel);color:var(--tinta)}
.tono .evita{padding-top:1.6cqi;border-top:1px solid var(--linea-papel);display:flex;flex-wrap:wrap;gap:.8cqi;align-items:center}
.tono .evita>span{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-papel);margin-right:.6cqi}
.tono .evita ul{display:contents}
.tono .evita s{display:inline-block;font-size:var(--t-small);padding:.5cqi .9cqi;box-shadow:inset 0 0 0 1px var(--linea-papel);color:var(--gris-papel);text-decoration-color:var(--tinta);text-decoration-thickness:2px}

/* ---- Aplicaciones con fotografía ---- */
.fotos{grid-column:7/-1;grid-row:1/-1;display:grid;gap:.8cqi;min-height:0}
.fotos img{width:100%;height:100%;object-fit:cover;background:var(--negro-2)}
.fotos figure{min-height:0;position:relative;overflow:hidden}
.f-1-2{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.f-1-2 figure:first-child{grid-row:1/span 2}
.fotos.f-2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.fila4.fotos4{row-gap:0}
.fila4.fotos4 figure{display:block;height:100%;min-height:0}
.fila4.fotos4 img{width:100%;height:100%;object-fit:cover;background:var(--negro-2)}
.foco-der img{object-position:68% 50%}.foco-arriba img{object-position:50% 30%}
/* Lámina a sangre: la fotografía ocupa todo el cuerpo y el texto se posa sobre su zona oscura. */
.sangre .cuerpo{padding:0;overflow:hidden}
.sangre .fotos{grid-column:1/-1;grid-row:1/-1;gap:0}
.sangre .fotos figure{grid-area:1/1/-1/-1}
.sangre .titulo,.sangre .texto{position:relative;z-index:1;grid-column:7/-1;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.sangre .titulo{margin:2.4cqi var(--mx) 0 0}
.sangre .texto{margin-right:var(--mx)}
.sangre .fotos img{object-position:40% 50%}
.sangre .texto p{color:#e3e7ea}.sangre .texto .lead{color:var(--blanco)}
.pie-foto{font-size:var(--t-micro);color:var(--gris);letter-spacing:.06em;text-transform:uppercase;font-weight:600;align-self:end}
/* Momento 4: las fotografías entran con el mismo barrido a 67 grados que las muestras de color. */
.js .fotos figure,.js .fotos4 figure{clip-path:polygon(0 0,0 0,-45% 100%,-45% 100%)}
.js .vista .fotos figure,.js .vista .fotos4 figure{animation:barrido .8s var(--salida) forwards}
.js .vista .fotos figure:nth-child(2),.js .vista .fotos4 figure:nth-child(2){animation-delay:.1s}
.js .vista .fotos figure:nth-child(3),.js .vista .fotos4 figure:nth-child(3){animation-delay:.2s}
.js .vista .fotos4 figure:nth-child(4){animation-delay:.3s}

/* ---- Kit ---- */
.kit .visual{display:grid;place-items:center;background:var(--negro);box-shadow:inset 0 0 0 1px var(--linea)}
.kit .visual img{width:56%}
.kit .texto ul{display:grid;grid-template-columns:1fr 1fr;gap:.9cqi var(--gap)}
.kit .texto li{padding-top:.9cqi;border-top:1px solid var(--linea);color:#d2d7dc;font-size:var(--t-body)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3.2cqi;padding:0 1.8cqi;background:var(--blanco);color:var(--negro);font-size:var(--t-body);font-weight:600;text-decoration:none;transition:transform .16s var(--salida),background .2s;justify-self:start}
.boton:hover{background:var(--papel)}.boton:active{transform:scale(.97)}
.creditos{font-size:var(--t-small);color:var(--gris);line-height:1.5}

/* ---- Barra de navegación (único cromo web) ---- */
.barra{position:fixed;z-index:50;left:0;right:0;bottom:0;height:var(--barra);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(16px,env(safe-area-inset-right)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left));background:rgba(5,7,10,.92);border-top:1px solid var(--linea);color:var(--blanco);font-size:.84rem}
.barra__izq,.barra__der{display:flex;align-items:center;gap:10px}.barra__der{justify-content:flex-end}
.barra__caps{display:flex;gap:28px;justify-content:center}
.barra__caps a{position:relative;height:56px;display:grid;place-items:center;text-decoration:none;color:var(--gris);font-weight:500;letter-spacing:.01em}
.barra__caps a::after{content:"";position:absolute;left:0;right:100%;top:-1px;height:2px;background:var(--blanco);transition:right .3s var(--salida)}
.barra__caps a[aria-current="true"]{color:var(--blanco)}.barra__caps a[aria-current="true"]::after{right:0}
.barra__caps a:hover{color:var(--blanco)}
.btn{min-height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 0 0 1px var(--linea);color:var(--blanco);text-decoration:none;font-weight:500;transition:transform .16s var(--salida),background .2s,box-shadow .2s}
.btn:hover{background:rgba(255,255,255,.06)}.btn:active{transform:scale(.97)}
.btn.lleno{background:var(--blanco);color:var(--negro);box-shadow:none;font-weight:600}.btn.lleno:hover{background:var(--papel)}
.btn.icono{width:36px;padding:0;justify-content:center}.btn.icono svg{width:16px;height:16px}
.btn[aria-disabled="true"]{opacity:.3;cursor:default;transform:none}
.btn[aria-disabled="true"]:hover{background:none}
@media (pointer:coarse){.btn{min-height:44px}.btn.icono{width:44px}}

/* ---- Índice (diálogo) ---- */
.indice{border:0;padding:0;background:transparent;color:var(--blanco);max-width:none;max-height:none;width:100vw;height:100dvh;inset:0;margin:0}
.indice::backdrop{background:rgba(5,7,10,.72);backdrop-filter:blur(14px)}
.indice__panel{position:absolute;right:0;top:0;bottom:0;width:min(560px,100vw);background:var(--negro);border-left:1px solid var(--linea);padding:28px 32px calc(28px + env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;display:grid;grid-template-rows:auto 1fr;gap:28px}
.indice[open] .indice__panel{animation:panel .32s var(--salida)}
@keyframes panel{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.indice__cab{display:flex;justify-content:space-between;align-items:center}
.indice__cab h2{font-family:var(--fd);font-stretch:120%;font-size:1.1rem;letter-spacing:.02em}
.indice ol{display:grid;gap:26px;align-content:start}
.indice h3{font-size:.78rem;font-weight:600;color:var(--gris);letter-spacing:.06em;margin-bottom:10px}
.indice li li{border-top:1px solid var(--linea)}
.indice li li a{display:grid;grid-template-columns:3ch 1fr;gap:12px;padding:10px 0;text-decoration:none;color:var(--blanco);font-size:.95rem;font-variant-numeric:tabular-nums}
.indice li li a span{color:var(--gris)}.indice li li a:hover{color:var(--blanco);background:rgba(255,255,255,.04)}
.indice li li a:hover span{color:var(--blanco)}

/* ---- Vertical (teléfono) ---- */
@media screen and (max-width:760px){
  html{scroll-snap-type:y proximity}
  .lamina{height:auto;min-height:100svh;padding-bottom:var(--barra)}
  .pagina{width:100%;aspect-ratio:auto;min-height:calc(100svh - var(--barra));grid-template-rows:auto minmax(0,1fr) auto;
    --mx:6cqi;--gap:4cqi;--cab:12cqi;--t-disp:15cqi;--t-state:10cqi;--t-h2:8.2cqi;--t-h3:5.2cqi;--t-lead:4.5cqi;--t-body:4cqi;--t-small:3.1cqi;--t-micro:2.8cqi}
  .cab,.pie{min-height:var(--cab)}
  .cuerpo{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;row-gap:5cqi;padding:6cqi var(--mx) 7cqi;align-content:start}
  .cuerpo>*{grid-column:1!important;grid-row:auto!important}
  .texto{gap:3.5cqi}.texto .lead{line-height:1.3}
  .visual{min-height:0}
  .portada .cuerpo{min-height:calc(100svh - var(--barra) - 2 * var(--cab));align-content:center}
  .portada .lockup{height:auto;width:78%;justify-self:start}
  .portada .lema{gap:5cqi;--t-state:8.8cqi}
  .capitulo .cuerpo{min-height:calc(100svh - var(--barra) - 2 * var(--cab));align-content:space-between}
  .capitulo .titulo-cap{font-size:7.6cqi;letter-spacing:-.03em}
  .capitulo .pieza-fondo{width:120cqi;right:-40cqi;top:-10cqi;opacity:.2}
  .capitulo[data-cap="2"] .pieza-fondo{right:10cqi;opacity:.45}
  .capitulo[data-cap="3"] .pieza-fondo{right:34cqi;opacity:.4}
  .manifiesto .grande{font-size:9cqi}
  .tipografia .muestra-tipo strong{font-size:13.5cqi}
  .personalidad .dos p{font-size:var(--t-lead);max-width:none}
  .recursos .visual{aspect-ratio:1/1}
  .sangre .cuerpo{padding:0 0 6cqi}.sangre .titulo{margin:6cqi var(--mx) 0}.sangre .texto{margin:0 var(--mx)}.sangre .fotos figure{aspect-ratio:1/1}.sangre .fotos img{object-position:50% 50%}
  .fila4.fotos4 figure{aspect-ratio:1/1;height:auto}.fila4 .caja{height:auto;aspect-ratio:1/1}
  .valores .visual svg{width:70%;height:auto;justify-self:start}
  .valor{grid-template-columns:5cqi 1fr;padding:4cqi 0;column-gap:4cqi}.valor i{width:3cqi;height:8cqi}
  .personalidad .dos{grid-template-columns:1fr;row-gap:5cqi}.personalidad .dos article{padding-top:4cqi;gap:3cqi}.personalidad .puente{padding-top:4cqi}
  .manifiesto .texto strong{padding-top:4cqi}
  .video video{box-shadow:none}
  .simbolo .visual{aspect-ratio:1/1}.angulo{font-size:9cqi}
  .fila4{grid-template-columns:1fr 1fr;gap:3cqi;height:auto}.fila4 figure{gap:2cqi}.fila4 .caja{padding:6cqi}.etiqueta{left:2.5cqi;top:2.5cqi;padding:1cqi 1.8cqi}
  .zona{height:auto;width:100%;outline-offset:-9cqi}.x1{left:3cqi}.x2{right:3cqi}.x3{top:2.4cqi}.x4{bottom:2.4cqi}
  .datos{gap:6cqi;padding-top:3cqi}
  .lista-palabras li{padding:4cqi 0;gap:1.6cqi}.lista-palabras b{font-size:6.5cqi}
  .color .visual{aspect-ratio:4/3;gap:2cqi}.muestra{padding:3cqi}
  .tipografia .muestra-tipo{gap:4cqi}
  .tipografia .lectura{padding-left:0;border-left:0;padding-top:5cqi;border-top:1px solid var(--linea-papel);gap:3.5cqi}
  .ranking th,.ranking td{padding:1.6cqi 0}
  .recursos .visual .diag i{width:5cqi}.marcador b{font-size:7cqi;padding:1.5cqi 3cqi}.marcador span{padding:1.2cqi 2.5cqi}.marcador strong{padding:0 3cqi}
  .tono blockquote{font-size:6cqi;padding:4cqi 0}.tono .evita{padding-top:4cqi;gap:2cqi}.tono .evita s{padding:1.2cqi 2.2cqi}
  .fotos{gap:2cqi}.f-1-2{grid-template-columns:1fr;grid-template-rows:auto}.f-1-2 figure{aspect-ratio:1/1}.f-1-2 figure:first-child{grid-row:auto}
  .fotos.f-2{grid-template-columns:1fr 1fr}.fotos.f-2 figure{aspect-ratio:1/1}
  .kit .visual{aspect-ratio:1/1}.kit .texto ul{grid-template-columns:1fr;gap:2.5cqi}.kit .texto li{padding-top:2.5cqi}
  .boton{min-height:12cqi;padding:0 6cqi}
  .barra{grid-template-columns:1fr auto}.barra__caps,.barra .icono{display:none}
  .indice__panel{width:100vw;padding:22px 20px}
}

/* ---- Movimiento reducido: todo en su estado final ---- */
@media (prefers-reduced-motion:reduce){
  .js .arma [data-pieza],.js .arma .palabra,.js .arma .subtitulo,.js .arma .franja-svg,.js .color .muestra,.js .fotos figure,.js .fotos4 figure{animation:none!important;opacity:1;translate:0 0;clip-path:none}
  .js .simbolo .guia{animation:none!important;transform:rotate(-23deg) scaleY(1)}
  .barra__caps a::after,.btn,.boton,.muestra,.salto{transition:none}
  .indice[open] .indice__panel{animation:none}
}

/* ---- Impresión: una lámina por página 1920×1080 ---- */
@media print{
  @page{size:1920px 1080px;margin:0}
  html,body{background:var(--negro)}
  html{scroll-snap-type:none}
  .barra,.indice,.salto{display:none!important}
  .lamina{height:1080px;width:1920px;padding:0;break-after:page;break-inside:avoid;display:block}
  .pagina{width:1920px;height:1080px;aspect-ratio:auto}
  .js .arma [data-pieza],.js .arma .palabra,.js .arma .subtitulo,.js .arma .franja-svg,.js .color .muestra,.js .fotos figure,.js .fotos4 figure{animation:none!important;opacity:1;translate:0 0;clip-path:none}
  .js .simbolo .guia{animation:none!important;transform:rotate(-23deg) scaleY(1)}
  .pagina,.muestra,.m-negro,.m-verde,.m-rojo,.m-gris,.m-blanco{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  video::-webkit-media-controls{display:none!important}
  .video video,.marcador,.documents article{box-shadow:none}
}