/* tokens.css — Variables de diseño: color, tipo, espaciado, radios, sombras, z-index, easing.
   Valores sacados de las capturas del diseño (viewport ~1822 px); ver CLAUDE.md, "Design system". */

:root {
  /* Color */
  --color-bg: #000;                       /* fondo principal: negro puro */
  --color-text: #fff;
  --color-dot: rgb(255 255 255 / .3);     /* puntos de la rejilla fija */
  /* Degradado del acento ("intelligence"), muestreado de la captura del hero */
  --gradient-accent: linear-gradient(90deg, #d1e2d0 0%, #c2d8ad 30%, #74968b 75%, #60838b 100%);
  --gradient-brand: linear-gradient(90deg, #dbebeb 0%, #98f2bf 38%, #41728d 100%);   /* degradado del logo (captura del cierre) */

  /* Tipografía — Manrope Medium; titulares con tracking negativo */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-dot: "Doto Rounded", "Manrope", system-ui, sans-serif;   /* etiquetas de las carpetas */
  --fw-light: 300;             /* texto del botón de contorno (captura del CTA: trazo fino y estrecho) */
  --fw-medium: 500;
  --fw-semibold: 600;          /* párrafos de las tarjetas de "Quiénes somos" (referencia de diseño) */
  --fs-display: clamp(1.75rem, 3vw, 3.75rem);   /* ≈ 54 px a 1822 px */
  --fs-body: clamp(1rem, 1vw, 1.125rem);     /* ≈ 18 px a 1822 px */
  --ls-display: -.035em;
  --ls-body: 0;

  /* Espaciado — escala de 4/8px */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;

  /* Layout — 3 columnas 1:2:1 (419 / 819 / 419 px en la captura) */
  --container-max: 1920px;
  --page-margin: 1.25rem;     /* móvil provisional; desde 1024px pasa a vw */
  --col-gap: 1.25rem;
  --col-side: 419fr;
  --col-center: 819fr;

  /* Header y hero (medidas de la captura a 1822×914) */
  /* Header fijo (captura de 2418 px): barra oscura de 45 vw con menú, logo y «Contacto»; desplegado, panel claro a casi todo el alto. Móvil: barra a ancho de página */
  --header-top: .5rem;                               /* móvil (< 768): la barra casi pegada a los bordes… */
  --header-w: calc(100% - 1rem);
  --header-bar-h: 2.75rem;                           /* = el área táctil mínima del botón del menú */
  --header-pad-x: 1rem;
  --header-open-h: calc(100svh - var(--header-top));   /* móvil: el menú desplegado ocupa toda la pantalla (sin bordes); desde 768 px, un panel con margen */
  --panel-bleed-x: var(--header-top);                  /* cuánto sobresale el panel de la barra a cada lado y por arriba hasta llegar al borde de la pantalla (0 desde 768 px) */
  --panel-bleed-top: var(--header-top);
  --panel-h: 100svh;
  --panel-radius: 0px;
  --header-clear: calc(var(--header-top) + var(--header-bar-h) + .5rem);   /* hueco que ocupa la barra fija + un margen: los bloques de arriba de la escena fija (móvil y tablet) no bajan de aquí */
  --radius-header: clamp(.5rem, .6vw, .9rem);
  --color-header-bg: #333;
  --color-header-open-bg: var(--color-folder);
  --color-header-muted: #a3a3a3;                     /* rayas y «Contacto» con la barra cerrada (≥ 4,5:1 sobre #333) */
  --color-header-open-ink: var(--color-folder-text);
  --color-header-open-muted: #55555a;                /* opción del menú con el cursor encima */
  --fs-header: clamp(.8125rem, .8vw, 1.125rem);       /* «Contacto»: ≈ 14,6 px a 1822 (30 % menos que la captura, a petición) */
  --header-lines: 1.125rem;                          /* las tres rayas del botón: ancho y separación (30 % menos que la captura) */
  --header-lines-gap: .375rem;
  --fs-menu: clamp(1.25rem, 6.2vw, 3.5rem);
  --menu-gap: 2.25rem;
  --menu-blur: 32px;                                 /* desenfoque del fondo con el menú abierto */
  --logo-width: clamp(4.5rem, 7vw, 8.5rem);          /* logo del header: ≈ 127 px a 1822 (183 px en la captura, 30 % menos a petición) */
  --hero-pad-top: 10svh;                             /* centra el bloque a ~55 % de la altura */

  /* Rejilla de puntos fija — todo en vw para que escale con el ancho */
  --dot-size: clamp(3px, .22vw, 5px);
  --dot-pitch-x: 20vw;                               /* móvil (< 768): 5 puntos por fila y mucho más espaciados (antes 6,7; a petición) */
  --dot-pitch-y: 22.5vw;
  --dot-offset-x: calc(10vw - var(--dot-size) / 2);
  --dot-offset-y: calc(11.25vw - var(--dot-size) / 2);

  /* Forma, movimiento, capas */
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-carousel: cubic-bezier(.65, 0, .25, 1);
  --ease-reveal: cubic-bezier(.4, 0, .2, 1);
  /* Revelado de textos (referencia: 30 px, 5 %→95 % de opacidad en ≈ 0,6 s, 140 ms entre elementos) */
  --reveal-distance: clamp(1rem, 1.65vw, 1.875rem);
  --reveal-duration: 1000ms;
  --reveal-stagger: 140ms;
  --reveal-panel-delay: 120ms;   /* texto de una tarjeta con el autoplay (a mano no espera) */
  --reveal-panel-duration: 650ms;   /* y entra más rápido que el de la cabecera */
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms;
  --dur-carousel: 800ms;      /* cambio de tarjeta */
  --dur-fade: 600ms;          /* fundidos de imágenes, mosaico y tarjeta que da la vuelta */
  --dur-names: 600ms;         /* paso de la lista vertical de clientes */
  --dur-image: 450ms;         /* fundido de la imagen de clientes */
  --dur-mosaic: 1400ms;       /* cada fase (salida o entrada) del fundido de una foto del mosaico */
  --z-controls: 50; --z-header: 100; --z-overlay: 200; --z-dots: 300; --z-notice: 400;   /* controles del carrusel < header (y su menú desplegado) < enlace «Saltar» < rejilla de puntos < aviso de cookies */

  /* Sección "Quiénes somos" — medidas de las capturas (1 vw ≈ 24 px en la captura de 2408 px) */
  --fs-eyebrow: clamp(.875rem, .9vw, 1.25rem);
  --fs-lead: clamp(1.25rem, 1.9vw, 2.75rem);        /* párrafos de las tarjetas: ≈ 34 px a 1822 px */
  --lh-lead: 1.3;
  --ls-lead: -.02em;
  --fs-name: clamp(1.25rem, 2.6vw, 3.5rem);         /* nombres de clientes */
  --fs-pill: clamp(1rem, 1.4vw, 1.9rem);
  --color-border: rgb(255 255 255 / .5);            /* borde de tarjetas y fotos */
  --color-pill-border: rgb(255 255 255 / .9);
  --color-control-bg: rgb(255 255 255 / .22);       /* píldora del indicador y botón */
  --color-partners-dark: #1a1a1f;                   /* fondo de partners: gris oscuro → lila */
  --color-partners-mid: #4a4b62;
  --color-partners-light: #a9aacb;
  --grain-opacity: .42;                             /* grano del fondo de partners */

  --card-width: 88vw;                               /* móvil: la siguiente tarjeta asoma */
  --card-gap: 2vw;
  --card-ratio: 2.17;                               /* ancho/alto de la tarjeta (solo escritorio) */
  --card-radius: clamp(1rem, 1.65vw, 2.5rem);
  --media-radius: clamp(.75rem, 1.25vw, 2rem);
  --panel-pad: clamp(1rem, 1.45vw, 2.25rem);
  --about-gap: clamp(2rem, 4.5vw, 6rem);            /* titular → carrusel */
  --names-row: 2.2em;                          /* paso de la lista de clientes (en em de --fs-name) */
  --names-rows: 5;                                  /* filas visibles de la lista (6 en escritorio) */
  --pill-h: max(2.75rem, 3.3vw);
  --pill-gap: clamp(.5rem, 1.2vw, 1.5rem);
  --mosaic-cols: 4;
  --mosaic-gap-x: clamp(.5rem, 3.46vw, 4.5rem);
  --mosaic-gap-y: clamp(.5rem, 2.1vw, 3rem);
  --mosaic-radius: clamp(4px, .6vw, 10px);
  --control-size: max(2.75rem, 1.8vw);              /* ≥ 44 px táctiles */
  --dots-pitch: max(1.75rem, 2.2vw);

  /* Sección "Lo que hacemos" — fondo claro; medidas de la captura (1822 px) */
  --color-light-bg: #fafbff;
  --color-light-text: #4b4b4f;                      /* titular */
  --color-light-muted: #6b6b72;                     /* eyebrow (≥ 4,5:1 sobre el fondo claro) */
  --color-folder: #e9e9ea;
  --color-folder-text: #151515;
  --color-tile-bg: #fff;
  --what-pad-top: clamp(3rem, 4.4vw, 6rem);
  --what-pad-bottom: clamp(1.5rem, 3.5vw, 5rem);    /* bajo la foto: solo el botón de pausa */
  --what-gap: clamp(1.5rem, 2.2vw, 3rem);           /* titular → foto, foto → contenedor, → botón */
  --photo-width: min(100%, 28rem);                  /* 38,8 vw en escritorio (706 px de la captura) */
  --folder-s: clamp(5.5rem, 5.9vw, 8rem);           /* tres tamaños de carpeta: 107 / 140 / 165 px a 1822 */
  --folder-m: clamp(6.5rem, 7.7vw, 10.5rem);
  --folder-l: clamp(7.5rem, 9vw, 12rem);
  --folder-ratio: 1.4;
  --folder-radius: clamp(.25rem, .35vw, .5rem);
  --tile-size: clamp(6.5rem, 12.2vw, 16rem);        /* cuadrado de vídeo: 222 px a 1822 */
  --tile-radius: clamp(.5rem, .7vw, 1rem);
  --xray-grain-opacity: .6;                         /* ruido sobre las fotos de rayos X (mezcla overlay) */
  /* Sección "El despertar de la inteligencia" — escenario fijo con scroll; medidas de la captura (2424 px) */
  --awake-length: 2758vh;                         /* alto de la sección: awake.js lo recalcula (final del recorrido × ritmo + 1 pantalla); este valor es el de respaldo */
  --fs-awake-title: clamp(2rem, 6.1vw, 9.5rem);     /* titular enorme: ≈ 111 px a 1822 (77 % del ancho) */
  --fs-awake-lead: clamp(1.125rem, 2.45vw, 3.5rem);
  --fs-awake-kicker: clamp(1.125rem, 1.7vw, 2.5rem);
  --fs-awake-brand: clamp(.8125rem, 1vw, 1.375rem); /* la marca (logo + destello + lema) se escala en em */
  --glow-core: .85;                                 /* resplandor blanco del titular (alfa del núcleo y del halo) */
  --glow-halo: .5;
  --awake-brand-y: 14%;                             /* posiciones verticales (centro de cada bloque) en móvil */
  --awake-lead-y: 28%;
  --awake-title-y: 62%;
  --awake-kicker-y: 14%;
  --awake-star-y: 56%;
  --awake-star-size: min(80vw, 24rem);              /* ancho de la estrella en su sitio */
  /* Bloque "Procesar la realidad": título, amasijo de archivos y párrafo (captura de 2398 px; posiciones en % de la escena) */
  --fs-awake-step: clamp(1.375rem, 2.3vw, 3.25rem);   /* titulares de bloque ("Procesar la realidad", "Creamos el cerebro…", "Dos universos…"): ≈ 42 px a 1822 */
  --fs-awake-text: clamp(.9375rem, 1.2vw, 1.75rem);
  --color-text-soft: rgb(255 255 255 / .85);        /* párrafo ya encendido */
  --color-text-dim: rgb(255 255 255 / .16);         /* palabra aún apagada */
  --shadow-file: 0 .35em .9em rgb(0 0 0 / .38);     /* sombra suave de carpetas y tarjetas del amasijo (separa las solapadas) */
  --shadow-file-hover: 0 .6em 1.3em rgb(0 0 0 / .5);   /* …y un poco mayor con el cursor encima */
  --color-line-track: rgb(255 255 255 / .22);       /* línea de seguimiento: pista */
  --awake-line-x: 1rem;                             /* …y su posición */
  --awake-step-y: max(8%, calc(var(--header-clear) + .9rem));   /* móvil: nunca bajo la barra fija (≥ 1024 usa su propio valor) */
  --awake-heap-y: 42%;
  --awake-text-y: 82%;
  --awake-text-w: 86vw;
  --heap-w: min(92vw, 43svh);                        /* caja del amasijo (móvil: acotada por el alto para no subir bajo el título en pantallas bajas) */
  --heap-ratio: .76;
  --heap-folder-k: .21;                              /* ancho de una carpeta y de una tarjeta, como fracción del de la caja */
  --heap-tile-k: .27;
  /* Bloque del cerebro (captura de 2416 px): título arriba, cerebro de partículas al centro y subtítulo abajo */
  --awake-brain-title-y: max(9%, calc(var(--header-clear) + 1.8rem));   /* centro del título, en % del escenario (móvil: nunca bajo la barra fija; el título ocupa 2 líneas) */
  --awake-brain-y: 49%;                             /* centro del cerebro (lo coloca awake-star.js) */
  --awake-brain-text-y: 88%;
  --awake-brain-text-w: 86vw;
  --awake-orbit-rx: .33;                            /* órbita de carpetas: semieje horizontal (fracción del ancho del escenario)… */
  --awake-orbit-tilt: .5;                           /* …y semieje vertical / horizontal (perspectiva del anillo) */
  --orbit-folder: clamp(4.25rem, 20vw, 5.5rem);     /* tamaño de las carpetas que orbitan (≥ 1024: --folder-m) */
  --orbit-hang: .55;                                /* la carpeta cuelga de su nodo: su centro queda a esta fracción de su alto por debajo */
  /* Escena "Dos universos" (captura de 1828 px): título, selector, definición a la izquierda y tarjetas que la cruzan */
  --awake-worlds-title-y: max(9%, calc(var(--header-clear) + 1.2rem));                       /* frame 1 de "Dos universos": título arriba y subtítulo abajo (centros, % del escenario)… */
  --awake-worlds-lead-y: 91%;
  --awake-galaxy-y: 53%;                            /* …y centro de la vía láctea */
  --world-h: min(74vw, 30svh);                      /* alto del marco de cada tarjeta (móvil; 243 px a 375×812 y 200 px a 375×667: antes 46 vw = 173 px, a petición «más grandes»; el svh evita que el copy se salga en pantallas bajas)… */
  --world-narrow: 84vw;                             /* …y ancho de la tarjeta estrecha y de la ancha */
  --world-wide: 92vw;
  --world-gap: 3vw;
  --world-start: calc(var(--awake-line-x) + clamp(1.5rem, 3vw, 4rem));   /* hueco antes de la primera tarjeta: despegada de la línea de progreso de la izquierda */
  --world-radius: clamp(1rem, 1.6vw, 2.25rem);
  --fs-world-title: clamp(1.0625rem, 1.5vw, 2.1rem);
  --fs-world-text: clamp(.8125rem, 1vw, 1.25rem);
  --color-tab-dim: rgb(255 255 255 / .42);          /* pestaña inactiva */
  --color-world-text: rgb(255 255 255 / .6);        /* copy de las tarjetas */
  --awake-brain-size: calc(var(--awake-star-size) * 1.12);   /* ancho de la imagen de respaldo (= el de la máscara del cerebro en awake-star.js) */
  /* Bloque "personas → cerebro → activo cognitivo" (captura de 2430 px; móvil: composición vertical provisional). Posiciones en % del
     escenario salvo --people-grid-dx/-dy y --people-person-w, que son % del ancho; los leen awake-people.js y awake-star.js */
  --awake-people-title-y: max(12%, calc(var(--header-clear) + 1.8rem));
  --awake-people-text-y: 90%;
  --awake-people-text-w: 86vw;
  --people-cols: 4;
  --people-rows: 5;
  --people-grid-x: 50%;                             /* centro de la rejilla de personas */
  --people-grid-y: 31%;
  --people-grid-dx: 11%;                            /* paso entre columnas y entre filas */
  --people-grid-dy: 8.5%;
  --people-person-w: 7.5%;                          /* ancho de una persona */
  --people-brain-x: 50%;                            /* centro y ancho del cerebro pequeño (awake-star.js) */
  --people-brain-y: 56%;
  --people-brain-w: 40%;
  --people-folder-x: 50%;                           /* centro de la carpeta "Activo cognitivo" */
  --people-folder-y: 75%;
  /* Tambor de frases (carrusel orbital): las frases usan --fs-awake-step; detrás no hay partículas (el cerebro se disuelve al entrar) */
  --drum-radius: clamp(5.5rem, 14svh, 9.5rem);     /* radio del tambor: separación y profundidad de las frases vecinas */
  --color-drum-dim: var(--color-tab-dim);           /* frase vecina (anterior y siguiente) */
  --color-drum-glow: rgb(255 255 255 / .1);         /* foco de luz tras la frase activa (centro del resplandor) */
  /* Cierre ("¿Despertamos la inteligencia de tu compañía?"): la estrella de partículas de la mitad superior (awake-star.js) y el bloque de texto */
  --fs-close-title: clamp(1.75rem, 7.6vw, 2.25rem);     /* una línea de ≈ 42 vw (captura de 2420 px): ≈ 44 px a 1822 */
  --fs-close-small: clamp(.8125rem, .78vw, 1.125rem);   /* frase de las acreditaciones */
  --fs-close-seal: clamp(.75rem, .62vw, .9375rem);      /* etiqueta de cada sello (mínimo 12 px) */
  --close-muted-alpha: .6;                          /* opacidad del gris de la frase y los sellos: el texto y los iconos usan EL MISMO valor */
  --color-close-muted: rgb(255 255 255 / var(--close-muted-alpha));   /* frase, sellos y botón en contorno (≥ 4,5:1 sobre negro) */
  --color-button-bg: var(--color-folder);           /* botón: en reposo, contorno fino con texto blanco; con el cursor o el foco, gris claro (el de las carpetas)… */
  --color-button-text: var(--color-folder-text);    /* …con texto oscuro */
  --color-button-border: rgb(255 255 255 / .4);     /* borde del botón en reposo: fino y gris (captura del CTA; ≥ 3:1 sobre negro) */
  --radius-button: clamp(.5rem, .65vw, 1rem);
  --button-w: min(100%, 16.5rem);                     /* botón: 27,7 vw × 3,3 vw en escritorio */
  --button-h: 3rem;
  --close-star-w: 64%;                              /* ancho de la estrella (% del ancho) y centro (% del escenario) */
  --close-star-y: 27%;
  --close-top: 50%;                                 /* arriba del bloque título + botón + acreditaciones (% del escenario) */
  --close-gap-button: 1.5rem;                      /* separaciones del bloque: título → botón, botón → acreditaciones, frase → sellos y entre sellos */
  --close-gap-trust: 2.25rem;
  --close-gap-seals: 1.1rem;
  --close-seals-gap: 1.5rem;
  --close-seal-icon: 1.6rem;
  /* "Conoce nuestro stack tecnológico propio" (captura de 2412 px): pestañas y tarjeta clara con desplegables. Móvil: tarjeta a ancho completo */
  --color-light-card: #f3f3f2;                      /* tarjeta */
  --color-light-ink: #151515;                       /* nombre de la tarjeta y pestaña activa */
  --color-light-line: #b9b9bc;                      /* línea de las pestañas, separadores de las filas y borde de las etiquetas */
  --color-light-icon: #77777c;                      /* el «+» de los desplegables (≥ 3:1 sobre la tarjeta) */
  --fs-stack-tab: clamp(.875rem, 1vw, 1.375rem);    /* ≈ 18 px a 1822 (algo menor que la captura, a petición) */
  --fs-stack-name: clamp(1.75rem, 2.4vw, 3.5rem);   /* «Vera CPO»: ≈ 44 px a 1822 */
  --fs-stack-text: clamp(.875rem, .85vw, 1.25rem);  /* subtítulo, descriptor y texto de los desplegables */
  --fs-stack-row: clamp(1rem, 1.1vw, 1.6rem);       /* título de cada fila */
  --fs-stack-tag: clamp(.75rem, .72vw, 1rem);
  --stack-card-w: 100%;                             /* ancho de la tarjeta (≥ 1024: 45,2 vw) y de su descriptor */
  --stack-desc-w: 100%;
  --stack-card-radius: clamp(1.5rem, 2.7vw, 4rem);
  --stack-card-pad: 1.5rem 1.25rem;
  --stack-tab-pad: clamp(1rem, 2.1vw, 3rem);        /* relleno lateral de cada pestaña */
  --stack-row-pad: clamp(1rem, 1.65vw, 2.5rem);    /* alto extra de cada fila, arriba y abajo */
  --stack-icon: clamp(1.25rem, 1.66vw, 2.5rem);     /* tamaño del «+» */
  --stack-gap-tabs: 2rem;                           /* titular → pestañas y pestañas → tarjeta */
  --stack-gap-cards: 1.75rem;
  --stack-pad-bottom: 3rem;
  /* Galería de proyectos (captura de 1440 px ×2): tarjetas 5:6 sobre negro, de 27,7 vw; el ancho de las tarjetas y su hueco son los de la web antigua escalados a vw */
  --color-card-dark: #111;                          /* parte inferior de cada tarjeta */
  --color-proj-muted: rgb(244 244 244 / .55);       /* etiqueta del cliente (≥ 4,5:1 sobre #111) */
  --proj-pad: clamp(3.75rem, 6.9vw, 9rem);          /* aire arriba y abajo de la sección */
  --proj-head-gap: clamp(1.5rem, 4.2vw, 5.5rem);    /* titular → tarjetas */
  --proj-card-w: min(85vw, 22rem);                  /* móvil · 38 vw ≥ 768 · 27,7 vw ≥ 1024 */
  --proj-gap: clamp(.75rem, 1.1vw, 1.5rem);
  --proj-radius: clamp(.5rem, .7vw, 1rem);
  --fs-proj-label: clamp(.75rem, .9vw, 1.1rem);
  --fs-proj-title: clamp(1.0625rem, 1.39vw, 1.75rem);
  --fs-proj-chip: clamp(.75rem, .83vw, 1rem);
  --radius-chip: clamp(.25rem, .35vw, .5rem);
  /* Footer (captura de 1440 px ×2): CTA, cuatro columnas con el badge de Shopify, copyright y el logo gigante a todo el ancho */
  --color-footer-muted: #999;                       /* enlaces y copyright (≥ 4,5:1 sobre negro) */
  --footer-pad-x: var(--page-margin);               /* ≥ 1024: 7,8 vw (los 112 px de la captura) */
  --footer-pad-top: clamp(2.5rem, 5.6vw, 9rem);
  --footer-gap-cols: 3.5rem;                        /* CTA → columnas (≥ 1024: 8,7 vw) */
  --footer-gap-copy: clamp(2rem, 2.8vw, 4rem);
  --footer-gap-wordmark: clamp(1.5rem, 2.9vw, 4rem);
  --fs-footer-cta: clamp(1.375rem, 1.74vw, 2.75rem);   /* ≈ 32 px a 1822 */
  --fs-footer-title: clamp(1.0625rem, 1.39vw, 2.25rem);
  --fs-footer-link: clamp(.875rem, .83vw, 1.25rem);
  /* Páginas interiores: legales (y cookies) sobre fondo claro y Smartie Marketplaces con bandas negras y claras */
  --legal-w: 50rem;                                 /* columna de texto de las páginas legales */
  --legal-top: clamp(3rem, 6vw, 8rem);              /* aire entre la barra del header y el título */
  --legal-bottom: clamp(3.5rem, 6vw, 8rem);
  --fs-legal-title: clamp(2.25rem, 3.6vw, 4.5rem);
  --fs-legal-h2: clamp(1rem, 1.1vw, 1.25rem);
  --fs-legal-text: clamp(.9375rem, .95vw, 1.125rem);
  --fs-legal-table: clamp(.8125rem, .85vw, 1rem);   /* tabla de cookies: algo menor que el texto corrido */
  --legal-table-min: 44rem;                         /* ancho mínimo de la tabla: por debajo, la caja se desplaza de lado (nunca la página) */
  --legal-line: rgb(0 0 0 / .1);                     /* separadores de sección y filas de la tabla */

  /* Aviso de cookies (chrome.css; cookie-notice.js): tarjeta oscura fija abajo, centrada */
  --notice-w: 47.5rem;
  --notice-gap: 1.5rem;                              /* separación de los bordes de la pantalla (1 rem en móvil) */
  --notice-pad: 1.5rem;
  --radius-notice: .5rem;
  --color-notice-bg: var(--color-header-bg);
  --color-notice-border: rgb(244 244 244 / .25);
  --color-notice-text: rgb(244 244 244 / .85);
  --fs-notice-title: .9375rem;
  --fs-notice-text: .8125rem;
  --sm-max: 80rem;                                  /* ancho máximo del contenido de Smartie */
  --sm-pad: clamp(3.5rem, 7vw, 9rem);               /* aire arriba y abajo de cada banda de Smartie */
  --fs-sm-title: clamp(2.75rem, 7vw, 8.5rem);       /* h1 «Smartie Marketplaces» */
  --fs-sm-sub: clamp(1.125rem, 1.6vw, 2rem);
  --fs-sm-h2: clamp(1.625rem, 3vw, 3.75rem);
  --fs-sm-text: clamp(.9375rem, 1.05vw, 1.25rem);
  --dur-float: 900ms;                               /* cada fase (salida o entrada) de una carpeta o vídeo */
  --dur-xray: 120ms;                                /* fundido cruzado de la foto de rayos X (casi un corte: nunca se ven dos a la vez) */
}

@media (min-width: 640px) {
  :root {
    --mosaic-cols: 6;
    --awake-star-size: 50vw;
    --awake-orbit-rx: .4;
    --awake-orbit-tilt: .45;
  }
}

@media (min-width: 768px) {
  :root {
    --proj-card-w: 38vw;
    --header-top: .75rem;
    --header-w: calc(100% - 2 * var(--page-margin));
    --header-open-h: calc(100svh - 2 * var(--header-top));
    --panel-bleed-x: 0px;
    --panel-bleed-top: 0px;
    --panel-h: var(--header-open-h);
    --panel-radius: var(--radius-header);
    --dot-pitch-x: 10.67vw;   /* rejilla de puntos completa (la de la captura) desde tablet */
    --dot-pitch-y: 12vw;
    --dot-offset-x: calc(6.09vw - var(--dot-size) / 2);
    --dot-offset-y: calc(6.15vw - var(--dot-size) / 2);
  }
}

@media (min-width: 1024px) {
  :root {
    --page-margin: 2.3vw;     /* 39–44 px a 1822 px */
    --footer-pad-x: 7.8vw;
    --footer-gap-cols: 8.7vw;
    --proj-card-w: 27.7vw;
    --header-top: clamp(.75rem, .87vw, 1.25rem);
    --header-w: 45.1vw;                               /* = columna central de la captura */
    --header-bar-h: max(2.75rem, 3.7vw);              /* 5,3 vw en la captura, 30 % menos a petición (≈ 67 px a 1822) */
    --header-pad-x: 1.5vw;
    --fs-menu: clamp(1.625rem, 2.2vw, 3.5rem);        /* «QUIÉNES SOMOS» ≈ 19,6 vw de ancho, como la captura */
    --menu-gap: min(4.2vw, 7.5svh);                    /* también depende del alto, para que quepan el selector de idioma y las 5 opciones en pantallas bajas */
    --header-lines: max(1.125rem, 1.5vw);
    --header-lines-gap: max(.375rem, .52vw);
    --col-gap: 2.1vw;         /* 38 px a 1822 px */
    --card-width: 84vw;
    --names-rows: 6;
    --mosaic-cols: 9;
    --photo-width: 38.8vw;
    --awake-brand-y: 19%;
    --awake-lead-y: 34%;
    --awake-title-y: 72.5%;
    --awake-kicker-y: 17.5%;
    --awake-star-y: 52.5%;
    --awake-star-size: 31vw;
    --awake-step-y: 7.6%;
    --awake-brain-title-y: 9%;                       /* escritorio: los valores aprobados (la barra es estrecha y centrada) */
    --awake-worlds-title-y: 9%;
    --awake-heap-y: 43.8%;
    --awake-text-y: 85%;
    --awake-text-w: 29.5vw;
    --awake-line-x: 2.2vw;
    --awake-brain-text-w: 29vw;
    --awake-people-title-y: 15.9%;
    --awake-people-text-y: 82%;
    --awake-people-text-w: 29vw;
    --people-cols: 8;
    --people-rows: 6;
    --people-grid-x: 25.2%;
    --people-grid-y: 50.4%;
    --people-grid-dx: 2.77%;
    --people-grid-dy: 3%;
    --people-person-w: 2.2%;
    --people-brain-x: 53.5%;
    --people-brain-y: 50%;
    --people-brain-w: 16.5%;
    --stack-card-w: 45.2vw;                         /* captura: tarjeta de 45 % del ancho, descriptor al 69 % de ella */
    --stack-desc-w: 69%;
    --stack-card-pad: clamp(1.5rem, 2.1vw, 3rem) clamp(1.25rem, 1.8vw, 2.75rem) clamp(1.5rem, 2.8vw, 4rem);
    --stack-gap-tabs: 3vw;
    --stack-gap-cards: 3.5vw;
    --stack-pad-bottom: 5.6vw;
    --fs-close-title: clamp(1.625rem, 2.4vw, 3.5rem);   /* escritorio: una línea de ≈ 41 vw (el móvil es mayor y de varias líneas) */
    --close-star-w: 24%;                            /* captura de 2420 px: estrella de ≈ 24 vw centrada a ≈ 30 % de alto */
    --close-star-y: 30%;
    --close-top: 60%;
    --button-w: 27.7vw;
    --button-h: max(2.75rem, 3.3vw);
    --close-gap-button: 3vw;
    --close-gap-trust: 4vw;
    --close-gap-seals: 1vw;
    --close-seals-gap: 1.9vw;
    --close-seal-icon: max(1.125rem, 1.1vw);
    --people-folder-x: 78.9%;
    --people-folder-y: 49.7%;
    --world-h: min(36vw, 41svh);                    /* 375 px a 1822×914: bajo las pestañas y la definición queda este alto (el copy más largo cabe) */
    --world-narrow: calc(var(--world-h) * 1.4);     /* estrecha ≈ 602 px y ancha ≈ 903 px: los anchos derivan del alto */
    --world-wide: calc(var(--world-h) * 2.1);
    --world-gap: 1.65vw;
    --awake-orbit-rx: .395;                         /* 720 px a 1822: el anillo de la referencia ocupa el 79 % del ancho */
    --awake-orbit-tilt: .26;                        /* más plana que la referencia (.36) para no tocar el subtítulo */
    --orbit-folder: var(--folder-m);
    --heap-w: 46vw;
    --heap-ratio: 1.96;
    --heap-folder-k: .115;
    --heap-tile-k: .168;
    --what-pad-bottom: clamp(2rem, 3.2vw, 5rem);
  }
}

/* Sin movimiento: transiciones instantáneas (el resto lo gestiona cada módulo) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-carousel: 0ms;
    --dur-fade: 0ms;
    --dur-names: 0ms;
    --dur-image: 0ms;
    --dur-mosaic: 0ms;
    --dur-float: 0ms;
    --dur-xray: 0ms;
  }
}