/* ==========================================================================
   Componentes reutilizables
   ========================================================================== */

/* ---- tarjeta inclinada (03.2, 03.4, portada) ---- */
.box{position:absolute;background:var(--c-blanco);color:var(--c-tinta);border-radius:var(--r-tarjeta);padding:40px;
     display:flex;flex-direction:column;gap:24px;box-shadow:var(--sombra-tarjeta);transform:rotate(-1.5deg);will-change:transform}

/* ---- botones: solo cambia el relleno ---- */
.pill,.wpill{position:absolute;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;cursor:pointer;text-decoration:none;
             transition:background-color var(--t-media) var(--e-expo),color var(--t-media) var(--e-expo),border-color var(--t-media)}
.pill{border:1px solid var(--c-ink);color:var(--c-ink)}                          /* secundario inverso */
.pill:hover{background:var(--c-ink);color:var(--c-tinta)}
.wpill{background:var(--c-blanco);color:var(--c-tinta)}                          /* primario inverso */
.wpill:hover{background:var(--c-marca);color:var(--c-ink)}
.pill:focus-visible,.wpill:focus-visible{outline:1px solid var(--c-acento);outline-offset:4px}

/* ---- revelado de marca: lienzo de brocha a tamaño de artboard ---- */
canvas.brocha{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
/* .capa-brocha: geometría a sangre en base.css */

/* ---- flecha que se dibuja (03.2, 03.4) ---- */
.flecha{position:absolute;width:160px;height:16px;overflow:visible;color:var(--c-acento)}   /* el trazo usa currentColor */
.flecha .fh{opacity:0}

/* ---- temblor a 4 fps: hervor de línea (el saltito lo aplica TC.ui.temblor) ---- */
[data-temblor="hervor"]{filter:url(#hervor)}
@media (prefers-reduced-motion: reduce){[data-temblor="hervor"]{filter:none}}

/* ---- nav fija y discreta, sin barra y con la tinta del fondo: completa en la portada; al bajar queda en mini (logo y reserva);
   al subir vuelven los enlaces (compacta). En el 05 y el 07, al bajar se retira entera (oculta) ---- */
.navw{position:fixed;top:0;left:0;z-index:var(--z-nav);transform-origin:0 0;pointer-events:none}
.nav{position:absolute;left:0;top:0;width:1440px;height:88px;--nt:var(--c-ink);--nb:var(--c-blanco);--nbt:var(--c-tinta);color:var(--nt);
     transition:transform var(--t-nav) var(--e-expo),color var(--t-corta)}
.nav[data-t="p"],.nav[data-t="o"]{--nt:var(--c-tinta);--nb:var(--c-tinta);--nbt:var(--c-ink)}
.nav.oculta{transform:translateY(-110%)}
.nav-in{position:absolute;inset:0;pointer-events:auto}
.nav .nl{position:absolute;top:36px;font:500 13px/16px var(--f-ui);color:inherit;text-decoration:none;
         transition:opacity var(--t-corta) var(--e-expo),transform var(--t-nav) var(--e-expo)}
.nav .nl:hover{opacity:.66}
.nav a:focus-visible,.nav .ncta:focus-visible{outline:1px solid var(--c-acento);outline-offset:4px}
.nlogo{position:absolute;left:64px;top:21px;width:123px;height:47px;transform-origin:0 50%;transition:transform var(--t-nav) var(--e-expo)}
.nlogo img{display:block;width:100%;height:100%;transition:filter var(--t-corta)}
.nav[data-t="p"] .nlogo img,.nav[data-t="o"] .nlogo img{filter:invert(1)}
.ncta{left:1149px;top:22px;width:227px;background:var(--nb);color:var(--nbt);transform-origin:100% 50%;
      transition:transform var(--t-nav) var(--e-expo),background-color var(--t-corta),color var(--t-corta),opacity var(--t-corta) var(--e-expo)}
.ncta:hover{background:var(--c-marca);color:var(--c-ink)}
.nav.compacta .nlogo{transform:translateY(-8px) scale(.62)}   /* compacta: 72 px de alto; deja 24 px hasta el marcador */
.nav.compacta .nl{transform:translateY(-8px)}
.nav.compacta .ncta{transform:translateY(-8px) scale(.82)}
/* mini: los enlaces se retiran (y salen del foco); sin-cta: el botón se retira durante la secuencia de la mano */
.nav.mini .nl{opacity:0;visibility:hidden;transform:translateY(-16px);transition:opacity var(--t-corta) var(--e-expo),transform var(--t-nav) var(--e-expo),visibility 0s linear var(--t-corta)}
.nav.sin-cta .ncta{opacity:0;visibility:hidden;transition:opacity var(--t-corta) var(--e-expo),visibility 0s linear var(--t-corta)}

/* ---- marcador de capítulo único (y 96 del artboard) ---- */
.mkw{position:fixed;top:0;left:0;z-index:var(--z-marcador);transform-origin:0 0;pointer-events:none}
.mk{position:relative;display:flex;align-items:baseline;gap:12px;opacity:0}
.mk-n{display:inline-flex;color:var(--c-acento)}
.mk[data-t="p"] .mk-n{color:var(--c-acento-texto)}   /* número pequeño sobre claro: naranja de texto */
.mk-d{display:inline-block;height:1.1em;overflow:hidden;vertical-align:top}
.mk-col{display:flex;flex-direction:column;will-change:transform}
.mk-col span{height:1.1em;display:block}
.mk-name{display:inline-block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.mk-in{display:inline-block;will-change:transform}
.mk-prog{position:absolute;left:0;top:36px;width:120px;height:1px;background:var(--c-linea)}
.mk-prog i{position:absolute;inset:0;background:var(--c-linea-fuerte);transform-origin:0 50%;transform:scaleX(0)}

/* ---- índice lateral: una línea por capítulo; la activa se alarga y se llena con el avance ---- */
.indice{position:fixed;top:50%;right:28px;transform:translateY(-50%);z-index:var(--z-indice);display:flex;flex-direction:column;align-items:flex-end;gap:6px;
        --ni:var(--c-ink);color:var(--ni);transition:color var(--t-media)}
.indice[data-t="p"],.indice[data-t="o"],.arriba[data-t="p"],.arriba[data-t="o"]{--ni:var(--c-tinta)}
/* acento del índice según fondo: naranja en oscuro, naranja de texto en claro, tinta sobre el naranja del 05 */
.indice{--nia:var(--c-acento)}
.indice[data-t="p"]{--nia:var(--c-acento-texto)}
.indice[data-t="o"]{--nia:var(--c-tinta)}
.indice[data-fuera="1"],.arriba[data-fuera="1"]{--ni:var(--c-ink)}
.indice button{all:unset;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:24px;padding-left:10px;color:inherit}
.indice .lab{position:absolute;right:calc(100% + 4px);top:50%;font:500 13px/1 var(--f-ui);padding:7px 11px;border-radius:var(--r-pill);background:var(--c-etiqueta);color:var(--c-ink);
             -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transform:translate(8px,-50%);transition:opacity var(--t-corta),transform var(--t-media) var(--e-expo);white-space:nowrap;pointer-events:none}
.indice .inum{font:700 13px/1 var(--f-display);opacity:0;transition:opacity var(--t-corta),color var(--t-corta);font-variant-numeric:tabular-nums}
.indice .bar{position:relative;width:12px;height:1px;background:currentColor;opacity:.4;transition:width var(--t-nav) var(--e-expo),opacity var(--t-corta)}
.indice .bar i{position:absolute;inset:0;background:var(--nia);transform-origin:0 50%;transform:scaleX(0)}
.indice button.on .bar{width:32px;opacity:1;background:var(--c-linea)}
.indice button.on .inum{opacity:1;color:var(--nia)}
.indice button:hover .lab,.indice button:focus-visible .lab{opacity:1;transform:translate(0,-50%)}
.indice button:hover .inum,.indice button:hover .bar,.indice button:focus-visible .inum{opacity:1}
/* dentro del escenario (margen oscuro < 96 px): compacto, sin número fijo */
.indice[data-fuera="0"] .inum{display:none}
.indice[data-fuera="0"] button.on .bar{width:18px}
.indice[data-fuera="0"] .lab::before{content:attr(data-n) "\00a0\00a0";font-weight:700;color:var(--nia)}
.indice button:focus-visible,.arriba:focus-visible{outline:1px solid var(--c-acento);outline-offset:4px;border-radius:4px}

/* ---- volver arriba ---- */
.arriba{all:unset;position:fixed;right:28px;bottom:24px;z-index:var(--z-indice);width:44px;height:44px;border-radius:50%;box-sizing:border-box;border:1px solid currentColor;
        display:grid;place-items:center;cursor:pointer;--ni:var(--c-ink);color:var(--ni);opacity:0;pointer-events:none;transition:opacity var(--t-media),color var(--t-media)}
.arriba.ver{opacity:.7;pointer-events:auto}
.arriba.ver:hover{opacity:1}
.arriba[data-fuera="0"]{width:34px;height:34px}

/* ---- salto entre capítulos: velo del color del destino ---- */
.salto{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-salto);pointer-events:none}

/* ---- rótulo de revisión (solo con <html data-revision> o ?revision) ---- */
.revision{display:none;position:fixed;left:16px;bottom:16px;z-index:var(--z-revision);align-items:baseline;gap:10px;padding:10px 14px;border-radius:12px;
          background:var(--c-rotulo);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;line-height:1.3;max-width:calc(100vw - 32px)}
html[data-revision] .revision{display:flex}
html[data-prueba] .revision{visibility:hidden}   /* modo de prueba: el rótulo se lee por código, no sale en las capturas */
.revision b{font:700 15px/1.2 var(--f-display);color:var(--c-ink)}
.revision span{color:var(--c-ink-3)}
.revision .pct{color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.revision button{all:unset;cursor:pointer;margin-left:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--c-rotulo-boton);color:var(--c-ink);font:500 12px/1.2 var(--f-ui)}
.revision button:hover{background:var(--c-rotulo-boton-hover)}

/* ---- B3 · selección y etiquetas del índice en el lenguaje del texto ---- */
::selection{background:var(--c-acento);color:var(--c-tinta)}
@keyframes marca-etiqueta{0%{color:var(--c-velo-oscuro)}21%,33%{color:color-mix(in srgb,var(--c-acento) calc(var(--destello-tono)*100%),var(--c-ink))}100%{color:var(--c-ink)}}   /* = flIn / flHold / flOut */
.indice button:hover .lab,.indice button:focus-visible .lab{animation:marca-etiqueta var(--t-marca) var(--e-expo) both}
@media (prefers-reduced-motion: reduce){.indice button:hover .lab,.indice button:focus-visible .lab{animation:none}}