/* estilo.css — Concreto Abstracto
   Blanco, aire y la rampa de azules del isotipo. Nada más. */

@font-face {
  font-family: 'Inter var';
  src: url('marca/inter-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* la rampa del logotipo —paleta Medianoche—, de la placa exterior al núcleo */
  --a1: #e2eef7;
  --a2: #c0dbee;
  --a3: #92bedd;
  --a4: #457497;
  --a5: #082e4b;
  --a6: #041526;
  --tinta: #020610;

  --acento: #1a5fd6;          /* el azul de enlaces del manual */
  --gris: #5d6a74;
  --gris-claro: #8b97a0;
  --linea: #e7ecef;
  --papel: #ffffff;
  --papel-2: #f6f8fa;

  --borde: clamp(20px, 6vw, 96px);
  --fuente: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--a3); color: var(--tinta); }

/* ------------------------------------------------------------------ tipografía */

h1, h2, h3 { margin: 0; font-weight: 460; letter-spacing: -0.028em; line-height: 1.08; }

h1 { font-size: clamp(2.05rem, 5.1vw, 4.05rem); }
h2 { font-size: clamp(1.6rem, 3.3vw, 2.5rem); }
h3 { font-size: 1.03rem; font-weight: 520; letter-spacing: -0.014em; }

p { margin: 0; }

.rotulo {
  font-size: 0.685rem;
  font-weight: 540;
  letter-spacing: 0.175em;
  text-transform: uppercase;
  color: var(--a5);
}

.entrada {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.58;
  color: var(--gris);
  max-width: 47ch;
}

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

/* Una sola fila fija: la marca con su descriptor, el objetivo en el centro y
   el contacto. Sin franja aparte encima. */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px var(--borde);
  /* Más opaca que antes: al 0.82 en Chrome —donde el blur a veces no llega—
     la página se leía a través de la barra, como si asomara por arriba. */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
/* sin backdrop-filter no hay desenfoque que compense: barra sólida y listo */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera { background: #ffffff; }
}
.cabecera[data-pegada] { border-bottom-color: var(--linea); }

.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); }
.marca:hover { text-decoration: none; }
.marca img { width: 30px; height: 30px; display: block; }

.marca-texto { display: grid; gap: 1px; }
.marca-nombre { font-size: 0.94rem; font-weight: 500; letter-spacing: -0.015em; }
.marca-descriptor {
  font-size: 0.715rem;
  font-weight: 460;
  letter-spacing: 0.004em;
  color: var(--gris);
}

/* el objetivo, centrado en la fila */
.objetivo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 0.795rem;
  font-weight: 460;
  letter-spacing: -0.004em;
  color: var(--gris);
  white-space: nowrap;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 19px;
  border: 0;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.boton:hover { background: var(--a5); text-decoration: none; transform: translateY(-1px); }

/* ----------------------------------------------------------------- la escena */

/* Alto: de aquí sale el recorrido total de scroll. La fase de módulos pide
   sitio —con siete paradas y el imán, cada capa merece su tramo. */
.escena { position: relative; height: 680vh; }

.escena-fija {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.escena-fija canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.panel {
  position: absolute;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.panel a, .panel button { pointer-events: auto; }

/* el titular vive arriba, pegado a la cabecera; el núcleo negro espera debajo */
.panel-hero {
  left: var(--borde);
  right: var(--borde);
  top: clamp(92px, 12vh, 140px);
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
}
/* 24ch parte el titular en dos líneas parejas; a 21ch caían tres y "digital."
   se quedaba solo en la última. */
.panel-hero h1 { max-width: 24ch; }
.panel-hero .entrada { max-width: 54ch; }

/* la pista va anclada abajo: sobre el núcleo negro no se leería */
.pista {
  left: 0;
  right: 0;
  bottom: clamp(22px, 5vh, 46px);
  text-align: center;
  font-size: 0.68rem;
  font-weight: 540;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-claro);
}
.pista::before {
  content: '';
  display: block;
  width: 1px;
  height: 28px;
  margin: 0 auto 12px;
  background: linear-gradient(transparent, var(--gris-claro));
}

.panel-gira {
  left: var(--borde);
  bottom: 13vh;
  max-width: 34ch;
  display: grid;
  gap: 12px;
}

/* la lista de los siete módulos. En pantalla grande la lista es protagonista:
   tipografía de titular pequeño, aire entre filas y la ficha alineada al texto. */
.panel-modulos {
  left: var(--borde);
  top: 54%;
  transform: translateY(-50%);
  width: min(440px, 38vw);
  display: grid;
  gap: 24px;
}

.modulos { display: grid; }
/* Es un <button>, no un div: pinchar una capa lleva el scroll hasta ella. Aquí
   se le quita todo lo que trae de fábrica —fondo, borde, tipografía, alineación—
   para que siga leyéndose como una fila de lista y no como un control. */
.modulo {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  opacity: 0.24;
  transition: opacity 0.4s ease, color 0.2s ease;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.modulo:focus-visible { outline: 2px solid var(--a3); outline-offset: 4px; border-radius: 4px; }
.modulo[data-on] { opacity: 1; }
.modulo .ficha { width: 16px; height: 16px; border-radius: 5px; }
.modulo span {
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 470;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.modulo[data-on] span { color: var(--tinta); font-weight: 520; }

.modulo-desc {
  /* El hueco lo marca la descripción MÁS LARGA, no la media. Con 5.6em se
     quedaba corto: unas capas ocupaban 94 px y otras 119, y como el panel va
     centrado en vertical, esos 25 px de diferencia movían la lista 12 px arriba
     y abajo al cambiar de capa. Reservado el alto de la mayor, el panel mide
     siempre lo mismo y nada baila. */
  min-height: 7.7em;
  /* Sin regla de separación: la capa y su explicación son la misma cosa, y la
     línea las partía en dos bloques. El aire basta para separarlas, y menos que
     antes porque ya no hay que compensar el grosor de la raya. */
  padding-top: 9px;
  font-size: 0.98rem;
  line-height: 1.58;
  color: var(--gris);
  max-width: 44ch;
  transition: opacity 0.3s ease;
}
/* el claim de cada capa, en tinta y con su propia línea */
.modulo-desc strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 520;
  letter-spacing: -0.012em;
  color: var(--tinta);
}

/* fases: el motor escribe data-fase y el css decide qué se lee */
[data-fase='hero'] .panel-hero,
[data-fase='hero'] .pista { opacity: 1; }
[data-fase='abre'] .panel-hero { opacity: 0; transform: translateY(-18px); }
[data-fase='gira'] .panel-gira { opacity: 1; }
[data-fase='modulos'] .panel-modulos { opacity: 1; }

.progreso {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: calc(var(--p, 0) * 100%);
  background: var(--a4);
  z-index: 3;
}

/* ----------------------------------------------------------------- secciones */

section.bloque { padding: clamp(88px, 13vh, 160px) var(--borde); }

/* el azul de la marca entra en los titulares de sección: el flujo respira
   Medianoche también en la tipografía, no sólo en el isotipo */
section.bloque h2 { color: var(--a5); }

/* Aspas difusas (del laboratorio de capas, intensidad 0.8): tres formas de la
   rampa desenfocadas detrás del contenido, para que el papel no sea blanco
   puro. overflow-x clip y no hidden: recorta sin crear zona de scroll. */
#proposito, #proceso, #contacto { position: relative; overflow-x: clip; }
#proposito::before, #proceso::before, #contacto::before {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 120px;
  filter: blur(72px);
  pointer-events: none;
}
/* --par lo pone el JS con el scroll (−1..1): las aspas derivan más despacio
   que la página y giran unos grados — el parallax. Sin JS, quietas en 0. */
#proposito::before {
  width: min(52vw, 640px); height: min(36vw, 420px);
  left: -10%; top: 6%;
  background: var(--a2); opacity: 0.44;
  transform: translateY(calc(var(--par, 0) * -70px)) rotate(calc(-26deg + var(--par, 0) * 7deg));
}
#proceso::before {
  width: min(46vw, 560px); height: min(40vw, 470px);
  right: -12%; top: 12%;
  background: var(--a3); opacity: 0.3;
  transform: translateY(calc(var(--par, 0) * -55px)) rotate(calc(16deg - var(--par, 0) * 6deg));
}
#contacto::before {
  width: min(60vw, 720px); height: min(30vw, 360px);
  left: 50%; bottom: 4%;
  background: var(--a2); opacity: 0.36;
  transform: translateX(-50%) translateY(calc(var(--par, 0) * -45px)) rotate(calc(-12deg + var(--par, 0) * 5deg));
}

.encabezado { display: grid; gap: 16px; max-width: 62ch; margin-bottom: clamp(40px, 6vh, 68px); }

/* el propósito: tres tamaños decrecientes —declaración, desarrollo, remate—
   para que no pese como un solo bloque. Y menos padding abajo: la sección de
   servicios llega justo después, con su separador. */
.statement { display: grid; gap: clamp(12px, 2vh, 20px); }
.bloque.statement { padding-bottom: clamp(52px, 8vh, 88px); }
/* Los proyectos cerraban con una línea sobre el diseño; sin ella, el padding de
   sección entero dejaba 208 px de blanco por debajo. Se recorta para que los
   proyectos y la sección que venga después se hablen. */
#proyectos { padding-bottom: clamp(52px, 8vh, 88px); }
.statement-texto {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 460;
  letter-spacing: -0.028em;
  line-height: 1.16;
  max-width: 26ch;
}
.statement-medio {
  font-size: clamp(1.08rem, 1.9vw, 1.45rem);
  font-weight: 460;
  letter-spacing: -0.018em;
  line-height: 1.35;
  color: var(--tinta);
  max-width: 38ch;
}
.statement-remate {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gris);
  max-width: 52ch;
}
.statement-remate strong { color: var(--tinta); font-weight: 520; }

/* servicios pega con el propósito: separador, medio padding y encabezado corto */
#capacidades { border-top: 1px solid var(--linea); padding-top: clamp(44px, 7vh, 72px); }
#capacidades .encabezado { margin-bottom: clamp(24px, 4vh, 40px); }

/* servicios: título y claim, con el detalle en un panel que se despliega al
   posar el ratón SUPERPUESTO a la rejilla — nada se mueve de su sitio.
   Sin tarjetas en reposo: un filete arriba y aire, como un índice de manual. */
.capacidades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vh, 34px) clamp(22px, 2.6vw, 38px);
}
.capacidad {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  outline: none;
}
.capacidad h3 { font-size: 1.08rem; }
.capacidad p { font-size: 0.92rem; line-height: 1.55; color: var(--gris); }
/* La descripción, según el aparato: donde hay dedo va siempre visible, en
   flujo; donde hay ratón se convierte en la tarjeta que se despliega al
   posar, flotando sobre la rejilla sin desplazar nada. El corte va por
   capacidad (hover), no por ancho: una tablet nunca se queda sin texto. */
@media (hover: hover) {
  /* la capa bajo el cursor se aclara aunque no sea la activa: así se ve que
     la lista se puede pinchar sin necesidad de decirlo */
  .modulo:hover { opacity: 0.55; }
  .modulo[data-on]:hover { opacity: 1; }
  .capacidad-desc {
    position: absolute;
    top: calc(100% + 2px);
    left: -15px;
    right: -15px;
    z-index: 6;
    padding: 13px 15px 15px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 12px;
    box-shadow: 0 14px 40px -22px rgba(2, 6, 16, 0.28);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .capacidad:hover .capacidad-desc,
  .capacidad:focus-visible .capacidad-desc { opacity: 1; transform: none; }
}

/* el proceso: seis pasos en fila, numerados */
.proceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(22px, 2.6vw, 38px) clamp(20px, 2.4vw, 34px);
}
.paso {
  display: grid;
  gap: 7px;
  align-content: start;
  padding-top: 15px;
  border-top: 1px solid var(--linea);
}
.paso-num {
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.08em;
  color: var(--a4);
}
.paso h3 { font-size: 1.02rem; }
.paso p { font-size: 0.88rem; line-height: 1.5; color: var(--gris); }

/* el estado de cada proyecto: entregado o vivo en producción */
.tarjeta-cima { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gris);
  white-space: nowrap;
}
.estado i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gris-claro);
}
/* cada estado, su punto. El rojo es el mismo de la cabecera: en esta casa el
   punto rojo significa que algo está encendido, no que algo va mal. */
.estado[data-estado='produccion'] i { background: #2f9e63; }
.estado[data-estado='entregado'] i { background: #e5352b; }

/* el nombre de la empresa, compuesto encima del sector */
.tarjeta-empresa { font-size: 1.18rem; font-weight: 520; letter-spacing: -0.022em; }

/* la tarjeta con web pública es un enlace entero: tinta normal, sin subrayado,
   y una flecha discreta junto al nombre que se enciende al pasar */
a.tarjeta { color: inherit; }
a.tarjeta:hover { text-decoration: none; }
.tarjeta-ir { color: var(--gris-claro); font-weight: 460; transition: color 0.2s; }
a.tarjeta:hover .tarjeta-ir { color: var(--a4); }

/* saas propios: piezas sobre papel gris, distintas de los proyectos entregados */
/* 280 y no 238: con 238 caben cuatro columnas en escritorio ancho, y a esa
   anchura el rótulo en versalitas («GIMNASIOS Y CENTROS DEPORTIVOS») se parte
   en dos líneas. Con 280 salen tres columnas, que además dejan las seis piezas
   en un 3×2 limpio en vez de cuatro arriba y dos sueltas debajo. */
.saas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.saas-item {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 16px;
  background: var(--papel-2);
}
.saas-item .saas-tag {
  font-size: 0.66rem;
  font-weight: 540;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--a4);
}
/* la pieza con landing viva es un enlace entero, con el mismo trato que las
   tarjetas de proyecto: flecha discreta que se enciende y un leve levantar */
a.saas-item { color: inherit; transition: background 0.25s, box-shadow 0.25s, transform 0.25s; }
a.saas-item:hover {
  text-decoration: none;
  background: var(--papel);
  box-shadow: 0 14px 40px -22px rgba(0, 55, 82, 0.28);
  transform: translateY(-2px);
}
/* la marca del producto, al lado de su nombre. Pequeña a propósito: no compite
   con el nombre, sólo enseña que ese mundo ya tiene cara */
.saas-logo { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }
.saas-ir { color: var(--gris-claro); font-weight: 460; transition: color 0.2s; }
a.saas-item:hover .saas-ir { color: var(--a4); }

.saas-item h3 { font-size: 1.06rem; }
/* «En desarrollo» ocupa el sitio del nombre, pero no es un nombre: va en gris y
   sin el peso de una marca, para que a un golpe de vista se distinga cuál de
   las seis ya existe y cuál está en camino. */
.saas-item h3[data-espera] { color: var(--gris); font-weight: 460; }
.saas-item p { font-size: 0.9rem; line-height: 1.55; color: var(--gris); }

/* proyectos: fichas en carrusel — deslizan en horizontal y encajan solas */
.carrusel { display: grid; gap: 20px; }

.carrusel-pista {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 4px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista:focus-visible { outline: 2px solid var(--a3); outline-offset: 4px; border-radius: 20px; }

.carrusel-mandos { display: flex; gap: 8px; }

.flecha {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}
.flecha:hover:not(:disabled) { background: var(--papel-2); border-color: #d5dde2; }
.flecha:disabled { opacity: 0.3; cursor: default; }

.tarjeta {
  flex: none;
  /* Anchas a propósito. Con tres proyectos, si caben justas el carrusel no
     tiene nada que deslizar: así siempre asoma media ficha por la derecha. */
  width: min(430px, 82vw);
  scroll-snap-align: start;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--papel);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.tarjeta:hover {
  border-color: #d7e0e6;
  box-shadow: 0 14px 40px -22px rgba(0, 55, 82, 0.28);
  transform: translateY(-2px);
}

/* los logotipos no comparten proporción: caja de alto fijo y que encajen dentro */
.tarjeta-logo {
  display: flex;
  align-items: center;
  height: 52px;
  margin-bottom: 6px;
}
.tarjeta-logo img {
  max-height: 100%;
  max-width: min(100%, 190px);
  width: auto;
  object-fit: contain;
  object-position: left center;
  transform-origin: left center;
}

.tarjeta-sector {
  font-size: 0.685rem;
  font-weight: 540;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a5);
}
.tarjeta-que { font-size: 0.95rem; line-height: 1.55; color: var(--gris); }
.tarjeta-mods {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: 0.8rem;
  color: var(--gris-claro);
}

/* el diseño se menciona, no ocupa sección */
.mencion-diseno {
  margin-top: clamp(26px, 4vh, 40px);
  font-size: 0.9rem;
  color: var(--gris-claro);
  max-width: 60ch;
}

/* El relevo del pie: el mismo objetivo, para cuando en la cabecera no cabe. */
.objetivo-pie {
  display: none;
  align-items: baseline;
  gap: 9px;
  max-width: 46ch;
  font-size: 0.795rem;
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--gris);
}

.punto {
  flex: none;
  position: relative;
  width: 7px;
  height: 7px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: #e5352b;
}
.punto::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid #e5352b;
  opacity: 0;
  animation: ca-latido 2.4s ease-out infinite;
}
@keyframes ca-latido {
  0% { transform: scale(0.55); opacity: 0.85; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

/* cierre: una pregunta y un botón */
.cierre {
  display: grid;
  gap: clamp(24px, 4vh, 40px);
  justify-items: center;
  text-align: center;
}
.cierre h2 { max-width: 24ch; }
.boton.grande { padding: 15px 34px; font-size: 1rem; border-radius: 999px; }

/* el correo y el móvil, a la vista de quien quiera hablar */
/* Correo y móvil. Van en flex con hueco en vez de separados por un punto: así,
   cuando no caben en una línea, caen uno debajo del otro enteros —un número de
   teléfono partido por la mitad no se lee. */
.cierre-datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  font-size: 0.95rem;
  color: var(--gris);
}
.cierre-datos a { color: var(--tinta); font-weight: 500; white-space: nowrap; }
.cierre-datos a:hover { color: var(--acento); }

/* pie */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 30px var(--borde);
  border-top: 1px solid var(--linea);
  font-size: 0.8rem;
  color: var(--gris-claro);
}
footer .marca img { width: 20px; height: 20px; }
footer .marca span { font-size: 0.8rem; font-weight: 460; color: var(--gris-claro); }

/* ------------------------------------------------------------------- estrecho */

/* El objetivo es largo: en cuanto deja de caber entre la marca y el contacto,
   se va al pie. Uno de los dos se ve siempre, nunca los dos. */
@media (max-width: 1120px) {
  .objetivo { display: none; }
  .objetivo-pie { display: flex; flex-basis: 100%; order: 3; }
}

@media (max-width: 1000px) {
  .capacidades { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  /* 640vh dejaban 540 de recorrido; como los módulos ocupan el 40 % final, cada
     capa disponía de unos 250 px de scroll. Un impulso normal en un móvil viaja
     bastante más que eso, así que un solo gesto se llevaba por delante tres o
     cuatro capas. A 880vh cada una tiene ~365 px y el dedo avanza de una en una
     o de dos en dos, que es lo que se puede seguir con la vista. */
  .escena { height: 880vh; }

  /* en estrecho, una columna compacta; la descripción ya va en flujo */
  .capacidades { grid-template-columns: 1fr; gap: 18px; }
  .capacidad { padding-top: 13px; gap: 5px; }
  #capacidades { padding-top: clamp(36px, 6vh, 52px); }
  #capacidades .encabezado { margin-bottom: 20px; }
  /* El carrusel se deshace en estrecho. Escondía cuatro de los cinco proyectos
     detrás de un barrido, y la tarjeta —pensada para 430 px— se estiraba a 600
     de alto con el hueco muerto dentro. La prueba de que esto ya funciona es lo
     que más pesa en una landing a la que se llega desde un correo: aquí se ven
     los cinco de golpe, en filas, sin que haya que tocar nada. */
  .carrusel-pista {
    display: grid;
    /* `1fr` y no `auto`: todas las filas miden lo que la más alta. Con auto cada
       tarjeta se ajustaba a su texto y salían de 144, 161 y 180 px —la que no
       lleva contador de módulos se quedaba corta— y la columna parecía
       descuadrada. */
    grid-auto-rows: 1fr;
    gap: 12px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  .carrusel-mandos { display: none; }
  .tarjeta {
    width: auto;
    grid-template-columns: 42px 1fr;
    column-gap: 14px;
    row-gap: 7px;
    align-content: start;
    padding: 16px 18px;
    border-radius: 14px;
  }
  /* el logotipo pasa a ser una viñeta a la izquierda del nombre */
  .tarjeta-logo { grid-column: 1; grid-row: 1 / span 2; height: 42px; }
  .tarjeta-empresa { grid-column: 2; font-size: 1.06rem; align-self: end; }
  .tarjeta-cima { grid-column: 2; align-self: start; }
  .tarjeta-que,
  .tarjeta-mods { grid-column: 1 / -1; }
  .tarjeta-sector { font-size: 0.62rem; }
  .estado { padding: 3px 9px; font-size: 0.66rem; }

  /* El proceso es una secuencia, y en dos columnas dejaba de leerse como tal.
     A 393 px caían dos columnas de 163: el texto se partía en tiras de cinco
     líneas, el orden zigzagueaba (01→02 en horizontal, no hacia abajo) y el
     paso 07 se quedaba huérfano abajo. En estrecho pasa a ser un hilo vertical
     —una columna, el número de nodo y una línea que cose un paso con el
     siguiente—, que es lo que un proceso es. */
  .proceso { grid-template-columns: 1fr; gap: 0; }
  .paso {
    grid-template-columns: 22px 1fr;
    column-gap: 13px;
    row-gap: 3px;
    border-top: none;
    padding: 0 0 24px;
    position: relative;
  }
  /* el hilo nace bajo el número y baja a buscar el siguiente */
  .paso::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 19px;
    bottom: 4px;
    width: 1px;
    background: var(--linea);
  }
  .paso:last-child { padding-bottom: 0; }
  .paso:last-child::before { display: none; }
  .paso-num { grid-column: 1; grid-row: 1; line-height: 1.15; }
  .paso h3 { grid-column: 2; grid-row: 1; }
  .paso p { grid-column: 2; grid-row: 2; }

  /* El titular sigue centrado, pero baja de cuerpo. A 32,8 px caía en cuatro
     líneas de 236 → 211 → 199 → 173 px —cada una más corta que la anterior— y
     centradas dibujaban un embudo. El tamaño lo manda la frase entera, no la
     primera línea: a 27 px cabe «Exponenciamos proyectos» pero el resto se
     parte en tres (322/216/143, aún peor); a 24 px entra en dos líneas de
     286 y 325 px, casi iguales. 6.4vw da esos 24 px a 375 y sube con la
     pantalla, que es lo que mantiene las dos líneas en móviles más anchos. */
  .panel-hero { top: clamp(84px, 11vh, 118px); }
  .panel-hero h1 { font-size: clamp(1.25rem, 6.4vw, 2.05rem); max-width: none; }
  .panel-hero .entrada { max-width: none; }
  .panel-gira { bottom: 9vh; max-width: none; right: var(--borde); }

  /* La lista queda pegada bajo la pieza 3D y NO se mueve: la descripción
     tiene su hueco reservado debajo —si un texto es más largo, crece dentro
     de su sitio en vez de empujar las categorías hacia arriba. */
  .panel-modulos {
    top: auto;
    bottom: 8vh;
    left: var(--borde);
    right: var(--borde);
    width: auto;
    transform: none;
    gap: 10px;
  }
  /* Las siete capas dejan de listarse a la vez. En dos columnas eran impares:
     el agente orquestador se quedaba solo en la última fila, y leer siete
     nombres apagados a la vez no dice qué estás mirando. Ahora se ven de una en
     una, como una baraja que se reparte: la capa activa asoma desde abajo
     mientras la anterior se retira. Las siete se apilan en el mismo sitio, así
     que el bloque no cambia de alto y nada salta al pasar de una a otra. */
  /* Ventana de tres capas: la activa en el centro y las vecinas asomando
     apagadas, arriba y abajo. Una sola capa dejaba al lector sin saber de
     dónde venía ni cuánto faltaba; las siete a la vez eran un muro impar con el
     agente huérfano. La tira entera se desplaza una fila por capa, así que el
     movimiento explica la secuencia sin que nada aparezca de la nada.
     El desplazamiento sale de --k, que se escribe desde el data-modulo del
     motor: siete reglas de una línea y ni un renglón de JS. */
  .modulos {
    --fila: 3em;
    --k: 0;
    display: block;
    position: relative;
    height: calc(var(--fila) * 3);
    overflow: hidden;
    /* las vecinas se disuelven en los bordes en vez de cortarse en seco */
    -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
            mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  }
  .modulo {
    height: var(--fila);
    padding: 0;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    align-items: center;
    opacity: 0.17;
    transform: translateY(calc((1 - var(--k)) * var(--fila)));
    transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
    /* se pueden pinchar: las que quedan fuera de la ventana las recorta el
       overflow del contenedor, así que no hay clics a ciegas */
    pointer-events: auto;
  }
  .modulo[data-on] { opacity: 1; }
  [data-modulo='0'] .modulos { --k: 0; }
  [data-modulo='1'] .modulos { --k: 1; }
  [data-modulo='2'] .modulos { --k: 2; }
  [data-modulo='3'] .modulos { --k: 3; }
  [data-modulo='4'] .modulos { --k: 4; }
  [data-modulo='5'] .modulos { --k: 5; }
  [data-modulo='6'] .modulos { --k: 6; }

  /* la ficha crece: con una sola capa en pantalla, el color ES la capa */
  .modulo .ficha { width: 26px; height: 26px; border-radius: 8px; }
  .modulo span {
    font-size: 1.12rem;
    font-weight: 520;
    letter-spacing: -0.016em;
  }
  .modulo-desc { height: 7.8em; min-height: 0; overflow: hidden; font-size: 0.84rem; padding-top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .panel { transition-duration: 0.01s; }
  .punto::after { animation: none; }
}