/* ==========================================================================
   Ingenti AI — one-pager · v3
   Secciones y componentes. El sistema de tokens vive en ingenti.css.
   ========================================================================== */

/* ---------- 1. Header ---------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  padding-block: 18px;
  transition: background-color .45s ease, border-color .45s ease, padding .45s ease;
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  padding-block: 12px;
  background: rgba(8, 9, 13, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: inline-flex; align-items: center; }
/* logo.svg es el lockup completo (isotipo + "INGENTI AI TECHNOLOGY") dentro de
   un lienzo cuadrado, así que en una caja cuadrada quedaba reducido a una
   franja diminuta. logo-mark.svg es el mismo archivo con el viewBox ajustado
   al dibujo, y logo-icon.svg recorta sólo el isotipo para el favicon. */
.brand__mark { width: 150px; height: auto; }

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

/* Accesos directos a las secciones clave. Bajo 900px desaparecen: para eso
   está el menú completo de la hamburguesa. */
.hdr__nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.hdr__nav a {
  position: relative;
  font-family: var(--font-label);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: color .3s ease;
}
.hdr__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.hdr__nav a:hover { color: var(--text); }
.hdr__nav a:hover::after { transform: scaleX(1); }

/* Selector de idioma */
.lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
}
.lang__btn {
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-mute);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.lang__btn[aria-pressed="true"] { background: rgba(255, 255, 255, .1); color: var(--text); }

/* Hamburguesa */
.burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease;
}
.burger:hover { border-color: var(--line-strong); }
.burger__bars { display: block; width: 17px; height: 11px; position: relative; }
.burger__bars i {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.burger__bars i:nth-child(1) { top: 0; }
.burger__bars i:nth-child(2) { bottom: 0; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { transform: translateY(-4.75px) rotate(-45deg); }

/* ---------- 2. Menú overlay a pantalla completa -------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  padding-block: 104px 40px;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s ease, visibility .5s;
}
.menu.is-open { visibility: visible; opacity: 1; }
.menu::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 80% 10%, rgba(23, 135, 249, .16), transparent 70%);
  pointer-events: none;
}
.menu__in {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1; gap: 40px;
  overflow-y: auto;
}
.menu__list { border-top: 1px solid var(--line); }
.menu__item { border-bottom: 1px solid var(--line); }
.menu__link {
  display: flex; align-items: baseline; gap: 18px;
  padding-block: clamp(14px, 2.4vh, 26px);
  font-weight: 500;
  font-size: clamp(1.75rem, 5.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: clamp(-2px, -.3vw, -1.2px);
  color: var(--text);
  transition: color .3s ease, padding-left .45s cubic-bezier(.2, .8, .2, 1);
}
.menu__link:hover { color: var(--amber); padding-left: 14px; }
.menu__idx {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--text-mute);
}
.menu__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 22px; margin-top: auto; padding-top: 28px;
}
.menu__social { display: flex; gap: 10px; }
.soc {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  transition: border-color .3s ease, color .3s ease, transform .3s ease;
}
.soc:hover { border-color: var(--line-strong); color: var(--text); transform: translateY(-2px); }
.soc svg { width: 16px; height: 16px; }
.menu__lang { display: none; }

/* ---------- 3. Hero ------------------------------------------------------ */
/* El hero mide un viewport y recorta lo que sobra: así el orbe queda cortado
   por el borde inferior de la pantalla, no por un contenedor arbitrario.
   El padding inferior reserva el sitio que ocupa la parte visible del orbe. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(118px, 15vh, 165px) clamp(300px, 40vh, 440px);
  overflow: hidden;
}
/* El resplandor radial azul/ámbar del hero se retiró: el fondo va parejo al
   resto de la página y el único foco luminoso es el propio orbe. */
.hero__copy { position: relative; z-index: 2; text-align: center; max-width: 900px; margin-inline: auto; }
.hero__sub { margin-top: 24px; max-width: 620px; margin-inline: auto; }
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: 38px;
}

/* Centrado con left/right + margin auto, no con transform: GSAP anima este
   elemento (escala y desplazamiento) y un translateX(-50%) propio sería lo
   primero que sobrescribiría. */
.hero__orb {
  position: absolute;
  left: 0; right: 0;
  margin-inline: auto;
  bottom: clamp(-560px, -62vh, -330px);
  z-index: 1;
  /* Más grande que el nudo a propósito: la repulsión dispersa los puntos
     lejos y necesitan lienzo donde caer. El tamaño visible del nudo no
     cambia, lo compensa el factor R de graphics.js. */
  /* Ancho de pantalla completa: la repulsión llega ahora a 3,5 unidades del
     modelo y los puntos necesitan sitio donde esparcirse. El tamaño visible
     del nudo lo compensa el factor R de graphics.js. */
  width: min(1500px, 190vw);
  aspect-ratio: 1;
  pointer-events: none;
}
.hero__orb canvas { width: 100%; height: 100%; }

/* La fila de cifras bajo el hero se retiró: repetía las mismas cuatro métricas
   que el mazo de tarjetas de la sección "Sobre Ingenti AI". */

/* ---------- 4. Texto cinético "Impacto Real" ---------------------------- */
.kinetic {
  position: relative;
  padding-block: clamp(60px, 14vh, 150px);
  overflow: hidden;
}
.kinetic__line {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-weight: 500;
  /* Con el barrido completo, el centro del recorrido es el momento en que la
     frase debe LEERSE entera: a 18vw medía 1,2 pantallas y seguía perdiendo la
     primera y la última letra justo ahí. A 14vw cabe con margen, y el recorrido
     (±105% del ancho propio) la saca igualmente fuera de cuadro en los extremos. */
  font-size: clamp(3rem, 14vw, 12rem);
  line-height: .86;
  letter-spacing: clamp(-9px, -1.2vw, -3px);
  color: var(--text);
  will-change: transform;
}
.kinetic__line span { display: inline-block; }
/* Las dos líneas en blanco sólido: el contorno hueco restaba peso a la
   segunda mitad de la frase, que pesa lo mismo que la primera. */

/* ---------- 5. Revelado palabra por palabra ----------------------------- */
.reveal-copy {
  max-width: 17ch;
  margin-inline: auto;
  text-align: center;
  font-weight: 500;
  font-size: clamp(1.75rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: clamp(-2.2px, -.32vw, -1.2px);
}
.reveal-copy--wide { max-width: 22ch; }
.reveal-copy .w {
  color: rgba(255, 255, 255, .15);
  transition: color .3s linear;
}
.reveal-copy .w.on { color: var(--text); }
/* La frase de filosofía usa tres tonos, uno por concepto, para que la
   estructura tripartita del mensaje se lea antes que la frase completa. */
.reveal-copy .w.on[data-tone="vision"]     { color: var(--blue); }
.reveal-copy .w.on[data-tone="valores"]    { color: var(--blue-soft); }
.reveal-copy .w.on[data-tone="vanguardia"] { color: var(--amber); }

/* ---------- 6. Tarjetas base -------------------------------------------- */
.card {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.card--dots::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dots);
  background-size: var(--dots-size);
  opacity: .55;
  pointer-events: none;
}
.card > * { position: relative; }

/* ---------- 7. Pilares · bento asimétrico -------------------------------- */
/* Retícula de 6 columnas con tramos desiguales: una tarjeta grande ancla la
   composición y las otras tres la rodean, en vez de un 2x2 uniforme. */
.bmono-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 12px;
}
.bmono--xl   { grid-column: span 4; grid-row: span 2; }
.bmono--sm   { grid-column: span 2; }
.bmono--wide { grid-column: span 6; }

.bmono {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.bmono::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 120% at 12% 0%, rgba(23, 135, 249, .20), transparent 72%);
  pointer-events: none;
}
.bmono:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8);
}
.bmono > * { position: relative; }

.bmono__ico {
  flex: none;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
}
.bmono__ico svg { width: 24px; height: 24px; }

.bmono__body { flex: 1; min-width: 0; }
.bmono__head { display: flex; align-items: flex-start; gap: 12px; }
.bmono__t {
  font-weight: 600;
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
}
.bmono__meta {
  margin-left: auto;
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--text-mute);
}
.bmono__p {
  margin-top: 10px;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-mute);
}

/* Cada icono respira con un gesto propio; el conjunto nunca late al unísono. */
@keyframes bmono-float { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(-14%); } }
@keyframes bmono-pulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes bmono-tilt  { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } }
@keyframes bmono-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(8%, -8%, 0); } }

.bmono__ico[data-anim="float"] svg { animation: bmono-float 6s ease-in-out infinite; }
.bmono__ico[data-anim="pulse"] svg { animation: bmono-pulse 4s ease-in-out infinite; }
.bmono__ico[data-anim="tilt"]  svg { animation: bmono-tilt 5.5s ease-in-out infinite; }
.bmono__ico[data-anim="drift"] svg { animation: bmono-drift 8s ease-in-out infinite; }

/* ---------- 7b. Mazo de métricas (tarjetas encimadas) ------------------- */
/* Las cuatro tarjetas ocupan la misma celda y se escalonan en diagonal. En
   reposo van en gris y veladas; al enfocar una, sube, recupera el color y se
   pone por encima del resto. */
.deck {
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  /* Menos alto que antes: sobraba hueco entre la frase de filosofía y el mazo. */
  min-height: 420px;
  margin-top: clamp(-40px, -3vh, -12px);
  perspective: 1200px;
}
.deck__card {
  grid-area: stack;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  width: min(23rem, 82vw);
  height: 11rem;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  /* Opaco a propósito: si fuese translúcido se verían las tarjetas de debajo. */
  background: var(--surface-2);
  transform: skewY(-8deg) translate(var(--dx), var(--dy));
  filter: grayscale(1);
  cursor: default;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease,
              border-color .4s ease, box-shadow .5s ease;
}
/* El velo que apaga las tarjetas en reposo. */
.deck__card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(8, 9, 13, .42);
  transition: opacity .7s ease;
  pointer-events: none;
}
.deck__card:nth-child(1) { --dx: 0rem;    --dy: 0rem;   z-index: 1; }
.deck__card:nth-child(2) { --dx: 4.4rem;  --dy: 2.7rem; z-index: 2; }
.deck__card:nth-child(3) { --dx: 8.8rem;  --dy: 5.4rem; z-index: 3; }
.deck__card:nth-child(4) { --dx: 13.2rem; --dy: 8.1rem; z-index: 4; }

.deck__card:hover, .deck__card:focus-visible {
  transform: skewY(-8deg) translate(var(--dx), calc(var(--dy) - 2.6rem));
  filter: grayscale(0);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, .9);
  z-index: 10;
}
.deck__card:hover::before, .deck__card:focus-visible::before { opacity: 0; }

.deck__card > * { position: relative; z-index: 1; }
.deck__top { display: flex; align-items: center; gap: 10px; }
.deck__ico {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--blue-deep);
  color: #DCE9FF;
}
.deck__ico svg { width: 15px; height: 15px; }
.deck__k {
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--blue-soft);
}
.deck__n {
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text);
}
.deck__note { font-size: .875rem; color: var(--text-mute); }

/* ---------- 8. Bento de métricas ---------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.bento__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 190px;
}
.bento__cell .eyebrow { color: var(--text-mute); }
.bento__n {
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: .96;
  letter-spacing: -2px;
}
/* Tarjeta destacada: el azul del logo es el único relleno sólido brillante de
   la retícula, para que la cifra principal no compita con las otras tres. */
.bento__cell--hero {
  background: var(--grad-blue);
  border-color: transparent;
  color: #fff;
}
.bento__cell--hero .eyebrow { color: rgba(255, 255, 255, .78); }
.bento__cell--hero::after {
  content: "";
  position: absolute; right: -30%; top: -60%;
  width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 68%);
}
/* Variante compacta usada dentro de cada producto de la V.Suite: todas las
   celdas iguales, sin destacada, para no competir con el bento principal. */
.bento--compact { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bento--compact .bento__cell {
  min-height: 0; gap: 16px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.bento--compact .bento__n {
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  letter-spacing: -.6px;
  /* Una cifra nunca debe partirse: "↓68%" cortado en "↓68 / %" no se lee. */
  white-space: nowrap;
}
/* Los valores en palabra ("Reducida", "Múltiples") van a un cuerpo menor y sí
   pueden ocupar dos líneas, pero sin romper por mitad de palabra. */
.bento--compact .bento__n:not([data-count]) {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  white-space: normal;
}
.bento--compact .eyebrow { font-size: .625rem; letter-spacing: .12em; line-height: 1.4; }

/* ---------- 9. Voice AI -------------------------------------------------- */
.voice__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.voice__viz {
  position: relative;
  aspect-ratio: 1 / .9;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.voice__viz::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dots);
  background-size: var(--dots-size);
  opacity: .5;
}
.voice__viz::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 138, 61, .14), transparent 70%);
}
.voice__viz canvas { position: relative; width: 86%; height: 60%; }

/* ---------- 10. V.Suite · tarjetas apiladas ------------------------------ */
/* Cada producto es una tarjeta sticky. Al bajar, la siguiente sube por encima
   y la anterior retrocede (escala y opacidad las controla ScrollTrigger). */
.pstack {
  position: relative;
  padding-bottom: clamp(60px, 10vh, 120px);
}
.pcard {
  position: sticky;
  top: var(--pcard-top, 96px);
  padding-inline: var(--gutter);
  margin-bottom: clamp(24px, 4vh, 48px);
}
/* .pcard__in pasa a columna (encabezado + cuerpo) y la retícula de dos
   columnas baja a .pcard__body: V.Hire necesita un encabezado común con el
   selector de sub-soluciones y varios cuerpos intercambiables debajo. */
.pcard__in {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 24px);
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  /* Opaco: las tarjetas de debajo no deben transparentarse a través de esta. */
  background: linear-gradient(165deg, #12151E 0%, #0C0E15 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .05) inset,
              0 40px 90px -50px rgba(0, 0, 0, .95);
  transform-origin: top center;
  will-change: transform, opacity;
}
/* stretch + gráfico elástico: la columna del texto es más alta que la del
   gráfico y, con align-items:start, quedaba un hueco bajo las métricas. Ahora
   el gráfico crece hasta que las dos columnas acaban a la vez. Se notaba en
   portátiles (viewport bajo) y no en monitores, porque ahí el gráfico ya
   llegaba por su proporción natural. */
.pcard__body {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(26px, 3.4vw, 54px);
  align-items: stretch;
}
.pcard__aside { display: flex; flex-direction: column; }
.pcard__aside .prod__viz { flex: 1 1 auto; aspect-ratio: auto; min-height: 180px; }
.pcard__body[hidden] { display: none; }
.pcard__aside > * + * { margin-top: clamp(14px, 2vh, 22px); }
.pcard__main > * + * { margin-top: clamp(14px, 2vh, 20px); }
.pcard__main .t-h3 { max-width: 22ch; }
.pcard__main .t-prose { font-size: .9375rem; line-height: 1.55; }
/* Dos columnas en la checklist: en una sola, ocho ítems hacían la tarjeta más
   alta que el viewport y el apilado dejaba de verse entero. */
.pcard__main .checks { grid-template-columns: 1fr 1fr; column-gap: 22px; }
/* Dos columnas, no cuatro: en la columna estrecha de la tarjeta, cuatro celdas
   dejaban ~75px útiles por caja y tanto las cifras como palabras como
   "Reducida" se partían. */
.pcard__aside .bento--compact { grid-template-columns: 1fr 1fr; gap: 10px; }

/* Los items de un grid arrancan con min-width:auto, así que cualquier cosa que
   no pueda encoger (una píldora larga, una URL) ensancha la columna por encima
   del contenedor. Esto es lo que impide que eso salga como scroll horizontal. */
.pcard__body > *, .voice__grid > *, .contact__grid > *,
.bento > *, .bmono-grid > *, .team-grid > *, .ind-grid > *, .cbento > * {
  min-width: 0;
}

.prod__viz {
  position: relative;
  aspect-ratio: 1 / .88;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.prod__viz::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dots);
  background-size: var(--dots-size);
  opacity: .5;
}
.prod__viz::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 50% 42%, rgba(23, 135, 249, .13), transparent 72%);
}
.prod__viz svg { position: relative; width: 56%; height: auto; overflow: visible; }

.prod__name {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .01em;
  color: var(--amber);
}
.prod__label {
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.checks { display: grid; gap: 11px; }
.checks li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .9375rem; line-height: 1.45; color: var(--text-dim);
}
.checks svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--blue); }

/* ---------- 11. Industrias · selector por hover -------------------------- */
.hslider {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.hslider__names { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2px, .6vh, 8px); }

.hname {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -1.4px;
  color: var(--text);
  cursor: pointer;
}
/* Cada letra lleva dos copias apiladas: la apagada sale por arriba y la
   encendida entra por abajo, con retardo propio (--d) para que el cambio
   recorra la palabra en vez de conmutar de golpe. */
.hname__ch { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.hname__ch > span {
  display: inline-block;
  transition: transform .32s cubic-bezier(.25, .46, .45, .94);
  transition-delay: var(--d, 0ms);
}
.hname__ch .a { opacity: .22; }
.hname__ch .b { position: absolute; left: 0; top: 0; transform: translateY(110%); color: var(--text); }
.hname[aria-selected="true"] .a { transform: translateY(-110%); }
.hname[aria-selected="true"] .b { transform: translateY(0); }
/* Sin JS (o antes de partir el texto) el nombre se ve normal, no apagado. */
.hname:not(:has(.hname__ch)) { opacity: 1; }

.hslider__stage { position: relative; min-height: 1px; }
.hpanel[hidden] { display: none; }
.hpanel { animation: hpanel-in .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hpanel-in { from { opacity: 0; transform: translateY(12px); } }

.hpanel__list { display: grid; gap: 2px; }
.huse {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 18px;
  align-items: baseline;
  padding-block: clamp(13px, 1.8vh, 18px);
  border-bottom: 1px solid var(--line);
}
.huse:first-child { border-top: 1px solid var(--line); }
/* Con la tipografía de los títulos, no la de etiquetas: el nombre del producto
   es el ancla de cada fila y tenía menos peso que la descripción de al lado. */
.huse__p {
  font-weight: 500;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  letter-spacing: -.4px;
  color: var(--amber);
}
.huse__d { font-size: .9375rem; line-height: 1.5; color: var(--text-dim); }

/* ---------- 12. Casos de éxito · carrusel horizontal --------------------- */
/* La sección se ancla y la pista se desplaza en X con el scroll (ScrollTrigger).
   Cada diapositiva ocupa un ancho de viewport completo. */
/* Al anclarse, la sección se pega al borde superior del viewport: sin esta
   altura y el centrado, el encabezado del caso quedaba tapado por el header. */
.cases {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 88px;
}
.cases__viewport { overflow: hidden; }
.cases__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.cslide {
  width: 100vw;
  flex: none;
  padding-inline: var(--gutter);
  padding-block: clamp(20px, 4vh, 48px);
}
.cslide > * { max-width: var(--shell); margin-inline: auto; }

.cslide__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 3vh, 32px);
}
.cslide__desc { margin-top: 12px; max-width: 24ch; }
.cslide__idx {
  flex: none;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--text-mute);
}

/* Bento asimétrico: una tarjeta alta clara a la izquierda y tres oscuras
   alrededor. El contraste claro/oscuro es lo que hace legible la jerarquía. */
.cbento {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: clamp(340px, 46vh, 460px);
}
.cbento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #0D1826 0%, #090C13 100%);
  overflow: hidden;
}
/* El resplandor azul en la esquina interior cose visualmente las tres celdas
   oscuras, igual que el borde luminoso de la referencia. */
.cbento__cell::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 0% 0%, rgba(23, 135, 249, .16), transparent 62%);
  pointer-events: none;
}
.cbento__cell > * { position: relative; z-index: 1; }

.cbento__cell--hero {
  grid-row: 1 / 3;
  grid-column: 1;
  /* Única superficie clara del sitio: reservada a la cifra principal del caso. */
  background: linear-gradient(168deg, #FFF6EC 0%, #FFFFFF 46%, #FFE9D4 100%);
  border-color: transparent;
}
.cbento__cell--hero::after { display: none; }
.cbento__cell--wide { grid-column: 2 / 4; grid-row: 1; }

.cbento__k {
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 22ch;
}
.cbento__n {
  font-weight: 500;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: .95;
  letter-spacing: -2.5px;
  color: var(--text);
}
.cbento__cell--hero .cbento__k { color: #6B5947; }
/* Todas las cifras al mismo cuerpo aunque la caja sea más pequeña: el peso
   visual lo da el color de la tarjeta, no el tamaño del número. */
.cbento__cell--hero .cbento__n { color: #0A0B0F; }

.cases__nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(24px, 4vh, 40px);
}
.cases__dot {
  width: 30px; height: 3px;
  padding: 0;
  border: 0; border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color .4s ease, width .4s ease;
}
.cases__dot.is-on { background: var(--amber); width: 46px; }

/* ---------- 13. Metodología · línea horizontal --------------------------- */
/* Al quedar anclada, la sección ocupa el viewport: centrar aquí evita el hueco
   muerto bajo las tarjetas mientras dura el anclaje. */
.method-pin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: var(--sec-y);
}
.method-pin > .shell { width: 100%; }
.method-h { position: relative; padding-top: 6px; }

/* Riel horizontal: la línea gris de fondo y, dentro, la ámbar que se llena de
   izquierda a derecha. Los extremos se alinean con el centro del primer y del
   último punto: 1/8 del ancho a cada lado con cuatro columnas iguales. */
.method-h__rail {
  position: absolute;
  top: 22px;
  left: calc(100% / 8);
  width: calc(100% - 100% / 4);
  height: 1px;
  background: var(--line-strong);
}
/* El relleno es hijo del riel, así que hereda su caja con inset:0. Darle otra
   vez left/top propios lo desplazaba respecto de la línea que debe cubrir. */
.method-h__fill {
  position: absolute;
  inset: 0;
  background: var(--grad-cta);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

.method-h__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 26px);
}
.mstep { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mstep__dot {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  /* flex:none es imprescindible: al igualar la altura de las columnas, el
     punto (item flex en columna) se comprimía y salía ovalado. */
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-mute);
  transition: background-color .5s ease, color .5s ease, border-color .5s ease,
              transform .5s cubic-bezier(.2, .8, .2, 1);
}
.mstep.on .mstep__dot {
  background: var(--grad-cta);
  border-color: transparent;
  color: #0A0B0F;
  transform: scale(1.12);
}

.mstep__card {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 22px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  opacity: .45;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1),
              border-color .5s ease;
}
.mstep.on .mstep__card {
  opacity: 1;
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}
.mstep__card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 120% at 12% 0%, rgba(23, 135, 249, .18), transparent 72%);
  pointer-events: none;
}
.mstep__card > * { position: relative; }
/* Las cuatro columnas a la misma altura, como las fichas de equipo. */
.method-h__steps { align-items: stretch; }
.mstep { height: 100%; }
.mstep__n {
  display: block;
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: .9;
  letter-spacing: -2px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .3);
  margin-bottom: 14px;
  transition: -webkit-text-stroke-color .5s ease;
}
.mstep.on .mstep__n { -webkit-text-stroke-color: var(--amber); }
.mstep__card p { margin-top: 10px; font-size: .875rem; line-height: 1.5; color: var(--text-mute); }

/* ---------- 14. Partners ------------------------------------------------- */
/* Logotipos reales en PNG blanco con alfa. Todos comparten lienzo de 3:1, así
   que fijar la altura del lienzo los deja ópticamente al mismo tamaño. */
.partners__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(18px, 3vw, 48px) clamp(24px, 4vw, 64px);
  margin-top: clamp(48px, 7vh, 80px);
}
.partner {
  display: grid;
  place-items: center;
  width: 100%;
}
.partner img {
  width: calc(100% * var(--k, 1));
  max-width: calc(250px * var(--k, 1));
  height: auto;
  opacity: .62;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.partner:hover img { opacity: 1; transform: scale(1.04); }

/* ---------- 15. Equipo --------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* stretch + auto-rows:1fr: sin esto la ficha con la biografía más corta
     quedaba más baja que las de su fila, y las dos filas no coincidían. */
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.member {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.member::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 120% at 12% 0%, rgba(23, 135, 249, .18), transparent 72%);
  pointer-events: none;
}
.member:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8);
}
.member > * { position: relative; }
/* El botón se ancla abajo: así las fichas coinciden aunque las biografías
   tengan distinta longitud. */
.member__toggle { margin-top: auto; }

.member__photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  margin-bottom: 22px;
}
.member__name {
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -.5px;
}
.member__role {
  display: block;
  margin-top: 8px;
  font-family: var(--font-label);
  font-size: .75rem;
  color: var(--amber);
}
.member__bio { margin-top: 14px; font-size: .875rem; line-height: 1.6; color: var(--text-mute); }

/* El detalle se anima desde una altura medida (modules.js) y vuelve a auto. */
.member__more {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}
.member__more.is-open { opacity: 1; }
.member__label {
  margin: 18px 0 10px;
  font-family: var(--font-label);
  font-size: .6875rem;
  color: var(--text-mute);
}

.member__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-label);
  font-size: .75rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .3s ease;
  align-self: flex-start;
}
.member__toggle:hover { color: var(--amber); }
.member__chev {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.member__toggle[aria-expanded="true"] .member__chev { transform: translateY(1px) rotate(-135deg); }

/* ---------- 16. FAQ ------------------------------------------------------ */
.faq { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 26px;
  border: 0; background: transparent;
  text-align: left;
  font-weight: 500;
  font-size: clamp(1rem, 1.7vw, 1.1875rem);
  letter-spacing: -.4px;
  color: var(--text);
  cursor: pointer;
  transition: color .3s ease;
}
.faq__q:hover { color: var(--amber); }
.faq__ico {
  flex: none;
  position: relative;
  width: 20px; height: 20px;
}
.faq__ico i {
  position: absolute; inset: 0; margin: auto;
  background: currentColor; border-radius: 2px;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.faq__ico i:nth-child(1) { width: 15px; height: 1.5px; }
.faq__ico i:nth-child(2) { width: 1.5px; height: 15px; }
.faq__q[aria-expanded="true"] .faq__ico i:nth-child(2) { transform: rotate(90deg); opacity: 0; }
.faq__q[aria-expanded="true"] .faq__ico i:nth-child(1) { transform: rotate(180deg); }

.faq__a {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, transform .5s ease;
  transform: translateY(-6px);
}
.faq__a.is-open { opacity: 1; transform: none; }
.faq__a p { padding-bottom: 28px; max-width: 64ch; font-size: .9375rem; line-height: 1.6; color: var(--text-mute); }

/* ---------- 17. Contacto ------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(48px, 8vh, 96px);
}
.channels { margin-top: 36px; display: grid; gap: 4px; }
.channel {
  display: flex; align-items: center; gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  transition: color .3s ease;
}
a.channel:hover { color: var(--text); }
/* Mismo tratamiento que los iconos del bento de pilares: círculo con borde
   claro sobre superficie translúcida, trazo en color de texto. */
.channel__ico {
  flex: none;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  transition: border-color .3s ease, background-color .3s ease;
}
.channel:hover .channel__ico { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }
.channel__ico svg { width: 22px; height: 22px; }
.channel__k {
  display: block;
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.channel__v { font-size: .9375rem; }

.form-card {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-2);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: block; }
/* El espaciado lo pone el contenedor, no la adyacencia entre campos: dentro de
   una .form-row los dos campos son hermanos y un `.field + .field` los
   desalineaba verticalmente. */
.form-card > .field, .form-card > .form-row { margin-top: 14px; }
.form-card > :first-child { margin-top: 0; }
.field__l {
  display: block;
  margin-bottom: 8px;
  font-size: .625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-mute);
}
.field__l i { color: var(--amber); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .025);
  font-size: .9375rem;
  transition: border-color .3s ease, background-color .3s ease;
}
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .05);
}
.field select { appearance: none; cursor: pointer; }
.field option { background: var(--surface-2); color: var(--text); }
.field--sel { position: relative; }
.field--sel::after {
  content: "";
  position: absolute; right: 17px; bottom: 21px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-mute);
  border-bottom: 1.5px solid var(--text-mute);
  transform: rotate(45deg);
  pointer-events: none;
}
.form-note { margin-top: 16px; font-size: .75rem; line-height: 1.5; color: var(--text-mute); }
.form-note a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
.form-ok {
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 138, 61, .35);
  border-radius: var(--r-sm);
  background: rgba(255, 138, 61, .08);
  font-size: .875rem;
  color: var(--text);
}
.form-ok[hidden] { display: none; }

/* ---------- 18. Footer --------------------------------------------------- */
.ftr {
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vh, 88px) 28px;
  background: var(--bg-2);
}
.ftr__grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.ftr__brand p { margin-top: 18px; max-width: 30ch; font-size: .875rem; line-height: 1.55; color: var(--text-mute); }
.ftr__h {
  font-size: .625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.ftr__list { display: grid; gap: 11px; }
.ftr__list a, .ftr__list span { font-size: .9375rem; color: var(--text-dim); transition: color .3s ease; }
.ftr__list a:hover { color: var(--amber); }
.ftr__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--text-mute);
}
.ftr__bar a:hover { color: var(--text); }
.ftr__social { display: flex; gap: 10px; }

/* ---------- 19. Página legal -------------------------------------------- */
.legal { padding-block: 150px var(--sec-y); }
.legal__body { max-width: 74ch; }
.legal__body h2 {
  margin-top: 52px; margin-bottom: 16px;
  font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  letter-spacing: -.8px;
}
.legal__body h3 {
  margin-top: 30px; margin-bottom: 10px;
  font-weight: 500; font-size: 1rem; letter-spacing: -.3px;
}
.legal__body p, .legal__body li { font-size: .9375rem; line-height: 1.65; color: var(--text-dim); }
.legal__body p + p { margin-top: 12px; }
.legal__body ul { margin-top: 12px; display: grid; gap: 8px; }
.legal__body li { padding-left: 20px; position: relative; }
.legal__body li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
.legal__meta {
  margin-top: 28px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  display: grid; gap: 10px;
}
.legal__meta div { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .875rem; }
.legal__meta dt { font-size: .625rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-mute); min-width: 150px; }
.legal__meta dd { margin: 0; color: var(--text-dim); }

/* ==========================================================================
   20. Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  /* Cuatro pasos en fila no caben: la línea de tiempo pasa a vertical y el
     riel se rota para seguir leyéndose como progreso. */
  .method-h__steps { grid-template-columns: 1fr; gap: 20px; }
  .mstep { flex-direction: row; align-items: flex-start; gap: 18px; text-align: left; }
  .mstep__card { margin-top: 0; }
  .method-h__rail {
    top: 22px; bottom: 22px; left: 22px;
    width: 1px; height: auto;
  }
  .method-h__fill { transform-origin: top; transform: scaleY(var(--p, 0)); }
  /* En vertical la sección ya no se ancla: no hace falta llenar el viewport. */
  .method-pin { min-height: 0; display: block; }
}

@media (max-width: 900px) {
  .hdr__nav { display: none; }
  .voice__grid, .contact__grid { grid-template-columns: 1fr; }

  /* Sin puntero el selector por hover no sirve: los nombres pasan arriba en
     una fila desplazable y el panel queda debajo, activándose al tocar. */
  .hslider { grid-template-columns: 1fr; gap: 28px; }
  .hslider__names {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .hslider__names::-webkit-scrollbar { display: none; }
  .hname { font-size: 1.125rem; letter-spacing: -.4px; white-space: nowrap; }
  .hname__ch .a { opacity: .4; }
  .huse { grid-template-columns: 1fr; gap: 6px; }

  .partners__row { grid-template-columns: repeat(2, 1fr); }
  .voice__viz { aspect-ratio: 16 / 9; order: -1; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }

  /* Apilar tarjetas sticky exige que quepan enteras en pantalla. En una sola
     columna no caben, así que las tarjetas vuelven al flujo normal. */
  .pcard { position: static; margin-bottom: 20px; }
  .pcard__in { grid-template-columns: 1fr; }
  .prod__viz { aspect-ratio: 16 / 10; }
  .prod__viz svg { width: 40%; }
  .pcard__main .checks { grid-template-columns: 1fr; }

  /* El bento del caso pasa a dos columnas y deja de tener altura fija. */
  .cbento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
  }
  .cbento__cell { min-height: 140px; gap: 18px; }
  .cbento__cell--hero { grid-row: 1; grid-column: 1 / 3; }
  .cbento__cell--wide { grid-row: 2; grid-column: 1 / 3; }
  .cslide__head { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Sin anclar en táctil: la pista se recorre con el gesto nativo y scroll-snap
     deja cada caso encuadrado. Anclar aquí pelearía con el scroll del sistema. */
  .cases__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cases__viewport::-webkit-scrollbar { display: none; }
  .cslide { scroll-snap-align: start; }

  /* El mazo no funciona sin puntero: las tarjetas se despliegan en retícula. */
  .deck {
    grid-template-areas: none;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 0;
    place-items: stretch;
  }
  .deck__card {
    grid-area: auto;
    width: auto; height: auto;
    min-height: 10rem;
    transform: none;
    filter: none;
  }
  .deck__card::before { display: none; }
  .deck__card:hover, .deck__card:focus-visible { transform: translateY(-4px); }
}

@media (max-width: 720px) {
  .menu { padding-block: 92px 32px; }
  .menu__lang { display: inline-flex; }
  .menu__foot { flex-direction: column; align-items: flex-start; }
  .team-grid { grid-template-columns: 1fr; }
  .bento--compact { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .ftr__grid { grid-template-columns: 1fr; }
  .ftr__bar { flex-direction: column; align-items: flex-start; }
  /* En móvil el lockup completo reduce el wordmark a unos 4px de altura: por
     debajo de 720px el <picture> sirve sólo el isotipo, que sí se reconoce. */
  .brand__mark { width: 44px; }

  /* Todas las tarjetas del bento de pilares a ancho completo. */
  .bmono--xl, .bmono--sm, .bmono--wide { grid-column: span 6; grid-row: auto; }
}

@media (max-width: 560px) {
  .deck { grid-template-columns: 1fr; }
  .cbento { grid-template-columns: 1fr; }
  .cbento__cell--hero, .cbento__cell--wide { grid-column: 1; grid-row: auto; }
}

@media (max-width: 480px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell { min-height: 150px; gap: 26px; }
}

/* ==========================================================================
   21. Isla de acciones flotantes
   ========================================================================== */
/* Aparece al dejar atrás el hero. Va fija al viewport y fuera de toda sección
   para que ningún `overflow: hidden` ni pin de ScrollTrigger la recorte. */
.fab {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1), visibility .4s;
}
.fab.is-on { opacity: 1; visibility: visible; transform: none; }

.fab__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(18, 20, 28, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease,
              background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.fab__btn:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .3); }

.fab__ico { display: grid; place-items: center; flex: none; }
.fab__ico svg { width: 20px; height: 20px; }
.fab__t {
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
  /* El rótulo está siempre en el DOM (lo necesitan los lectores de pantalla),
     pero colapsado a ancho cero hasta que el cursor entra. */
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease,
              margin-left .45s cubic-bezier(.2, .8, .2, 1);
  margin-left: -10px;
}
.fab__btn--call:hover .fab__t,
.fab__btn--call:focus-visible .fab__t {
  max-width: 16rem;
  opacity: 1;
  margin-left: 0;
}

/* El de llamada lleva el ámbar de acción; el de volver arriba es neutro y
   cuadrado, para que no compitan entre sí. */
.fab__btn--call {
  background: var(--grad-cta);
  border-color: transparent;
  color: #0A0B0F;
  box-shadow: 0 10px 30px -14px rgba(255, 138, 61, .8);
}
.fab__btn--call:hover { box-shadow: 0 16px 38px -16px rgba(255, 138, 61, .95); }
.fab__btn--top { width: 52px; padding: 0; justify-content: center; }
/* En reposo el de llamada es un círculo igual que el de volver arriba. */
.fab__btn--call { padding-inline: 16px; }

@media (max-width: 720px) {
  /* En táctil no hay hover que despliegue el rótulo: se queda fuera. */
  .fab__btn--call .fab__t { display: none; }
  .fab__btn--call { width: 52px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fab { transition: none; }
  .fab__btn:hover { transform: none; }
}

/* ==========================================================================
   22. V.Suite — sub-soluciones y fichas especializadas
   ========================================================================== */
.pcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(14px, 2vh, 20px);
  border-bottom: 1px solid var(--line);
}

/* Selector de las tres soluciones que agrupa V.Hire. */
.subtabs {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
}
.subtab {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-label);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-mute);
  cursor: pointer;
  transition: background-color .35s ease, color .35s ease;
}
.subtab:hover { color: var(--text); }
.subtab[aria-selected="true"] { background: var(--grad-cta); color: #0A0B0F; }

/* Fichas de las seis especializadas: sólo nombre, promesa y acceso al detalle.
   Así los seis productos ocupan una pantalla en vez de seis módulos completos. */
.sgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: clamp(32px, 5vh, 52px);
}
.scard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.scard::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 120% at 12% 0%, rgba(23, 135, 249, .18), transparent 72%);
  pointer-events: none;
}
.scard:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8);
}
.scard > * { position: relative; }

.scard__ico {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}
.scard__ico svg { width: 132%; height: 132%; }
.scard__body { flex: 1; }
.scard__n {
  display: block;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -.6px;
  color: var(--text);
}
.scard__t {
  display: block;
  margin-top: 8px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text-mute);
}
.scard__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--amber);
}
.scard__go::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.scard:hover .scard__go::after { transform: rotate(45deg) translate(3px, -3px); }

/* Panel lateral con el detalle completo de una especializada. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: end center;
  visibility: hidden;
}
.sheet.is-open { visibility: visible; }
.sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(4, 5, 8, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .45s ease;
}
.sheet.is-open .sheet__scrim { opacity: 1; }

.sheet__panel {
  position: relative;
  width: min(880px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(165deg, #12151E 0%, #0C0E15 100%);
  transform: translateY(24px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.sheet.is-open .sheet__panel { transform: none; opacity: 1; }

.sheet__close {
  position: absolute;
  top: clamp(18px, 2.4vw, 26px);
  right: clamp(18px, 2.4vw, 26px);
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease;
}
.sheet__close:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .09); }
.sheet__close svg { width: 16px; height: 16px; }

.sdetail__grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(26px, 3.4vw, 54px);
  align-items: start;
  margin-top: 26px;
}
.sdetail__grid > * { min-width: 0; }
.sdetail__aside > * + * { margin-top: 18px; }
.sdetail__main > * + * { margin-top: 18px; }
.sdetail__main .checks { grid-template-columns: 1fr 1fr; column-gap: 22px; }
/* Los beneficios pasan de lista a cajitas, como las métricas de las
   transversales: son el equivalente de "qué te llevas". */
/* Una sola columna: la aside mide ~300px y a dos columnas cada beneficio
   caía en cinco líneas. */
.sdetail__bens {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.sdetail__ben {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.checks--amber svg { color: var(--amber); }

@media (max-width: 900px) {
  .sgrid { grid-template-columns: 1fr 1fr; }
  .pcard__head { flex-direction: column; align-items: flex-start; }
  .subtabs { width: 100%; justify-content: space-between; }
  .subtab { flex: 1; padding-inline: 10px; font-size: .75rem; }
  .sdetail__grid { grid-template-columns: 1fr; }
  .sheet__panel { max-height: 92vh; }
}
@media (max-width: 560px) { .sgrid { grid-template-columns: 1fr; } }

/* ---------- 23. Modal de llamada ----------------------------------------- */
.sheet--call { place-items: center; }
.sheet__panel--call {
  width: min(520px, 100%);
  max-height: 94vh;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
}
.callbox { text-align: center; }
.callbox .eyebrow { justify-content: center; }
/* La tarjeta de card.biz tiene proporción de móvil; esta caja la encuadra sin
   deformarla y le deja el alto que necesita para el botón de llamada. */
.callbox__frame {
  margin-top: 22px;
  height: 660px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.callbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Mensaje de error del formulario: mismo sitio que el de éxito, distinto tono. */
.form-ok.is-bad { color: var(--amber); }

/* ---------- 24. Bento de "Sobre Ingenti AI" con 8 celdas ------------------ */
/* Al fusionar los cuatro pilares con las cuatro cifras, el tramo grande deja
   de quedarse solo: ocupa 3 de 6 columnas y el resto rellena a su alrededor. */
.bmono--xl   { grid-column: span 3; grid-row: span 2; }
.bmono--sm   { grid-column: span 3; }
.bmono--wide { grid-column: span 6; }

/* La prosa de "Impacto Real" va centrada, como el revelado que tiene encima. */
.prose-center { text-align: center; }

@media (max-width: 1080px) {
  .bmono--xl, .bmono--sm { grid-column: span 6; grid-row: auto; }
}

/* ---------- 25. V.Suite en pantallas de poca altura ---------------------- */
/* El apilado sticky sólo funciona si la tarjeta cabe entera bajo el header.
   Medido: a 900px de alto entra justo (771 de 780 disponibles), pero por
   debajo se sale. Esta regla la encoge en lugar de recortarla. */
@media (min-width: 901px) and (max-height: 899px) {
  .pcard__in { padding: clamp(18px, 2vw, 28px); gap: clamp(14px, 1.6vh, 20px); }
  .pcard__body { gap: clamp(20px, 2.6vw, 40px); }
  .pcard__aside > * + *, .pcard__main > * + * { margin-top: clamp(10px, 1.4vh, 16px); }

  .prod__viz { max-height: 34vh; }
  .prod__viz svg { width: 52%; }

  .pcard__main .t-h3 { font-size: clamp(1.375rem, 2.6vh, 1.875rem); }
  .pcard__main .t-prose { font-size: clamp(.875rem, 1.7vh, 1rem); line-height: 1.5; }
  .pcard__main .checks { gap: clamp(6px, 1vh, 11px); }
  .pcard__main .checks li { font-size: clamp(.8125rem, 1.6vh, .9375rem); line-height: 1.4; }

  .bento--compact .bento__cell { padding: clamp(10px, 1.4vh, 18px); gap: clamp(8px, 1.2vh, 16px); }
  .bento--compact .bento__n { font-size: clamp(1rem, 2vh, 1.5rem); }
  .pcard__head { padding-bottom: clamp(10px, 1.4vh, 20px); }
}

/* Por debajo de 660px de alto ni encogiendo cabe: el apilado se desactiva y
   las tarjetas vuelven al flujo normal, que siempre es legible. */
@media (min-width: 901px) and (max-height: 660px) {
  .pcard { position: static; margin-bottom: 20px; }
}


/* ---------- 26. Globo de KPIs -------------------------------------------- */
.globe { margin-top: clamp(40px, 6vh, 72px); }
.globe__stage {
  position: relative;
  width: min(560px, 82vw);
  aspect-ratio: 1;
  margin-inline: auto;
}
.globe__stage canvas { width: 100%; height: 100%; }

.globe__labels { position: absolute; inset: 0; pointer-events: none; }
/* Cada etiqueta se coloca con transform desde JS y se desvanece cuando su
   marcador pasa a la cara oculta del globo. */
.glabel {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(12, 14, 21, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
.glabel b {
  font-family: var(--font-label);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text);
}
.glabel i {
  font-style: normal;
  font-size: .6875rem;
  color: var(--text-mute);
}

/* Respaldo en texto: es lo que se ve sin JS, con movimiento reducido o en
   móvil, donde un globo de 560px no cabe. */
/* Con el globo a la vista, repetir los KPIs debajo sobra. La lista queda
   reservada a donde el globo no se muestra: móvil y movimiento reducido. */
.globe__list {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: clamp(32px, 5vh, 56px);
}
.globe__list li {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.globe__list b {
  display: block;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -.4px;
}
.globe__list span {
  display: block;
  margin-top: 6px;
  font-size: .875rem;
  color: var(--text-mute);
}

@media (max-width: 900px) {
  /* Sin sitio para el globo: se queda sólo la lista. */
  .globe__stage { display: none; }
  .globe__list { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
}
@media (max-width: 520px) { .globe__list { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .globe__stage { display: none; }
  .globe__list { display: grid; }
}