/* ============================================================================
   KAORDIC · HOJA DE ESTILOS
   ----------------------------------------------------------------------------
   Los colores, tipografías, escalas y forma viven en tokens.css.
   Aquí está la construcción de los componentes.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. BASE - */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--k-nav-h) + 2rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* background-color, no el atajo background: el atajo borraría el mosaico de
     grano que se define más abajo. Misma razón en .section--alt y .footer. */
  background-color: var(--k-bg);
  color: var(--k-text-muted);
  font-family: var(--k-font);
  font-size: var(--k-fs-body);
  /* 400, no 300. Outfit Light sobre negro pierde el trazo: el halo del texto
     claro sobre fondo oscuro se come el asta y a 16px la lectura se vuelve
     trabajosa. El peso 400 ya se descarga, así que no cuesta nada. */
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--k-text);
  font-family: var(--k-font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
}

h1 { font-size: var(--k-fs-display); }
h2 { font-size: var(--k-fs-h2); line-height: 1.02; }
h3 { font-size: var(--k-fs-h3); line-height: 1.1; letter-spacing: -.025em; }
/* 1.35 y no 1.25: el h4 es el único titular que parte en dos líneas de verdad
   ("Visual, conversacional, con movimiento y accionable"), y a 1.25 las dos
   líneas se tocan. Los h1 a h3 se quedan apretados a propósito. */
h4 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; }

p { margin: 0; }

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

:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 50%; top: .75rem;
  transform: translate(-50%, -250%);
  z-index: 300;
  padding: .7rem 1.4rem;
  background: var(--k-accent); color: var(--k-accent-ink);
  font-family: var(--k-font-display); font-size: var(--k-fs-tag); font-weight: 600;
  clip-path: var(--k-clip);
  transition: transform var(--k-t-fast);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.sprite { display: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- 2. TEXTURA GLOBAL ---- */

/* Grano. Va como fondo de las superficies, NO como capa encima del contenido.
   Dos motivos: una capa a pantalla completa por encima baja el contraste de
   todo el texto, y un feTurbulence de SVG en vivo llega a congelar el
   renderer. El PNG lleva su propia opacidad en el canal alfa. */
body,
.section--alt,
.footer {
  background-image: url('../img/grain.png');
  background-size: 128px 128px;
}

/* ------------------------------------------------------ 3. LAYOUT BASE ---- */

.container {
  width: min(var(--k-container), 100% - (var(--k-gutter) * 2));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.section { padding-block: var(--k-section-y); position: relative; z-index: 2; }
.section--alt { background-color: rgba(10, 13, 18, .64); }

/* Línea de acento que abre cada sección: reemplaza al antetítulo suelto */
.section--alt::before,
.section--rule::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%, var(--k-line-2) 18%, var(--k-line-2) 82%, transparent 100%);
}

.section__intro { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section__intro--wide { width: 100%; max-width: none; }
.section__intro p { margin-top: 1.3rem; font-size: var(--k-fs-lead); max-width: 38rem; }
.section__intro--wide p { width: 100%; max-width: none; }

/* --- FONDO DE SECCIÓN -------------------------------------------------------
   Fotografía muy tenue por debajo del contenido, para que las secciones con
   poco material no se lean como planchas de negro. La imagen ya viene
   oscurecida desde el pipeline; aquí sólo se funden los bordes.

   Se usa así:  <section class="section section--bg" style="--bg: url(...)">
   Va en ::after con z-index -1 y NO en position fixed: una capa fija a
   pantalla completa se repinta en cada scroll y bloquea el hilo principal.   */

.section--bg { isolation: isolate; }
.section--bg::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--bg);
  background-size: cover;
  background-position: var(--bg-pos, center);
  opacity: var(--bg-opacity, .5);
  pointer-events: none;
  /* Los bordes se disuelven para que no se vea el corte de la fotografía. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
}

/* ------------------------------------------------------- 4. ETIQUETA ------ */
/* Antetítulo de sección: una línea corta de acento y el texto en caja normal.
   Nada de versales con tracking abierto.                                     */

.tag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--k-font-display);
  font-size: var(--k-fs-tag);
  font-weight: 500;
  letter-spacing: var(--k-track-tag);
  color: var(--k-accent);
}
.tag::before {
  content: '';
  width: 1.75rem; height: 1px;
  background: currentColor;
  opacity: .8;
}
.tag--dim { color: var(--k-text-dim); }

/* ------------------------------------------------------------ 5. ICONO ---- */

.icon {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: butt; stroke-linejoin: miter;
}
svg[hidden] { display: none; }   /* [hidden] del navegador no cubre a SVG */

/* --------------------------------------------------------- 6. BOTONES ---- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  font-family: var(--k-font-display);
  font-size: var(--k-fs-ui);
  font-weight: 600;
  letter-spacing: var(--k-track-tag);
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  clip-path: var(--k-clip);
  transition: background var(--k-t-fast), color var(--k-t-fast),
              transform var(--k-t-fast);
}
.btn .icon { width: 1rem; height: 1rem; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--k-accent); color: var(--k-accent-ink); }
.btn--primary:hover { background: var(--k-accent-hi); }

/* El botón fantasma dibuja su borde con un fondo recortado, porque clip-path
   recorta cualquier border real. */
.btn--ghost { background: var(--k-line-2); color: var(--k-text); }
.btn--ghost::before {
  content: '';
  position: absolute; inset: 1px;
  background: var(--k-bg);
  clip-path: var(--k-clip);
  transition: background var(--k-t-fast);
  z-index: -1;
}
.btn--ghost:hover { background: var(--k-accent); }
.btn--ghost:hover::before { background: var(--k-surface-2); }

.btn--sm { padding: .72rem 1.25rem; }

/* Enlace con flecha. El relleno vertical no es decorativo: sin él la zona
   pulsable se queda en 24px de alto, muy por debajo del mínimo táctil. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  padding-block: .65rem;
  gap: .55rem;
  font-family: var(--k-font-display);
  font-size: var(--k-fs-tag);
  font-weight: 600;
  letter-spacing: var(--k-track-tag);
  color: var(--k-accent);
}
.link-arrow .icon { width: .95rem; height: .95rem; transition: transform var(--k-t-fast); }
.link-arrow:hover .icon { transform: translate(3px, -3px); }

/* ----------------------------------------------------- 7. MARCAS HUD ----- */
/* Dos esquinas en escuadra por tarjeta. Se activan al pasar el cursor:
   quietas son estructura, en hover son foco.                                */

.hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hud::before, .hud::after {
  content: '';
  position: absolute;
  width: .9rem; height: .9rem;
  border-color: var(--k-accent);
  opacity: 0;
  transition: opacity var(--k-t-base), width var(--k-t-base), height var(--k-t-base);
}
.hud::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.hud::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

/* data-active lo escribe el JS cuando la tarjeta cruza el centro de la
   pantalla en un dispositivo sin cursor. Sin esto, TODA la vida visual del
   sitio (esquinas, zoom de foto, encendido de los peldaños) dependía de
   :hover, así que en móvil la página quedaba completamente estática una vez
   terminaban las entradas. */
.has-hud:hover .hud::before,
.has-hud:hover .hud::after,
.has-hud:focus-visible .hud::before,
.has-hud:focus-visible .hud::after,
.has-hud[data-active='true'] .hud::before,
.has-hud[data-active='true'] .hud::after { opacity: 1; width: 1.5rem; height: 1.5rem; }

/* Foco que sigue al cursor. Las coordenadas las escribe el JS en --mx/--my.
   Usa ::before y no ::after porque las celdas con foto ya gastan su ::after
   en el velo de contraste, y un elemento sólo tiene un ::after. */
.spot::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 50%),
              var(--k-accent-12), transparent 70%);
  transition: opacity var(--k-t-base);
}
.spot:hover::before { opacity: 1; }

/* ------------------------------------------------------ 8. NAVEGACIÓN ---- */

.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--k-nav-h);
  background-color: var(--k-bg);
  background: rgba(7, 9, 12, .55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: background var(--k-t-base);
}
.nav::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--k-line-2) 25%, var(--k-line-2) 75%, transparent);
  opacity: 0;
  transition: opacity var(--k-t-base);
}
.nav[data-stuck='true'] { background: rgba(7, 9, 12, .9); }
.nav[data-stuck='true']::after { opacity: 1; }

.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
/* Relleno vertical para que el logotipo, que mide 21px de alto, tenga una
   zona pulsable de 44px como el resto de la interfaz. */
.nav__logo { display: flex; align-items: center; padding-block: .72rem; }
.nav__logo img { width: 132px; height: auto; }

.nav__menu { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.4rem); }
.nav__menu a {
  position: relative;
  padding: .6rem 0 .6rem .95rem;
  font-family: var(--k-font-display);
  font-size: var(--k-fs-ui);
  font-weight: 500;
  letter-spacing: var(--k-track-tag);
  color: var(--k-text-dim);
  transition: color var(--k-t-fast);
}
.nav__menu a:hover { color: var(--k-text); }

/* Marcador de sección activa: un corchete, no un subrayado. */
.nav__menu a::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: .34rem; height: .34rem;
  border-left: 1px solid var(--k-accent);
  border-top: 1px solid var(--k-accent);
  transform: translateY(-50%) scale(0);
  transition: transform var(--k-t-base);
}
.nav__menu a[aria-current='true'] { color: var(--k-accent); }
.nav__menu a[aria-current='true']::before { transform: translateY(-50%) scale(1); }

.nav__actions { display: flex; align-items: center; gap: .6rem; }

/* Etiqueta corta del CTA de cabecera, sólo en pantallas estrechas. */
.nav__cta-corto { display: none; }

.nav__toggle {
  display: none;
  padding: .55rem;
  background: transparent;
  border: 1px solid var(--k-line-2);
  color: var(--k-text);
  cursor: pointer;
}

.nav__panel { display: none; }

/* ------------------------------------------------------------- 9. HERO --- */

.hero {
  position: relative;
  z-index: 2;
  min-height: clamp(620px, calc(100svh - var(--k-nav-h)), 820px);
  display: grid;
  isolation: isolate;
  overflow: hidden;
}

/* La red ocupa todo el hero. Las caras son polígonos rellenos; las ranuras
   viven en una segunda capa SVG para que sólo ellas puedan iluminarse. */
/* El óvalo elimina el ruido de las ranuras detrás del logo y el titular sin
   tapar las caras. Su alpha deja visible la profundidad de la red. */
.site-network {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--k-bg);
  background-image:
    radial-gradient(ellipse at 50% 24%, rgba(11, 180, 255, .045), transparent 58%),
    url('../img/grain.png');
  background-size: cover, 128px 128px;
}

.site-network svg {
  display: block;
  width: 100%; height: 100%;
  overflow: visible;
}
.site-network__faces path,
.site-network__faces use {
  fill: var(--k-hex-face);
  stroke: none;
}
.site-network__faces path:nth-child(3n + 1),
.site-network__faces use:nth-child(3n + 1) { fill: var(--k-hex-face-alt); }
.site-network__faces path:nth-child(5n + 2),
.site-network__faces use:nth-child(5n + 2) { fill: rgba(24, 31, 40, .72); }

.site-network__seams path,
.site-network__seams use {
  fill: none;
  stroke: var(--k-hex-seam);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .2;
  transition: stroke .7s var(--k-ease), stroke-width .7s var(--k-ease),
              opacity .7s var(--k-ease), filter .7s var(--k-ease);
}
.site-network__seams [data-network-active='true'] path,
.site-network__seams [data-network-active='true'] use {
  stroke: var(--k-hex-seam-active);
  stroke-width: 1.8;
  opacity: var(--k-hex-seam-active-opacity);
  filter: drop-shadow(0 0 5px rgba(11, 180, 255, .55));
  transition-duration: .7s;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(7, 9, 12, .97) 0%,
              rgba(7, 9, 12, .78) 46%,
              transparent 82%);
}

.hero__inner {
  min-height: inherit;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.hero__copy {
  width: min(100%, 800px);
  display: grid;
  justify-items: center;
  text-align: center;
}
.hero__logo {
  width: clamp(340px, 58vw, 780px);
  height: auto;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .78))
          drop-shadow(0 0 24px rgba(215, 217, 216, .16));
}
.hero h1 {
  max-width: 760px;
  color: var(--k-text);
  font-size: clamp(1.4rem, 3.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: .015em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .86);
}
.hero__subtitle {
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  color: var(--k-text);
  font-family: var(--k-font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .84);
}

/* ------------------------------------------------- 10. RIEL DE PILARES --- */

.pillars__rail {
  position: sticky; top: var(--k-nav-h); z-index: 50;
  display: flex;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  /* Fondo opaco en vez de backdrop-filter: dos capas con desenfoque de fondo
     a la vez (esta y el header) cuestan caro y aquí no aporta nada. */
  background: var(--k-bg-alt);
  border-top: 1px solid var(--k-line);
  border-bottom: 1px solid var(--k-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.pillars__rail::-webkit-scrollbar { display: none; }

.pillars__rail a {
  position: relative;
  flex: 1;
  padding: 1.05rem 1.2rem;
  font-family: var(--k-font-display);
  font-size: var(--k-fs-ui);
  font-weight: 500;
  letter-spacing: var(--k-track-tag);
  text-align: center;
  white-space: nowrap;
  color: var(--k-text-dim);
  transition: color var(--k-t-fast), background var(--k-t-fast);
}
.pillars__rail a:hover { color: var(--k-text); background: rgba(146, 178, 214, .04); }
.pillars__rail a[aria-current='true'] { color: var(--k-accent); }

/* Indicador que se desliza entre pestañas. Lo posiciona el JS.
   3px y con resplandor: a 2px planos casi no se leía, y es uno de los pocos
   sitios donde el acento marca estado a lo largo de la página. */
.pillars__mark {
  position: absolute; left: 0; bottom: 0;
  height: 3px; width: 0;
  background: var(--k-accent);
  box-shadow: 0 0 12px var(--k-accent-55);
  transform: translateX(var(--mark-x, 0));
  transition: transform var(--k-t-base), width var(--k-t-base);
  pointer-events: none;
}

/* ---------------------------------------------------------- 12. PILAR ---- */

.pillar { scroll-margin-top: calc(var(--k-nav-h) + 6rem); }
.pillar + .pillar { margin-top: clamp(3.5rem, 7vw, 6rem); }

.pillar__head { width: 100%; max-width: none; margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.pillar__head h3 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-top: 1.1rem; }
.pillar__head p { width: 100%; margin-top: 1.2rem; font-size: var(--k-fs-lead); }
.pillar__marker {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0 !important;
  color: var(--k-accent);
  font-size: 1rem !important;
  line-height: 1;
}
.pillar__marker .icon { width: 1.75rem; height: 1.75rem; }

/* --------------------------------------------- 13. ESCALERA IA FÍSICA ---- */

.ladder { position: relative; }

/* Riel que conecta los niveles. Se dibuja de arriba a abajo al entrar. */
.ladder__rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  /* 2px: a 1px la progresión de gris a acento no se leía, y es lo único que
     da color a los mil píxeles de esta sección. */
  width: 2px;
  background: linear-gradient(180deg, var(--k-line-2) 0%, var(--k-accent) 100%);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.4s var(--k-ease-hud);
}
.ladder[data-shown='true'] .ladder__rail { transform: scaleY(1); }

.rung {
  position: relative;
  display: grid;
  /* 20rem y separación menor: con 24rem y hasta 4rem de hueco quedaba una
     franja vacía de unos 300px en el centro y se leía como dos listas
     independientes en vez de como cinco niveles de una misma escalera. */
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  row-gap: .5rem;
  padding: 1.6rem 1.5rem 1.6rem 4.5rem;
  border-bottom: 1px solid var(--k-line);
  transition: background var(--k-t-base);
}
.rung:hover { background: rgba(146, 178, 214, .035); }
.rung:last-child { border-bottom: 0; }

/* El nodo se apoya sobre el riel y se enciende con el nivel. */
.rung__node {
  position: absolute;
  left: 0; top: 50%;
  width: 2.2rem; height: 1px;
  background: var(--k-line-2);
  transform: translateY(-50%);
  transition: background var(--k-t-base);
}
.rung__node::before {
  content: '';
  position: absolute; left: -3px; top: 50%;
  width: 7px; height: 7px;
  background: var(--k-bg);
  border: 1px solid var(--k-line-2);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color var(--k-t-base), background var(--k-t-base);
}
.rung:hover .rung__node,
.rung[data-active='true'] .rung__node { background: var(--k-accent); }
.rung:hover .rung__node::before,
.rung[data-active='true'] .rung__node::before { border-color: var(--k-accent); background: var(--k-accent); }

.rung__title { display: flex; align-items: center; gap: .9rem; }
.rung__title .icon { width: 1.65rem; height: 1.65rem; color: var(--k-text-dim); transition: color var(--k-t-base); }
.rung__title h4 { font-size: 1.15rem; }

.rung__desc { font-size: var(--k-fs-small); max-width: 34rem; }

/* La intensidad del acento sube peldaño a peldaño: se ve que cada nivel
   suma al anterior sin necesidad de numerarlos. */
.rung:nth-child(2) .rung__title .icon { color: color-mix(in srgb, var(--k-accent) 22%, var(--k-text-dim)); }
.rung:nth-child(3) .rung__title .icon { color: color-mix(in srgb, var(--k-accent) 46%, var(--k-text-dim)); }
.rung:nth-child(4) .rung__title .icon { color: color-mix(in srgb, var(--k-accent) 70%, var(--k-text-dim)); }
.rung:nth-child(5) .rung__title .icon { color: var(--k-accent); }

/* Este bloque va DESPUÉS de la progresión nth-child a propósito. Las dos
   reglas tienen la misma especificidad (0,4,0), así que gana la última: si
   estuviera arriba, pasar el cursor por los peldaños 2 a 5 no encendería su
   icono, que es lo que pasaba hasta ahora. */
.rung:hover .rung__title .icon,
.rung[data-active='true'] .rung__title .icon { color: var(--k-accent); }

/* ----------------------------------------------------- 14. BENTO FLOTA --- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--k-line);
  border: 1px solid var(--k-line);
}

.bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 16rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--k-surface);
  overflow: hidden;
  transition: background var(--k-t-base);
}
.bento__cell:hover,
.bento__cell[data-active='true'] { background: var(--k-surface-2); }

.bento__cell--a { grid-column: 1 / 6;  grid-row: 1 / 3; min-height: 30rem; }
.bento__cell--b { grid-column: 6 / 13; grid-row: 1 / 2; }
.bento__cell--c { grid-column: 6 / 10; grid-row: 2 / 3; }
.bento__cell--d { grid-column: 10 / 13; grid-row: 2 / 3; }
.bento__cell--e { grid-column: 1 / 13; grid-row: 3 / 4; min-height: 0; }

/* La foto se ancla arriba y cede el tercio inferior al texto. Antes ocupaba
   toda la celda y ningún velo bastaba: el torso plateado del humanoide dejaba
   el párrafo casi ilegible. */
.bento__media {
  position: absolute; inset: 0 0 30% 0; z-index: 0;
  display: grid; place-items: center;
  padding: 1.75rem 1.75rem 0;
}
.bento__media img {
  max-height: 100%; width: auto; object-fit: contain;
  transition: transform 1.1s var(--k-ease);
}

/* Hay dos clases de imagen en el bento y necesitan tratos opuestos:
     · foto de producto recortada (fondo transparente) -> contain, centrada
     · escena fotográfica completa -> cover, llenando la celda
   Sin esta distinción la escena se dibuja como un rectángulo pequeño flotando
   dentro de la celda, con sus bordes a la vista. */
.bento__media--scene { inset: 0; padding: 0; }
.bento__media--scene img {
  width: 100%; height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center top;
}
/* Una escena trae luz propia, a diferencia de un producto recortado sobre
   fondo transparente: necesita más velo para que el texto se sostenga. */
.bento__cell--photo:has(.bento__media--scene)::after {
  background: linear-gradient(180deg,
              transparent 20%, rgba(7, 9, 12, .55) 44%,
              rgba(7, 9, 12, .93) 64%, var(--k-bg) 82%);
}
.bento__cell:hover .bento__media img,
.bento__cell[data-active='true'] .bento__media img { transform: scale(1.06); }

/* El velo tiene que ganar bastante antes de donde arranca el texto: si sólo
   oscurece el último tercio, el párrafo se lee encima del robot. */
/* Suave donde está la foto y opaco sólo donde empieza el texto. La foto ya
   tiene su propia franja reservada arriba, así que el velo no necesita
   trabajar tanto. */
.bento__cell--photo::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
              transparent 40%, rgba(7, 9, 12, .3) 62%,
              rgba(7, 9, 12, .9) 78%, var(--k-bg) 92%);
}

/* Celdas anchas: la foto se ancla a la derecha con holgura para no cortarse
   contra el borde, y el velo corre en horizontal. */
/* En las celdas anchas el texto va a la izquierda, no abajo: la foto recupera
   toda la altura y se ancla a la derecha. */
.bento__cell--wide .bento__media {
  inset: 0;
  place-items: center end;
  padding: 1.5rem clamp(1.5rem, 3vw, 2.75rem) 1.5rem 44%;
}
.bento__cell--wide.bento__cell--photo::after {
  background: linear-gradient(96deg,
              rgba(7, 9, 12, .96) 0%, rgba(7, 9, 12, .82) 40%, transparent 66%);
}

.bento__cell--tint {
  background:
    radial-gradient(130% 100% at 100% 0%, var(--k-accent-06) 0%, transparent 62%),
    var(--k-surface);
}

.bento__cell--e { flex-direction: row; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.bento__cell--e .bento__body { flex: 0 0 auto; display: flex; align-items: center; gap: .9rem; }
.bento__cell--e .bento__body .icon { margin-bottom: 0; }
.bento__tail {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem;
  flex: 1 1 auto;
}
.bento__tail p { font-size: var(--k-fs-small); max-width: 34rem; }

.bento__body { position: relative; z-index: 2; }
.bento__body .icon { width: 1.9rem; height: 1.9rem; margin-bottom: 1rem; color: var(--k-accent); }
.bento__body h4 { font-size: var(--k-fs-h3); font-family: var(--k-font-display); margin-bottom: .85rem; }
.bento__body p { font-size: var(--k-fs-small); max-width: 26rem; }

/* ------------------------------------------------------- 15. BANDA 3D ---- */

.band { 
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.25rem, 5vw, 4rem);
  background:
    radial-gradient(80% 130% at 100% 50%, var(--k-accent-06) 0%, transparent 62%),
    var(--k-surface);
  border: 1px solid var(--k-line);
}
.band h3 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 1.2rem; }
.band p { font-size: var(--k-fs-lead); max-width: 34rem; margin-bottom: 2rem; }
.band .pillar__marker { max-width: none; margin: 0 0 1rem !important; font-size: 1rem !important; }

.band__media { position: relative; }
.band__media img { width: 100%; }
/* Los bordes de la foto se funden con el panel para que no quede un rectángulo
   pegado encima de la banda. */
.band__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--k-surface) 0%, transparent 22%),
    linear-gradient(0deg, var(--k-surface) 0%, transparent 18%);
  pointer-events: none;
}

/* -------------------------------------------------------- 16. SECTORES --- */

/* En móvil es un riel que se arrastra, con ajuste por tarjeta. En escritorio
   NO: seis tarjetas de 15.5rem no caben en 1240px, así que la sexta quedaba
   fuera de pantalla sin barra, sin flecha y sin nada que lo insinuara, y con
   el riel sin foco tampoco había forma de llegar con el teclado. Encima la
   columna de texto se quedaba en 181px, unos 24 caracteres por línea, cuando
   lo cómodo son 45 a 75.

   La rejilla de 3x2 arregla las dos cosas a la vez: entran las seis y cada
   tarjeta pasa a unos 412px, o sea ~45 caracteres. */
.sectors__rail {
  display: grid;
  grid-auto-flow: column;
  /* 85vw en teléfono: con 15.5rem fijos la columna de texto se quedaba en
     197px, unos 26 caracteres, casi tan apretada como antes. Así la tarjeta
     ocupa casi toda la pantalla y el texto sube a ~37 caracteres, y de paso
     el recorte de la siguiente tarjeta insinúa que hay más. */
  grid-auto-columns: minmax(min(20rem, 85vw), 1fr);
  gap: 1px;
  background: var(--k-line);
  border: 1px solid var(--k-line);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sectors__rail::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  .sectors__rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }
}

/* Señal de que el riel se arrastra: un desvanecido en el borde derecho. Sólo
   donde sigue siendo riel, y el JS lo apaga al llegar al final escribiendo
   data-fin="true" en el envoltorio. Sin JS se queda encendido, que es el
   fallo seguro: insinuar que hay más nunca deja contenido inalcanzable. */
.sectors__wrap { position: relative; }
.sectors__wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 4rem;
  background: linear-gradient(90deg, transparent, var(--k-bg));
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity var(--k-t-base);
}
.sectors__wrap[data-fin='true']::after { opacity: 0; }

@media (min-width: 900px) {
  .sectors__wrap::after { display: none; }
}

/* La tarjeta es una escena: la foto ocupa la mitad superior y el texto se
   apoya en la inferior, que el degradado deja limpia. */
.sector {
  position: relative;
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: .7rem;
  min-height: 27rem;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  background: var(--k-surface);
  overflow: hidden;
  transition: background var(--k-t-base);
}
.sector:hover,
.sector[data-active='true'] { background: var(--k-surface-2); }

.sector__media { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.sector__media .sector__scene {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: 50% 50%;
  transition: transform 1.2s var(--k-ease);
}
/* Encuadres por escena: mantienen el producto dentro de la ventana visible
   de la tarjeta sin tocar la integracion fisica de la imagen. */
.sector[data-sector='security'] .sector__scene { object-position: 50% 70%; }
.sector[data-sector='construction'] .sector__scene { object-position: 50% 100%; }
.sector[data-sector='mining'] .sector__scene { object-position: 50% 0%; }
.sector[data-sector='many-more'] .sector__scene { object-position: 50% 45%; }
.sector:hover .sector__media .sector__scene,
.sector[data-active='true'] .sector__media .sector__scene { transform: scale(1.05); }
.sector__media::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(7, 9, 12, .04) 0%, rgba(7, 9, 12, .28) 42%,
              rgba(7, 9, 12, .88) 68%, var(--k-bg) 88%);
}

/* Altura reservada para el texto: sin ella, las tarjetas con párrafo más largo
   empujan su título hacia arriba y la fila queda descuadrada. */
.sector__body { position: relative; z-index: 2; min-height: 10rem; }
.sector .icon { width: 2rem; height: 2rem; color: var(--k-accent); margin-bottom: .8rem; }
/* .85rem y no .5rem: a 8px el título se pegaba al párrafo. */
.sector h3 { font-size: 1.2rem; margin-bottom: .85rem; }
.sector p { font-size: var(--k-fs-small); }

/* La tarjeta entera es el enlace. Tres cosas de golpe: el visitante que se
   reconoce en un sector tiene a dónde ir, la tarjeta entra en el orden de
   tabulación (y al tabular, el navegador desplaza el riel solo, que es lo que
   antes dejaba fuera del alcance del teclado a los sectores ocultos), y el
   foco visible sale gratis del :focus-visible global. */
.sector { color: inherit; }
.sector__ir {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .9rem;
  font-family: var(--k-font-display);
  font-size: var(--k-fs-tag);
  font-weight: 600;
  color: var(--k-accent);
  opacity: .55;
  transition: opacity var(--k-t-base);
}
.sector__ir .icon {
  width: .9rem; height: .9rem;
  margin-bottom: 0;
  transition: transform var(--k-t-fast);
}
.sector:hover .sector__ir,
.sector:focus-visible .sector__ir,
.sector[data-active='true'] .sector__ir { opacity: 1; }
.sector:hover .sector__ir .icon { transform: translate(3px, -3px); }

/* -------------------------------------------------------- ADVISORY ---- */
.advisory__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--k-line);
  background: var(--k-line);
}
.advisory__service {
  min-width: 0;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  background: var(--k-surface);
}
.advisory__number {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--k-accent);
  font-family: var(--k-font-display);
  font-size: var(--k-fs-tag);
  letter-spacing: var(--k-track-tag);
}
.advisory__service h4 {
  min-height: 4.5rem;
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  line-height: 1.2;
}
.advisory__item { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--k-line); }
.advisory__item h5 { font-size: 1rem; line-height: 1.35; }
.advisory__item p { max-width: 39ch; margin-top: .7rem; color: var(--k-text-dim); }

/* ------------------------------------------------------- 17. PARTNERS ---- */

/* Alineado a la izquierda como el resto de la página. Estaba centrado y era,
   junto con Contacto, la única sección fuera del eje de lectura. */
.partners__head { width: 100%; max-width: none; margin: 0 0 clamp(3rem, 5vw, 4rem); }
.partners__head .tag { margin-bottom: 1.4rem; }
.partners__head p { width: 100%; margin-top: 1.3rem; font-size: var(--k-fs-lead); max-width: none; }

.partners__logos {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  width: 100%; max-width: none;
  background: var(--k-line);
  border: 1px solid var(--k-line);
}
.partners__logos li {
  position: relative;
  display: grid; place-items: center;
  min-height: 7.5rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem) 1rem;
  background: var(--k-surface);
  transition: background var(--k-t-base);
}
.partners__logos a {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 5rem;
}
.partners__logos li:hover { background: var(--k-surface-2); }
.partners__logos img {
  display: block;
  width: auto; max-width: min(100%, 15rem); max-height: 2.8rem;
  height: auto;
  opacity: .72; filter: none;
  transition: opacity var(--k-t-base), filter var(--k-t-base);
}
.partners__logos img:not(.partner-logo--light) { max-height: 4.2rem; max-width: 14rem; }
.partners__logos img.partner-logo--light { filter: brightness(0) invert(1); }
.partners__logos img.partner-logo--jt { max-height: 4.1rem; max-width: 4.1rem; }
.partners__logos li:hover img { opacity: 1; }

/* ------------------------------------------------------- 18. NOSOTROS ---- */

.about__head {
  width: 100%;
  max-width: none;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.about__head .tag { margin-bottom: 1.4rem; }

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}
.about__copy h2 { margin: 1.2rem 0 1.6rem; }
.about__copy p { font-size: var(--k-fs-lead); }
.about__copy p + p { margin-top: 1.2rem; }

.about__figure {
  position: relative;
  padding: clamp(1.75rem, 3.4vw, 3rem);
  background:
    radial-gradient(85% 95% at 50% 10%, var(--k-accent-06) 0%, transparent 66%),
    var(--k-surface);
  border: 1px solid var(--k-line);
}
.about__figure img { margin-inline: auto; }

/* ------------------------------------------------------- 19. CONTACTO ---- */

.contact { position: relative; overflow: hidden; }
.contact::before {
  content: '';
  position: absolute; inset: auto 0 -40% 0; height: 70%;
  z-index: -1;
  background-color: transparent;
  background: radial-gradient(52% 100% at 50% 100%, var(--k-accent-06) 0%, transparent 72%);
  pointer-events: none;
}

.contact__head { width: 100%; max-width: 70rem; margin: 0 0 clamp(3rem, 5vw, 4rem); }
.contact__head .tag { margin-bottom: 1.4rem; }
.contact__head p { width: 100%; margin-top: 1.3rem; font-size: var(--k-fs-lead); max-width: 52rem; }

/* Sin fondo ni borde. Con caja y borde parecían botones y no lo son: el
   visitante intenta pulsarlas y no pasa nada. Ahora son lo que son, una fila
   de tres promesas con su icono. */
.contact__promises {
  display: flex; flex-wrap: wrap;
  gap: .6rem clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2.25rem;
}
.contact__promises li {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--k-text);
  font-size: var(--k-fs-ui);
}
.contact__promises .icon { width: 1.1rem; height: 1.1rem; color: var(--k-accent); }

.contact__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 1px;
  max-width: 66rem;
  background: var(--k-line);
  border: 1px solid var(--k-line);
}
.contact__form-wrap,
.contact__aside { padding: clamp(1.75rem, 3.2vw, 2.75rem); background: var(--k-surface); }

/* --- Formulario --- */
.form { display: grid; gap: 1.3rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.form [type='submit'] { justify-self: start; }

.field { display: grid; gap: .5rem; }
.field label {
  font-family: var(--k-font-display);
  font-size: var(--k-fs-tag);
  font-weight: 500;
  color: var(--k-text-muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--k-bg);
  border: 1px solid var(--k-line-2);
  border-radius: var(--k-r-field);
  color: var(--k-text);
  font-family: var(--k-font);
  font-size: var(--k-fs-small);
  transition: border-color var(--k-t-fast), background var(--k-t-fast);
}
.field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--k-text-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--k-accent);
  background: var(--k-surface-2);
}
.field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--k-text-dim) 50%),
    linear-gradient(135deg, var(--k-text-dim) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field__error {
  display: none;
  font-size: var(--k-fs-tag);
  color: #FF8A5C;
}
.field[data-invalid='true'] input,
.field[data-invalid='true'] select,
.field[data-invalid='true'] textarea { border-color: #FF8A5C; }
.field[data-invalid='true'] .field__error { display: block; }

.form__status {
  display: none; align-items: center; flex-wrap: wrap; gap: .7rem;
  padding: .9rem 1.1rem;
  background: var(--k-accent-12);
  border-left: 2px solid var(--k-accent);
  color: var(--k-text);
  font-size: var(--k-fs-small);
}
.form__status[data-visible='true'] { display: flex; }
.form__status .icon { width: 1.1rem; height: 1.1rem; color: var(--k-accent); }
.form__status[data-state='error'] {
  background: rgba(255, 138, 92, .1);
  border-left-color: #FF8A5C;
}
.form__status[data-state='error'] .icon { color: #FF8A5C; }
.form__status a { color: var(--k-accent); font-weight: 500; overflow-wrap: anywhere; }
.form__status a:hover { color: var(--k-text); }

/* --- Canales --- */
.contact__aside { display: flex; flex-direction: column; gap: 1px; background: var(--k-line); padding: 0; }

.channel {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--k-surface);
  transition: background var(--k-t-base);
}
.channel:hover { background: var(--k-surface-2); }
.channel .icon { color: var(--k-accent); }
.channel strong {
  display: block;
  color: var(--k-text);
  font-family: var(--k-font-display);
  font-size: var(--k-fs-tag);
  font-weight: 600;
}
.channel span span { font-size: var(--k-fs-small); color: var(--k-text-muted); }

/* El cuadrúpedo llenaba menos de la mitad de su caja y dejaba un hueco muy
   visible. Ahora ocupa el ancho disponible y se apoya en el borde inferior. */
.contact__visual {
  position: relative;
  flex: 1;
  display: grid; place-items: end center;
  min-height: 14rem;
  padding: 1rem 1rem 0;
  background:
    radial-gradient(120% 90% at 50% 100%, var(--k-accent-06) 0%, transparent 62%),
    var(--k-surface);
  overflow: hidden;
}
.contact__visual img {
  width: min(100%, 22rem);
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, .7));
}

/* Acción persistente de contacto. Queda por debajo del menú abierto y
   conserva el espacio seguro de dispositivos con barra de gestos. */
.whatsapp-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: #25D366;
  color: #fff;
  border: 1px solid rgba(6, 43, 22, .28);
  box-shadow: 0 .55rem 1.5rem rgba(0, 0, 0, .38);
  clip-path: var(--k-clip);
  transition: transform var(--k-t-fast), background-color var(--k-t-fast), box-shadow var(--k-t-fast);
}
.whatsapp-float .icon { width: 1.9rem; height: 1.9rem; }
.whatsapp-float:hover { background-color: #5BE584; transform: translateY(-2px); box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .46); }
.whatsapp-float:active { transform: scale(.96); }
.whatsapp-float:focus-visible { outline: 2px solid var(--k-text); outline-offset: 4px; }

/* --------------------------------------------------------- 20. FOOTER ---- */

.footer { position: relative; z-index: 2; padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; background-color: rgba(10, 13, 18, .88); }
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--k-line-2) 25%, var(--k-line-2) 75%, transparent);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--k-line);
}
.footer__brand img { width: 188px; height: auto; margin-bottom: 1.4rem; }
.footer__brand p { max-width: 25rem; font-size: var(--k-fs-small); }

.footer h4 {
  margin-bottom: 1.2rem;
  font-family: var(--k-font-display);
  font-size: var(--k-fs-tag);
  font-weight: 600;
  color: var(--k-text-dim);
}
/* Separación de 1rem y relleno vertical: los enlaces medían 19px de alto con
   11px entre ellos, muy por debajo del objetivo táctil. */
.footer__links { display: grid; gap: .5rem; }
.footer__links a { display: inline-block; padding-block: .6rem; font-size: var(--k-fs-small); transition: color var(--k-t-fast); }
.footer__links a:hover { color: var(--k-accent); }

.socials { display: flex; gap: 1px; margin-top: 1.75rem; background: var(--k-line); width: max-content; border: 1px solid var(--k-line); }
.socials a {
  display: grid; place-items: center;
  /* 2.75rem = 44px, el mínimo táctil. A 2.6rem se quedaban en 42. */
  width: 3.1rem; height: 3.1rem;
  background: var(--k-surface);
  color: var(--k-text-dim);
  transition: color var(--k-t-fast), background var(--k-t-fast);
}
.socials a:hover { color: var(--k-accent); background: var(--k-surface-2); }
.socials svg { width: 1.2rem; height: 1.2rem; }

.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 1.75rem;
  font-size: var(--k-fs-tag);
  color: var(--k-text-dim);
}

/* --------------------------------------------------- 21. ENTRADA SCROLL -- */
/*
   Tres gestos distintos según lo que entra, en lugar del mismo fundido para
   todo. Es la diferencia entre "hay animación" y "está dirigido".
     rv-mask  -> titulares: cada línea sube desde detrás de un canto
     rv-wipe  -> bloques con imagen: una persiana los descubre
     rv-up    -> texto corrido y listas: desplazamiento corto
*/

/* Todo va bajo .js: sin JavaScript no hay nada que revierta el estado inicial,
   así que sin esa condición la página se quedaría en blanco. */
@media (prefers-reduced-motion: no-preference) {

  .js .rv-up {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .75s var(--k-ease), transform .75s var(--k-ease);
    transition-delay: var(--rv-delay, 0ms);
  }
  .js .rv-up[data-shown='true'] { opacity: 1; transform: none; }

  .js .rv-wipe {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s var(--k-ease-hud);
    transition-delay: var(--rv-delay, 0ms);
  }
  .js .rv-wipe[data-shown='true'] { clip-path: inset(0 0 0 0); }

  /* El JS envuelve cada línea del titular en .rv-line > span */
  .js .rv-line { display: block; overflow: hidden; }
  .js .rv-line > span {
    display: block;
    transform: translateY(105%);
    transition: transform .95s var(--k-ease);
    transition-delay: var(--rv-delay, 0ms);
  }
  .js .rv-mask[data-shown='true'] .rv-line > span { transform: none; }

  /* Una vez dentro, el elemento suelta todo lo que lo mantenía en una capa
     propia. Sin esto la página acumula decenas de capas vivas. */
  .js [data-done='true'],
  .js [data-done='true'] .rv-line > span {
    transition: none;
    transform: none;
    clip-path: none;
    opacity: 1;
  }
  .js [data-done='true'] .rv-line { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__network-seams path,
  .hero__network-seams [data-network-active='true'] path {
    stroke: var(--k-hex-seam);
    stroke-width: 1.1;
    opacity: .12;
    filter: none;
  }
}

/* ------------------------------------------------------ 22. RESPONSIVE --- */

@media (max-width: 1100px) {
  .about__grid, .band, .contact__panel { grid-template-columns: 1fr; }
  .band__mark { justify-self: start; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  .bento__cell--a { grid-column: 1 / 7;  grid-row: 1 / 3; min-height: 25rem; }
  .bento__cell--b { grid-column: 7 / 13; grid-row: 1 / 2; }
  .bento__cell--c { grid-column: 7 / 13; grid-row: 2 / 3; }
  .bento__cell--d { grid-column: 1 / 7;  grid-row: 3 / 4; }
  .bento__cell--e { grid-column: 7 / 13; grid-row: 3 / 4; flex-direction: column;
                    align-items: flex-start; justify-content: flex-end; }

  .rung { grid-template-columns: 1fr; padding-left: 3.75rem; }
  .rung__desc { max-width: none; }
}

@media (max-width: 768px) {
  .advisory__grid { grid-template-columns: 1fr; }
  .advisory__service h4 { min-height: 0; }
  :root { --k-nav-h: 62px; --k-grid-size: 48px; }

  /* El CTA se queda. Antes desaparecía entero por debajo de 768px y el único
     camino a "Agenda una demo" en toda la parte alta era abrir la
     hamburguesa: la fuga de conversión más cara del sitio, justo en el ancho
     por el que llega la mayoría del tráfico. Ahora se acorta a "Demo" y
     convive con el menú. */
  .nav__menu { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__actions .btn { padding: .8rem 1.1rem; font-size: var(--k-fs-tag); }
  .nav__cta-largo { display: none; }
  .nav__cta-corto { display: inline; }

  .nav__panel {
    display: block;
    position: fixed; inset: var(--k-nav-h) 0 auto 0; z-index: 99;
    padding: 1.5rem var(--k-gutter) 2rem;
    background-color: var(--k-bg);
    background: rgba(7, 9, 12, .98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--k-line-2);
    transform: translateY(-115%);
    visibility: hidden;
    transition: transform var(--k-t-base), visibility var(--k-t-base);
  }
  .nav__panel[data-open='true'] { transform: none; visibility: visible; }
  .nav__panel ul { display: grid; margin-bottom: 1.5rem; }
  .nav__panel a {
    display: block;
    padding: 1rem 0;
    font-family: var(--k-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--k-text);
    border-bottom: 1px solid var(--k-line);
  }
  .nav__panel .btn { width: 100%; }

  .bento { grid-template-columns: 1fr; }
  .bento__cell--a, .bento__cell--b, .bento__cell--c,
  .bento__cell--d, .bento__cell--e {
    grid-column: auto; grid-row: auto; min-height: 19rem;
    flex-direction: column; align-items: flex-start; justify-content: flex-end;
  }
  .bento__cell--e { min-height: 0; }
  /* En una columna las celdas son mucho más bajas y el texto ocupa
     proporcionalmente más: la foto cede más sitio y el velo cierra antes. */
  .bento__media { inset: 0 0 44% 0; }
  .bento__cell--wide .bento__media { inset: 0 0 44% 0; place-items: center; padding: 1.5rem 1.5rem 0; }
  .bento__cell--photo::after,
  .bento__cell--wide.bento__cell--photo::after {
    background: linear-gradient(180deg,
                transparent 22%, rgba(7, 9, 12, .55) 42%,
                rgba(7, 9, 12, .95) 60%, var(--k-bg) 76%);
  }

  .rung { padding: 1.4rem 0 1.4rem 3.25rem; }
  .rung__node { width: 1.6rem; }

  .pillars__rail a { padding: .9rem .6rem; font-size: .8125rem; }

  .form__row { grid-template-columns: 1fr; }
  .form { padding-bottom: 5.5rem; }
  .partners__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr; }
  .contact__promises li { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .form [type='submit'] { justify-self: stretch; }
  .hero__quiet-zone { width: 94vw; height: 42vh; }
  .hero__logo { width: min(88vw, 380px); margin-bottom: 2rem; }
  .hero h1 { max-width: 100%; font-size: clamp(1.3rem, 6.5vw, 1.8rem); }
  .partners__logos { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .section__intro h2,
  .partners__head h2,
  .about__head h2,
  .contact__head h2,
  .pillar__head h3,
  .band h3 { white-space: nowrap; }
  .section__intro h2,
  .partners__head h2,
  .contact__head h2 { font-size: clamp(1.6rem, 3.2vw, 2.9rem); }
  .about__head h2 { font-size: clamp(1.5rem, 2.7vw, 3.2rem); }
  .band h3 { font-size: clamp(1.35rem, 2.2vw, 2.25rem); }
  #sectores .section__intro { width: 100%; max-width: none; }
  #sectores .section__intro p { max-width: none; }
  #sectores .section__intro h2 { white-space: nowrap; font-size: clamp(1.6rem, 3.4vw, 3rem); }
}