/* =====================================================================
   Movener — hoja de estilos
   Paleta y reglas de contraste: ver BRIEF.md §3
   ===================================================================== */

:root {
  /* Marca */
  --navy:        #252E5F;
  --navy-dark:   #1B2A4A;
  --azul-medio:  #475291;
  --magenta:     #A7144C;

  /* Sustrato: hueso frío derivado del navy, nunca blanco puro */
  --hueso:       #F2F3F7;
  --hueso-alto:  #FAFAFC;

  /* Sin grises neutros: toda la jerarquía sale del navy en alpha */
  --tinta:       #14161C;
  --tinta-70:    rgba(37, 46, 95, .70);
  --tinta-50:    rgba(37, 46, 95, .50);
  --tinta-25:    rgba(37, 46, 95, .25);
  --tinta-12:    rgba(37, 46, 95, .12);
  --tinta-06:    rgba(37, 46, 95, .06);
  --sobre-navy:  rgba(255, 255, 255, .62);

  /* Módulo de espaciado: todo el ritmo sale de aquí */
  --u: 8px;
  --seccion: clamp(64px, 4vw + 40px, 128px);
  --borde: clamp(20px, 5vw, 72px);
  --nav-h: 64px;   /* medido en el navegador, no estimado */

  /* Escala tipográfica: la jerarquía es por tamaño, no por peso */
  --t-hero:  clamp(2.1rem, 1.1rem + 3.6vw, 4.4rem);
  --t-h2:    clamp(1.5rem, 1rem + 1.9vw, 2.6rem);
  --t-h3:    clamp(1.05rem, .95rem + .5vw, 1.35rem);
  --t-dato:  clamp(2.2rem, 1.2rem + 3.4vw, 4rem);
  --t-body:  clamp(.95rem, .9rem + .2vw, 1.05rem);
  /* Nivel intermedio: pies, notas al margen y letra chica. Existe para que
     nada se escriba con un rem suelto — antes había trece tamaños distintos
     entre .7rem y .95rem y el cuerpo cambiaba de porte de sección en sección. */
  --t-nota:  clamp(.82rem, .78rem + .18vw, .9rem);
  --t-micro: .72rem;
  /* Fuera de la escala, a propósito: la familia mono (nav, etiquetas de los
     campos, cifras de la calculadora) tiene su propio ritmo de .8rem y
     1.15rem. Todo lo demás sale de las variables de arriba — nada de rem
     sueltos, que es lo que había desalineado media página. */

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font: 400 var(--t-body)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Todo dato numérico se alinea en columna */
.dato { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Etiqueta de sección. El filete magenta es el acento: trazo, no relleno */
.eyebrow {
  font: 500 var(--t-micro)/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--magenta);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
}
.eyebrow::before {
  content: "";
  width: calc(var(--u) * 3);
  height: 2px;
  background: var(--magenta);
  flex: none;
}
.eyebrow.sobre-oscuro { color: #FF6C9F; }
.eyebrow.sobre-oscuro::before { background: #FF6C9F; }

.envoltura { max-width: 1320px; margin: 0 auto; padding: 0 var(--borde); }
.seccion { padding: var(--seccion) 0; }

/* Botón: rectangular, sin radio, con desplazamiento del filete al pasar */
.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 2) calc(var(--u) * 3.5);
  background: var(--magenta);
  color: #fff;
  font: 500 var(--t-body)/1 var(--sans);
  letter-spacing: .01em;
  border: 0;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: #8C1040; transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.btn .flecha { transition: transform .18s ease; }
.btn:hover .flecha { transform: translateX(4px); }

.btn-claro { background: #fff; color: var(--navy); }
.btn-claro:hover { background: var(--hueso); }

/* =====================================================================
   Navegación
   ===================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy-dark);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 2) var(--borde);
  max-width: 1320px;
  margin: 0 auto;
}
.nav img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.nav-links a {
  font: 400 .8rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sobre-navy);
  padding: calc(var(--u)) 0;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-links a:hover { color: #fff; border-bottom-color: var(--magenta); }
.nav-idioma { color: rgba(255,255,255,.40) !important; }
@media (max-width: 900px) { .nav-links a:not(.nav-idioma) { display: none; } }

/* =====================================================================
   Hero: la calculadora es el titular
   ===================================================================== */
/* El hero ocupa la pantalla completa menos la barra de navegación.
   svh en vez de vh: en móvil, vh cuenta la barra del navegador que después
   se esconde, y el hero termina más alto que la pantalla. */
.hero {
  position: relative;
  background: var(--navy-dark);
  overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
}

/* Overlay plano sobre la foto: lo que la vuelve utilizable como fondo */
/* El video ocupa todo el hero y se recorta; nunca se deforma */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Velo sobre el video: es lo que vuelve legible el texto encima.
   Más denso a la izquierda, donde va el titular; se abre a la derecha
   para que se vea la carretera. */
.hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(27,42,74,.93) 0%,
    rgba(27,42,74,.82) 38%,
    rgba(27,42,74,.55) 72%,
    rgba(37,46,95,.45) 100%);
}
@media (max-width: 980px) {
  /* Apilado en vertical el titular queda arriba: el velo se invierte a ese eje */
  .hero-velo { background: linear-gradient(180deg,
    rgba(27,42,74,.90) 0%,
    rgba(27,42,74,.86) 45%,
    rgba(27,42,74,.94) 100%); }
}

/* Quien pidió menos movimiento ve el fotograma fijo, no el video */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-velo {
    background-image:
      linear-gradient(105deg, rgba(27,42,74,.93) 0%, rgba(27,42,74,.82) 38%, rgba(27,42,74,.55) 72%, rgba(37,46,95,.45) 100%),
      url("../video/hero-poster.webp");
    background-size: cover;
    background-position: center 58%;
  }
}
/* Isolíneas de pendiente: textura propia, literal del producto */
.hero-lineas { position: absolute; inset: 0; opacity: .28; pointer-events: none; }

.hero-in {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: calc(var(--u) * 8);
  align-items: center;
  padding: calc(var(--u) * 7) var(--borde);
  max-width: 1320px;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; gap: calc(var(--u) * 5); padding: calc(var(--u) * 6) var(--borde); }
}

.hero-texto { color: #fff; }
.hero-texto h1 {
  font: 500 var(--t-hero)/1.02 var(--sans);
  letter-spacing: -.035em;
  margin: calc(var(--u) * 3) 0 calc(var(--u) * 2.5);
  max-width: 15ch;
}
.hero-texto p {
  color: var(--sobre-navy);
  max-width: 44ch;
  font-size: var(--t-body);
}
.hero-pie {
  margin-top: calc(var(--u) * 4);
  padding-top: calc(var(--u) * 2.5);
  border-top: 1px solid rgba(255,255,255,.16);
  font: 400 var(--t-micro)/1.5 var(--mono);
  letter-spacing: .06em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}

/* =====================================================================
   Panel de la calculadora
   ===================================================================== */
.calc {
  background: var(--hueso-alto);
  padding: calc(var(--u) * 4);
  border-top: 3px solid var(--magenta);
  box-shadow: 0 24px 60px rgba(11, 18, 40, .34);
}
@media (max-width: 480px) { .calc { padding: calc(var(--u) * 2.5); } }

.calc-tit {
  font: 500 var(--t-h3)/1.2 var(--sans);
  letter-spacing: -.015em;
  margin: calc(var(--u) * 2) 0 calc(var(--u) * 3);
}
.calc-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 2);
}
@media (max-width: 380px) { .calc-campos { grid-template-columns: 1fr; } }

.campo { display: flex; flex-direction: column; gap: calc(var(--u) * .75); }
.campo label {
  font: 400 var(--t-micro)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-70);
}
.campo-input { position: relative; display: flex; align-items: baseline; }
.campo-input .prefijo,
.campo-input .sufijo {
  font: 400 .8rem/1 var(--mono);
  color: var(--tinta-50);
  flex: none;
}
.campo-input .prefijo { padding-right: 4px; }
.campo-input .sufijo { padding-left: 6px; }
.campo input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--tinta-25);
  background: transparent;
  padding: calc(var(--u) * 1.25) 0;
  font: 500 1.15rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  transition: border-color .18s ease;
  -moz-appearance: textfield;
}
.campo input::-webkit-outer-spin-button,
.campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo input:hover { border-bottom-color: var(--tinta-50); }
.campo input:focus { outline: 0; border-bottom-color: var(--magenta); }

/* Resultado: el número como imagen */
.calc-out { margin-top: calc(var(--u) * 4); }
.calc-out .rot {
  font: 400 var(--t-micro)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-70);
}
.calc-cifra {
  font: 500 var(--t-dato)/.9 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--navy);
  margin: calc(var(--u) * 1.5) 0 calc(var(--u) * .5);
}
.calc-cifra .moneda { font-size: .42em; letter-spacing: 0; color: var(--tinta-50); margin-right: .18em; }
.calc-sub { font: 400 var(--t-nota)/1.5 var(--sans); color: var(--tinta-70); }

.calc-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--tinta-12);
  border-top: 1px solid var(--tinta-12);
  border-bottom: 1px solid var(--tinta-12);
  margin: calc(var(--u) * 3) 0;
}
.chip { background: var(--hueso-alto); padding: calc(var(--u) * 1.75) 0; }
.chip .v {
  font: 500 1.15rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  letter-spacing: -.02em;
}
.chip .v.vacio { color: var(--tinta-25); }
.chip .k {
  font: 400 var(--t-micro)/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-50);
  margin-top: calc(var(--u) * .75);
}
.calc-nota {
  font: 400 var(--t-nota)/1.5 var(--sans);
  color: var(--tinta-50);
  margin-top: calc(var(--u) * 2);
}

/* Pantallas de poca altura (laptops de 768px, ventanas a media pantalla):
   el panel se compacta para que el hero nunca se corte. Sin esto la
   calculadora empuja el hero por encima del alto de la ventana. */
@media (max-height: 860px) and (min-width: 981px) {
  .hero-in { padding-top: calc(var(--u) * 4); padding-bottom: calc(var(--u) * 4); }
  .calc { padding: calc(var(--u) * 3); }
  .calc-tit { margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 2); font-size: 1.05rem; }
  .calc-campos { gap: calc(var(--u) * 1.5); }
  .campo input { padding: calc(var(--u)) 0; font-size: 1.05rem; }
  .calc-out { margin-top: calc(var(--u) * 2.5); }
  .calc-chips { margin: calc(var(--u) * 2) 0; }
  .chip { padding: calc(var(--u) * 1.25) 0; }
  .calc-nota { margin-top: calc(var(--u) * 1.5); }
}
@media (max-height: 720px) and (min-width: 981px) {
  /* La nota explicativa es lo primero que sobra cuando no hay alto */
  .calc-nota { display: none; }
}

/* =====================================================================
   Barra de evidencia
   ===================================================================== */
.evidencia { background: var(--navy); color: #fff; }
.evidencia-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.14);
}
@media (max-width: 760px) { .evidencia-grid { grid-template-columns: 1fr; } }
.ev {
  background: var(--navy);
  padding: calc(var(--u) * 5) calc(var(--u) * 4);
  text-align: center;
}
.ev .v {
  font: 500 clamp(2rem, 1rem + 2.8vw, 3.2rem)/.95 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}
.ev .k {
  font-size: var(--t-body);
  margin-top: calc(var(--u) * 1.5);
  color: rgba(255,255,255,.88);
}
.ev .n {
  font: 400 var(--t-micro)/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-top: calc(var(--u) * .75);
}
.evidencia-metodo {
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border-top: 1px solid rgba(255,255,255,.14);
  font: 400 var(--t-nota)/1.6 var(--sans);
  color: rgba(255,255,255,.52);
  max-width: 78ch;
  margin: 0 auto;
  text-align: center;
}

/* =====================================================================
   Tesis
   ===================================================================== */
/* Fondo igual al del render, para que el rack flote sin recuadro visible */
.tesis { background: #272D39; color: rgba(255,255,255,.76); padding: var(--seccion) 0 0; }

.tesis-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: calc(var(--u) * 9);
  align-items: start;
}
@media (max-width: 900px) { .tesis-grid { grid-template-columns: 1fr; gap: calc(var(--u) * 4); } }

.tesis h2 {
  font: 500 var(--t-h2)/1.08 var(--sans);
  letter-spacing: -.03em;
  color: #fff;
  margin-top: calc(var(--u) * 3);
  max-width: 18ch;
}
.tesis-cuerpo p + p { margin-top: calc(var(--u) * 2.5); }
.tesis-cuerpo strong { font-weight: 500; color: #fff; }
.tesis-destacado {
  border-left: 3px solid var(--magenta);
  padding-left: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 4);
  font-size: 1.1rem;
  color: #fff;
}

/* ---- Despiece a sangre completa ------------------------------------------
   La pista da el recorrido de scroll; el bloque fijo ocupa la pantalla
   entera y el canvas la cubre por completo, recortando el aire lateral
   del render para que el equipo se vea grande. */
.despiece-pista { height: 260vh; position: relative; margin-top: var(--seccion); }

.despiece-fijo {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
}

.despiece-lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Velo bajo el texto. Con el render encuadrado a la derecha, la franja
   izquierda quedó limpia: se midieron los 121 fotogramas y su luminancia
   máxima es 71, sin un solo fotograma con algo más claro. El texto blanco
   ya alcanza 9,3:1 sin velo alguno, así que este solo aporta margen y
   separa el texto del fondo. Al 40% el contraste sube a 12,1:1. */
.despiece-capa {
  position: absolute;
  inset: 0;
  /* Sin envoltura, a diferencia del resto de la página: en una sección a
     sangre el texto se alinea con el borde de la ventana. Encerrarlo en los
     1320 px lo empujaba al centro y en pantallas anchas quedaba flotando. */
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--u) * 4) var(--borde) calc(var(--u) * 4);
  pointer-events: none;
}

/* El velo va en el bloque fijo, no en la capa: tiene que llegar al borde de
   la ventana aunque el texto esté limitado a la envoltura. */
.despiece-fijo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(20, 28, 48, .55) 0%,
    rgba(20, 28, 48, .40) 26%,
    rgba(20, 28, 48, .16) 44%,
    rgba(20, 28, 48, 0) 58%);
}

.despiece-titulo h3 {
  font: 500 var(--t-h2)/1.06 var(--sans);
  letter-spacing: -.03em;
  color: #fff;
  margin-top: calc(var(--u) * 2);
  /* El límite va en el titular y no en su contenedor: `ch` se mide con el
     tamaño de fuente del elemento, y en el div son 16,8 px — el título
     terminaba encajonado en 224 px y partido en tres líneas. */
  max-width: 14ch;
}

/* Los pasos se encienden a medida que aparece cada componente */
.anatomia-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 30ch;
  display: grid;
  gap: 1px;
}
.paso-anat {
  border-left: 2px solid rgba(255,255,255,.20);
  padding: calc(var(--u) * 1.5) 0 calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  transition: border-color .35s ease, opacity .35s ease;
  opacity: .45;
}
.paso-anat.activo { opacity: 1; border-left-color: var(--magenta); }
.paso-anat .t { font: 500 var(--t-h3)/1.2 var(--sans); letter-spacing: -.01em; color: #fff; }
.paso-anat .d { font: 400 var(--t-body)/1.5 var(--sans); color: rgba(255,255,255,.72); margin-top: calc(var(--u) * .4); }

@media (max-width: 900px) {
  .despiece-pista { height: 220vh; }
  /* En vertical el velo se inclina al eje vertical: el texto va abajo */
  .despiece-capa { justify-content: flex-end; gap: calc(var(--u) * 3); }
  .despiece-fijo::after {
    background: linear-gradient(180deg,
      rgba(20, 28, 48, .70) 0%,
      rgba(20, 28, 48, .10) 30%,
      rgba(20, 28, 48, .82) 62%,
      rgba(20, 28, 48, .95) 100%);
  }
  .despiece-titulo { max-width: none; }
  .anatomia-pasos { max-width: none; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u)) calc(var(--u) * 2); }
  .paso-anat .d { display: none; }
  .paso-anat { padding: calc(var(--u)) 0 calc(var(--u)) calc(var(--u) * 1.5); }
  .paso-anat .t { font-size: var(--t-nota); }
}
@media (max-height: 700px) {
  .paso-anat .d { display: none; }
  .paso-anat { padding-top: calc(var(--u)); padding-bottom: calc(var(--u)); }
}

/* =====================================================================
   Cómo funciona — escaneo del diferencial
   ---------------------------------------------------------------------
   A sangre completa, como el despiece: el canvas ocupa la pantalla entera
   y el texto va encima, en la mitad derecha. La pieza se encuadra corrida
   a la izquierda por código (setViewOffset), no con márgenes en CSS: así
   el visitante puede girarla sobre todo el ancho.
   ===================================================================== */
.escaner {
  position: relative;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  min-height: 600px;
  background: #272D39;
  color: rgba(255,255,255,.76);
  overflow: hidden;
}

.escaner-lienzo { position: absolute; inset: 0; }
.escaner-lienzo canvas { display: block; width: 100%; height: 100%; }
/* El cursor anuncia que la pieza se puede tomar */
.escaner.listo .escaner-lienzo { cursor: grab; }
.escaner.listo .escaner-lienzo:active { cursor: grabbing; }

/* Retícula tenue mientras carga. Va con pointer-events:none porque queda
   encima del canvas y, aunque sea invisible, se tragaría el arrastre. */
.escaner-lienzo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 40px 100%;
  opacity: 1;
  transition: opacity .6s ease;
}
.escaner.listo .escaner-lienzo::before { opacity: 0; }

/* La capa de texto tampoco intercepta el puntero: el arrastre es del modelo.
   Lleva la misma envoltura de 1320 px centrada que el resto de la página: el
   canvas va a sangre, pero el texto se alinea con todas las demás secciones. */
.escaner-capa {
  position: absolute;
  inset: 0;
  /* Sin envoltura, igual que el despiece: el texto se ancla al borde derecho
     de la ventana y la pieza ocupa todo lo que queda a la izquierda. */
  z-index: 1;               /* sobre el velo, que se pinta después en el DOM */
  pointer-events: none;
  display: grid;
  /* La columna izquierda va más ancha: el texto se corre a la derecha y deja
     respirar a la pieza, que se encuadra centrada en el 30 % del ancho. */
  grid-template-columns: 1.28fr 1fr;
  align-items: center;
  padding: calc(var(--u) * 4) var(--borde);
}

/* Velo desde la derecha: asegura el contraste del texto sin tapar la pieza.
   Va en la sección y no en la capa, porque la capa está limitada a 1320 px y
   el velo tiene que llegar hasta el borde de la ventana. */
.escaner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(265deg,
    rgba(24, 30, 44, .72) 0%,
    rgba(24, 30, 44, .54) 32%,
    rgba(24, 30, 44, .20) 55%,
    rgba(24, 30, 44, 0) 71%);
}
@media (max-width: 900px) { .escaner::after { display: none; } }
/* Pegado al borde derecho, no al inicio de su columna: si se ancla al inicio,
   el bloque queda flotando en medio y deja un hueco creciente a la derecha. */
.escaner-texto { grid-column: 2; justify-self: end; max-width: 46ch; }
.escaner .eyebrow { color: rgba(255,255,255,.55); }
.escaner h2 {
  font: 500 var(--t-h2)/1.08 var(--sans);
  letter-spacing: -.03em;
  color: #fff;
  margin-top: calc(var(--u) * 2);
  max-width: 16ch;
}

.escaner-nota {
  position: absolute;
  left: var(--borde);
  bottom: calc(var(--u) * 3);
  font: 400 var(--t-nota)/1.4 var(--mono);
  letter-spacing: .02em;
  color: rgba(255,255,255,.38);
}
/* En táctil un dedo hace scroll y la pieza se gira con dos: la nota lo dice */
.solo-tactil { display: none; }
@media (hover: none) {
  .solo-mouse { display: none; }
  .solo-tactil { display: inline; }
}

/* Los pasos se encienden al paso del láser y quedan encendidos */
.pasos-esc {
  list-style: none;
  margin: calc(var(--u) * 4) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.paso-esc {
  border-left: 2px solid rgba(255,255,255,.16);
  padding: calc(var(--u) * 1.75) 0 calc(var(--u) * 1.75) calc(var(--u) * 3);
  opacity: .4;
  transition: opacity .5s ease, border-color .5s ease;
}
.paso-esc.activo { opacity: 1; border-left-color: var(--magenta); }
.paso-esc .num { font: 500 .8rem/1 var(--mono); color: var(--magenta); letter-spacing: .1em; }
.paso-esc h3 {
  font: 500 var(--t-h3)/1.2 var(--sans);
  letter-spacing: -.03em;
  color: #fff;
  margin: calc(var(--u) * 1.25) 0 calc(var(--u) * .75);
}
.paso-esc p { font-size: var(--t-body); color: rgba(255,255,255,.74); }

/* Sin WebGL no hay pieza que mostrar: la sección vuelve a ser texto y se
   deja de reservar una pantalla completa. */
.escaner.sin-3d { height: auto; min-height: 0; padding: var(--seccion) 0; }
.escaner.sin-3d .escaner-lienzo,
.escaner.sin-3d .escaner-nota { display: none; }
.escaner.sin-3d .escaner-capa {
  position: static;
  display: block;
  background: none;
  padding: 0 var(--borde);
}
.escaner.sin-3d .escaner-texto { max-width: none; }
.escaner.sin-3d .pasos-esc { grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 4); }
.escaner.sin-3d .paso-esc { opacity: 1; }

@media (max-width: 900px) {
  /* En vertical la pieza va arriba y el texto abajo, con el velo girado */
  .escaner { height: auto; min-height: 0; }
  .escaner-lienzo { position: relative; height: min(86vw, 52vh); min-height: 280px; }
  .escaner-capa {
    position: static;
    display: flex;
    flex-direction: column;
    padding: calc(var(--u) * 3) var(--borde) var(--seccion);
    background: none;
  }
  .escaner-texto { max-width: none; }
  .escaner-nota {
    position: static;
    order: -1;                        /* justo bajo la pieza, no al final */
    margin-bottom: calc(var(--u) * 3);
    font-size: var(--t-nota);
  }
  .escaner.sin-3d .pasos-esc { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .paso-esc { transition: none; }
}

/* =====================================================================
   Aplicaciones
   ===================================================================== */
.aplicaciones { background: var(--hueso-alto); }
.apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 5);
}
@media (max-width: 1000px) { .apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .apps { grid-template-columns: 1fr; } }
.app {
  border: 1px solid var(--tinta-12);
  border-top: 3px solid var(--navy);
  padding: calc(var(--u) * 3.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
  min-height: 200px;
  transition: border-top-color .2s ease, transform .2s ease;
}
.app:hover { border-top-color: var(--magenta); transform: translateY(-3px); }
.app h3 { font: 500 var(--t-h3)/1.2 var(--sans); color: var(--navy); letter-spacing: -.015em; }
.app p { font-size: var(--t-body); color: var(--tinta-70); }
.app .marca {
  margin-top: auto;
  font: 400 var(--t-micro)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-50);
}

/* =====================================================================
   Tienda
   ---------------------------------------------------------------------
   Va entre dos secciones claras, así que se distingue por composición y
   no por color: filete magenta arriba y los rubros como índice.
   ===================================================================== */
.tienda { border-top: 3px solid var(--magenta); }
.tienda-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
  align-items: start;
}
@media (max-width: 900px) { .tienda-grid { grid-template-columns: 1fr; gap: calc(var(--u) * 5); } }

.tienda h2 {
  font: 500 var(--t-h2)/1.08 var(--sans);
  letter-spacing: -.03em;
  color: var(--navy);
  margin-top: calc(var(--u) * 2);
  max-width: 14ch;
}
.tienda-bajada {
  color: var(--tinta-70);
  margin-top: calc(var(--u) * 3);
  max-width: 42ch;
}
.tienda .btn { margin-top: calc(var(--u) * 4); }
.tienda-nota {
  margin-top: calc(var(--u) * 3);
  font-size: var(--t-nota);
  color: var(--tinta-50);
  max-width: 44ch;
}
.tienda-nota a {
  color: var(--magenta);
  border-bottom: 1px solid var(--tinta-25);
  transition: border-color .2s ease;
}
.tienda-nota a:hover { border-bottom-color: var(--magenta); }

/* Los rubros son un índice del catálogo, no tarjetas: solo reglas finas */
.rubros {
  list-style: none;
  margin: calc(var(--u) * 1.5) 0 0;
  padding: 0;
  border-top: 1px solid var(--tinta-12);
}
.rubros li {
  border-bottom: 1px solid var(--tinta-12);
  padding: calc(var(--u) * 2.5) 0;
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: calc(var(--u) * 2);
  align-items: baseline;
}
@media (max-width: 620px) { .rubros li { grid-template-columns: 1fr; gap: calc(var(--u) * .75); } }
.rubros h3 {
  font: 500 var(--t-h3)/1.2 var(--sans);
  letter-spacing: -.015em;
  color: var(--navy);
}
.rubros p { font-size: var(--t-body); color: var(--tinta-70); }

/* =====================================================================
   Clientes
   ===================================================================== */
.clientes-tit {
  font: 500 var(--t-h2)/1.08 var(--sans);
  letter-spacing: -.03em;
  color: var(--navy);
  margin-top: calc(var(--u) * 2.5);
  max-width: 20ch;
}

/* Marquesina de clientes: se desliza sola, se detiene al pasar el mouse.
   La máscara difumina los extremos para que entren y salgan sin corte seco. */
.marquesina {
  margin-top: calc(var(--u) * 6);
  overflow: hidden;
  border-top: 1px solid var(--tinta-12);
  border-bottom: 1px solid var(--tinta-12);
  padding: calc(var(--u) * 3) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquesina-pista {
  display: flex;
  align-items: center;
  width: max-content;
  animation: correr 46s linear infinite;
}
.marquesina:hover .marquesina-pista { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }

.marca {
  flex: none;
  height: 84px;               /* deja aire a los escudos, que se escalan más */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 5);
  border-right: 1px solid var(--tinta-12);
}
/* Altura FIJA, no máxima: varios de estos archivos traen un tamaño intrínseco
   chico (el SVG de Codelco mide 50x30) y con max-height se quedaban diminutos,
   porque max-height limita pero no amplía. Con object-fit la proporción se
   respeta cuando max-width entra a operar en los logos muy alargados. */
.marca img {
  height: 52px;               /* el JS lo ajusta según la escala óptica */
  max-width: 172px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.52);
  transition: filter .25s ease;
}
.marca:hover img { filter: grayscale(0) opacity(1); }

/* Marcas sin logo disponible: se resuelven tipográficamente para que la fila
   se lea pareja en vez de dejar huecos. */
.marca-texto {
  font: 500 var(--t-nota)/1.15 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-50);
  text-align: center;
  max-width: 15ch;
  transition: color .25s ease;
}
.marca:hover .marca-texto { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  /* Sin desplazamiento: la lista se muestra completa y quieta */
  .marquesina { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquesina-pista { animation: none; }
}
@media (max-width: 700px) {
  .marca { padding: 0 calc(var(--u) * 3); height: 42px; }
  .marca img { max-width: 120px; }
  .marca-texto { font-size: var(--t-micro); }
}

/* =====================================================================
   Cierre
   ===================================================================== */
.cierre { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.cierre-lineas { position: absolute; inset: 0; opacity: .16; pointer-events: none; }
.cierre-in { position: relative; }
.cierre h2 {
  font: 500 var(--t-h2)/1.06 var(--sans);
  letter-spacing: -.03em;
  margin: calc(var(--u) * 3) 0 calc(var(--u) * 2);
  max-width: 20ch;
}
.cierre p { color: var(--sobre-navy); max-width: 52ch; margin-bottom: calc(var(--u) * 4); }

/* =====================================================================
   Pie
   ===================================================================== */
.pie { background: var(--navy-dark); color: rgba(255,255,255,.52); }
.pie-in {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 4);
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(var(--u) * 6) var(--borde);
  max-width: 1320px;
  margin: 0 auto;
}
.pie img { height: 24px; opacity: .85; margin-bottom: calc(var(--u) * 2); }
.pie a:hover { color: #fff; }
.pie-col h4 {
  font: 500 var(--t-micro)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.36);
  margin: 0 0 calc(var(--u) * 2);
}
.pie-lema { max-width: 30ch; font-size: var(--t-nota); }
.pie-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.25); font-size: var(--t-nota); }
.pie-legal {
  border-top: 1px solid rgba(255,255,255,.10);
  padding: calc(var(--u) * 3) var(--borde);
  max-width: 1320px;
  margin: 0 auto;
  font: 400 var(--t-nota)/1.5 var(--mono);
  letter-spacing: .04em;
  color: rgba(255,255,255,.32);
}