/* ═══════════════════════════════════════════════════════════════════════════
   BLACK OPS — MASA BLANDA
   La forma se infla. La letra es plana.
   Fuente de verdad: DESIGN.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* ---- Color. Sin un solo tono. Tinta, chalk y humo. ---- */
  --ink:          #060606;  /* el vacío */
  --ink-raised:   #0E0E0E;  /* masa apoyada sobre el vacío */
  --ink-lifted:   #161616;  /* masa por encima de otra masa */
  --chalk:        #FAFAF8;  /* el blanco del logo, tibio por un pelo */

  --smoke-70: rgba(250, 250, 248, 0.70);
  --smoke-48: rgba(250, 250, 248, 0.48);
  --smoke-30: rgba(250, 250, 248, 0.30);
  --smoke-16: rgba(250, 250, 248, 0.16);
  --smoke-08: rgba(250, 250, 248, 0.08);
  --smoke-04: rgba(250, 250, 248, 0.04);

  /* ---- Volumen. Una sola luz, arriba a la izquierda, nunca se mueve. ---- */
  --lift-1:
    0 2px 10px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(250, 250, 248, 0.07);
  --lift-2:
    0 14px 40px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(250, 250, 248, 0.10);
  --lift-3:
    0 36px 90px rgba(0, 0, 0, 0.66),
    inset 0 2px 0 rgba(250, 250, 248, 0.13);

  /* La panza de luz que convierte una superficie en un objeto. */
  --inflate: radial-gradient(
    125% 125% at 28% 12%,
    rgba(250, 250, 248, 0.13) 0%,
    rgba(250, 250, 248, 0.04) 42%,
    rgba(250, 250, 248, 0.00) 72%
  );
  --inflate-strong: radial-gradient(
    120% 120% at 26% 10%,
    rgba(250, 250, 248, 0.22) 0%,
    rgba(250, 250, 248, 0.07) 40%,
    rgba(250, 250, 248, 0.00) 70%
  );

  /* ---- Forma. Nada por debajo de 16px salvo el anillo de foco. ---- */
  --r-soft:    24px;
  --r-blob:    48px;
  --r-mass:    96px;
  --r-pill:    999px;
  --r-organic: 58% 42% 47% 53% / 44% 51% 49% 56%;

  /* ---- Tipografía. Una sola familia. ---- */
  --font: 'Sora', system-ui, -apple-system, sans-serif;

  --t-colossal: clamp(34px, 6vw + 8px, 112px);
  --t-display:  clamp(40px, 6.5vw, 96px);
  --t-title:    clamp(28px, 3.6vw, 48px);
  --t-sub:      clamp(20px, 2.2vw, 28px);
  --t-lead:     clamp(19px, 1.6vw, 23px);
  --t-body:     17px;
  --t-label:    12px;
  --t-micro:    11px;

  /* ---- Espacio. Base 8. El aire es parte del argumento. ---- */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 40px;
  --s5: 64px;  --s6: 96px;  --s7: 144px; --s8: 200px;

  --section:      clamp(96px, 14vw, 200px);
  --section-tight: clamp(64px, 9vw, 120px);
  --gutter:       clamp(20px, 5vw, 56px);
  --spine:        1240px;
  --spine-narrow: 760px;
  --nav-h:        76px;

  /* ---- Movimiento. Las cosas tienen masa. ---- */
  --ease-inflate: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-settle:  cubic-bezier(0.16, 1.00, 0.30, 1);
  --ease-breathe: cubic-bezier(0.45, 0.00, 0.55, 1);
  --d-quick: 240ms;
  --d-base:  420ms;
  --d-slow:  700ms;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. RESET
   ─────────────────────────────────────────────────────────────────────────── */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El fondo vive en <html> y no en <body>: así puede cambiar de tono, despacio,
     según la sección activa (ver 14. PANTALLAS). */
  background-color: var(--ink);
  transition: background-color var(--d-slow) var(--ease-settle);
}
html[data-tone="raised"] { background-color: var(--ink-raised); }

body {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--smoke-70);
  /* Mayúscula por defecto en todo el sitio. Se sale de la regla quien lo pide
     explícitamente (.prose, .lower), no al revés: así ninguna línea corta
     nueva se cae del sistema por olvidarse una clase. */
  text-transform: uppercase;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

/* El anillo de foco es la única excepción a "nada por debajo de 16px". */
:focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 4px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--chalk); color: var(--ink); }

/* ───────────────────────────────────────────────────────────────────────────
   3. TIPOGRAFÍA
   Mayúscula en todo. La única excepción es .prose (párrafos largos).
   El tracking se invierte según el tamaño: negativo en grande, positivo en chico.
   ─────────────────────────────────────────────────────────────────────────── */

/* Mayúscula por elemento Y por clase. Sin las clases acá, cualquier <p> o
   <span> que use .t-title o .t-display se cae de la regla central del sistema. */
h1, h2, h3, h4, h5, h6,
.t-colossal, .t-display, .t-title, .t-sub, .t-figure {
  font-family: var(--font);
  color: var(--chalk);
  text-transform: uppercase;
  text-wrap: balance;
}

h1, .t-colossal {
  font-size: var(--t-colossal);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.86;
}

h2, .t-display {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.94;
}

h3, .t-title {
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

h4, .t-sub {
  font-size: var(--t-sub);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.t-lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--smoke-70);
  text-transform: uppercase;
  text-wrap: pretty;
}

.t-label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--smoke-30);
}

.t-micro {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--smoke-30);
}

.t-chalk  { color: var(--chalk); }
.t-smoke  { color: var(--smoke-48); }
.t-faint  { color: var(--smoke-30); }
.t-num    { font-variant-numeric: tabular-nums; }

/* Cifras grandes. Mismo peso que el display, nunca otro tratamiento. */
.t-figure {
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.88;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}

/* ---- La excepción: prosa larga en capitalización normal. ----
   Artículos de resources/, definiciones del glosario, respuestas largas de FAQ.
   Las mayúsculas corridas matan la silueta de palabra y cuestan SEO. */
.prose {
  max-width: var(--spine-narrow);
  text-transform: none;
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--smoke-70);
}
.prose > * + * { margin-top: var(--s3); }
.prose h2, .prose h3, .prose h4 { text-transform: uppercase; }
.prose h2 { margin-top: var(--s6); font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.015em; }
.prose h3 { margin-top: var(--s5); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.005em; }
.prose strong { color: var(--chalk); font-weight: 600; }
.prose a {
  color: var(--chalk);
  box-shadow: inset 0 -1px 0 var(--smoke-30);
  transition: box-shadow var(--d-quick) var(--ease-settle);
}
.prose a:hover { box-shadow: inset 0 -2px 0 var(--chalk); }
.prose ul, .prose ol { padding-left: var(--s3); }
.prose li + li { margin-top: var(--s1); }
.prose li { list-style: none; position: relative; }
.prose ul > li::before {
  content: '';
  position: absolute;
  left: calc(var(--s3) * -1);
  top: 0.7em;
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--smoke-30);
}

/* ───────────────────────────────────────────────────────────────────────────
   4. LAYOUT
   Columna generosa con permiso para romperse. Asimetría deliberada.
   ─────────────────────────────────────────────────────────────────────────── */

.spine {
  width: 100%;
  max-width: var(--spine);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.spine--narrow { max-width: calc(var(--spine-narrow) + var(--gutter) * 2); }
.spine--wide   { max-width: 1600px; }

.section        { padding-block: var(--section); }
.section--tight { padding-block: var(--section-tight); }

.stack       { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, var(--s3)); }

.row {
  display: flex;
  align-items: center;
  gap: var(--gap, var(--s2));
  flex-wrap: wrap;
}

/* Rejilla asimétrica: la columna de contenido no está centrada a propósito. */
.split {
  display: grid;
  gap: var(--s5) var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split          { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--offset  { grid-template-columns: 5fr 7fr; }
  .split--lead    { grid-template-columns: 7fr 5fr; }
  .split--sticky > :first-child { position: sticky; top: calc(var(--nav-h) + var(--s4)); }
}

.grid-masses {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* ───────────────────────────────────────────────────────────────────────────
   5. MASA
   Reemplaza a la card. Sin borde, sin contorno, sin esquina dura.
   El agrupamiento sale del volumen y la proximidad, no de una caja.
   ─────────────────────────────────────────────────────────────────────────── */

.mass {
  position: relative;
  background-color: var(--ink-raised);
  background-image: var(--inflate);
  border-radius: var(--r-blob);
  box-shadow: var(--lift-1);
  padding: var(--s4);
  transition:
    transform var(--d-base) var(--ease-inflate),
    box-shadow var(--d-base) var(--ease-settle),
    background-color var(--d-base) var(--ease-settle);
}

.mass--lifted { background-color: var(--ink-lifted); box-shadow: var(--lift-2); }
.mass--deep   { border-radius: clamp(48px, 8vw, 96px); padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 64px); }
.mass--soft   { border-radius: var(--r-soft); padding: var(--s3); }
.mass--pill   { border-radius: var(--r-pill); padding: var(--s2) var(--s4); }
.mass--organic{ border-radius: var(--r-organic); }
.mass--flat   { box-shadow: none; background-image: none; background-color: var(--smoke-04); }

/* Se infla al pasar por encima. Nunca cambia de tono. */
.mass--live:hover,
.mass--live:focus-within {
  transform: translateY(-4px) scale(1.012);
  box-shadow: var(--lift-3);
  background-color: var(--ink-lifted);
}

/* La masa invertida: chalk sólido, el objeto más pesado de la página.
   Es el mismo material del logo. Se usa con muchísima moderación. */
.mass--chalk {
  background-color: var(--chalk);
  background-image: radial-gradient(
    120% 120% at 28% 10%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(214, 214, 210, 0.55) 48%,
    rgba(186, 186, 182, 0.75) 100%
  );
  color: var(--ink);
  box-shadow: var(--lift-3);
}
.mass--chalk h1, .mass--chalk h2, .mass--chalk h3,
.mass--chalk h4, .mass--chalk .t-chalk { color: var(--ink); }
.mass--chalk .t-label,
.mass--chalk .t-micro,
.mass--chalk .eyebrow { color: rgba(6, 6, 6, 0.46); }
.mass--chalk .t-lead  { color: rgba(6, 6, 6, 0.72); }
.mass--chalk p        { color: rgba(6, 6, 6, 0.72); }
/* El punto del eyebrow es humo blanco: sobre chalk hay que invertirlo
   o desaparece. */
.mass--chalk .eyebrow::before { background: rgba(6, 6, 6, 0.4); }

/* ───────────────────────────────────────────────────────────────────────────
   6. BOTONES
   Píldoras infladas. Al hover crecen, no cambian de color.
   ─────────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  padding: 18px var(--s4);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    transform var(--d-quick) var(--ease-inflate),
    box-shadow var(--d-quick) var(--ease-settle),
    background-color var(--d-quick) var(--ease-settle),
    color var(--d-quick) var(--ease-settle);
}

.btn:hover  { transform: scale(1.025); }
.btn:active { transform: scale(0.985); transition-duration: 90ms; }

/* Primario: chalk sólido. El objeto más brillante de la pantalla. */
.btn--solid {
  background-color: var(--chalk);
  background-image: var(--inflate-strong);
  color: var(--ink);
  box-shadow: var(--lift-2);
}
.btn--solid:hover { box-shadow: var(--lift-3); }

/* Secundario: masa de tinta. */
.btn--mass {
  background-color: var(--ink-lifted);
  background-image: var(--inflate);
  color: var(--chalk);
  box-shadow: var(--lift-1);
}
.btn--mass:hover { background-color: #1E1E1E; box-shadow: var(--lift-2); }

/* Terciario: sin masa. Solo lenguaje. */
.btn--ghost { color: var(--smoke-70); padding-inline: var(--s2); }
.btn--ghost:hover { color: var(--chalk); }

.btn--lg { padding: 22px var(--s5); font-size: 13px; }
.btn--sm { padding: 13px var(--s3); font-size: var(--t-micro); }

/* ───────────────────────────────────────────────────────────────────────────
   7. MARCA
   ─────────────────────────────────────────────────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
/* Los logos viven en assets/ con alpha real: flotan sobre la página, nunca en
   una caja. bo-lockup.webp = monograma + wordmark; bo-mark.webp = solo el
   monograma; bo-mark-sm.webp = el mismo a 240px para nav y pie. Donde ya hay
   texto "Black Ops" al lado va el mark, para no decir el nombre dos veces. */
.brand__mark {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}
.brand__word {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--chalk);
}

/* El monograma como objeto: flota y respira. Acá es una masa, no un logo, así
   que va sin el wordmark. Tiene alpha real, así que el drop-shadow sigue la
   silueta y no un rectángulo. */
.monogram {
  width: clamp(120px, 20vw, 260px);
  height: auto;
  animation: breathe 7s var(--ease-breathe) infinite;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.55));
}

@keyframes breathe {
  0%, 100% { transform: translateY(0)     scale(1);     }
  50%      { transform: translateY(-10px) scale(1.022); }
}

/* ───────────────────────────────────────────────────────────────────────────
   8. NAVEGACIÓN
   Una píldora flotando. Sin barra, sin borde inferior, sin línea recta.
   ─────────────────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: var(--s2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(calc(100% - var(--s3) * 2), var(--spine));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 12px 14px 12px var(--s3);
  border-radius: var(--r-pill);
  background-color: rgba(14, 14, 14, 0.72);
  background-image: var(--inflate);
  box-shadow: var(--lift-2);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.nav__links { display: none; gap: var(--s3); align-items: center; }
@media (min-width: 1120px) { .nav__links { display: flex; } }

.nav__link {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke-48);
  transition: color var(--d-quick) var(--ease-settle);
}
.nav__link:hover,
.nav__link[aria-current] { color: var(--chalk); }

.nav__end { display: flex; align-items: center; gap: var(--s2); }

/* Toggle de idioma: dos píldoras, sin borde. */
.lang { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: var(--smoke-04); }
.lang__btn {
  padding: 8px 13px;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-30);
  transition: all var(--d-quick) var(--ease-settle);
}
.lang__btn:hover { color: var(--smoke-70); }
.lang__btn[aria-current] {
  background-color: var(--chalk);
  color: var(--ink);
  box-shadow: var(--lift-1);
}

/* En pantallas chicas el nav guarda solo marca y CTA: con el toggle de idioma
   adentro, los tres bloques no entran en 375px y el botón se corta.
   El cambio de idioma vive en el pie. */
@media (max-width: 600px) {
  .nav { padding: 10px 10px 10px var(--s2); gap: var(--s2); }
  .nav .lang { display: none; }
  .brand__word { font-size: 13px; }
  .brand__mark { width: 32px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   9. PIEZAS
   ─────────────────────────────────────────────────────────────────────────── */

/* Etiqueta de sección. Reemplaza al kicker con línea. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke-30);
}
.eyebrow::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--smoke-30);
  flex-shrink: 0;
}

/* Pulso de luz. Es lo que reemplaza al punto verde de "en vivo". */
.pulse::before {
  background: var(--chalk);
  animation: pulse 2.6s var(--ease-breathe) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.35); }
}

/* Tag: píldora de humo. */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--smoke-04);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-48);
  transition: all var(--d-quick) var(--ease-settle);
}
.tag:hover { background: var(--smoke-08); color: var(--chalk); }

/* Separación entre secciones. Una curva, nunca una línea recta. */
.curve {
  height: clamp(40px, 7vw, 90px);
  background: var(--ink-raised);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.curve--up {
  background: var(--ink);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* Lista numerada de pasos. Las cifras cargan la jerarquía, no los iconos. */
.steps { counter-reset: step; }
.step { counter-increment: step; position: relative; padding-left: clamp(48px, 7.4vw, 96px); }
.step + .step { margin-top: clamp(28px, 4.5vh, 56px); }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -0.08em;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--smoke-16);
  font-variant-numeric: tabular-nums;
}

/* Imagen con máscara orgánica. Nunca un círculo, nunca un rectángulo recto. */
.organic {
  border-radius: var(--r-organic);
  overflow: hidden;
  box-shadow: var(--lift-2);
}

/* ───────────────────────────────────────────────────────────────────────────
   10. HERO
   Un póster, no un documento.
   ─────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + var(--s4)) var(--s5);
  overflow: hidden;
}

/* El halo. Una sola luz difusa detrás de todo, misma dirección que las sombras. */
.hero::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 150vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(250, 250, 248, 0.07) 0%,
    rgba(250, 250, 248, 0.02) 38%,
    transparent 66%
  );
  pointer-events: none;
  z-index: 0;
}
.hero > .spine { position: relative; z-index: 1; }

/* El monograma como objeto físico de la composición, no como ilustración
   decorativa. Vive detrás del tipo y sale por el borde derecho. */
.hero__mark {
  position: absolute;
  top: clamp(96px, 17vh, 200px);
  right: var(--gutter);
  width: clamp(150px, 26vw, 400px);
  z-index: 0;
  pointer-events: none;
}
/* En pantallas chicas no hay hueco al costado del titular: el monograma pasa arriba,
   entero y a opacidad completa, en vez de asomarse tenue por una esquina. */
@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: stretch; justify-content: center; }
  .hero .opie-spot {
    position: static;
    align-self: flex-start;
    height: clamp(150px, 24vh, 200px);
    margin: 0 0 var(--s3) var(--gutter);
  }
}

/* El titular deja aire a la derecha para que el monograma no le pise el tipo.
   En porcentaje, no en ch: a 121px de fuente, 1ch ronda los 92px y cualquier
   límite en ch resuelve más ancho que la espina entera. */
.hero h1 { max-width: 100%; }
@media (min-width: 860px) { .hero h1 { max-width: 78%; } }

/* El titular nombra el servicio y la promesa en una sola frase (un único h1):
   el servicio en grande, la promesa en humo debajo y a un tamaño propio que
   no depende del colosal. */
.hero__tail {
  display: block;
  margin-top: var(--s3);
  font-size: clamp(18px, 2.4vw + 6px, 40px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--smoke-48);
}
.hero__foot { gap: var(--s4) var(--s5); align-items: end; margin-top: var(--s4); }
@media (min-width: 900px) { .hero__foot { grid-template-columns: 1fr; max-width: 62%; } }

/* ───────────────────────────────────────────────────────────────────────────
   11. PIE
   ─────────────────────────────────────────────────────────────────────────── */

.footer { padding-block: var(--s6) var(--s4); }
.footer__grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.footer__link {
  display: block;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke-48);
  padding-block: 7px;
  transition: color var(--d-quick) var(--ease-settle);
}
.footer__link:hover { color: var(--chalk); }

/* ───────────────────────────────────────────────────────────────────────────
   12. MOVIMIENTO
   Las cosas tienen masa: arrancan lento y se asientan.
   ─────────────────────────────────────────────────────────────────────────── */

.rise {
  opacity: 0;
  transform: translateY(26px) scale(0.965);
  transition:
    opacity var(--d-slow) var(--ease-settle),
    transform var(--d-slow) var(--ease-inflate);
}
.rise.is-in { opacity: 1; transform: none; }

.rise-1 { transition-delay:  70ms; }
.rise-2 { transition-delay: 150ms; }
.rise-3 { transition-delay: 230ms; }
.rise-4 { transition-delay: 310ms; }

/* Sin JS la página debe verse completa igual. */
.no-js .rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rise { opacity: 1; transform: none; }
  .monogram { animation: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   13. UTILIDADES
   ─────────────────────────────────────────────────────────────────────────── */

/* Escape de la mayúscula global para casos puntuales: un nombre propio,
   una cita, un fragmento de código. Para texto largo va .prose. */
.lower { text-transform: none; }

/* Los campos de formulario nunca van en mayúscula: lo que el usuario escribe
   se muestra tal como lo escribió. */
input, textarea, select { text-transform: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--s2); left: 50%;
  transform: translate(-50%, -200%);
  z-index: 200;
  padding: 14px var(--s3);
  border-radius: var(--r-pill);
  background: var(--chalk);
  color: var(--ink);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform var(--d-quick) var(--ease-inflate);
}
.skip-link:focus { transform: translate(-50%, 0); }

.flow > * + * { margin-top: var(--flow, var(--s3)); }
.center-text  { text-align: center; }
.mw-sm { max-width: 46ch; }
.mw-md { max-width: 60ch; }
.mw-lg { max-width: 76ch; }

/* ───────────────────────────────────────────────────────────────────────────
   14. PANTALLAS
   Cada tema vive en su propia sección a pantalla completa. No hay bandas
   rectas ni cortes duros: el fondo de la página cambia de tono, despacio,
   según la sección que está en el centro del viewport. js/sections.js pone
   data-tone en <html>; la transición de color vive en la sección 2.
   ─────────────────────────────────────────────────────────────────────────── */

.screen {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + var(--s4)) var(--s4);
}
.screen > .spine { width: 100%; }

/* Sin JS el tono no cambia solo, así que cada sección que lo pide lo lleva puesto. */
.no-js [data-tone="raised"] { background-color: var(--ink-raised); }

.section-head { --gap: var(--s3); margin-bottom: var(--s5); }

/* Guardia de grillas: sin min-width:0, una palabra larga ("TRABAJAMOS" a tamaño
   display) ensancha su columna y empuja a la vecina fuera del encuadre. */
.split > * { min-width: 0; }

/* Sin palabras huérfanas al final de un párrafo corto ("…UNDERSTAND / IT."). */
p, li { text-wrap: pretty; }

/* Pasos del método y masas de "qué se adapta": el texto de apoyo respira. */
.step h3 + p { margin-top: var(--s2); max-width: 60ch; }
.mass > .t-micro + :is(h3, h4) { margin-top: var(--s3); }
.mass > :is(h3, h4) + p { margin-top: var(--s2); }

/* Plazos. La cifra manda; las cajas sobran. */
.figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6) var(--s7);
}
@media (min-width: 900px) { .figures { grid-template-columns: 1fr 1fr; } }

.figure { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.figure h3 + p { max-width: 46ch; }
.figure__num {
  margin-block: var(--s1) var(--s2);
  font-size: clamp(80px, 12vw, 184px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.82;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.figure__unit {
  margin-left: 0.16em;
  font-size: 0.22em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--smoke-48);
}

/* Pie. */
.footer__brand { --gap: var(--s2); }
.footer__title { display: block; margin-bottom: var(--s2); }
.footer__note  { margin-top: var(--s5); }

/* ───────────────────────────────────────────────────────────────────────────
   15. OPIE
   .opie-spot marca dónde se para Opie en el hero; el poster se ve mientras carga
   el 3D (y siempre, sin WebGL o con movimiento reducido). js/opie/site.js dibuja
   el Opie 3D en un canvas fijo, alineado a ese lugar, y lo lleva a una esquina
   con el scroll.
   ─────────────────────────────────────────────────────────────────────────── */

.opie-spot {
  position: absolute;
  right: calc(var(--gutter) + 9vw);   /* el brazo del saludo sobresale a la derecha */
  top: clamp(120px, 17vh, 200px);   /* aire sobre la cabeza para el saludo y el rebote */
  height: min(58vh, 540px);
  aspect-ratio: 478 / 720;
  z-index: 0;
  pointer-events: none;
}
.opie-spot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
  transition: opacity var(--d-slow) var(--ease-settle);
}
.opie-ready .opie-spot img { opacity: 0; }

.opie-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 60;            /* sobre el contenido, bajo el nav (100) */
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-settle);   /* se vuelve translúcido sobre el texto */
}

/* ───────────────────────────────────────────────────────────────────────────
   16. SITIO DE VARIAS PÁGINAS
   Cabecera de página, menú móvil y contenido largo (artículos, FAQ, glosario).
   ─────────────────────────────────────────────────────────────────────────── */

/* Cabecera de cada página interior. Más contenida que el hero de la home. */
.page-head {
  position: relative;
  padding-block: calc(var(--nav-h) + var(--s6)) var(--s5);
}
.page-head .stack { --gap: var(--s3); }
.page-head h1 {
  font-size: clamp(34px, 5.2vw, 80px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  max-width: 18em;
}
.page-head .t-lead { max-width: 60ch; }

/* Menú: por debajo de 1120px los enlaces viven en un panel que abre un botón. */
.nav__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--smoke-04);
  transition: background-color var(--d-quick) var(--ease-settle);
}
.nav__menu:hover { background: var(--smoke-08); }
.nav__menu-icon,
.nav__menu-icon::before,
.nav__menu-icon::after {
  display: block;
  width: 16px; height: 2px;
  border-radius: var(--r-pill);
  background: var(--chalk);
  transition: transform var(--d-quick) var(--ease-settle), opacity var(--d-quick);
}
.nav__menu-icon { position: relative; }
.nav__menu-icon::before, .nav__menu-icon::after { content: ''; position: absolute; left: 0; }
.nav__menu-icon::before { top: -5px; }
.nav__menu-icon::after  { top: 5px; }
.nav.is-open .nav__menu-icon { background: transparent; }
.nav.is-open .nav__menu-icon::before { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__menu-icon::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1119px) {
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: calc(100% + var(--s1));
    left: 0; right: 0;
    padding: var(--s2);
    border-radius: var(--r-blob);
    background-color: rgba(14, 14, 14, 0.96);
    background-image: var(--inflate);
    box-shadow: var(--lift-3);
  }
  .nav.is-open .nav__link {
    padding: 14px var(--s2);
    border-radius: var(--r-soft);
    font-size: var(--t-label);
  }
  .nav.is-open .nav__link:hover { background: var(--smoke-04); }
}
@media (min-width: 1120px) { .nav__menu { display: none; } }
@media (max-width: 600px) { .nav__cta { display: none; } }

/* Contenido largo: bloques de respuesta, fechas y tablas, todo en capitalización
   normal (es prosa) y sin bordes: las filas se separan con aire y tono. */
.longform { padding-bottom: var(--section-tight); }
.longform .spine--narrow > * + * { margin-top: var(--s4); }
.answer-block {
  text-transform: none;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--smoke-70);
  padding: var(--s4);
  border-radius: var(--r-blob);
  background-color: var(--ink-raised);
  background-image: var(--inflate);
  box-shadow: var(--lift-1);
}
.answer-block strong, .answer-block b { color: var(--chalk); font-weight: 600; }
.answer-block p + p { margin-top: var(--s2); }
.page-meta { display: flex; gap: var(--s2); flex-wrap: wrap; }

.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-soft);
  background: var(--smoke-04);
  margin-block: var(--s4);
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-transform: none;
  font-size: 15px;
  line-height: 1.5;
}
.data-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--s3) var(--s3) var(--s1);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-48);
}
.data-table th, .data-table td { padding: 14px var(--s3); vertical-align: top; text-align: left; }
.data-table thead th {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke-48);
}
.data-table tbody tr:nth-child(odd) { background: var(--smoke-04); }
.data-table tbody th { color: var(--chalk); font-weight: 600; }

/* Enlace "ver más" al pie de una sección de la home. */
.more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s4);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--chalk);
  transition: gap var(--d-quick) var(--ease-settle);
}
.more::after { content: '→'; }
.more:hover { gap: 16px; }

/* Lista de hechos (qué incluye, factores de precio): etiqueta + texto, sin cajas. */
.facts { display: grid; gap: var(--s4) var(--s6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact h3 { font-size: var(--t-sub); line-height: 1.2; }
.fact p { margin-top: var(--s2); max-width: 46ch; }

/* Casos: cifra protagonista junto al relato. */
.case-figure { font-size: clamp(64px, 10vw, 150px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.85; color: var(--chalk); }
.case-figure small { display: block; margin-top: var(--s2); font-size: var(--t-label); letter-spacing: 0.14em; color: var(--smoke-48); }

/* Tres cifras en fila (casos en la home). */
@media (min-width: 1100px) { .figures--3 { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.figures--3 .figure__num { font-size: clamp(72px, 8vw, 128px); }

/* Hechos en una sola columna (relato de cada caso). */
.facts--single { grid-template-columns: 1fr !important; gap: var(--s4); }

/* Lista de criterios: frases cortas, un punto de luz por ítem, sin cajas. */
.checklist { display: grid; gap: var(--s3); max-width: 46em; }
.checklist li {
  position: relative;
  padding-left: var(--s5);
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.25;
  color: var(--chalk);
  text-wrap: pretty;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 4px; top: 0.42em;
  width: 12px; height: 12px;
  border-radius: var(--r-pill);
  background: var(--chalk);
  box-shadow: 0 0 14px rgba(250, 250, 248, 0.45);
}

/* Artículos: los titulares son frases largas; a tamaño display ocuparían media pantalla. */
.page-head--article h1 { font-size: clamp(30px, 3.8vw, 58px); line-height: 1.02; letter-spacing: -0.015em; max-width: 24em; }
.page-head--article .t-lead { text-transform: none; }
.longform .eyebrow { margin-bottom: var(--s2); }

/* Páginas interiores: la sección mide lo que mide su contenido, sin pantalla entera. */
.screen--fit { min-height: 0; align-items: flex-start; padding-block: clamp(56px, 7vw, 96px); }
.page-head + .screen--fit { padding-top: var(--s4); }

/* Relatos largos (casos): son párrafos de 5 a 7 líneas, así que van en capitalización normal. */
.facts--single .fact p { text-transform: none; font-size: 17px; line-height: 1.7; max-width: 58ch; }