/* ==========================================================================
   TRUST4P · V10 «Baraja» — una sola página, láminas a pantalla completa.
   Lenguaje de movimiento inspirado en los sliders de una página:
   revelado por máscara, entrada y salida direccionales, marco fijo.
   Tipografía: Saira Condensed (display) + Montserrat (voz de marca).
   ========================================================================== */

:root{
  /* Lienzo */
  --ink:            #05070a;
  --ink-2:          #0a0f14;
  --paper:          #f4f7f8;
  --paper-dim:      rgba(244,247,248,.72);
  --paper-mute:     rgba(244,247,248,.64);
  --hair:           rgba(244,247,248,.14);

  /* Marca */
  --teal:           #6ac4cd;
  --deep:           #0d5f76;
  --green:          #9bd38f;
  --violet:         #6d7fd6;

  /* Acento activo (lo cambia el JS por lámina) */
  --acc:            var(--teal);
  --a1:             #0d5f76;
  --a2:             #123246;

  /* Tipos */
  --display:        'Saira Condensed', 'Montserrat', system-ui, sans-serif;
  --body:           'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Ritmo */
  --gut:            clamp(1.25rem, 4.2vw, 4.5rem);
  --rail:           clamp(3.5rem, 6vw, 6.25rem);
  --t-in:           .95s;
  --t-out:          .5s;
  --e-out:          cubic-bezier(.16,1,.3,1);
  --e-in:           cubic-bezier(.7,0,.84,0);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ background:var(--ink); color-scheme:dark }

body{
  font-family:var(--body);
  color:var(--paper);
  background:var(--ink);
  line-height:1.6;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }

.skip{
  position:fixed; left:1rem; top:1rem; z-index:200;
  padding:.6rem 1rem; background:var(--paper); color:var(--ink);
  font-size:.8rem; font-weight:700; transform:translateY(-160%);
  transition:transform .25s var(--e-out);
}
.skip:focus{ transform:none }

/* Área de toque: la marca visible puede ser fina, el blanco no.
   Se agranda con un pseudo-elemento para no alterar la maquetación. */
.hit{ position:relative }
.hit::after{ content:''; position:absolute; inset:-13px -8px; z-index:1 }
.contacto .hit::after{ inset:-12px -6px }

/* Sólo para lectores de pantalla: texto que en pantalla vive en otro sitio. */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

:focus-visible{ outline:2px solid var(--acc); outline-offset:4px }

/* Superficies que pinta el navegador: también son del sistema. */
::selection{ background:var(--acc); color:var(--ink) }
::-moz-selection{ background:var(--acc); color:var(--ink) }
html{ scrollbar-color:rgba(244,247,248,.28) transparent; scrollbar-width:thin }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:var(--ink) }
::-webkit-scrollbar-thumb{
  background:rgba(244,247,248,.22); border:3px solid var(--ink); border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(244,247,248,.38) }
a{ text-underline-offset:.22em }

/* ==========================================================================
   1 · TELÓN DE FONDO
   ========================================================================== */
.backdrop{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none }

.backdrop__aurora{
  position:absolute; border-radius:50%;
  filter:blur(120px); opacity:.55;
  transition:background-color 1.2s ease, transform 1.6s var(--e-out), opacity 1.2s ease;
  will-change:transform,background-color;
}
.backdrop__aurora.a1{
  width:70vw; height:70vw; left:-18vw; top:-22vw;
  background-color:var(--a1);
}
.backdrop__aurora.a2{
  width:58vw; height:58vw; right:-16vw; bottom:-24vw;
  background-color:var(--a2); opacity:.42;
}

.backdrop__grid{
  position:absolute; inset:-1px;
  background-image:
    linear-gradient(to right, rgba(244,247,248,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,247,248,.05) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  opacity:.5;
}

.backdrop__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(110% 80% at 50% 30%, transparent 40%, rgba(5,7,10,.72) 100%),
    linear-gradient(to bottom, rgba(5,7,10,.4), transparent 30%, rgba(5,7,10,.85));
}

.backdrop__grain{
  position:absolute; inset:0; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2 · MECÁNICA DE LA BARAJA
   ========================================================================== */
.deck{ position:fixed; inset:0; z-index:1 }

.slide{
  position:absolute; inset:0; overflow:hidden;
  display:grid; align-content:center;
  padding:calc(var(--rail) + 1.25rem) var(--rail);
}
.slide[hidden]{ display:none }

.slide__inner{ position:relative; z-index:1; width:100%; max-width:1320px; margin-inline:auto }
.slide__inner--center{ text-align:center; display:grid; justify-items:center; gap:clamp(1.1rem,2vh,2rem) }

/* --- Revelado por máscara --- */
.rv{ display:block; overflow:hidden; padding-bottom:.04em }
.rv > span{ display:block; transform:translateY(calc(var(--dir,1) * 118%)) }

.slide.is-in .rv > span{
  transform:translateY(0);
  transition:transform var(--t-in) var(--e-out) calc(var(--i,0) * 72ms + 90ms);
}
.slide.is-out .rv > span{
  transform:translateY(calc(var(--dir,1) * -118%));
  transition:transform var(--t-out) var(--e-in) calc(var(--i,0) * 26ms);
}

/* --- Elevación + desvanecido para lo que no lleva máscara --- */
[data-a]:not(.rv){ opacity:0; transform:translateY(calc(var(--dir,1) * 46px)) }
.slide.is-in [data-a]:not(.rv){
  opacity:1; transform:none;
  transition:opacity .8s ease calc(var(--i,0) * 72ms + 140ms),
             transform .95s var(--e-out) calc(var(--i,0) * 72ms + 140ms);
}
.slide.is-out [data-a]:not(.rv){
  opacity:0; transform:translateY(calc(var(--dir,1) * -46px));
  transition:opacity .35s ease calc(var(--i,0) * 22ms),
             transform var(--t-out) var(--e-in) calc(var(--i,0) * 22ms);
}

/* ==========================================================================
   3 · TIPOGRAFÍA
   ========================================================================== */
/* No hay rótulos sobre los titulares: el titular carga su propio peso.
   Cada lámina se nombra en el riel de viñetas y en su aria-label. */

.display{
  font-family:var(--display); font-weight:700;
  text-transform:uppercase; line-height:.86; letter-spacing:.004em;
  color:var(--paper);
}
.display--hero{ font-size:clamp(3.1rem,10.2vw,10.5rem) }
.display--md  { font-size:clamp(2.4rem,5.6vw,5.6rem); line-height:.9 }
.display--sm  { font-size:clamp(1.9rem,3.6vw,3.4rem); line-height:.96 }

.tint{ color:var(--acc) }

.lead{
  font-size:clamp(.95rem,1.08vw,1.16rem); font-weight:400;
  color:var(--paper-dim); max-width:52ch; line-height:1.62;
}
.lead--center{ margin-inline:auto; text-align:center }

/* --- Enlace con subrayado que se abre --- */
.ulink{
  display:inline-block; align-self:start;
  font-size:clamp(.95rem,1.12vw,1.2rem); font-weight:600;
  letter-spacing:.01em; padding-bottom:.42rem;
}
.ulink__b{
  display:block; height:2px; margin-top:.42rem; background:var(--paper);
  transform:scaleX(.28); transform-origin:left center;
  transition:transform .55s var(--e-out), background-color .3s ease;
}
.ulink:hover .ulink__b,.ulink:focus-visible .ulink__b{ transform:scaleX(1); background:var(--acc) }

/* ==========================================================================
   4 · LÁMINA 1 · INICIO
   ========================================================================== */
.slide__inner--hero{ display:grid; gap:clamp(1.2rem,3vh,2.6rem) }

.display--hero .line{ display:block }
.line--left  { text-align:left }
.line--right { text-align:right }
.display--hero .line--mid{
  display:flex; align-items:baseline; gap:clamp(.5rem,1.4vw,1.4rem);
  justify-content:center;
}
.line--mid .rv:first-child{ flex:0 0 auto }

.spark{ flex:0 0 auto; width:clamp(1.9rem,4.4vw,4.4rem) }
.spark svg{ width:100%; height:auto; fill:var(--acc) }
.slide.is-in .spark svg{ animation:spin 22s linear infinite }

@keyframes spin{ to{ transform:rotate(360deg) } }

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(1.2rem,3vw,3rem); border-top:1px solid var(--hair); padding-top:clamp(1rem,2.4vh,1.8rem);
}
.hero__foot .lead{ flex:1 1 26rem }

/* ==========================================================================
   5 · LÁMINA 2 · MANIFIESTO (partida)
   ========================================================================== */
/* Tesis espacial: libro de asientos del diagnóstico. Declaración arriba,
   tres asientos a todo el ancho, conclusión y salida abajo. El ancho
   completo es lo que separa esta lámina de la retícula de capacidades. */
.slide__inner--manif{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:0; align-content:center;
}
.manif__head{ max-width:24ch; text-wrap:balance }
.manif__cue{
  margin-top:clamp(1rem,2.6vh,1.9rem);
  font-size:clamp(.94rem,1.06vw,1.12rem); font-weight:500; color:var(--paper-dim);
}

/* La marca sustituye al rótulo «El manifiesto 4P» que estaba sobre el titular:
   la lámina se nombra con el signo, no con una etiqueta. El glifo se dibuja
   desde CSS: es decoración, no un nodo de texto. */
.ghost::before{ content:'4P' }
.ghost{
  position:absolute; right:-.06em; top:9%; z-index:0;
  font-family:var(--display); font-weight:700; line-height:.8;
  font-size:clamp(11rem,22vw,22rem); letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:2px rgba(244,247,248,.11);
  pointer-events:none; user-select:none;
  transform:translateY(7%); opacity:0;
  transition:transform 1.7s var(--e-out) .2s, opacity 1.3s ease .2s;
}
.slide.is-in .ghost{ transform:none; opacity:1 }

/* --- Los asientos --- */
.ledger{ margin-top:clamp(1.6rem,4.4vh,3.1rem) }
.ledger__row{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:.35rem clamp(1rem,3.4vw,3.4rem); align-items:baseline;
  padding:clamp(.85rem,2.1vh,1.4rem) 0;
  border-top:1px solid var(--hair);
}
.ledger__row:last-child{ border-bottom:1px solid var(--hair) }

/* Momento autoral de la lámina: tres marcas de acento barren de izquierda a
   derecha, una por asiento, como una página que se compone. */
.ledger__row::before{
  content:''; position:absolute; left:0; top:-2px; width:clamp(2.2rem,4vw,3.6rem); height:3px;
  background:var(--acc); transform:scaleX(0); transform-origin:left center;
}
.slide.is-in .ledger__row::before{
  transform:none;
  transition:transform .85s var(--e-out) calc(var(--i,0) * 130ms + 120ms);
}
.slide.is-out .ledger__row::before{
  transform:scaleX(0); transition:transform .3s var(--e-in);
}

.ledger dt{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.08rem,1.62vw,1.6rem); line-height:1.02; letter-spacing:.015em;
}
.ledger dd{ font-size:clamp(.84rem,.94vw,.95rem); line-height:1.55; color:var(--paper-dim) }

.manif__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(1rem,3vw,3rem); margin-top:clamp(1.5rem,4.2vh,3rem);
}
.manif__foot .lead{ flex:1 1 30rem; max-width:52ch; margin:0 }

/* ==========================================================================
   6 · LÁMINA 3 · LAS 4P
   ========================================================================== */
.plist{ display:grid; gap:clamp(.1rem,.4vh,.5rem); width:100%; margin-block:clamp(.5rem,2vh,1.6rem) }
.plist__item > .rv > span{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.1rem,7vw,6.4rem); line-height:.98;
  color:var(--paper); opacity:.42; letter-spacing:.006em;
  transition:opacity .4s ease, color .4s ease, transform .5s var(--e-out);
  cursor:default;
}
.plist__item:hover > .rv > span,
.plist__item.is-on > .rv > span{ opacity:1; color:var(--acc) }
.plist:hover .plist__item:not(:hover) > .rv > span{ opacity:.22 }

.plist__n{
  font-family:var(--body); font-weight:800;
  font-size:.22em; vertical-align:.9em; letter-spacing:.12em;
  margin-right:.5em; color:var(--paper-mute);
}

.plist__q{
  min-height:3.4em; max-width:46ch; margin-inline:auto;
  font-size:clamp(.92rem,1.05vw,1.1rem); color:var(--paper-dim);
}

/* ==========================================================================
   7 · LÁMINA 4 · CAPACIDADES
   ========================================================================== */
.slide__inner--caps{ display:grid; gap:clamp(1.4rem,4vh,2.8rem) }
.caps__head{ display:grid; gap:.9rem; max-width:46ch }

.caps{
  display:flex; gap:1px; background:var(--hair);
  border-block:1px solid var(--hair); min-height:min(42vh,380px);
}
.cap{
  flex:1 1 0; min-width:0; position:relative;
  display:grid; grid-template-rows:auto auto auto 1fr auto; gap:.55rem;
  padding:clamp(1.1rem,2vw,1.8rem) clamp(.9rem,1.4vw,1.4rem) clamp(1.5rem,3vh,2.4rem);
  background:rgba(5,7,10,.5); backdrop-filter:blur(2px);
  transition:flex-grow .6s var(--e-out), background-color .45s ease;
}
.cap::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--acc); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-out);
}
.cap:hover,.cap:focus-visible{ flex-grow:1.75; background:rgba(13,95,118,.22); outline:none }
.cap:hover::after,.cap:focus-visible::after{ transform:scaleX(1) }

.cap__code{
  font-family:var(--display); font-size:clamp(1.6rem,2.6vw,2.6rem);
  font-weight:700; line-height:1; color:var(--acc);
}
.cap__claim{
  font-size:.7rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-mute);
}
.cap__title{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.05rem,1.5vw,1.5rem); line-height:1.02; letter-spacing:.01em;
}
/* La fila 1fr ya reserva el sitio de la promesa, así que el revelado va por
   opacidad y desplazamiento: nada de animar altura. */
.cap__promise{
  font-size:.86rem; line-height:1.55; color:var(--paper-dim);
  opacity:0; overflow:hidden; transform:translateY(8px);
  transition:opacity .45s ease, transform .55s var(--e-out);
}
.cap:hover .cap__promise,.cap:focus-visible .cap__promise{ opacity:1; transform:none }
.cap__lines{
  margin-top:auto; font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-mute);
}

/* ==========================================================================
   8 · LÁMINA 5 · ÍNDICE IGC
   ========================================================================== */
.slide__inner--igc{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.8rem,5vw,5rem); align-items:center;
}
.igc__copy{ display:grid; gap:clamp(.9rem,2.2vh,1.6rem) }

.igc__panel{ position:relative; justify-self:center; width:min(100%,340px); aspect-ratio:1 }
.dial{ width:100%; height:100%; transform:rotate(-90deg) }
.dial__track,.dial__arc{ fill:none; stroke-width:10; stroke-linecap:round }
.dial__track{ stroke:rgba(244,247,248,.1) }
/* Anillo punteado: el índice todavía no da lectura, así que no se dibuja
   ningún arco de puntaje — sólo un pulso de «en construcción». */
.dial__arc{
  stroke:var(--acc); stroke-dasharray:2 15; stroke-width:6;
  transform-origin:120px 120px; opacity:.8;
  filter:drop-shadow(0 0 10px rgba(155,211,143,.35));
}
.slide.is-in .dial__arc{ animation:dialspin 30s linear infinite }
@keyframes dialspin{ to{ transform:rotate(360deg) } }
.dial__read{
  position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:.1rem;
}
.dial__num{
  font-family:var(--display); font-size:clamp(2.6rem,5.2vw,4.2rem);
  font-weight:700; line-height:.9; letter-spacing:.04em;
}
.dial__den{ font-size:.72rem; font-weight:700; letter-spacing:.2em; color:var(--paper-mute) }
.dial__lvl{
  display:flex; align-items:center; gap:.45rem;
  margin-top:.7rem; font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acc);
  border:1px solid rgba(155,211,143,.35); background:rgba(155,211,143,.08);
  border-radius:999px; padding:.34rem .85rem;
}
.dial__lvl::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 3px rgba(155,211,143,.18);
}

.dims{ display:grid; gap:.55rem }
.dims li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(2rem,18%) 3.6rem;
  align-items:center; gap:.9rem;
  font-size:clamp(.76rem,.9vw,.9rem); color:var(--paper-dim);
}
.dims li b{
  font-family:var(--display); font-size:1.1em; text-align:right;
  letter-spacing:.02em; color:var(--paper); font-variant-numeric:tabular-nums;
}
.dims li i{ display:block; height:0; border-top:1px dashed rgba(244,247,248,.2) }

.igc__note{
  font-size:.82rem; color:var(--paper-mute);
  border-top:1px solid var(--hair); padding-top:1rem;
}
.igc__note a{
  color:var(--paper); font-weight:600;
  border-bottom:1px solid var(--acc); padding-bottom:1px;
  transition:color .3s ease;
}
.igc__note a:hover{ color:var(--acc) }

/* ==========================================================================
   9 · LÁMINA 6 · MÉTODO
   ========================================================================== */
.steps{
  position:relative; width:100%;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.6rem); margin-top:clamp(1.4rem,4vh,3rem);
  text-align:left;
}
.steps::before{
  content:''; position:absolute; left:0; right:0; top:1.15rem; height:1px;
  background:var(--hair); transform:scaleX(0); transform-origin:left;
}
.slide.is-in .steps::before{ transform:none; transition:transform 1.4s var(--e-out) .3s }

.step{ display:grid; gap:.5rem; padding-top:2.6rem; position:relative }
.step b{
  position:absolute; top:0; left:0;
  font-family:var(--display); font-size:1.5rem; font-weight:700; line-height:1;
  color:var(--acc);
}
.step::before{
  content:''; position:absolute; top:1rem; left:2.4rem; width:9px; height:9px;
  border-radius:50%; background:var(--ink); border:2px solid var(--acc);
}
.step h3{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1rem,1.4vw,1.35rem); letter-spacing:.02em; line-height:1;
}
.step p{ font-size:.83rem; color:var(--paper-dim); line-height:1.5 }

/* ==========================================================================
   10 · LÁMINA 7 · CIFRAS
   ========================================================================== */
.stats{
  width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--hair); border-block:1px solid var(--hair);
  margin-block:clamp(1rem,3vh,2.2rem);
}
.stat{
  background:rgba(5,7,10,.45); padding:clamp(1.2rem,2.4vw,2.2rem) clamp(1rem,1.8vw,1.8rem);
  display:grid; gap:.45rem; text-align:left;
}
.stat b{
  font-family:var(--display); font-weight:700; line-height:.9;
  font-size:clamp(2.6rem,5.4vw,4.6rem); color:var(--acc);
  font-variant-numeric:tabular-nums;
}
.stat__k{ font-size:.82rem; font-weight:600; color:var(--paper) }
.stat__vs{ font-size:.76rem; color:var(--paper-mute); line-height:1.5 }

/* ==========================================================================
   11 · LÁMINA 8 · PRESENCIA
   ========================================================================== */
.reach{
  width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.8rem,2vw,2rem); margin-top:clamp(1.2rem,4vh,2.6rem); text-align:left;
}
.reach li{ display:grid; gap:.4rem; border-top:1px solid var(--hair); padding-top:1rem }
.reach b{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,2.4rem); line-height:1; letter-spacing:.01em;
}
.reach span{ font-size:.76rem; color:var(--paper-mute) }

/* ==========================================================================
   12 · LÁMINA 9 · CONTACTO
   ========================================================================== */
.bigcta{ display:inline-block; margin-block:clamp(.4rem,1.6vh,1.2rem) }
.bigcta__t{
  display:block; font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(3.4rem,12vw,11rem); line-height:.86; letter-spacing:.004em;
}
.bigcta__b{
  display:block; height:clamp(6px,.8vw,12px); background:var(--paper); margin-top:.1em;
  transform:scaleX(.4); transition:transform .7s var(--e-out), background-color .4s ease;
}
.bigcta:hover .bigcta__b,.bigcta:focus-visible .bigcta__b{ transform:scaleX(1); background:var(--acc) }

.contacto{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1rem,3vw,3.2rem); margin-top:clamp(.6rem,2.4vh,1.6rem);
  border-top:1px solid var(--hair); padding-top:clamp(.9rem,2.4vh,1.5rem);
}
.contacto li{ display:grid; gap:.3rem; text-align:center }
.contacto__k{
  font-size:.7rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-mute);
}
.contacto a{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.1rem,1.8vw,1.6rem); letter-spacing:.02em; line-height:1.1;
  border-bottom:2px solid transparent; transition:border-color .35s ease, color .35s ease;
}
.contacto a:hover,.contacto a:focus-visible{ color:var(--acc); border-bottom-color:var(--acc) }

/* Cadena informativa larga: se lee en caja baja, no en versales. */
.cta__legal{
  font-size:.75rem; font-weight:500; letter-spacing:.04em;
  color:var(--paper-mute); margin-top:clamp(.6rem,3vh,2rem);
}

/* ==========================================================================
   13 · MARCO FIJO
   ========================================================================== */
.frame{ position:fixed; inset:0; z-index:20; pointer-events:none }
.frame > *{ pointer-events:auto }

.frame__progress{ position:absolute; inset:0 0 auto; height:2px; background:rgba(244,247,248,.08) }
.frame__progress i{
  display:block; height:100%; width:100%; background:var(--acc);
  transform:scaleX(.1111); transform-origin:left center;
  transition:transform .7s var(--e-out), background-color .6s ease;
}

/* --- Logotipo completo: símbolo + nombre (recorte del arte oficial) --- */
.brand{
  position:absolute; left:clamp(1rem,2vw,2rem); top:clamp(1rem,1.9vw,1.8rem);
  display:flex; align-items:center; gap:clamp(.5rem,.8vw,.8rem);
}
.brand__mark{
  width:clamp(28px,2.6vw,38px); height:auto;
  transition:transform .5s var(--e-out);
}
.brand:hover .brand__mark{ transform:rotate(-8deg) }

/* El arte «completo» es vertical (símbolo / nombre / claim): se recorta la
   banda del nombre — y = 839–1183 de 1617×1329 — para armar un lockup
   horizontal sin rehacer el logotipo. */
.brand__word{
  --lw:clamp(58px,5.4vw,76px);
  display:block; width:var(--lw); height:calc(var(--lw) * .21336);
  background:url("../assets/TRUST4P_completo_blanco.png") no-repeat;
  background-size:var(--lw) auto;
  background-position:0 calc(var(--lw) * -.51886);
}

.frame__vert{
  position:absolute; left:clamp(1rem,2vw,2rem); top:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:.7rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper-mute); white-space:nowrap;
}

.frame__down{
  position:absolute; left:clamp(1rem,2vw,2rem); bottom:clamp(1.1rem,2.4vw,2rem);
  width:2.4rem; height:2.4rem; display:grid; place-items:center;
}
.frame__down svg{ width:1.5rem; height:1.5rem; fill:none; stroke:var(--paper); stroke-width:1.6 }
.frame__down::after{
  content:''; position:absolute; inset:0; border:1px solid var(--hair); border-radius:50%;
  transform:scale(.8); opacity:0; transition:transform .4s var(--e-out), opacity .4s ease;
}
.frame__down:hover::after{ transform:none; opacity:1 }
.frame__down svg{ animation:nudge 2.6s ease-in-out infinite }
@keyframes nudge{ 0%,100%{ transform:translateY(-2px) } 50%{ transform:translateY(3px) } }
.frame__down.is-end svg{ transform:rotate(180deg); animation:none }

.burger{
  position:fixed; right:clamp(1rem,2vw,2rem); top:clamp(1.1rem,2vw,1.9rem);
  width:2.6rem; height:2.6rem; display:grid; align-content:center; gap:.42rem; z-index:60;
  pointer-events:auto;
}
.burger i{
  display:block; height:2px; background:var(--paper); width:100%;
  transform-origin:right center;
  transition:transform .45s var(--e-out), background-color .3s;
}
.burger i:last-child{ transform:scaleX(.62) }
.burger:hover i:last-child{ transform:scaleX(1) }
.burger[aria-expanded="true"] i{ transform-origin:center }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(5px) rotate(45deg) }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-5px) rotate(-45deg) }

.frame__count{
  position:absolute; right:clamp(1rem,2vw,2rem); bottom:clamp(1.1rem,2.4vw,2rem);
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.16em; color:var(--paper-mute);
}
.frame__count b{ color:var(--paper); font-size:.82rem }
.frame__count i{ width:1.6rem; height:1px; background:var(--hair) }

/* --- Viñetas laterales --- */
.bullets{
  position:absolute; right:clamp(1.15rem,2.15vw,2.15rem); top:50%; transform:translateY(-50%);
  display:grid; gap:.85rem; justify-items:end;
}
.bullets button{
  display:flex; align-items:center; gap:.6rem; height:10px;
}
.bullets .dot{
  width:8px; height:8px; border-radius:50%; border:1px solid rgba(244,247,248,.45);
  transition:background-color .35s ease, border-color .35s ease, transform .35s var(--e-out);
}
.bullets .lbl{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-mute); opacity:0; transform:translateX(8px);
  transition:opacity .3s ease, transform .35s var(--e-out); white-space:nowrap;
}
.bullets button:hover .lbl,.bullets button:focus-visible .lbl{ opacity:1; transform:none }
.bullets button:hover .dot{ border-color:var(--paper) }
.bullets button[aria-current="true"] .dot{ background:var(--acc); border-color:var(--acc); transform:scale(1.35) }

/* ==========================================================================
   14 · MENÚ A PANTALLA COMPLETA
   ========================================================================== */
.menu{
  position:fixed; inset:0; z-index:50;
  display:grid; align-content:center; justify-items:center; gap:2rem;
  background:rgba(5,7,10,.82); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .45s ease;
}
.menu[hidden]{ display:none }
.menu.is-open{ opacity:1 }

.menu__nav{ display:grid; gap:clamp(.1rem,.6vh,.6rem); justify-items:center }
.menu__nav a{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,6.4vw,5.4rem); line-height:1; letter-spacing:.008em;
  color:var(--paper); opacity:.5; transition:opacity .35s ease, color .35s ease;
}
.menu__nav a:hover,.menu__nav a:focus-visible{ opacity:1; color:var(--acc) }
.menu__nav .rv > span{ transform:translateY(110%); transition:transform .7s var(--e-out) }
.menu.is-open .rv > span{ transform:none }
.menu__nav a:nth-child(1) .rv > span{ transition-delay:.06s }
.menu__nav a:nth-child(2) .rv > span{ transition-delay:.12s }
.menu__nav a:nth-child(3) .rv > span{ transition-delay:.18s }
.menu__nav a:nth-child(4) .rv > span{ transition-delay:.24s }
.menu__nav a:nth-child(5) .rv > span{ transition-delay:.30s }
.menu__nav a:nth-child(6) .rv > span{ transition-delay:.36s }

.menu__foot{
  font-size:.75rem; font-weight:500; letter-spacing:.02em;
  color:var(--paper-mute); opacity:0; transition:opacity .5s ease .42s;
}
.menu.is-open .menu__foot{ opacity:1 }

/* ==========================================================================
   15 · BURBUJA DE CURSOR
   ========================================================================== */
.orb{
  position:fixed; z-index:40; left:0; top:0; width:118px; height:118px; border-radius:50%;
  display:grid; place-items:center; pointer-events:none;
  background:rgba(244,247,248,.78); backdrop-filter:blur(3px);
  transform:translate3d(-50%,-50%,0) scale(0);
  transition:transform .45s var(--e-out); opacity:0;
}
.orb.is-on{ transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) scale(1); opacity:1 }
.orb span{
  font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
}

/* ==========================================================================
   16 · CARGA
   ========================================================================== */
body.is-loading .slide.is-in .rv > span,
body.is-loading .slide.is-in [data-a]:not(.rv){ transition-duration:0s }

/* ==========================================================================
   17 · ADAPTACIÓN
   ========================================================================== */
@media (max-width:1180px){
  /* El dial se achica, pero el índice NO se apila: apilado mide 696 px y a
     1024×768 la lámina sólo tiene 605 px de caja útil. */
  .slide__inner--igc{ gap:clamp(1.2rem,3.2vw,3rem) }
  .igc__panel{ width:min(100%,240px) }
  .manif__head{ max-width:100% }
  .ghost{ font-size:17rem }
}

@media (max-width:900px){
  .slide__inner--igc{ grid-template-columns:1fr; gap:clamp(1.2rem,3vh,2rem) }
  .igc__panel{ width:min(58%,240px) }
  /* El asiento se apila: rótulo sobre descripción, la marca de acento
     sigue midiendo el borde superior de cada fila. */
  .ledger__row{ grid-template-columns:1fr; gap:.3rem }
  .manif__foot{ flex-direction:column; align-items:flex-start }
  .manif__foot .lead{ flex:0 0 auto }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:1.6rem }
  .steps::before{ display:none }
  .stats{ grid-template-columns:1fr }
  .reach{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .caps{ flex-direction:column; gap:1px }
  .cap{ padding:1.1rem 1.15rem }
  .cap__promise{ opacity:1; transform:none; overflow:visible }
  .cap__lines{ margin-top:.3rem }
  .hero__foot{ flex-direction:column; align-items:flex-start }
  .hero__foot .lead{ flex:0 0 auto }
  .frame__vert{ display:none }
  .bullets .lbl{ display:none }
}

/* --- Modo desplazamiento (táctil / pantallas bajas): la baraja se abre --- */
body.mode-scroll{ overflow:auto; overflow-x:hidden }
body.mode-scroll .deck{ position:static; inset:auto }
body.mode-scroll .backdrop{ position:fixed }
body.mode-scroll .slide{
  position:relative; inset:auto; display:grid; align-content:center;
  min-height:100svh; padding:clamp(4.5rem,14vh,7rem) clamp(1.1rem,5vw,2.5rem);
}
body.mode-scroll .slide[hidden]{ display:grid }
body.mode-scroll .bullets,
body.mode-scroll .frame__count,
body.mode-scroll .frame__down{ display:none }
body.mode-scroll .frame{ position:fixed; inset:0 0 auto; height:auto; background:linear-gradient(to bottom,rgba(5,7,10,.9),transparent) }
body.mode-scroll .ghost{ font-size:9rem; top:-.08em; right:-.14em }
body.mode-scroll .display--hero{ font-size:clamp(2.7rem,13vw,5rem) }
body.mode-scroll .line--right,body.mode-scroll .line--mid{ justify-content:flex-start; text-align:left }
body.mode-scroll .bigcta__t{ font-size:clamp(3rem,17vw,6rem) }
body.mode-scroll .plist__item > .rv > span{ opacity:1 }
body.mode-scroll .plist__q{ display:none }

/* --- Movimiento reducido --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important }
  .rv > span{ transform:none !important }
  [data-a]:not(.rv){ transform:none !important }
  /* Los barridos de entrada viven en pseudo-elementos: se muestran ya
     trazados. Los estados de hover siguen respondiendo, sólo sin recorrido. */
  .ledger__row::before,.steps::before{ transform:none !important; transition:none !important }
  .cap__promise{ transition:none !important }
  .ghost{ opacity:1 !important; transform:none !important }
  .backdrop__aurora{ transition:background-color .2s ease !important }
  .slide.is-in [data-a]:not(.rv),.slide.is-out [data-a]:not(.rv){ transition-duration:.2s }
  .slide.is-out [data-a]:not(.rv){ opacity:0 }
  .orb{ display:none }
}