/* sections.css — Estilos por sección, en el mismo orden que el HTML. */

/* Hero */
.section-hero {
  position: relative;   /* ancla de la estrella de partículas */
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--hero-pad-top);
  overflow-x: clip;
}

/* Estrella de partículas que flota detrás del titular (hero-star.js): decorativa, muy tenue, sin capturar el puntero (la escucha la sección) */
.section-hero__star {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s var(--ease-out);
}

.section-hero__star.is-ready {
  opacity: 1;
}

.section-hero .layout {
  position: relative;   /* por delante de la estrella */
}

.section-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3em .55em;
}

@media (min-width: 1024px) {
  .section-hero__title {
    flex-wrap: nowrap;
  }
}

.section-hero__icon {
  width: 1.55em;
  height: auto;
  transform: translateY(.04em);   /* alinea el destello con el texto como en el diseño */
}

.text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Degradado de marca (el del logo: menta → verde → azul petróleo), más saturado que el del hero: lo usa «inteligencia» del cierre */
.text-gradient--brand {
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
}

/* Quiénes somos — carrusel de 3 tarjetas: clientes, partners y equipo */
.section-about {
  padding-block: var(--space-12) var(--space-24);
  overflow-x: clip;   /* las tarjetas fuera de pantalla no generan scroll horizontal */
}

.section-about__header,
.section-what__header,
.section-stack__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--about-gap);
  text-align: center;
}

.section-about__eyebrow,
.section-what__eyebrow {
  font-size: var(--fs-eyebrow);
}

.section-about__title,
.section-what__title,
.section-stack__title {
  line-height: 1.2;
  text-wrap: balance;
}

/* Saltos de línea del titular: solo en escritorio, como en el diseño */
.br-lg {
  display: none;
}

@media (min-width: 1024px) {
  .section-about__header,
  .section-what__header,
  .section-stack__header {
    grid-column: 1 / -1;   /* el titular ocupa más que la columna central */
  }

  .br-lg {
    display: inline;
  }
}

/* Tarjeta base (las tres comparten borde, radio y tamaño) */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-bg);
  overflow: hidden;
}

.carousel.is-enhanced .panel {
  grid-area: 1 / 1;
  justify-self: center;
  width: var(--card-width);
  /* --offset coloca la tarjeta (-1, 0, 1); --drag la mueve mientras se arrastra */
  transform: translateX(calc(var(--offset, 0) * (var(--card-width) + var(--card-gap)) + var(--drag, 0px)));
  transition:
    transform var(--dur-carousel) var(--ease-carousel),
    opacity var(--dur-fade) var(--ease-out);
}

/* Mientras se arrastra, las tarjetas siguen al puntero sin transición */
.carousel.is-dragging .panel {
  transition: none;
}

/* Tarjeta que da la vuelta: sale desvanecida por un lado y reaparece en el opuesto */
.carousel.is-enhanced .panel.is-leaving {
  opacity: 0;
}

.carousel.is-enhanced .panel.is-jumping {
  transition: none;
}

@media (min-width: 1024px) {
  .panel {
    aspect-ratio: var(--card-ratio);
  }
}

/* Párrafos de las tarjetas: grosor, interlineado y tamaño de la referencia de diseño */
.panel__text {
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-lead);
  line-height: var(--lh-lead);
  text-wrap: balance;
}

.panel__text--lead {
  max-width: 24em;
  text-align: center;
}

/* 1 · Clientes: texto, lista vertical en bucle e imagen que cambia sola */
.panel--clients {
  gap: var(--space-6);
  padding: var(--space-8) var(--panel-pad) var(--panel-pad);
}

.panel__text--clients {
  max-width: 12em;
}

.names {
  position: relative;
  height: calc(var(--names-rows) * var(--names-row));
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: var(--fs-name);
  letter-spacing: var(--ls-display);
  line-height: 1;
  list-style: none;
  /* desvanece la primera y la última fila */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}

.names li {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: var(--names-row);
  font-size: calc(1em * var(--fit, 1));   /* --fit < 1 solo en los nombres que no caben (names-ticker.js) */
  white-space: nowrap;
  transform: translateY(calc(var(--p, 0) * var(--names-row)));
  transition: transform var(--dur-names) var(--ease-carousel);
}

.names li.is-jumping {
  transition: none;
}

.panel__media {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--media-radius);
  overflow: hidden;
}

/* Marco de formato fijo: la foto rellena todo el marco y se recorta centrada si no es del mismo formato */
.panel__media-slot {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity var(--dur-image) var(--ease-out);
}

.panel__media-slot.is-active {
  opacity: 1;
}

.panel__media-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .panel--clients {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* tablet: lista a la izquierda, imagen a la derecha */
    align-items: center;
    column-gap: var(--space-8);
  }

  .panel__text--clients {
    grid-column: 1 / -1;
  }

  .panel__media {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 1024px) {
  .panel--clients {
    display: grid;
    grid-template-columns: 598fr 667fr 692fr;   /* proporciones de la captura */
    align-items: center;
    gap: 0;
    padding: var(--panel-pad);
  }

  .panel__text--clients {
    padding-inline-start: var(--space-8);
  }

  .panel__media {
    align-self: stretch;
    aspect-ratio: auto;
  }
}

/* 2 · Partners: texto y pills sobre fondo degradado con grano */
.panel--partners {
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--panel-pad);
  background-color: var(--color-partners-dark);
  background-image:
    radial-gradient(ellipse 55% 85% at 80% 52%, var(--color-partners-light) 0%, var(--color-partners-mid) 55%, transparent 100%),
    radial-gradient(ellipse 35% 45% at 100% 100%, var(--color-partners-light) 0%, transparent 100%);
}

.panel--partners::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/grano.svg");
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.panel--partners > * {
  position: relative;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pill-gap);
  margin: auto 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .panel--partners {
    padding-top: max(var(--space-12), 5.2vw);
  }

  .pills {
    max-width: 48vw;   /* fuerza las dos filas de la captura: 2 + 3 */
  }
}

/* 3 · Equipo: texto y mosaico de fotos en blanco y negro */
.panel--team {
  align-items: center;
  gap: var(--space-12);   /* = el padding superior: el título queda a la misma distancia del borde y de las fotos */
  padding: var(--space-12) calc(var(--card-width) * .029) var(--space-8);
}

/* Las tres tarjetas comparten alto, así que a la del equipo le puede sobrar espacio: se lo queda el título, a partes iguales entre el borde de arriba y las
   fotos (margin auto), que quedan abajo. Así el título está centrado entre el borde y el mosaico a cualquier ancho. */
.panel--team .panel__text {
  margin-block: auto;
}

.panel--team .mosaic {
  margin: 0;
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(var(--mosaic-cols), minmax(0, 1fr));
  gap: var(--mosaic-gap-y) var(--mosaic-gap-x);
  width: 100%;
  margin: auto 0;
  padding: 0;
  list-style: none;
}

.mosaic li {
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--mosaic-radius);
  overflow: hidden;
}

/* Fundido de cada celda en dos fases (salida → cambio de foto → entrada); se congela al pausar */
.mosaic li.is-out {
  animation: mosaic-out var(--dur-mosaic) ease-in-out forwards;
}

.mosaic li.is-in {
  animation: mosaic-in var(--dur-mosaic) ease-in-out forwards;
}

.carousel:not([data-running="true"]) .mosaic li {
  animation-play-state: paused;
}

@keyframes mosaic-out {
  to { opacity: .04; }
}

@keyframes mosaic-in {
  from { opacity: .04; }
}

.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1);
}

/* Celdas que sobran según columnas: 4×5 móvil · 6×4 tablet · 9×3 escritorio */
.mosaic li:nth-child(n + 21) {
  display: none;
}

@media (min-width: 640px) {
  .mosaic li:nth-child(n + 21) {
    display: block;
  }

  .mosaic li:nth-child(n + 25) {
    display: none;
  }
}

@media (min-width: 1024px) {
  .mosaic li:nth-child(n + 25) {
    display: block;
  }

  .panel--team {
    gap: 0;
    padding-top: 0;
    padding-bottom: calc(var(--card-width) * .045 + .8vw);
  }
}

/* Lo que hacemos — sección clara: titular, foto de rayos X al centro y carpetas y vídeos que flotan a los lados */
.section-what {
  position: relative;
  padding-block: var(--what-pad-top) var(--what-pad-bottom);
  overflow-x: clip;   /* los elementos de los lados no generan scroll horizontal */
  background: var(--color-light-bg);
  color: var(--color-light-text);
}

.section-what__header {
  margin-bottom: var(--what-gap);
}

.section-what__eyebrow {
  color: var(--color-light-muted);
}

/* Foto de rayos X: la nueva se funde encima de la anterior, que se retira cuando termina el fundido */
.what__photo {
  position: relative;
  width: var(--photo-width);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  mix-blend-mode: multiply;   /* el blanco de la foto toma el color del fondo (sin marco). Va en el conjunto, no en cada foto: si no, las dos se multiplican entre sí al cambiar */
}

/* Ruido fijo sobre las fotos (grano oscuro azulado); no cambia al pasar de una foto a otra.
   Con overlay solo texturiza el dibujo: el blanco del fondo no se ensucia. */
.what__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("../assets/img/grano-oscuro.svg");
  opacity: var(--xray-grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.what__photo-slot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0s linear var(--dur-xray);
}

.what__photo-slot.is-active {
  z-index: 1;
  opacity: 1;
  transition: opacity var(--dur-xray) var(--ease-out);
}

.what__photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Escena: foto + carpetas y vídeos. Los elementos se colocan por su centro en % (--x, --y) del contenedor
   .what__items: en móvil y tablet es la escena (la foto y sus lados, así entran encima de la imagen);
   en escritorio es toda la sección (como la captura). */
.what__stage {
  position: relative;
}

.what__items {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.what__item {
  --x: var(--mx);
  --y: var(--my);
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  translate: -50% -50%;
}

.what__item--extra {
  display: none;
}

/* Cada elemento se desvanece, cambia de hueco (y de vídeo) y reaparece; al pausar queda congelado */
.what__item.is-out {
  will-change: opacity;
  animation: what-out var(--dur-float) ease-in-out forwards;
}

.what__item.is-in {
  will-change: opacity;
  animation: what-in var(--dur-float) ease-in-out both;
}

.section-what:not([data-running="true"]) .what__item {
  animation-play-state: paused;
}

@keyframes what-out {
  to { opacity: 0; }
}

@keyframes what-in {
  from { opacity: 0; }
}

@media (min-width: 1024px) {
  .what__stage {
    position: static;   /* los elementos se colocan respecto a la sección entera */
  }

  .what__item {
    --x: var(--dx);
    --y: var(--dy);
  }

  .tile.what__item--extra {
    display: block;
  }

  .folder.what__item--extra {
    display: grid;
  }
}

/* El despertar de la inteligencia — escenario fijo (pin): el scroll mueve el zoom hacia el punto de la "i"
   y después la estrella de partículas. Sin JS o con movimiento reducido: las dos escenas apiladas y estáticas. */
.section-awake {
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
}

.section-awake.is-enhanced {
  height: var(--awake-length);
}

.awake__stage {
  position: relative;
}

.section-awake.is-enhanced .awake__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.awake__scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}

.section-awake.is-enhanced .awake__scene {
  position: absolute;
  inset: 0;
  min-height: 0;
}

/* Capas: bloque de proceso y del cerebro (0) · estrella y partículas (1, por delante del título y los archivos, sin tapar el cursor) ·
   escena 1 (2) · círculo blanco (3) */
.section-awake.is-enhanced .awake__scene--process {
  z-index: 0;
}

/* La escena del cerebro no crea capa propia (sin z-index): así las carpetas de su órbita se ordenan con el canvas de las partículas
   (traseras por debajo, delanteras por encima) */

.section-awake.is-enhanced .awake__scene--star {
  z-index: 1;
  pointer-events: none;
}

.section-awake.is-enhanced .awake__scene--intro {
  z-index: 2;
}

/* Escena 1: bloques centrados en su posición vertical (% de la escena, de la captura) */
.awake__brand,
.awake__lead,
.awake__title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  padding-inline: var(--page-margin);
  text-align: center;
  translate: 0 -50%;
}

.awake__brand {
  top: var(--awake-brand-y);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
  font-size: var(--fs-awake-brand);
}

.awake__logo {
  width: 7.5em;
  height: auto;
}

.awake__spark {
  width: 3.1em;
  height: auto;
}

.awake__tagline {
  font-size: .95em;
  line-height: 1.1;
  text-align: left;
}

.awake__lead {
  top: var(--awake-lead-y);
  font-size: var(--fs-awake-lead);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
}

/* Titular: origen de la escala en la esquina (el JS calcula la traslación para que el zoom entre en el punto de la "i").
   El resplandor blanco se mantiene siempre: va en una copia aparte (--glow) que solo pinta la sombra; con will-change
   se rasteriza una vez y el zoom lo escala la GPU (desenfocar un texto gigante en cada fotograma iba a ~35 fps) */
.awake__title {
  top: var(--awake-title-y);
  font-size: var(--fs-awake-title);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  transform-origin: 0 0;
}

.awake__title--glow.has-glow-canvas {
  text-shadow: none;   /* el resplandor ya está pintado en un canvas (awake.js): se escala como una textura, sin volver a rasterizar el desenfoque */
}

.awake__title--glow {
  color: transparent;
  text-shadow:
    0 0 .12em rgb(255 255 255 / var(--glow-core)),
    0 0 .38em rgb(255 255 255 / var(--glow-halo));
  will-change: transform;
  pointer-events: none;
}

.awake__brand,
.awake__lead {
  opacity: var(--o, 1);
}

/* Círculo blanco: el JS le da el radio y el centro (clip-path) y lo funde al volver el negro */
.awake__white {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--color-text);
  clip-path: circle(0 at 50% 50%);
  opacity: 0;
  pointer-events: none;
}

.section-awake.is-enhanced .awake__white {
  display: block;
}

/* Escena 2: estrella de partículas (canvas) y texto */
.awake__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.awake__star-fallback {
  position: absolute;
  top: var(--awake-star-y);
  left: 50%;
  width: var(--awake-star-size);
  height: auto;
  translate: -50% -50%;
}

.section-awake.is-star-ready .awake__star-fallback {
  opacity: 0;   /* sigue ocupando su sitio: el JS lo usa para medir la estrella */
}

.awake__kicker {
  position: absolute;
  top: var(--awake-kicker-y);
  left: 0;
  right: 0;
  margin: 0;
  padding-inline: var(--page-margin);
  font-size: var(--fs-awake-kicker);
  text-align: center;
  translate: 0 -50%;
  opacity: calc(var(--k, 1) * (1 - var(--ko, 0)));   /* entra con --k y, más tarde, sube y sale con --ko */
  transform: translateY(calc((1 - var(--k, 1)) * var(--reveal-distance) - var(--ko, 0) * 45svh));
}

@media (min-width: 1024px) {
  .awake__title {
    white-space: nowrap;
  }
}

/* Bloque "Procesar la realidad": título, amasijo de archivos y párrafo. En la escena fija el JS mueve el título y los archivos
   (sube desde abajo) y enciende el párrafo palabra a palabra; sin JS o con movimiento reducido todo se ve ya en su sitio. */
.awake__step {
  position: absolute;
  top: var(--awake-step-y);
  left: 0;
  right: 0;
  margin: 0;
  padding-inline: var(--page-margin);
  font-size: var(--fs-awake-step);
  text-align: center;
  translate: 0 -50%;
  opacity: calc(var(--st, 1) * (1 - var(--lv, 0)));
  transform: translateY(calc((1 - var(--st, 1)) * 32svh - var(--lv, 0) * 45svh));   /* sube desde el 40 % de la pantalla hasta su sitio y, al final, sale hacia arriba (--lv) */
}

.awake__heap {
  position: absolute;
  top: var(--awake-heap-y);
  left: 50%;
  width: var(--heap-w);
  aspect-ratio: var(--heap-ratio);
  translate: -50% -50%;
  opacity: calc(1 - var(--lv, 0));   /* al salir (--lv) el amasijo se apaga y se encoge un poco: sus partículas se vuelven cerebro */
  transform: translateY(calc(var(--lv, 0) * -34svh)) scale(calc(1 - var(--lv, 0) * .06));   /* sube y sale, como todo lo demás */
}

/* Cada archivo se coloca por su centro (--x, --y en %). El JS escribe su `transform` (subida y empuje del cursor);
   la elevación del hover usa las propiedades individuales translate/scale para no pelearse con él. */
.heap__item {
  position: absolute;
  top: calc(var(--my, var(--y)) * 1%);   /* < 1024: composición propia (--mx/--my); desde 1024, la de la captura (--x/--y) */
  left: calc(var(--mx, var(--x)) * 1%);
  z-index: var(--z, 1);
  translate: -50% -50%;
  transition: translate var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out);
}

.awake__heap .folder {
  --w: calc(var(--heap-w) * var(--heap-folder-k));
}

.awake__heap .tile {
  width: calc(var(--heap-w) * var(--heap-tile-k));
  border-radius: calc(var(--heap-w) * var(--heap-tile-k) * .07);
}

/* Carpetas grandes: para las palabras más largas ("Transcripciones", "Presentaciones"…) */
.awake__heap .folder.heap__item--l {
  --w: calc(var(--heap-w) * var(--heap-folder-k) * 1.3);
}

/* Cambio de etiqueta: se apaga y se enciende */
.heap__item .folder__label {
  transition: opacity var(--dur-base) ease;
}

.heap__item.is-swapping .folder__label {
  opacity: 0;
}

.heap__item--extra,
.heap__item--desk {
  display: none;   /* menos archivos en pantallas pequeñas: --extra y --desk solo se ven desde 1024 px */
}

/* Sin bordes: una sombra suave en cada archivo (en las carpetas, en la pestaña y el cuerpo) que se acentúa con el cursor encima */
.awake__heap .folder::before,
.awake__heap .folder::after {
  box-shadow: var(--shadow-file);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.awake__heap .tile {
  box-shadow: var(--shadow-file);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.awake__heap .folder:hover::before,
.awake__heap .folder:hover::after,
.awake__heap .tile:hover {
  box-shadow: var(--shadow-file-hover);
}

/* El que tiene el cursor encima se eleva un poco */
.heap__item:hover {
  z-index: 100;
  translate: -50% calc(-50% - .4em);
  scale: 1.05;
}

.awake__text {
  position: absolute;
  top: var(--awake-text-y);
  left: 50%;
  width: var(--awake-text-w);
  margin: 0;
  font-size: var(--fs-awake-text);
  line-height: 1.3;
  color: var(--color-text-soft);
  text-align: center;
  text-wrap: pretty;
  translate: -50% -50%;
  opacity: calc(clamp(0, calc((var(--hp, 1) - .45) * 2.2), 1) * (1 - var(--lv, 0)));   /* entra con el amasijo (--hp) y sale con --lv */
  transform: translateY(calc((1 - var(--hp, 1)) * 14svh - var(--lv, 0) * 40svh));   /* entra desde abajo y sale hacia arriba */
}

/* Palabra a palabra: --w (0–1) lo escribe awake-words.js según el scroll */
.awake__word {
  color: color-mix(in srgb, var(--color-text-soft) calc(var(--w, 1) * 100%), var(--color-text-dim));
}

/* Bloque del cerebro: título arriba y subtítulo abajo (como "Procesar la realidad", entran con --bt desde awake.js); el cerebro lo
   dibujan las partículas del canvas. Sin JS o con movimiento reducido se ve la imagen de respaldo en su sitio. */
.awake__brain-title {
  position: absolute;
  top: var(--awake-brain-title-y);
  left: 0;
  right: 0;
  margin: 0;
  padding-inline: var(--page-margin);
  font-size: var(--fs-awake-step);
  text-align: center;
  text-wrap: balance;
  translate: 0 -50%;
  opacity: calc(var(--bt, 1) * (1 - var(--bo, 0)));
  transform: translateY(calc((1 - var(--bt, 1)) * 32svh - var(--bo, 0) * 45svh));   /* entra desde abajo y, al final, sale hacia arriba (--bo) */
}

/* Órbita de carpetas alrededor del cerebro. Sin JS o con movimiento reducido: anillo estático (cos/sin de CSS con --ang); en la escena
   fija el JS las mueve con transform (posición, escala y opacidad por profundidad) y el canvas dibuja anillo, nodos y líneas de puntos. */
.awake__orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.awake__orbit-canvas {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.section-awake.is-enhanced .awake__orbit-canvas {
  display: block;
}

.orbit__item {
  --w: var(--orbit-folder);
  --ang: var(--am, var(--a));
  --rx: calc(var(--awake-orbit-rx) * 100vw);
  position: absolute;
  top: var(--awake-brain-y);
  left: 50%;
  z-index: 0;
  translate:
    calc(-50% + var(--rx) * cos(var(--ang)))
    calc(-50% + var(--rx) * var(--awake-orbit-tilt) * sin(var(--ang)) + var(--w) / var(--folder-ratio) * var(--orbit-hang));
}

.orbit__item--extra {
  display: none;   /* en < 1024 px solo 7 carpetas */
}

.section-awake.is-enhanced .orbit__item {
  translate: -50% -50%;
  opacity: 0;   /* el JS las enciende al abrirse la órbita */
  will-change: transform, opacity;
}

@media (min-width: 1024px) {
  .orbit__item {
    --ang: var(--a);
  }

  .orbit__item--extra {
    display: grid;
  }
}

.awake__brain-fallback {
  position: absolute;
  top: var(--awake-brain-y);
  left: 50%;
  width: var(--awake-brain-size);
  height: auto;
  translate: -50% -50%;
}

.awake__brain-fallback {
  mix-blend-mode: screen;   /* el fondo negro del PNG no tapa las carpetas de detrás */
}

.section-awake.is-enhanced .awake__brain-fallback {
  display: none;   /* en la escena fija el cerebro es el canvas */
}

.awake__brain-text {
  position: absolute;
  top: var(--awake-brain-text-y);
  left: 50%;
  width: var(--awake-brain-text-w);
  margin: 0;
  font-size: var(--fs-awake-text);
  line-height: 1.3;
  color: var(--color-text-soft);
  text-align: center;
  text-wrap: pretty;
  translate: -50% -50%;
  opacity: calc(clamp(0, calc((var(--bt, 1) - .35) * 1.6), 1) * (1 - var(--bo, 0)));
  transform: translateY(calc((1 - var(--bt, 1)) * 14svh - var(--bo, 0) * 45svh));
}

/* Línea de seguimiento: pista tenue y relleno blanco que crece con el scroll (--prog) */
.awake__progress {
  display: none;
  position: absolute;
  top: 2.5%;
  bottom: 4%;
  left: var(--awake-line-x);
  z-index: 4;
  width: 1px;
  background: var(--color-line-track);
  opacity: var(--line, 0);
  pointer-events: none;
}

.awake__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-text);
  transform: scaleY(var(--prog, 0));
  transform-origin: top;
}

.section-awake.is-enhanced .awake__progress {
  display: block;
}

/* En móvil y tablet la línea de seguimiento se quita: pegada al borde y sin captura que la pida, solo restaba aire a la composición */
@media (max-width: 1023.98px) {
  .section-awake.is-enhanced .awake__progress {
    display: none;
  }
}

@media (min-width: 1024px) {
  .heap__item {
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
  }

  .tile.heap__item--extra,
  .tile.heap__item--desk {
    display: block;
  }

  .folder.heap__item--extra,
  .folder.heap__item--desk {
    display: grid;
  }
}

/* Escena "Dos universos, un mismo origen". Frame 1: título arriba y subtítulo abajo (entran desde abajo y salen hacia arriba) con la vía
   láctea de partículas en medio (canvas). Frame 2: pestañas con un subrayado que se desliza de una a otra, la definición del universo
   activo centrada debajo y el carrusel de tarjetas a ancho completo; el recorrido vertical mueve su scroll lateral (worlds.js). Con
   puntero táctil las tarjetas se mueven con el dedo. Sin JS se ven los dos universos apilados. */
.awake__scene--worlds {
  z-index: 2;
}

.section-awake.is-enhanced .awake__scene--worlds {
  pointer-events: none;
  visibility: hidden;   /* awake.js lo muestra cuando toca */
}

.worlds__title,
.worlds__lead {
  margin: 0;
  padding-inline: var(--page-margin);
  text-align: center;
}

.worlds__title {
  padding-top: 12svh;
  font-size: var(--fs-awake-step);
  letter-spacing: var(--ls-display);
}

.worlds__lead {
  max-width: 34em;
  margin: 3.2svh auto 0;
  font-size: var(--fs-awake-text);
  line-height: 1.3;
  color: var(--color-text-soft);
  text-wrap: balance;
}

.section-awake.is-enhanced .worlds__title,
.section-awake.is-enhanced .worlds__lead {
  position: absolute;
  left: 0;
  right: 0;
  padding-block: 0;
  translate: 0 -50%;
}

.section-awake.is-enhanced .worlds__title {
  top: var(--awake-worlds-title-y);
  opacity: calc(var(--wt, 1) * (1 - clamp(0, var(--wo, 0) * 1.6, 1)));
  transform: translateY(calc((1 - var(--wt, 1)) * 24svh - var(--wo, 0) * 30svh));   /* sube hasta su sitio y, al final, sale hacia arriba */
}

.section-awake.is-enhanced .worlds__lead {
  top: var(--awake-worlds-lead-y);
  margin: 0 auto;
  opacity: calc(var(--wl, 1) * (1 - clamp(0, var(--wo, 0) * 1.8, 1)));
  transform: translateY(calc((1 - var(--wl, 1)) * 14svh - var(--wo, 0) * 55svh));
}

/* Frame 2 */
.worlds__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 8svh 6svh;
}

.section-awake.is-enhanced .worlds__layout {
  height: 100%;
  padding-block: var(--header-clear) 0;   /* móvil y tablet: las pestañas arrancan bajo la barra fija (que reaparece al subir el scroll y las taparía) */
}

.worlds__tabs {
  position: relative;
  display: flex;
  border-bottom: 1px solid rgb(255 255 255 / .28);
  opacity: calc(var(--tb, 1) * (1 - clamp(0, var(--wx, 0) * 1.6, 1)));
  transform: translateY(calc((1 - var(--tb, 1)) * 14svh - var(--wx, 0) * 30svh));   /* suben desde abajo y, al final, salen hacia arriba (--wx) */
}

.worlds__tab {
  min-height: 2.75rem;
  padding: .5em clamp(1rem, 2.6vw, 3.5rem);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-awake-text);
  letter-spacing: var(--ls-display);
  color: var(--color-tab-dim);
  cursor: pointer;
  pointer-events: auto;
  transition: color .5s var(--ease-out);
}

.worlds__tab:hover,
.worlds__tab[aria-selected="true"] {
  color: var(--color-text);
}

.worlds__tab:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: -4px;
}

/* Subrayado de la pestaña activa: se desliza a la otra al cambiar (worlds.js escribe --ix y --iw en px) */
.worlds__indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 1px;
  height: 2px;
  background: var(--color-text);
  transform-origin: 0 50%;
  transform: translateX(calc(var(--ix, 0) * 1px)) scaleX(var(--iw, 0));
  transition: transform .7s var(--ease-out);
}

.worlds__content {
  width: 100%;
  margin-top: calc(3svh + var(--world-shift, 0px));   /* worlds.js baja el bloque con el espacio que sobra (móvil y tablet) */   /* móvil: más justo para que quepan los vídeos grandes; en escritorio 4,5 svh */
}

.section-awake.is-enhanced .worlds__content {
  flex: 1;
  min-height: 0;
}

.worlds__panel {
  display: flex;
  flex-direction: column;
}

.worlds__panel[hidden] {
  display: none;
}

.worlds__tabs[hidden] ~ .worlds__content .worlds__panel + .worlds__panel {
  margin-top: 6rem;   /* sin JS (pestañas ocultas): los dos universos apilados */
}

.worlds__panel.is-entering {
  animation: world-in .7s var(--ease-out) both;
}

@keyframes world-in {
  from {
    opacity: 0;
    transform: translateY(3svh);
  }
}

.worlds__tabs:not([hidden]) ~ .worlds__content .worlds__panel-title {
  display: none;   /* con las pestañas ya se sabe de qué universo es el panel */
}

.worlds__panel-title {
  margin: 0 0 1rem;
  padding-inline: var(--page-margin);
  font-size: var(--fs-world-title);
}

/* Definición del universo activo: centrada bajo las pestañas, en gris como el copy de las tarjetas */
.worlds__def {
  max-width: 36em;
  margin: 1.3svh auto 3svh;   /* pegada a las pestañas (es su descriptivo); en móvil menos aire hasta las tarjetas para que quepan más grandes */
  padding-inline: var(--page-margin);
  font-size: var(--fs-world-text);
  line-height: 1.4;
  color: var(--color-world-text);
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}

.section-awake.is-enhanced .worlds__def {
  opacity: calc(var(--tb, 1) * (1 - clamp(0, var(--wx, 0) * 1.6, 1)));
  transform: translateY(calc((1 - var(--tb, 1)) * 16svh - var(--wx, 0) * 32svh));
}

/* Carrusel: scroll lateral normal, independiente del vertical (la rueda vertical sigue moviendo la página): dedo y trackpad con su inercia,
   teclado y ratón arrastrando (worlds.js) */
.worlds__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;   /* el gesto lateral en el borde no navega hacia atrás */
  cursor: grab;
}

.worlds__scroller.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.worlds__scroller img {
  -webkit-user-drag: none;
  user-select: none;
}

.worlds__track {
  display: flex;
  align-items: flex-start;
  gap: var(--world-gap);
  width: max-content;
  padding-inline: var(--world-start) var(--page-margin);
}


.section-awake.is-enhanced .worlds__scroller {
  pointer-events: auto;   /* la escena entera es pointer-events: none (para no tapar el resto): el carrusel tiene que recibir dedo, rueda y arrastre */
  scrollbar-width: none;
  opacity: calc(var(--cd, 1) * (1 - clamp(0, var(--wx, 0) * 1.6, 1)));
  transform: translateY(calc((1 - var(--cd, 1)) * 16svh - var(--wx, 0) * 45svh));
}

.section-awake.is-enhanced .worlds__scroller::-webkit-scrollbar {
  display: none;
}

.world-card {
  flex: none;
  width: var(--world-narrow);
  scroll-snap-align: start;
}

.world-card--wide {
  width: var(--world-wide);
}

.world-card__media {
  height: var(--world-h);
  border: 1.5px solid var(--color-border);
  border-radius: var(--world-radius);
  overflow: hidden;
  background: #000;
}

.world-card__media img,
.world-card__media video {
  object-position: 50% var(--focus, 0%);   /* los vídeos estrechos (4:5) se recortan por abajo (se ve el margen negro y la ventana desde arriba, como en el diseño); --focus desplaza ese recorte si la composición lo pide */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.world-card__title {
  margin: 1.4em 0 .7em;
  padding-inline: .5rem;
  font-size: var(--fs-world-title);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display);
}

.world-card__text {
  margin: 0;
  padding-inline: .5rem;
  font-size: var(--fs-world-text);
  line-height: 1.4;
  color: var(--color-world-text);
  text-wrap: pretty;
}

@media (pointer: coarse) {
  .worlds__scroller {
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--world-start) var(--page-margin);   /* el ajuste respeta el hueco de la línea de progreso */
  }
}

@media (min-width: 1024px) {
  .section-awake.is-enhanced .worlds__layout {
    padding-block: 2.2svh 0;   /* las pestañas, pegadas al borde superior (la barra es estrecha y centrada) */
  }

  .worlds__content {
    margin-top: 4.5svh;
  }

  .worlds__def {
    max-width: 48vw;   /* la definición larga (Transformación) cabe en 3 líneas */
    margin-bottom: 7.5svh;   /* con mucho más aire hasta las tarjetas */
  }

  .worlds__lead {
    max-width: 28.5vw;   /* corta como la captura: "…mira hacia dos / direcciones que nacen del mismo sitio" */
    text-wrap: wrap;
  }

  .awake__people-text {
    text-wrap: wrap;   /* corta como la captura: "…conocimiento de / las personas clave en un activo cognitivo, perdurable / y accesible…" */
  }
}

/* Escena "personas → cerebro → activo cognitivo": título arriba, párrafo abajo (entran desde abajo con --pt), la carpeta a la derecha (--pf)
   y, decorativo, el canvas con la rejilla de personas y los chorros de partículas. El cerebro lo dibuja el canvas de la escena 2
   (awake-star.js) en --people-brain-*. Sin JS o con movimiento reducido las piezas quedan en su sitio, apiladas en la pantalla. */
.awake__scene--people {
  z-index: 2;
}

.section-awake.is-enhanced .awake__scene--people {
  pointer-events: none;
  visibility: hidden;   /* awake.js lo muestra cuando toca */
}

.awake__people-art {
  position: absolute;
  inset: 0;
  opacity: calc(1 - clamp(0, var(--po, 0) * 1.6, 1));
  transform: translateY(calc(var(--po, 0) * -30svh));   /* al final, todo el bloque sale hacia arriba (--po) */
}

/* Respaldo del cerebro (sin JS / movimiento reducido); en la escena fija lo dibuja el canvas de partículas */
.awake__people-brain {
  position: absolute;
  top: var(--people-brain-y);
  left: var(--people-brain-x);
  width: calc(var(--people-brain-w) * 1.35);
  height: auto;
  translate: -50% -50%;
  mix-blend-mode: screen;
}

.section-awake.is-enhanced .awake__people-brain {
  display: none;
}

.awake__people-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.awake__people-folder {
  position: absolute;
  top: var(--people-folder-y);
  left: var(--people-folder-x);
  translate: -50% -50%;
  opacity: var(--pf, 1);
  transform: translateY(calc((1 - var(--pf, 1)) * 14svh));   /* sube desde abajo */
}

.awake__people-title {
  position: absolute;
  top: var(--awake-people-title-y);
  left: 0;
  right: 0;
  margin: 0;
  padding-inline: var(--page-margin);
  font-size: var(--fs-awake-step);   /* el mismo tamaño que los demás titulares de bloque */
  letter-spacing: var(--ls-display);
  text-align: center;
  text-wrap: balance;
  translate: 0 -50%;
  opacity: calc(var(--pt, 1) * (1 - clamp(0, var(--po, 0) * 1.6, 1)));
  transform: translateY(calc((1 - var(--pt, 1)) * 32svh - var(--po, 0) * 45svh));   /* entra desde abajo y sale hacia arriba */
}

.awake__people-text {
  position: absolute;
  top: var(--awake-people-text-y);
  left: 50%;
  width: var(--awake-people-text-w);
  margin: 0;
  font-size: var(--fs-awake-text);
  line-height: 1.3;
  color: var(--color-text-soft);
  text-align: center;
  text-wrap: pretty;
  translate: -50% -50%;
  opacity: calc(clamp(0, calc((var(--pt, 1) - .35) * 1.6), 1) * (1 - clamp(0, var(--po, 0) * 1.8, 1)));
  transform: translateY(calc((1 - var(--pt, 1)) * 14svh - var(--po, 0) * 55svh));
}

/* Tambor de frases: perspective + rotateX, como un cilindro que gira (38° entre frases). Cada frase lleva --dy (sen), --dz (cos − 1), --do
   (posición respecto a la activa, en frases), --ds (escala por profundidad), --db (desenfoque por profundidad) y --f (foco 0–1) que escribe
   awake-drum.js; el radio, el tamaño y el gris salen de los tokens. Sin JS o con movimiento reducido: lista apilada. */
.awake__scene--drum {
  display: grid;
  place-items: center;
  z-index: 2;
}

.section-awake.is-enhanced .awake__scene--drum {
  display: block;
  pointer-events: none;
  visibility: hidden;   /* awake.js lo muestra cuando toca */
}

/* Ambiente del tambor: polvo de partículas (canvas) y foco de luz; solo en la escena fija, por debajo de las frases */
.drum__ambient {
  display: none;
}

.section-awake.is-enhanced .drum__ambient {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.drum__dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(var(--dn, 1) * (1 - var(--dq, 0)));   /* entra con la escena y sale con ella (--dq) */
}

.drum__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(85vw, 1500px);
  height: 46svh;
  translate: -50% -50%;
  background: radial-gradient(closest-side, var(--color-drum-glow), transparent);
  opacity: calc(var(--dg, 0) * var(--dn, 1) * (1 - clamp(0, var(--dq, 0) * 1.6, 1)));
}

.drum {
  display: grid;
  gap: 1.4em;
  margin: 0;
  padding: 0 var(--page-margin);
  list-style: none;
}

.drum__phrase {
  font-size: calc(var(--fs-awake-step) * 1.15);   /* la central es la más grande: las demás se encogen desde aquí (--ds ≤ 1, así el texto no se escala por encima de 1 y no pierde nitidez) */
  letter-spacing: var(--ls-display);
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

.section-awake.is-enhanced .drum {
  position: absolute;
  inset: 0;
  place-items: center;
  gap: 0;
  padding: 0;
  perspective: 900px;
  opacity: calc(var(--dn, 1) * (1 - clamp(0, var(--dq, 0) * 1.6, 1)));
  transform: translateY(calc((1 - var(--dn, 1)) * 30svh - var(--dq, 0) * 45svh));   /* entra desde abajo con la primera frase y sale hacia arriba (--dq) */
}

.section-awake.is-enhanced .drum__phrase {
  grid-area: 1 / 1;   /* todas en la misma celda: el tambor las separa con la transformación */
  width: min(90vw, 1100px);
  color: color-mix(in srgb, var(--color-text) calc(var(--f, 0) * 100%), var(--color-drum-dim));
  opacity: 0;
  filter: blur(calc(var(--db, 0) * 1px));
  transform: translate3d(0, calc(var(--dy, 0) * var(--drum-radius) * 2.4), calc(var(--dz, 0) * var(--drum-radius) * 2.4)) rotateX(calc(var(--do, 0) * -38deg)) scale(var(--ds, 1));
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Cierre: h2, botón y acreditaciones suben escalonados (--c1, --c2, --c3) bajo la estrella de partículas de la mitad superior (la dibuja el canvas
   de la escena 2). Sin JS o con movimiento reducido: bloque de texto centrado, apilado. */
.awake__scene--close {
  display: grid;
  place-items: center;
  z-index: 2;
}

.section-awake.is-enhanced .awake__scene--close {
  display: block;
  visibility: hidden;   /* awake.js lo muestra cuando toca */
}

.close {
  display: grid;
  justify-items: center;
  width: min(90vw, 1000px);
  padding-block: var(--space-24);
  text-align: center;
}

.close__title {
  margin: 0;
  font-size: var(--fs-close-title);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display);
  line-height: 1.15;
  text-wrap: balance;
}

.close__button {
  margin-top: var(--close-gap-button);
}

.close__trust {
  display: grid;
  justify-items: center;
  gap: var(--close-gap-seals);
  margin-top: var(--close-gap-trust);
}

.close__trust-text {
  margin: 0;
  font-size: var(--fs-close-small);
  letter-spacing: var(--ls-display);
  color: var(--color-close-muted);
  text-wrap: balance;
}

.close__seals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* móvil: tres columnas, icono sobre etiqueta */
  gap: .75rem var(--close-seals-gap);
  width: min(100%, 22rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.close__seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55em;
  text-align: center;
  text-wrap: balance;
  font-size: var(--fs-close-seal);
  letter-spacing: var(--ls-display);
  color: var(--color-close-muted);
}

.close__seal img {
  display: block;
  width: auto;
  height: var(--close-seal-icon);
  opacity: var(--close-muted-alpha);   /* iconos blancos al mismo gris que el texto de al lado (mismo token) */
}

.section-awake.is-enhanced .close {
  position: absolute;
  top: var(--close-top);
  left: 50%;
  padding-block: 0;
  translate: -50% 0;
}

.section-awake.is-enhanced .close__title {
  opacity: var(--c1, 1);
  transform: translateY(calc((1 - var(--c1, 1)) * 30px));   /* suben de abajo arriba, uno tras otro */
}

.section-awake.is-enhanced .close__button {
  transition: translate var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);   /* la opacidad la lleva el scroll: sin transición */
  opacity: var(--c2, 1);
  transform: translateY(calc((1 - var(--c2, 1)) * 30px));
}

.section-awake.is-enhanced .close__trust {
  opacity: var(--c3, 1);
  transform: translateY(calc((1 - var(--c3, 1)) * 30px));
}

@media (min-width: 1024px) {
  .close__seals {   /* escritorio: una fila, icono junto a la etiqueta (la captura) */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }

  .close__seal {
    flex-direction: row;
    gap: .6em;
    text-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .worlds__panel.is-entering {
    animation: none;
  }

  .worlds__indicator {
    transition: none;
  }
}

/* Stack tecnológico — sección clara tras el cierre de "El despertar" (mismo estilo de cabecera que "Lo que hacemos", sin eyebrow): cabecera, pestañas (una por herramienta) y una tarjeta con nombre, descriptor,
   etiquetas y desplegables. Con JS (.is-enhanced) las 5 tarjetas comparten celda y se funden al cambiar de pestaña; sin JS se ven apiladas y abiertas. */
.section-stack {
  padding-block: var(--what-pad-top) var(--stack-pad-bottom);
  overflow-x: clip;
  background: var(--color-light-bg);
  color: var(--color-light-text);
}

.section-stack__header {
  margin-bottom: var(--stack-gap-tabs);
}

/* Pestañas: en móvil caben en una fila con scroll lateral dentro de su caja (sin desbordar la página) */
.stack__tabs {
  overflow-x: auto;
  padding-inline: var(--page-margin);
  scrollbar-width: none;
}

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

.stack__tablist {
  position: relative;
  display: flex;
  width: max-content;
  margin-inline: auto;   /* centrada si cabe; si no, empieza a la izquierda y se desliza */
  border-bottom: 1px solid var(--color-light-line);
}

.stack__tab {
  flex: none;
  min-height: 2.75rem;
  padding: .5em var(--stack-tab-pad);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-stack-tab);
  letter-spacing: var(--ls-display);
  color: var(--color-light-muted);   /* más oscuro que el gris de la captura para cumplir AA (≥ 4,5:1) */
  cursor: pointer;
  transition: color .4s var(--ease-out);
}

.stack__tab:hover,
.stack__tab[aria-selected="true"] {
  color: var(--color-light-ink);
}

.stack__indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 1px;
  height: 2px;
  background: var(--color-light-ink);
  transform-origin: 0 50%;
  transform: translateX(calc(var(--ix, 0) * 1px)) scaleX(var(--iw, 0));
  transition: transform .6s var(--ease-out);
}

/* Tarjetas */
.stack__cards {
  display: grid;
  justify-items: center;
  margin-top: var(--stack-gap-cards);
  padding-inline: var(--page-margin);
}

.stack-card {
  align-self: start;
  width: var(--stack-card-w);
  padding: var(--stack-card-pad);
  border-radius: var(--stack-card-radius);
  background: var(--color-light-card);
}

.stack-card + .stack-card {
  margin-top: var(--space-6);   /* sin JS, apiladas */
}

.section-stack.is-enhanced .stack__cards > .stack-card {
  grid-area: 1 / 1;   /* todas en la misma celda: el alto lo marca la más alta y al cambiar de pestaña no salta lo de debajo */
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s .45s;
}

.section-stack.is-enhanced .stack__cards > .stack-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.stack-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25em 1.4vw;
  min-width: 0;
}

.stack-card__name {
  margin: 0;
  font-size: var(--fs-stack-name);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display);
  line-height: 1.1;
  color: var(--color-light-ink);
}

.stack-card__role {
  margin: 0;
  font-size: var(--fs-stack-text);
  color: var(--color-light-text);
}

.stack-card__descriptor {
  max-width: var(--stack-desc-w);
  margin: 1.6em 0 0;
  font-size: var(--fs-stack-text);
  line-height: 1.55;
  color: var(--color-light-text);
  text-wrap: pretty;
}

.stack-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.stack-card .accordion {
  margin-top: .75rem;
}

@media (prefers-reduced-motion: reduce) {
  .stack__indicator,
  .section-stack.is-enhanced .stack__cards > .stack-card {
    transition: none;
  }
}

/* Proyectos — galería de tarjetas sobre negro: cabecera con flechas y una pista con scroll horizontal nativo (dedo, trackpad, teclado) más arrastre con
   ratón (projects.js). Cada tarjeta es un enlace al cliente; al pasar el cursor (o al verla en táctil) cambia de foto. */
.section-projects {
  padding-block: var(--proj-pad) 2rem;   /* móvil: menos aire bajo las tarjetas (con el relleno superior del footer sumaban ≈ 120 px de negro) */
  overflow-x: clip;
  background: var(--color-bg);
}

.projects__header {
  position: relative;   /* ancla de las flechas */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--proj-head-gap);
  padding-inline: var(--page-margin);
  text-align: center;   /* centrado, como las cabeceras de las demás secciones */
}

.projects__title {
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}

.projects__nav {
  display: none;   /* en táctil se desliza con el dedo */
  gap: .75rem;
  position: absolute;   /* a la derecha, a la altura de la última línea del titular, sin descentrarlo */
  right: var(--page-margin);
  bottom: 0;
}

.projects__btn {
  display: grid;
  place-items: center;
  width: max(2.75rem, 3.3vw);
  height: max(2.75rem, 3.3vw);
  padding: 0;
  border: 1px solid rgb(244 244 244 / .3);
  border-radius: 50%;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color .25s var(--ease-out), opacity .25s var(--ease-out);
}

.projects__btn svg {
  width: 40%;
  height: auto;
}

.projects__btn:hover:not(:disabled) {
  background: rgb(244 244 244 / .1);
}

.projects__btn:disabled {
  opacity: .3;
  cursor: default;
}

.projects__scroller {
  overflow-x: auto;
  padding-inline: var(--page-margin);
  scroll-padding-inline: var(--page-margin);
  overscroll-behavior-x: contain;   /* el gesto lateral en el borde no navega hacia atrás */
  scrollbar-width: none;
  cursor: grab;
}

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

.projects__scroller.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.projects__track {
  display: flex;
  gap: var(--proj-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-card {
  position: relative;   /* contiene el texto .visually-hidden (absoluto): si no, escapa del recorte de la pista y ensancha la página */
  display: flex;
  flex-direction: column;
  width: var(--proj-card-w);
  height: 100%;
  overflow: hidden;
  border-radius: var(--proj-radius);
  background: var(--color-card-dark);
  color: var(--color-text);
  text-decoration: none;
}

.project-card__media {
  aspect-ratio: 5 / 6;
  overflow: hidden;
}

.project-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.project-card__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .55em;
  padding: clamp(.875rem, 1.1vw, 1.5rem) clamp(1rem, 1.4vw, 1.75rem) clamp(1rem, 1.4vw, 1.75rem);
}

.project-card__label {
  margin: 0;
  font-size: var(--fs-proj-label);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--color-proj-muted);
}

.project-card__title {
  margin: 0;
  font-size: var(--fs-proj-title);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .35em 0 0;
  padding: 0;
  list-style: none;
}

.project-card .tag {
  font-size: var(--fs-proj-chip);
}

@media (hover: hover) {
  .project-card__media img {
    transition: transform .5s ease;
  }

  .project-card:hover .project-card__media img,
  .project-card:focus-visible .project-card__media img,
  .project-card.is-cycling .project-card__media img {
    transform: scale(1.04);
  }
}

@media (pointer: coarse) {
  .projects__scroller {
    scroll-snap-type: x proximity;
  }

  .project-card-wrap {
    scroll-snap-align: start;
  }
}

@media (min-width: 1024px) {
  .section-projects {
    padding-bottom: var(--proj-pad);
  }

  .projects__nav {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card__media img,
  .projects__btn {
    transition: none;
  }
}