/* ============================================================
   MCTidia — landing cinematográfica, plató full-bleed
   Negro dominante. Acentos: cobre #ff9d5c (mecatrónica) · cian #35d6ff (IA).
   Luz cálida a la izquierda, fría a la derecha: la misma gramática de color
   que el video de apertura (brazo robótico cobre ↔ mano holográfica cian).

   Secuencia (todo anclado por el sticky, nada hace scroll interno):
     1. scrub del video
     2. apagón total → negro puro
     3. las luces de plató nacen del negro (rescoldos + lluvia de datos)
     4. el plató full-bleed emerge: sin tarjeta, la pantalla ES el panel
     5. coreografía de entrada por capas (letras, HUD, dossier, ticker)

   Composición estilo film-site: contenido anclado a las esquinas,
   titular gigante DETRÁS del modelo 3D (el canvas lo ocluye: profundidad
   real), metadatos monoespaciados citando el HUD del video.
   ============================================================ */

/* El acento recorre el eje cobre → cian conforme avanza el proceso.
   @property permite transicionar el color; sin tipo saltaría de golpe. */
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff9d5c;
}

:root {
  --bg: #000000;
  --copper: #ff9d5c;
  --cyan: #35d6ff;
  --accent: #ff9d5c;
  --text: #edf1f5;
  --text-dim: rgba(237, 241, 245, 0.64);
  /* 0.5 es el suelo: por debajo, las etiquetas mono pequeñas caen
     bajo el 4.5:1 que pide la AA sobre negro */
  --text-faint: rgba(237, 241, 245, 0.5);
  --hairline: rgba(237, 241, 245, 0.09);
  --hairline-hi: rgba(237, 241, 245, 0.17);
  --pad: clamp(18px, 2.6vw, 44px);
  /* altura real de la barra fija: todo lo que vive debajo (plató,
     índice de servicios) reserva este margen para no meterse bajo ella */
  --nav-h: clamp(60px, 8.6vh, 84px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
  /* Capa de interfaz: aquí mandan los colores exactos del manual de marca
     (#00E5FF cian eléctrico, #FF6B00 ámbar industrial, #22262B titanio).
     El plató cinematográfico conserva las versiones apagadas de arriba
     porque el modelo 3D necesita ese contraste sobre el negro; los
     controles con los que el usuario interactúa —botones, foco, campos—
     usan el color de marca sin rebajar. */
  --ui-cyan: #00e5ff;
  --ui-amber: #ff6b00;
  --titanium: #22262b;
  --focus: #00e5ff;
  /* Sombras por capas: una corta de contacto y otra larga de ambiente.
     Una sola sombra grande aplana; dos dan la sensación de altura. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.38);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.62), 0 22px 50px rgba(0, 0, 0, 0.48);
  --glow-cyan: 0 0 0 1px rgba(0, 229, 255, 0.28), 0 10px 34px rgba(0, 229, 255, 0.16);
  --glow-amber: 0 0 0 1px rgba(255, 107, 0, 0.3), 0 10px 34px rgba(255, 107, 0, 0.18);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --grot: "Space Grotesk", "Inter", sans-serif;
  --brand: "Michroma", "Inter", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  scrollbar-gutter: stable;
  color-scheme: dark;
  /* barra de scroll integrada al plató: fina y casi negra, no la
     tira gris del sistema cruzando una página de cine */
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 241, 245, 0.16) transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(237, 241, 245, 0.14);
  border-radius: 999px;
  border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover { background: rgba(237, 241, 245, 0.26); }

/* la selección también habla el idioma de la marca */
::selection {
  background: color-mix(in srgb, var(--cyan) 28%, transparent);
  color: var(--text);
}

a, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Salto al contenido: fuera de pantalla hasta recibir el foco */
.skip {
  position: absolute;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #000;
  color: var(--text);
  font-size: 0.8rem;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(237, 241, 245, 0.2);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}

.skip:focus-visible { transform: none; outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Interruptor de animación automática (dossier de proceso) ---------- */

.autoplay-toggle {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 10px 16px 10px 14px;
  border: 1px solid var(--hairline-hi);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 12px 0 0;
  background: rgba(8, 10, 13, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

.autoplay-toggle:hover,
.autoplay-toggle:focus-visible {
  color: var(--cyan);
  background: rgba(14, 18, 24, 0.94);
}

.autoplay-toggle:disabled { opacity: 0.5; cursor: default; }

.autoplay-toggle__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 214, 255, 0.18);
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.autoplay-toggle[aria-pressed="false"] .autoplay-toggle__dot {
  background: var(--text-faint);
  box-shadow: none;
}

/* Se retira en cuanto termina la escena de apertura (JS pone [hidden]);
   sin este selector, el display:flex de arriba gana igual y no se
   escondería. También se retira con movimiento reducido: la escena
   arranca ya en su estado final, sin nada que reproducir. */
.autoplay-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .autoplay-toggle { display: none; }
}
:root[data-motion="reduce"] .autoplay-toggle { display: none; }

/* ---------- Escenario ---------- */

.cinema {
  position: relative;
  z-index: 1;
  /* recorrido largo: cada fase respira, y entre el plató completo y su
     salida queda casi una pantalla de sostén (la pausa del segundo acto) */
  height: 640vh;
}

.cinema__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

/* ---------- Capa 0: fotogramas ---------- */

.cinema__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.cinema__hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}

.cinema__hint.is-hidden { opacity: 0; }

.cinema__hint-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, var(--text-dim), transparent);
  animation: hint-drop 2.2s var(--ease-out) infinite;
}

@keyframes hint-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Capa 1: apagón ---------- */

.blackout {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ---------- Capa 2: luces de plató ----------
   Heredan el fondo del video: rescoldos y bokeh cálidos a la izquierda
   (taller), columnas de datos frías a la derecha (matriz). Respiran con
   ciclos largos y desfasados para que nada se lea como bucle. */

.lights {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.lights__beam {
  position: absolute;
  top: -12%;
  width: 46vw;
  height: 124%;
  filter: blur(18px);
}

.lights__beam--warm {
  left: -16vw;
  background:
    radial-gradient(38vw 62vh at 22% 44%, rgba(255, 157, 92, 0.16), transparent 68%),
    radial-gradient(16vw 34vh at 8% 62%, rgba(255, 120, 48, 0.1), transparent 70%);
  animation: beam-breathe 13s ease-in-out infinite;
}

.lights__beam--cool {
  right: -16vw;
  background:
    radial-gradient(38vw 62vh at 78% 48%, rgba(53, 214, 255, 0.14), transparent 68%),
    radial-gradient(16vw 34vh at 92% 30%, rgba(24, 150, 200, 0.09), transparent 70%);
  animation: beam-breathe 17s ease-in-out -6s infinite;
}

/* Bokeh de taller: motas cálidas desenfocadas flotando a la izquierda,
   como los rescoldos del fondo del video. Dos capas de puntos radiales
   que derivan en vertical con periodos distintos. */
.lights__bokeh {
  position: absolute;
  left: 0;
  top: -10%;
  width: 40vw;
  height: 120%;
  filter: blur(3px);
  opacity: 0.38;
  background-image:
    radial-gradient(4px 4px at 12% 30%, rgba(255, 170, 100, 0.5), transparent 60%),
    radial-gradient(3px 3px at 28% 62%, rgba(255, 140, 70, 0.36), transparent 60%),
    radial-gradient(5px 5px at 7% 74%, rgba(255, 190, 120, 0.3), transparent 60%),
    radial-gradient(2.5px 2.5px at 34% 18%, rgba(255, 150, 80, 0.4), transparent 60%),
    radial-gradient(3.5px 3.5px at 20% 88%, rgba(255, 160, 90, 0.28), transparent 60%);
  background-repeat: no-repeat;
  animation: bokeh-drift 26s ease-in-out infinite alternate;
}

@keyframes bokeh-drift {
  from { transform: translate3d(0, 1.5%, 0); }
  to   { transform: translate3d(0, -2.5%, 0); }
}

/* Lluvia de datos: columnas verticales finas cayendo muy despacio por la
   derecha, casi subliminales. La máscara la confina al borde frío. */
.lights__rain {
  position: absolute;
  right: 0;
  top: -20%;
  width: 34vw;
  height: 140%;
  opacity: 0.035;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 26px,
    rgba(53, 214, 255, 0.7) 26px 27px,
    transparent 27px 64px
  );
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 96%),
    repeating-linear-gradient(180deg, #000 0 90px, transparent 90px 200px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(270deg, #000 30%, transparent 96%),
    repeating-linear-gradient(180deg, #000 0 90px, transparent 90px 200px);
  mask-composite: intersect;
  animation: rain-fall 24s linear infinite;
}

@keyframes rain-fall {
  from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
  to   { -webkit-mask-position: 0 0, 0 200px; mask-position: 0 0, 0 200px; }
}

/* Rescoldo de suelo: sensación de plató con piso */
.lights__floor {
  position: absolute;
  left: 50%;
  bottom: -22vh;
  width: 92vw;
  height: 44vh;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(120, 150, 175, 0.09), transparent 74%);
  filter: blur(26px);
  /* solo opacidad: animar transform rompería el centrado por translateX */
  animation: floor-breathe 21s ease-in-out -11s infinite;
}

@keyframes beam-breathe {
  0%, 100% { opacity: 0.72; transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: 1;    transform: translate3d(0, -1.5%, 0) scale(1.05); }
}

@keyframes floor-breathe {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ============================================================
   Capa 3: el plató full-bleed
   ============================================================ */

.stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  /* estado inicial: invisible, ligeramente hundido y ampliado; JS lo revela.
     visibility además de opacity: un plató invisible no debe cazar el cursor */
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 5vh, 0) scale(1.02);
  will-change: opacity, transform;
}

/* Ciclorama de estudio: el fondo no es negro plano, es un plató fotográfico.
   Un velo azul-carbón detrás del modelo, una línea de horizonte apenas
   insinuada y la vieta que hunde los bordes, como en el video. */
.stage__vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* fondo del ciclorama: respiración azul-carbón tras el modelo */
    radial-gradient(90% 72% at 50% 46%, rgba(26, 36, 50, 0.34), transparent 70%),
    /* rebote del suelo: el plató tiene piso, no vacío */
    radial-gradient(70% 24% at 50% 88%, rgba(52, 66, 84, 0.16), transparent 75%),
    /* línea de horizonte, casi subliminal */
    linear-gradient(180deg, transparent 71.9%, rgba(150, 170, 195, 0.045) 72%, transparent 72.4%),
    /* vieta */
    radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 16% 82%, rgba(0, 0, 0, 0.62));
}

/* Halo que sigue al cursor: cálido en la mitad izquierda, frío en la
   derecha. JS escribe --mx/--my y --warmth (0-1 según la x). */
.stage__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
  background:
    radial-gradient(34rem 30rem at var(--mx, 50%) var(--my, 55%),
      rgba(255, 157, 92, calc(0.07 * (1 - var(--warmth, 0.5)) + 0.07)), transparent 62%);
}

/* dos capas superpuestas darían dos repintados; una sola con el color
   mezclado por JS es más barata, ver parallax.js */
.stage.is-live .stage__glow { opacity: calc(1 - var(--warmth, 0.5) * 0); }

/* Grano de película sobre todo el plató. Turbulencia SVG en data URI. */
.stage__grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* Barrido de refresco de monitor, muy lento */
.stage__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--accent) 3.5%, transparent) 60%, transparent);
  opacity: 0;
}

.stage.is-live .stage__scan { animation: scan-pass 11s linear 2s infinite; }

@keyframes scan-pass {
  0%   { transform: translateY(-120%); opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translateY(400%); opacity: 0; }
}

/* ============================================================
   Coreografía de entrada
   Cada pieza lleva .e + un modificador de gesto y su retardo --i.
   .is-live en .stage dispara todo; `both` conserva el estado final.
   ============================================================ */

.e { opacity: 0; }

/* .e--drop es siempre el nav: sus piezas escalonan cuando la barra se
   revela (.is-shown, lo pone heroScroll al emerger el plató), no al
   cargar — durante el video la barra ni existe en pantalla */
.nav.is-shown .e--drop { animation: e-drop 0.9s var(--ease-cine) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.stage.is-live .e--rise { animation: e-rise 1.05s var(--ease-cine) both; animation-delay: calc(var(--i, 0) * 85ms + 200ms); }
.stage.is-live .e--card { animation: e-card 1.15s var(--ease-cine) both; animation-delay: calc(var(--i, 0) * 85ms + 240ms); }

@keyframes e-drop {
  from { opacity: 0; transform: translate3d(0, -16px, 0); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes e-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes e-card {
  from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.97); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- Barra superior ----------
   Fija sobre todo el sitio: no vive dentro de ninguna escena, así que
   nunca se va con el scroll — ni durante el video de apertura, ni en
   el plató, ni en servicios. Un pequeño fundido de fondo la hace
   legible sobre cualquier cosa que pase por debajo. */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2.4vw, 40px);
  padding: 0 var(--pad);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.32) 60%, transparent 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Oculta durante el video de apertura: la proyección se ve limpia, sin
     interfaz encima. heroScroll enciende .is-shown cuando el plató emerge
     del apagón; si se vuelve a subir al video, la barra se retira otra vez.
     visibility con retardo: no desaparece antes de terminar su fundido. */
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -14px, 0);
  pointer-events: none;
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.65s var(--ease-cine),
    visibility 0s linear 0.55s;
}

.nav.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.65s var(--ease-cine),
    visibility 0s;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity 0.25s var(--ease-out);
}

.nav__brand:hover { opacity: 0.78; }
.nav__brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

.nav__logo {
  display: block;
  height: clamp(34px, 3.6vw, 52px);
  width: auto;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 14px);
  margin-left: auto;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  transition: color 0.3s var(--ease-out);
}

/* subrayado que se despliega desde la izquierda */
.nav__link-txt {
  position: relative;
}

.nav__link-txt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-cine);
}

.nav__link:hover { color: var(--text); }
.nav__link:hover .nav__link-txt::after { transform: scaleX(1); transform-origin: left; }
.nav__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; color: var(--text); }

.nav__arrow { display: block; opacity: 0.7; transition: transform 0.35s var(--ease-cine); }
.nav__link--ext:hover .nav__arrow { transform: translate(2px, -2px); }

/* ── Cuenta en la barra ───────────────────────────────────────────── */

/* Sin sesión, el enlace se comporta como llamada a la acción: quien
   todavía no tiene cuenta necesita ver dónde se entra, no una palabra
   más en la fila. */
.nav__link--cta {
  padding: 9px 16px;
  border: 1px solid var(--hairline-hi, rgba(237, 241, 245, 0.18));
  border-radius: 999px;
  color: var(--text);
  background: rgba(237, 241, 245, 0.05);
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out);
}
.nav__link--cta:hover {
  background: rgba(237, 241, 245, 0.11);
  border-color: rgba(237, 241, 245, 0.32);
}
.nav__link--cta .nav__link-txt::after { display: none; }

/* Con sesión, la ficha: foto (o iniciales) y nombre de pila. Lleva al
   mismo sitio, pero se lee como «esta es tu cuenta» y no como una
   sección más del menú. */
.nav__link--chip {
  gap: 9px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--hairline-hi, rgba(237, 241, 245, 0.18));
  border-radius: 999px;
  color: var(--text);
  background: rgba(237, 241, 245, 0.05);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.nav__link--chip:hover {
  background: rgba(237, 241, 245, 0.11);
  border-color: rgba(237, 241, 245, 0.32);
}
.nav__link--chip .nav__link-txt::after { display: none; }

.nav__face {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #04060a;
  background: linear-gradient(120deg, var(--ui-amber, #ff6b00), var(--ui-cyan, #00e5ff));
}
.nav__face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.nav__face-name { text-transform: none; letter-spacing: 0.06em; }

/* Punto de aviso mientras quede algo pendiente (hoy, el correo sin
   confirmar). Cuelga de la propia foto, así que no depende de cuánto
   respire el enlace en cada corte de pantalla. */
.nav__link--chip.has-todo .nav__face::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #0a0c0e;
  background: var(--ui-amber, #ff6b00);
}

/* Botón de menú (hamburguesa → X). Oculto en escritorio: solo aparece
   en el corte móvil, donde el índice horizontal no cabe. */
.nav__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }

.nav__toggle-box { position: relative; width: 22px; height: 13px; }
.nav__toggle-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--ease-cine), opacity 0.25s var(--ease-out);
}
.nav__toggle-line:nth-child(1) { top: 0; }
.nav__toggle-line:nth-child(2) { bottom: 0; }
.nav.is-open .nav__toggle-line:nth-child(1) { transform: translateY(5.75px) rotate(45deg); }
.nav.is-open .nav__toggle-line:nth-child(2) { transform: translateY(-5.75px) rotate(-45deg); }

/* Bloquea el scroll del cuerpo mientras el menú móvil está abierto */
body.nav-locked { overflow: hidden; }

/* ============================================================
   Plató principal
   z dentro de .stage__main:
     0 ghost · 1 titular · 2 escena 3D (ocluye el titular) ·
     3 bloques de contenido · (marcas/grano/scan del stage van encima)
   ============================================================ */

.stage__main {
  position: relative;
  flex: 1;
  min-height: 0;
  outline: none;
}

/* ---------- Rótulo fantasma ---------- */

.ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transform: translateY(-2%);
  pointer-events: none;
  user-select: none;
}

/* El logotipo real como marca de agua: enorme, apenas presente, con un
   velo de desenfoque para que se lea como fondo y no como elemento */
.ghost__img {
  width: min(82vw, 1200px);
  height: auto;
  opacity: 0.045;
  filter: blur(1.5px);
}

.stage.is-live .ghost__img { animation: ghost-in 2.6s var(--ease-out) 0.35s both; }

@keyframes ghost-in {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 0.045; transform: scale(1); }
}

/* ---------- Titular: lockup centrado en la franja superior ---------- */

.head {
  position: absolute;
  z-index: 1;
  left: var(--pad);
  right: var(--pad);
  /* el nav ahora es fijo y vive fuera del plató: el titular reserva su
     alto para no arrancar debajo de la barra */
  top: calc(var(--nav-h) + clamp(4px, 1.2vh, 14px));
  margin: 0;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.head__row { display: block; }

.head__row--caps {
  padding-bottom: 0.06em;
  font-family: var(--grot);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* Revelado por palabra: cada máscara esconde su palabra hasta la entrada */
.hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.06em 0.08em;
  margin: 0 -0.06em -0.08em 0;
}

.hw i {
  display: inline-block;
  font-style: normal;
  transform: translate3d(0, 116%, 0);
  opacity: 0;
  will-change: transform;
}

.stage.is-live .hw i {
  animation: ltr-rise 1s var(--ease-cine) both;
  animation-delay: calc(var(--w, 0) * 90ms + 340ms);
}

@keyframes ltr-rise {
  from { transform: translate3d(0, 116%, 0); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.head__row--sub {
  margin: 0.16em 0 0;
}

.head__mask {
  display: block;
  overflow: hidden;
  padding: 0.1em 0.14em 0.16em 0.04em;
  margin: -0.04em;
}

/* Misma familia que la línea en caps, más ligera: una segunda voz del
   mismo lockup, no una cita aparte */
.head__em {
  display: inline-block;
  font-family: var(--grot);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--text-dim);
  transform: translate3d(0, 116%, 0);
  opacity: 0;
  will-change: transform;
}

/* El eje térmico de la marca, dentro del propio titular:
   mecatrónica cálida, IA fría */
.head__warm {
  background: linear-gradient(96deg, #ffb37a, var(--copper));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.head__cool {
  background: linear-gradient(96deg, var(--cyan), #7ce4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stage.is-live .head__em {
  animation: ltr-rise 1.15s var(--ease-cine) 0.78s both;
}

/* ---------- Escena 3D ---------- */

.scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}

.scene.is-live { opacity: 1; }

.scene__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  /* el dedo puede seguir haciendo scroll vertical; el gesto horizontal gira */
  touch-action: pan-y;
}

.scene__canvas.is-grabbing { cursor: grabbing; }

/* Sombra de contacto: ancla el modelo al suelo del plató */
.scene__shadow {
  position: absolute;
  left: 50%;
  bottom: 13%;
  width: min(30vw, 380px);
  height: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent 72%);
  filter: blur(10px);
}

/* Rescoldo bajo el modelo */
.scene__floor {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(56vw, 760px);
  height: clamp(70px, 14vh, 130px);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(140, 165, 190, 0.1), transparent 74%);
  filter: blur(28px);
  animation: floor-breathe 17s ease-in-out -5s infinite;
}

/* ---------- La empresa (inferior izquierda) ---------- */

.info {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  bottom: var(--pad);
  max-width: min(52ch, 40vw);
  padding-left: clamp(16px, 1.6vw, 22px);
}

/* Scrim local: penumbra suave tras el texto para que se lea limpio aunque
   el metal claro del modelo pase por detrás. Sin caja: solo oscuridad. */
.info::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -36px -70px -36px -36px;
  background: radial-gradient(105% 100% at 32% 52%, rgba(0, 0, 0, 0.62), transparent 74%);
  pointer-events: none;
}

/* barra de acento cobre→cian: el mismo eje térmico de la marca, aquí como
   marco vertical que le da al bloque el peso de una tarjeta sin serlo */
.info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--copper), var(--cyan));
  opacity: 0.65;
}

.info__title {
  margin: 0 0 clamp(10px, 1.5vh, 14px);
  font-family: var(--grot);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.info__text {
  margin: 0;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 1.75;
  color: var(--text-dim);
  text-wrap: pretty;
}

.info__text + .info__text { margin-top: clamp(10px, 1.4vh, 14px); }

/* ---------- Dossier de proceso + cotización (inferior derecha) ---------- */

.dossier {
  position: absolute;
  z-index: 3;
  right: var(--pad);
  bottom: var(--pad);
  width: min(440px, 36vw);
  border: 1px solid var(--hairline-hi);
  border-radius: clamp(18px, 1.8vw, 26px);
  background: linear-gradient(160deg, rgba(14, 17, 22, 0.72), rgba(3, 5, 8, 0.66));
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(237, 241, 245, 0.08),
    0 40px 80px -32px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transform-style: preserve-3d;
}

/* Cuenta atrás del avance automático, sobre el filo superior de la carta */
.dossier__timer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(237, 241, 245, 0.06);
}

.dossier__timer-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.dossier__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(13px, 1.5vw, 18px) clamp(15px, 1.7vw, 20px) 0;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dossier__paren { margin: 0; color: var(--text-dim); }

.dossier__index {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.dossier__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 1.4vw, 20px);
  align-items: start;
  padding: clamp(12px, 1.5vw, 18px) clamp(16px, 1.9vw, 24px) clamp(6px, 0.8vw, 10px);
}

/* Índice rodante: los cuatro números apilados; translateY muestra el activo */
.dossier__num {
  overflow: hidden;
  height: clamp(2.6rem, 3.4vw, 3.4rem);
}

.dossier__num-roll {
  display: block;
  font-family: var(--grot);
  font-weight: 600;
  font-size: clamp(2.6rem, 3.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  transition: transform 0.7s var(--ease-cine), color 0.6s var(--ease-out);
}

.dossier__num-roll span { display: block; }

/* Nombre de la etapa, protagonista de la carta */
.dossier__name {
  margin: 0;
  font-family: var(--grot);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--text);
  transition: opacity 0.25s var(--ease-out);
}

.dossier__name.is-swapping { opacity: 0; }

.dossier__caption {
  margin: 7px 0 0;
  min-height: 3.2em;
  font-size: clamp(0.78rem, 0.88vw, 0.88rem);
  line-height: 1.6;
  color: var(--text-dim);
  transition: opacity 0.25s var(--ease-out);
}

.dossier__caption.is-swapping { opacity: 0; }
.dossier__caption:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.dossier__arrows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dossier__arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--hairline-hi);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
              background-color 0.3s var(--ease-out);
}

.dossier__arrow:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.dossier__arrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---- Segmentos de etapa: línea de tiempo pulsable ----
   Cuatro tramos iguales; el activo enciende su barra con el acento.
   La barra + el nombre en color evitan depender solo del color. */

.dossier__segs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 12px);
  padding: 0 clamp(16px, 1.9vw, 24px) clamp(12px, 1.4vw, 16px);
}

.dossier__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 6px 0 4px;
  border: 0;
  background: none;
  cursor: pointer;
}

.dossier__tab-bar {
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(237, 241, 245, 0.12);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.dossier__tab-name {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.35s var(--ease-out);
}

.dossier__tab[aria-selected="true"] .dossier__tab-bar {
  background: var(--accent);
  box-shadow: 0 0 12px -2px var(--accent);
}

.dossier__tab[aria-selected="true"] .dossier__tab-name {
  color: var(--text);
  font-weight: 500;
}

.dossier__tab:hover .dossier__tab-name { color: var(--text); }
.dossier__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Cotización */
.dossier__cta {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.1vh, 12px);
  padding: clamp(12px, 1.4vw, 16px) clamp(15px, 1.7vw, 20px) clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--hairline);
}

.dossier__pitch {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: clamp(13px, 1.4vw, 15px) clamp(20px, 2vw, 28px);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
              color 0.35s var(--ease-out);
}

.cta__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 88%, #000) 0%,
    color-mix(in srgb, var(--accent) 55%, var(--cyan)) 100%);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.55s var(--ease-cine);
}

.cta:hover {
  color: #05070a;
  border-color: transparent;
  box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}

.cta:hover .cta__fill { transform: none; }
.cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.cta__label, .cta__arrow { position: relative; }

.cta__arrow { display: inline-flex; transition: transform 0.4s var(--ease-cine); }
.cta:hover .cta__arrow { transform: translateX(5px); }

.dossier__mail {
  align-self: center;
  padding: 4px 4px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--text-faint);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.dossier__mail:hover { color: var(--text); border-color: var(--text-dim); }
.dossier__mail:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1280px) {
  .info { max-width: min(42ch, 34vw); }
  .dossier { width: min(400px, 36vw); }
}

/* Pantallas bajas: comprimir la escala vertical para que todo quepa */
@media (max-height: 840px) and (min-width: 961px) {
  .head__row--caps { font-size: clamp(1.5rem, 3vw, 2.7rem); }
  .info__title { font-size: 1.05rem; }
  .info__text { font-size: 0.8rem; line-height: 1.6; }
  .dossier__pitch { display: none; }
  .dossier__num,
  .dossier__num-roll { font-size: clamp(2.1rem, 2.7vw, 2.7rem); height: clamp(2.1rem, 2.7vw, 2.7rem); }
}

/* En pantalla estrecha el plató se despliega en columna y hace scroll */
@media (max-width: 960px) {
  .stage { position: absolute; overflow: hidden; }

  .stage__main {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.4vh, 22px);
    /* el nav fijo vive fuera de este contenedor: sin este margen, el
       titular arrancaría tapado debajo de la barra */
    padding: calc(var(--nav-h) + clamp(12px, 3vw, 22px)) clamp(16px, 4.6vw, 28px) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* El índice horizontal no cabe: se recoge en un panel a pantalla
     completa que despliega el botón de menú. */
  .nav__toggle { display: inline-flex; }

  /* con el menú abierto la barra no debe tener transform: cualquier valor
     ≠ none la convierte en bloque contenedor y encerraría el panel fixed
     (p. ej. si se abre durante la transición de entrada de 0.65s) */
  .nav.is-open { transform: none; }

  .nav__menu {
    position: fixed;
    inset: calc(var(--nav-h) + env(safe-area-inset-top)) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding:
      clamp(8px, 2vh, 20px)
      max(var(--pad), env(safe-area-inset-right))
      calc(clamp(24px, 6vh, 48px) + env(safe-area-inset-bottom))
      max(var(--pad), env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(6, 7, 9, 0.98) 0%, rgba(0, 0, 0, 0.99) 100%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* bajo la barra (z 80): la X y el logo quedan encima y accesibles */
    z-index: 79;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -8px, 0);
    transition:
      opacity 0.38s var(--ease-out),
      transform 0.5s var(--ease-cine),
      visibility 0s linear 0.38s;
  }

  .nav.is-open .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.38s var(--ease-out),
      transform 0.5s var(--ease-cine),
      visibility 0s;
  }

  .nav__menu .nav__link {
    width: 100%;
    min-height: 56px;
    padding: clamp(15px, 2.2vh, 22px) 4px;
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    color: var(--text);
    border-bottom: 1px solid var(--hairline);
  }
  .nav__menu .nav__link-txt::after { display: none; }

  /* En el cajón, la cuenta es una fila más de la lista: la píldora que
     la distingue en la barra de escritorio aquí solo rompería la
     columna. Se queda la foto, que es lo que la identifica. */
  .nav__menu .nav__link--chip,
  .nav__menu .nav__link--cta {
    padding: clamp(15px, 2.2vh, 22px) 4px;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: none;
  }
  /* la foto ya da altura de sobra: con el relleno de las demás filas,
     la de la cuenta sobresaldría catorce píxeles */
  .nav__menu .nav__link--chip { padding-block: 13px; }

  .ghost { position: fixed; inset: 0; }
  .ghost__img { width: 94vw; }

  .head { position: static; order: 1; pointer-events: auto; }
  .head__row--caps { font-size: clamp(1.5rem, 6.4vw, 2.4rem); }
  .head__em { font-size: clamp(1.15rem, 4.8vw, 1.8rem); }

  .scene {
    position: relative;
    inset: auto;
    order: 2;
    flex: none;
    height: clamp(220px, 34vh, 320px);
  }

  .scene__shadow { bottom: 6%; width: 60%; }
  .scene__floor { bottom: 0; width: 86%; }

  /* relative, no static: mantiene el ancla para la barra de acento (::before)
     mientras sigue participando del flujo flex normalmente */
  .info { position: relative; order: 4; max-width: none; }

  .dossier { position: static; order: 5; width: 100%; margin-bottom: clamp(14px, 2.4vh, 22px); }

  /* objetivo táctil ≥44px */
  .dossier__tab { min-height: 44px; }
  .dossier__arrow { width: 44px; height: 44px; }
  .dossier__mail { min-height: 44px; display: inline-flex; align-items: center; padding: 4px 8px; }
  .nav__brand { min-height: 44px; }

  /* muescas y barras del sistema */
  .nav {
    height: calc(var(--nav-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    /* sin blur en móvil: el desenfoque de fondo es caro en GPU de teléfono
       y —más importante— convertía la barra en bloque contenedor, atrapando
       el panel de menú (fixed) dentro de sus 70px de alto. Fondo sólido en
       su lugar para que el índice a pantalla completa se ancle al viewport. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.62) 60%, rgba(0, 0, 0, 0.28) 100%);
  }
  .stage__main { padding-bottom: env(safe-area-inset-bottom); }
}

/* ============================================================
   Movimiento reducido
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cinema { height: 100vh; }
  .cinema__canvas,
  .cinema__hint { display: none; }
  .blackout { opacity: 1; }
  .lights { opacity: 1; }

  .lights__beam,
  .lights__bokeh,
  .lights__rain,
  .lights__floor,
  .scene__floor { animation: none; }

  .stage { opacity: 1; visibility: visible; transform: none; }
  .scene { opacity: 1; transition: none; }

  /* nada entra: todo está ya colocado */
  .e,
  .nav.is-shown .e--drop,
  .stage.is-live .e--rise,
  .stage.is-live .e--card { opacity: 1; animation: none; }

  /* la barra aparece sin viaje; su visibilidad la sigue mandando JS */
  .nav, .nav.is-shown { transition: none; transform: none; }

  .hw i,
  .stage.is-live .hw i,
  .head__em,
  .stage.is-live .head__em { opacity: 1; transform: none; animation: none; }

  .ghost__img,
  .stage.is-live .ghost__img { animation: none; }

  .stage__scan,
  .stage.is-live .stage__scan { animation: none; opacity: 0; }

  .dossier__num-roll { transition: none; }
  .dossier__timer { display: none; }
  .cta__fill, .cta__arrow, .dossier__mail, .nav__link-txt::after { transition: none; }
}

/* ============================================================
   SERVICIOS — segundo acto
   Por defecto (móvil y movimiento reducido): lista simple, cada
   ficha en su sitio, scroll de página normal — más seguro y más
   legible en pantalla chica o para quien no quiere movimiento.

   Desde 721px y con movimiento permitido: la sección se fija a
   pantalla completa (el mismo truco que el plató de apertura) y
   las fichas se disuelven una sobre otra al desplazar — nada baja
   la página, todo ocurre en el mismo sitio donde estás.
   ============================================================ */

.svc {
  position: relative;
  z-index: 2;
  background: var(--bg);
}

.svc__sticky {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(20px, 4vh, 40px));
}

/* Halo frío que baja del borde superior: cose el corte con el plató */
.svc__aura {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 90vh;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 62%),
    radial-gradient(80% 44% at 12% 18%, color-mix(in srgb, var(--copper) 7%, transparent), transparent 66%);
}

.svc__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- Cabecera del segundo acto ----------
   Sin pantalla-transición: "Servicios" y el índice viven arriba durante
   todo el recorrido. Base (modo lista, móvil/reducido): pegada bajo la
   barra; en modo fijo (más abajo) pasa a absoluta a pantalla completa. */

.svc__masthead {
  position: sticky;
  z-index: 6;
  top: var(--nav-h);
  padding: clamp(12px, 2vh, 18px) 0 clamp(10px, 1.4vh, 15px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 68%, rgba(0, 0, 0, 0));
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

.svc__masthead-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: min(1280px, 92vw);
  margin: 0 auto clamp(10px, 1.6vh, 16px);
}

/* "Servicios": rótulo cromado medido — es cabecera de sección, no un
   titular a sangre. Michroma con bisel vertical, tamaño de subtítulo. */
.svc__eyebrow {
  margin: 0;
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  letter-spacing: -0.005em;
  line-height: 1;
  background-image: linear-gradient(180deg, #ffffff 0%, #d3dbe3 36%, #808a94 76%, #3a4149 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Contador de posición: 03 / 08. JS reescribe el número al cambiar de ficha. */
.svc__count {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.svc__count i { font-style: normal; color: var(--text-faint); }

/* ---------- Índice ---------- */

.svc__rail { position: relative; z-index: 6; }

.svc__rail-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(1280px, 92vw);
  margin: 0 auto;
  padding-bottom: clamp(10px, 1.5vh, 15px);
}

.svc__pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(237, 241, 245, 0.03);
  color: var(--text-faint);
  font-family: var(--grot);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}

.svc__pill i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--text-faint) 80%, transparent);
  transition: color 0.35s var(--ease-out);
}

.svc__pill:hover { color: var(--text); border-color: var(--hairline-hi); }
.svc__pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.svc__pill[aria-current="true"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
}

.svc__pill[aria-current="true"] i { color: var(--cyan); }

.svc__progress {
  display: block;
  width: min(1280px, 92vw);
  height: 1px;
  margin: 0 auto;
  background: var(--hairline);
}

.svc__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--copper), var(--cyan));
  transform-origin: left;
}

/* ---------- Fichas: lista simple por defecto ---------- */

.svc__stage {
  position: relative;
  z-index: 2;
  width: min(1280px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.4vh, 34px);
  padding: clamp(24px, 4vh, 40px) 0 clamp(60px, 9vh, 110px);
}

.card {
  position: relative;
  padding: clamp(20px, 2.4vw, 34px);
  border: 1px solid var(--hairline);
  border-radius: clamp(20px, 2vw, 30px);
  background-color: #0a0c10;
  background-image: linear-gradient(158deg, rgba(15, 18, 23, 0.94), rgba(4, 6, 9, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(237, 241, 245, 0.06),
    0 44px 90px -46px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-cine), border-color 0.5s var(--ease-out);
}

.card.is-active { opacity: 1; transform: none; }
.card:hover { border-color: color-mix(in srgb, var(--a) 34%, transparent); }

/* Filo superior teñido con el acento de la ficha */
.card::before {
  content: "";
  position: absolute;
  left: clamp(20px, 2.4vw, 34px);
  right: clamp(20px, 2.4vw, 34px);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--a) 65%, transparent), transparent);
  opacity: 0.7;
}

/* Foco que sigue al cursor: la ficha se enciende por donde la tocas */
.card__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--a) 15%, transparent), transparent 68%);
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
}

.card:hover .card__spot { opacity: 1; }

/* --- cabecera de ficha --- */

.card__top {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  padding-bottom: clamp(18px, 2.4vh, 26px);
  border-bottom: 1px solid var(--hairline);
}

.card__id { display: flex; flex-direction: column; gap: clamp(6px, 1vh, 10px); }

/* Número y nombre en la misma línea de base: se leen como una sola
   unidad ("01 · Diseño 2D y 3D") en vez de dos bloques sueltos. */
.card__heading {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 20px);
}

.card__num {
  flex: none;
  margin: 0;
  font-family: var(--brand);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  background-image: linear-gradient(180deg, #ffffff 0%, #c7cfd7 34%, #6d7680 78%, #2f353c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card__kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(0.58rem, 0.7vw, 0.68rem);
  letter-spacing: 0.26em;
  color: color-mix(in srgb, var(--a) 78%, var(--text-faint));
}

.card__name {
  margin: 0;
  font-family: var(--grot);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* CTA principal de la ficha: relleno desde el reposo, no solo al hover,
   para que pese tanto como el título en vez de leerse como enlace suelto */
.card__act {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid color-mix(in srgb, var(--a) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--a) 16%, transparent);
  color: var(--text);
  font-family: var(--grot);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.card__act:hover {
  color: #05070a;
  border-color: transparent;
  background: var(--a);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--a) 60%, transparent);
}

.card__act:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.card__act svg { transition: transform 0.4s var(--ease-cine); }
.card__act:hover svg { transform: translateX(3px); }

/* --- cuerpo: texto + visual --- */

.card__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(20px, 3vw, 46px);
  padding-top: clamp(20px, 2.6vh, 30px);
}

/* Las pares llevan el visual a la izquierda: el ojo hace zigzag en vez
   de bajar por un canal recto. Se invierten también los anchos de
   columna, si no el visual heredaría la columna estrecha del texto. */
.card:nth-child(even) .card__body { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.card:nth-child(even) .card__media { order: -1; }

.card__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 20px);
  align-self: center;
}

.card__lead {
  margin: 0;
  font-size: clamp(0.92rem, 1.02vw, 1.05rem);
  line-height: 1.72;
  color: var(--text-dim);
  /* sin viudas: la última línea no se queda con una palabra suelta */
  text-wrap: pretty;
}

.card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card__chips li {
  padding: 5px 11px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: rgba(237, 241, 245, 0.03);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-faint);
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.card:hover .card__chips li {
  color: var(--text-dim);
  border-color: color-mix(in srgb, var(--a) 26%, var(--hairline));
}

.card__deliv {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.card__deliv span {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid var(--hairline-hi);
  letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--a) 72%, var(--text-faint));
}

/* --- visual --- */

.card__media {
  margin: 0;
  perspective: 1100px;
}

.card__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--hairline);
  border-radius: clamp(14px, 1.3vw, 20px);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--a) 9%, transparent), transparent 62%),
    linear-gradient(170deg, rgba(12, 15, 20, 0.95), rgba(2, 3, 5, 0.95));
  overflow: hidden;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}

/* Viñeta propia del recuadro */
.card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(110% 90% at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.6));
}

/* La foto del producto, cuando existe, se pone encima del esquema.
   Sin archivo, la ficha se queda con el visual vectorial y no
   aparece ningún hueco roto. */
.card__photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease-out), transform 1.4s var(--ease-cine);
}

.card.has-photo .card__photo { opacity: 1; transform: none; }
.card.has-photo .viz { opacity: 0.28; mix-blend-mode: screen; }

.viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(237, 241, 245, 0.42);
  transition: opacity 0.8s var(--ease-out);
}

.card__cap {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  color: var(--text-faint);
}

/* ---------- Visuales: animan solo con la ficha activa ---------- */

/* trazo que se dibuja */
.viz__draw,
.viz__wire {
  stroke-dasharray: var(--len, 800);
  stroke-dashoffset: var(--len, 800);
}

.card.is-active .viz__draw { animation: viz-draw 2.2s var(--ease-out) forwards; animation-delay: var(--d, 0.25s); }
.card.is-active .viz__wire { animation: viz-draw 1.4s var(--ease-out) forwards; animation-delay: var(--d, 0.3s); }

@keyframes viz-draw { to { stroke-dashoffset: 0; } }

.viz__node { opacity: 0; }
.card.is-active .viz__node { animation: viz-pop 0.6s var(--ease-cine) forwards; animation-delay: calc(var(--d, 0s) + 1.6s); }

@keyframes viz-pop {
  from { opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center; }
  to   { opacity: 1; transform: none; transform-box: fill-box; transform-origin: center; }
}

/* 01 · la pieza flota */
.card.is-active .viz__float { animation: viz-float 9s ease-in-out 1.2s infinite; transform-box: fill-box; transform-origin: center; }

@keyframes viz-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(2.4deg); }
}

/* 02 · capas que suben y cabezal que barre */
.viz__layers rect { transform: scaleX(0); transform-box: fill-box; transform-origin: center; }
.card.is-active .viz__layers rect { animation: viz-layer 4.4s var(--ease-out) infinite; animation-delay: calc(var(--l) * 220ms); }

@keyframes viz-layer {
  0%       { transform: scaleX(0); opacity: 0.15; }
  22%, 82% { transform: scaleX(1); opacity: 0.55; }
  100%     { transform: scaleX(1); opacity: 0.12; }
}

.viz__head { transform: translateX(300px); }
.card.is-active .viz__head { animation: viz-sweep 4.4s ease-in-out infinite; }

@keyframes viz-sweep {
  0%, 100% { transform: translate(250px, 96px); }
  50%      { transform: translate(400px, 30px); }
}

/* 03 · la fresa recorre la trayectoria */
.viz__bit {
  offset-path: path("M170 300V130q0-20 20-20h110q20 0 20 20v60q0 20 20 20h110q20 0 20 20v70q0 20-20 20H190q-20 0-20-20z");
  offset-distance: 0%;
  opacity: 0;
}

.card.is-active .viz__bit { animation: viz-run 6s linear 0.4s infinite; }

@keyframes viz-run {
  0%        { offset-distance: 0%; opacity: 0; }
  6%, 94%   { opacity: 1; }
  100%      { offset-distance: 100%; opacity: 0; }
}

/* 04 · el soplete corta y salta la chispa */
.viz__torch {
  offset-path: path("M160 260V150h90v50h60v-50h90v110h-70v40h-100v-40z");
  offset-distance: 0%;
  offset-rotate: 0deg;
  opacity: 0;
}

.card.is-active .viz__torch { animation: viz-run 7s linear 0.5s infinite; }
.card.is-active .viz__heat { animation: viz-heat 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes viz-heat {
  0%, 100% { transform: scale(0.8); opacity: 0.34; }
  50%      { transform: scale(1.35); opacity: 0.1; }
}

.viz__sparks circle { opacity: 0; }
.card.is-active .viz__sparks circle { animation: viz-spark 0.9s ease-out infinite; animation-delay: calc(var(--s) * 180ms); }

@keyframes viz-spark {
  0%   { opacity: 0.9; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(calc(var(--s) * 8px - 14px), 34px); }
}

/* 05 · pulsos por el cableado y el núcleo respirando */
.viz__pulses circle { opacity: 0; offset-path: path("M170 200h120"); offset-distance: 0%; }
.card.is-active .viz__pulses circle { animation: viz-pulse 2.2s linear infinite; animation-delay: calc(var(--p) * 1.1s + 1.2s); }

@keyframes viz-pulse {
  0%       { offset-distance: 0%; opacity: 0; }
  12%, 82% { opacity: 1; }
  100%     { offset-distance: 100%; opacity: 0; }
}

.card.is-active .viz__core { animation: viz-breathe 3.4s ease-in-out 1s infinite; transform-box: fill-box; transform-origin: center; }

@keyframes viz-breathe {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

.viz__bars rect { transform: scaleY(0.4); transform-box: fill-box; transform-origin: center; }
.card.is-active .viz__bars rect { animation: viz-bar 1.6s ease-in-out infinite; animation-delay: calc(var(--l) * 160ms); }

@keyframes viz-bar {
  0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* 06 · la interfaz se monta sola */
.viz__blocks > * { opacity: 0; transform: translateY(14px); transform-box: fill-box; }
.card.is-active .viz__blocks > * { animation: viz-block 0.8s var(--ease-cine) forwards; animation-delay: calc(var(--l) * 160ms + 0.5s); }

@keyframes viz-block {
  to { opacity: 1; transform: none; }
}

.card.is-active .viz__caret { animation: viz-caret 1.1s steps(1) 1.4s infinite; }

@keyframes viz-caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 07 · el brazo articula */
.card.is-active .viz__arm { animation: viz-arm 6s ease-in-out 0.6s infinite; }
.card.is-active .viz__arm2 { animation: viz-arm2 6s ease-in-out 0.6s infinite; }

@keyframes viz-arm {
  0%, 100% { transform: rotate(-14deg); }
  50%      { transform: rotate(12deg); }
}

@keyframes viz-arm2 {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(-22deg); }
}

.viz__ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.card.is-active .viz__ring { animation: viz-ring 2.6s ease-out 1s infinite; }

@keyframes viz-ring {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* ============================================================
   Modo fijo: desde 721px y con movimiento permitido.
   La sección se convierte en una pantalla pegajosa, igual que el
   plató de apertura: la portada del título y las ocho fichas se
   disuelven una sobre otra en el mismo sitio, en vez de listarse
   una tras otra. Todo lo escribe services.js cuadro a cuadro,
   igual que heroScroll.js hace con el video — por eso aquí no hay
   transition en opacidad/transform del titular ni de las fichas:
   pelearía con la escritura por cuadro y se notaría a tirones.
   ============================================================ */

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  /* La sección se sube una pantalla completa para solapar la cola del
     plató: cuando el plató suelta su sticky (ya en negro), servicios ya
     está fijado y cubriéndolo con su propio negro (z-index 2 > 1). No
     queda ese viewport muerto en el que la página parecía "bajar" para
     descubrir servicios desde abajo — ahora aparece en el mismo sitio.
     7 pantallas: una por ficha, sin la portada que había antes. */
  .svc {
    height: calc(8 * 100vh);
    margin-top: -100vh;
  }

  /* columna: cabecera arriba (alto natural, puede envolver) y escenario
     ocupando el resto — sin offsets mágicos que se rompan si el índice
     salta a dos líneas */
  .svc__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding: var(--nav-h) 0 0;
    display: flex;
    flex-direction: column;
    /* Opaco casi entero para tapar el plató, pero con el borde superior
       degradado a transparente: mientras el panel sube durante el relevo,
       su filo de ataque es blando y se funde con el plató que se apaga
       detrás — un barrido suave en vez de una línea dura. Ya anclado, ese
       borde queda sobre negro, así que no se nota. */
    background: linear-gradient(180deg, transparent 0, var(--bg) 20vh);
  }

  .svc__masthead {
    position: relative;
    /* el modo lista la deja en sticky con top:var(--nav-h); aquí es un
       ítem flex normal, así que se anula ese desplazamiento o empujaría
       la cabecera 77px sobre la ficha */
    top: auto;
    z-index: 4;
    flex: none;
    padding: clamp(10px, 1.6vh, 16px) 0 clamp(8px, 1.2vh, 12px);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    will-change: opacity, transform;
  }

  .svc__stage {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    width: auto;
    margin: 0;
    padding: 0;
    display: block;
    gap: 0;
  }

  /* cada ficha llena el escenario entero; JS escribe opacidad, avance
     y z-index cuadro a cuadro según cuánto peso tiene en el scroll */
  .card {
    position: absolute;
    inset: clamp(6px, 1.2vh, 14px) 0;
    width: min(1280px, 92vw);
    height: auto;
    max-height: 100%;
    margin: 0 auto;
    overflow-y: auto;
    /* si el contenido llegara a desbordar, que no aparezca una barra de
       scroll cruzando la ficha: el desborde es raro y el gesto ya rueda */
    scrollbar-width: none;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 22px, 0) scale(0.98);
    transition: none;
  }

  .card::-webkit-scrollbar { display: none; }
}

/* ---------- Responsive ----------
   El cuerpo pasa a una sola columna (texto sobre imagen) solo en pantalla
   angosta. En modo fijo cada ficha debe caber en una pantalla: si apilara
   texto e imagen a partir de 1080px, la ficha crecería más alta que el
   viewport y se recortaría. Por eso las dos columnas se sostienen hasta el
   corte móvil (720px), donde ya manda el modo lista con scroll normal. */
@media (max-width: 720px) {
  .card__body,
  .card:nth-child(even) .card__body { grid-template-columns: 1fr; }
  .card:nth-child(even) .card__media { order: 0; }
  .card__copy { order: 1; }
}

@media (max-width: 720px) {
  .svc__sticky { padding-top: calc(var(--nav-h) + clamp(10px, 2vh, 18px)); }
  .card__top { grid-template-columns: 1fr; row-gap: 16px; }
  .card__act { justify-self: start; }
  .svc__pill { min-height: 44px; }
  .card__frame { aspect-ratio: 4 / 3; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card.is-active { opacity: 1; transform: none; }
  .card__frame { transform: none; transition: none; }
  .card__photo { opacity: 1; transform: none; transition: none; }

  /* los esquemas se quedan dibujados, quietos */
  .viz__draw, .viz__wire { stroke-dashoffset: 0; }
  .viz__node, .viz__bit, .viz__torch, .viz__pulses circle, .viz__sparks circle { opacity: 1; }
  .viz__layers rect, .viz__bars rect, .viz__blocks > * { opacity: 1; transform: none; }
  .viz__ring { opacity: 0; }

  .card.is-active .viz__draw, .card.is-active .viz__wire, .card.is-active .viz__node,
  .card.is-active .viz__float, .card.is-active .viz__layers rect, .card.is-active .viz__head,
  .card.is-active .viz__bit, .card.is-active .viz__torch, .card.is-active .viz__heat,
  .card.is-active .viz__sparks circle, .card.is-active .viz__pulses circle,
  .card.is-active .viz__core, .card.is-active .viz__bars rect, .card.is-active .viz__blocks > *,
  .card.is-active .viz__caret, .card.is-active .viz__arm, .card.is-active .viz__arm2,
  .card.is-active .viz__ring { animation: none; }
}

/* ============================================================
   CAMPAÑA — tercer acto
   La empresa respalda ideas con potencial. Dos columnas: rótulo +
   acordeón de beneficios (izquierda) y tarjeta de convocatoria con
   visual, badge y stat flotante (derecha). Mismo negro y eje
   cobre→cian; --ca fija el acento cálido de la sección.
   Entra en flujo normal (no fijo): revela al asomar y se lee como
   el cierre del recorrido.
   ============================================================ */

.camp {
  --ca: var(--copper);
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: clamp(80px, 15vh, 180px) 0 clamp(90px, 16vh, 190px);
  scroll-margin-top: var(--nav-h);
  overflow: clip;
}

/* halo cálido que respira desde el centro-derecha, como los rescoldos
   del plató: cose la sección con el resto del sitio */
.camp__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 78% 40%, color-mix(in srgb, var(--ca) 12%, transparent), transparent 66%),
    radial-gradient(50% 50% at 16% 78%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 68%);
}

.camp__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.camp__inner {
  position: relative;
  z-index: 2;
  width: min(1280px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}

/* ---------- Columna izquierda ---------- */

.camp__lead { max-width: 40rem; }

.camp__eyebrow {
  margin: 0 0 clamp(18px, 2.6vh, 28px);
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.78vw, 0.74rem);
  letter-spacing: 0.28em;
  color: var(--text-faint);
}

.camp__eyebrow span { margin-left: 0.6em; color: color-mix(in srgb, var(--ca) 74%, var(--text-faint)); }

.camp__title {
  margin: 0 0 clamp(18px, 2.6vh, 26px);
  font-family: var(--grot);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

/* el remate del titular recorre el eje térmico de la marca */
.camp__title-em {
  font-style: normal;
  background: linear-gradient(96deg, #ffb37a, var(--copper) 42%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.camp__intro {
  margin: 0 0 clamp(22px, 3vh, 30px);
  font-size: clamp(0.95rem, 1.08vw, 1.1rem);
  line-height: 1.75;
  color: var(--text-dim);
  text-wrap: pretty;
}

.camp__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(26px, 4vh, 40px);
}

.camp__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(237, 241, 245, 0.03);
  font-family: var(--grot);
  font-size: 0.82rem;
  color: var(--text-dim);
}

.camp__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ca);
  box-shadow: 0 0 8px -1px var(--ca);
}

/* ---------- Acordeón ---------- */

.camp__acc { border-top: 1px solid var(--hairline); }

.camp__item { border-bottom: 1px solid var(--hairline); }

.camp__q-wrap { margin: 0; }

.camp__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: clamp(16px, 2.2vh, 22px) 2px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-dim);
  transition: color 0.3s var(--ease-out);
}

.camp__q:hover { color: var(--text); }
.camp__q:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.camp__item.is-open .camp__q,
.camp__q[aria-expanded="true"] { color: var(--text); }

.camp__q-txt {
  font-family: var(--grot);
  font-weight: 500;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  letter-spacing: -0.01em;
}

/* + que se vuelve − al abrir */
.camp__q-icon { position: relative; flex: none; width: 20px; height: 20px; color: var(--ca); }
.camp__q-icon::before,
.camp__q-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-cine), opacity 0.4s var(--ease-out);
}
.camp__q-icon::before { width: 15px; height: 1.8px; }
.camp__q-icon::after { width: 1.8px; height: 15px; }
.camp__item.is-open .camp__q-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

/* despliegue por grid-rows 0fr→1fr: anima a altura automática sin medir en JS */
.camp__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-cine);
}
.camp__item.is-open .camp__a { grid-template-rows: 1fr; }

.camp__a > p {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 clamp(28px, 4vw, 44px) clamp(16px, 2.4vh, 22px) 2px;
  font-size: clamp(0.9rem, 1.02vw, 1.02rem);
  line-height: 1.7;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.camp__item.is-open .camp__a > p { opacity: 1; transition-delay: 0.12s; }

.camp__a strong { color: color-mix(in srgb, var(--ca) 82%, var(--text)); font-weight: 600; }

/* ---------- Columna derecha: tarjeta de convocatoria ---------- */

.camp__panel {
  position: relative;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--hairline-hi);
  border-radius: clamp(22px, 2.2vw, 32px);
  background:
    radial-gradient(120% 80% at 82% 0%, color-mix(in srgb, var(--ca) 10%, transparent), transparent 60%),
    linear-gradient(158deg, rgba(16, 19, 24, 0.92), rgba(4, 6, 9, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(237, 241, 245, 0.07),
    0 50px 100px -46px rgba(0, 0, 0, 0.95);
}

.camp__panel-top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: clamp(14px, 2vh, 18px);
}

.camp__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--ca);
  background: color-mix(in srgb, var(--ca) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ca) 32%, transparent);
}

.camp__panel-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.camp__panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  font-family: var(--grot);
  font-size: 0.74rem;
  color: var(--text);
}

.camp__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 70%, transparent);
  animation: camp-pulse 2.4s var(--ease-out) infinite;
}
.camp__pulse--sm { width: 6px; height: 6px; }

@keyframes camp-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.camp__panel-desc {
  margin: 0 0 clamp(16px, 2.2vh, 20px);
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  line-height: 1.68;
  color: var(--text-dim);
  max-width: 42ch;
}

/* --- visual --- */

.camp__visual {
  position: relative;
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: linear-gradient(170deg, rgba(12, 15, 20, 0.9), rgba(2, 3, 5, 0.95));
  aspect-ratio: 16 / 10;
}

.camp__viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(237, 241, 245, 0.4);
}

.camp__viz-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--hairline-hi);
  background: rgba(8, 10, 14, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--grot);
  font-size: 0.72rem;
  color: var(--text);
}

/* stat flotante, como la tarjeta 86% de la referencia */
.camp__stat {
  position: absolute;
  left: 16px;
  bottom: 16px;
  min-width: 190px;
  padding: 14px 16px 13px;
  border-radius: 16px;
  border: 1px solid var(--hairline-hi);
  background: rgba(8, 10, 14, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
}

.camp__stat-label {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.camp__stat-value {
  margin: 0 0 10px;
  font-family: var(--grot);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  color: var(--text-dim);
}

.camp__stat-value strong {
  font-family: var(--brand);
  font-weight: 400;
  font-size: 1.35em;
  letter-spacing: -0.02em;
  color: var(--text);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ca) 40%, #8b939c));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.camp__stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--ca) 92%, #000), color-mix(in srgb, var(--ca) 55%, var(--cyan)));
  color: #06080b;
  font-family: var(--grot);
  font-weight: 500;
  font-size: 0.68rem;
}

/* --- pie: titular + CTA --- */

.camp__panel-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(18px, 2.6vh, 24px);
}

.camp__panel-h {
  margin: 0;
  font-family: var(--grot);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}

.camp__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  padding: clamp(13px, 1.5vw, 16px) clamp(20px, 2vw, 26px);
  border: 1px solid color-mix(in srgb, var(--ca) 45%, transparent);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  font-family: var(--grot);
  font-weight: 500;
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.camp__cta-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, color-mix(in srgb, var(--ca) 92%, #000), color-mix(in srgb, var(--ca) 52%, var(--cyan)));
  transform: translate3d(0, 101%, 0);
  transition: transform 0.5s var(--ease-cine);
}

.camp__cta:hover {
  color: #06080b;
  border-color: transparent;
  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--ca) 65%, transparent);
}
.camp__cta:hover .camp__cta-fill { transform: none; }
.camp__cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.camp__cta-label, .camp__cta-arrow { position: relative; }
.camp__cta-arrow { display: inline-flex; transition: transform 0.4s var(--ease-cine); }
.camp__cta:hover .camp__cta-arrow { transform: translateX(5px); }

/* ---------- Revelado al asomar ---------- */

.camp__eyebrow,
.camp__title,
.camp__intro,
.camp__tags,
.camp__acc,
.camp__panel {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.9s var(--ease-out), transform 1.05s var(--ease-cine);
}

.camp.is-in .camp__eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
.camp.is-in .camp__title   { opacity: 1; transform: none; transition-delay: 0.13s; }
.camp.is-in .camp__intro   { opacity: 1; transform: none; transition-delay: 0.21s; }
.camp.is-in .camp__tags    { opacity: 1; transform: none; transition-delay: 0.29s; }
.camp.is-in .camp__acc     { opacity: 1; transform: none; transition-delay: 0.37s; }
.camp.is-in .camp__panel   { opacity: 1; transform: none; transition-delay: 0.22s; }

/* ---------- Visual: anima solo con la sección en cuadro ---------- */

.camp-wire { stroke-dasharray: var(--len, 240); stroke-dashoffset: var(--len, 240); }
.camp.is-in .camp-wire { animation: camp-draw 1.5s var(--ease-out) forwards; animation-delay: calc(var(--d, 0s) + 0.5s); }

@keyframes camp-draw { to { stroke-dashoffset: 0; } }

.camp-pulses circle { opacity: 0; }
.camp.is-in .camp-pulses circle {
  animation: camp-travel 3.2s linear infinite;
  animation-delay: calc(var(--p) * 0.4s + 1.6s);
}

/* los pulsos viajan por sus cables hacia el núcleo */
.camp-pulses circle:nth-child(1) { offset-path: path("M60 60h120q20 0 20 20v70q0 20 20 20h60"); }
.camp-pulses circle:nth-child(2) { offset-path: path("M60 340h150q20 0 20-20v-70q0-20 20-20h50"); }
.camp-pulses circle:nth-child(3) { offset-path: path("M580 70H450q-20 0-20 20v60q0 20-20 20h-40"); }
.camp-pulses circle:nth-child(4) { offset-path: path("M580 330H440q-20 0-20-20v-70q0-20-20-20h-20"); }

@keyframes camp-travel {
  0%       { offset-distance: 0%; opacity: 0; }
  12%, 82% { opacity: 1; }
  100%     { offset-distance: 100%; opacity: 0; }
}

.camp-ring, .camp-ring2 { transform-box: fill-box; transform-origin: center; opacity: 0; }
.camp.is-in .camp-ring  { animation: camp-ripple 3s ease-out 1s infinite; }
.camp.is-in .camp-ring2 { animation: camp-ripple 3s ease-out 2.5s infinite; }

@keyframes camp-ripple {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

.camp.is-in .camp-spark { animation: camp-glow 2.8s ease-in-out 0.8s infinite; transform-box: fill-box; transform-origin: center; }

@keyframes camp-glow {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .camp__inner { grid-template-columns: 1fr; gap: clamp(34px, 6vh, 54px); }
  .camp__lead { max-width: none; }
  .camp__panel-foot { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .camp__panel-foot { flex-direction: column; align-items: stretch; }
  .camp__cta { justify-content: center; }
  .camp__stat { left: 12px; right: 12px; bottom: 12px; min-width: 0; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .camp__eyebrow, .camp__title, .camp__intro, .camp__tags, .camp__acc, .camp__panel {
    opacity: 1; transform: none; transition: none;
  }
  .camp__a { transition: none; }
  .camp__a > p { transition: none; }
  .camp-wire { stroke-dashoffset: 0; }
  .camp-pulses circle, .camp-ring, .camp-ring2 { opacity: 0; }
  .camp.is-in .camp-wire, .camp.is-in .camp-pulses circle,
  .camp.is-in .camp-ring, .camp.is-in .camp-ring2, .camp.is-in .camp-spark,
  .camp__pulse { animation: none; }
}

/* ============================================================
   PIE DE PÁGINA
   Panel de contacto + redes + ubicación (Google Maps) y barra
   legal final. Cierre del recorrido: mismo negro, un halo cálido
   que se apaga hacia abajo y la barra legal en el filo inferior.
   ============================================================ */

.foot {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  overflow: clip;
}

.foot__glow {
  position: absolute;
  inset: 0 0 auto;
  height: 60vh;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 22% 0%, color-mix(in srgb, var(--copper) 9%, transparent), transparent 62%),
    radial-gradient(50% 60% at 82% 8%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 64%);
}

.foot__panel {
  position: relative;
  z-index: 1;
  width: min(1280px, 92vw);
  margin: 0 auto;
  padding: clamp(56px, 9vh, 100px) 0 clamp(40px, 6vh, 64px);
}

.foot__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.9fr 1fr 1.3fr;
  gap: clamp(26px, 3vw, 48px);
}

/* ---- Marca ---- */

.foot__brand { max-width: 30ch; }

.foot__logo { display: inline-block; border-radius: 6px; }
.foot__logo img { display: block; height: clamp(30px, 3vw, 42px); width: auto; }
.foot__logo:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }

.foot__tagline {
  margin: clamp(16px, 2.4vh, 22px) 0 clamp(18px, 2.6vh, 24px);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-dim);
  text-wrap: pretty;
}

.foot__mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--grot);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.foot__mail svg { color: var(--copper); transition: transform 0.4s var(--ease-cine); }
.foot__mail:hover { border-color: color-mix(in srgb, var(--copper) 55%, transparent); }
.foot__mail:hover svg { transform: translateX(4px); }
.foot__mail:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* ---- Columnas ---- */

.foot__col-title {
  margin: 0 0 clamp(14px, 2vh, 18px);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.foot__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }

.foot__list a,
.foot__muted {
  font-size: 0.9rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}

.foot__list a { position: relative; width: fit-content; }
.foot__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-cine);
}
.foot__list a:hover { color: var(--text); }
.foot__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.foot__list a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.foot__muted { color: var(--text-faint); }

/* ---- Redes ---- */

.foot__social { margin: 0 0 14px; padding: 0; list-style: none; display: flex; gap: 10px; }

.foot__soc {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  background: rgba(237, 241, 245, 0.03);
  color: var(--text-dim);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              background 0.3s var(--ease-out), transform 0.3s var(--ease-cine);
}
.foot__soc:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--copper) 45%, transparent);
  background: color-mix(in srgb, var(--copper) 10%, transparent);
  transform: translateY(-2px);
}
.foot__soc:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.foot__soc-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* ---- Mapa ---- */

.foot__map-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hairline-hi);
  background: #0a0c10;
}

.foot__map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* el mapa de Google llega claro; se atenúa e integra al negro del sitio */
  filter: grayscale(0.4) invert(0.92) hue-rotate(180deg) contrast(0.9) brightness(0.9);
}

.foot__map-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.foot__map-link svg { color: var(--copper); }
.foot__map-link:hover { color: var(--text); }
.foot__map-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* ---- Barra legal ---- */

.foot__bar {
  position: relative;
  z-index: 1;
  width: min(1280px, 92vw);
  margin: 0 auto;
  padding: clamp(18px, 2.6vh, 26px) 0 clamp(24px, 3.4vh, 34px);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}

.foot__copy,
.foot__made {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.foot__made strong {
  font-family: var(--grot);
  font-weight: 500;
  color: var(--text-dim);
}

.foot__legal { display: flex; gap: clamp(14px, 2vw, 26px); }

.foot__legal a {
  font-size: 0.78rem;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.foot__legal a:hover { color: var(--text); }
.foot__legal a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* ---- Responsive ---- */

@media (max-width: 1080px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vh, 44px) clamp(24px, 4vw, 40px);
  }
  .foot__brand { grid-column: 1 / -1; max-width: none; }
  .foot__map { grid-column: 1 / -1; }
  .foot__map-frame { aspect-ratio: 21 / 9; }
}

@media (max-width: 560px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__bar { flex-direction: column; align-items: flex-start; text-align: left; gap: 14px; }

  /* objetivos táctiles ≥44px: en el pie los enlaces eran de ~15px de alto */
  .foot__list { gap: 4px; }
  .foot__list a,
  .foot__map-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
  .foot__legal { gap: 4px 20px; flex-wrap: wrap; }
  .foot__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================================
   PROCESOS — cuarto acto (carril horizontal)
   Las cuatro fases del dossier entran desde la DERECHA y avanzan a la
   IZQUIERDA conforme haces scroll: la sección se fija a pantalla y el
   scroll vertical desplaza el carril horizontal. Cada fase se enfoca
   (aparece) al pasar por el centro. Acento --pa por fase; el eje
   cobre→cian recorre el riel inferior.
   Base = pila vertical (móvil / movimiento reducido): cada fase entra
   deslizando desde la derecha al asomar.
   ============================================================ */

.proc {
  position: relative;
  z-index: 2;
  background: var(--bg);
  scroll-margin-top: var(--nav-h);
  overflow: clip;
}

.proc__sticky {
  position: relative;
  padding: clamp(80px, 14vh, 160px) 0 clamp(70px, 12vh, 140px);
}

.proc__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 12% 12%, color-mix(in srgb, var(--copper) 9%, transparent), transparent 64%),
    radial-gradient(44% 60% at 90% 60%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 66%);
}

.proc__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- Cabecera ---------- */

.proc__head {
  position: relative;
  z-index: 3;
  width: min(1280px, 92vw);
  margin: 0 auto clamp(30px, 5vh, 54px);
  max-width: 46rem;
}

.proc__eyebrow {
  margin: 0 0 clamp(14px, 2.2vh, 22px);
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.78vw, 0.74rem);
  letter-spacing: 0.28em;
  color: var(--text-faint);
}
.proc__eyebrow span { margin-left: 0.6em; color: color-mix(in srgb, var(--copper) 74%, var(--text-faint)); }

.proc__title {
  margin: 0 0 clamp(14px, 2.2vh, 20px);
  font-family: var(--grot);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.proc__title-em {
  font-style: normal;
  background: linear-gradient(96deg, #ffb37a, var(--copper) 42%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.proc__lede {
  margin: 0;
  font-size: clamp(0.95rem, 1.08vw, 1.1rem);
  line-height: 1.75;
  color: var(--text-dim);
  text-wrap: pretty;
}

.proc__hint { display: none; }

/* ---------- Misión / visión / propuesta de valor ---------- */

.proc__mvv {
  position: relative;
  z-index: 3;
  width: min(1280px, 92vw);
  margin: 0 auto clamp(36px, 5.6vh, 58px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.proc__mvv-item {
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--hairline);
  border-top: 2px solid color-mix(in srgb, var(--pa) 60%, transparent);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}

.proc__mvv-tag {
  margin: 0 0 0.5em;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pa) 78%, var(--text-faint));
}

.proc__mvv-text {
  margin: 0;
  font-size: clamp(0.86rem, 0.98vw, 0.96rem);
  line-height: 1.6;
  color: var(--text-dim);
  text-wrap: pretty;
}

/* ---------- Carril (base: pila vertical) ---------- */

.proc__track {
  position: relative;
  z-index: 2;
  width: min(1280px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 30px);
}

.proc__step {
  --pa: var(--copper);
  position: relative;
}

/* número fantasma gigante, marca de agua de la fase */
.proc__ghost {
  position: absolute;
  z-index: 0;
  top: clamp(-6px, -1vh, -2px);
  right: 14px;
  font-family: var(--brand);
  font-size: clamp(3.4rem, 7vw, 6rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--pa) 15%, transparent);
  pointer-events: none;
}

.proc__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: clamp(18px, 1.8vw, 26px);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pa) 10%, transparent), transparent 58%),
    linear-gradient(158deg, rgba(15, 18, 23, 0.9), rgba(4, 6, 9, 0.94));
  box-shadow: inset 0 1px 0 rgba(237, 241, 245, 0.05), 0 40px 80px -46px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-cine);
}

.proc__card::before {
  content: "";
  position: absolute;
  left: clamp(20px, 2.4vw, 32px);
  right: clamp(20px, 2.4vw, 32px);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pa) 60%, transparent), transparent);
  opacity: 0.7;
}
.proc__step:hover .proc__card { border-color: color-mix(in srgb, var(--pa) 34%, transparent); }

.proc__tag {
  margin: 0 0 clamp(10px, 1.6vh, 14px);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--pa) 78%, var(--text-faint));
}

.proc__name {
  margin: 0 0 clamp(9px, 1.4vh, 13px);
  font-family: var(--grot);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text);
}

.proc__text {
  margin: 0 0 clamp(16px, 2.2vh, 22px);
  font-size: clamp(0.9rem, 1.02vw, 1.02rem);
  line-height: 1.7;
  color: var(--text-dim);
  text-wrap: pretty;
}

/* visual: banda oscura con glyph + rejilla, como la ficha de la referencia */
.proc__viz {
  position: relative;
  width: 100%;
  min-height: clamp(120px, 15vh, 168px);
  margin-bottom: clamp(16px, 2.2vh, 20px);
  border-radius: clamp(12px, 1.2vw, 18px);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(90% 80% at 70% 24%, color-mix(in srgb, var(--pa) 14%, transparent), transparent 60%),
    linear-gradient(170deg, rgba(11, 14, 19, 0.9), rgba(2, 3, 5, 0.95));
  overflow: hidden;
  color: rgba(237, 241, 245, 0.4);
}
.proc__viz::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--pa) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pa) 8%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
}

.proc__grid-ico {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  color: color-mix(in srgb, var(--pa) 70%, var(--text-faint));
}

.proc__glyph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(14px, 2vh, 22px);
}

.proc__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(237, 241, 245, 0.03);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}
.proc__chip span {
  padding-right: 10px;
  border-right: 1px solid var(--hairline-hi);
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--pa) 74%, var(--text-faint));
}

/* riel inferior: solo en modo horizontal */
.proc__rail { display: none; }

/* ---------- Revelado base: entra desde la derecha ---------- */

.proc__step {
  opacity: 0;
  transform: translate3d(60px, 0, 0);
  transition: opacity 0.85s var(--ease-out), transform 0.95s var(--ease-cine);
}
.proc__step.is-active { opacity: 1; transform: none; }

/* glyphs: animan al activarse la fase */
.proc__draw { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); }
.proc__step.is-active .proc__draw { animation: proc-draw 1.3s var(--ease-out) forwards; animation-delay: calc(var(--d, 0s) + 0.3s); }
@keyframes proc-draw { to { stroke-dashoffset: 0; } }

.proc__pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.proc__step.is-active .proc__pop { animation: proc-pop 0.6s var(--ease-cine) forwards 1.1s; }
@keyframes proc-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }

.proc__layers rect { transform: scaleX(0); transform-box: fill-box; transform-origin: left; }
.proc__step.is-active .proc__layers rect { animation: proc-layer 0.5s var(--ease-cine) forwards; animation-delay: calc(var(--l) * 150ms + 0.35s); }
@keyframes proc-layer { to { transform: none; } }

.proc__step.is-active .proc__spin { animation: proc-spin 9s linear infinite 0.5s; }
@keyframes proc-spin { to { transform: rotate(360deg); } }

.proc__check { stroke-dasharray: var(--len, 60); stroke-dashoffset: var(--len, 60); }
.proc__step.is-active .proc__check { animation: proc-draw 0.6s var(--ease-out) forwards 0.9s; }

/* ============================================================
   Modo horizontal fijado: desde 761px y con movimiento permitido
   ============================================================ */

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  /* alto generoso: da recorrido al carril. ~1 pantalla por fase. */
  .proc { height: calc(440vh); }

  .proc__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: var(--nav-h) 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .proc__head {
    flex: none;
    margin: 0 auto;
    padding: clamp(14px, 3vh, 34px) 0 clamp(10px, 2vh, 20px);
  }

  .proc__hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: clamp(14px, 2.4vh, 22px) 0 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .proc__hint-arrow {
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, var(--text-faint), transparent);
    position: relative;
  }
  .proc__hint-arrow::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    width: 6px; height: 6px;
    border-top: 1px solid var(--text-faint);
    border-right: 1px solid var(--text-faint);
    transform: translateY(-50%) rotate(45deg);
    animation: proc-nudge 1.8s var(--ease-out) infinite;
  }
  @keyframes proc-nudge {
    0%, 100% { transform: translate(0, -50%) rotate(45deg); opacity: 0.5; }
    50%      { transform: translate(4px, -50%) rotate(45deg); opacity: 1; }
  }

  /* el carril: fila horizontal, más ancha que la pantalla; JS la
     desplaza a la izquierda con el scroll */
  .proc__track {
    flex: 1;
    width: auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(24px, 3vw, 52px);
    padding: 0;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  /* espaciador inicial = media pantalla menos media tarjeta: la fase 01
     arranca centrada. El recorrido hasta centrar la 04 lo calcula el JS
     con las posiciones reales de las tarjetas (no con scrollWidth, que no
     cuenta el espacio final en un flex con overflow). */
  .proc__track::before {
    content: "";
    flex: 0 0 calc(50vw - clamp(170px, 16vw, 230px));
  }

  .proc__step {
    flex: 0 0 auto;
    width: clamp(340px, 32vw, 460px);
    height: clamp(360px, 56vh, 520px);
    /* enfoque por cercanía al centro: JS escribe --focus (0..1) */
    opacity: calc(0.3 + var(--focus, 0) * 0.7);
    transform: scale(calc(0.9 + var(--focus, 0) * 0.1));
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-cine);
  }

  .proc__ghost {
    top: clamp(-10px, -1.4vh, -4px);
    font-size: clamp(4.5rem, 6vw, 7rem);
  }

  .proc__card { height: 100%; }

  /* el visual crece para llenar la tarjeta vertical */
  .proc__viz { flex: 1; min-height: 0; }

  /* riel inferior con etapas y relleno cobre→cian */
  .proc__rail {
    flex: none;
    display: block;
    width: min(1280px, 92vw);
    margin: 0 auto;
    padding: clamp(12px, 2.2vh, 22px) 0 clamp(16px, 2.6vh, 26px);
  }
  .proc__rail-tags {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
  }
  .proc__rail-tags li {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    transition: color 0.4s var(--ease-out);
  }
  .proc__rail-tags li.is-on { color: var(--text); }
  .proc__rail-line {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--hairline);
    overflow: hidden;
  }
  .proc__rail-fill {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(var(--fill, 0));
    transform-origin: left;
    background: linear-gradient(90deg, var(--copper), #e0a878 34%, #8ec4d8 68%, var(--cyan));
    box-shadow: 0 0 12px -1px color-mix(in srgb, var(--cyan) 40%, transparent);
  }

  /* en horizontal el enfoque lo maneja --focus, no el translateX de entrada */
  .proc__step { transform: scale(calc(0.9 + var(--focus, 0) * 0.1)); }
  .proc__step.is-active { transform: scale(calc(0.9 + var(--focus, 0) * 0.1)); }
}

/* ---------- Movimiento reducido / base sin animación ---------- */

@media (prefers-reduced-motion: reduce) {
  .proc__step { opacity: 1; transform: none; transition: none; }
  .proc__draw, .proc__check { stroke-dashoffset: 0; }
  .proc__pop { opacity: 1; }
  .proc__layers rect { transform: none; }
  .proc__step.is-active .proc__draw, .proc__step.is-active .proc__pop,
  .proc__step.is-active .proc__layers rect, .proc__step.is-active .proc__spin,
  .proc__step.is-active .proc__check { animation: none; }
  .proc__card { transition: none; }
}

/* ==================================================================
   Contacto — formulario que persiste el lead en la base de datos.
   Mismo negro y eje cobre→cian del resto del sitio.
   ================================================================== */
.contact {
  position: relative;
  padding: clamp(64px, 12vh, 140px) var(--pad);
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(255, 157, 92, 0.06), transparent 60%),
    radial-gradient(120% 80% at 85% 100%, rgba(53, 214, 255, 0.06), transparent 60%);
}
.contact__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.contact__kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 0.9rem;
}
.contact__title {
  font-family: var(--brand);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  color: var(--text);
}
.contact__title-accent { color: var(--cyan); }
.contact__lead {
  color: var(--text-dim);
  max-width: 42ch;
  margin: 0 0 1.6rem;
  line-height: 1.6;
}
.contact__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.contact__points li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.contact__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--copper), var(--cyan));
}

.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--hairline-hi);
  border-radius: 20px;
  background: rgba(237, 241, 245, 0.02);
  backdrop-filter: blur(6px);
}
.field { display: grid; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field__opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.contact__form input,
.contact__form select,
.contact__form textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline-hi);
  border-radius: 11px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.contact__form textarea { resize: vertical; min-height: 96px; }
.contact__form select { appearance: none; cursor: pointer; }
.contact__form input::placeholder,
.contact__form textarea::placeholder { color: var(--text-faint); }
.contact__form input:focus-visible,
.contact__form select:focus-visible,
.contact__form textarea:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 214, 255, 0.22);
}
.contact__form input:user-invalid,
.contact__form textarea:user-invalid {
  border-color: rgba(255, 120, 120, 0.7);
}

/* Honeypot: fuera de pantalla, no ocupa hueco ni recibe foco. */
.contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
.contact__submit {
  font: inherit;
  font-weight: 600;
  color: #04060a;
  background: linear-gradient(135deg, var(--copper), var(--cyan));
  border: none;
  border-radius: 11px;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), filter 0.18s var(--ease-out), opacity 0.18s;
}
.contact__submit:hover { filter: brightness(1.08); }
.contact__submit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.contact__submit[disabled] { opacity: 0.6; cursor: progress; }
.contact__status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.contact__status.is-ok { color: var(--cyan); }
.contact__status.is-error { color: rgba(255, 138, 138, 0.95); }
.contact__privacy {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--text-faint);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .contact__inner { grid-template-columns: 1fr; }
  .contact__form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .contact__form input, .contact__form select,
  .contact__form textarea, .contact__submit { transition: none; }
}

/* ==================================================================
   Catálogo de productos (renderizado desde la base de datos).
   ================================================================== */
.products {
  padding: clamp(64px, 12vh, 130px) var(--pad);
  border-top: 1px solid var(--hairline);
}
.products__inner { max-width: 1180px; margin: 0 auto; }
.products__kicker {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 0.9rem;
}
.products__title {
  font-family: var(--brand); font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05; margin: 0 0 0.6rem;
}
.products__lead { color: var(--text-dim); margin: 0 0 2.4rem; max-width: 48ch; }
.products__grid {
  display: grid; gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline-hi); border-radius: 16px;
  background: rgba(237, 241, 245, 0.02); overflow: hidden;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.product-card:hover { transform: translateY(-3px); border-color: var(--cyan); }
.product-card__media {
  aspect-ratio: 4 / 3; background: #05070c; overflow: hidden;
  display: grid; place-items: center;
}
.product-card__media img,
.product-card__media video { width: 100%; height: 100%; object-fit: cover; }
.product-card__media--empty {
  color: var(--text-faint); font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
}
.product-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.product-card__cat {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--copper);
}
.product-card__name { font-size: 1.05rem; font-weight: 600; margin: 0; }
.product-card__tagline { color: var(--text-dim); font-size: 0.9rem; margin: 0; }
.product-card__foot {
  margin-top: auto; padding-top: 0.9rem; display: flex;
  align-items: center; justify-content: space-between; gap: 0.6rem;
}
.product-card__price { font-family: var(--mono); font-size: 0.92rem; color: var(--text); }
.product-card__cta {
  font-size: 0.82rem; font-weight: 600; color: #04060a;
  background: linear-gradient(135deg, var(--copper), var(--cyan));
  padding: 0.45rem 0.9rem; border-radius: 9px; text-decoration: none;
}
.product-card__cta:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
  .product-card { transition: none; }
  .product-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Producto propio + identidad (#producto)

   Bloque estático entre los servicios y la campaña. No depende de ningún
   módulo JS: si algo falla arriba, esta sección sigue contando qué es la
   empresa y qué fabrica por su cuenta.
   ══════════════════════════════════════════════════════════════════════ */

.own {
  position: relative;
  padding: clamp(72px, 12vh, 140px) 0;
  background: var(--bg);
  isolation: isolate;
}
.own__aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60ch 46vh at 12% 8%, rgba(255, 107, 0, 0.1), transparent 70%),
    radial-gradient(62ch 50vh at 92% 84%, rgba(0, 229, 255, 0.09), transparent 72%);
}
.own__wrap {
  width: min(1240px, 100% - clamp(28px, 6vw, 96px));
  margin-inline: auto;
}

/* ── Identidad ── */
.own__idn {
  display: grid;
  gap: 10px;
  padding-bottom: clamp(30px, 5vh, 52px);
  margin-bottom: clamp(34px, 5vh, 60px);
  border-bottom: 1px solid var(--hairline);
}
.own__legal {
  margin: 0;
  font-family: var(--brand);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  letter-spacing: 0.02em;
  color: var(--text);
}
.own__legal-sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-dim);
}
.own__siglas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.own__siglas li {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.own__siglas b {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  color: var(--ui-cyan);
}
.own__slogan {
  margin: 6px 0 0;
  max-width: 62ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.4;
  color: var(--text);
}

/* ── Producto ── */
.own__head { max-width: 74ch; margin-bottom: clamp(28px, 4vh, 46px); }
.own__eyebrow {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--text-faint);
}
.own__title {
  margin: 0 0 16px;
  font-family: var(--grot);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text);
}
.own__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(100deg, var(--ui-amber), var(--ui-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.own__lead {
  margin: 0;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.62;
  color: var(--text-dim);
}

.own__layers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin: 0 0 clamp(26px, 4vh, 42px);
  padding: 0;
  list-style: none;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
}
.own__layer {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px);
  background: linear-gradient(180deg, rgba(34, 38, 43, 0.5), rgba(6, 7, 9, 0.86));
  transition: background 0.45s var(--ease-out);
}
/* filo de color por capa: ámbar en la física, cian en el software */
.own__layer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--la);
  opacity: 0.85;
}
.own__layer:hover { background: linear-gradient(180deg, rgba(34, 38, 43, 0.78), rgba(6, 7, 9, 0.9)); }
.own__layer-k {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--la);
}
.own__layer h3 {
  margin: 0 0 8px;
  font-family: var(--grot);
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--text);
}
.own__layer p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--text-dim);
}

.own__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
}
.own__model {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  max-width: 66ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.own__tag {
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--ui-cyan) 34%, transparent);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ui-cyan);
  white-space: nowrap;
}
.own__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--grot);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #04060a;
  text-decoration: none;
  background: linear-gradient(120deg, var(--ui-amber), var(--ui-cyan));
  box-shadow: var(--shadow-1);
  transition: filter 0.25s var(--ease-out), transform 0.2s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}
.own__cta:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-2), var(--glow-cyan); }
.own__cta:active { transform: translateY(0) scale(0.995); box-shadow: var(--shadow-1); }

@media (prefers-reduced-motion: reduce) {
  .own__layer, .own__cta { transition: none; }
  .own__cta:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Capa de interfaz — acabado

   Va al final a propósito: son retoques sobre componentes ya definidos
   más arriba y, a igual especificidad, gana la regla posterior. Solo se
   tocan sombra, brillo y un microdesplazamiento al pasar el puntero;
   ninguna medida ni posición cambia, así que no hay riesgo de reflujo.
   ══════════════════════════════════════════════════════════════════════ */

/* Un botón sin sombra flota sobre un fondo negro sin decir a qué altura
   está. Dos sombras —una corta de contacto, otra larga de ambiente— lo
   apoyan sobre la página; el halo de color solo aparece al interactuar. */
.cta,
.camp__cta,
.card__act,
.contact__submit {
  box-shadow: var(--shadow-1);
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
              color 0.35s var(--ease-out), transform 0.22s var(--ease-out),
              background-color 0.35s var(--ease-out);
}
.cta:hover,
.camp__cta:hover,
.card__act:hover,
.contact__submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2), var(--glow-cyan);
}
/* El clic tiene que sentirse: el botón se hunde a su sitio. */
.cta:active,
.camp__cta:active,
.card__act:active,
.contact__submit:active {
  transform: translateY(0) scale(0.994);
  box-shadow: var(--shadow-1);
}

/* Las tarjetas de servicio ganan profundidad al enfocarlas con el puntero */
.card:hover { box-shadow: var(--shadow-2); }

/* El acceso a la cuenta es el único enlace de la barra que lleva a una
   acción y no a una sección: se marca con un contorno tenue para que se
   distinga del resto sin romper la sobriedad de la barra. */
.nav__link--acc .nav__link-txt {
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--ui-cyan) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-cyan) 7%, transparent);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.nav__link--acc:hover .nav__link-txt,
.nav__link--acc:focus-visible .nav__link-txt {
  border-color: color-mix(in srgb, var(--ui-cyan) 62%, transparent);
  background: color-mix(in srgb, var(--ui-cyan) 13%, transparent);
}

/* Selección de texto en cian de marca en vez del azul del sistema */
::selection { background: rgba(0, 229, 255, 0.26); color: #fff; }

/* Foco visible uniforme para cualquier control que no traiga el suyo.
   :where() no aporta especificidad: cualquier regla propia lo pisa. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cta, .camp__cta, .card__act, .contact__submit { transition: none; }
  .cta:hover, .camp__cta:hover, .card__act:hover, .contact__submit:hover,
  .cta:active, .camp__cta:active, .card__act:active, .contact__submit:active {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Pie compacto de páginas interiores.

   El pie grande de la portada no encaja en una ficha de servicio o
   en un documento legal: allí lo que hace falta es cerrar la página
   con el contacto, la vuelta al mapa del sitio y los enlaces
   legales, sin volver a montar el mapa entero.
   ───────────────────────────────────────────────────────────── */

.sfoot {
  position: relative;
  padding: clamp(46px, 8vh, 84px) var(--pad) clamp(26px, 4vh, 40px);
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 157, 92, 0.05), transparent 62%),
    var(--bg);
  color: var(--text-dim);
}

.sfoot__wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: clamp(28px, 4vw, 54px);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .sfoot__wrap { grid-template-columns: 1.4fr 1fr 1fr; }
}

.sfoot__brand img {
  width: clamp(122px, 15vw, 158px);
  height: auto;
  margin-bottom: 14px;
}

.sfoot__tag {
  margin: 0 0 16px;
  max-width: 42ch;
  font-size: 0.92rem;
  line-height: 1.6;
}

.sfoot__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.sfoot__mail:hover { color: var(--copper); }

.sfoot__t {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sfoot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sfoot__list li { margin-bottom: 2px; }

.sfoot__list a,
.sfoot__list span {
  display: flex;
  align-items: center;
  /* enlace suelto en una lista: 44px, no los 36 que salían del texto */
  min-height: 44px;
  padding: 6px 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.sfoot__list a:hover,
.sfoot__list a:focus-visible { color: var(--text); }

.sfoot__bar {
  max-width: 1180px;
  margin: clamp(30px, 5vh, 50px) auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-faint);
}

.sfoot__bar p { margin: 0; }

.sfoot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.sfoot__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.sfoot__legal a:hover,
.sfoot__legal a:focus-visible { color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .sfoot__mail, .sfoot__list a, .sfoot__legal a { transition: none; }
}

/* El pie compacto sigue el ajuste de alto contraste como el resto. */
:root[data-contrast="high"] .sfoot {
  background: #000000;
}