/* =========================================================================
   Casundo · Landing
   Tokens de Fase 2 (tokens.json + bundle.css) con extensiones web marcadas
   como "Extensión landing". Cada sección declara su tema con data-theme.
   ========================================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root,
[data-theme="light"] {
  --cal: #f6f4ef;
  --cal-elevado: #ffffff;
  --piedra: #e6e1d7;
  --linea: #cbc5ba;
  --grafito: #161615;
  --concreto: #5c5953;
  --sol: #c9471f;
  --sol-texto: #b23d18;
  --sobre-sol: #ffffff;
  --sobre-grafito: #f6f4ef;
  --error: #a8261b;
  --disponible: #2f6b4f;
  --borde-control: var(--concreto);
  --foco: var(--grafito);
  color-scheme: light;
}
[data-theme="dark"] {
  --cal: #121211;
  --cal-elevado: #1b1b1a;
  --piedra: #272623;
  --linea: #3b3a36;
  --grafito: #f1eee8;
  --concreto: #a6a29a;
  --sol: #f07a4a;
  --sol-texto: #f58b60;
  --sobre-sol: #121211;
  --sobre-grafito: #121211;
  --error: #ff8a7a;
  --disponible: #7cc4a0;
  --borde-control: var(--concreto);
  --foco: var(--grafito);
  color-scheme: dark;
}
:root {
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --espacio-1: 4px;  --espacio-2: 8px;  --espacio-3: 12px; --espacio-4: 16px;
  --espacio-6: 24px; --espacio-8: 32px; --espacio-12: 48px; --espacio-16: 64px;
  --espacio-24: 96px;
  /* Extensión landing: aire de sección en pantallas grandes */
  --espacio-32: 128px;
  --espacio-40: 160px;

  --radio-0: 0px; --radio-1: 2px; --radio-circulo: 50%;
  --borde-fino: 1px; --borde-foco: 2px; --borde-muro: 3px;

  /* Extensión landing: movimiento */
  --dur-ui: 200ms;
  --dur-revelar: 1100ms;
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);

  --margen: var(--espacio-4);
  --nav-alto: 64px;
}
@media (min-width: 900px) {
  :root { --margen: var(--espacio-12); --nav-alto: 76px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--cal);
  color: var(--grafito);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--sol); color: var(--sobre-sol); }
section, footer { background: var(--cal); color: var(--grafito); }

.saltar {
  position: absolute; left: var(--espacio-4); top: -100px; z-index: 100;
  background: var(--grafito); color: var(--sobre-grafito); padding: var(--espacio-2) var(--espacio-4);
}
.saltar:focus { top: var(--espacio-4); }

/* ---------- Tipografía ---------- */
.display-hero, .display-l, .dato-xl__n, .paquete__precio, .pie__tag {
  font-variation-settings: "wdth" 112;
  font-stretch: 112%;
}
.display-hero {
  /* Extensión landing: escala de portada web, deriva de display-xl */
  font-size: clamp(52px, 9.6vw, 176px);
  line-height: 0.92;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.display-l {
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.titulo { font-size: 28px; line-height: 34px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.titulo-s { font-size: 21px; line-height: 28px; font-weight: 600; margin: 0; letter-spacing: -0.005em; }
.subtitulo { font-size: 20px; line-height: 30px; font-weight: 500; margin: 0; }
.cuerpo { font-size: 16px; line-height: 26px; margin: 0; }
.cuerpo-s { font-size: 14px; line-height: 22px; margin: 0; }
.etiqueta { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; margin: 0; }
.dato { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; margin: 0; }
.cs-etiqueta { text-transform: uppercase; }
.cs-mono { font-family: var(--font-mono); }
.cs-muted { color: var(--concreto); }

/* ---------- Bundle Fase 2 ---------- */
.cs-muro { border: 0; border-top: var(--borde-muro) solid var(--grafito); margin: 0; }
.cs-divisor { border: 0; border-top: var(--borde-fino) solid var(--linea); margin: 0; }

.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  font: 600 15px/20px var(--font-sans); padding: var(--espacio-3) var(--espacio-6);
  border-radius: var(--radio-1); border: var(--borde-fino) solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-ui) ease-out, color var(--dur-ui) ease-out, border-color var(--dur-ui) ease-out;
}
.cs-btn:focus-visible { outline: var(--borde-foco) solid var(--foco); outline-offset: 2px; }
.cs-btn--primario { background: var(--grafito); color: var(--sobre-grafito); }
.cs-btn--primario:hover { background: var(--concreto); }
.cs-btn--secundario { background: transparent; color: var(--grafito); border-color: var(--borde-control); }
.cs-btn--secundario:hover { background: var(--piedra); }
.cs-btn--acento { background: var(--sol); color: var(--sobre-sol); }
.cs-btn--acento:hover { background: var(--sol-texto); }

.cs-cota {
  display: flex; align-items: center; gap: var(--espacio-2);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.04em;
  color: var(--grafito); white-space: nowrap;
}
.cs-cota::before, .cs-cota::after {
  content: ""; flex: 1; min-width: 12px; height: 9px;
  border-top: var(--borde-fino) solid currentColor; transform: translateY(4px);
}
.cs-cota::before { border-left: var(--borde-fino) solid currentColor; }
.cs-cota::after { border-right: var(--borde-fino) solid currentColor; }
.cs-cota--destacada::before, .cs-cota--destacada::after { color: var(--sol); }
.cs-cota-v {
  display: flex; flex-direction: column; align-items: center; gap: var(--espacio-2);
  height: 100%; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--grafito);
}
.cs-cota-v::before, .cs-cota-v::after {
  content: ""; flex: 1; width: 9px; border-left: var(--borde-fino) solid currentColor; transform: translateX(4px);
}
.cs-cota-v::before { border-top: var(--borde-fino) solid currentColor; }
.cs-cota-v::after { border-bottom: var(--borde-fino) solid currentColor; }

.cs-campo { display: grid; gap: var(--espacio-1); align-content: start; }
.cs-campo label { font: 600 13px/18px var(--font-sans); }
.cs-campo input, .cs-campo select {
  font: 400 15px/22px var(--font-sans); color: var(--grafito); background: var(--cal-elevado);
  border: var(--borde-fino) solid var(--borde-control); border-radius: var(--radio-1);
  padding: var(--espacio-3); width: 100%; min-width: 0;
}
.cs-campo input::placeholder { color: var(--concreto); opacity: 0.7; }
.cs-campo input:focus-visible, .cs-campo select:focus-visible { outline: var(--borde-foco) solid var(--foco); outline-offset: 2px; }
.cs-campo--error input { border-color: var(--error); }
.cs-ayuda { font-size: 13px; line-height: 18px; color: var(--concreto); }
.cs-campo--error .cs-ayuda, .formulario__error { color: var(--error); }
.cs-check {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--espacio-2); align-items: start;
  font-size: 13px; line-height: 19px; color: var(--concreto); cursor: pointer;
}
.cs-check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--grafito); }
.cs-check a { color: var(--grafito); }
.cs-ficha { background: var(--cal-elevado); border: var(--borde-fino) solid var(--linea); border-radius: var(--radio-0); }
.cs-banda { background: var(--piedra); }

/* ---------- Layout ---------- */
.contenedor { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--margen); }
.seccion { padding-block: var(--espacio-24); position: relative; }
@media (min-width: 900px) { .seccion { padding-block: var(--espacio-40); } }
/* Dos secciones del mismo fondo seguidas: no sumar los dos rellenos */
.seccion[data-theme="light"]:not(.cs-banda) + .seccion[data-theme="light"]:not(.cs-banda) { padding-top: 0; }

.lamina {
  display: flex; gap: var(--espacio-3); margin: 0 0 var(--espacio-3);
  font: 500 12px/16px var(--font-mono); letter-spacing: 0.04em; color: var(--grafito);
}
.lamina span { color: var(--concreto); }
.seccion__titulo { margin-top: var(--espacio-8); max-width: 22ch; }
.fuente { margin: var(--espacio-12) 0 0; font-size: 13px; line-height: 20px; color: var(--concreto); max-width: 80ch; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-top: var(--espacio-4); }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-alto);
  display: flex; align-items: center; gap: var(--espacio-8);
  padding-inline: var(--margen);
  background: transparent; color: var(--grafito);
  transition: background-color 400ms var(--ease-salida);
}
.nav.nav--solida, .nav.nav--sobre-claro {
  background: color-mix(in srgb, var(--cal) 30%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.nav__logo { display: block; width: 132px; flex: none; }
.nav__logo img { width: 100%; height: auto; }
.nav .logo-claro { display: none; }
.nav[data-theme="light"] .logo-claro { display: block; }
.nav[data-theme="light"] .logo-oscuro { display: none; }
.nav__links { display: none; gap: var(--espacio-8); margin-left: auto; font-size: 14px; font-weight: 500; }
.nav__links a { text-decoration: none; color: color-mix(in srgb, var(--grafito) 80%, transparent); transition: color var(--dur-ui) ease-out; }
.nav__links a:hover { color: var(--grafito); }
.nav__cta { margin-left: auto; padding: 10px var(--espacio-4); font-size: 14px; transition: opacity 300ms ease-out, background-color var(--dur-ui) ease-out; }
.nav--sin-cta .nav__cta { opacity: 0; pointer-events: none; }
@media (min-width: 900px) {
  .nav__logo { width: 148px; }
  .nav__links { display: flex; }
  .nav__cta { margin-left: var(--espacio-4); }
}

/* =========================================================================
   Experiencia por scroll
   Sin JS o con movimiento reducido: historia estática (imagen + texto).
   Con JS (html.is-live): escenario fijado y escenas superpuestas al canvas.
   ========================================================================= */
.exp { position: relative; background: var(--cal); }
.exp__stage { display: none; }
.escena { position: relative; padding: calc(var(--nav-alto) + var(--espacio-8)) var(--margen) var(--espacio-12); }
.escena__still { width: 100%; height: auto; margin-bottom: var(--espacio-6); }
.escena__txt { max-width: 900px; display: grid; gap: var(--espacio-4); }
.escena__scroll { display: none; }
.escena .etiqueta { color: var(--concreto); }

.is-live .exp { height: 100vh; height: 100svh; overflow: hidden; }
.is-live .exp__stage { display: block; position: absolute; inset: 0; overflow: hidden; }
.is-live .escena__still { display: none; }
.is-live .escenas { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.is-live .escena {
  position: absolute; inset: 0; padding: 0; margin: 0;
  display: flex; opacity: 0; visibility: hidden;
}
.is-live .escena--hero { opacity: 1; visibility: visible; }
.is-live .escena__scroll { display: block; }

.exp__media { position: absolute; inset: 0; }
.exp__poster, .exp__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.exp__poster { object-fit: cover; }
.exp__canvas { opacity: 0; transition: opacity 400ms ease-out; }
.exp__canvas.is-listo { opacity: 1; }
.exp__velo { position: absolute; inset: 0; background: #121211; opacity: 0; z-index: 2; pointer-events: none; }

/* Escena 0: portada */
.escena--hero { align-items: flex-end; }
.escena--hero .escena__txt {
  padding: 0 var(--margen) calc(var(--espacio-12) + 40px);
  max-width: 1200px; gap: var(--espacio-6);
}
.escena__bajada { max-width: 34ch; color: var(--concreto); }
.escena__scroll { width: 220px; margin: var(--espacio-2) 0 0; }
.escena__scroll .cs-cota { color: var(--concreto); }

/* Escenas centradas */
.is-live .escena--centro { align-items: center; justify-content: center; text-align: center; }
.escena--centro .escena__txt { justify-items: center; padding-inline: var(--margen); }
.escena--centro .display-l { font-size: clamp(48px, 7vw, 120px); }
.escena--centro .subtitulo { color: var(--concreto); }

/* Escenas con panel (sobre imagen clara: panel sólido, sin transparencias) */
.is-live .escena--izq { align-items: flex-end; }
.escena__panel {
  background: var(--cal); padding: var(--espacio-6); gap: var(--espacio-3);
}
.is-live .escena__panel {
  margin: 0 0 calc(var(--espacio-12) + 24px) var(--margen);
  width: min(440px, calc(100vw - 2 * var(--margen)));
}

/* Escena final */
.is-live .escena--final { align-items: center; }
.escena--final .escena__txt { padding-inline: var(--margen); max-width: none; gap: 0; }
.escena__todavia { color: var(--concreto); }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: var(--font-mono); }
.hud__cota { position: absolute; opacity: 0; }
.hud__cota .cs-cota, .hud__cota .cs-cota-v { color: #161615; }
.hud__cota .cs-cota { font-size: 12px; }
.hud__cota--h { left: calc(var(--margen) + 500px); width: 24%; bottom: 31%; }
.hud__cota--v { right: 27%; top: 22%; height: 30%; }
.hud__cota .cs-cota, .hud__cota .cs-cota-v { text-shadow: none; }
.hud__cota .cs-cota { padding: 0; }
.hud__cota-txt, .hud__cota .cs-cota { --chip: #f6f4ef; }
.exp__aviso {
  position: absolute; left: var(--margen); bottom: var(--espacio-6); z-index: 5; margin: 0;
  font-size: 11px; line-height: 15px; color: var(--concreto); background: var(--cal); padding: 4px 8px;
  max-width: calc(100vw - 2 * var(--margen));
}

@media (min-width: 900px) {
  .hud__cota .cs-cota { font-size: 13px; }
}
@media (max-width: 899px) {
  .exp__aviso { bottom: auto; top: calc(var(--nav-alto) + var(--espacio-2)); max-width: calc(100vw - 2 * var(--margen)); }
  .escena--hero .escena__txt { padding-bottom: var(--espacio-12); }
  .is-live .escena__panel { margin-bottom: var(--espacio-8); }
  .hud__cota { display: none; }
}

/* ---------- Giro B2B ---------- */
.giro__grid { display: grid; gap: var(--espacio-8); margin-top: var(--espacio-8); }
.giro__txt { display: grid; gap: var(--espacio-4); align-content: start; max-width: 56ch; }
@media (min-width: 900px) {
  .giro__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--espacio-6); }
  .giro__grid .display-l { grid-column: 1 / span 7; font-size: clamp(44px, 5.6vw, 96px); }
  .giro__txt { grid-column: 8 / span 5; padding-top: var(--espacio-3); }
}

/* ---------- Datos ---------- */
.datos { padding-block: var(--espacio-16); }
@media (min-width: 900px) { .datos { padding-block: var(--espacio-24); } }
.datos__grid { display: grid; gap: var(--espacio-12); }
@media (min-width: 900px) { .datos__grid { grid-template-columns: repeat(2, 1fr); gap: var(--espacio-12); } }
.dato-xl { display: grid; gap: var(--espacio-4); align-content: start; }
.dato-xl__n {
  margin: 0; font-size: clamp(52px, 5.2vw, 96px); line-height: 0.95; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dato-xl .cs-cota { color: var(--concreto); }
.dato-xl .cuerpo { max-width: 40ch; }
.datos__frase {
  margin-top: var(--espacio-24); padding-top: var(--espacio-16);
  border-top: var(--borde-muro) solid var(--grafito);
  display: grid; justify-items: center; gap: var(--espacio-4); text-align: center;
}
.datos__frase .display-hero { font-size: clamp(52px, 9vw, 160px); }
.datos__frase .subtitulo { color: var(--concreto); max-width: 52ch; text-wrap: balance; }
@media (min-width: 900px) { .datos__frase { margin-top: var(--espacio-32); padding-top: var(--espacio-24); } }

/* ---------- Audiencias ---------- */
.audiencias { display: grid; gap: var(--espacio-8); margin-top: var(--espacio-16); }
@media (min-width: 640px) { .audiencias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .audiencias { grid-template-columns: repeat(4, 1fr); gap: var(--espacio-6); } }
.audiencia { display: flex; flex-direction: column; gap: var(--espacio-3); padding-top: var(--espacio-6); border-top: var(--borde-fino) solid var(--linea); }
.audiencia .subtitulo { font-size: 18px; line-height: 26px; }
.cota-num { margin: 0 0 var(--espacio-2); font: 500 12px/16px var(--font-mono); color: var(--concreto); }

.aviso-render { margin: var(--espacio-12) 0 0; font-size: 13px; line-height: 20px; color: var(--concreto); max-width: 90ch; }

/* ---------- Servicios ---------- */
.servicios__cab { display: grid; gap: var(--espacio-4); margin-top: var(--espacio-8); }
.servicios__cab .display-l { max-width: 20ch; }
.servicios__cab .subtitulo { max-width: 52ch; }
.servicios { list-style: none; margin: var(--espacio-16) 0 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 700px) { .servicios { grid-template-columns: repeat(2, 1fr); column-gap: var(--espacio-6); } }
@media (min-width: 1100px) { .servicios { grid-template-columns: repeat(3, 1fr); } }
.servicio { display: grid; gap: var(--espacio-3); align-content: start; padding: var(--espacio-8) 0 var(--espacio-12); border-top: var(--borde-fino) solid var(--linea); }
.servicio img { width: 32px; height: 32px; margin-bottom: var(--espacio-2); }
.servicio .cuerpo { max-width: 40ch; }
@media (min-width: 700px) { .servicios.servicios--dos { grid-template-columns: repeat(2, 1fr); column-gap: var(--espacio-12); } }
.servicios--dos .servicio { padding-top: var(--espacio-8); border-top: var(--borde-muro) solid var(--grafito); gap: var(--espacio-4); }
.servicios--dos .servicio img { width: 40px; height: 40px; }
.servicio__lista { list-style: none; margin: var(--espacio-2) 0 0; padding: 0; display: grid; }
.servicio__lista li { position: relative; padding: var(--espacio-3) 0 var(--espacio-3) 22px; border-top: var(--borde-fino) solid var(--linea); font-size: 16px; line-height: 24px; }
.servicio__lista li::before { content: ""; position: absolute; left: 0; top: 23px; width: 12px; border-top: var(--borde-fino) solid currentColor; }
.servicio .cuerpo { max-width: 40ch; }

/* ---------- Visor 3D ---------- */
.visor3d { position: relative; overflow: hidden; }
.visor3d__lienzo { position: relative; height: 56vh; }
.visor3d__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 800ms ease-out; }
.visor3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms var(--ease-salida); }
.visor3d.is-3d .visor3d__canvas { opacity: 1; }
.visor3d.is-3d .visor3d__fallback { opacity: 0; }
.visor3d__pie {
  position: absolute; right: var(--margen); bottom: var(--espacio-4); margin: 0;
  font: 400 11px/15px var(--font-mono); letter-spacing: 0.04em; color: var(--concreto);
}
.visor3d__txt { position: relative; z-index: 1; display: grid; gap: var(--espacio-4); padding-block: var(--espacio-8) var(--espacio-12); }
.visor3d__muro { margin-top: calc(-1 * var(--espacio-2)); }
.visor3d__txt .display-l { max-width: 14ch; }
.visor3d__pasos { list-style: none; margin: var(--espacio-4) 0 0; padding: 0; display: grid; }
.visor3d__pasos li {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--espacio-2);
  padding: var(--espacio-4) 0; border-top: var(--borde-fino) solid var(--linea);
  color: var(--concreto); transition: color 400ms ease-out;
}
.visor3d__pasos li .cuerpo { margin-top: var(--espacio-1); max-width: 38ch; }
.visor3d__pasos li .dato { padding-top: 4px; }
.visor3d__pasos li.is-activa { color: var(--grafito); }
.visor3d__pasos li.is-activa .cuerpo { color: var(--concreto); }
.visor3d__nota { max-width: 46ch; }

.is-live .visor3d { height: 100vh; height: 100svh; }
.is-live .visor3d__lienzo { position: absolute; left: 0; right: 0; top: var(--nav-alto); height: 42%; }
.is-live .visor3d__txt { height: 100%; align-content: end; padding-block: 0 var(--espacio-6); }
@media (max-width: 899px) {
  .is-live .visor3d__pasos li:not(.is-activa) { display: none; }
  .is-live .visor3d__nota { display: none; }
  .is-live .visor3d__txt .display-l { font-size: 32px; }
}
@media (min-width: 900px) {
  .visor3d__lienzo { height: 70vh; }
  .is-live .visor3d__lienzo { top: 0; bottom: 0; left: 36%; height: auto; }
  .is-live .visor3d__txt { align-content: center; padding-block: var(--nav-alto) 0; }
  .visor3d__txt > * { max-width: 520px; }
  .visor3d__pie { bottom: var(--espacio-8); }
}

/* ---------- Sangre parallax ---------- */
.sangre__bajada { color: var(--grafito); max-width: 40ch; }
.sangre { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; }
.sangre__img { position: absolute; inset: 0; }
.sangre__img img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; will-change: transform; }
.sangre__txt { position: relative; z-index: 1; padding-block: var(--espacio-24); display: grid; gap: var(--espacio-6); }
.sangre__txt .display-l { font-size: clamp(38px, 4.8vw, 84px); max-width: 16ch; }
.sangre__cota { width: min(320px, 70vw); }

/* ---------- Proceso ---------- */
.linea-tiempo { margin-top: var(--espacio-16); }
.linea-tiempo__regla { position: relative; display: none; margin-bottom: var(--espacio-8); }
.linea-tiempo__trazo { position: absolute; left: 0; right: 0; top: 0; height: var(--borde-muro); background: var(--grafito); transform-origin: left; }
.linea-tiempo__semanas { list-style: none; margin: 0; padding: var(--espacio-3) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--espacio-6); border-top: var(--borde-muro) solid var(--linea); }
.linea-tiempo__semanas li { font: 400 12px/16px var(--font-mono); color: var(--concreto); border-left: var(--borde-fino) solid var(--linea); padding-left: var(--espacio-2); height: 28px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-8); }
.paso { display: grid; gap: var(--espacio-2); align-content: start; border-top: var(--borde-fino) solid var(--linea); padding-top: var(--espacio-4); }
.paso .dato { color: var(--grafito); }
.paso .titulo-s { margin-top: var(--espacio-2); }
@media (min-width: 900px) {
  .linea-tiempo__regla { display: block; }
  .pasos { grid-template-columns: repeat(4, 1fr); column-gap: var(--espacio-6); }
  .paso { border-top: 0; padding-top: 0; padding-right: var(--espacio-4); }
}

/* ---------- Caso ---------- */
.caso__grid { display: grid; gap: var(--espacio-12); margin-top: var(--espacio-8); }
.caso__grid > div:first-child { display: grid; gap: var(--espacio-6); max-width: 62ch; }
.caso__grid .etiqueta { color: var(--concreto); }
.caso__datos { margin: 0; display: grid; align-content: start; }
.caso__datos > div { display: flex; justify-content: space-between; gap: var(--espacio-4); padding: var(--espacio-4) 0; border-top: var(--borde-fino) solid var(--linea); align-items: baseline; }
.caso__datos dt { font-size: 14px; color: var(--concreto); }
.caso__datos dd { margin: 0; font: 500 22px/28px var(--font-mono); }
@media (min-width: 900px) { .caso__grid { grid-template-columns: 7fr 1fr 4fr; } .caso__datos { grid-column: 3; } }

/* ---------- Contacto ---------- */
.contacto__grid { display: grid; gap: var(--espacio-12); }
.contacto__intro { display: grid; gap: var(--espacio-6); align-content: start; }
.contacto__intro .cs-muro { margin-top: calc(-1 * var(--espacio-3)); }
.contacto__cota { width: min(300px, 80vw); }
.contacto__cota .cs-cota { color: var(--concreto); }
@media (min-width: 1000px) {
  .contacto__grid { grid-template-columns: 5fr 1fr 6fr; }
  .formulario { grid-column: 3; }
}
.formulario { display: grid; gap: var(--espacio-4); padding: 0 var(--espacio-6) var(--espacio-6); }
.formulario > .cs-muro { margin: 0 calc(-1 * var(--espacio-6)) var(--espacio-2); }
@media (min-width: 640px) { .formulario { padding: 0 var(--espacio-8) var(--espacio-8); } .formulario > .cs-muro { margin-inline: calc(-1 * var(--espacio-8)); } }
.formulario__fila { display: grid; gap: var(--espacio-4); }
@media (min-width: 640px) { .formulario__fila { grid-template-columns: 1fr 1fr; } }
.formulario__error { margin-top: calc(-1 * var(--espacio-2)); }
.formulario__acciones { padding-top: var(--espacio-2); }
.formulario__ok { margin: 0; padding: var(--espacio-4); background: var(--piedra); font-size: 15px; line-height: 23px; }
.formulario.is-enviando button { opacity: 0.6; pointer-events: none; }

/* ---------- Pie ---------- */
.pie { padding-block: var(--espacio-16) var(--espacio-8); }
.pie__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--espacio-6); margin-bottom: var(--espacio-8); }
.pie__top img { width: 260px; height: auto; }
.pie__tag { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.pie__grid { display: grid; gap: var(--espacio-2); margin-top: var(--espacio-6); }
.pie__links a { color: var(--concreto); }
.pie__links a:hover { color: var(--grafito); }
.pie .aviso-render { margin-top: var(--espacio-6); font-size: 12px; line-height: 18px; }

/* ---------- Revelado ---------- */
.is-live [data-revelar] { opacity: 0; transform: translateY(28px); }
.is-live [data-revelar].is-visto { opacity: 1; transform: none; transition: opacity var(--dur-revelar) var(--ease-salida), transform var(--dur-revelar) var(--ease-salida); }
.is-live .cs-muro[data-revelar] { opacity: 1; transform: scaleX(0); transform-origin: left; }
.is-live .cs-muro[data-revelar].is-visto { transform: none; transition: transform 1400ms var(--ease-salida); }

/* Foco visible en todo enlace */
a:focus-visible, select:focus-visible, input:focus-visible { outline: var(--borde-foco) solid var(--foco); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---------- Página de créditos ---------- */
.pagina-creditos .nav .nav__cta { margin-left: auto; }
.creditos { padding-block: calc(var(--nav-alto) + var(--espacio-16)) var(--espacio-24); }
.creditos .contenedor { max-width: 880px; }
.creditos h1 { margin: var(--espacio-8) 0 var(--espacio-12); }
.creditos__bloque { display: grid; gap: var(--espacio-3); padding: var(--espacio-6) 0; border-top: var(--borde-fino) solid var(--linea); }
.creditos__bloque p { max-width: 68ch; }
.creditos__bloque a { color: var(--grafito); }

/* Campo trampa del formulario: fuera de pantalla, no visible ni enfocable */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }