/* CAMBIO DE MIRADA. · Portada: caos → criterio → solución
   Blanco puro, negro y un único trazo bermellón. Tipografía: tipografia.css (decisión 053). */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --soft: #6b6b6b;
  --muted: #6b6b6b;
  --verm: #c23b2a;

  --margin: clamp(24px, 4.4vw, 64px);
  --top: clamp(22px, 3vh, 30px);
  --header-h: 114px;            /* 44 de aire + 28 de logotipo + 42 de aire (propuesta A) */
}
@media (max-width: 760px) { :root { --margin: 24px; --header-h: 80px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--w-text) var(--fs-body)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, p { margin: 0; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--verm); outline-offset: 4px; }

.skip {
  position: absolute; left: var(--margin); top: -80px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  font: var(--w-mid) var(--fs-label)/1 var(--font); letter-spacing: var(--tr-label); text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

.dot { color: var(--verm); }

/* ---------- Cabecera (propuesta A) ---------- */

.header {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 2px var(--margin) 0;
  background: var(--paper);          /* la maraña nunca invade la cabecera */
}
.brand { display: flex; align-items: center; gap: 20px; text-decoration: none; white-space: nowrap; }
/* Solo se fija la altura; la proporción del lettering (810,53 : 106,6) se respeta siempre. */
.logo-img { display: block; height: 28px; width: auto; aspect-ratio: 810.53 / 106.6; }
.baseline {
  padding-left: 20px; border-left: 1px solid rgba(0, 0, 0, .25);
  font: var(--w-mid) var(--fs-label)/1 var(--font); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted);
}
@media (max-width: 1080px) { .baseline { display: none; } }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font: var(--w-mid) var(--fs-label)/1 var(--font); letter-spacing: var(--tr-label); text-transform: uppercase;
  text-decoration: none; padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .3s;
}
.nav a:hover { background-size: 100% 1px; }
.nav .nav-cta { background: var(--ink); color: var(--paper); padding: 12px 16px; transition: background-color .2s; }
.nav .nav-cta:hover { background-color: #222; }

.menu-btn { all: unset; cursor: pointer; display: none; width: 44px; height: 44px; place-items: center; margin-right: -11px; }
.menu-btn span { display: block; width: 22px; height: 9px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.menu-btn:focus-visible, .menu-close:focus-visible { outline: 1px solid var(--verm); outline-offset: 2px; }

@media (max-width: 760px) {
  .logo-img { height: 21px; }
  .nav { display: none; }
  .menu-btn { display: grid; }
}

/* Menú móvil a pantalla completa */
.menu {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 0 var(--margin) 30px;
}
.menu-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding-top: 2px; }
.menu-close { all: unset; cursor: pointer; position: relative; width: 44px; height: 44px; margin-right: -11px; }
.menu-close::before, .menu-close::after { content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 1.5px; background: var(--ink); transform: rotate(45deg); }
.menu-close::after { transform: rotate(-45deg); }
.menu-nav { display: flex; flex-direction: column; padding-top: 40px; }
.menu-nav a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid #e6e6e6;
  font: var(--w-mid) 28px/1.15 var(--font); letter-spacing: var(--tr-title); text-decoration: none;
}
.menu-nav a span { font: var(--w-mid) var(--fs-label)/1 var(--font); letter-spacing: var(--tr-label); color: var(--muted); }
.menu-nav .menu-go {
  margin-top: 30px; align-self: flex-start; border: 0;
  display: inline-flex; align-items: center; gap: 18px; padding: 18px 24px;
  background: var(--ink); color: var(--paper);
  font: var(--w-mid) var(--fs-label)/1 var(--font); letter-spacing: var(--tr-btn); text-transform: uppercase;
}
.menu-foot { margin-top: auto; padding-top: 32px; font-size: var(--fs-note); color: var(--muted); }
body.menu-open { overflow: hidden; }

/* ---------- Secuencia ---------- */

.stage { position: relative; height: 420vh; }
@media (max-width: 760px) { .stage { height: 360vh; } }

.pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

.drawing { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.strokes path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.marks path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.marks circle { fill: var(--ink); }
.point { fill: var(--verm); }

/* Máscaras: los textos entran y salen línea a línea, ligados al scroll */
.mask { display: block; overflow: hidden; }
.roll { display: block; will-change: transform; }

.step {
  position: absolute; left: var(--margin); top: calc(var(--header-h) + 14px);
  font: var(--w-mid) 12px/1.2 var(--font); letter-spacing: .04em;
  display: grid;
}
.step .mask { grid-area: 1 / 1; }

.copy {
  position: absolute; left: var(--margin); right: var(--margin);
  bottom: clamp(96px, 15vh, 140px);
}
.block { position: absolute; left: 0; bottom: 0; width: min(100%, 15.5em); font-size: var(--fs-hero); }
.block[data-block="2"] { width: min(100%, 11.5em); }
.block:not(.is-active) { pointer-events: none; }
.block:not(.is-active) .cta { visibility: hidden; }

.title {
  font: var(--w-title) 1em/var(--lh-title) var(--font);
  letter-spacing: var(--tr-title);
}
/* La máscara deja aire para tildes y descendentes, que no deben asomar al salir. */
.title .line { display: block; overflow: hidden; padding: .1em 0 .22em; margin: -.1em 0 -.22em; }
.title .line > span { display: block; will-change: transform; }
.title .soft { color: var(--soft); }
/* Momento 02: la idea, en peso intermedio; los momentos 01 y 03 son los titulares. */
.block[data-block="2"] .title { font-weight: var(--w-mid); }

.lead {
  margin-top: clamp(18px, 2.6vh, 26px);
  max-width: 30em;
  font: var(--w-text) clamp(15px, 1.15vw, 17px)/1.55 var(--font);
  color: #2b2926;
}
.cta {
  margin-top: clamp(22px, 3.4vh, 34px);
  display: inline-flex; align-items: center; gap: 22px;
  padding: 18px 28px;
  background: var(--ink); color: var(--paper);
  font: var(--w-mid) var(--fs-label)/1 var(--font); letter-spacing: var(--tr-btn); text-transform: uppercase; text-decoration: none;
  transition: background-color .25s;
}
.cta:hover { background: #000; }
.arrow { position: relative; width: 14px; height: 1px; background: currentColor; transition: transform .25s; }
.arrow::after {
  content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
}
.cta:hover .arrow { transform: translateX(4px); }
.rise { will-change: transform, opacity; }

.foot {
  position: absolute; left: var(--margin); bottom: clamp(36px, 5.4vh, 48px);
  display: flex; align-items: center; gap: 16px;
}
.rule { width: 24px; height: 1px; background: var(--ink); }
.captions { display: grid; font: var(--w-mid) 9px/1.2 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.captions .mask { grid-area: 1 / 1; }

.next {
  all: unset; cursor: pointer;
  position: absolute; right: var(--margin); bottom: clamp(30px, 4.8vh, 42px);
  width: 24px; height: 36px;
}
.next span { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--ink); }
.next span::after {
  content: ""; position: absolute; left: -4px; bottom: 0; width: 8px; height: 8px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); transform-origin: 50% 50%;
}
.next:focus-visible { outline: 1px solid var(--verm); outline-offset: 4px; }

@media (max-width: 760px) {
  .block { width: 100%; }
  .step { top: calc(var(--header-h) + 10px); }
  .block[data-block="2"] { width: 100%; }
  .copy { bottom: clamp(92px, 13vh, 120px); }
}

/* ---------- Sin JavaScript: el mensaje final, estático ---------- */
html:not(.js) .stage { height: auto; }
html:not(.js) .pin { position: relative; min-height: 100svh; }
html:not(.js) .block[data-block="1"], html:not(.js) .block[data-block="2"],
html:not(.js) .step, html:not(.js) .foot, html:not(.js) .next { display: none; }
html:not(.js) .block[data-block="3"] { position: relative; }

/* Qué hacemos, visible desde el primer instante */
/* En la fila del número de momento, fuera del alcance de la maraña. */
.kicker {
  position: absolute; left: calc(var(--margin) + 44px); top: calc(var(--header-h) + 14px); z-index: 2;
  font: var(--w-mid) var(--fs-label)/1.2 var(--font); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted);
}
/* Fondo blanco ajustado al texto: los trazos pasan por detrás sin cortar la lectura. */
.kicker .roll { display: inline-block; background: var(--paper); padding: 2px 6px 2px 0; }   /* inline-block: así la máscara puede desplazarla */
.cta-note { margin-top: 14px; font-size: var(--fs-note); color: var(--muted); }
@media (max-width: 760px) { .kicker { left: var(--margin); top: calc(var(--header-h) + 32px); right: var(--margin); font-size: 10px; letter-spacing: .12em; line-height: 1.5; } }

/* Mensaje final: el bloque queda siempre bajo la línea bermellón, que la animación fija a ~40 % del alto.
   En pantallas bajas, el titular se ajusta a la altura disponible y el bloque se acerca al pie. */
@media (min-width: 761px) { .block[data-block="3"] .lead { max-width: 40em; } }
.block[data-block="3"] { font-size: min(var(--fs-hero), 6.2vh); }   /* tres líneas de titular */
@media (max-width: 760px) { .block[data-block="3"] { font-size: min(var(--fs-hero), 5.6vh); } }
.copy { bottom: clamp(72px, 12vh, 140px); }
@media (max-width: 760px) { .copy { bottom: clamp(64px, 11vh, 120px); } }
/* Pantallas bajas (móviles de hasta 700 px de alto y portátiles de hasta 800): el texto de apoyo, el botón
   y la nota se compactan para que el mensaje final quede bajo la línea bermellón sin achicar el titular. */
@media (max-width: 760px) and (max-height: 700px), (min-width: 761px) and (max-height: 800px) {
  .block[data-block="3"] .lead { margin-top: 12px; font-size: 14px; line-height: 1.45; }
  .block[data-block="3"] .cta { margin-top: 14px; padding: 14px 22px; }
  .block[data-block="3"] .cta-note { margin-top: 8px; font-size: 12px; }
}
/* Móviles de 568 px de alto (iPhone SE de primera generación): el titular final baja a ~27 px. */
@media (max-width: 760px) and (max-height: 600px) {
  .block[data-block="3"] { font-size: min(var(--fs-hero), 4.8vh); }
  .block[data-block="3"] .lead { font-size: 13px; line-height: 1.4; }
  .block[data-block="3"] { bottom: -8px; }   /* solo el mensaje final se acerca al pie */
}