/* ==========================================================================
   Yveltra — landing
   Paleta: blanco y negro. Tipografía: Mona Sans (variable) + JetBrains Mono
   solo para datos dentro de las demos.
   ========================================================================== */

:root {
  --bg: #0a0a0a;
  --bg-2: #101010;
  --bg-3: #161616;
  --line: #1f1f1f;
  --line-2: #2c2c2c;
  --ink: #f5f5f5;
  --ink-2: #a8a8a8;
  --ink-3: #8a8a8a;
  --black: #0a0a0a;

  --font: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  --r: 6px;
  --r-lg: 12px;
  --nav-h: 72px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --section: clamp(88px, 10vw, 144px);

  /* Silueta del monograma YV: máscara de cada capa del logo 3D */
  --yv-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='300 414 830 392' fill='white'%3E%3Cpath d='M310.277 425.268C329.958 424.224 350.281 425.074 370.027 425.061C384.281 425.052 442.677 423.577 452.943 426.404C457.08 427.543 461.384 430.2 464.676 432.604C478.115 442.421 490.428 454.367 502.918 465.093L576.759 528.413C581.787 532.708 596.905 546.735 601.855 548.11C604.043 547.78 606.342 546.44 607.894 545.123C642.019 516.112 675.787 486.662 709.928 457.663C724.187 445.554 733.551 445.352 752.88 445.69C761.038 445.833 769.97 445.698 778.183 445.7C804.045 445.646 829.906 445.701 855.768 445.866C852.331 449.859 842.13 458.261 837.667 462.108L804.184 490.889L740.545 545.532C720.136 563.086 699.009 580.716 680.339 599.59C669.859 610.189 660.048 622.009 650.793 633.378C642.738 644.001 631.343 656.971 622.658 667.433L579.809 719.603L543.782 763.563C534.324 775.116 522.816 794.992 504.904 795.229C479.629 795.567 454.272 795.348 428.979 795.306C422.287 795.294 410.505 796.154 404.549 794.625C403.286 793.398 403.568 792.983 405.233 790.914C415.598 778.051 426.821 765.235 437.523 752.567L503.998 673.811L522.901 651.523C526.079 647.795 532.095 641.055 534.522 637.196C536.09 634.742 536.942 632.003 537.007 629.211C537.211 618.233 523.96 609.673 515.378 602.311L484.662 576L364.457 473.713L327.658 442.413C322.317 437.863 316.635 433.045 311.314 428.434C309.744 427.073 310.082 426.652 310.277 425.268Z'/%3E%3Cpath d='M1040.91 445.466C1053.08 445.426 1112.61 444.329 1118.04 447.194C1118.41 449.288 1116.3 451.814 1114.97 453.535L920.091 700.054L878.345 753.125C869.985 763.812 860.328 777.215 850.427 786.563C837.395 798.887 810.969 794.921 793.398 795.366C782.262 795.638 761.428 796.682 751.785 792.159C739.631 786.462 728.454 774.251 719.153 765.365L688.661 736.254C678.751 726.622 651.858 704.659 649.459 693.142C648.486 688.542 649.031 683.806 651.033 679.455C653.783 673.634 663.117 662.881 667.653 657.362C677.503 645.388 687.446 633.473 697.482 621.612C703.68 627.208 713.107 637.735 719.034 643.942L762.118 689.194C768.945 696.378 775.652 703.581 782.799 710.546C786.564 714.209 792.924 716.29 797.191 712.033C803.815 705.442 809.504 697.564 815.264 690.326C824.761 678.352 834.355 666.437 844.04 654.576L960.881 508.47L986.631 475.747C1003.68 454.194 1008.32 445.706 1040.91 445.466Z'/%3E%3C/svg%3E");

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-color: #3a3a3a var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--ink);
  overflow-x: hidden;
}

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

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #333; border: 3px solid var(--bg); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Al volver arriba el foco queda en <body>: sin anillo */
body:focus { outline: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.dim { color: var(--ink-3); }

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--black);
  padding: 10px 16px;
  border-radius: var(--r);
  font-weight: 600;
}
/* Sin transición: lo activa Tab, y lo que dispara el teclado no se anima */
.skip:focus { top: 12px; }

.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Botones ---------- */
.btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-line: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--r);
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    opacity 200ms ease;
}
.btn:active { transform: scale(0.97); }
/* Desactivado como fantasma: un gris lleno parece un botón activo */
.btn:disabled {
  --btn-bg: transparent;
  --btn-ink: var(--ink-3);
  --btn-line: var(--line-2);
  cursor: not-allowed;
  transform: none;
}

.btn__icon { width: 16px; height: 16px; flex: none; transition: transform 200ms var(--ease-out); }

.btn--primary { --btn-bg: var(--ink); --btn-ink: var(--black); --btn-line: var(--ink); }
.btn--ghost { --btn-line: var(--line-2); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not(:disabled) { --btn-bg: #d9d9d9; --btn-line: #d9d9d9; }
  .btn--ghost:hover { --btn-line: #5a5a5a; --btn-bg: var(--bg-3); }
  .btn:hover:not(:disabled) .btn__icon { transform: translateX(3px); }
  .js-use-spec:hover:not(:disabled) .btn__icon { transform: translateY(3px); }
}

/* ---------- Navegación ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); }

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; flex: none; }
.brand__word { width: 112px; height: auto; }

.nav__links { display: flex; gap: 32px; }
.nav__links a {
  font-size: 14px;
  color: var(--ink-2);
  transition: color 200ms ease;
}
.nav__links a[aria-current="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--ink); }
}

.nav__actions { display: flex; align-items: center; gap: 12px; }

.lang {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.lang__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 36px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
/* Zona táctil de 44px de alto: cubre el relleno y el borde del selector */
.lang__btn::after { content: ""; position: absolute; inset: -4px 0; }
.lang__btn:active { transform: scale(0.97); }
.lang__btn[aria-current="true"] { background: var(--ink); color: var(--black); }
@media (hover: hover) and (pointer: fine) {
  .lang__btn:not([aria-current="true"]):hover { color: var(--ink); }
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out);
}
.nav__toggle:active { transform: scale(0.97); }
.nav__toggle span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 250ms var(--ease-in-out);
}
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 25px; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Menú móvil: entra en 260ms y sale en 150ms. `allow-discrete` deja que
   `display` espere a que termine la salida (sin soporte, se cierra de golpe). */
.menu {
  position: absolute;
  inset: var(--nav-h) 0 auto 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 8px 0 24px;
  transition:
    opacity 150ms var(--ease-out),
    transform 150ms var(--ease-out),
    display 150ms allow-discrete;
}
.menu[hidden] { opacity: 0; transform: translateY(-8px); }
.menu:not([hidden]) { transition-duration: 260ms; }
@starting-style {
  .menu:not([hidden]) { opacity: 0; transform: translateY(-8px); }
}
.menu__links { display: grid; gap: 4px; }
.menu__links a:not(.btn) {
  font-size: 28px;
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.menu__links .btn { margin-top: 16px; }

/* ---------- Hero: escena con el logo YV en 3D ---------- */
.hero { position: relative; }
.hero__stage {
  --logo: min(24vw, 33vh, 125cqh);
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(40px, 7vh, 88px);
  overflow: hidden;
  /* Por encima del logo que viaja (z 30): el texto nunca queda tapado */
  z-index: 31;
}
/* Con movimiento, la escena se queda fija mientras el scroll la recorre */
.hero.is-scene { height: calc(175svh - var(--nav-h)); }
.hero.is-scene .hero__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  min-height: 0;
}

/* Los logos ocupan solo el espacio libre sobre el texto: si la pantalla es baja
   se achican (cqh) en vez de quedar encima del titular */
.logos { position: relative; flex: 1 1 0; min-height: 0; container-type: size; pointer-events: none; }
.logos__slot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--logo) * var(--s, 1));
  aspect-ratio: 830 / 392;
  translate: -50% -50%;
}
/* Capa intermedia: el JS la desplaza; el logo de adentro solo gira */
.logo-mover {
  width: 100%;
  height: 100%;
  perspective: calc(var(--logo) * 4);
  will-change: transform;
}
.logos__slot:nth-child(1) { --x: -5%; --y: 56%; --s: 0.92; }
.logos__slot:nth-child(2) { --x: 22%; --y: 46%; --s: 1; }
.logos__slot:nth-child(3) { --x: 50%; --y: 52%; --s: 1.06; }
.logos__slot:nth-child(4) { --x: 78%; --y: 46%; --s: 1; }
.logos__slot:nth-child(5) { --x: 105%; --y: 56%; --s: 0.92; }
.js .logos__slot { animation: logo-in 1100ms var(--ease-out) both; }
.js .logos__slot:nth-child(2), .js .logos__slot:nth-child(4) { animation-delay: 90ms; }
.js .logos__slot:nth-child(1), .js .logos__slot:nth-child(5) { animation-delay: 180ms; }
@keyframes logo-in { from { opacity: 0; transform: translateY(40px) scale(0.86); } }

.hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  will-change: transform, opacity;
}
.hero__title {
  max-width: 17ch;
  font-size: clamp(2.4rem, 4.8vw, 4.9rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.hero__lead {
  margin-top: 22px;
  max-width: 50ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* ---------- Logo YV en 3D (CSS 3D, sin librerías) ----------
   Una pila de capas finas con la silueta del monograma da el relieve: caras
   blancas y canto gris. El JS fija --d (ancho), la rotación y la luz (--lit). */
.logo3d {
  --d: 200px;
  --ratio: 0.4723; /* alto / ancho del monograma (392 / 830) */
  position: relative;
  width: var(--d);
  height: calc(var(--d) * var(--ratio));
  transform-style: preserve-3d;
}
.logo3d > i {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--d) * var(--z, 0)));
  background: var(--edge, #3a3a3a);
  -webkit-mask: var(--yv-logo) center / 100% 100% no-repeat;
  mask: var(--yv-logo) center / 100% 100% no-repeat;
}
/* Caras: blanco que se apaga un poco al girar, para que se lea el volumen.
   La de adelante se oculta cuando mira hacia atrás. La de atrás NO se gira
   180°: tiene la misma silueta que las capas, así que de espaldas el logo se
   ve como una sola pieza (girada, se habría visto un segundo logo en espejo). */
.logo3d > .logo3d__face {
  background: linear-gradient(165deg, hsl(0 0% calc(var(--lit, 100) * 1%)), hsl(0 0% calc(var(--lit, 100) * 0.84%)));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.logo3d > .logo3d__face--back {
  transform: translateZ(calc(var(--d) * var(--t, 0.07) / -2));
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/* El logo que viaja del hero al manifiesto */
.logo-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  pointer-events: none;
  perspective: 1000px;
  will-change: transform;
}
.logo-fly[hidden] { display: none; }
.js .logo-fly { animation: fade 1100ms var(--ease-out) both; }

/* Entrada del hero: un único momento orquestado */
.js .hero__title,
.js .hero__lead,
.js .hero__ctas {
  animation: rise 650ms var(--ease-out) both;
  animation-delay: 240ms;
}
.js .hero__lead { animation-delay: 300ms; }
.js .hero__ctas { animation-delay: 360ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise-plain {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Demostración (consola) ---------- */
.showcase {
  position: relative;
  padding-block: var(--section);
  overflow: hidden;
  isolation: isolate;
}

/* Fondo de toda la página: la retícula de puntos del inicio, fija detrás del
   contenido, con un foco de luz que sigue al mouse. Se apaga hacia los bordes
   de la pantalla; pasa detrás de todas las secciones, contacto incluido.
   main.js mueve el foco y pone .has-pointer. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 42%, #000 30%, transparent 88%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 42%, #000 30%, transparent 88%);
}
.spotlight {
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.075), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
  will-change: transform;
}
.has-pointer > .spotlight { opacity: 1; }
.showcase__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.showcase__copy .section__lead { margin-top: 24px; }
.showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}
.showcase__tags li { display: flex; align-items: center; gap: 10px; }
.showcase__tags li::before { content: ""; width: 5px; height: 5px; background: var(--ink-3); }

/* ---------- Consola ---------- */
.console {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #121212, #0c0c0c);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 40px 80px -24px rgba(0, 0, 0, 0.8),
    0 12px 24px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.console__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px 0 16px;
  height: 52px;
  border-bottom: 1px solid var(--line);
}
.console__dots { display: flex; gap: 6px; }
.console__dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #3a3a3a; }

.console__tabs { display: flex; gap: 2px; margin-left: auto; }
.console__tab {
  position: relative;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
}
.console__tab:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .console__tab:hover { color: var(--ink); }
}
.console__tab[aria-selected="true"] { color: var(--ink); background: var(--bg-3); }
.console__progress {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}
.console__tab[aria-selected="true"] .console__progress {
  animation: progress var(--cycle, 7s) linear forwards;
}
.console.is-paused .console__progress,
.console.is-manual .console__progress { animation-play-state: paused; }
.console.is-manual .console__tab[aria-selected="true"] .console__progress { animation: none; transform: scaleX(1); opacity: 0.35; }
@keyframes progress { to { transform: scaleX(1); } }

.console__body {
  position: relative;
  padding: clamp(16px, 2vw, 24px);
  min-height: 430px;
}

.demo { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.demo[hidden] { display: none; }
.demo.is-active { animation: demo-in 500ms var(--ease-out); }
/* Un clic de la persona merece respuesta inmediata; la rotación sola puede ir lenta */
.console.is-manual .demo.is-active { animation-duration: 220ms; }
@keyframes demo-in { from { opacity: 0; filter: blur(4px); } }

.demo__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: auto;
}
.demo__badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--ink-2);
}

/* Demo: web en construcción */
.site {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background: #0d0d0d;
}
.site__url {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  background: #111;
}
.site__lock { width: 8px; height: 9px; border: 1.5px solid var(--ink-3); border-radius: 2px; }
.site__page { padding: 18px; display: grid; gap: 18px; }
.site__nav { display: flex; justify-content: space-between; align-items: center; }
.site__nav span { display: flex; gap: 10px; }
.site i { display: block; height: 8px; border-radius: 2px; background: #2a2a2a; }
.site i.h { height: 18px; background: #e8e8e8; border-radius: 3px; }
.site i.t { height: 8px; background: #3a3a3a; }
.w8 { width: 32px; } .w20 { width: 80px; } .w45 { width: 45%; } .w60 { width: 60%; } .w70 { width: 70%; }
.site__hero {
  display: grid;
  gap: 10px;
  padding: 26px 22px;
  border-radius: 6px;
  background: radial-gradient(ellipse at 80% 0%, #222, #141414 70%);
  border: 1px solid var(--line);
}
.site__btn {
  justify-self: start;
  margin-top: 8px;
  padding: 7px 14px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--black);
  font-size: 12px;
  font-weight: 600;
}
.site__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.site__cols div { height: 74px; border-radius: 6px; border: 1px solid var(--line-2); background: #121212; }

.demo--web.is-active .b {
  animation: build 700ms var(--ease-out) both;
  animation-delay: calc(var(--d) * 140ms + 150ms);
}
@keyframes build {
  from { opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(3px); }
}

/* Demo: automatización */
.flow { position: relative; display: grid; gap: 14px; padding-left: 4px; }
.flow::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--line-2);
}
.flow__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  color: var(--ink-3);
}
.flow__node {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #444;
  background: var(--bg-2);
  flex: none;
}
.demo--auto.is-active .flow__step {
  animation: lit 400ms var(--ease-out) both;
  animation-delay: calc(var(--d) * 600ms + 300ms);
}
.demo--auto.is-active .flow__node {
  animation: node 400ms var(--ease-out) both;
  animation-delay: calc(var(--d) * 600ms + 300ms);
}
@keyframes lit { from { color: #4a4a4a; } to { color: var(--ink); } }
@keyframes node {
  from { background: var(--bg-2); border-color: #444; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25); }
  60% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08); }
  to { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.log {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c0c0c;
  color: var(--ink-2);
  overflow: hidden;
}
.log__line { white-space: pre; }
.log b { font-weight: 400; color: #5f5f5f; }
.demo--auto.is-active .log__line {
  animation: line-in 300ms var(--ease-out) both;
  animation-delay: calc(var(--d) * 600ms + 450ms);
}
@keyframes line-in { from { opacity: 0; transform: translateX(-6px); } }

/* Demo: software */
.app {
  display: grid;
  grid-template-columns: 44px 1fr;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background: #0d0d0d;
}
.app__side { display: grid; align-content: start; gap: 10px; padding: 14px 12px; border-right: 1px solid var(--line); background: #111; }
.app__side i { height: 20px; border-radius: 4px; background: #222; }
.app__side i.on { background: var(--ink); }
.app__main { padding: 16px; display: grid; gap: 16px; min-width: 0; }
.app__head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 15px; }
.app__chip { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-2); }
.app__chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 110px;
  padding: 10px 10px 0;
  border-bottom: 1px solid var(--line-2);
  background: repeating-linear-gradient(0deg, transparent 0 27px, #191919 27px 28px);
}
.app__chart i {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, #e9e9e9, #9a9a9a);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
}
.app__chart i:nth-child(6) { background: var(--ink); }
.demo--soft.is-active .app__chart i {
  animation: bar 800ms var(--ease-out) both;
  animation-delay: calc(var(--d) * 70ms + 200ms);
}
@keyframes bar { from { transform: scaleY(0.04); } }
.app__rows { display: grid; }
.app__row {
  display: grid;
  grid-template-columns: 1fr auto 76px;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.app__row .num { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.app__state { font-size: 11px; justify-self: end; color: var(--ink-3); }
.app__state.is-low { color: var(--black); background: var(--ink); padding: 2px 7px; border-radius: 3px; font-weight: 600; }
.demo--soft.is-active .app__row {
  animation: line-in 400ms var(--ease-out) both;
  animation-delay: calc(var(--d) * 90ms + 600ms);
}

/* ---------- Secciones ---------- */
.section { padding-block: var(--section); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px 48px;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.section__title {
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section__lead {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}

/* Revelado al hacer scroll (el contenido es visible sin JS) */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Servicios ---------- */
.svc { border-top: 1px solid var(--line-2); }
.svc__item {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: 24px 48px;
  padding-block: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--line-2);
}
.svc__name { display: flex; align-items: flex-start; gap: 18px; }
.svc__icon { width: 32px; height: 32px; flex: none; margin-top: 4px; color: var(--ink-2); transition: color 200ms ease, transform 200ms var(--ease-out); }
.svc__name h3 {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 650;
  font-stretch: 108%;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.svc__desc { color: var(--ink-2); max-width: 46ch; padding-top: 6px; }
.svc__list { display: grid; gap: 8px; padding-top: 8px; font-size: 15px; }
.svc__list li { display: flex; align-items: center; gap: 12px; }
.svc__list li::before { content: ""; width: 14px; height: 1px; background: var(--ink-3); flex: none; }

@media (hover: hover) and (pointer: fine) {
  .svc__item { transition: opacity 200ms ease; }
  .svc:hover .svc__item:not(:hover) { opacity: 0.5; }
  .svc__item:hover .svc__icon { color: var(--ink); transform: translateY(-2px); }
}

/* ---------- Manifiesto ---------- */
.manifesto {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.manifesto__stage { padding-block: clamp(120px, 16vw, 240px); }
.manifesto.is-scene { height: calc(240svh - var(--nav-h)); }
.manifesto.is-scene .manifesto__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: 0;
}
.manifesto__title {
  max-width: 20ch;
  font-size: clamp(2rem, 4.4vw, 4.25rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.manifesto__text {
  margin-top: clamp(24px, 3vw, 44px);
  max-width: 40ch;
  font-size: clamp(1.3rem, 2.7vw, 2.6rem);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
/* Cada palabra la envuelve motion.js; su opacidad sigue al scroll */
.manifesto.is-scene .w { opacity: 0.14; }
.token {
  display: inline-block;
  width: 1.7em;
  height: 0.8em;
  margin: 0 0.1em;
  vertical-align: -0.06em;
  perspective: 6em;
}
.token .logo3d { --d: 1.7em; }
/* La primera ficha la ocupa el logo que viaja; queda vacía mientras tanto */
.token--land.is-waiting .logo3d { visibility: hidden; }

/* ---------- Configurador ---------- */
.builder {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.builder__controls { display: grid; gap: 40px; }

.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field legend {
  padding: 0;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.field__opt { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.field__hint { font-size: 15px; color: var(--ink-3); }
/* Campo de "Otro" de cada servicio: aparece bajo sus opciones al marcarlo */
.build__other { margin-top: 12px; max-width: 520px; }
.build__other[hidden] { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips:empty { display: none; }
/* Barra del resumen (solo teléfono; el JS la muestra con .is-on) */
.spec-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 250ms var(--ease-out), visibility 0s linear 250ms;
}
.spec-bar.is-on { visibility: visible; transform: none; transition: transform 250ms var(--ease-out), visibility 0s; }
.spec-bar__count { font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0; }
.spec-bar .btn { min-height: 44px; flex: none; }
@media (max-width: 900px) {
  .spec-bar { display: flex; }
}
.feature-groups { display: grid; gap: 22px; }
.feature-groups:empty { display: none; }
.feature-group__title { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: 15px;
  color: var(--ink-2);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}
.chip::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink-3);
  border-radius: 3px;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
/* La etapa es de opción única: círculo en vez de casilla */
.chip[role="radio"]::before { border-radius: 50%; }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"],
.chip[aria-checked="true"] { background: var(--ink); color: var(--black); border-color: var(--ink); }
.chip[aria-checked="true"]::before { background: var(--black); border-color: var(--black); box-shadow: inset 0 0 0 3px var(--ink); }
.chip[aria-pressed="true"]::before {
  background: var(--black)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E")
    center / 10px no-repeat;
  border-color: var(--black);
}
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]):not([aria-checked="true"]):hover { border-color: #5a5a5a; color: var(--ink); }
}
/* Solo entran los chips del servicio recién marcado. `backwards` suelta
   `transform` al terminar, para que el :active de 160ms siga funcionando. */
[data-group="features"] .chip[data-new] { animation: chip-in 300ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } }

.builder__out { position: sticky; top: calc(var(--nav-h) + 24px); }
.spec {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #121212, #0d0d0d);
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.spec__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}
.spec__list { display: grid; margin: 8px 0 24px; }
.spec__list > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.spec__list dt { font-size: 13px; color: var(--ink-3); padding-top: 2px; }
.spec__list dd { font-size: 16px; line-height: 1.45; color: var(--ink); }
.spec__list dd.is-empty { color: #555; }
.spec__list dd.is-changed { animation: flash 250ms var(--ease-out); }
@keyframes flash { from { opacity: 0.5; } }
.spec__note { margin-top: 12px; font-size: 13px; color: var(--ink-3); text-align: center; }
.spec__meter { height: 2px; background: var(--line-2); margin-bottom: 24px; overflow: hidden; border-radius: 2px; }
.spec__meter span {
  display: block;
  height: 100%;
  background: var(--ink);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
  transition: transform 250ms var(--ease-out);
}

/* ---------- Proceso ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 36px 32px 0 0;
}
.step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-2);
}
.step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * 80ms + 200ms);
}
.step.is-in::after,
html:not(.js) .step::after { transform: scaleX(1); }
.step__num {
  display: block;
  font-size: clamp(3.5rem, 5vw, 5rem);
  font-weight: 400;
  font-stretch: 120%;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px #9a9a9a;
  margin-bottom: 28px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.step p { font-size: 16px; color: var(--ink-2); max-width: 28ch; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.faq__list { border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line-2); interpolate-size: allow-keywords; }
/* Altura animada al abrir y cerrar (mejora progresiva: sin soporte, igual que antes) */
.qa::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 250ms var(--ease-out),
    content-visibility 250ms allow-discrete;
}
.qa[open]::details-content { block-size: auto; }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 550;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 200ms ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat;
  transition: transform 200ms var(--ease-out);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 48px 28px 0; color: var(--ink-2); max-width: 62ch; }
.qa[open] p { animation: qa-in 250ms var(--ease-out); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) and (pointer: fine) {
  .faq__list:hover .qa summary { color: var(--ink-2); }
  .faq__list .qa summary:hover { color: var(--ink); }
}

/* ---------- Contacto (sobre el mismo fondo de la página) ---------- */
.contact { padding-block: var(--section); border-top: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact__mono { width: 72px; height: auto; margin-bottom: 40px; }
.contact__title {
  font-size: clamp(2.4rem, 4.8vw, 4.5rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.contact__lead { margin: 24px 0 36px; font-size: 18px; color: var(--ink-2); max-width: 36ch; }
.contact__mail { margin-top: 24px; font-size: 15px; color: var(--ink-2); }
.contact__mail a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.form { display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.input { display: grid; gap: 8px; min-width: 0; }
.input label,
.input legend { font-size: 14px; font-weight: 600; }
.input .opt { font-weight: 400; color: var(--ink-3); }
.input input,
.input textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg-2);
  font-size: 16px;
  color: var(--ink);
  caret-color: var(--ink);
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.input textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.input input::placeholder,
.input textarea::placeholder { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .input input:hover,
  .input textarea:hover { border-color: #5a5a5a; }
}
/* El foco aparece al instante (se llega con Tab); la transición queda solo para el hover */
.input input:focus,
.input textarea:focus { outline: none; border-color: var(--ink); background: var(--bg-3); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14); transition-duration: 0ms; }

.input__error {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.input__error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--black);
  font-size: 12px;
  font-weight: 800;
  flex: none;
}
.input.is-invalid input,
.input.is-invalid textarea { border: 2px solid var(--ink); padding: 13px 15px; }
.input.is-invalid .input__error { display: flex; }

/* Resumen de "Arma tu proyecto" dentro del formulario (solo lectura) */
.form__spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg-2);
}
.form__spec-k { font-size: 14px; font-weight: 600; }
.form__spec-v { margin-top: 2px; font-size: 15px; color: var(--ink-2); text-wrap: pretty; }
.form__spec.is-set .form__spec-v { color: var(--ink); }
.form__spec-edit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.form__foot { display: grid; gap: 14px; margin-top: 8px; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form__submit { min-width: 220px; }
.form__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.form__copy {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.form__copy:active { transform: scale(0.97); }
.form__copy[hidden] { display: none; }
.form__submit.is-loading { pointer-events: none; }
.form__submit.is-loading .form__label { opacity: 0.6; }
.form__submit.is-loading .btn__icon { animation: nudge 800ms var(--ease-in-out) infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.form__status { font-size: 15px; font-weight: 500; max-width: 52ch; }
.form__status:empty { display: none; }
.form__legal { font-size: 14px; color: var(--ink-3); max-width: 52ch; }
.form__legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Footer ---------- */
/* Solo la línea del © y los enlaces legales */
.footer { padding: 28px 0; border-top: 1px solid var(--line); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 14px;
  color: var(--ink-3);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__legal a { color: var(--ink-3); transition: color 200ms ease; }
.footer__legal a[aria-current="page"] { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .footer__legal a:hover { color: var(--ink); }
}

/* ---------- Página legal (privacidad y cookies) ---------- */
.legal { padding-block: clamp(40px, 6vw, 88px) var(--section); }
.legal__head { padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.legal__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.legal__meta { margin-top: 20px; font-size: 14px; color: var(--ink-3); }
.legal__lead {
  margin-top: 24px;
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}

/* Índice: fijo al lado del texto, marca la sección que se está leyendo */
.legal__toc { position: sticky; top: calc(var(--nav-h) + 32px); counter-reset: toc; }
.legal__toc-title { font-size: 14px; color: var(--ink-3); margin-bottom: 12px; }
.legal__toc ol { border-left: 1px solid var(--line-2); }
.legal__toc a {
  display: flex;
  gap: 10px;
  margin-left: -1px;
  padding: 7px 0 7px 16px;
  border-left: 1px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  transition: color 200ms ease, border-color 200ms ease;
}
.legal__toc a::before {
  counter-increment: toc;
  content: counter(toc);
  min-width: 1.4em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.legal__toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); }

.legal__body { max-width: 68ch; counter-reset: sec; }

.legal__section { padding-top: clamp(40px, 5vw, 56px); }
.legal__section:first-child { padding-top: 0; }
.legal__section h2 {
  display: flex;
  gap: 12px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.legal__section h2::before {
  counter-increment: sec;
  content: counter(sec);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.legal__section h2 + * { margin-top: 16px; }
.legal__section p,
.legal__section li { color: var(--ink-2); text-wrap: pretty; }
.legal__section * + p,
.legal__section p + ul { margin-top: 14px; }
.legal__section strong { color: var(--ink); font-weight: 600; }

/* Listas con un filete corto en vez de viñeta */
.legal__section ul { display: grid; gap: 12px; }
.legal__section li { position: relative; padding-left: 24px; }
.legal__section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 12px;
  height: 1px;
  background: var(--ink-3);
}

.legal__section a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-3);
  transition: text-decoration-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .legal__toc a:hover { color: var(--ink); }
  .legal__section a:hover { text-decoration-color: var(--ink); }
}

/* ---------- Volver arriba (botón flotante) ---------- */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms, border-color 200ms ease, background-color 200ms ease;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s, border-color 200ms ease, background-color 200ms ease; }
.to-top:active { transform: scale(0.97); }
/* En el teléfono no compite con la barra del resumen */
body:has(.spec-bar.is-on) .to-top { opacity: 0; visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { border-color: #5a5a5a; background: var(--bg-3); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { gap: 22px; }
  .showcase__inner { grid-template-columns: 1fr; }
  .showcase__copy { max-width: 760px; }
  .console { max-width: 760px; }
  .svc__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .svc__list { grid-column: 2; grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .section__head,
  .builder,
  .faq__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .builder__out { position: static; }
  .svc__item { grid-template-columns: 1fr; gap: 16px; }
  .svc__list { grid-column: auto; }
  .br-lg { display: none; }
  .legal__grid { grid-template-columns: 1fr; gap: 40px; }
  .legal__toc { position: static; }
}

@media (max-width: 600px) {
  :root { --nav-h: 64px; }
  body { font-size: 16px; }
  .brand__word { width: 84px; }
  .hero__stage { --logo: min(50vw, 125cqh); padding-bottom: 32px; }
  .hero.is-scene { height: calc(160svh - var(--nav-h)); }
  .logos__slot:nth-child(1) { --x: -30%; --y: 50%; }
  .logos__slot:nth-child(2) { --x: 6%; --y: 42%; --s: 0.8; }
  .logos__slot:nth-child(3) { --x: 50%; --y: 52%; --s: 1; }
  .logos__slot:nth-child(4) { --x: 94%; --y: 42%; --s: 0.8; }
  .logos__slot:nth-child(5) { --x: 130%; --y: 50%; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .showcase__tags { margin-top: 32px; }
  .manifesto.is-scene { height: calc(220svh - var(--nav-h)); }
  .console__bar { padding: 0 8px; gap: 8px; }
  .console__dots { display: none; }
  .console__tabs { margin: 0; width: 100%; justify-content: space-between; }
  .console__tab { flex: 1; height: 44px; padding: 0 6px; font-size: 12px; }
  .console__body { min-height: 400px; }
  .site__page { padding: 12px; gap: 12px; }
  .site__hero { padding: 18px 14px; }
  .site__cols div { height: 52px; }
  .log { font-size: 10.5px; padding: 12px; }
  .svc__list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; row-gap: 40px; }
  .step { padding-right: 0; }
  .form__row { grid-template-columns: 1fr; }
  .form__submit { width: 100%; }
  .form__actions { flex-direction: column; }
  .spec__list > div { grid-template-columns: 1fr; gap: 4px; }
  .qa p { padding-right: 0; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  /* La barra del resumen aparece con un fundido, sin deslizarse */
  .spec-bar { transform: none; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .spec-bar.is-on { opacity: 1; transition: opacity 200ms ease, visibility 0s; }
  html { scroll-behavior: auto; }
  .to-top, .to-top.is-on { transform: none; }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { transform: none; }
  /* Menos movimiento no es cero transición: las entradas se vuelven un
     fundido de opacidad, sin desplazamiento ni desenfoque */
  .js .hero__title,
  .js .hero__lead,
  .js .hero__ctas,
  .js .logos__slot,
  .js .logo-fly,
  .demo.is-active,
  [data-group="features"] .chip[data-new],
  .qa[open] p { animation: fade 200ms ease both !important; }
  .spec__list dd.is-changed { animation-duration: 250ms !important; }
  .spotlight { display: none; }
}