/* StratBrand · fusión de "Cada vuelta suma" (noche, partículas, Jost) con "Ecuador y Miami"
   (editorial blanco y negro, Inter Tight gigante en mayúsculas, rótulos mono, bloques verde y violeta).
   Reglas: Jost para leer, Inter Tight para gritar, mono para rotular. El verde marca crecimiento,
   el violeta datos. Nada de degradados en bloques de texto ni sombras de adorno. */
@font-face { font-family: "Inter Tight SB"; src: url("/fonts/inter-tight-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --d: "Inter Tight SB", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --paper: #FFFFFF;
  --paper-2: #F1F1F1;
  --black: #050505;
  --signal-ink: #0B7A30;
}

/* ---------- tipografía display (propuesta 1) ---------- */
.scene__t, .sec__title, .end__title, .cap-row__t, .res__n, .mani__w, .kit__p {
  font-family: var(--d); font-weight: 800; text-transform: uppercase; letter-spacing: -0.045em; font-variation-settings: normal;
}
.scene__t { line-height: 0.86; }
.scene__t .dot, .sec__title .dot, .mani__w .dot { color: var(--verde); }
.sec__title { font-size: clamp(2.5rem, 6.2vw, 5.8rem); line-height: 0.9; max-width: 15ch; }
.end__title { line-height: 0.88; }
.cap-row__t { font-size: clamp(2rem, 5vw, 4.4rem); line-height: 0.95; }
.res__n { letter-spacing: -0.05em; }

/* rótulos mono (propuesta 1): mayúsculas, espaciado amplio, un cuadro de color */
.chap { font-family: var(--m); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.chap::before { content: ""; width: 8px; height: 8px; background: var(--verde); flex: none; }

/* barra: enlaces mono en mayúsculas */
.bar__nav .link { font-family: var(--m); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.bar__nav .link--ac { border: 1px solid currentColor; padding: 7px 10px; border-radius: 2px; }
.bar__mid { font-family: var(--m); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* secciones claras más editoriales: blanco papel y gris neutro en vez de lavanda */
.sec { background: var(--paper); }
.sec--grey { background: var(--paper-2); }
.sec--dark { background: var(--noche); }

/* ---------- manifiesto: escenas a pantalla completa (propuesta 1) ---------- */
.mani { position: relative; color: var(--black); }
.mani__frame { min-height: 100vh; padding: calc(var(--bar-h) + 6vh) var(--gutter) 10vh; display: flex; flex-direction: column; justify-content: center; position: relative; }
.mani__frame[data-bg="paper"] { background: var(--paper); color: var(--black); }
.mani__frame[data-bg="black"] { background: var(--black); color: #fff; }
.mani__frame[data-bg="green"] { background: var(--verde); color: var(--black); }
.mani__frame[data-bg="violet"] { background: var(--violeta); color: #fff; }
.mani__k { font-family: var(--m); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; position: absolute; top: calc(var(--bar-h) + 28px); left: var(--gutter); }
.mani__w { font-size: clamp(3.6rem, 14.5vw, 15rem); line-height: 0.84; margin: 0; }
.mani__w > span { display: block; }
.mani__sub { font-family: var(--f); font-size: clamp(1.1rem, 1.6vw, 1.45rem); max-width: 32ch; margin-top: 32px; line-height: 1.4; }
.mani__hud { display: none; }

/* con JS y movimiento permitido: una sola pantalla fija que cambia de escena al bajar */
.mani.is-live { height: 420vh; }
.mani.is-live .mani__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--paper); }
.mani.is-live .mani__frame { position: absolute; inset: 0; min-height: 0; background: transparent; visibility: hidden; }
.mani.is-live .mani__frame:first-child { visibility: visible; }
.mani.is-live .mani__w .ln { display: block; overflow: hidden; padding-bottom: 0.04em; }
.mani.is-live .mani__hud { display: block; position: absolute; right: var(--gutter); bottom: 28px; font-family: var(--m); font-size: 0.74rem; letter-spacing: 0.12em; }

/* ---------- academy en la portada ---------- */
.acad__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 64px; align-items: end; }
@media (max-width: 860px) { .acad__grid { grid-template-columns: 1fr; } }

/* kits → pasos: el precio en display */
.kit__p { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.04em; }

@media (prefers-reduced-motion: reduce) {
  .mani.is-live { height: auto; }
  .mani.is-live .mani__pin { position: static; height: auto; }
  .mani.is-live .mani__frame { position: relative; visibility: visible; min-height: 100vh; }
}

/* las palabras de la espiral en mayúsculas necesitan más ancho */
@media (min-width: 761px) {
  .anim .scene, .scene { width: min(60rem, 62vw); }
  .scene__t--xl { font-size: clamp(3rem, 7.2vw, 8rem); }
  .scene__t { font-size: clamp(2.2rem, 4.2vw, 4.4rem); }
}

@media (max-width: 760px) {
  .anim .scene__t--xl, .scene__t--xl { font-size: clamp(2.3rem, 11.5vw, 3.8rem); }
  .bar .bar__nav .link.link--ac { display: inline-flex; font-size: 0.66rem; padding: 6px 8px; margin-right: 6px; }
  .mani__w { font-size: clamp(3rem, 15vw, 6rem); }
}