/* Portada pública de Engramite.
   Todo va prefijado con .imb-landing porque convive con el tema de WordPress, que inyecta sus
   propias reglas globales; sin el prefijo, cualquier tema con opinión rompería la portada. */

@font-face {
  font-family: "Engramite Display";
  src: url("imb-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Engramite Display Bold";
  src: url("imb-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* La Engramite Display se sirve desde el propio plugin: sin esta declaración el navegador no la encuentra
   y el lema caía a la tipografía del sistema. */
@font-face {
  font-family: "Engramite Display";
  src: url("imb-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* La B en redonda: es la que da el lema con menos trazo. Una Bold no se puede adelgazar por CSS,
   hace falta el fichero. */
@font-face {
  font-family: "Engramite Display";
  src: url("imb-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* El texto corrido va en la misma letra que la aplicación; los titulares siguen en Engramite Display. */
@font-face {
  font-family: "Engramite Sans";
  src: url("imb-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Engramite Sans";
  src: url("imb-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Engramite Sans";
  src: url("imb-sans-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

.imb-landing {
  --acc-050: #d9f2ef;
  --acc-200: #7fd6d2;
  --acc-400: #1c9594;
  --acc-600: #147b7b;
  --acc-800: #075251;
  --ink: #050f0e;
  --ink-deep: #0d2220;
  --sky: #2596be;

  --text: #ffffff;
  --text-70: rgba(255, 255, 255, 0.78);
  --text-50: rgba(255, 255, 255, 0.55);
  --edge: rgba(255, 255, 255, 0.14);
  --edge-soft: rgba(255, 255, 255, 0.08);

  --shell: 1240px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Engramite Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip` y no `hidden`: `hidden` convierte esto en un contenedor de scroll y la barra pegada
     deja de anclarse al viewport. El recorte horizontal es el mismo. */
  overflow-x: clip;
}

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

.imb-landing a {
  color: inherit;
  text-decoration: none;
}

.imb-landing h1,
.imb-landing h2,
.imb-landing h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.imb-landing p {
  margin: 0;
}

.imb-shell {
  width: min(100% - 48px, var(--shell));
  margin-inline: auto;
}

/* ---------- franja de avisos ---------- */
.imb-ticker {
  position: relative;
  z-index: 60;
  background: #7ab0b4;
  color: #141414;
  /* El aviso comparte la rejilla de la barra: el texto cae sobre la marca y la equis sobre la
     acción de la derecha. El margen es el mismo valor, no uno parecido. */
  display: flex;
  align-items: center;
  gap: 16px;
  /* Los descuentos del hero —la reserva de la captura y el anclaje del lema— cuentan aviso más
     barra, así que cambiar esta altura obliga a repasarlos. */
  min-height: 39px;
  /* La altura va declarada, no `auto`: desde `auto` el navegador no interpola y el colapso daba
     un salto seco en vez de la transición. */
  height: 39px;
  transition: height 180ms ease, min-height 180ms ease, padding-block 180ms ease,
    opacity 140ms ease, visibility 0s;
  padding-block: 0;
  padding-inline: clamp(20px, 3.5vw, 48px);
  font-size: 12px;
  font-weight: 500;
}

.imb-ticker[hidden] {
  display: none;
}

/* Basta un píxel de desplazamiento para que el aviso se retire. Colapsa además de apagarse: con
   `visibility` a secas seguía ocupando su franja y la barra quedaba flotando bajo una banda muerta.
   La altura se anima junto al apagado para que la barra baje con él en vez de dar un salto. */
.imb-landing.imb-page-moved .imb-ticker {
  min-height: 0;
  height: 0;
  padding-block: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: height 180ms ease, min-height 180ms ease, padding-block 180ms ease,
    opacity 140ms ease, visibility 0s linear 180ms;
}

.imb-ticker p {
  flex: 1;
}

/* El aviso lleva a la sección de descarga: subrayado para que se vea que es un enlace. */
.imb-landing .imb-ticker a {
  color: #141414;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 150ms ease;
}

.imb-landing .imb-ticker a:hover {
  opacity: 0.8;
}

.imb-ticker-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(20, 20, 20, 0.66);
  cursor: pointer;
  transition: color 150ms ease;
}

.imb-ticker-close:hover {
  color: #141414;
}

.imb-ticker-close svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* ---------- barra ---------- */
/* El anclaje va en un envoltorio sin filtro: el `backdrop-filter` de la barra necesitaría capa
   propia para repintarse al desplazarse, y esa capa tiñe el fondo cuando la landing vive dentro
   de un tema de WordPress. Moviendo el envoltorio, la barra se queda como estaba. */
.imb-nav-dock {
  position: sticky;
  top: 0;
  z-index: 50;
  /* No ocupa sitio: la barra vuelve a flotar SOBRE la escena, que es lo que su desenfoque
     necesita detrás. En el flujo sólo tendría el fondo del documento y se veía negra. */
  margin-bottom: -58px;
}

.imb-nav {
  position: relative;
  width: 100%;
  /* Tres columnas: marca a la izquierda, menú CENTRADO respecto a la barra y acción a la
     derecha. Con flex y space-between el menú se descentraba en cuanto los lados no medían igual. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Estirada: la pastilla del final necesita el alto entero. Marca y menú se recentran solos. */
  align-items: stretch;
  gap: 24px;
  height: 58px;
  padding-inline: clamp(20px, 3.5vw, 48px);
  background: transparent;
  color: #ffffff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: none;
}

.imb-landing .imb-nav a.imb-brand,
.imb-nav a.imb-brand {
  grid-column: 1;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  line-height: 1;
}

.imb-landing .imb-nav .imb-brand-logo {
  height: 24px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

/* Siempre logo blanco visible, logo de color oculto */
/* La marca no lleva reflejo: el destello competía con el oro del símbolo. */
@keyframes imb-lema-brillo {

  /* Sin pausa: la barrida ocupa el ciclo entero, así que pasa las mismas veces pero tarda más en
     cruzar y se puede seguir con la vista. */
  0% {
    background-position: 130% 0;
  }

  100% {
    background-position: -30% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .imb-copy h1 {
    animation: none;
    background-position: 50% 0;
  }
}

.imb-landing .imb-nav .imb-brand-logo-color {
  display: none !important;
}

.imb-landing .imb-nav .imb-brand-logo-white {
  display: block !important;
  /* El SVG solo aporta la silueta; el color lo pone el fondo. La proporción es la del propio
     viewBox (2724 × 494), así que el ancho sigue saliendo del alto como con una imagen. */
  height: 24px;
  width: auto;
  aspect-ratio: 2724 / 494;
  background-color: #ffffff;
  -webkit-mask: var(--imb-brand-mark-img) left center / contain no-repeat;
  mask: var(--imb-brand-mark-img) left center / contain no-repeat;
}

/* Arriba del todo la marca es BLANCA, que es como se lee sobre el hero; en cuanto la página se
   mueve un píxel toma el color de la casa. `imb-page-moved` ya lo pone landing.js con
   `scrollY > 0`. */
.imb-landing .imb-nav .imb-brand-logo-white {
  transition: background-color 220ms var(--ease);
}

.imb-landing.imb-page-moved .imb-nav .imb-brand-logo-white {
  background-color: var(--imb-marca, #7ab0b4);
}

.imb-landing .imb-nav .imb-brand-mark {
  display: none !important;
}

/* Enlaces y acciones a la derecha en blanco sobre el blur */
.imb-nav .imb-links {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  justify-self: center;
}

.imb-nav .imb-links a {
  color: #ffffff;
  opacity: 0.86;
  transition: opacity 150ms ease;
}

.imb-nav .imb-links a:hover {
  opacity: 1;
}

.imb-landing .imb-nav .imb-nav-actions,
.imb-nav .imb-nav-actions {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  justify-self: end;
}

.imb-landing .imb-nav a.imb-login,
.imb-nav a.imb-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  padding: 0 25px;
  border-radius: 0;
  /* Sin fondo ni desenfoque: solo el rótulo sobre la escena. */
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  transition: opacity 150ms ease;
}

/* Al pasar por encima, subrayado: es lo único que marca el enlace, ya que no tiene fondo. */
.imb-landing .imb-nav a.imb-login:hover,
.imb-nav a.imb-login:hover {
  opacity: 1;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.imb-landing .imb-nav a.imb-nav-link {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  font-family: "Engramite Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.imb-landing .imb-nav a.imb-nav-link:hover,
.imb-landing .imb-nav a.imb-nav-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Fuera del hero el menú sobra: la barra se queda con la casa a un lado y el producto al otro.
   El visor se declara aparte porque bloquea la página y `is-scrolled` depende del scroll. */
.imb-landing .imb-nav.is-scrolled .imb-links,
.imb-landing.imb-tour-focus .imb-nav .imb-links,
.imb-landing .imb-nav.is-scrolled a.imb-login,
.imb-landing.imb-tour-focus .imb-nav a.imb-login {
  display: none !important;
}

.imb-nav.is-scrolled {
  background: transparent;
  color: #000000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: none;
}

.imb-landing .imb-nav.is-scrolled .imb-brand-logo-color {
  display: none !important;
}

.imb-landing .imb-nav.is-scrolled .imb-brand-logo-white {
  display: block !important;
}

.imb-nav.is-scrolled .imb-links a {
  color: #000000;
  opacity: 0.86;
}

.imb-nav.is-scrolled .imb-links a:hover {
  opacity: 1;
}

/* Al desplazarse el botón conserva su cristal: la versión sólida de antes lo apagaba en cuanto
   la barra cruzaba el umbral de scroll. */
.imb-landing .imb-nav.is-scrolled a.imb-login,
.imb-nav.is-scrolled a.imb-login {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

.imb-landing .imb-nav.is-scrolled a.imb-login:hover,
.imb-nav.is-scrolled a.imb-login:hover {
  opacity: 1;
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

@media (max-width: 1024px) {

  /* La barra viaja con su dock sticky y con el mismo margen negativo que en escritorio, es decir
     FLOTANDO sobre la escena. Con `margin-bottom: 0` ocupaba su hueco en el flujo y detrás del
     cristal no quedaba más que el fondo del documento: el desenfoque no tenía nada que desenfocar
     y la barra se veía negra maciza. */
  /* El mismo cristal que en escritorio. El fondo negro al 58 % y el `saturate` extra hacían que
     la barra se viera de otro color en el móvil que en el ordenador. */
  .imb-landing .imb-nav,
  .imb-landing .imb-nav.is-scrolled {
    background: transparent;
    color: #ffffff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .imb-landing .imb-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* El aviso ya no comparte rejilla con la barra —los enlaces del centro están ocultos—, así que
     el texto se centra en la franja y la equis se queda en su esquina. */
  .imb-landing .imb-ticker {
    justify-content: center;
  }

  .imb-landing .imb-ticker p {
    flex: 0 1 auto;
    text-align: center;
  }

  .imb-landing .imb-ticker-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
  }

  .imb-landing .imb-nav .imb-links {
    display: none;
  }

  .imb-landing .imb-nav .imb-nav-actions {
    align-self: stretch;
    margin-left: auto;
    gap: 18px;
  }

  .imb-landing .imb-nav .imb-brand-text {
    display: none !important;
  }

  .imb-landing .imb-nav .imb-brand-mark {
    display: none !important;
  }

  .imb-landing .imb-nav a.imb-login {
    height: 42px;
    padding: 0 22px;
    font-size: 13px;
  }
}

/* ---------- portada ---------- */
.imb-hero {
  position: relative;
  isolation: isolate;
  padding: 0 0 40px;
  overflow: hidden;
}

/* El fondo va en z-index 0 y no en negativo: con una capa negativa Safari deja de pintar el
   vídeo, y al desplazarse el compositor lo tiraba y lo rehacía. El hero ya aísla su apilado, así
   que basta con subir el contenido por encima. */
.imb-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Respaldo permanente: el reproductor puede retirar su poster antes de pintar el vídeo. */
  background: var(--ink) url("../images/hero-poster.jpg") center / cover no-repeat;
}

.imb-hero>.imb-shell {
  position: relative;
  z-index: 1;
}

/* Tres capas: masa en movimiento, surcos de corteza y grano. Ninguna es un archivo de vídeo. */
/* La masa era una capa con `blur(60px)` animada sin parar: el navegador rehacía ese desenfoque
   en cada fotograma de la página. Ahora es un vídeo de 30 s en bucle, capturado del render real
   del propio navegador y decodificado por hardware. Los surcos, el grano y el velo siguen en CSS
   tal y como estaban: su coste es menor y así la portada es exactamente la misma. */
.imb-hero-bg span {
  position: absolute;
  inset: -35%;
  display: block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.imb-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El encuadre se baja para dejar fuera la barra superior de la app grabada, que asomaba justo
     debajo del navbar de la portada y se leían dos barras seguidas. */
  object-position: 50% 62%;
  display: block;
  opacity: 0;
  transition: opacity 200ms ease;
  /* Ni clics ni controles: es un fondo, no un reproductor. Safari saca su botón de reproducción
     y el de imagen sobre imagen si no se le quitan a mano. */
  pointer-events: none;
}

.imb-hero-video.is-ready {
  opacity: 1;
}

.imb-hero-video::-webkit-media-controls,
.imb-hero-video::-webkit-media-controls-panel,
.imb-hero-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* LA MARCA EN TESELAS.
   El símbolo se resuelve en cuadraditos sobre el fondo del hero: densos en el centro de cada
   círculo y cada vez más sueltos hacia el borde, así que se lee sin recortarse contra la escena.
   Se dibuja una vez y solo se rehace al cambiar de tamaño: no gasta nada mientras se navega. */

.imb-hero-bg .imb-cortex {
  /* Surcos de corteza: ruido de frecuencia baja cortado en franjas y desenfocado. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271200%27%20height%3D%271200%27%3E%3Cfilter%20id%3D%27c%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0055%27%20numOctaves%3D%274%27%20seed%3D%2711%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27table%27%20tableValues%3D%270%201%200%201%200%201%200%201%200%27%2F%3E%3CfeFuncG%20type%3D%27table%27%20tableValues%3D%270%201%200%201%200%201%200%201%200%27%2F%3E%3CfeFuncB%20type%3D%27table%27%20tableValues%3D%270%201%200%201%200%201%200%201%200%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeGaussianBlur%20stdDeviation%3D%272.2%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23c%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: cover;
  filter: blur(9px) contrast(1.3);
  mix-blend-mode: soft-light;
  opacity: 0.7;
  animation: imb-drift 11s ease-in-out infinite alternate-reverse;
}

@keyframes imb-drift {
  from {
    transform: translate3d(-3%, -2%, 0) scale(1.05);
  }

  to {
    transform: translate3d(4%, 3%, 0) scale(1.2);
  }
}

/* GRANO DE TELEVISION.
   Nieve de tubo sobre el vídeo: un mosaico de ruido que salta de sitio a saltos secos. El
   mosaico se dibuja una sola vez; la animación solo mueve `background-position`, así que no
   rehace el filtro en cada fotograma. */
.imb-hero-bg .imb-static {
  /* Cubre el hero entero: los `span` del fondo se salen un 35% para poder desplazarse, pero esta
     capa no se desplaza, salta dentro de sí misma. */
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%270%200%201%201%200%201%200%201%27%2F%3E%3CfeFuncG%20type%3D%27discrete%27%20tableValues%3D%270%200%201%201%200%201%200%201%27%2F%3E%3CfeFuncB%20type%3D%27discrete%27%20tableValues%3D%270%200%201%201%200%201%200%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 240px 240px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.85;
  animation: imb-static-jump 180ms steps(1) infinite;
}

@keyframes imb-static-jump {
  0% {
    background-position: 0 0;
  }

  12% {
    background-position: -73px 41px;
  }

  25% {
    background-position: 118px -96px;
  }

  37% {
    background-position: -37px -158px;
  }

  50% {
    background-position: 164px 87px;
  }

  62% {
    background-position: -129px 12px;
  }

  75% {
    background-position: 52px -63px;
  }

  87% {
    background-position: -186px 132px;
  }
}

.imb-hero-bg .imb-veil {
  inset: 0;
  /* Encima del grano: el degradado a negro del pie es el que funde el hero con el visor, y con el
     ruido por delante la zona que debía quedar negra seguía enseñando vídeo granulado. */
  z-index: 4;
  /* El velo era verde azulado y volvía a meter color sobre el duotono. Ahora es gris neutro. */
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(22, 22, 22, 0) 55%, rgba(22, 22, 22, 0.45) 100%),
    linear-gradient(180deg, rgba(9, 9, 9, 0) 72%, rgba(9, 9, 9, 0.75) 90%, #000 100%);
}

/* GRANO DE PELÍCULA.
   El ruido no se pinta: se usa de MÁSCARA sobre un relleno del color de la casa, así que cada
   mota es exactamente ese color y no una mezcla con el vídeo. Dos pasadas a escalas y ritmos
   distintos —con una sola, la tesela se repite tan igual que el ojo la lee como textura fija— y
   ambas saltan con `steps(1)`, sin interpolar. La tesela se pinta casi a su tamaño real: cuanto
   menos se amplía, más fina es cada mota y más caben por centímetro. */
.imb-hero-bg .imb-grain {
  inset: 0;
  z-index: 3;
  background-color: #7ab0b4;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.15%27%20numOctaves%3D%272%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%279%27%20intercept%3D%27-4.0%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%279%27%20intercept%3D%27-4.0%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%279%27%20intercept%3D%27-4.0%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.15%27%20numOctaves%3D%272%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%279%27%20intercept%3D%27-4.0%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%279%27%20intercept%3D%27-4.0%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%279%27%20intercept%3D%27-4.0%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 240px 240px;
  mask-size: 240px 240px;
  opacity: 0.55;
  animation: imb-grain-shift 110ms steps(1, end) infinite;
}

.imb-hero-bg .imb-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #7ab0b4;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.05%27%20numOctaves%3D%271%27%20seed%3D%2717%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.0%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.0%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.0%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.05%27%20numOctaves%3D%271%27%20seed%3D%2717%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.0%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.0%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.0%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 96px 96px;
  mask-size: 96px 96px;
  opacity: 0.5;
  animation: imb-grain-shift 70ms steps(1, end) infinite reverse;
}

@keyframes imb-grain-shift {
  0% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }

  20% {
    mask-position: 84px -173px;
    -webkit-mask-position: 84px -173px;
  }

  40% {
    mask-position: 161px 128px;
    -webkit-mask-position: 161px 128px;
  }

  60% {
    mask-position: -73px 205px;
    -webkit-mask-position: -73px 205px;
  }

  80% {
    mask-position: 47px -244px;
    -webkit-mask-position: 47px -244px;
  }

  100% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }
}

.imb-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  gap: 24px;
}

@media (max-width: 900px) {
  .imb-hero-grid {
    gap: 24px;
  }
}

.imb-copy {
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
}

.imb-copy h1,
.imb-mobile-intro h2 {
  /* La A va primero: es la que trae el corte negrita. La B queda de reserva por si el fichero de
     la A no carga, y entonces el 700 lo resuelve el navegador. */
  font-family: "Engramite Display", "Engramite Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 3.6vw, 56px);
  /* Con el relleno recortado a la letra, un interlineado apretado corta la cola de la "g" y la
     "y": este hueco de abajo les deja sitio. */
  line-height: 1.14;
  letter-spacing: -0.025em;
  padding-bottom: 0.08em;
  /* El cuerpo se ajusta con el salto de línea del titular y centra contra la ventana. */
  white-space: nowrap;
  /* En una línea la frase mide más que la columna de contenido y se salía por la derecha. Se
     centra contra la VENTANA, no contra el `.imb-shell`. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  text-align: center;
  /* Base blanca con una banda plateada que la cruza cada pocos segundos. El degradado se recorta
     con la letra, así que el destello viaja por DENTRO del texto y no deja halo alrededor. */
  /* Banda ancha: con el destello estrecho el ojo solo veía un parpadeo al pasar por cada letra. */
  background: linear-gradient(100deg,
      #ffffff 28%, #7ab0b4 50%, #ffffff 72%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Retardo negativo: la animación arranca ya empezada, con el destello cruzando la frase, en
     vez de esperar a que entre por la derecha. */
  /* `linear`, no `ease-in-out`: la curva disparaba el destello justo en el centro de la frase,
     que es donde se mira, y por eso parecía un fogonazo en vez de una barrida. */
  animation: imb-lema-brillo 3.2s linear -2.1s infinite;
}

.imb-landing .imb-copy .imb-intro-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-50);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  /* El lema deja pasar los gestos a la captura; el enlace es lo único que los recoge. */
  pointer-events: auto;
  transition: color 150ms var(--ease);
}

.imb-landing .imb-copy .imb-intro-link:hover,
.imb-landing .imb-copy .imb-intro-link:focus-visible {
  color: #ffffff;
}

/* Punta de cinco círculos con la misma trama que el símbolo de la marca. */
.imb-landing .imb-copy .imb-intro-link svg {
  width: 0.53em;
  height: 0.84em;
  margin-left: 3px;
  transition: transform 150ms var(--ease);
}

.imb-landing .imb-copy .imb-intro-link:hover svg {
  transform: translateX(3px);
}

/* El titular parte donde se le dice: en escritorio en dos líneas y en el móvil en tres. Los saltos
   viven los dos en el marcado y cada tamaño apaga el que no usa —un `br` oculto no rompe línea—;
   el espacio que los precede es el que sobrevive al apagado. */
.imb-copy h1 .imb-br-sm {
  display: none;
}

@media (max-width: 720px) {
  .imb-copy h1 br:not(.imb-br-sm) {
    display: none;
  }

  .imb-copy h1 .imb-br-sm {
    display: inline;
  }

  /* Tres líneas cortas dejan sitio para una letra mucho mayor: se mide contra el ancho de la
     pantalla —igual que en escritorio— para que la línea más larga nunca lo desborde. */
  /* La línea más larga deja 24 px a cada lado en un teléfono de 390. */
  .imb-copy h1 {
    font-size: clamp(18px, 7.4vw, 44px);
    letter-spacing: -0.02em;
    /* La familia solo trae el corte 700; el navegador engorda el trazo a partir de él. */
    font-weight: 800;
  }
}

.imb-copy p,
.imb-mobile-intro p {
  max-width: 36em;
  color: var(--text-70);
  margin: 0 auto;
  text-align: center;
}

.imb-mobile-intro {
  display: none;
}

.imb-landing a.imb-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 0;
  /* Sin borde y sin velo: el mismo cristal que la barra al desplazarse. */
  border: 0;
  background: transparent;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.imb-landing a.imb-cta:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.06);
}

.imb-motto {
  margin-top: 52px;
  text-align: center;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  font-size: clamp(9px, 1.85vw, 26px);
}

.imb-motto b {
  font-weight: 800;
}

/* Sello de confianza entre la portada y la captura. */
.imb-trust {
  margin: 44px auto 26px;
  display: grid;
  gap: 14px;
  justify-items: center;
  opacity: var(--imb-hero-details-opacity, 1);
  transition: opacity 380ms ease;
}

.imb-has-shot-motion .imb-trust {
  will-change: opacity;
}

.imb-trust p {
  /* Declarada a mano: el tema de WordPress pisa la familia heredada en párrafos sueltos. */
  font-family: "Engramite Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #fff;
}

.imb-trust-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  flex-wrap: wrap;
}

.imb-trust-marks a {
  display: block;
  line-height: 0;
}

.imb-trust-marks img {
  height: 92px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease);
}

.imb-trust-marks a:hover img {
  opacity: 1;
}

/* El lema queda en el tercio alto y la captura asoma por abajo dentro de la primera pantalla:
   ese trozo visible es lo que invita a seguir bajando. */
/* El lema se superpone a la captura: sale del flujo y se ancla a media pantalla, así que la
   captura sube y queda por detrás. El hero deja de reservarle altura. */
.imb-hero-grid {
  /* Reserva la altura que decide cuánto de la captura entra en la primera pantalla. El lema no
     depende de ella: va superpuesto. */
  min-height: calc(100svh - 502px);
  display: grid;
  align-content: center;
}

.imb-hero .imb-copy {
  position: absolute;
  left: 0;
  right: 0;
  /* El hero arranca bajo el aviso y la barra: se descuentan para caer en la mitad de la pantalla.
     Los 7svh lo bajan de ahí: con la captura más tumbada su borde superior sube, y el lema
     centrado a secas quedaba pegado a ella y parecía alto. */
  top: calc(50svh - 97px + 7svh);
  transform: translateY(-50%);
  z-index: 4;
  /* Es un rótulo, no un obstáculo: los gestos siguen llegando a la captura de debajo. */
  pointer-events: none;
}

.imb-shot-stage {
  margin-top: 0;
}

.imb-shot-stage {
  position: relative;
  /* El tercer límite evita que la captura desborde en pantallas bajas. Se aplica antes y durante
     el levantamiento, así que el visor nunca necesita reducirla al bloquearse. */
  width: min(100%, 1120px, max(280px, calc(167.5svh - 210px)));
  margin: 0 auto;
  container-type: inline-size;
}

/* El visor no abandona el flujo ni cambia de ancho: el bloqueo sucede sobre la misma captura que
   el usuario estaba levantando. Así, al entrar o salir no existe salto de escala ni de posición. */
/* La casa manda siempre a la izquierda: el producto ya tiene su sitio en la pastilla de la
   derecha, así que la marca no se sustituye al entrar en el visor. */
.imb-landing .imb-nav .imb-brand-logo-engramite {
  display: none !important;
}

.imb-tour-focus .imb-nav-dock {
  z-index: 200;
}

.imb-hero-grid {
  /* La captura tiene transformación 3D y, sin capa propia por encima, se quedaba con los clics del
     enlace del lema aunque éste tuviera z-index. La rejilla no recoge gestos: solo el enlace. */
  position: relative;
  z-index: 5;
  pointer-events: none;
  opacity: var(--imb-hero-copy-opacity, 1);
  visibility: visible;
  /* Sin transición larga: el valor ya viaja con el scroll y esos 380 ms se sumaban encima, que es
     lo que hacía que el lema tardara en irse. */
  transition: opacity 90ms linear, visibility 0s;
}

.imb-tour-focus .imb-ticker,
.imb-tour-focus .imb-hero-grid,
.imb-tour-focus .imb-scheme,
.imb-tour-focus .imb-trust {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 380ms ease, visibility 0s linear 380ms;
}

/* El aviso además COLAPSA. Con `visibility: hidden` seguía ocupando su franja, y como el visor
   bloquea la página en su sitio, en móvil quedaba una banda muerta sobre la barra y ésta parecía
   flotar despegada del borde. `display: none` se lleva por delante el fundido, así que se encoge. */
.imb-tour-focus .imb-ticker {
  min-height: 0;
  height: 0;
  padding-block: 0;
  overflow: hidden;
  transition: opacity 380ms ease, height 380ms ease, padding-block 380ms ease,
    visibility 0s linear 380ms;
}

.imb-shot {
  margin: 0;
  width: 100%;
  /* La proporción exacta de la captura: con 16/10 el `cover` se comía una franja lateral. */
  aspect-ratio: 2896 / 1729;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: rgba(5, 15, 14, 0.45);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
}

.imb-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* #262626 es `--imb-mosaic-sep`, el separador de Mosaic en la aplicación. Va por encima del
     relleno del paso cero (z-index 3) para que el borde siga a la vista. */
  box-shadow: inset 0 0 0 2px #262626;
  pointer-events: none;
  z-index: 4;
}

.imb-has-shot-motion .imb-shot {
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform:
    perspective(1600px) translate3d(0, var(--imb-shot-y, 20px), var(--imb-shot-z, -90px)) rotateX(var(--imb-shot-tilt, 35deg));
}

.imb-has-shot-motion .imb-shot.is-scroll-animating {
  will-change: transform;
}

.imb-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.imb-shot img[src] {
  display: block;
}

.imb-shot figcaption {
  position: absolute;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.28);
}

.imb-shot img[src]+figcaption {
  display: none;
}

/* ---------- recorrido guiado sobre la captura ---------- */
/* Las tarjetas viven fuera del figure para que el cristal y las líneas puedan respirar sobre el
   marco sin que `overflow: hidden` recorte sus entradas. Sólo una está visible en cada paso. */
.imb-shot-tour {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  width: 100%;
  aspect-ratio: 2896 / 1729;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

/* La entrada NO puede animar la opacidad de un ancestro de la tarjeta: mientras esa opacidad va
   de 0 a 1 el navegador compone el grupo aparte y el `backdrop-filter` deja de ver la captura, así
   que la tarjeta salía un instante sin relleno. El contenedor solo conmuta `visibility`; el
   deslizamiento lo hace la tarjeta y el fundido, su contenido. El desenfoque está desde el
   primer fotograma. */
.imb-shot-callout {
  position: absolute;
  inset: 0;
  margin: 0;
  visibility: hidden;
  transition: visibility 0s linear 480ms;
}

.imb-shot-callout.is-active {
  visibility: visible;
  transition-delay: 0s;
}

/* DISCO NUMERADO SOBRE LA CAPTURA.
   Marca el punto exacto al que se refiere la explicación del paso, con el mismo número que la barra
   de progreso. Sustituye a la guía trazada. */
.imb-shot-pins {
  /* Cubre la captura entera: el figure es un grid centrado y sin esto la caja de los discos se
     encoge al tamaño de su contenido, así que los porcentajes dejaban de ser los de la imagen. */
  position: absolute;
  inset: 0;
}

/* Un punto, no un disco numerado. El número lo daba ya la barra de pasos y aquí solo competía
   con el nombre de la herramienta; el texto sigue en el HTML para quien lee la página con voz. */
.imb-shot-pin,
.imb-callout-badge {
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #7ab0b4;
  box-shadow: 0 0 0 6px rgba(122, 176, 180, 0.16);
  font-size: 0;
  color: transparent;
  line-height: 1;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.imb-shot-pin {
  position: absolute;
  z-index: 5;
}

/* Junto al nombre no va nada: el punto vive sobre la captura, señalando la zona de la que habla
   la explicación. Repetido al lado del título solo era un adorno. */
.imb-callout-badge {
  display: none !important;
}

.imb-shot-pin.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 90ms;
}

.imb-callout-card {
  position: absolute;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  /* Cristal y texto entran juntos: cuando el desenfoque abría antes que el contenido se veía
     primero una caja vacía. */
  transition: opacity 380ms ease, transform 380ms var(--ease);
  /* Promueve la capa desde el principio: sin esto el compositor la crea al mostrarla y el primer
     fotograma sale sin desenfoque. */
  will-change: backdrop-filter, opacity, transform;
  width: min(23%, 252px);
  min-width: 205px;
  padding: 17px 19px 18px;
  border: 0;
  border-radius: 14px;
  /* Sin tinte: solo desenfoque, para que la tarjeta devuelva la captura que tiene detrás en vez
     de teñirla de verde. El filo y la sombra son lo único que la despega del fondo. */
  background: transparent;
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 20px 55px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.imb-shot-callout.is-active .imb-callout-card {
  opacity: 1;
  transform: none;
  transition-delay: 90ms;
}

.imb-callout-kicker {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-family: "Engramite Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.025em;
  text-transform: none;
}

.imb-callout-card h3 {
  margin: 0 0 6px;
  color: #7ab0b4;
  font-family: "Engramite Display", "Engramite Display Bold", "Engramite DisplayA-Bold", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.imb-callout-card p {
  margin: 0;
  color: #fff;
  font-family: "Engramite Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

/* Cada paso trae su sitio en `--imb-callout-x/-sm/-y` (ver Engramite_Landing::tour_steps). Así una
   herramienta nueva no obliga a tocar el CSS en los tres anchos. */
.imb-callout-card {
  left: var(--imb-callout-x, 22%);
  top: var(--imb-callout-y, 5%);
}

/* Botón transparente: permite avanzar tocando cualquier punto de la captura y conserva semántica
   de teclado. Mientras el recorrido no está activo no intercepta ningún gesto. */
.imb-tour-advance {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  width: 100%;
  height: auto;
  aspect-ratio: 2896 / 1729;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  appearance: none;
  background: transparent;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  touch-action: none;
}

.imb-tour-advance:disabled {
  pointer-events: none;
}

.imb-tour-advance:focus-visible {
  outline: none;
}

.imb-tour-advance:focus-visible::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc-200);
  box-shadow: 0 0 0 4px rgba(127, 214, 210, 0.16);
}

/* Un tramo por paso: gris cuando espera, color de la casa cuando ya se ha visto y, en el que está
   a la vista, una carga que dura lo mismo que el paso automático. Va SOBRE la captura, pegada a su
   borde inferior y sin separaciones, como la barra de un vídeo. Sólo con el visor abierto: fuera
   de él la captura se inclina y una barra plana encima no casaría. */
.imb-tour-meta {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 26px;
  /* Por encima de `.imb-tour-advance`, que cubre la captura entera. */
  z-index: 7;
  display: grid;
  /* Pausa a la izquierda y la barra ocupando el resto, como en un reproductor. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  --imb-tour-step: 4200ms;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}

.imb-landing.imb-tour-focus .imb-tour-meta {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease), visibility 0s;
}

.imb-tour-play {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  background: transparent;
  color: #ffffff;
  opacity: 0.86;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.imb-tour-play:hover {
  opacity: 1;
}

.imb-tour-play:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.imb-tour-play svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.imb-tour-play .imb-tour-play-resume,
.imb-landing.imb-tour-paused .imb-tour-play .imb-tour-play-pause {
  display: none;
}

.imb-landing.imb-tour-paused .imb-tour-play .imb-tour-play-resume {
  display: block;
}

/* En pausa se congela lo que avanza solo: la carga del tramo y el fundido de la marca. */
.imb-landing.imb-tour-paused .imb-tour-progress>button.is-timing::after,
.imb-landing.imb-tour-paused .imb-shot-zero-mark {
  animation-play-state: paused;
}

.imb-tour-progress {
  display: grid;
  /* Columnas automáticas: la barra sigue al número de pasos declarados en PHP. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
}

.imb-tour-progress>button {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  /* Lo que falta por cargar, en el gris de los separadores de Mosaic (`--imb-mosaic-sep`). */
  background: #262626;
  box-shadow: none;
  /* Sin transición de color: al acabar un tramo su carga se reinicia en el mismo instante en que
     pasa a lleno, y el fundido dejaba ver el gris un momento, como un salto. */
  transition: transform 180ms var(--ease);
}

.imb-tour-progress>button:first-child {
  border-radius: 999px 0 0 999px;
}

.imb-tour-progress>button:last-child {
  border-radius: 0 999px 999px 0;
}

.imb-tour-progress>button.is-filled {
  background: #7ab0b4;
}

.imb-tour-progress>button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #7ab0b4;
  transform: scaleX(0);
  transform-origin: left center;
}

.imb-tour-progress>button.is-timing::after {
  animation: imb-tour-fill var(--imb-tour-step) linear forwards;
}

.imb-tour-progress>button.is-filled::after {
  transform: scaleX(1);
}

@keyframes imb-tour-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.imb-tour-progress>button:not(:disabled) {
  cursor: pointer;
  pointer-events: auto;
}

.imb-tour-progress>button::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.imb-tour-progress:hover>button:not(:disabled) {
  transform: scaleY(1.25);
}

.imb-tour-progress>button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

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

/* Mantiene el ancho al ocultar la barra de scroll. Bloquear el contenedor evita que la inercia
   nativa mueva la página; corregir scrollY desde un evento scroll producía rebotes visibles. */

/* BARRA DE DESPLAZAMIENTO DE VIDRIO.
   Una barra nativa no admite `backdrop-filter`: el navegador la pinta fuera del documento. Para
   que sea el mismo vidrio que la barra superior hay que esconder la nativa y dibujar la nuestra,
   que sí es un elemento del documento y sí desenfoca lo que tiene detrás. La posición y el
   arrastre los lleva `landing.js`. */
html.imb-landing-scroll-managed {
  scrollbar-width: none;
}

html.imb-landing-scroll-managed::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.imb-scroll-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px;
  z-index: 70;
  /* El carril no recibe puntero: solo la pieza que se arrastra. Así no roba clics al contenido. */
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}

.imb-scroll-rail.is-live {
  opacity: 1;
}

.imb-scroll-thumb {
  position: absolute;
  left: 2px;
  right: 2px;
  /* El mismo vidrio que la barra superior. */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.10);
  pointer-events: auto;
  cursor: grab;
  transition: background 160ms ease;
}

.imb-scroll-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

.imb-scroll-rail.is-dragging .imb-scroll-thumb {
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.22);
}

@media (pointer: coarse) {

  /* En táctil el sistema ya dibuja su indicador y no hay puntero que arrastrar. */
  .imb-scroll-rail {
    display: none;
  }
}

html.imb-tour-page-locked {
  overflow: hidden !important;
}

html.imb-tour-page-locked,
html.imb-tour-page-locked body {
  overscroll-behavior: none;
  touch-action: none;
}

@media (max-width: 900px) {
  .imb-callout-card {
    width: min(29%, 230px);
    min-width: 180px;
    padding: 13px 14px 14px;
  }

  .imb-callout-card p {
    font-size: 14px;
  }

  .imb-callout-card {
    left: var(--imb-callout-x-sm, var(--imb-callout-x, 22%));
  }
}

@media (max-width: 720px) {

  /* Las rayas pertenecen a la captura: la explicación ocupa una fila posterior y nunca las
     empuja hacia abajo al abrirse o cambiar de altura. */
  .imb-mobile-intro {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    gap: 22px;
    margin-bottom: 28px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 380ms ease, visibility 0s linear 380ms;
  }

  .imb-tour-focus .imb-mobile-intro {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  /* La captura también asoma por el borde inferior, como en escritorio. La reserva de escritorio
     es un valor fijo porque allí la captura mide casi lo mismo siempre; aquí su altura la manda el
     ancho de la pantalla (proporción 2896/1729), así que la parte que debe quedar dentro se
     expresa en `vw`: ~60 % de la captura visible y el resto fuera de cuadro. Los 85 px son el
     aviso más la barra. */
  .imb-hero-grid {
    min-height: calc(100svh - 39px - 49vw);
  }

  /* El descuento de escritorio son el aviso MÁS la barra. Aquí la barra flota sobre la escena con
     su margen negativo, así que el hero ya empieza bajo el aviso y solo hay que descontarlo a él.
     Sin el empuje de 7svh de escritorio: en el teléfono el lema va en el centro exacto de la pantalla. */
  .imb-hero .imb-copy {
    top: calc(50svh - 39px);
  }

  .imb-shot-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .imb-shot {
    grid-row: 1;
    border-radius: 10px;
  }

  .imb-shot-tour {
    grid-row: 3;
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    /* La explicación se centra en el hueco que queda entre la captura y la barra de pasos, que
       vive pegada al borde inferior. Con la altura justa del texto quedaba pegada a la captura. */
    align-content: center;
    min-height: 170px;
    margin-top: 12px;
    aspect-ratio: auto;
    /* Reserva desde el inicio la altura de la explicación más alta. Abrir/cerrar el visor sólo
       cambia su opacidad, nunca el alto del hero ni el encuadre del vídeo con object-fit: cover. */
  }

  .imb-shot-callout {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    min-width: 0;
  }

  .imb-callout-card {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
  }

  /* Sobre el negro la explicación se lee sola: el filo y la sombra solo dibujaban una caja. En una
     columna el texto manda, así que va al cuerpo de las secciones: título de sección y párrafo. */
  .imb-callout-card {
    box-shadow: none;
    text-align: center;
  }

  .imb-callout-card h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
  }

  /* El nombre ya dice de qué va: el rótulo pequeño solo restaba sitio. */
  .imb-callout-kicker {
    display: none;
  }

  .imb-callout-card h3 {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.15;
    margin-bottom: 10px;
  }

  .imb-callout-card p {
    font-size: 18px;
  }

  /* Aquí la explicación va bajo la captura, así que el borde inferior del visor ya no es el de la
     captura: la barra se ancla a la celda de la captura, que en una rejilla sirve de caja. */
  .imb-tour-meta {
    /* Con las dos líneas: en un elemento absoluto la línea final `auto` es el borde del
       contenedor, no el de la fila. */
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    left: 24px;
    right: 24px;
    bottom: 14px;
  }
}

.imb-landing .imb-chart {
  display: grid;
  justify-items: center;
}

.imb-landing .imb-node {
  width: 100%;
  max-width: 330px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 4px;
  text-align: center;
}

.imb-landing .imb-node-step,
.imb-landing .imb-branch-step {
  display: block;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.imb-landing .imb-node-step {
  margin-bottom: 3px;
}

/* La punta es un borde girado, no un glifo: no depende de la fuente ni se descoloca. */
.imb-landing .imb-arrow {
  position: relative;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.32);
}

.imb-landing .imb-arrow::after,
.imb-landing .imb-fork>i::after,
.imb-landing .imb-merge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 5px;
  height: 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  transform: translateX(-50%) rotate(45deg);
}

.imb-landing .imb-branch-step {
  margin-bottom: 6px;
}

/* Horquilla: barra que reparte y dos bajadas con punta sobre cada vía. */
.imb-landing .imb-fork {
  position: relative;
  width: 100%;
  height: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}

.imb-landing .imb-fork>i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.32);
}

/* Cada bajada cae sobre el centro de su columna: mitad de una columna, contando el hueco. */
.imb-landing .imb-fork>i:first-child {
  left: calc(25% - 3.5px);
}

.imb-landing .imb-fork>i:last-child {
  left: calc(75% + 3.5px);
}

/* Empalme: las dos vías suben, se juntan en la barra y salen por una sola punta. */
.imb-landing .imb-merge {
  position: relative;
  width: 100%;
  height: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

.imb-landing .imb-merge>i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.32);
}

.imb-landing .imb-merge>i:first-child {
  left: calc(25% - 3.5px);
}

.imb-landing .imb-merge>i:last-child {
  left: calc(75% + 3.5px);
}

.imb-landing .imb-merge::after {
  bottom: -3px;
}

.imb-landing .imb-row .imb-node {
  max-width: none;
}

@media (max-width: 720px) {

  /* En una columna no hay reparto que dibujar: la horquilla y el empalme se vuelven un tallo. */
  .imb-landing .imb-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .imb-landing .imb-fork>i,
  .imb-landing .imb-merge>i {
    left: 50% !important;
  }

  .imb-landing .imb-fork {
    border-top: 0;
  }

  .imb-landing .imb-merge {
    border-bottom: 0;
  }

  .imb-landing .imb-fork>i:last-child,
  .imb-landing .imb-merge>i:last-child {
    display: none;
  }
}

.imb-landing .imb-chart {
  display: grid;
  justify-items: stretch;
}

.imb-landing .imb-chart-top {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 0;
}

.imb-landing .imb-chart-top>.imb-node {
  flex: 1 1 0;
  min-width: 0;
}

.imb-landing .imb-chart-down {
  display: grid;
  justify-items: center;
}

.imb-landing .imb-node {
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 4px;
  text-align: center;
}

.imb-landing .imb-node-step {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.imb-landing .imb-node h4 {
  margin: 0 0 3px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
}

.imb-landing .imb-node p {
  margin: 0;
  color: rgba(255, 255, 255, 0.60);
  font-size: 10px;
  line-height: 1.45;
}

.imb-landing .imb-node small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
  line-height: 1.4;
}

/* Flecha horizontal del tramo superior: apunta a la izquierda, que es hacia donde avanza. */
.imb-landing .imb-arrow-h {
  position: relative;
  align-self: center;
  flex: 0 0 26px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.imb-landing .imb-arrow-h::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  transform: translateY(-50%) rotate(45deg);
}

/* El codo: baja por el lado izquierdo, justo bajo la última caja del tramo horizontal. */
.imb-landing .imb-elbow {
  justify-self: start;
  width: 1px;
  height: 18px;
  margin-left: calc((100% - 52px) / 6);
  background: rgba(255, 255, 255, 0.3);
}

.imb-landing .imb-arrow {
  position: relative;
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.3);
}

.imb-landing .imb-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 5px;
  height: 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  transform: translateX(-50%) rotate(45deg);
}

.imb-landing .imb-branch {
  width: 100%;
  display: grid;
  justify-items: center;
}

.imb-landing .imb-branch-step {
  margin-bottom: 0;
}

.imb-landing .imb-fork,
.imb-landing .imb-merge {
  width: 100%;
  height: 11px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.imb-landing .imb-fork {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.imb-landing .imb-merge {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.imb-landing .imb-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.imb-landing .imb-chart-down>.imb-node {
  width: 100%;
}

@media (max-width: 900px) {

  /* Sin ancho para la L: vuelve a una sola columna de arriba abajo. */
  .imb-landing .imb-chart-top {
    flex-direction: column;
    gap: 0;
  }

  .imb-landing .imb-arrow-h {
    flex: 0 0 15px;
    width: 1px;
    height: 15px;
    align-self: center;
    background: rgba(255, 255, 255, 0.3);
  }

  .imb-landing .imb-arrow-h::after {
    left: 50%;
    top: auto;
    bottom: -1px;
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    transform: translateX(-50%) rotate(45deg);
  }

  .imb-landing .imb-elbow {
    justify-self: center;
    margin-left: 0;
  }

  .imb-landing .imb-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* DIAGRAMA DE FLUJO.
   Cajas encadenadas por flechas, de arriba abajo. Tres fases se abren en dos vías paralelas y
   vuelven a juntarse: la horquilla y el empalme se dibujan con bordes, no con imágenes, así que
   escalan con el texto. Todo blanco sobre negro y sin relleno: manda el trazo. */
.imb-flow {
  margin: 0;
  color: #fff;
  scroll-margin-top: 90px;
}

.imb-chart {
  display: grid;
  justify-items: center;
}

.imb-node {
  width: 100%;
  max-width: 340px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 4px;
  text-align: center;
}

.imb-node-step {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.imb-node h4 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

.imb-node p {
  margin: 0;
  color: rgba(255, 255, 255, 0.60);
  font-size: 11px;
  line-height: 1.55;
}

.imb-node small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  line-height: 1.5;
}

/* Flecha: un tallo y una punta. La punta es un borde girado, no un glifo, para que no dependa de
   la fuente ni se descoloque entre navegadores. */
.imb-arrow {
  position: relative;
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.3);
}

.imb-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 6px;
  height: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  transform: translateX(-50%) rotate(45deg);
}

.imb-branch {
  width: 100%;
  display: grid;
  justify-items: center;
}

.imb-branch-step {
  margin-bottom: 0;
}

/* Horquilla y empalme: media caja con tres bordes. Arriba abre, abajo cierra. */
.imb-fork,
.imb-merge {
  width: min(100%, 560px);
  height: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.imb-fork {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.imb-merge {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.imb-row {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.imb-row .imb-node {
  max-width: none;
}

@media (max-width: 720px) {
  .imb-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .imb-fork,
  .imb-merge {
    width: 1px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
  }
}

/* La portada baja a negro desde la mitad de la captura, para pasar a las secciones oscuras sin
   corte. El alto del velo se deduce del ancho de la captura, que tiene proporción fija 16/10. */
.imb-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Arranca poco después del borde superior de la captura y llega a negro pleno al entrar en la
     sección siguiente. La altura se deduce del ancho de la captura, de proporción fija. */
  height: calc(min(100vw - 48px, 1120px) / 1.3 + 40px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, #000 86%);
  pointer-events: none;
  /* Sobre el fondo y bajo el contenido: oscurece la escena, nunca la captura. */
  z-index: 0;
}

/* ---------- esquema ---------- */
.imb-scheme {
  display: none !important;
  position: relative;
  perspective: 900px;
  /* Incluye el canvas y su capa de cristal: ambos desaparecen al mismo ritmo que los sellos. */
  opacity: var(--imb-hero-details-opacity, 1);
  transition: opacity 380ms ease;
}

.imb-scheme svg {
  width: 100%;
  height: auto;
  display: block;
}

/* El bloque giratorio se pinta en un lienzo encima del esquema: un SVG no puede reordenar caras
   por profundidad y aquí hace falta al girar. */
.imb-scheme .imb-logo3d {
  position: absolute;
  left: 62%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(165%, 1200px);
  height: auto;
  aspect-ratio: 1;
  cursor: grab;
  /* En el móvil el lienzo ocupa medio hero: con `touch-action: none` se tragaba el gesto de
     desplazar la página aunque el dedo cayera en el vacío. `pan-y` deja el scroll vertical al
     navegador y nos quedamos con el arrastre horizontal, que es el que gira las piezas. */
  touch-action: pan-y;
}

.imb-scheme .imb-logo3d:active {
  cursor: grabbing;
}

/* El vaivén va aquí y no en la geometría: moviendo los cuerpos, la silueta que recorta el cristal
   se reescribía en cada fotograma y las esferas parpadeaban. Lienzo y cristal comparten animación,
   así que suben y bajan pegados. */
@keyframes imb-logo-float {
  from {
    transform: translate(-50%, calc(-50% + 9px));
  }

  to {
    transform: translate(-50%, calc(-50% - 9px));
  }
}

.imb-scheme .imb-logo3d,
.imb-scheme .imb-logo3d-glass {
  animation: imb-logo-float 9s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {

  .imb-scheme .imb-logo3d,
  .imb-scheme .imb-logo3d-glass {
    animation: none;
  }
}

/* El cristal de la figura: mismo desenfoque que la barra, recortado por la silueta del bloque. */
.imb-scheme .imb-logo3d-glass {
  position: absolute;
  left: 62%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(165%, 1200px);
  aspect-ratio: 1;
  pointer-events: none;
  backdrop-filter: blur(60px) saturate(1.05);
  -webkit-backdrop-filter: blur(60px) saturate(1.05);
  /* Sin recorte todavía, el filtro ocupaba un rectángulo completo al recargar. */
  visibility: hidden;
}

.imb-scheme .imb-logo3d-glass.is-ready {
  visibility: visible;
}

/* La figura se aparta a la derecha para dejar sitio al texto del hero. En una columna sola no hay
   texto al lado, así que vuelve al centro. Va DESPUÉS de la regla base a propósito: comparten
   especificidad y gana la última. */
@media (max-width: 720px) {

  .imb-scheme .imb-logo3d,
  .imb-scheme .imb-logo3d-glass {
    left: 50%;
  }

  /* El hueco que reserva el esquema se recorta para que las marcas de confianza entren en la
     primera pantalla. La figura no se encoge: el lienzo mide 165% y sobresale del contenedor. */
  .imb-scheme svg {
    height: 50px;
  }

  /* En una columna sola las marcas de confianza se comían la primera pantalla: fuera. */
  .imb-trust {
    display: none;
  }

  /* El aire bajo la captura ya lo pone la fila de la explicación, que se centra en él. Sumarle
     relleno solo empujaba la sección siguiente fuera de sitio. */
  .imb-hero {
    padding-bottom: 0;
  }

  /* Ancla el velo a la captura: medir desde el final del hero lo bajaba con las tarjetas largas.
     La transición conserva turquesa detrás de la mitad superior y remata en negro cerca del pie. */
  .imb-hero::after {
    display: none;
  }

  .imb-shot-stage {
    margin-bottom: 8px;
    isolation: isolate;
  }

  .imb-shot-stage::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -80px;
    /* 72px de relleno del hero + 8px de margen del visor. */
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: -1;
    /* La captura mide 59.704cqw de alto; las paradas no dependen del texto de la tarjeta. */
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 6cqw,
        rgba(0, 0, 0, 0.35) 22cqw,
        rgba(0, 0, 0, 0.78) 38cqw,
        #000 52cqw);
  }
}

/* Tarjetas con cuerpo: cara frontal translúcida y dos caras de canto, el mismo vidrio que el
   resto de la escena. Quietas: aquí no gira nada. */
.imb-scheme .wires path {
  fill: none;
  stroke: hsla(188 60% 82% / 0.85);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tarjetas con cuerpo: cara frontal translúcida y dos cantos, el mismo vidrio de los conductos. */
.imb-scheme .chip path {
  stroke: hsla(188 55% 70% / 0.42);
  stroke-width: 1;
}

.imb-scheme .chip .chip-face {
  fill: hsla(186 30% 30% / 0.62);
}

.imb-scheme .chip .chip-side {
  fill: hsla(186 30% 22% / 0.74);
}

.imb-scheme .chip .chip-top {
  fill: hsla(186 28% 44% / 0.58);
}

.imb-scheme .lbl {
  font-family: inherit;
  font-size: 11px;
  fill: #cfeeea;
  letter-spacing: 0.06em;
}

.imb-scheme .lbl.dim {
  fill: rgba(207, 238, 234, 0.5);
  font-size: 10px;
}

.imb-scheme .lbl.big {
  font-size: 14px;
  letter-spacing: 0.18em;
  fill: #fff;
}

/* Bloque isométrico: cada cara con su propia luz, y las guías a trazos girando muy despacio. */
.imb-scheme .mark3d .face-top {
  fill: #dff3f0;
}

.imb-scheme .mark3d .face-left {
  fill: #78b3b0;
}

.imb-scheme .mark3d .face-right {
  fill: #3d7f7d;
}

.imb-scheme .mark3d .edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
}

.imb-scheme .mark3d .guides path {
  fill: none;
  stroke: rgba(37, 150, 190, 0.55);
  stroke-width: 1;
  stroke-dasharray: 6 8;
  animation: imb-dash 9s linear infinite;
}

@keyframes imb-dash {
  to {
    stroke-dashoffset: -140;
  }
}

.imb-scheme .mark3d .piece {
  animation: imb-float 7s ease-in-out infinite;
}

.imb-scheme .mark3d .piece[data-piece="2"] {
  animation-delay: -3.5s;
}

@keyframes imb-float {

  0%,
  100% {
    transform: translateY(-4px);
  }

  50% {
    transform: translateY(6px);
  }
}

.imb-scheme .pulse {
  animation: imb-pulse 4.5s ease-in-out infinite;
  transform-origin: 490px 340px;
}

@keyframes imb-pulse {

  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.imb-scheme .core-mark circle {
  animation: imb-blink 3.2s ease-in-out infinite;
}

.imb-scheme .core-mark circle:nth-child(2n) {
  animation-delay: 0.8s;
}

.imb-scheme .core-mark circle:nth-child(3n) {
  animation-delay: 1.6s;
}

@keyframes imb-blink {

  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

/* ---------- secciones ---------- */
.imb-landing section.imb-dark {
  padding: 120px 0;
  background: #000;
}

.imb-lead {
  max-width: 720px;
  display: grid;
  gap: 18px;
  margin-bottom: 72px;
}

.imb-lead.center {
  margin-inline: auto;
  text-align: center;
}

.imb-lead h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.15;
}

.imb-lead p {
  color: var(--text-70);
  font-size: 18px;
}

.imb-feature {
  display: grid;
  gap: 28px;
  margin-bottom: 96px;
}

.imb-feature-copy {
  display: grid;
  gap: 12px;
  max-width: 620px;
}

.imb-feature-copy h3 {
  font-size: clamp(22px, 2vw, 28px);
}

.imb-feature-copy p {
  color: var(--text-70);
}

.imb-plate {
  height: clamp(280px, 42vw, 520px);
  border-radius: 24px;
  border: 1px solid var(--edge-soft);
  position: relative;
  overflow: hidden;
  background: hsl(178 38% 8%);
}

.imb-plate::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(closest-side, var(--acc-400), transparent 72%) 18% 22% / 75% 80% no-repeat,
    radial-gradient(closest-side, var(--acc-200), transparent 72%) 78% 30% / 62% 70% no-repeat,
    radial-gradient(closest-side, var(--acc-800), transparent 74%) 48% 88% / 90% 75% no-repeat;
  filter: blur(30px) brightness(1.1);
  animation: imb-drift 26s ease-in-out infinite alternate;
}

.imb-plate[data-plate="2"]::before {
  animation-duration: 32s;
  animation-direction: alternate-reverse;
}

.imb-plate[data-plate="3"]::before {
  animation-duration: 38s;
}

.imb-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.34));
}

.imb-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 820px) {
  .imb-cols {
    grid-template-columns: 1fr;
  }
}

.imb-col {
  border-top: 1px solid var(--edge-soft);
  padding-top: 22px;
  display: grid;
  gap: 14px;
}

.imb-col h4 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.imb-landing a.imb-link {
  color: var(--acc-200);
  font-size: 15px;
}

.imb-landing a.imb-link:hover {
  opacity: 0.75;
}

.imb-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 900px) {
  .imb-quotes {
    grid-template-columns: 1fr;
  }
}

.imb-quotes blockquote {
  margin: 0;
  padding: 30px;
  border-radius: 22px;
  border: 1px solid var(--edge-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  display: grid;
  gap: 20px;
  align-content: space-between;
}

.imb-quotes footer {
  font-size: 13px;
  color: var(--text-50);
}

.imb-closing {
  border-radius: 28px;
  padding: 90px 40px;
  text-align: center;
  display: grid;
  gap: 26px;
  justify-items: center;
  border: 1px solid var(--edge-soft);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(28, 149, 148, 0.42), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
}

.imb-foot {
  border-top: 1px solid var(--edge-soft);
  padding: 64px 0 40px;
  background: #000;
}

.imb-foot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 900px) {
  .imb-foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.imb-foot h5 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-50);
}

.imb-foot a {
  display: block;
  font-size: 14px;
  color: var(--text-70);
  padding: 5px 0;
}

.imb-foot a:hover {
  color: var(--acc-200);
}

.imb-foot-end {
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
  font-size: 13px;
  color: var(--text-50);
}

.imb-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.imb-reveal.on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .imb-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .imb-hero-video,
  .imb-plate::before,
  .imb-scheme .wires path,
  .imb-scheme .pulse,
  .imb-scheme .core-mark circle {
    animation: none;
  }

  .imb-hero-bg .imb-static {
    animation: none;
  }

  .imb-has-shot-motion .imb-shot {
    transform: none;
  }

  .imb-shot-stage.is-reduced .imb-shot-tour {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    margin-top: 16px;
  }

  .imb-shot-stage.is-reduced .imb-shot-callout {
    position: relative;
    inset: auto;
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .imb-shot-stage.is-reduced .imb-tour-advance {
    display: none;
  }

  .imb-shot-stage.is-reduced .imb-callout-card {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    /* La lista estática no pasa por `is-active`: sin esto la tarjeta se queda transparente. */
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .imb-shot-stage.is-reduced .imb-shot-tour {
    grid-template-columns: 1fr;
  }
}

/* Intelligence workflow: semantic, responsive, monochrome layers. */
/* CÓMO FUNCIONA: RESUMEN A LA IZQUIERDA, ORGANIGRAMA A LA DERECHA.
   El resumen se queda pegado mientras el diagrama pasa: son siete fases y, en el flujo normal,
   el título se perdía por arriba antes de la mitad. */
.imb-landing section.imb-pillars {
  padding: 0;
  margin: 0 0 clamp(72px, 9vw, 128px);
}

.imb-pillars-heading {
  text-align: center;
  margin-bottom: 48px;
}

.imb-pillars-heading h2 {
  margin: 0 0 20px;
  color: #7ab0b4;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.imb-pillars-heading p {
  margin: 0 auto;
  max-width: 85ch;
  color: var(--text-70);
  font-size: 19px;
  text-wrap: balance;
}

.imb-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
}

.imb-pillar {
  padding: clamp(24px, 2.4vw, 40px) 28px;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 16px;
}

.imb-pillar svg {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 26px;
  color: #7ab0b4;
}

.imb-pillar h3 {
  margin: 0 0 18px;
  color: #7ab0b4;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.imb-pillar p {
  margin: 0;
  color: var(--text-70);
  font-size: 16px;
  line-height: 1.75;
}

@media (max-width: 1180px) {
  .imb-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .imb-pillars-grid {
    grid-template-columns: 1fr;
  }

  .imb-pillars-heading {
    margin-bottom: 32px;
  }
}

.imb-how {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  margin: 0 0 112px;
}

/* Sin `sticky`: con los párrafos nuevos el resumen mide casi lo mismo que el diagrama, y pegarlo
   arriba solo servía para que se saliera por abajo. */
.imb-how-copy {
  align-self: start;
}

.imb-how-copy h2 {
  margin: 0 0 20px;
  color: #7ab0b4;
  font-family: "Engramite Display", "Engramite Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.imb-how-copy p {
  margin: 0 0 16px;
  max-width: 42ch;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.75;
}

.imb-how-copy p:last-child {
  margin-bottom: 0;
}

/* Sin panel: el diagrama se sostiene con su eje y su tipografía. Un fondo y un filete alrededor
   solo dibujaban una caja dentro de otra. */
.imb-how-panel {
  position: relative;
}

.imb-how-panel .imb-flow {
  margin: 0;
}

@media (max-width: 900px) {
  .imb-how {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    margin-bottom: 72px;
  }

  .imb-how-copy {
    position: static;
  }
}

/* DIAGRAMA DEL FLUJO, EN CAPAS.
   Una columna: un eje fino con un nodo por fase y, colgando de él, la explicación. Todo en blanco
   sobre negro y sin más color: el peso lo llevan la tipografía y el filete, no cajas ni sombras.
   Las fases que se abren en dos (ejecución, evidencia, expediente) parten su fila en dos tarjetas
   y vuelven a una sola columna en pantallas estrechas. */
.imb-flow {
  margin: 0 0 112px;
  color: #fff;
  scroll-margin-top: 90px;
}

.imb-stack {
  list-style: none;
  margin: 0;
  padding: 0;
}

.imb-stack>li {
  position: relative;
  padding: 0 0 15px 26px;
}

/* El eje nace en el centro del nodo y muere en el siguiente, así que el último tramo sobra. */
.imb-stack>li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.imb-stack>li:last-child::before {
  display: none;
}

.imb-stack>li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: #000;
}

.imb-stack-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}

.imb-stack-num {
  color: rgba(255, 255, 255, 0.42);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.imb-stack-phase {
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.imb-stack-body {
  display: grid;
  gap: 8px;
}

.imb-stack-body.is-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.imb-stack-card {
  min-width: 0;
}

/* Las dos ramas se separan con un filete, no con dos cajas. */
.imb-stack-body.is-split>.imb-stack-card+.imb-stack-card {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.imb-stack-card h4 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

.imb-stack-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  line-height: 1.55;
}

.imb-stack-card small {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .imb-stack-body.is-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .imb-stack-body.is-split>.imb-stack-card+.imb-stack-card {
    padding-left: 0;
    border-left: 0;
  }

  .imb-stack>li {
    padding-left: 22px;
  }
}

/* EL ORGANIGRAMA ES LA MARCA.
   Catorce rectángulos repartidos 2 · 2 · 4 · 4 · 2 —el mismo patrón que los catorce círculos del
   símbolo de Engramite—, con su texto dentro y encadenados por una línea que va DEBAJO: las cajas
   son opacas y la tapan, así que el trazo solo asoma entre una y la siguiente. */
.imb-landing .imb-flow {
  margin: 0;
  color: #fff;
  scroll-margin-top: 90px;
}

.imb-landing .imb-glyph-grid {
  position: relative;
  display: grid;
  /* Dos hemisferios con un hueco real en medio, como en el símbolo. La columna del centro está
     vacía a propósito: las cajas van a las columnas 1, 2, 4 y 5. Los porcentajes son los mismos
     que usa el trazado, o la línea no caería sobre las cajas. */
  grid-template-columns: repeat(2, minmax(0, 1fr)) 8% repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  /* El carril entre filas lleva la línea de retorno: con 10 px no cabía y se pegaba a las cajas. */
  gap: 22px 1.6%;
}

/* El lienzo de la línea cubre la rejilla entera y se estira con ella: sus coordenadas son los
   centros de celda en tanto por ciento, así que no hay que medir nada en píxeles. */
.imb-landing .imb-glyph-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.imb-landing .imb-glyph-path {
  fill: none;
  /* El color de la casa, pero rebajado: a plena intensidad el trazo se comía las cajas. */
  stroke: rgba(122, 176, 180, 0.42);
  /* El mismo grosor que el filete de las cajas: `non-scaling-stroke` lo mantiene en 1 px reales
     pese a que el lienzo se estire. */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Un punto recorre la tubería de principio a fin. Va dentro del lienzo, que está por debajo de
   las cajas: al entrar en una desaparece y vuelve a asomar al salir, como si pasara por dentro. */
.imb-landing .imb-glyph-runner-dot {
  fill: #7ab0b4;
}

.imb-landing .imb-glyph-box {
  position: relative;
  grid-column: var(--c);
  grid-row: var(--f);
  padding: 8px 10px;
  border: 1px solid rgba(122, 176, 180, 0.42);
  border-radius: 4px;
  background: #000;
}

.imb-landing .imb-glyph-box b {
  display: block;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.imb-landing .imb-glyph-box p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.60);
  font-size: 9.5px;
  line-height: 1.45;
}

@media (max-width: 720px) {

  /* Sin ancho para cuatro columnas la figura no se lee: las cajas se apilan en el orden del
     recorrido y la línea se retira. */
  .imb-landing .imb-glyph-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 10px;
  }

  .imb-landing .imb-glyph-box {
    grid-column: 1;
    grid-row: auto;
  }

  .imb-landing .imb-glyph-wires {
    display: none;
  }
}

/* ---------- núcleo ---------- */
/* Sin tarjeta: cada bloque se separa con una línea, como el resto de rejillas de la página. */
.imb-landing section.imb-kernel {
  padding: 120px 0;
  background: #000;
  color: var(--text);
}

.imb-landing section.imb-kernel .imb-lead h2 {
  color: var(--text);
  font-family: "Engramite Display", "Engramite Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.imb-landing section.imb-kernel .imb-lead p {
  color: var(--text-70);
}

.imb-kernel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 24px;
  row-gap: 48px;
}

@media (max-width: 900px) {
  .imb-kernel-grid {
    grid-template-columns: 1fr;
  }
}

.imb-kernel-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
}

.imb-kernel-card h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.imb-kernel-card p {
  color: var(--text-70);
  font-size: 15.5px;
}

.imb-kernel-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 24px;
  margin-top: 72px;
}

@media (max-width: 900px) {
  .imb-kernel-cats {
    grid-template-columns: 1fr;
    row-gap: 44px;
  }
}

.imb-kernel-list h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.imb-kernel-note {
  margin: 6px 0 20px;
  color: var(--text-50);
  font-size: 14.5px;
}

.imb-kernel-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.imb-kernel-list li {
  display: grid;
  gap: 3px;
  padding: 13px 0;
  border-top: 1px solid var(--edge-soft);
}

.imb-kernel-list li b {
  font-weight: 600;
  font-size: 15px;
}

.imb-kernel-list li span {
  color: var(--text-70);
  font-size: 14.5px;
  line-height: 1.45;
}

.imb-kernel-flow {
  margin: 0 0 80px;
  display: grid;
  gap: 18px;
}

.imb-kernel-flow figcaption {
  order: 2;
  text-align: center;
  color: var(--text-50);
  font-size: 14.5px;
}

.imb-kernel-flow svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--text);
}

.imb-flow-frame {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-dasharray: 5 6;
}

.imb-flow-frame-label {
  fill: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 600;
}

.imb-kernel-flow .imb-flow-box rect {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.28);
}

.imb-kernel-flow .imb-flow-wire path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.1;
  marker-end: url(#imb-flow-tip);
}

/* El tramo horizontal que reparte hacia las tres cajas no lleva punta: la punta va en las bajadas. */
.imb-kernel-flow .imb-flow-wire path.imb-flow-both {
  marker-start: url(#imb-flow-tip);
}

.imb-kernel-flow .imb-flow-wire path.imb-flow-up {
  marker-end: none;
}

.imb-kernel-flow .imb-flow-label text {
  fill: var(--text-70);
  font-size: 13px;
}

.imb-kernel-flow .imb-flow-label text.t {
  fill: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.imb-kernel-flow .imb-flow-label text.s {
  fill: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  letter-spacing: 0.1em;
}

@media (max-width: 720px) {
  .imb-kernel-flow {
    margin-bottom: 56px;
  }
}

/* ---------- paso cero del recorrido ---------- */
/* La marca cubre la captura mientras se explica dónde corre todo. Se enciende con `:has()` desde
   la tarjeta activa porque el overlay es hermano ANTERIOR de la lista de tarjetas. */
.imb-shot-zero {
  --imb-zero-step: 750ms;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Mientras la marca y el titular están a la vista, la captura se tapa con el lienzo opaco de la
     aplicación: `--p-app-bg` (#0e0e0e) con el ruido de `--grain-noise` en overlay. */
  background-color: #0e0e0e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-blend-mode: overlay;
  opacity: 0;
  visibility: hidden;
  /* Al ocultarse, `visibility` espera al fundido: sin el retardo el relleno desaparecía de golpe. */
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
  pointer-events: none;
  z-index: 3;
}

.imb-shot-zero-mark {
  grid-area: 1 / 1;
  display: block;
  width: min(46%, 420px);
  aspect-ratio: 1;
  /* El color lo pinta el FONDO por debajo de la máscara: color de la casa, plano. Antes se
     encendía fila a fila y esa carga sobraba —la marca ya está dicha con que aparezca—. */
  position: relative;
  background: #7ab0b4;
  -webkit-mask: var(--imb-zero-mark) center / contain no-repeat;
  mask: var(--imb-zero-mark) center / contain no-repeat;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55));
}

/* EL TITULAR DEL PASO CERO.
   Entra cuando la espada y la marca ya se han apagado, en la misma celda que ocupaba la marca y
   en su mismo color. */
.imb-shot-zero-title {
  grid-area: 1 / 1;
  position: relative;
  max-width: 88%;
  margin: 0;
  font-family: "Engramite Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 4.6cqi, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  text-wrap: balance;
  color: #7ab0b4;
  opacity: 0;
  transform: translateY(8px);
  /* Entra con el mismo fundido con el que se apaga la marca. */
  transition:
    opacity var(--imb-zero-step, 750ms) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--imb-zero-step, 750ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.imb-landing.imb-zero-title .imb-shot-zero-title {
  opacity: 1;
}

.imb-landing.imb-zero-title .imb-shot-zero-title {
  transform: none;
}

/* Solo cuando la captura está levantada DEL TODO (`imb-shot-raised`, progreso > 0.995): mientras
   sube, la marca se queda en lila. */
/* Se retira con un fundido corto: sin parpadeos, sin cortes. */
.imb-landing.imb-zero-cut .imb-shot-zero-mark {
  animation: imb-zero-fade var(--imb-zero-step, 750ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes imb-zero-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .imb-landing.imb-zero-cut .imb-shot-zero-mark {
    animation: none;
    opacity: 0;
  }
}

/* La marca vive en la portada: se ve con el recorrido sin empezar y durante su propia
   diapositiva. En cuanto el recorrido pasa de ahí, se retira aunque se vuelva al hero. */
.imb-shot-stage[data-tour-state="idle"] .imb-shot-zero,
.imb-shot-stage:has(.imb-shot-callout.is-device-zero.is-active) .imb-shot-zero {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease), visibility 0s;
}

.imb-shot-pin.is-empty {
  display: none;
}

/* La diapositiva 0 es SOLO la marca sobre la captura: su tarjeta se queda en el DOM —el recorrido
   empareja punto, tarjeta y segmento por índice— pero no se pinta. */
.imb-shot-callout.is-device-zero {
  display: none;
}

/* Al volver a la portada la captura se va de pantalla, pero la pastilla del paso —que va absoluta
   sobre ella— se quedaba flotando sobre el hero. Mientras la captura no se ve, el recorrido queda
   aparcado; vuelve solo al bajar. */
.imb-shot-stage.is-parked .imb-shot-callout {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* ---------- organigrama del turno ---------- */
/* Cabe en una hoja apaisada 16:9 y se lee de izquierda a derecha. Misma letra y mismas casillas
   que el esquema de «How it works»: caja negra, borde de un píxel y conectores rectos. */
.imb-org {
  margin: 0 0 80px;
}

.imb-org figcaption {
  margin-top: 20px;
  text-align: center;
  color: var(--text-50);
  font-size: 13px;
}

.imb-org-sheet {
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: 0.85fr 1fr 1.9fr 1.15fr;
  gap: 0 34px;
  align-items: center;
}

.imb-org-col {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: center;
  height: 100%;
}

.imb-org-col.is-exec {
  align-content: center;
  gap: 14px;
}

.imb-org-tag {
  color: var(--text-50);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* La casilla: la misma receta del otro esquema. */
.imb-org-node,
.imb-org-branch,
.imb-org-branch li {
  border: 1px solid rgba(122, 176, 180, 0.42);
  border-radius: 4px;
  background: #000;
  padding: 8px 10px;
}

.imb-org-node b,
.imb-org-branch li b {
  display: block;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.imb-org-node span,
.imb-org-branch li span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 9.5px;
  line-height: 1.45;
}

.imb-org-node.is-head {
  border-color: rgba(122, 176, 180, 0.75);
}

/* «Tools» es el grupo: dentro van las dos familias que el agente puede ejecutar. */
.imb-org-tools {
  border: 1px solid rgba(122, 176, 180, 0.42);
  border-radius: 4px;
  background: #000;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.imb-org-tools>h4 {
  margin: 0;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.imb-org-tools>p {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  line-height: 1.4;
}

.imb-org-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.imb-org-branch {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 10px;
}

.imb-org-branch h4 {
  margin: 0;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.imb-org-branch>p {
  margin: 0 0 2px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  line-height: 1.4;
}

.imb-org-branch ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.imb-org-branch li {
  padding: 5px 7px;
}

.imb-org-branch li b {
  font-size: 10px;
}

.imb-org-branch li span {
  margin-top: 1px;
  font-size: 9px;
}

/* Conectores. Entre columnas, un tramo recto con punta; dentro de la columna de contexto, la
   vertical que reparte a las cuatro casillas; y bajo «Execution», la bajada a las tres familias. */
.imb-org-col+.imb-org-col::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 50%;
  width: 34px;
  border-top: 1px solid rgba(122, 176, 180, 0.42);
}

.imb-org-col.is-context .imb-org-node::before {
  content: "";
  position: absolute;
  left: -17px;
  width: 17px;
  border-top: 1px solid rgba(122, 176, 180, 0.28);
}

.imb-org-col.is-context .imb-org-node {
  position: relative;
}

.imb-org-col.is-context .imb-org-node::before {
  top: 50%;
}

.imb-org-col.is-context::after {
  content: "";
  position: absolute;
  left: -17px;
  top: 22%;
  bottom: 8%;
  border-left: 1px solid rgba(122, 176, 180, 0.28);
}

.imb-org-col.is-start .imb-org-node+.imb-org-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  height: 10px;
  border-left: 1px solid rgba(122, 176, 180, 0.42);
}

.imb-org-col.is-start .imb-org-node {
  position: relative;
}

.imb-org-col.is-end .imb-org-node {
  position: relative;
}

.imb-org-col.is-end .imb-org-node+.imb-org-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  height: 10px;
  border-left: 1px solid rgba(122, 176, 180, 0.42);
}

/* De «Execution» bajan las tres familias: una vertical corta y el peine que las reparte. */
.imb-org-col.is-exec .imb-org-node.is-head {
  position: relative;
}

.imb-org-col.is-exec .imb-org-node.is-head::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  height: 14px;
  border-left: 1px solid rgba(122, 176, 180, 0.42);
}

/* Las interfaces cuelgan del expediente: es lo que el analista abre para mirarlo. */
.imb-org-col.is-end .imb-org-branch {
  position: relative;
  margin-top: 14px;
}

.imb-org-col.is-end .imb-org-branch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  height: 14px;
  border-left: 1px solid rgba(122, 176, 180, 0.42);
}

.imb-org-tools {
  position: relative;
  margin-top: 14px;
}

@media (max-width: 1024px) {
  .imb-org-sheet {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .imb-org-col+.imb-org-col::before,
  .imb-org-col.is-context::after,
  .imb-org-col.is-context .imb-org-node::before {
    display: none;
  }

  .imb-org-branches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .imb-org-branches {
    grid-template-columns: 1fr;
  }
}