/* Portada pública de Durandir Harness.
   Todo va prefijado con .durandite-ui-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: "Durandir Display";
  src: url("durandite-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

/* La Durandir 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: "Durandir Display";
  src: url("durandite-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: "Durandir Display";
  src: url("durandite-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 Durandir Display. */
@font-face {
  font-family: "Durandir Sans";
  src: url("durandite-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

@font-face {
  font-family: "Satoshi";
  src: url("Satoshi-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.durandite-ui-landing {
  --acc-050: #d9f2ef;
  --acc-200: #909eae;
  --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: "Durandir 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;
}

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

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

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

.durandite-ui-landing p {
  margin: 0;
}

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

/* ---------- franja de avisos ---------- */
/* El aviso es parte de la página: se va con el scroll y el navbar, que empieza justo debajo,
   sube con él píxel a píxel hasta tocar el borde, donde se queda pegado. Al volver arriba del todo
   el aviso reaparece en su sitio. Sin saltos ni animaciones de posición. */
.durandite-ui-landing {
  --durandite-ui-ticker-h: 39px;
  --durandite-ui-nav-phase: 80ms;
}

.durandite-ui-landing.durandite-ui-ticker-dismissed {
  --durandite-ui-ticker-h: 0px;
}

.durandite-ui-ticker {
  position: relative;
  margin-bottom: -39px;
  z-index: 210;
  background: #909eae;
  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;
  height: 39px;
  padding-block: 0;
  padding-inline: clamp(20px, 3.5vw, 48px);
  font-size: 12px;
  font-weight: 500;
}

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

/* Sin anclaje de scroll: cerrar el aviso con la equis quita su franja del hero, y el navegador
   corregía la posición para compensarla. */
html:has(.durandite-ui-landing),
body:has(.durandite-ui-landing) {
  overflow-anchor: none;
  /* Cortar el rubber-band al volver rápido a top: nunca enseñar lienzo negro sobre el aviso. */
  overscroll-behavior-y: none;
}

html.durandite-ui-landing-scroll-managed {
  overscroll-behavior-y: none;
}

.durandite-ui-landing.durandite-ui-tour-focus .durandite-ui-ticker {
  visibility: hidden;
  pointer-events: none;
}

.durandite-ui-ticker p {
  flex: 1;
}

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

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

.durandite-ui-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;
}

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

.durandite-ui-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. */
.durandite-ui-nav-dock {
  position: sticky;
  top: 0;
  /* Siempre por encima de la captura y del visor: cambiar de capa al entrar en él hacía titilar la
     barra. El aviso va aún más arriba. */
  z-index: 200;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* 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. Empieza
     debajo del aviso y devuelve ese hueco para que el hero siga arrancando arriba del todo. */
  margin-top: var(--durandite-ui-ticker-h, 0px);
  margin-bottom: calc(-58px - var(--durandite-ui-ticker-h, 0px));
}

.durandite-ui-nav {
  position: relative;
  isolation: isolate;
  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: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

@media (min-width: 1025px) {
  .durandite-ui-landing .durandite-ui-nav { padding-inline: 18px; }
}

/* Capa independiente: mantener texto y SVG fuera del plano con backdrop-filter evita que la
   captura 3D del visor salte por encima del navbar durante la recomposición del navegador.
   El cristal está siempre montado y solo cambia su opacidad. Alternar el `backdrop-filter`
   entre `none` y el desenfoque obligaba a Chrome a crear y destruir la capa en cada cambio de
   estado, y el fondo de la barra titilaba o desaparecía sobre el vídeo y la captura. */
.durandite-ui-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(14, 14, 14, 0.18);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  opacity: 0;
  transform: translateZ(0);
  /* Retorno: destintar primero, sin espera. */
  transition: opacity var(--durandite-ui-nav-phase) linear;
}

.durandite-ui-landing .durandite-ui-nav a.durandite-ui-brand,
.durandite-ui-nav a.durandite-ui-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;
}

.durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo {
  height: 32px;
  width: auto;
  max-width: 260px;
  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 durandite-ui-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) {
  .durandite-ui-copy h1 {
    animation: none;
    background-position: 50% 0;
  }
}

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

.durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white {
  display: block !important;
  /* Inline SVG painted with `currentColor`. Width is explicit from the viewBox (2100 × 494): an
     <svg> without a width attribute does not derive it from the height the same way in every WebKit. */
  height: 26px;
  width: calc(26px * 2100 / 494);
  max-width: 260px;
  flex: 0 0 auto;
  overflow: visible;
  color: #ffffff;
}

/* Símbolo y texto del SVG permanecen blancos en cualquier posición. */
.durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav .durandite-ui-brand-logo-white {
  color: #ffffff;
}

.durandite-ui-landing .durandite-ui-nav a.durandite-ui-brand:hover .durandite-ui-brand-logo-white,
.durandite-ui-landing .durandite-ui-nav a.durandite-ui-brand:focus-visible .durandite-ui-brand-logo-white {
  color: #ffffff;
}

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

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

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

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

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

.durandite-ui-landing .durandite-ui-nav a.durandite-ui-login,
.durandite-ui-nav a.durandite-ui-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. */
.durandite-ui-landing .durandite-ui-nav a.durandite-ui-login:hover,
.durandite-ui-nav a.durandite-ui-login:hover {
  opacity: 1;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

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

/* Sin subrayado: el color de marca aparece únicamente durante hover o foco. */
.durandite-ui-landing .durandite-ui-nav a.durandite-ui-nav-link:hover,
.durandite-ui-landing .durandite-ui-nav a.durandite-ui-nav-link:focus-visible {
  color: var(--durandite-ui-marca, #909eae);
  text-decoration: none;
}

/* Con la página movida los enlaces permanecen blancos, también durante hover y foco. */
.durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav a.durandite-ui-nav-link {
  color: #ffffff;
}

.durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav a.durandite-ui-nav-link:hover,
.durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav a.durandite-ui-nav-link:focus-visible {
  color: var(--durandite-ui-marca, #909eae);
}

.durandite-ui-nav.is-scrolled {
  background: transparent;
  color: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

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

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

.durandite-ui-nav.is-scrolled .durandite-ui-links a {
  color: #ffffff;
  opacity: 0.86;
}

.durandite-ui-nav.is-scrolled .durandite-ui-links a:hover {
  color: #ffffff;
  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. */
.durandite-ui-landing .durandite-ui-nav.is-scrolled a.durandite-ui-login,
.durandite-ui-nav.is-scrolled a.durandite-ui-login {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

.durandite-ui-landing .durandite-ui-nav.is-scrolled a.durandite-ui-login:hover,
.durandite-ui-nav.is-scrolled a.durandite-ui-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. */
  .durandite-ui-landing .durandite-ui-nav,
  .durandite-ui-landing .durandite-ui-nav.is-scrolled {
    background: transparent;
    color: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .durandite-ui-landing .durandite-ui-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. */
  .durandite-ui-landing .durandite-ui-ticker {
    justify-content: center;
  }

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

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

  .durandite-ui-landing .durandite-ui-nav .durandite-ui-links {
    display: none;
  }

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

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

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

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

/* ---------- portada ---------- */
.durandite-ui-hero {
  position: relative;
  isolation: isolate;
  /* Arriba, la franja del aviso superpuesto: el contenido empieza donde empezaba cuando el aviso
     iba en el flujo. */
  padding: var(--durandite-ui-ticker-h, 0px) 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. */
.durandite-ui-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;
}

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

/* 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. */
.durandite-ui-hero-bg span {
  position: absolute;
  /* Lo justo para que el vaivén no enseñe el borde: cuanto mayor es la capa, más tarda en
     pintarse. */
  inset: -12%;
  display: block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.durandite-ui-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%;
  /* Un pelín ampliado: el desenfoque difumina también los bordes y dejaba un filo claro. */
  filter: blur(6px);
  transform: scale(1.04);
  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;
}

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

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

/* El desenfoque va en el propio vídeo, no en una capa que mira lo que tiene detrás: mientras la
   captura sube por delante del hero, Safari y Firefox rehacían ese `backdrop-filter` en cada
   fotograma y el movimiento iba a trompicones. Chromium era el único que lo componía gratis. */
.durandite-ui-hero-bg .durandite-ui-blur {
  inset: 0;
  z-index: 4;
  transform: none;
  will-change: auto;
}

/* 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. */

.durandite-ui-hero-bg .durandite-ui-cortex {
  /* Surcos de corteza: ruido de frecuencia baja cortado en franjas y desenfocado. */
  /* Horneados en imagen: dibujar el ruido desde un SVG con `feTurbulence` obligaba a Safari a
     rasterizarlo del tamaño de la capa cada vez que tocaba repintar. */
  background-image: url("../images/hero-cortex.webp");
  background-size: cover;
  /* La textura viene ya desenfocada y contrastada en el propio fichero. Calcularla en vivo —ruido
     SVG + `filter: blur(9px) contrast(1.3)` sobre una capa mayor que la pantalla— era lo que
     atascaba a Safari: medido, apagar este fondo bajaba su p90 de 700 ms a 18 ms. La mezcla suave
     sí se queda: sin ella el ruido se ve como un pegote claro encima del vídeo. */
  mix-blend-mode: soft-light;
  opacity: 0.7;
  will-change: transform;
  /* El vaivén va solo de lado: escalar cambia el tamaño al que hay que rasterizar y obliga a
     rehacer la capa entera en cada paso. Desplazarla la mueve sin volver a pintarla. */
  animation: durandite-ui-drift 11s ease-in-out infinite alternate-reverse;
}

@keyframes durandite-ui-drift {
  from {
    transform: translate3d(-3%, -2%, 0);
  }

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

.durandite-ui-hero-bg .durandite-ui-veil {
  inset: 0;
  /* Encima del desenfoque: el degradado a negro del pie es el que funde el hero con el visor. */
  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%);
}

.durandite-ui-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) and (orientation: portrait), (max-width: 900px) and (min-height: 501px) {
  .durandite-ui-hero-grid {
    gap: 24px;
  }
}

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

.durandite-ui-copy h1,
.durandite-ui-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: "Durandir 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 `.durandite-ui-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%, #909eae 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: durandite-ui-lema-brillo 3.2s linear -2.1s infinite;
}

.durandite-ui-landing .durandite-ui-copy .durandite-ui-intro-link {
  display: inline-flex;
  /* Sobre la línea de base: con la altura de una minúscula, la flecha queda centrada en la palabra. */
  align-items: baseline;
  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);
}

/* Al pasar por encima y al pulsar toma el color de la casa. */
.durandite-ui-landing .durandite-ui-copy .durandite-ui-intro-link:hover,
.durandite-ui-landing .durandite-ui-copy .durandite-ui-intro-link:focus-visible,
.durandite-ui-landing .durandite-ui-copy .durandite-ui-intro-link:active {
  color: var(--durandite-ui-marca, #909eae);
}

/* Chevron hacia abajo: el enlace baja hasta la captura. Casi tan alto como una minúscula, con el
   trazo del grueso de la letra y su centro en el de las minúsculas (0,265 em sobre la línea de
   base): la caja mide 0,9 em, se apoya en la línea de base y baja 0,185 em. */
.durandite-ui-landing .durandite-ui-copy .durandite-ui-intro-link svg {
  position: relative;
  top: 0.185em;
  width: 0.9em;
  height: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-left: 2px;
  transition: transform 150ms var(--ease);
}

.durandite-ui-landing .durandite-ui-copy .durandite-ui-intro-link:hover svg {
  transform: translateY(2px);
}

/* 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. */
.durandite-ui-copy h1 .durandite-ui-br-sm {
  display: none;
}

@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .durandite-ui-copy h1 br:not(.durandite-ui-br-sm) {
    display: none;
  }

  .durandite-ui-copy h1 .durandite-ui-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. */
  .durandite-ui-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;
  }
}

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

.durandite-ui-mobile-intro {
  display: none;
}

.durandite-ui-landing a.durandite-ui-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(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

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

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

.durandite-ui-motto b {
  font-weight: 800;
}

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

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

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

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

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

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

.durandite-ui-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. */
.durandite-ui-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;
}

.durandite-ui-hero .durandite-ui-copy {
  position: absolute;
  left: 0;
  right: 0;
  /* En escritorio el lema va pegado al pie de la primera pantalla. Se mide desde el contenido del
     hero, que empieza bajo la franja del aviso, así que se descuenta su alto; el móvil y el
     teléfono girado lo vuelven a centrar. */
  top: calc(100svh - var(--durandite-ui-ticker-h, 39px) - clamp(48px, 9svh, 104px));
  transform: translateY(-100%);
  z-index: 4;
  /* Es un rótulo, no un obstáculo: los gestos siguen llegando a la captura de debajo. */
  pointer-events: none;
}

.durandite-ui-shot-stage {
  margin-top: 0;
}

.durandite-ui-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;
}

/* Un teléfono girado conserva muy poca altura. La reserva de escritorio (`100svh - 502px`)
   se volvería negativa y colocaría la captura detrás del lema. Mantiene aquí la composición
   de escritorio, reservando un primer plano proporcional para que título, enlace y captura
   vuelvan a ocupar bandas separadas y el recorrido tenga scroll.
   Por eso las reglas de móvil (720, 820 y 900 px) excluyen el horizontal bajo: un teléfono
   girado recibe la maquetación de escritorio, no la columna estrecha pensada para retrato. */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  .durandite-ui-hero-grid {
    min-height: max(190px, calc(100svh - 170px));
  }

  .durandite-ui-hero .durandite-ui-copy {
    top: calc(50svh - var(--durandite-ui-ticker-h, 39px));
    transform: translateY(-50%);
  }

  /* El límite de escritorio (`167.5svh - 210px`) desperdicia media pantalla cuando apenas hay
     alto: aquí la captura ocupa todo lo que queda bajo la barra (58 px) con 12 px de aire. */
  .durandite-ui-shot-stage {
    width: min(100%, 1120px, max(280px, calc((100svh - 82px) * 2896 / 1729)));
  }
}

/* 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. */
.durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-durandite {
  display: none !important;
}

.durandite-ui-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(--durandite-ui-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;
}

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

.durandite-ui-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);
  display: grid;
  place-items: center;
}

.durandite-ui-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* #262626 es `--durandite-ui-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;
}

/* La sombra solo con la captura ya en pie. Difuminar 120 px bajo una capa que gira obligaba a
   Safari a rehacerla en cada fotograma y el giro iba a tirones; quieta no cuesta nada. */
.durandite-ui-landing.durandite-ui-shot-raised .durandite-ui-shot {
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.55);
}

/* Sin `transform-style: preserve-3d`: dentro de la captura no hay nada en tres dimensiones y
   Safari renunciaba a aplanar la capa, rasterizando la imagen entera en cada fotograma.
   `will-change` va siempre puesto mientras dure el movimiento: montarlo y desmontarlo con el
   scroll era otro salto. */
.durandite-ui-has-shot-motion .durandite-ui-shot {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  will-change: transform;
  transform:
    perspective(1600px) translate3d(0, var(--durandite-ui-shot-y, 20px), var(--durandite-ui-shot-z, -90px)) rotateX(var(--durandite-ui-shot-tilt, 35deg));
}

/* Las tarjetas van encima de la captura: se inclinan con ella, con el mismo eje y los mismos
   ángulos, para no quedarse planas cuando la captura se echa atrás. */
.durandite-ui-has-shot-motion .durandite-ui-shot-tour {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  will-change: transform;
  transform:
    perspective(1600px) translate3d(0, var(--durandite-ui-shot-y, 20px), var(--durandite-ui-shot-z, -90px)) rotateX(var(--durandite-ui-shot-tilt, 35deg));
}

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

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

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

.durandite-ui-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. */
.durandite-ui-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. */
.durandite-ui-shot-callout {
  position: absolute;
  inset: 0;
  margin: 0;
  visibility: hidden;
  transition: visibility 0s linear 480ms;
}

.durandite-ui-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. */
.durandite-ui-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. */
.durandite-ui-shot-pin,
.durandite-ui-callout-badge {
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #909eae;
  box-shadow: 0 0 0 6px rgba(144, 158, 174, 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);
}

.durandite-ui-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. */
.durandite-ui-callout-badge {
  display: none !important;
}

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

.durandite-ui-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);
  /* La capa se promueve solo dentro del visor: mantener vivas las dieciséis tarjetas de cristal
     durante el scroll salía carísimo fuera de Chromium. */
  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);
}

.durandite-ui-tour-focus .durandite-ui-callout-card {
  will-change: backdrop-filter, opacity, transform;
}

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

.durandite-ui-callout-kicker {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-family: "Durandir 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;
}

.durandite-ui-callout-card h3 {
  margin: 0 0 6px;
  color: #909eae;
  font-family: "Durandir Display", "Durandir Display Bold", "Durandir 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;
}

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

/* Cada paso trae su sitio en `--durandite-ui-callout-x/-sm/-y` (ver Durandir_Landing::tour_steps). Así una
   herramienta nueva no obliga a tocar el CSS en los tres anchos. */
.durandite-ui-callout-card {
  left: var(--durandite-ui-callout-x, 22%);
  top: var(--durandite-ui-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. */
.durandite-ui-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;
  /* La franja inferior queda fuera: ahí está la barra, que vive dentro de la captura (por debajo
     de este botón) y tiene que recibir los clics. `clip-path` también recorta la zona pulsable. */
  clip-path: inset(0 0 var(--durandite-ui-advance-cut, 80px) 0);
}

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

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

.durandite-ui-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(144, 158, 174, 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 DENTRO de la captura, pegada a
   su borde inferior y sin separaciones, como la barra de un vídeo: se inclina con ella, así que
   puede seguir a la vista y cargando aunque se suelte el visor. Sólo se oculta en reposo. */
.durandite-ui-tour-meta {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 26px;
  /* Por encima del relleno del paso cero y del borde de la captura. */
  z-index: 7;
  /* El figure centra a sus hijos; sin esto la barra encogía a su contenido. */
  justify-self: stretch;
  align-self: end;
  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;
  --durandite-ui-tour-step: 4200ms;
  /* Grosor de la barra de progreso. */
  --durandite-ui-tour-line: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}

.durandite-ui-shot-stage:not([data-tour-state="idle"]) .durandite-ui-tour-meta {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease), visibility 0s;
}

.durandite-ui-tour-play {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  color: #909eae;
  cursor: pointer;
}

/* Sin marco de foco: el recuadro blanco aparecía alrededor del aro y de los tramos. */
.durandite-ui-tour-play:focus,
.durandite-ui-tour-play:focus-visible {
  outline: none;
}

.durandite-ui-tour-play svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.durandite-ui-tour-play .durandite-ui-tour-play-pause {
  stroke-width: 3.4;
}

/* El icono sigue a la pausa del usuario, no a la automática por salir de la vista. */
.durandite-ui-tour-play .durandite-ui-tour-play-resume,
.durandite-ui-tour-play[aria-pressed="true"] .durandite-ui-tour-play-pause {
  display: none;
}

.durandite-ui-tour-play[aria-pressed="true"] .durandite-ui-tour-play-resume {
  display: block;
}

.durandite-ui-tour-play .durandite-ui-tour-play-resume {
  width: 23px;
  height: 23px;
  margin: 0;
  fill: currentColor;
  stroke: none;
}

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

.durandite-ui-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%;
}

.durandite-ui-tour-progress>button {
  position: relative;
  display: block;
  width: 100%;
  height: var(--durandite-ui-tour-line);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  /* Lo que falta por cargar, en el gris de los separadores de Mosaic (`--durandite-ui-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);
}

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

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

.durandite-ui-tour-progress>button.is-filled {
  background: #909eae;
}

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

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

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

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

  to {
    transform: scaleX(1);
  }
}

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

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

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

.durandite-ui-tour-progress>button:focus,
.durandite-ui-tour-progress>button:focus-visible {
  outline: none;
}

.durandite-ui-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. */

/* Sin barra de desplazamiento en ningún dispositivo. */
html.durandite-ui-landing-scroll-managed,
html.durandite-ui-landing-scroll-managed body {
  scrollbar-width: none;
}

html.durandite-ui-landing-scroll-managed::-webkit-scrollbar,
html.durandite-ui-landing-scroll-managed body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

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

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

.durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav,
.durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav.is-scrolled,
.durandite-ui-landing.durandite-ui-tour-focus .durandite-ui-nav,
.durandite-ui-landing.durandite-ui-tour-focus .durandite-ui-nav.is-scrolled {
  background: transparent;
  color: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav::before,
.durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav.is-scrolled::before,
.durandite-ui-landing.durandite-ui-tour-focus .durandite-ui-nav::before,
.durandite-ui-landing.durandite-ui-tour-focus .durandite-ui-nav.is-scrolled::before {
  opacity: 1;
  /* Ida: empezar exactamente cuando termina de comprimirse el aviso. */
  transition: opacity var(--durandite-ui-nav-phase) linear var(--durandite-ui-nav-phase);
}

/* En top no existe cristal: hero limpio detrás de la misma barra. */
.durandite-ui-landing:not(.durandite-ui-page-moved):not(.durandite-ui-tour-focus) .durandite-ui-nav,
.durandite-ui-landing:not(.durandite-ui-page-moved):not(.durandite-ui-tour-focus) .durandite-ui-nav.is-scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 501px) {
  .durandite-ui-callout-card {
    width: min(29%, 230px);
    min-width: 180px;
    padding: 13px 14px 14px;
  }

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

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

/* En un teléfono girado la captura mide lo que un tercio de la de escritorio: la tarjeta conserva
   su sitio sobre ella, pero con la escala del ancho de la captura y no con la del portátil. */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  /* Los topes mantienen la tarjeta dentro de la captura y por encima de la barra: a esta escala
     la tarjeta ocupa casi la mitad del alto y las posiciones bajas de escritorio la sacaban. */
  .durandite-ui-callout-card {
    left: min(var(--durandite-ui-callout-x-sm, var(--durandite-ui-callout-x, 22%)), 59%);
    top: min(var(--durandite-ui-callout-y, 5%), 40%);
    width: min(38%, 230px);
    min-width: 150px;
    padding: 9px 11px 10px;
    border-radius: 10px;
  }

  .durandite-ui-callout-kicker {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .durandite-ui-callout-card h3 {
    margin-bottom: 4px;
    font-size: 15px;
  }

  .durandite-ui-callout-card p {
    font-size: 11.5px;
    line-height: 1.35;
  }

  .durandite-ui-tour-advance {
    --durandite-ui-advance-cut: 52px;
  }

  .durandite-ui-tour-meta {
    left: 22px;
    right: 22px;
    bottom: 12px;
    column-gap: 10px;
    --durandite-ui-tour-line: 6px;
  }

  .durandite-ui-tour-play {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {

  /* 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. */
  .durandite-ui-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;
  }

  .durandite-ui-tour-focus .durandite-ui-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. */
  .durandite-ui-hero-grid {
    min-height: calc(100svh - 39px - 49vw);
  }

  /* Se mide desde el contenido del hero, que empieza bajo la franja del aviso: se descuenta su alto
     para que el lema caiga en el centro exacto de la pantalla. */
  .durandite-ui-hero .durandite-ui-copy {
    top: calc(50svh - var(--durandite-ui-ticker-h, 39px));
    transform: translateY(-50%);
  }

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

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

  /* Aquí las tarjetas van debajo de la captura, no encima: no se inclinan con ella. */
  .durandite-ui-has-shot-motion .durandite-ui-shot-tour {
    transform: none;
  }

  .durandite-ui-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. */
  }

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

  .durandite-ui-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. */
  .durandite-ui-callout-card {
    box-shadow: none;
    text-align: center;
  }

  .durandite-ui-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. */
  .durandite-ui-callout-kicker {
    display: none;
  }

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

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

  .durandite-ui-tour-advance {
    --durandite-ui-advance-cut: 66px;
  }

  .durandite-ui-tour-meta {
    left: 24px;
    right: 24px;
    bottom: 14px;
  }
}

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

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

.durandite-ui-landing .durandite-ui-node-step,
.durandite-ui-landing .durandite-ui-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;
}

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

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

.durandite-ui-landing .durandite-ui-arrow::after,
.durandite-ui-landing .durandite-ui-fork>i::after,
.durandite-ui-landing .durandite-ui-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);
}

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

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

.durandite-ui-landing .durandite-ui-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. */
.durandite-ui-landing .durandite-ui-fork>i:first-child {
  left: calc(25% - 3.5px);
}

.durandite-ui-landing .durandite-ui-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. */
.durandite-ui-landing .durandite-ui-merge {
  position: relative;
  width: 100%;
  height: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

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

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

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

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

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

@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {

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

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

  .durandite-ui-landing .durandite-ui-fork {
    border-top: 0;
  }

  .durandite-ui-landing .durandite-ui-merge {
    border-bottom: 0;
  }

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

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

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

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

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

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

.durandite-ui-landing .durandite-ui-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;
}

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

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

.durandite-ui-landing .durandite-ui-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. */
.durandite-ui-landing .durandite-ui-arrow-h {
  position: relative;
  align-self: center;
  flex: 0 0 26px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.durandite-ui-landing .durandite-ui-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. */
.durandite-ui-landing .durandite-ui-elbow {
  justify-self: start;
  width: 1px;
  height: 18px;
  margin-left: calc((100% - 52px) / 6);
  background: rgba(255, 255, 255, 0.3);
}

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

.durandite-ui-landing .durandite-ui-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);
}

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

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

.durandite-ui-landing .durandite-ui-fork,
.durandite-ui-landing .durandite-ui-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);
}

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

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

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

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

@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 501px) {

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

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

  .durandite-ui-landing .durandite-ui-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);
  }

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

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

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

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

.durandite-ui-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;
}

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

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

.durandite-ui-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. */
.durandite-ui-arrow {
  position: relative;
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.3);
}

.durandite-ui-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);
}

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

.durandite-ui-branch-step {
  margin-bottom: 0;
}

/* Horquilla y empalme: media caja con tres bordes. Arriba abre, abajo cierra. */
.durandite-ui-fork,
.durandite-ui-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);
}

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

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

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

.durandite-ui-row .durandite-ui-node {
  max-width: none;
}

@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .durandite-ui-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .durandite-ui-fork,
  .durandite-ui-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. */
.durandite-ui-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 ---------- */
.durandite-ui-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(--durandite-ui-hero-details-opacity, 1);
  transition: opacity 380ms ease;
}

.durandite-ui-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. */
.durandite-ui-scheme .durandite-ui-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;
}

.durandite-ui-scheme .durandite-ui-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 durandite-ui-logo-float {
  from {
    transform: translate(-50%, calc(-50% + 9px));
  }

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

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

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

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

/* El cristal de la figura: mismo desenfoque que la barra, recortado por la silueta del bloque. */
.durandite-ui-scheme .durandite-ui-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;
}

.durandite-ui-scheme .durandite-ui-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) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {

  .durandite-ui-scheme .durandite-ui-logo3d,
  .durandite-ui-scheme .durandite-ui-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. */
  .durandite-ui-scheme svg {
    height: 50px;
  }

  /* En una columna sola las marcas de confianza se comían la primera pantalla: fuera. */
  .durandite-ui-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. */
  .durandite-ui-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. */
  .durandite-ui-hero::after {
    display: none;
  }

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

  .durandite-ui-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. */
.durandite-ui-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. */
.durandite-ui-scheme .chip path {
  stroke: hsla(188 55% 70% / 0.42);
  stroke-width: 1;
}

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

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

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

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

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

.durandite-ui-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. */
.durandite-ui-scheme .mark3d .face-top {
  fill: #dff3f0;
}

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

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

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

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

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

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

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

@keyframes durandite-ui-float {

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

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

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

@keyframes durandite-ui-pulse {

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

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

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

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

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

@keyframes durandite-ui-blink {

  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

.durandite-ui-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: durandite-ui-drift 26s ease-in-out infinite alternate;
}

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

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

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

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

@media (max-width: 820px) and (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
  .durandite-ui-cols {
    grid-template-columns: 1fr;
  }
}

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

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

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

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

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

@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 501px) {
  .durandite-ui-quotes {
    grid-template-columns: 1fr;
  }
}

.durandite-ui-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;
}

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

.durandite-ui-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));
}

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

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

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

  .durandite-ui-landing .durandite-ui-nav,
  .durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav,
  .durandite-ui-landing.durandite-ui-tour-focus .durandite-ui-nav {
    transition: none;
  }

  .durandite-ui-landing .durandite-ui-nav::before,
  .durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav::before,
  .durandite-ui-landing.durandite-ui-tour-focus .durandite-ui-nav::before {
    transition: none;
  }

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

  /* La clase viene ya en el HTML: sin movimiento, ni la captura ni sus tarjetas se inclinan. */
  .durandite-ui-has-shot-motion .durandite-ui-shot,
  .durandite-ui-has-shot-motion .durandite-ui-shot-tour {
    transform: none;
  }

  .durandite-ui-shot-stage.is-reduced .durandite-ui-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;
  }

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

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

  .durandite-ui-shot-stage.is-reduced .durandite-ui-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) and (orientation: portrait),
  (prefers-reduced-motion: reduce) and (max-width: 720px) and (min-height: 501px) {
  .durandite-ui-shot-stage.is-reduced .durandite-ui-shot-tour {
    grid-template-columns: 1fr;
  }
}

/* Intelligence workflow: semantic, responsive, monochrome layers. */
.durandite-ui-landing section.durandite-ui-pillars {
  padding: 0;
  margin: 0 0 clamp(72px, 9vw, 128px);
}

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

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

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

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

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

.durandite-ui-pillar svg {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 26px;
  color: #909eae;
}

.durandite-ui-pillar h3 {
  margin: 0 0 18px;
  color: #909eae;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

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

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

@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 501px) {
  .durandite-ui-pillars-grid {
    grid-template-columns: 1fr;
  }

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

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

.durandite-ui-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. */
.durandite-ui-stack>li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

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

.durandite-ui-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;
}

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

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

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

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

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

.durandite-ui-stack-card {
  min-width: 0;
}

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

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

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

.durandite-ui-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) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .durandite-ui-stack-body.is-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

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

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

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

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

.durandite-ui-landing section.durandite-ui-policy .durandite-ui-lead p {
  color: var(--text-70);
}

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

@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 501px) {
  .durandite-ui-policy-grid {
    grid-template-columns: 1fr;
  }
}

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

.durandite-ui-policy-card h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.durandite-ui-policy-card p {
  color: var(--text-70);
  font-size: 15.5px;
}

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

@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 501px) {
  .durandite-ui-policy-cats {
    grid-template-columns: 1fr;
    row-gap: 44px;
  }
}

.durandite-ui-policy-list h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

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

.durandite-ui-policy-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

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

.durandite-ui-policy-list li b {
  font-weight: 600;
  font-size: 15px;
}

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

.durandite-ui-policy-flow {
  margin: 0 0 80px;
  display: grid;
  gap: 18px;
}

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

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

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

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

.durandite-ui-policy-flow .durandite-ui-flow-box rect {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.28);
}

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

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

.durandite-ui-policy-flow .durandite-ui-flow-wire path.durandite-ui-flow-up {
  marker-end: none;
}

.durandite-ui-policy-flow .durandite-ui-flow-label text {
  fill: var(--text-70);
  font-size: 13px;
}

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

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

@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .durandite-ui-policy-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. */
.durandite-ui-shot-zero {
  --durandite-ui-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;
}

.durandite-ui-shot-zero-mark {
  grid-area: 1 / 1;
  display: block;
  width: min(72%, 640px);
  aspect-ratio: 758 / 199;
  /* Blanco con la misma banda plateada del lema principal; la máscara mantiene el brillo dentro
     del símbolo y las letras, sin halo exterior. */
  position: relative;
  background: linear-gradient(100deg, #ffffff 28%, #909eae 50%, #ffffff 72%);
  background-size: 300% 100%;
  animation: durandite-ui-lema-brillo 3.2s linear -2.1s infinite;
  -webkit-mask: var(--durandite-ui-zero-mark) center / contain no-repeat;
  mask: var(--durandite-ui-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. */
.durandite-ui-shot-zero-title {
  grid-area: 1 / 1;
  position: relative;
  max-width: 88%;
  margin: 0;
  font-family: "Durandir 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: #909eae;
  opacity: 0;
  transform: translateY(8px);
  /* Entra con el mismo fundido con el que se apaga la marca. */
  transition:
    opacity var(--durandite-ui-zero-step, 750ms) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--durandite-ui-zero-step, 750ms) cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

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

  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .durandite-ui-shot-zero-mark {
    animation: none;
    background-position: 50% 0;
  }

  .durandite-ui-landing.durandite-ui-zero-cut .durandite-ui-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. */
.durandite-ui-shot-stage[data-tour-state="idle"] .durandite-ui-shot-zero,
.durandite-ui-shot-stage:has(.durandite-ui-shot-callout.is-device-zero.is-active) .durandite-ui-shot-zero {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease), visibility 0s;
}

.durandite-ui-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. */
.durandite-ui-shot-callout.is-device-zero {
  display: none;
}

.durandite-ui-callout-zero-title {
  display: none;
}

/* En la columna del móvil la diapositiva 0 es solo la marca, quieta todo el paso, y la frase va
   debajo de la captura como la explicación de cualquier otra herramienta. A pantalla completa las
   tarjetas vuelven a ir sobre la captura y el paso cero es el de escritorio. */
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .durandite-ui-landing:not(.durandite-ui-shot-turned) .durandite-ui-shot-zero-title {
    display: none;
  }

  .durandite-ui-landing:not(.durandite-ui-shot-turned).durandite-ui-zero-cut .durandite-ui-shot-zero-mark {
    animation: none;
    opacity: 1;
  }

  .durandite-ui-landing:not(.durandite-ui-shot-turned) .durandite-ui-shot-callout.is-device-zero {
    display: block;
  }

  .durandite-ui-landing:not(.durandite-ui-shot-turned) .is-device-zero .durandite-ui-callout-card > :not(.durandite-ui-callout-zero-title) {
    display: none;
  }

  .durandite-ui-landing:not(.durandite-ui-shot-turned) .durandite-ui-callout-zero-title {
    display: block;
    margin: 0;
    color: #909eae;
    font-family: "Durandir Display", "Durandir Display Bold", "Durandir DisplayA-Bold", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
}

/* 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. */
.durandite-ui-shot-stage.is-parked .durandite-ui-shot-callout {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* ---------- presentación a pantalla completa ---------- */
/* Botón redondo arriba a la derecha de la captura. Existe en pantallas verticales, donde la
   captura apaisada queda pequeña, y a pantalla completa, donde es una equis para volver. Solo con
   la captura en pie: mientras se levanta queda por encima de ella sin inclinarse. */
.durandite-ui-shot-turn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #909eae;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}

.durandite-ui-shot-turn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.durandite-ui-shot-turn .durandite-ui-shot-turn-close,
.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot-turn .durandite-ui-shot-turn-open {
  display: none;
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot-turn .durandite-ui-shot-turn-close {
  display: block;
}

.durandite-ui-shot-turn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 4px rgba(144, 158, 174, 0.16);
}

@media (orientation: portrait) and (max-width: 1024px) {
  .durandite-ui-shot-turn:not([hidden]) {
    display: grid;
  }
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot-turn:not([hidden]) {
  display: grid;
}

.durandite-ui-landing.durandite-ui-shot-raised .durandite-ui-shot-turn,
.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot-turn {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease), visibility 0s;
}

/* La captura sale de la página y ocupa la pantalla, rodeada de negro. En vertical va girada un
   cuarto de vuelta, a lo largo; con el teléfono tumbado queda derecha. La página de debajo no se
   mueve: el hueco lo guarda el JS y la maqueta no cambia a la vista. Las tarjetas vuelven a ir
   sobre la captura, con la escala del teléfono en horizontal. */
html.durandite-ui-shot-turned,
html.durandite-ui-shot-turned body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* La captura se muda a una capa fija, hija directa de la portada, que cubre la ventana: dentro del
   hero, Safari la recortaba con él y la sección siguiente la tapaba. La capa también recorta la
   caja sin girar de la captura, que en vertical es más ancha que la pantalla y hacía que Safari
   alejara la página. El hueco visible lo mide el JS (`--durandite-ui-turn-*`): la barra de Safari tapa
   parte de la ventana sin encogerla. Alrededor quedan 3 px de aire. */
.durandite-ui-turn-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #000;
  touch-action: none;
}

.durandite-ui-turn-layer .durandite-ui-shot-stage {
  --durandite-ui-turn-long: var(--durandite-ui-turn-vw, 100vw);
  --durandite-ui-turn-short: var(--durandite-ui-turn-vh, 100dvh);
  --durandite-ui-turn-air: 3px;
  position: absolute;
  top: var(--durandite-ui-turn-y, 50%);
  left: var(--durandite-ui-turn-x, 50%);
  display: block;
  width: min(calc(var(--durandite-ui-turn-long) - 2 * var(--durandite-ui-turn-air)),
      calc((var(--durandite-ui-turn-short) - 2 * var(--durandite-ui-turn-air)) * 2896 / 1729));
  margin: 0;
  transform: translate(-50%, -50%);
}

@media (orientation: portrait) {
  .durandite-ui-turn-layer .durandite-ui-shot-stage {
    --durandite-ui-turn-long: var(--durandite-ui-turn-vh, 100dvh);
    --durandite-ui-turn-short: var(--durandite-ui-turn-vw, 100vw);
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot-stage::before,
.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-mobile-intro {
  display: none;
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot,
.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot-tour {
  transform: none;
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot {
  border-radius: 12px;
  box-shadow: none;
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot-tour {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  aspect-ratio: 2896 / 1729;
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-shot-callout {
  position: absolute;
  inset: 0;
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-callout-card {
  position: absolute;
  left: min(var(--durandite-ui-callout-x-sm, var(--durandite-ui-callout-x, 22%)), 59%);
  top: min(var(--durandite-ui-callout-y, 5%), 40%);
  width: clamp(150px, 30cqi, 252px);
  min-width: 0;
  padding: clamp(9px, 1.5cqi, 17px) clamp(11px, 1.7cqi, 19px) clamp(10px, 1.6cqi, 18px);
  border-radius: clamp(10px, 1.3cqi, 14px);
  text-align: left;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 20px 55px rgba(0, 0, 0, 0.38);
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-callout-kicker {
  display: block;
  margin-bottom: 3px;
  font-size: clamp(10px, 1.1cqi, 12px);
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-callout-card h3 {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(15px, 1.95cqi, 22px);
  line-height: 1.1;
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-callout-card p {
  font-size: clamp(11.5px, 1.35cqi, 15px);
  line-height: 1.35;
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-tour-advance {
  --durandite-ui-advance-cut: 52px;
}

.durandite-ui-landing.durandite-ui-shot-turned .durandite-ui-tour-meta {
  left: clamp(22px, 3.5cqi, 56px);
  right: clamp(22px, 3.5cqi, 56px);
  bottom: clamp(12px, 1.8cqi, 26px);
  column-gap: 10px;
  --durandite-ui-tour-line: 6px;
}

/* ---------- 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. */
.durandite-ui-org {
  margin: 0 0 80px;
}

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

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

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

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

.durandite-ui-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. */
.durandite-ui-org-node,
.durandite-ui-org-branch,
.durandite-ui-org-branch li {
  border: 1px solid rgba(144, 158, 174, 0.42);
  border-radius: 4px;
  background: #000;
  padding: 8px 10px;
}

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

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

.durandite-ui-org-node.is-head {
  border-color: rgba(144, 158, 174, 0.75);
}

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

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

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

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

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

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

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

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

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

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

.durandite-ui-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. */
.durandite-ui-org-col+.durandite-ui-org-col::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 50%;
  width: 34px;
  border-top: 1px solid rgba(144, 158, 174, 0.42);
}

.durandite-ui-org-col.is-context .durandite-ui-org-node::before {
  content: "";
  position: absolute;
  left: -17px;
  width: 17px;
  border-top: 1px solid rgba(144, 158, 174, 0.28);
}

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

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

.durandite-ui-org-col.is-context::after {
  content: "";
  position: absolute;
  left: -17px;
  top: 22%;
  bottom: 8%;
  border-left: 1px solid rgba(144, 158, 174, 0.28);
}

.durandite-ui-org-col.is-start .durandite-ui-org-node+.durandite-ui-org-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  height: 10px;
  border-left: 1px solid rgba(144, 158, 174, 0.42);
}

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

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

.durandite-ui-org-col.is-end .durandite-ui-org-node+.durandite-ui-org-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  height: 10px;
  border-left: 1px solid rgba(144, 158, 174, 0.42);
}

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

.durandite-ui-org-col.is-exec .durandite-ui-org-node.is-head::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  height: 14px;
  border-left: 1px solid rgba(144, 158, 174, 0.42);
}

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

.durandite-ui-org-col.is-end .durandite-ui-org-branch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  height: 14px;
  border-left: 1px solid rgba(144, 158, 174, 0.42);
}

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

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

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

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

@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .durandite-ui-org-branches {
    grid-template-columns: 1fr;
  }
}

/* Con «Documentation» en la barra, la marca y los tres enlaces no caben a tamaño completo en
   los teléfonos más estrechos: se reducen como en la barra del tema. */
@media (max-width: 420px) {
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white {
    height: 22px;
    width: calc(22px * 2100 / 494);
  }

  .durandite-ui-landing .durandite-ui-nav .durandite-ui-nav-actions {
    gap: 14px;
  }

  .durandite-ui-landing .durandite-ui-nav a.durandite-ui-nav-link {
    font-size: 13px;
  }
}

/* «Durandir / Home ⌄»: el mismo menú de sección que el blog, la documentación y el contacto del
   tema. En un teléfono sustituye a los enlaces de la derecha, que no caben junto a él. */
.durandite-ui-nav .durandite-ui-brand-wrap {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

/* La sección usa la variante fina de Satoshi y acompaña al logotipo reducido. */
.durandite-ui-landing .durandite-ui-section-sep,
.durandite-ui-landing .durandite-ui-section summary {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 24.3px;
  font-weight: 300;
  letter-spacing: -0.01em;
  transform: translateY(-0.052em);
}

.durandite-ui-landing .durandite-ui-section-sep {
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
}

.durandite-ui-landing .durandite-ui-section {
  position: relative;
  /* Flex y no bloque: un bloque mete la línea de su propia letra y bajaba el rótulo respecto a la
     barra «/». */
  display: flex;
}

/* La flecha mide lo que una minúscula (0,5 em) y se apoya en la línea de base: queda centrada
   en la altura de las letras, con un trazo del grueso del de la letra. */
.durandite-ui-landing .durandite-ui-section summary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  list-style: none;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease;
}

.durandite-ui-landing .durandite-ui-section summary::-webkit-details-marker {
  display: none;
}

.durandite-ui-landing .durandite-ui-section summary:hover,
.durandite-ui-landing .durandite-ui-section[open] summary {
  color: #ffffff;
}

.durandite-ui-landing .durandite-ui-section summary svg {
  width: 0.5em;
  height: 0.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 150ms ease;
}

.durandite-ui-landing .durandite-ui-section[open] summary svg {
  transform: rotate(180deg);
}

.durandite-ui-landing .durandite-ui-section-list {
  position: absolute;
  /* Separado de la barra: el rótulo acaba 17 px por encima de su borde y quedan 13 px de aire. */
  top: calc(100% + 30px);
  left: 0;
  z-index: 70;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--durandite-ui-marca, #909eae);
  border-radius: 12px;
  /* El mismo cristal que la barra al moverse la página. */
  background: rgba(14, 14, 14, 0.18);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

/* Sin anillo al pinchar con el ratón; con teclado, el contorno de la casa. */
.durandite-ui-landing .durandite-ui-section summary:focus:not(:focus-visible) {
  outline: none;
}

.durandite-ui-landing .durandite-ui-section summary:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.durandite-ui-landing .durandite-ui-nav .durandite-ui-section-list a {
  padding: 10px 12px;
  border-radius: 8px;
  color: #ffffff;
  font-family: "Durandir Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

/* Sin pastilla: al pasar por encima, y en la página actual, solo se tiñe la letra. */
.durandite-ui-landing .durandite-ui-nav .durandite-ui-section-list a:hover,
.durandite-ui-landing .durandite-ui-nav .durandite-ui-section-list a:focus-visible,
.durandite-ui-landing .durandite-ui-nav .durandite-ui-section-list a[aria-current="page"] {
  background: transparent;
  color: var(--durandite-ui-marca, #909eae);
}

@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-nav-actions {
    display: none;
  }

  .durandite-ui-nav .durandite-ui-brand-wrap {
    gap: 14px;
  }

}

/* Pantallas verticales: la barra va centrada —marca, barra y sección en el medio— y el menú se
   abre centrado en la pantalla, no bajo el rótulo: la marca se recoge al hacer scroll y el rótulo
   se mueve, la barra no. */
@media (max-width: 720px) and (orientation: portrait) {
  .durandite-ui-landing .durandite-ui-nav {
    justify-content: center;
  }

  .durandite-ui-landing .durandite-ui-section {
    position: static;
  }

  .durandite-ui-landing .durandite-ui-section-list {
    top: calc(100% + 13px);
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Pantallas verticales, en cuanto la página se mueve un píxel: la palabra «Durandir» se recoge y
   queda solo el símbolo, centrado junto a la sección. El enlace recorta el logotipo; el símbolo
   ocupa 391 de los 2100 de ancho del viewBox (alto 494). */
@media (max-width: 720px) and (orientation: portrait) {
  /* Al recogerse, las letras se apagan una a una de la «r» a la «D» mientras el símbolo se desliza
     al centro; al volver arriba, el hueco se abre primero y las letras vuelven de la «D» a la «r».
     Cada letra del SVG nuevo ocupa un trazado, en el orden de lectura. */
  .durandite-ui-landing .durandite-ui-nav a.durandite-ui-brand {
    overflow: hidden;
    width: calc(26px * 2100 / 494);
    transition: width 640ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  .durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav a.durandite-ui-brand {
    width: calc(26px * 391 / 494);
    transition: width 760ms cubic-bezier(0.65, 0, 0.35, 1) 140ms;
  }

  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(160ms + var(--durandite-ui-letter) * 45ms);
  }

  .durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path {
    opacity: 0;
    transform: scale(0.82);
    transition-duration: 380ms, 460ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: calc((7 - var(--durandite-ui-letter)) * 45ms);
  }

  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path:nth-child(1) { --durandite-ui-letter: 0; }
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path:nth-child(2) { --durandite-ui-letter: 1; }
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path:nth-child(3) { --durandite-ui-letter: 2; }
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path:nth-child(4) { --durandite-ui-letter: 3; }
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path:nth-child(5) { --durandite-ui-letter: 4; }
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path:nth-child(6) { --durandite-ui-letter: 5; }
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path:nth-child(7) { --durandite-ui-letter: 6; }
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path:nth-child(8) { --durandite-ui-letter: 7; }

}

@media (max-width: 420px) and (orientation: portrait) {
  .durandite-ui-landing .durandite-ui-nav a.durandite-ui-brand {
    width: calc(22px * 2100 / 494);
  }

  .durandite-ui-landing.durandite-ui-page-moved .durandite-ui-nav a.durandite-ui-brand {
    width: calc(22px * 391 / 494);
  }
}

/* En teléfonos estrechos, el rótulo sigue la escala del logotipo. */
@media (max-width: 420px) {
  .durandite-ui-landing .durandite-ui-section-sep,
  .durandite-ui-landing .durandite-ui-section summary {
    font-size: 19.7px;
    transform: translateY(-0.075em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .durandite-ui-landing .durandite-ui-nav a.durandite-ui-brand,
  .durandite-ui-landing .durandite-ui-nav .durandite-ui-brand-logo-white > g > g:nth-of-type(2) path {
    transition: none !important;
  }
}

/* The footer mark keeps the same white as the header, including hover and keyboard focus. */
.durandite-ui-landing .durandir-foot-logo {
  color: #ffffff;
}