/* ==========================================================================
   Portada Scopus Consulting · capa scroll-craft
   Solo la carga index.html. El resto del sitio sigue en /styles.css.
   Orden de carga: scrollcraft.css (motor) > styles.css (sitio) > home.css
   Gramática: editorial por capítulos. Fondos duros por capítulo, sin drift.
   ========================================================================== */

:root{
  --sc-canvas:#DFF7FF; --sc-surface:#EFFBFF; --sc-ink:#101C42; --sc-ink-soft:#28437A;
  --sc-accent:#162660; --sc-accent-ink:#DFF7FF;
  --sc-font-display:Marcellus,Georgia,serif;
  --sc-font-text:"Instrument Sans",system-ui,"Helvetica Neue",Arial,sans-serif;
  --sc-font-mono:"Noto Sans Mono",ui-monospace,monospace;

  --hp-navy:#162660; --hp-deep:#0E1A45; --hp-ink:#101C42;
  --hp-cielo:#DFF7FF; --hp-pale:#EFFBFF; --hp-sky:#D0E6FD; --hp-line:#B8DAF2;
  --hp-soft:#8FB5DC; --hp-slate:#3F5C7A; --hp-body:#28437A;
  --hp-rule-d:rgba(208,230,253,.26);
  --hp-g:clamp(18px,5vw,64px);
  --hp-sec:clamp(80px,10vw,152px);
  --hp-max:1560px;
}

/* El motor fija un cuerpo fluido; la portada conserva la métrica del resto del sitio. */
body.home{font-size:16px;line-height:1.5;letter-spacing:normal}
/* El menú va fijo en todo el sitio, portada incluida. El alto del menú lo publica home.js
   en --hp-hdr y el escenario del pico lo descuenta (ver su padding más abajo). */

.hp-wrap{max-width:var(--hp-max);margin:0 auto;width:100%}
.hp-num{font-family:var(--sc-font-display);font-size:clamp(18px,1.5vw,22px);letter-spacing:.14em;color:var(--hp-slate);line-height:1}
.hp-h2{font-family:var(--sc-font-display);font-weight:400;font-size:clamp(32px,3.9vw,60px);line-height:1.08;letter-spacing:-.008em;color:var(--hp-ink);text-wrap:balance;max-width:20ch}
.hp-chead{display:flex;align-items:baseline;gap:clamp(16px,2vw,32px)}
.hp-chead .hp-num{flex:none;min-width:2.2em}
.hp-body{font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--hp-body);max-width:58ch;text-wrap:pretty}
.hp-small{font-family:var(--sc-font-mono);font-size:12.5px;line-height:1.7;color:var(--hp-slate);max-width:60ch}
.hp-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:500;color:var(--hp-navy);border-bottom:1px solid currentColor;padding-top:6px}
.hp-link::after{content:"\2192";transition:transform 180ms var(--sc-ease-out)}
@media (hover:hover) and (pointer:fine){.hp-link:hover::after{transform:translateX(3px)}}
.hp-cap{font-family:var(--sc-font-mono);font-size:12.5px;line-height:1.6;color:var(--hp-slate);margin-top:14px;max-width:52ch}
.hp-cap b{font-weight:500;color:var(--hp-navy);margin-right:.7em}

/* Botones heredados de styles.css: estados que faltaban. */
.home .s13,.home .s14{transition:background-color 150ms var(--sc-ease-out),color 150ms var(--sc-ease-out),transform 120ms var(--sc-ease-out)}
.home .s13:active,.home .s14:active{transform:translateY(1px)}

/* Un control con foco nunca espera a su fundido de entrada: el teclado puede llegar antes
   que el scroll y encontrarlo aún en opacidad 0. */
[data-sc-in]:focus-within,[data-sc-stagger] > :focus-within,[data-sc-stagger] > :focus{opacity:1!important;transform:none!important}

/* En fondos oscuros el anillo marina del sitio desaparece. */
.hp-peak :focus-visible,.hp-note :focus-visible,.hp-meth :focus-visible{outline-color:var(--hp-sky)}
.hp-note a:hover,.hp-meth a:hover{color:#FFFFFF}

/* ── 0 · Portada: título y Fig. 1 ─────────────────────────────────────── */
.hp-title{background:var(--hp-cielo);padding:clamp(44px,6.5vw,104px) var(--hp-g) clamp(64px,8vw,120px);overflow:clip}
.hp-title__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(36px,5vw,104px);align-items:center}
.hp-kicker{font-family:var(--sc-font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--hp-slate);margin-bottom:clamp(24px,3vw,40px)}
.hp-h1{font-family:var(--sc-font-display);font-weight:400;font-size:clamp(46px,6.3vw,112px);line-height:1.01;letter-spacing:-.014em;color:var(--hp-ink);text-wrap:balance;max-width:13ch}
.hp-lede{font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:var(--hp-body);max-width:40ch;margin-top:clamp(24px,2.8vw,40px);text-wrap:pretty}
.hp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,44px)}

.hp-fig{margin:0;position:relative}
.hp-field{position:relative;height:clamp(440px,66vh,620px);border:1px solid var(--hp-line);background:linear-gradient(180deg,var(--hp-pale) 0%,rgba(239,251,255,.35) 100%)}
/* Marcas de registro, como en una lámina impresa. */
.hp-field::before,.hp-field::after{content:"";position:absolute;width:14px;height:14px;border:solid var(--hp-navy);opacity:.55;pointer-events:none;z-index:4}
.hp-field::before{top:-8px;left:-8px;border-width:1px 0 0 1px}
.hp-field::after{bottom:-8px;right:-8px;border-width:0 1px 1px 0}
.hp-clip{position:absolute;inset:0;overflow:hidden}
.hp-plane{position:absolute;inset:0;width:100%;height:100%;max-width:none;will-change:transform;pointer-events:none}
/* Solo la retícula se sobredimensiona: al retrasarse con el scroll no deja franja vacía. El plano
   del diagrama no, porque su caja es su sistema de coordenadas y se desplaza apenas. */
.hp-plane--grid{top:-15%;height:130%;color:var(--hp-navy);opacity:.09}
.hp-chart{position:absolute;inset:0;width:100%;height:100%;max-width:none}
/* El riel de estudios: una fila por estudio, con su marca y su nombre siempre a la vista.
   Cada fila empieza a la altura de la etapa donde ese estudio entra al camino. */
.hp-mk{position:absolute;left:0;top:0;translate:0 -50%;display:inline-flex;align-items:center;gap:9px;
  opacity:0;transition:opacity 320ms var(--sc-ease-out);pointer-events:auto}
.hp-mk.is-on{opacity:1}
.hp-mk img{width:20px;height:20px;object-fit:contain}
.hp-mk__n{font-family:var(--sc-font-mono);font-size:11px;line-height:1;color:var(--hp-navy);white-space:nowrap}
/* Ad hoc no tiene etapa: su fila cruza todo el tramo y lo dice con todas sus letras. */
.hp-mk__any{font-family:var(--sc-font-mono);font-size:10px;line-height:1;color:var(--hp-slate);white-space:nowrap}
.hp-mk__any::before{content:"· "}
@media (hover:hover) and (pointer:fine){.hp-mk:hover .hp-mk__n{text-decoration:underline}}
/* Las estaciones son texto real: se leen, se traducen y las encuentra un buscador. */
.hp-st{position:absolute;left:0;top:0;font-family:var(--sc-font-mono);font-size:11.5px;letter-spacing:.04em;line-height:1.2;color:var(--hp-slate);white-space:nowrap;translate:-50% 0;opacity:0;transition:opacity 320ms var(--sc-ease-out)}
.hp-st.is-on{opacity:1}
/* El azul suave de la línea no llega al contraste mínimo como texto: la etiqueta usa la tinta secundaria. */
.hp-st--rival{color:var(--hp-slate)}
.hp-st--span{color:var(--hp-navy);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.hp-st--rail{color:var(--hp-slate);font-size:10px;letter-spacing:.18em;text-transform:uppercase;translate:0 -50%}

@media (max-width:860px){
  .hp-title__in{grid-template-columns:1fr}
  .hp-h1{font-size:clamp(42px,11vw,60px);max-width:none}
  .hp-field{height:64svh;min-height:420px}
  .hp-st{font-size:10.5px;translate:0 -50%}
  .hp-st--left{translate:-100% -50%}
  .hp-st--span{display:none}
  .hp-mk{gap:8px}
  .hp-mk img{width:18px;height:18px}
  .hp-mk__n{font-size:10.5px}
}

/* ── I · intertítulo: el silencio antes del pico ─────────────────────── */
.hp-inter{background:#FFFFFF;padding:clamp(64px,9vh,112px) var(--hp-g);min-height:52svh;display:grid;align-content:center}
.hp-inter .hp-num{font-family:var(--sc-font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:clamp(16px,2vw,26px)}
.hp-rv{padding:0}
.hp-inter__line{font-family:var(--sc-font-display);font-size:clamp(28px,3.8vw,56px);line-height:1.1;letter-spacing:-.01em;color:var(--hp-ink);max-width:22ch;text-wrap:balance}

/* ── I · pico: ruido a señal ─────────────────────────────────────────── */
.hp-peak{background:var(--hp-deep);color:var(--hp-cielo)}
.hp-peak__stage{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);gap:clamp(28px,4vw,80px);align-items:stretch;
  padding:calc(var(--hp-hdr,0px) + clamp(20px,3vh,44px)) max(var(--hp-g),calc((100vw - var(--hp-max)) / 2)) clamp(64px,9vh,96px)}
.hp-peak__copy{display:flex;flex-direction:column;justify-content:center;min-height:0}
.hp-peak .hp-h2{color:var(--hp-cielo)}
.hp-peak__lede{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--hp-sky);margin-top:14px;max-width:38ch}
.hp-ledger{list-style:none;margin:clamp(20px,3.4vh,40px) 0 0;padding:0;border-top:1px solid var(--hp-rule-d)}
.hp-lg{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;padding:clamp(9px,1.5vh,15px) 0;border-bottom:1px solid var(--hp-rule-d);opacity:.46;transition:opacity 280ms var(--sc-ease-out)}
.hp-lg::before{content:"";grid-row:1 / span 2;width:7px;height:7px;margin:.52em 0 0 3px;border:1px solid var(--hp-sky);transform:rotate(45deg);transition:background-color 280ms var(--sc-ease-out)}
.hp-lg.is-on{opacity:1}
.hp-lg.is-on::before{background:var(--hp-sky)}
.hp-lg__k{font-size:clamp(15px,1.15vw,17px);font-weight:500;line-height:1.35;color:var(--hp-cielo)}
.hp-lg__v{font-family:var(--sc-font-mono);font-size:12.5px;line-height:1.55;color:var(--hp-soft);margin-top:3px}
.hp-lg.is-now .hp-lg__v{color:var(--hp-sky)}
.hp-readout{display:none}
.hp-peak__fig{margin:0;display:flex;flex-direction:column;min-height:0}
.hp-sigbox{position:relative;flex:1 1 auto;min-height:0;border:1px solid var(--hp-rule-d)}
.hp-sig{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.hp-lab{position:absolute;left:0;top:0;font-family:var(--sc-font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--hp-sky);white-space:nowrap;translate:-50% 0;opacity:0;transition:opacity 220ms var(--sc-ease-out);pointer-events:none}
.hp-lab.is-on{opacity:1}
.hp-cap--d{color:var(--hp-soft)}
.hp-cap--d b{color:var(--hp-cielo)}

/* Portátiles bajos: el libro mayor no debe cortarse dentro del escenario fijo. */
@media (min-width:861px) and (max-height:820px){
  .hp-peak__lede{display:none}
  .hp-peak .hp-h2{font-size:clamp(28px,3vw,44px)}
  .hp-lg{padding:7px 0}
  .hp-lg__v{font-size:12px;line-height:1.45}
}

@media (max-width:860px){
  .hp-peak__stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;
    padding:calc(var(--hp-hdr,0px) + 10px) var(--hp-g) 40px}
  .hp-peak__copy{display:contents}
  .hp-peak__lede,.hp-cap--d{display:none}
  .hp-peak .hp-h2{grid-row:1;font-size:clamp(26px,7.4vw,34px)}
  .hp-peak__fig{grid-row:2}
  .hp-ledger{grid-row:3;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  .hp-lg{padding:6px 0;grid-template-columns:14px minmax(0,1fr);column-gap:8px;opacity:.5}
  .hp-lg::before{width:6px;height:6px;margin-left:1px}
  .hp-lg__k{font-size:13px}
  .hp-lg__v{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hp-readout{grid-row:4;display:block;font-family:var(--sc-font-mono);font-size:12.5px;line-height:1.5;color:var(--hp-sky);min-height:3em}
  .hp-lab{font-size:10.5px}
}

/* ── I · nota del panel (flow tras el pin: padding reducido arriba) ───── */
.hp-note{background:var(--hp-deep);color:var(--hp-sky);padding:clamp(24px,4vw,56px) var(--hp-g) var(--hp-sec)}
.hp-note__in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);gap:clamp(28px,4vw,80px);border-top:1px solid var(--hp-rule-d);padding-top:clamp(32px,4vw,56px)}
.hp-note__h{font-family:var(--sc-font-display);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.12;color:var(--hp-cielo);max-width:16ch}
.hp-note__txt{display:grid;gap:18px;justify-items:start}
.hp-note__txt p{font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--hp-sky);max-width:60ch}
.hp-note .hp-small{color:var(--hp-soft)}
.hp-note .hp-link{color:var(--hp-cielo)}
@media (max-width:860px){.hp-note__in{grid-template-columns:1fr}}

/* ── II · Método: la línea que une las fases se dibuja con el scroll ──── */
/* home.js escribe --draw según la posición real de la fila y enciende cada rombo al alcanzarlo. */
.hp-method{background:#FFFFFF;padding:var(--hp-sec) var(--hp-g)}
.hp-method .hp-body{margin-top:24px;font-size:clamp(17px,1.4vw,20px);max-width:60ch}
.hp-phases{--draw:1;list-style:none;margin:clamp(52px,6vw,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,56px);position:relative}
.hp-phases::before,.hp-phases::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hp-line)}
.hp-phases::after{background:var(--hp-navy);height:2px;top:-.5px;transform-origin:0 50%;transform:scaleX(var(--draw))}
.hp-ph{position:relative;padding-top:34px}
.hp-ph::before,.hp-ph::after{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;transform:rotate(45deg) scale(.72);transition:transform 260ms var(--sc-ease-out),opacity 260ms var(--sc-ease-out)}
.hp-ph::before{background:#FFFFFF;border:1px solid var(--hp-navy);z-index:1}
.hp-ph::after{background:var(--hp-navy);opacity:0;z-index:2}
.hp-ph.is-on::before,.hp-ph.is-on::after{transform:rotate(45deg) scale(1)}
.hp-ph.is-on::after{opacity:1}
.hp-ph__k{font-family:var(--sc-font-mono);font-size:12.5px;color:var(--hp-slate)}
.hp-ph h3{font-family:var(--sc-font-display);font-weight:400;font-size:clamp(24px,2vw,30px);line-height:1.15;color:var(--hp-ink);margin:10px 0 12px}
.hp-ph p{font-size:15.5px;line-height:1.7;color:var(--hp-body)}
.hp-std{margin-top:clamp(56px,6vw,96px);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:clamp(20px,3vw,56px);border-top:1px solid var(--hp-line);padding-top:28px}
.hp-std__t{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--hp-slate)}
.hp-std ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(20px,3vw,48px)}
.hp-std li{font-size:15.5px;line-height:1.65;color:var(--hp-body)}
.hp-std strong{font-weight:600;color:var(--hp-navy)}
@media (max-width:980px){
  .hp-phases{grid-template-columns:1fr;gap:32px;padding-left:34px}
  .hp-phases::before,.hp-phases::after{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .hp-phases::after{width:2px;left:4.5px;transform-origin:50% 0;transform:scaleY(var(--draw))}
  .hp-ph{padding-top:0}
  .hp-ph::before,.hp-ph::after{left:-34px;top:.3em}
  .hp-std,.hp-std ul{grid-template-columns:1fr}
}

/* ── III · Siete metodologías, filtradas por área ─────────────────────── */
.hp-meth{background:var(--hp-navy);color:var(--hp-cielo);padding:var(--hp-sec) var(--hp-g)}
.hp-meth__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.4fr);gap:clamp(36px,5vw,104px);align-items:start}
/* La columna acompaña siempre al recorrido de los servicios, a cualquier zoom.
   Si cabe en pantalla se fija bajo el menú; si no cabe (zoom alto, pantalla corta)
   el tope se vuelve negativo y se ancla por su pie, así el enlace de comparar
   siempre queda alcanzable en lugar de apagar la fijación. home.js publica el alto. */
.hp-meth.is-stick .hp-meth__side{position:sticky;
  top:min(calc(var(--hp-hdr,0px) + clamp(20px,4vh,48px)),
          calc(100vh - var(--hp-side-h,0px) - clamp(16px,2vh,28px)))}
.hp-meth .hp-num{color:var(--hp-soft)}
.hp-meth .hp-h2{color:var(--hp-cielo);font-size:clamp(30px,3vw,46px)}
.hp-meth .hp-body{color:var(--hp-sky);margin-top:22px}
.hp-areas{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--hp-rule-d);padding-top:22px}
.hp-areas__q{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--hp-soft);margin-bottom:14px}
.hp-areas__btns{display:none;flex-wrap:wrap;gap:8px}
.hp-areas.is-live .hp-areas__btns{display:flex}
.hp-areas button{appearance:none;background:transparent;border:1px solid rgba(208,230,253,.45);border-radius:0;color:var(--hp-cielo);font:500 14px/1.2 var(--sc-font-text);padding:12px 16px;min-height:44px;cursor:pointer;
  transition:background-color 150ms var(--sc-ease-out),color 150ms var(--sc-ease-out),border-color 150ms var(--sc-ease-out),transform 120ms var(--sc-ease-out)}
.hp-areas button[aria-pressed="true"]{background:var(--hp-sky);border-color:var(--hp-sky);color:var(--hp-navy)}
.hp-areas button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.hp-areas button[aria-pressed="false"]:hover{background:rgba(208,230,253,.1);border-color:var(--hp-sky)}}
.hp-areas__status{display:none;margin-top:12px;font-family:var(--sc-font-mono);font-size:12.5px;color:var(--hp-soft)}
.hp-areas.is-live .hp-areas__status{display:block}
/* Al cambiar de área el texto entra con un desenfoque mínimo en lugar de aparecer
   de golpe. Solo se anima la entrada: animar también la salida dejaría los dos
   textos en el flujo a la vez y empujaría todo lo de abajo. */
.hp-area-txt{margin-top:22px;transition:opacity 200ms var(--sc-ease-out),filter 200ms var(--sc-ease-out)}
@starting-style{.hp-area-txt:not([hidden]){opacity:0;filter:blur(3px)}}
.hp-area-txt h3{font-family:var(--sc-font-display);font-weight:400;font-size:24px;line-height:1.15;color:var(--hp-cielo);margin-bottom:10px}
.hp-area-txt p{font-size:15.5px;line-height:1.7;color:var(--hp-sky);max-width:48ch}
.hp-area-txt ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.hp-area-txt a{font-size:14px;color:var(--hp-sky);border-bottom:1px solid rgba(208,230,253,.4)}
.hp-areas.is-live .hp-area-txt ul{display:none}
.hp-meth__more{margin-top:clamp(26px,3vw,40px);display:grid;gap:10px;justify-items:start}
.hp-meth .hp-link{color:var(--hp-cielo)}
.hp-meth .hp-small{color:var(--hp-soft)}

.hp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hp-rule-d)}
.hp-item{display:grid;grid-template-columns:40px 52px minmax(0,1fr);column-gap:clamp(14px,1.8vw,28px);row-gap:10px;padding:clamp(22px,2.6vw,34px) clamp(8px,1vw,16px);border-bottom:1px solid var(--hp-rule-d);color:var(--hp-cielo);
  transition:opacity 240ms var(--sc-ease-out),background-color 160ms var(--sc-ease-out)}
.hp-item__n{font-family:var(--sc-font-mono);font-size:13px;color:var(--hp-soft);padding-top:.35em}
.hp-item picture,.hp-item img{width:52px;height:52px}
.hp-item img{object-fit:contain}
.hp-item__h{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px}
.hp-item h3{font-family:var(--sc-font-display);font-weight:400;font-size:clamp(24px,2.3vw,36px);line-height:1.08;color:inherit}
.hp-item__meta{font-family:var(--sc-font-mono);font-size:12.5px;color:var(--hp-soft)}
.hp-item p{grid-column:3;font-size:15.5px;line-height:1.68;color:var(--hp-sky);max-width:62ch}
.hp-list > li.is-dim .hp-item{opacity:.45}
.hp-list > li.is-match .hp-item{background:rgba(14,26,69,.55)}
.hp-list > li.is-match h3::after{content:"";display:inline-block;width:8px;height:8px;margin-left:14px;background:var(--hp-sky);transform:rotate(45deg);vertical-align:.22em}
@media (hover:hover) and (pointer:fine){.hp-item:hover{background:rgba(14,26,69,.55)}}
/* Dos columnas mientras quepan: a 150 % de zoom en una pantalla de 1440 el ancho útil
   son 960 px y la columna fija todavía tiene sentido. Debajo de 860 se apila. */
@media (max-width:980px) and (min-width:861px){
  .hp-meth__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(24px,3.4vw,40px)}
}
@media (max-width:860px){
  .hp-meth__grid{grid-template-columns:1fr}
  .hp-meth.is-stick .hp-meth__side{position:static}
}
@media (max-width:560px){
  .hp-item{grid-template-columns:52px minmax(0,1fr)}
  .hp-item__n{display:none}
  .hp-item p{grid-column:1 / -1}
}

/* ── IV · Casos como libro mayor ─────────────────────────────────────── */
.hp-cases{background:#FFFFFF;padding:var(--hp-sec) var(--hp-g)}
.hp-cases__intro{display:grid;gap:14px;margin-top:22px}
.hp-book{margin-top:clamp(40px,5vw,72px)}
.hp-book__head,.hp-case{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr) minmax(0,1.9fr) minmax(0,.85fr);gap:clamp(16px,2.4vw,44px)}
.hp-book__head{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hp-slate);padding-bottom:14px;border-bottom:1px solid var(--hp-ink)}
.hp-case{padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--hp-line);align-items:baseline}
.hp-case__area{font-family:var(--sc-font-mono);font-size:13px;color:var(--hp-slate)}
.hp-case h3{font-family:var(--sc-font-display);font-weight:400;font-size:clamp(21px,1.8vw,26px);line-height:1.2;color:var(--hp-ink)}
.hp-case__txt{font-size:15.5px;line-height:1.7;color:var(--hp-body)}
.hp-case__m{font-family:var(--sc-font-mono);font-size:12.5px;line-height:1.6;color:var(--hp-navy);text-align:right}
.hp-cases .hp-link{margin-top:clamp(28px,3vw,44px)}
@media (max-width:900px){
  .hp-book__head{display:none}
  .hp-book{border-top:1px solid var(--hp-ink)}
  .hp-case{grid-template-columns:1fr;gap:8px}
  .hp-case__m{text-align:left}
}

/* ── Colofón: resuelve y sostiene ─────────────────────────────────────── */
.hp-colo{background:var(--hp-cielo);padding:clamp(96px,13vw,176px) var(--hp-g)}
.hp-colo__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,104px);align-items:end}
.hp-diamond{display:block;width:13px;height:13px;background:var(--hp-navy);transform:rotate(45deg);margin:0 0 30px 2px}
.hp-colo__h{font-family:var(--sc-font-display);font-weight:400;font-size:clamp(36px,4.6vw,70px);line-height:1.05;letter-spacing:-.01em;color:var(--hp-ink);max-width:12ch;text-wrap:balance}
.hp-colo__p{font-size:clamp(18px,1.5vw,22px);line-height:1.6;color:var(--hp-body);max-width:46ch;text-wrap:pretty}
.hp-colo__cta{font-family:var(--sc-font-display);font-size:1.3em;color:var(--hp-navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;white-space:nowrap}
.hp-colo__cta:hover{color:var(--hp-ink);text-decoration-thickness:2px}
.hp-colo__contact{margin-top:28px;font-family:var(--sc-font-mono);font-size:13px;line-height:1.9;color:var(--hp-slate)}
.hp-colo__contact a{color:var(--hp-slate);border-bottom:1px solid rgba(63,92,122,.35)}
@media (max-width:860px){.hp-colo__in{grid-template-columns:1fr}}

/* ── Folio: en qué capítulo vas, en el margen, junto al menú fijo ──────── */
.hp-folio{position:fixed;left:clamp(12px,1.6vw,24px);bottom:clamp(12px,1.6vw,24px);z-index:55;display:flex;align-items:stretch;max-width:calc(100vw - 24px);
  background:#FFFFFF;color:var(--hp-navy);border:1px solid var(--hp-line);box-shadow:0 1px 2px rgba(16,28,66,.08),0 8px 18px -8px rgba(16,28,66,.18);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 220ms var(--sc-ease-out),transform 220ms var(--sc-ease-out),visibility 0s linear 220ms}
.hp-folio.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hp-folio__ch{display:flex;align-items:center;padding-inline:14px;font-family:var(--sc-font-mono);font-size:12px;letter-spacing:.06em;white-space:nowrap;min-block-size:44px}
.hp-folio__cta{display:flex;align-items:center;padding-inline:16px;min-block-size:44px;border-inline-start:1px solid var(--hp-line);font-size:13.5px;font-weight:500;color:inherit;white-space:nowrap;transition:background-color 150ms var(--sc-ease-out)}
.hp-folio__cta:hover{background:var(--hp-pale);color:var(--hp-navy)}
.hp-folio :focus-visible{outline-offset:-3px}
.hp-folio[data-ground="navy"]{background:var(--hp-deep);color:var(--hp-cielo);border-color:rgba(208,230,253,.3);box-shadow:0 8px 18px -8px rgba(0,0,0,.4)}
.hp-folio[data-ground="navy"] .hp-folio__cta{border-inline-start-color:rgba(208,230,253,.3)}
.hp-folio[data-ground="navy"] .hp-folio__cta:hover{background:var(--hp-navy);color:#FFFFFF}
.hp-folio[data-ground="navy"] :focus-visible{outline-color:var(--hp-sky)}
/* Escritorio: vertical en el margen izquierdo, como la cabeza de página de un informe.
   Mide 34 px y el margen nunca baja de 43: no tapa texto. */
@media (min-width:861px){
  .hp-folio{left:max(4px,calc((var(--hp-g) - 34px) / 2));bottom:24px;writing-mode:vertical-rl;rotate:180deg;max-width:none;max-height:calc(100vh - 48px)}
  .hp-folio__ch,.hp-folio__cta{min-block-size:34px;padding-inline:14px}
  .hp-folio__ch{font-size:11px}
  .hp-folio__cta{font-size:12.5px}
}
@media (max-width:860px){
  .hp-folio{left:0;right:0;bottom:0;max-width:none;border-width:1px 0 0;box-shadow:none;justify-content:space-between}
  .hp-folio__ch{display:block;line-height:44px;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
}

/* ── Movimiento reducido: menos y más suave, nunca contenido perdido ──── */
@media (prefers-reduced-motion:reduce){
  .hp-peak{height:auto!important}
  .hp-phases{--draw:1!important}
  .hp-ph::after{opacity:1}
  .hp-ph::before,.hp-ph::after{transform:rotate(45deg) scale(1);transition:none}
  .hp-plane{will-change:auto}
}