/* ==========================================================================
   Astralia Services · landing cinemática
   Paleta: muestreada de las trazas de los vídeos (violeta a la izquierda,
   cian-azur a la derecha) y del negro ciruela de sus fondos.
   Radios: 4px etiquetas/chips, 6px botones y campos, 10px tarjetas.
   Capas: escenas 1-5 · secciones de contenido 6 · cabecera 50 · velo 60 · grano 70
   ========================================================================== */

/* Satoshi (Indian Type Foundry, Fontshare, licencia ITF FFL) y JetBrains Mono (OFL), autoalojadas */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #07050a;
  --bg-2: #0d0a12;
  --ink: #ece8f1;
  --ink-2: #b9b2c4;
  --ink-3: #8f889b;
  --line: rgb(236 232 241 / 0.1);
  --line-2: rgb(236 232 241 / 0.18);
  --line-3: rgb(236 232 241 / 0.3);

  --violet: #b083e2;           /* núcleo de las trazas izquierdas, hsl(271 54% 67%) */
  --cyan: #7fbde4;             /* núcleo de las trazas derechas, hsl(203 61% 68%) */
  --accent: linear-gradient(90deg, var(--violet), var(--cyan));
  --accent-text: linear-gradient(100deg, #d4bcf4 0%, #c8c6f3 48%, #acd8f2 100%);
  --danger: #ff9e9e;

  --font-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;

  --gutter: clamp(16px, 4vw, 64px);
  --header-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Grano muy sutil, fijo y sin eventos: no se repinta al hacer scroll */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background: url("../img/noise.png") repeat;
  background-size: 192px 192px;
  opacity: 0.045;
}

img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
/* Titulares y regiones que reciben el foco al navegar: sin anillo, no son controles */
[tabindex="-1"]:focus { outline: none; }

::selection {
  background: rgb(176 131 226 / 0.38);
  color: var(--ink);
}
html {
  scrollbar-color: rgb(176 131 226 / 0.4) var(--bg);
  accent-color: var(--violet);
}
input,
textarea { caret-color: var(--cyan); }

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

.skip-link {
  position: fixed;
  left: var(--gutter);
  top: 12px;
  z-index: 80;
  padding: 10px 14px;
  border-radius: var(--r-2);
  background: var(--ink);
  color: var(--bg);
  font-weight: 560;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.container {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grad {
  padding-inline-end: 0.06em;
  background: var(--accent-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.icon {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  fill: currentColor;
}

/* ---------------------------------------------------------------- botones */

.btn {
  --fill: rgb(18 13 26 / 0.78);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-2);
  font-size: 0.9375rem;
  font-weight: 520;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Imán: el botón sigue un poco al cursor (variables que escribe pointer.js) */
  translate: var(--mag-x, 0px) var(--mag-y, 0px);
  transition:
    transform 160ms var(--ease-out),
    translate 280ms var(--ease-out),
    color 200ms ease,
    border-color 200ms ease,
    background-color 200ms ease;
}
.btn:active { transform: scale(0.97); }

/* Primario: borde de 1px en el degradado de acento */
.btn--primary {
  color: var(--ink);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    var(--accent) border-box;
}
.btn--primary .icon { transition: transform 200ms var(--ease-out); }

.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--line-3);
  background-color: rgb(9 7 13 / 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--sm {
  height: 38px;
  padding: 0 16px;
  font-size: 0.875rem;
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { --fill: rgb(30 22 42 / 0.86); }
  .btn--primary:hover .icon { transform: translateX(2px); }
  .btn--ghost:hover { border-color: rgb(236 232 241 / 0.46); background-color: rgb(18 14 25 / 0.8); }
}

.btn[disabled] { cursor: progress; opacity: 0.7; }
.btn[disabled]:active { transform: none; }

/* ---------------------------------------------------------------- cabecera */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-inline: var(--gutter);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(7 5 10 / 0.86), rgb(7 5 10 / 0.5) 55%, rgb(7 5 10 / 0));
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-bottom: 1px solid var(--line);
  background: rgb(7 5 10 / 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  transition: opacity 240ms ease;
}
.site-header.is-solid::after { opacity: 1; }

.menu-toggle { display: none; }
.site-nav__extra { display: none; }

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.brand__mark {
  align-self: center;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid transparent;
  background:
    radial-gradient(circle, var(--ink) 0 1.5px, transparent 2px) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--accent) border-box;
}
.brand__sub {
  font-family: var(--font-mono);
  font-weight: 350;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-nav ul {
  display: flex;
  gap: clamp(16px, 2.4vw, 36px);
}
.site-nav a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-size: 0.875rem;
  color: var(--ink-2);
  transition: color 200ms ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.site-nav a[aria-current="true"] { color: var(--ink); }
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--ink); }
}

.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ---------------------------------------------------------------- escenas */

.chapter {
  position: relative;
  z-index: var(--zi, 1);
}

.stage {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.stage__media {
  position: absolute;
  inset: 0;
}
.stage__media > canvas,
.stage__media > video,
.stage__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(7 5 10 / 0.6), rgb(7 5 10 / 0) 160px);
}

.stage__overlay {
  position: absolute;
  inset: 0;
  padding: calc(var(--header-h) + 28px) var(--gutter) 40px;
  pointer-events: none;
}
.stage__overlay a,
.stage__overlay button { pointer-events: auto; }

.anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ch-title {
  font-size: clamp(2rem, 1.3rem + 2.3vw, 3.5rem);
  font-weight: 520;
  line-height: 1.04;
  letter-spacing: -0.035em;
  padding-bottom: 0.06em;
}

/* Modo scrub: cada capítulo es una pista de scroll con un escenario sticky.
   Altura = recorrido del contenido + una pantalla + fundidos de entrada/salida.
   Cada capítulo se solapa con el anterior (pantalla + fundido) para que los
   escenarios hagan crossfade en lugar de empujarse. */
.mode-scrub .chapter {
  height: calc(var(--len) + 100vh + var(--fin) + var(--fout));
  /* Las pistas se solapan para el crossfade: solo el escenario visible recibe eventos */
  pointer-events: none;
}
.mode-scrub .stage { pointer-events: auto; }
.mode-scrub .chapter--seq {
  margin-top: calc(-100vh - var(--fin));
}
.mode-scrub .stage {
  position: sticky;
  top: 0;
  height: 100vh;
}
/* Cada capa se funde por separado (película, velo y texto) en los pasos entre capítulos */
.mode-scrub .chapter--seq :is(.stage__media, .stage__scrim, .stage__overlay) {
  opacity: 0;
  will-change: opacity;
}
.mode-scrub .stage__overlay { will-change: opacity, transform; }
/* El escenario entrante no tapa al saliente: su película ya pinta su propio fondo */
.mode-scrub .chapter--seq .stage { background: transparent; }

/* Viñeteado que marca el compás a mitad de cada paso entre capítulos */
.scene-vignette {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, rgb(7 5 10 / 0) 40%, rgb(7 5 10 / 0.75) 100%),
    linear-gradient(rgb(7 5 10 / 0.12), rgb(7 5 10 / 0.12));
}
.mode-scrub .anchor { top: var(--fin); }

/* ---------------------------------------------------------------- 0 portada */

.chapter--hero .stage__scrim {
  background:
    radial-gradient(ellipse 58% 42% at 50% 40%, rgb(7 5 10 / 0.88), rgb(7 5 10 / 0.62) 50%, rgb(7 5 10 / 0) 100%),
    linear-gradient(to bottom, rgb(7 5 10 / 0.72), rgb(7 5 10 / 0) 30%),
    linear-gradient(to top, rgb(7 5 10 / 0.35), rgb(7 5 10 / 0) 30%);
}

.hero {
  display: grid;
  /* "safe": en pantallas bajas el bloque empieza bajo la cabecera en vez de meterse debajo */
  place-items: safe center;
  padding-bottom: 24vh;
  text-align: center;
}
.hero__content { max-width: 1000px; }
.hero__rest { will-change: transform, opacity; }

/* Titular principal: el de la portada y su relevo en el capítulo 1 comparten
   medidas para que corten las líneas en el mismo sitio */
.headline {
  font-size: clamp(2.5rem, 1.5rem + 3.7vw, 4.75rem);
  font-weight: 540;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
  padding-bottom: 0.08em;
}
.hero__sub {
  max-width: 62ch;
  margin: 26px auto 0;
  font-size: clamp(1rem, 0.72rem + 0.78vw, 1.375rem);
  font-weight: 500;
  line-height: 1.6;
  color: rgb(236 232 241 / 0.9);
  text-wrap: pretty;
  /* halo oscuro pegado a las letras: lo separa de las trazas brillantes */
  text-shadow: 0 1px 2px rgb(7 5 10 / 0.7), 0 0 22px rgb(7 5 10 / 0.9);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .hero__sub { margin-top: 30px; }
  .hero__actions { gap: 14px; margin-top: 44px; }
  .hero__actions .btn {
    height: 56px;
    padding: 0 30px;
    font-size: 1.0625rem;
  }
}
/* Paralaje de la portada: el lienzo es algo mayor que la pantalla para poder moverse */
.mode-scrub .chapter--hero .stage__media { inset: -18px; }

/* Entrada de la portada: una sola vez, al cargar */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title,
  .js .hero__sub,
  .js .hero__actions {
    animation: rise 900ms var(--ease-out) both;
  }
  .js .hero__sub { animation-delay: 90ms; }
  .js .hero__actions { animation-delay: 170ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------------------------------------------------------------- 1 conexión */

.chapter[data-chapter="conexion"] .stage__scrim {
  background:
    radial-gradient(ellipse 56% 30% at 50% var(--h-cy, 34%), rgb(7 5 10 / 0.74), rgb(7 5 10 / 0.4) 55%, rgb(7 5 10 / 0) 100%),
    linear-gradient(270deg, rgb(7 5 10 / 0.72), rgb(7 5 10 / 0) 36%),
    linear-gradient(to bottom, rgb(7 5 10 / 0.6), rgb(7 5 10 / 0) 160px);
}

.mode-scrub .ch-conexion__title {
  position: absolute;
  top: var(--h-top, 30%);
  left: var(--h-left, var(--gutter));
  width: var(--h-width, calc(100% - 2 * var(--gutter)));
  margin: 0;
  will-change: filter, opacity, transform;
}

.ch-conexion__aside {
  position: absolute;
  right: var(--gutter);
  top: 54%;
  width: min(24ch, 30vw);
  font-size: clamp(1.25rem, 0.95rem + 1vw, 1.875rem);
  font-weight: 460;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  opacity: 0;
  will-change: transform, opacity;
}

/* Velo propio para el texto que aparece sobre trazas brillantes: nace y se va con él */
.mode-scrub .ch-conexion__aside,
.mode-scrub .ch-infra__copy { isolation: isolate; }
.mode-scrub .ch-conexion__aside::before,
.mode-scrub .ch-infra__copy::before {
  content: "";
  position: absolute;
  inset: -70% -24%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(7 5 10 / 0.9), rgb(7 5 10 / 0.72) 50%, rgb(7 5 10 / 0));
}
.mode-scrub .ch-conexion__aside { text-shadow: 0 1px 14px rgb(7 5 10 / 0.9); }

/* ---------------------------------------------------------------- 2 servicios */

.chapter[data-chapter="circuito"] .stage__scrim {
  background:
    linear-gradient(to bottom, rgb(7 5 10 / 0.74), rgb(7 5 10 / 0.35) 26%, rgb(7 5 10 / 0) 40%);
}

.ch-servicios__intro { max-width: 30rem; }
.ch-servicios__hint {
  margin-top: 12px;
  font-size: 1rem;
  color: var(--ink-2);
}

.term {
  --mix: 0%;
  --term-c: color-mix(in oklab, var(--violet), var(--cyan) var(--mix));
}
.term[data-term="0"] { --mix: 4%; }
.term[data-term="1"] { --mix: 20%; }
.term[data-term="2"] { --mix: 36%; }
.term[data-term="3"] { --mix: 64%; }
.term[data-term="4"] { --mix: 80%; }
.term[data-term="5"] { --mix: 96%; }

.term__label {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 14px 15px 15px;
  text-align: left;
  border-radius: var(--r-1);
  border: 1px solid color-mix(in oklab, var(--term-c) 26%, transparent);
  background: rgb(9 7 13 / 0.7);
  transition:
    background-color 200ms ease,
    transform 160ms var(--ease-out);
}
.term__label:active { transform: scale(0.98); }
.term__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.term__desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (min-width: 1600px) {
  .term__label { padding: 16px 18px 17px; gap: 8px; }
  .term__name { font-size: 1.1875rem; }
  .term__desc { font-size: 0.9375rem; }
}
/* Foco de luz que sigue al cursor: en el borde y, más suave, en el fondo */
[data-spot]::before,
[data-spot]::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}
.term__label::before {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--term-c), white 18%), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.term__label::after {
  inset: 0;
  z-index: -1;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--term-c) 18%, transparent), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  .term__label:hover { background-color: rgb(16 12 22 / 0.82); }
  .term__label:hover::before,
  .term__label:hover::after { opacity: 1; }
}

/* Escenario: las etiquetas se colocan en JS sobre la posición de cada terminal */
.mode-scrub .terms {
  position: absolute;
  inset: 0;
}
.mode-scrub .term {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--label-w, 200px);
  opacity: 0;
}
.mode-scrub .term__label {
  position: absolute;
  left: 0;
  top: 0;
  min-height: var(--label-h, 0px);
  align-content: start;
}
.mode-scrub .ch-servicios__hint {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  opacity: 0;
}
.mode-scrub .term__lead {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--term-c) 85%, transparent), color-mix(in oklab, var(--term-c) 30%, transparent));
  transform-origin: top;
}
.mode-scrub .term__lead::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--term-c);
}
.mode-scrub .term__node {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: var(--r-3);
  cursor: pointer;
  pointer-events: auto;
  border: 1px solid transparent;
  transition: border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .mode-scrub .term__node:hover,
  .mode-scrub .term:has(.term__label:hover) .term__node {
    border-color: color-mix(in oklab, var(--term-c) 55%, transparent);
  }
}
.mode-scrub.is-compact .term__desc { display: none; }
.mode-scrub.is-compact .term__name { font-size: 1rem; }

/* ---------------------------------------------------------------- 3 proceso */

.chapter[data-chapter="observatorio"] .stage__scrim {
  background:
    linear-gradient(to top, rgb(7 5 10 / 0.94), rgb(7 5 10 / 0.82) 22%, rgb(7 5 10 / 0.35) 44%, rgb(7 5 10 / 0) 60%),
    linear-gradient(to bottom, rgb(7 5 10 / 0.6), rgb(7 5 10 / 0) 160px);
}

.ch-proceso {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(28px, 5.5vh, 64px);
}
.ch-proceso__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(24px, 4vh, 40px);
}

.telemetry {
  width: 272px;
  flex: none;
  padding: 12px 14px 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: rgb(9 7 13 / 0.66);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  font-weight: 350;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.telemetry__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.telemetry__head span:first-child {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.telemetry__rows { margin: 0; }
.tm {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  height: 24px;
}
.tm dt { letter-spacing: 0.06em; color: var(--ink-2); }
.tm dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* TODO: viejo observatorio, no borrar hasta validar (.tm__bar era la barra de CARGA) */
.tm__bar {
  position: relative;
  flex: 1;
  height: 1px;
}
.tm__bar i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}
.tm__ticks {
  display: flex;
  flex: 1;
  gap: 5px;
}
.tm__ticks i {
  width: 10px;
  height: 7px;
  border-radius: 1px;
  background: rgb(236 232 241 / 0.14);
  transition: background-color 160ms ease;
}
/* TODO: viejo observatorio, no borrar hasta validar (hexágonos de NODOS) */
.tm__ticks--hex i {
  width: 11px;
  height: 10px;
  border-radius: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.tm__ticks i:nth-child(1) { --c: color-mix(in oklab, var(--violet), var(--cyan) 4%); }
.tm__ticks i:nth-child(2) { --c: color-mix(in oklab, var(--violet), var(--cyan) 22%); }
.tm__ticks i:nth-child(3) { --c: color-mix(in oklab, var(--violet), var(--cyan) 40%); }
.tm__ticks i:nth-child(4) { --c: color-mix(in oklab, var(--violet), var(--cyan) 60%); }
.tm__ticks i:nth-child(5) { --c: color-mix(in oklab, var(--violet), var(--cyan) 78%); }
.tm__ticks i:nth-child(6) { --c: color-mix(in oklab, var(--violet), var(--cyan) 96%); }
.tm__ticks i.on { background: var(--c); }
.tm__val {
  min-width: 3.2ch;
  text-align: right;
  color: var(--ink);
}
/* GAP: dos placas que se separan en proporción a la medida (no es una barra de progreso) */
.tm__gap {
  position: relative;
  flex: 1;
  align-self: stretch;
}
.tm__gap i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: var(--accent);
  transform: translateY(calc(var(--gap, 0) * -5px));
}
.tm__gap i:last-child { transform: translateY(calc(var(--gap, 0) * 5px)); }
/* BOND: cinco uniones; las cerradas se encienden de violeta a cian */
.tm__ticks--bond i:nth-child(1) { --c: color-mix(in oklab, var(--violet), var(--cyan) 4%); }
.tm__ticks--bond i:nth-child(2) { --c: color-mix(in oklab, var(--violet), var(--cyan) 27%); }
.tm__ticks--bond i:nth-child(3) { --c: color-mix(in oklab, var(--violet), var(--cyan) 50%); }
.tm__ticks--bond i:nth-child(4) { --c: color-mix(in oklab, var(--violet), var(--cyan) 73%); }
.tm__ticks--bond i:nth-child(5) { --c: color-mix(in oklab, var(--violet), var(--cyan) 96%); }
/* Pulso al cambiar el dígito de BOND (contacto o separación en la película) */
@media (prefers-reduced-motion: no-preference) {
  .tm.is-pulse .tm__val { animation: tm-pulse 560ms var(--ease-out); }
  .tm.is-pulse .tm__ticks i { animation: tm-pip 560ms var(--ease-out); }
}
@keyframes tm-pulse {
  from { color: var(--cyan); }
  to { color: var(--ink); }
}
@keyframes tm-pip {
  from { filter: brightness(1.9); }
  to { filter: none; }
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.step {
  position: relative;
  padding-top: 18px;
}
.step::before,
.step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
}
.step::before { background: var(--line-2); }
.step::after {
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--fill, 0));
}
.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  transition: color 320ms ease;
}
.step.is-active .step__num { color: var(--violet); }
.step__name {
  margin-top: 8px;
  color: var(--ink-3);
  transition: color 320ms ease;
  font-size: clamp(1.125rem, 0.98rem + 0.45vw, 1.4375rem);
  font-weight: 540;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.step__text {
  margin-top: 8px;
  max-width: 32ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
  transition: color 320ms ease;
}
.step.is-active .step__name { color: var(--ink); }
.step.is-active .step__text { color: var(--ink-2); }
.steps__rail { display: none; }

/* Escritorio con sitio a los lados de la película (lo decide chapters.js): las
   cuatro etapas, más grandes, dos a cada lado y encima del título. La película no
   cambia: su encuadre se mide con las etapas en fila. */
.ch-proceso.is-flank .ch-proceso__head { margin-bottom: 0; }
.ch-proceso.is-flank .steps {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--flank-bottom, 0px);
  grid-template-columns: var(--flank-w) 1fr var(--flank-w);
  grid-template-areas: "s1 . s3" "s2 . s4";
  gap: clamp(12px, 8vh - 40px, 40px) 0;
}
.ch-proceso.is-flank .step:nth-child(1) { grid-area: s1; }
.ch-proceso.is-flank .step:nth-child(2) { grid-area: s2; }
.ch-proceso.is-flank .step:nth-child(3) { grid-area: s3; }
.ch-proceso.is-flank .step:nth-child(4) { grid-area: s4; }
/* Ritmo según la altura: en pantallas bajas las etapas se compactan para que
   las de arriba no tapen los hexágonos con los que arranca la película. */
.ch-proceso.is-flank .step { padding-top: clamp(10px, 4.1vh - 17px, 20px); }
.ch-proceso.is-flank .step__num { font-size: 0.8125rem; }
.ch-proceso.is-flank .step__name {
  margin-top: clamp(4px, 2.5vh - 12px, 10px);
  font-size: clamp(1.5rem, 3.6vh, 2rem);
}
.ch-proceso.is-flank .step__text {
  margin-top: clamp(4px, 2.5vh - 12px, 10px);
  max-width: none;
  font-size: clamp(1rem, 2vh, 1.125rem);
  line-height: 1.5;
}
/* Sobre la película: una sombra oscura y corta alrededor de las letras */
.ch-proceso.is-flank :is(.step__name, .step__text) { text-shadow: 0 1px 14px rgb(7 5 10 / 0.9); }

/* ---------------------------------------------------------------- 4 infraestructura */

.chapter[data-chapter="cimientos"] .stage__scrim {
  background:
    radial-gradient(ellipse 58% 52% at 10% 18%, rgb(7 5 10 / 0.92), rgb(7 5 10 / 0.6) 45%, rgb(7 5 10 / 0) 100%),
    linear-gradient(270deg, rgb(7 5 10 / 0.7), rgb(7 5 10 / 0) 26%),
    linear-gradient(to bottom, rgb(7 5 10 / 0.6), rgb(7 5 10 / 0) 160px);
}

.ch-infra__title { will-change: opacity, transform; }

.ch-infra__copy {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--header-h) + 28px);
  width: min(500px, 34vw);
  opacity: 0;
  will-change: opacity, transform;
}
.ch-infra__statement {
  font-size: clamp(2rem, 1.3rem + 2.3vw, 3.5rem);
  font-weight: 520;
  line-height: 1.04;
  letter-spacing: -0.035em;
  padding-bottom: 0.06em;
}
.ch-infra__text {
  margin-top: 18px;
  max-width: 34ch;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-2);
}
.ch-infra__more {
  margin-top: 16px;
  max-width: 36ch;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  color: var(--ink-2);
}
.ch-infra__list {
  margin-top: 12px;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  color: var(--ink);
}

/* Lista de lo que incluye un servicio (infraestructura y tarjetas) */
.checks {
  display: grid;
  gap: 10px;
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
.checks .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: color-mix(in oklab, var(--violet), var(--cyan) 55%);
}

.boot {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: stretch;
  gap: 18px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.boot__cols {
  display: flex;
  gap: 7px;
  height: min(34vh, 300px);
}
.boot__cols i {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  transform-origin: bottom;
  transform: scaleY(0);
}
.boot__cols i:first-child { background: linear-gradient(to top, var(--violet), color-mix(in oklab, var(--violet) 25%, transparent)); }
.boot__cols i:last-child { background: linear-gradient(to top, var(--cyan), color-mix(in oklab, var(--cyan) 25%, transparent)); }
.boot__read {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-width: 5.2ch;
}
.boot__label {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.boot__val {
  padding-inline-end: 0.08em;
  font-size: clamp(2.5rem, 1.8rem + 2.2vw, 4rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: var(--accent-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------- 5 equipo */

.team {
  position: relative;
  z-index: 6;
  overflow: hidden;
  padding: clamp(96px, 18vh, 200px) 0 clamp(96px, 16vh, 180px);
  background: var(--bg);
}
.team__bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
}
.team__bg > canvas,
.team__bg > video,
.team__bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team .container { position: relative; }
.team__story {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  max-width: 58ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.team__story p:last-child { color: var(--ink); }
.team__title {
  max-width: 17ch;
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem);
  font-weight: 530;
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
  padding-bottom: 0.06em;
}
.founders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: start;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(44px, 8vh, 88px);
}
.founder__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 18% 0%, rgb(176 131 226 / 0.16), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, rgb(127 189 228 / 0.14), transparent 60%),
    var(--bg-2);
}
/* Las tres fotos tienen luz y fondo distintos: en duotono de marca quedan como
   una serie; al pasar el cursor (o al llegar a ellas en táctil) se ven a color. */
.founder__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.8);
  transition: filter 700ms var(--ease-out);
}
.founder__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgb(176 131 226 / 0.62), rgb(127 189 228 / 0.5));
  mix-blend-mode: color;
  transition: opacity 700ms var(--ease-out);
}
/* Brillo que sigue al cursor sobre la foto */
.founder__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(70% 55% at var(--mx, 50%) var(--my, 30%), rgb(255 255 255 / 0.22), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 400ms ease;
}
.founder.is-near .founder__photo img { filter: none; }
.founder.is-near .founder__photo::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .founder:hover .founder__photo img { filter: none; }
  .founder:hover .founder__photo::after { opacity: 0; }
  .founder:hover .founder__photo::before { opacity: 1; }
}
.founder__initials {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.founder__name {
  margin-top: 20px;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 560;
  letter-spacing: -0.015em;
}
.founder__role {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 350;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
/* Áreas de cada cofundador */
.founder__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.founder__areas li {
  padding: 4px 9px;
  border-radius: var(--r-1);
  border: 1px solid rgb(176 131 226 / 0.28);
  background: rgb(255 255 255 / 0.03);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-2);
  transition: border-color 300ms ease, color 300ms ease;
}
.founder__areas li:nth-child(even) { border-color: rgb(127 189 228 / 0.28); }
@media (hover: hover) and (pointer: fine) {
  .founder:hover .founder__areas li { color: var(--ink); border-color: rgb(176 131 226 / 0.5); }
  .founder:hover .founder__areas li:nth-child(even) { border-color: rgb(127 189 228 / 0.5); }
}
.founder__bio {
  margin-top: 12px;
  max-width: 36ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- 6 contacto */

.contact {
  position: relative;
  z-index: 6;
  padding: clamp(80px, 14vh, 160px) 0 clamp(72px, 12vh, 128px);
  background: var(--bg);
}
/* Costura con fundadores: una línea de luz que se desvanece hacia los lados */
.contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1100px, 92%);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgb(176 131 226 / 0.45) 30%, rgb(127 189 228 / 0.45) 70%, transparent);
}
.contact::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgb(176 131 226 / 0.07), transparent 70%);
}
.contact .container { position: relative; z-index: 1; }
/* Entrada del contenido de contacto al llegar a él (una sola vez) */
@media (prefers-reduced-motion: no-preference) {
  .js .contact [data-reveal] {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out);
  }
  .js .contact [data-reveal]:nth-child(2) { transition-delay: 90ms; }
  .js .contact.is-in [data-reveal] {
    opacity: 1;
    translate: 0 0;
  }
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contact__col { scroll-margin-top: calc(var(--header-h) + 24px); }
.contact__col:focus { outline: none; }
.contact__title {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  font-weight: 520;
  line-height: 1.06;
  letter-spacing: -0.035em;
  padding-bottom: 0.06em;
}
.contact__lead {
  margin-top: 10px;
  color: var(--ink-2);
}

.cal-frame {
  position: relative;
  margin-top: 28px;
  border-radius: var(--r-3);
  border: 1px solid var(--line-2);
  background: #101012;
  overflow: hidden;
}
.cal-frame__iframe {
  display: block;
  width: 100%;
  height: 680px;
  border: 0;
  background: transparent;
}
.cal-frame__iframe[hidden],
.cal-consent[hidden] { display: none; }
.cal-consent {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 14px;
  min-height: 420px;
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(90% 70% at 0% 0%, rgb(176 131 226 / 0.1), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgb(127 189 228 / 0.08), transparent 60%);
}
.cal-consent__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: var(--r-3);
  border: 1px solid var(--line-2);
  color: var(--cyan);
}
.cal-consent__icon .icon { width: 24px; height: 24px; }
.cal-consent__title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.cal-consent__text {
  max-width: 46ch;
  margin-bottom: 8px;
  line-height: 1.6;
  color: var(--ink-2);
}
.cal-consent__text a,
.form__rgpd a,
.check label a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-underline-offset: 3px;
}

.form {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.field {
  display: grid;
  gap: 8px;
  align-content: start;
}
.field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.req { color: var(--violet); }
.opt {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 350;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.field__hint {
  margin-top: -2px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-3);
}
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--r-2);
  border: 1px solid rgb(236 232 241 / 0.4);
  background-color: rgb(255 255 255 / 0.04);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.field textarea {
  min-height: 140px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: transparent;
  background:
    linear-gradient(#110d17, #110d17) padding-box,
    var(--accent) border-box;
}
.field input:user-invalid,
.field textarea:user-invalid,
.field .is-invalid {
  border-color: var(--danger);
}
.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--danger);
}
.field__error .icon { width: 15px; height: 15px; }
.field:has(:user-invalid) .field__error,
.field:has(.is-invalid) .field__error { display: flex; }

.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form__note {
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.field .check input {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  margin: 1px 0 0;
  border-radius: 5px;
  border: 1px solid rgb(236 232 241 / 0.4);
  background: rgb(255 255 255 / 0.04);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.field .check input:focus { background: rgb(255 255 255 / 0.04); border-color: rgb(236 232 241 / 0.4); }
.field .check input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.check input::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--bg);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform 160ms var(--ease-out);
}
.field .check input:checked {
  border-color: transparent;
  background: var(--accent);
}
.check input:checked::after { transform: scale(1); }
.field .check input:user-invalid,
.field .check input.is-invalid { border-color: var(--danger); }
.check label {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.form__rgpd {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.form__rgpd div {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 12px;
}
.form__rgpd dt { color: var(--ink-2); font-weight: 500; }
.form__rgpd dd { margin: 0; }
.form__status:empty { display: none; }
.form__status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 14px 16px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-2);
  background: rgb(255 255 255 / 0.025);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.form__status .icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.form__status strong {
  display: block;
  font-weight: 560;
  color: var(--ink);
}
.form__status a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-underline-offset: 3px;
}
.form__status[data-kind="ok"] { border-color: color-mix(in oklab, var(--cyan) 45%, transparent); }
.form__status[data-kind="ok"] .icon { color: var(--cyan); }
.form__status[data-kind="error"] { border-color: color-mix(in oklab, var(--danger) 45%, transparent); }
.form__status[data-kind="error"] .icon { color: var(--danger); }
.form__status[data-kind="info"] .icon { color: var(--violet); }
@media (prefers-reduced-motion: no-preference) {
  .form__status {
    transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
    @starting-style { opacity: 0; transform: translateY(4px); }
  }
}

/* ---------------------------------------------------------------- pie */

.site-footer {
  position: relative;
  z-index: 6;
  background: var(--bg);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: 28px;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.site-footer__legal [aria-current="page"] { color: var(--ink); }
.site-footer a,
.site-footer button {
  padding-block: 6px;
  font-size: inherit;
  color: inherit;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover,
  .site-footer button:hover { color: var(--ink); }
}

/* ---------------------------------------------------------------- tarjeta de servicio */

.svc {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(580px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--ink);
  opacity: 1;
  transition:
    opacity 240ms var(--ease-out),
    display 240ms allow-discrete,
    overlay 240ms allow-discrete;
}
.svc.is-anchored {
  inset: auto;
  margin: 0;
}
.svc:not([open]) {
  opacity: 0;
  transition-duration: 150ms;
}
@starting-style {
  .svc[open] { opacity: 0; }
}
.svc::backdrop {
  background-color: rgb(7 5 10 / 0);
  transition:
    background-color 240ms ease,
    display 240ms allow-discrete,
    overlay 240ms allow-discrete;
}
.svc[open]::backdrop { background-color: rgb(7 5 10 / 0.5); }
@starting-style {
  .svc[open]::backdrop { background-color: rgb(7 5 10 / 0); }
}

.svc__inner {
  position: relative;
  isolation: isolate;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 32px 36px 34px;
  border-radius: var(--r-3);
  border: 1px solid rgb(236 232 241 / 0.14);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015) 42%),
    rgb(13 10 19 / 0.74);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    0 30px 90px rgb(3 2 6 / 0.6);
  transform-origin: var(--origin, 50% 50%);
  transition: transform 280ms var(--ease-out);
}
.svc:not([open]) .svc__inner {
  transform: scale(0.97);
  transition-duration: 150ms;
}
@starting-style {
  .svc[open] .svc__inner { transform: scale(0.95); }
}
/* Marcas de esquina, como las de un panel holográfico */
.svc__inner::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background:
    linear-gradient(var(--violet), var(--violet)) top left / 14px 1px no-repeat,
    linear-gradient(var(--violet), var(--violet)) top left / 1px 14px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 14px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 1px 14px no-repeat,
    linear-gradient(var(--violet), var(--violet)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--violet), var(--violet)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 1px 14px no-repeat;
  opacity: 0.75;
}
/* Reflejo del cristal que sigue al cursor */
.svc__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 70%) var(--my, 0%), rgb(255 255 255 / 0.07), transparent 65%);
}
.svc__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
}
.svc__close:active { transform: scale(0.94); }
.svc__close .icon { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .svc__close:hover { color: var(--ink); background: rgb(255 255 255 / 0.06); }
}
.svc__title {
  padding-right: 48px;
  font-size: clamp(1.625rem, 1.25rem + 0.9vw, 2.125rem);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.svc__short {
  margin-top: 12px;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink);
}
.svc__long {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.svc__label {
  margin-top: 22px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.svc__list {
  margin-top: 12px;
  font-size: 1rem;
  color: var(--ink);
}
.svc__cta { margin-top: 28px; }

.svc__trace {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.svc__trace path {
  fill: none;
  stroke: var(--trace-c, var(--violet));
  stroke-width: 1;
}
.svc:not(.is-anchored) .svc__trace { display: none; }

/* ---------------------------------------------------------------- velo y carga */

.veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.veil.is-on { opacity: 1; transition-duration: 180ms; }

.loader {
  position: fixed;
  left: var(--gutter);
  bottom: 16px;
  z-index: 55;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 7px 10px;
  border-radius: var(--r-1);
  background: rgb(7 5 10 / 0.72);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 350;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: opacity 500ms ease;
}
.loader__val { color: var(--ink-2); min-width: 4ch; }
.loader.is-done,
.loader.is-away { opacity: 0; }
.mode-video .loader,
.mode-static .loader,
.no-js .loader { display: none; }

/* ==========================================================================
   Modos sin scrub (móvil / movimiento reducido / sin JS): flujo normal
   ========================================================================== */

.is-flow .chapter,
.no-js .chapter {
  height: auto;
  margin-top: 0;
}
.is-flow .stage,
.no-js .stage {
  position: relative;
  height: auto;
}
.is-flow .stage__media,
.no-js .stage__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.no-js .stage__media img { width: 100%; height: 100%; object-fit: cover; }
.is-flow .stage__scrim,
.no-js .stage__scrim { display: none; }
.is-flow .stage__overlay,
.no-js .stage__overlay {
  position: relative;
  inset: auto;
  padding: 28px var(--gutter) clamp(72px, 12vh, 120px);
  pointer-events: auto;
}

/* Cada capítulo: título, vídeo y después el resto del texto */
.is-flow .chapter--seq .stage,
.no-js .chapter--seq .stage {
  display: flex;
  flex-direction: column;
  padding-block: clamp(64px, 12vh, 120px) clamp(40px, 8vh, 80px);
}
.is-flow .chapter--seq .stage__overlay,
.no-js .chapter--seq .stage__overlay { display: contents; }
.is-flow .chapter--seq .stage__media,
.no-js .chapter--seq .stage__media {
  order: 2;
  margin-block: 28px 8px;
}
.is-flow .chapter--seq .stage__overlay > *,
.no-js .chapter--seq .stage__overlay > * {
  order: 3;
  margin-inline: var(--gutter);
}
.is-flow .chapter--seq .stage__overlay > :is(.ch-conexion__title, .ch-servicios__intro, .ch-proceso__head, .ch-infra__title),
.no-js .chapter--seq .stage__overlay > :is(.ch-conexion__title, .ch-servicios__intro, .ch-proceso__head, .ch-infra__title) { order: 1; }

/* Portada a pantalla completa con el bucle de fondo */
.is-flow .chapter--hero .stage,
.no-js .chapter--hero .stage { min-height: 100svh; }
.is-flow .chapter--hero .stage__media,
.no-js .chapter--hero .stage__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.is-flow .chapter--hero .stage__scrim,
.no-js .chapter--hero .stage__scrim { display: block; }
.is-flow .chapter--hero .stage__overlay,
.no-js .chapter--hero .stage__overlay {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--header-h) + 24px) var(--gutter) 10vh;
}

.is-flow .ch-conexion__title,
.no-js .ch-conexion__title {
  font-size: clamp(1.875rem, 1.2rem + 3vw, 2.75rem);
  text-align: left;
}
.is-flow .ch-conexion__aside,
.no-js .ch-conexion__aside {
  position: static;
  width: auto;
  max-width: 24ch;
  margin-top: 16px;
  opacity: 1;
}

.is-flow .terms,
.no-js .terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin-top: 28px;
}
.is-flow .term__lead,
.is-flow .term__node,
.no-js .term__lead,
.no-js .term__node { display: none; }
.is-flow .term__label,
.no-js .term__label { height: 100%; padding: 16px; }
.is-flow .term__name { font-size: 1rem; }
.is-flow .term__desc { font-size: 0.875rem; }
.mode-video .term.is-lit .term__label { border-color: color-mix(in oklab, var(--term-c) 55%, transparent); }

.is-flow .ch-proceso,
.no-js .ch-proceso { display: block; }
.is-flow .ch-proceso__head,
.no-js .ch-proceso__head {
  flex-direction: column;
  align-items: flex-start;
}
.is-flow .steps,
.no-js .steps {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  row-gap: 28px;
}
.no-js .step__name,
.mode-static .step__name { color: var(--ink); }
.no-js .step__text,
.mode-static .step__text { color: var(--ink-2); }

.is-flow .ch-infra__copy,
.no-js .ch-infra__copy {
  position: static;
  width: auto;
  margin-top: 28px;
  opacity: 1;
}
.is-flow .boot,
.no-js .boot {
  position: static;
  translate: none;
  margin-top: 24px;
}
.is-flow .boot__cols,
.no-js .boot__cols { height: 96px; }
.mode-static .boot__cols i,
.no-js .boot__cols i { transform: none; }

.mode-video .media-replay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-2);
  background: rgb(7 5 10 / 0.6);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

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

@media (max-width: 1100px) {
  .site-nav ul { gap: 18px; }
}

@media (max-width: 900px) {
  :root { --header-h: 60px; }
  .site-header { grid-template-columns: 1fr auto auto; gap: 10px; }
  .menu-toggle {
    order: 3;
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--r-2);
    border: 1px solid var(--line-3);
    background: rgb(9 7 13 / 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 160ms var(--ease-out), border-color 200ms ease;
  }
  .menu-toggle:active { transform: scale(0.97); }
  .menu-toggle[aria-expanded="true"] {
    border-color: transparent;
    background:
      linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
      var(--accent) border-box;
  }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    padding: 4px var(--gutter) 20px;
    background: rgb(7 5 10 / 0.97);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
  }
  .menu-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    display: block;
    padding: 14px 0;
    font-size: 1.125rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .site-nav a::after { display: none; }
  .site-nav__extra { display: block; }
  .contact__grid { grid-template-columns: 1fr; }
  .founders { grid-template-columns: 1fr; max-width: 420px; }
  .founder { display: grid; grid-template-columns: 96px 1fr; column-gap: 18px; align-items: start; }
  .founder { grid-template-columns: 104px 1fr; }
  .founder__photo { grid-row: span 3; }
  .founder__initials { font-size: 1.5rem; }
  .founder__name { margin-top: 2px; }
  .founder__bio { margin-top: 8px; }
  .cal-frame__iframe { height: 620px; }
}

@media (max-width: 560px) {
  .svc__inner { padding: 24px 22px 26px; }
  .svc__title { font-size: 1.5rem; }
  .svc__short { font-size: 1.0625rem; }
  .svc__long { font-size: 1rem; }
  .form__rgpd div { grid-template-columns: 1fr; gap: 0; }
  .brand__sub { display: none; }
  .site-header__actions .btn { height: 38px; padding: 0 12px; font-size: 0.8125rem; }
  .hero__actions .btn { width: 100%; }
  .form__row { grid-template-columns: 1fr; }
  .site-footer__inner { flex-direction: column; }
  .ch-proceso__head .telemetry { width: 100%; }
}

/* ==========================================================================
   Scroll con película en pantallas estrechas (modo scrub en móvil)
   La película ocupa una franja (su posición llega en --band-top/--band-bottom)
   y el texto se coloca encima o debajo. Las alturas usan svh para que nada
   quede bajo la barra del navegador.
   ========================================================================== */
@media (max-width: 899px) {
  .mode-scrub .stage { height: 100vh; height: 100svh; }
  .mode-scrub .stage__overlay {
    padding: calc(var(--header-h) + 12px) 16px calc(18px + env(safe-area-inset-bottom));
  }
  .mode-scrub .ch-title { font-size: 2rem; }

  /* 0 · portada */
  .mode-scrub .hero { padding-bottom: 6svh; }

  /* 1 · conexión: el titular sigue en el sitio del de la portada; el aparte, abajo */
  .mode-scrub .ch-conexion__aside {
    top: auto;
    right: 16px;
    bottom: calc(26px + env(safe-area-inset-bottom));
    left: 16px;
    width: auto;
    max-width: 22ch;
    font-size: 1.375rem;
  }

  /* 2 · servicios: rejilla fija; cada servicio se enciende con su terminal */
  .mode-scrub .ch-servicios__intro {
    position: absolute;
    top: calc(var(--header-h) + 12px);
    left: 16px;
    right: 16px;
    max-width: none;
  }
  .mode-scrub .ch-servicios__hint {
    left: 16px;
    right: 16px;
    font-size: 0.875rem;
  }
  .mode-scrub .terms {
    inset: auto 16px calc(18px + env(safe-area-inset-bottom)) 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mode-scrub .term {
    position: relative;
    width: auto;
    opacity: 0.38;
    transition: opacity 300ms ease;
  }
  .mode-scrub .term.is-lit { opacity: 1; }
  .mode-scrub .term__label {
    position: relative;
    height: 100%;
    min-height: 54px;
    padding: 10px 12px;
    align-content: center;
    pointer-events: auto;
  }
  .mode-scrub .term.is-lit .term__label { border-color: color-mix(in oklab, var(--term-c) 62%, transparent); }
  .mode-scrub .term__name { font-size: 0.9375rem; }
  .mode-scrub .term__desc,
  .mode-scrub .term__lead,
  .mode-scrub .term__node { display: none; }

  /* 3 · proceso: título arriba, película, telemetría y etapas abajo */
  .mode-scrub .ch-proceso {
    justify-content: flex-start;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .mode-scrub .ch-proceso__head { display: contents; }
  .mode-scrub .telemetry {
    width: 100%;
    margin-top: auto;
    margin-bottom: 16px;
    padding: 10px 12px 9px;
  }
  .mode-scrub .telemetry__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
  }
  .mode-scrub .tm {
    grid-template-columns: 1fr;
    height: auto;
    gap: 6px;
  }
  /* En cada columna: nombre, cifra y debajo su barra o indicadores */
  .mode-scrub .tm dd {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .mode-scrub .tm__val {
    order: -1;
    min-width: 0;
    text-align: left;
    font-size: 0.875rem;
  }
  .mode-scrub .tm__bar { flex: none; width: 100%; } /* TODO: viejo observatorio, no borrar hasta validar */
  .mode-scrub .tm__gap { flex: none; align-self: auto; width: 100%; height: 12px; }
  .mode-scrub .tm__ticks { flex: none; gap: 3px; }
  .mode-scrub .tm__ticks i { width: 7px; height: 6px; }
  .mode-scrub .tm__ticks--hex i { width: 8px; height: 8px; } /* TODO: viejo observatorio, no borrar hasta validar */
  /* Las cuatro etapas como barra de progreso; debajo se lee solo la activa */
  .mode-scrub .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 106px;
  }
  .mode-scrub .step { padding-top: 12px; }
  .mode-scrub .step__name,
  .mode-scrub .step__text {
    position: absolute;
    left: 0;
    width: calc(400% + 24px);
    max-width: none;
    opacity: 0;
    transition: opacity 260ms ease;
  }
  .mode-scrub .step__name { top: calc(100% + 10px); margin: 0; font-size: 1.3125rem; }
  .mode-scrub .step__text { top: calc(100% + 44px); margin: 0; font-size: 1rem; }
  .mode-scrub .step:nth-child(2) :is(.step__name, .step__text) { left: calc(-100% - 8px); }
  .mode-scrub .step:nth-child(3) :is(.step__name, .step__text) { left: calc(-200% - 16px); }
  .mode-scrub .step:nth-child(4) :is(.step__name, .step__text) { left: calc(-300% - 24px); }
  .mode-scrub .step.is-active :is(.step__name, .step__text) { opacity: 1; }

  /* 4 · infraestructura: el rack arriba, BOOT debajo y el texto final abajo */
  .mode-scrub .boot {
    top: calc(var(--band-bottom) + 14px);
    right: auto;
    left: 16px;
    translate: none;
    gap: 14px;
  }
  .mode-scrub .boot__cols { height: 64px; }
  .mode-scrub .boot__val { font-size: 2.75rem; }
  .mode-scrub .ch-infra__copy {
    top: auto;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: 16px;
    width: auto;
  }
  .mode-scrub .ch-infra__statement { font-size: 2rem; }
  .mode-scrub .ch-infra__text { margin-top: 12px; font-size: 1rem; }
  .mode-scrub .ch-infra__more { margin-top: 10px; font-size: 0.9375rem; }
  .mode-scrub .ch-infra__list { margin-top: 10px; gap: 8px; font-size: 0.9375rem; }
}

/* ---------------------------------------------------------------- configuración de cookies */

.consent-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(520px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--ink);
  transition:
    opacity 240ms var(--ease-out),
    display 240ms allow-discrete,
    overlay 240ms allow-discrete;
}
.consent-dialog:not([open]) { opacity: 0; transition-duration: 150ms; }
@starting-style {
  .consent-dialog[open] { opacity: 0; }
}
.consent-dialog::backdrop {
  background-color: rgb(7 5 10 / 0);
  transition: background-color 240ms ease, display 240ms allow-discrete, overlay 240ms allow-discrete;
}
.consent-dialog[open]::backdrop { background-color: rgb(7 5 10 / 0.55); }
@starting-style {
  .consent-dialog[open]::backdrop { background-color: rgb(7 5 10 / 0); }
}
.consent-dialog__inner {
  display: grid;
  gap: 14px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px 30px 26px;
  border-radius: var(--r-3);
  border: 1px solid rgb(236 232 241 / 0.14);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015) 42%),
    rgb(13 10 19 / 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 30px 90px rgb(3 2 6 / 0.6);
}
.consent-dialog__title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.consent-dialog__text,
.consent-dialog__more {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.consent-dialog__more a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-underline-offset: 3px;
}
.consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.consent-row__name { font-weight: 600; }
.consent-row__desc {
  margin-top: 2px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.consent-row__state {
  flex: none;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
/* Interruptor: control de alternancia, por eso es la única forma en píldora */
.switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  border: 1px solid var(--line-3);
  background: rgb(255 255 255 / 0.08);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform 200ms var(--ease-out), background-color 200ms ease;
}
.switch:checked {
  border-color: transparent;
  background: var(--accent);
}
.switch:checked::after {
  background: var(--bg);
  transform: translateX(20px);
}
.consent-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* ---------------------------------------------------------------- páginas legales */

.legal-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgb(7 5 10 / 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.legal {
  max-width: calc(74ch + 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(48px, 9vh, 96px) var(--gutter) clamp(72px, 12vh, 128px);
}
.legal__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 350;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.legal h1 {
  margin-top: 14px;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 540;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.legal__intro {
  margin-top: 20px;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.legal h2 {
  margin-top: 52px;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.legal h3 {
  margin-top: 28px;
  font-size: 1.0625rem;
  font-weight: 600;
}
.legal p,
.legal li {
  margin-top: 12px;
  line-height: 1.7;
  color: var(--ink-2);
}
.legal ul {
  list-style: disc;
  padding-left: 1.25em;
}
.legal li::marker { color: var(--violet); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-underline-offset: 3px;
}
.legal__data {
  display: grid;
  gap: 2px;
  margin: 20px 0 0;
  padding: 18px 20px;
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.02);
}
.legal__data div {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 16px;
  padding-block: 6px;
}
.legal__data div[hidden] { display: none; }
.legal__data dt { color: var(--ink-3); }
.legal__data dd { margin: 0; color: var(--ink); }
.legal__table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.legal__table th,
.legal__table td {
  padding: 12px 14px 12px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}
.legal__table th {
  font-weight: 600;
  color: var(--ink);
}
.legal__table thead th {
  border-top: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
}
.link-button {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-underline-offset: 3px;
}
/* Dato del titular aún sin rellenar en config.js: visible para no publicarlo así */
[data-legal].is-pending {
  padding: 0 4px;
  border-radius: 3px;
  background: rgb(255 158 158 / 0.12);
  color: var(--danger);
}
@media (max-width: 640px) {
  .legal__data div { grid-template-columns: 1fr; gap: 0; }
  .legal__table,
  .legal__table tbody,
  .legal__table tr,
  .legal__table td,
  .legal__table th { display: block; width: 100%; }
  .legal__table thead { display: none; }
  .legal__table tr { padding-block: 10px; border-top: 1px solid var(--line); }
  .legal__table td,
  .legal__table th { padding: 4px 0; border: 0; }
  .legal__table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    color: var(--ink-3);
  }
}

/* Sin animaciones de desplazamiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .svc__inner,
  .skip-link { transition-property: opacity, color, border-color, background-color; }
  .svc:not([open]) .svc__inner { transform: none; }
  @starting-style {
    .svc[open] .svc__inner { transform: none; }
  }
}