/* =====================================================================
   Páginas de territorio — Ingeniería (K/DG), Identidad (K/BR), Crecimiento (K/ST)
   Estructura y efectos comunes: hero, 02 lo que solemos ver, 03 cómo trabajamos,
   04 qué construimos, 05 qué queda al terminar, 06 cómo es trabajarlo,
   07 combinaciones y 08 encargo. El JS está en krovee-territorio.js.
   El prefijo dg- viene de Ingeniería, la primera en construirse; lo usan las tres.
   ===================================================================== */

:root {
  --ease-nav: cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 68px;
  --nav-frost-h: calc(var(--header-h) + 56px);
  --nav-frost-blur: 20px;
  --dg-accent: #e8e4dc;
  --dg-glow: rgba(232, 228, 220, 0.14);
}

body.dg-page.studio-page {
  padding-top: 0;
  overflow-x: clip;
}

body.dg-page.dg-page--touch {
  cursor: auto;
}

body.dg-page .mono {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

body.dg-page .dg-main {
  position: relative;
  z-index: 2;
}

/* —— Apertura: misma luz y tipografía que el hero de la Home —— */
body.dg-page .dg-open {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  background: #101010;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

body.dg-page .dg-open::before,
body.dg-page .dg-open::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.dg-page .dg-open::before {
  z-index: 1;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 62%);
}

body.dg-page .dg-open::after {
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.28) 0%,
    rgba(16, 16, 16, 0.72) 52%,
    rgba(16, 16, 16, 0.94) 100%
  );
}

body.dg-page .dg-open > * {
  position: relative;
  z-index: 2;
}

/* Móvil: etiquetas, cubo, texto. */
body.dg-page .dg-open .territories__intro {
  order: 1;
  border-top: 1px solid var(--line);
}

body.dg-page .dg-open__mark {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 6vh, 56px) 18px clamp(8px, 2vh, 16px);
}

body.dg-page .dg-open__copy {
  order: 3;
}

body.dg-page .dg-open__cube {
  width: min(168px, 42vw);
  aspect-ratio: 1;
  border-radius: 18px;
  background: linear-gradient(155deg, #f7f7f7 0%, #d0d0d0 46%, #9a9a9a 100%);
  box-shadow:
    14px 16px 0 0 rgba(255, 255, 255, 0.14),
    14px 16px 0 1px rgba(255, 255, 255, 0.06);
}

/* Cubo 3D del territorio (krovee-cube.js). El lienzo deja aire alrededor del cubo para que pueda
   girar; los márgenes negativos hacen que en la maqueta solo cuente el cubo. Primero se ve el
   póster (el cubo en su primera posición) y, cuando el 3D está listo, el lienzo lo releva sin salto. */
body.dg-page .kcube {
  --kcube: min(290px, 74vw, 36svh);
  position: relative;
  flex: none;
  width: var(--kcube);
  aspect-ratio: 1;
  margin: calc(var(--kcube) * -0.17);
}

body.dg-page .kcube__poster,
body.dg-page .kcube__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

body.dg-page .kcube__poster {
  transition: opacity 0.5s ease 0.15s;
}

body.dg-page .kcube__canvas {
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;            /* en móvil el gesto vertical sigue siendo scroll */
  transition: opacity 0.5s ease;
  -webkit-tap-highlight-color: transparent;
}

body.dg-page .kcube__canvas:active {
  cursor: grabbing;
}

body.dg-page .kcube.is-live .kcube__canvas {
  opacity: 1;
}

body.dg-page .kcube.is-live .kcube__poster {
  opacity: 0;
}

body.dg-page .dg-open__copy {
  padding: clamp(28px, 5vh, 56px) 18px clamp(40px, 7vh, 72px);
  font-family: "DM Sans", system-ui, sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "ss01", "ss02", "cv11";
}

body.dg-page .dg-open__copy h1 {
  margin: 0;
  max-width: none;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(26px, 6.8vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #ededed;
  text-wrap: balance;
}

body.dg-page .dg-open__copy h1 em {
  font-style: italic;
  font-weight: 400;
  font-family: "DM Sans", system-ui, sans-serif;
  color: #7a7a7a;
}

body.dg-page .dg-open__copy .lede {
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  max-width: min(48ch, 100%);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(16px, 4.2vw, 18px);
  line-height: 1.65;
  letter-spacing: -0.018em;
  font-weight: 400;
  color: rgba(237, 237, 237, 0.58);
}

body.dg-page .dg-open__copy .studio-page__btn {
  margin-top: clamp(28px, 4vh, 40px);
}

@media (min-width: 901px) {
  body.dg-page .dg-lead {
    background: #101010;
  }

  body.dg-page .dg-open {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    grid-template-rows: auto minmax(0, 1fr) var(--dg-hero-gap, 0px);
    align-items: center;
    box-sizing: border-box;
    width: min(100%, 1600px);
    margin-inline: auto;
    overflow: visible;
    border-bottom-color: transparent;
  }

  /* La luz y la fila de entrada siguen a todo el ancho; el tope es solo el bloque de dos columnas. */
  body.dg-page .dg-open::before,
  body.dg-page .dg-open::after {
    width: 100vw;
    left: calc(50% - 50vw);
    right: auto;
  }

  body.dg-page .dg-open::after {
    border-bottom: 1px solid var(--line);
  }

  body.dg-page .dg-open .territories__intro {
    grid-column: 1 / -1;
    order: 0;
    box-sizing: border-box;
    width: 100vw;
    min-width: 0;
    margin-left: calc(50% - 50vw);
  }

  body.dg-page .dg-open__copy {
    order: 0;
    grid-column: 1;
    grid-row: 2;
    padding: clamp(24px, 3vh, 40px) clamp(28px, 4vw, 64px) clamp(16px, 2.4vh, 28px) 18px;
  }

  body.dg-page .dg-open__mark {
    order: 0;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    padding: clamp(24px, 4vh, 48px) clamp(24px, 4vw, 64px);
  }

  body.dg-page .dg-open__copy h1 {
    font-size: clamp(30px, 5.2vw, 64px);
    max-width: 14em;
  }

  body.dg-page .dg-open__copy .lede {
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.68;
  }

  body.dg-page .dg-open__cube {
    width: min(280px, 28vw);
  }

  body.dg-page .kcube {
    --kcube: min(600px, 42vw, calc(100svh - var(--dg-seen-h, 320px) - 80px));
  }
}

/* Escritorio con poco alto (portátiles de 720–820 px): el titular y el texto del hero se ajustan
   también al alto, para que quepan entre la franja superior y la sección 02 sin pisarla. */
@media (min-width: 901px) and (max-height: 820px) {
  body.dg-page .dg-open__copy h1 {
    font-size: clamp(30px, min(5.2vw, 6.4vh), 64px);
  }

  body.dg-page .dg-open__copy .lede {
    margin-top: 2vh;
    font-size: clamp(14px, min(1.25vw, 2.1vh), 18px);
    line-height: 1.6;
  }

  body.dg-page .dg-open__copy .studio-page__btn {
    margin-top: 3vh;
  }
}

/* Escritorio: hero + 02 se quedan como bloque y la 03 pasa por encima.
   La 02 necesita altura fija para que el top del sticky no dependa de JS. */
@media (min-width: 901px) {
  body.dg-page {
    --dg-hero-gap: 0px;
    --dg-seen-h: calc(clamp(300px, 34vh, 360px) - var(--dg-hero-gap));
  }

  body.dg-page .dg-lead {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  body.dg-page .dg-open {
    height: calc(100vh - var(--dg-seen-h));
    height: calc(100svh - var(--dg-seen-h));
    min-height: 0;
  }

  body.dg-page .dg-seen {
    height: var(--dg-seen-h);
    box-sizing: border-box;
  }

  body.dg-page #dgLab,
  body.dg-page #dgBuild,
  body.dg-page #dgKeep {
    position: relative;
    z-index: 2;
  }

  body.dg-page #dgWork,
  body.dg-page #dgCombine,
  body.dg-page #dgCta {
    position: relative;
    z-index: 3;
  }
}

/* Horizontal móvil y ventanas muy bajas: el reparto hero + sección 01 no puede
   comprimir el hero por debajo de su contenido. Cada bloque recupera su altura
   y el documento desplaza la sección siguiente sin solapes. */
@media (min-width: 901px) and (max-height: 600px) {
  body.dg-page .dg-lead {
    position: relative;
  }

  body.dg-page .dg-open {
    height: auto;
    min-height: max(100svh, 520px);
  }

  body.dg-page .dg-seen {
    height: auto;
    min-height: 300px;
  }
}

/* Desde 1200px hay aire bajo el párrafo de la 02: se usa para separarla del hero. */
@media (min-width: 1200px) {
  body.dg-page {
    --dg-hero-gap: clamp(32px, 4vh, 48px);
  }
}

/* Móvil: el hero se queda y la sección 02 pasa por encima, como en la Home. */
@media (max-width: 900px) {
  body.dg-page .dg-lead {
    display: contents;
  }
  body.dg-page .dg-open {
    position: sticky;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
  }

  body.dg-page .dg-open__mark {
    margin-top: auto;
    padding-top: clamp(12px, 2.4vh, 24px);
  }

  body.dg-page .dg-open__copy {
    padding-bottom: clamp(20px, 3.6vh, 36px);
  }

  @media (min-height: 800px) {
    body.dg-page .dg-open__copy {
      padding-bottom: clamp(52px, 7.5vh, 80px);
    }
  }

  body.dg-page .dg-seen,
  body.dg-page .dg-lab,
  body.dg-page #dgBuild,
  body.dg-page #dgKeep,
  body.dg-page #dgWork,
  body.dg-page #dgCombine,
  body.dg-page #dgCta {
    position: relative;
    z-index: 2;
  }
}

/* —— Lo que solemos ver —— */
body.dg-page .dg-seen {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

body.dg-page .dg-seen__prose {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: clamp(28px, 4vh, 44px) 0 clamp(64px, 10vh, 112px);
}

body.dg-page .dg-seen__prose p {
  grid-column: 5 / span 6;
  margin: 0;
  padding: 0 18px;
  max-width: 62ch;
  font-size: clamp(16px, 1.12vw, 18px);
  line-height: 1.64;
  letter-spacing: -0.012em;
  color: rgba(237, 237, 237, 0.72);
}

/* —— Wave dividers —— */
body.dg-page .dg-lab,
body.dg-page .dg-stack-scroll,
body.dg-page .dg-bento,
body.dg-page .dg-metrics,
body.dg-page .dg-cta {
  position: relative;
  border-bottom: none;
}

body.dg-page .dg-lab__head,
body.dg-page .dg-stack-scroll__head {
  position: relative;
  border-bottom: none;
}

body.dg-page .dg-wave-line {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 0;
  height: 1px;
  color: rgba(237, 237, 237, 0.28);
  z-index: 5;
}

body.dg-page .dg-lab__head .dg-wave-line,
body.dg-page .dg-stack-scroll__head .dg-wave-line {
  left: 0;
  right: 0;
}

body.dg-page .dg-wave-line--light {
  color: rgba(16, 16, 16, 0.22);
}

body.dg-page .dg-wave-line__hit {
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 48px;
  z-index: 6;
}

body.dg-page .dg-wave-line__svg {
  position: absolute;
  left: 0;
  top: -100px;
  width: 100%;
  height: 300px;
  overflow: visible;
  pointer-events: none;
}

body.dg-page .dg-wave-line__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

@media (hover: hover) {
  body.dg-page .dg-wave-line__hit:hover {
    top: -72px;
    height: 144px;
  }
}

/* —— Cómo trabajamos —— */
body.dg-page .dg-lab {
  background: #fff;
}

body.dg-page .dg-lab__head {
  display: flex;
  align-items: center;
  padding: 18px var(--pad-x);
}

body.dg-page .dg-lab__pin-wrap {
  position: relative;
  z-index: 2;
}

/* Mismo mecanismo que la referencia, en espejo: títulos y contenido a la izquierda. */
body.dg-page .dg-lab__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  box-sizing: border-box;
  padding: clamp(20px, 3vh, 32px) var(--pad-x) clamp(48px, 8vh, 80px);
  background: #fff;
}

body.dg-page .dg-lab--pin .dg-lab__stage {
  height: calc(100svh - var(--header-h));
  align-items: center;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

body.dg-page .dg-lab__phase {
  border-top: 1px solid var(--line);
}

body.dg-page .dg-lab__row {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  width: 100%;
  margin: 0;
  padding: clamp(10px, 1.4vh, 14px) 0;
  border: 0;
  background: none;
  color: #101010;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(22px, 2.1vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
}

body.dg-page .dg-lab__row-num::after {
  content: " —";
}

body.dg-page .dg-lab__action {
  display: none;
}

body.dg-page .dg-lab__body {
  overflow: hidden;
}

body.dg-page .dg-lab__body-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 10px;
  padding: clamp(14px, 2vh, 22px) 0 clamp(22px, 3vh, 32px);
}

body.dg-page .dg-lab__body-copy {
  display: contents;
}

body.dg-page .dg-lab__phase-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.35;
  color: #101010;
}

body.dg-page .dg-lab__phase-desc {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  max-width: 44ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: rgba(16, 16, 16, 0.62);
}

body.dg-page .dg-lab__phase-tags {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

body.dg-page .dg-lab__phase-tags li {
  position: relative;
  padding-left: 16px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.45;
  color: #5c5c5c;
}

body.dg-page .dg-lab__phase-tags li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  background: currentColor;
}

/* —— Qué queda al terminar —— */
body.dg-page .dg-work {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

body.dg-page .dg-work__body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  padding: clamp(28px, 4vh, 44px) 0 clamp(64px, 10vh, 112px);
}

body.dg-page .dg-work__copy p {
  grid-column: 5 / span 5;
  margin: 0;
  padding: 0 18px;
  max-width: 62ch;
  font-size: clamp(16px, 1.12vw, 18px);
  line-height: 1.64;
  letter-spacing: -0.012em;
  color: rgba(237, 237, 237, 0.72);
}

/* =====================================================================
   #dgKeep — Qué queda al terminar
   Base (móvil, reduced-motion o sin JS): sección blanca estática con el copy.
   Modo cubo (escritorio y móvil, sin reduced-motion; lo activa el JS con .is-cube en #dgKeepRun):
   la sección se queda fija y la capa blanca se ve a través de la silueta de
   un cubo que gira y avanza hasta llenar la pantalla.
   ===================================================================== */

#dgKeepRun { position: relative; }

#dgKeep {
  position: relative;
  z-index: 2;
  background: #fff;
  color: #101010;
}

#dgKeep .dg-keep__reveal {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100svh;
  padding: clamp(96px, 12vh, 140px) 24px clamp(64px, 10vh, 112px);
  background: #fff;
}

#dgKeep .dg-keep__inner {
  width: min(1240px, 100%);          /* 1240: la primera línea del título no se parte (K/ST a 1440, K/DG a 1920) */
  text-align: center;
}

#dgKeep .dg-keep__eyebrow {
  display: block;
  margin: 0 0 clamp(20px, 3vh, 32px);
  color: #666;
}

#dgKeep .dg-keep__title {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(40px, min(6.8vw, 11vh), 114px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #101010;
}

#dgKeep .dg-keep__lede {
  max-width: 58ch;
  margin: clamp(24px, 3.4vh, 36px) auto 0;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  color: rgba(16, 16, 16, 0.64);
}

/* Lista: bloque centrado, textos alineados a la izquierda */
#dgKeep .dg-keep__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: clamp(24px, 3.4vh, 36px) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

#dgKeep .dg-keep__tags li {
  color: rgba(16, 16, 16, 0.58);
}

#dgKeep .dg-keep__shadow { display: none; }

@media (min-width: 901px) {
  #dgKeep .dg-keep__title { max-width: none; }
  #dgKeep .dg-keep__title span { display: block; }   /* corta siempre tras "medias." */
}

@media (max-width: 900px) {
  #dgKeep .dg-keep__reveal {
    min-height: 0;
    padding: 96px 20px 72px;
  }
  #dgKeep .dg-keep__title {
    font-size: clamp(34px, 9.5vw, 56px);
  }
}

/* ---------- Modo cubo ---------- */

/* En esta sección se usa vh (en móvil = pantalla con la barra del navegador escondida)
   para que al esconderse la barra no quede un hueco por el que se vea el hero. */
#dgKeepRun.is-cube {
  height: calc(200vh + var(--keep-run, 250vh));
  margin-bottom: -100vh;             /* #dgWork sube y tapa a #dgKeep mientras sigue fijo */
}

#dgKeepRun.is-cube #dgKeep {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg, #101010);    /* opaco: nunca se ve el hero por detrás */
}

#dgKeepRun.is-cube .dg-keep__reveal {
  position: absolute;
  inset: 0;
  min-height: 0;
  /* abajo se suma lo que tapa la barra del navegador en móvil (0 en escritorio),
     para que el copy quede centrado en la parte visible */
  padding: clamp(72px, 10vh, 120px) 24px calc(clamp(40px, 6vh, 72px) + (100vh - 100svh));
  clip-path: polygon(0 0, 0 0, 0 0);  /* el JS dibuja la silueta del cubo */
  will-change: clip-path;
}

#dgKeepRun.is-cube .dg-keep__inner {
  position: relative;
  z-index: 1;
  will-change: transform;
}

/* Sombra con la que el cubo sale de debajo de la sección anterior:
   oscura en el borde superior de #dgKeep y transparente hacia abajo.
   Solo se ve dentro del cubo (está en la capa enmascarada). */
#dgKeepRun.is-cube .dg-keep__shadow {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62vh;
  background: linear-gradient(to bottom, var(--bg, #141414) 0%, var(--bg, #141414) 6%, transparent 100%);
  pointer-events: none;
}

/* Móvil en modo cubo: el copy tiene que caber en una pantalla fija */
@media (max-width: 900px) {
  #dgKeepRun.is-cube .dg-keep__reveal {
    padding: 72px 20px calc(24px + (100vh - 100svh));
  }
  #dgKeepRun.is-cube .dg-keep__eyebrow { margin-bottom: 16px; }
  #dgKeepRun.is-cube .dg-keep__title { font-size: clamp(30px, min(9.4vw, 5.6svh), 52px); }
  #dgKeepRun.is-cube .dg-keep__lede { margin-top: 18px; font-size: 14px; line-height: 1.5; }
  #dgKeepRun.is-cube .dg-keep__tags { margin-top: 18px; gap: 6px; }
}

/* ---------- Modo caja (/territorios, initKeepRise) ----------
   Parte del modo cubo y cambia lo justo: la sección sube por encima del último territorio, que
   se ve detrás; la máscara es la de un cubo que sube y se levanta, con la tapa en gris. */
#dgKeepRun.is-rise {
  margin-top: calc(-1 * (var(--rise, 150vh) + 100vh));
}
#dgKeepRun.is-rise #dgKeep {
  background: transparent;
  pointer-events: none;
}
#dgKeepRun.is-rise.is-full #dgKeep { pointer-events: auto; }
#dgKeepRun.is-rise .dg-keep__shadow { display: none; }
#dgKeepRun.is-rise .dg-keep__lid {
  display: block;
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 0 0, 0 0);
  background: #fff;             /* la tapa es blanca del todo, igual que la cara de frente */
  will-change: clip-path;
  pointer-events: none;
}
.dg-keep__webgl { display: none; }
@media (max-width: 900px) {
  #dgKeepRun.is-rise.is-webgl .dg-keep__webgl {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  #dgKeepRun.is-rise.is-webgl .dg-keep__lid { display: none; }
  #dgKeepRun.is-rise.is-webgl .dg-keep__reveal {
    clip-path: none !important;
    background: transparent;
  }
  #dgKeepRun.is-rise.is-webgl.is-cube-filled .dg-keep__webgl { visibility: hidden; }
  #dgKeepRun.is-rise.is-webgl.is-cube-filled .dg-keep__reveal { background: #fff; }
}
.dg-terr.is-rise .dg-terr__panel:last-child {
  transition: filter .55s cubic-bezier(.2, .7, .2, 1);
  will-change: filter;
}
.dg-terr.is-rise .dg-terr__panel:last-child.is-behind { filter: blur(18px); }
.dg-keep__lid { display: none; }
/* Móvil (sin pin): el último territorio se queda pegado con su final abajo mientras sube la caja. */
.dg-terr.is-rise:not(.is-pinned) .dg-terr__stack::after {
  content: "";
  display: block;
  height: var(--rise, 150vh);   /* hueco (no padding: el sticky no entra en el padding) */
}
.dg-terr.is-rise:not(.is-pinned) .dg-terr__panel:last-child {
  position: sticky;
  top: var(--terr-last-top, 0px);
}

/* —— Qué construimos —— */
body.dg-page .dg-build {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

body.dg-page .dg-build__body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: clamp(28px, 4vh, 44px) 0 clamp(64px, 10vh, 112px);
}

body.dg-page .dg-build__body > * {
  grid-column: 5 / span 8;
}

body.dg-page .dg-build__body h2,
body.dg-page .dg-work__body h2 {
  margin: 0 0 clamp(28px, 4vh, 44px);
  padding: 0 18px;
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Combinaciones: mismo markup/CSS que .edo-manifest (Home #signals / The Studio).
   body.studio-page .edo-manifest agranda el padding; aquí se recorta al ritmo de la página. */
body.dg-page #dgCombine.edo-manifest {
  padding-top: clamp(48px, 10vh, 112px);
  padding-bottom: clamp(64px, 10vh, 112px);
}

body.dg-page #dgCombine .dg-cta__actions {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  body.dg-page #dgCombine .dg-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

body.dg-page .dg-build__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

body.dg-page .dg-build__card {
  padding: clamp(20px, 2.8vh, 28px) 18px clamp(24px, 3.4vh, 34px);
  border-top: 1px solid var(--line);
}

body.dg-page .dg-build__card:nth-child(even) {
  border-left: 1px solid var(--line);
}

body.dg-page .dg-build__card h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.2;
}

body.dg-page .dg-build__card p {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: rgba(237, 237, 237, 0.62);
}

body.dg-page .dg-build__card strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--fg);
}

body.dg-page .dg-build__note {
  margin: 0;
  padding: clamp(20px, 3vh, 28px) 18px 0;
}

/* Escritorio: la sección se fija y las tarjetas avanzan en horizontal (krovee-territorio.js). */
body.dg-page .dg-build--pin {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--header-h));
  box-sizing: border-box;
  overflow: hidden;
}

body.dg-page .dg-build--pin .dg-build__body {
  flex: 1;
  min-height: 0;
  grid-template-rows: auto 1fr auto;
  padding: clamp(28px, 4vh, 44px) 0;
}

body.dg-page .dg-build--pin .dg-build__body > h2 {
  grid-column: 1 / span 4;
  grid-row: 1;
  margin: 0;
}

body.dg-page .dg-build--pin .dg-build__note {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  padding-top: clamp(16px, 2.4vh, 24px);
  white-space: nowrap;
}

body.dg-page .dg-build--pin .dg-build__viewport {
  position: relative;
  grid-column: 5 / span 8;
  grid-row: 1 / span 2;
  align-self: center;
  overflow: hidden;
}

body.dg-page .dg-build--pin .dg-build__grid {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 0 18px;
  border-bottom: 0;
  will-change: transform;
}

body.dg-page .dg-build--pin .dg-build__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: clamp(22px, 2vw, 30px);
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #101010;
}

body.dg-page .dg-build--pin .dg-build__card {
  flex: 0 0 clamp(280px, 24vw, 360px);
  height: clamp(280px, 44vh, 420px);
  transform-origin: 0 50%;
  will-change: transform;
}

body.dg-page .dg-build--pin .dg-build__card h3 {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 28px);
  color: #101010;
}

body.dg-page .dg-build--pin .dg-build__card p {
  color: rgba(16, 16, 16, 0.62);
}

body.dg-page .dg-build--pin .dg-build__card strong {
  margin-bottom: 6px;
  color: #101010;
}

body.dg-page .dg-work__copy {
  grid-column: 1 / span 5;
  align-self: center;
}

body.dg-page .dg-work__copy h2 {
  margin: 0 0 20px;
}

body.dg-page .dg-work__copy p {
  grid-column: auto;
  padding: 0 18px;
}

body.dg-page .dg-work__cards {
  grid-column: 7 / span 6;
  align-self: center;
  margin: 0;
  padding: 0 18px;
  list-style: none;
}

body.dg-page .dg-work__item {
  position: relative;
  padding: clamp(16px, 2.4vh, 24px) 0 clamp(20px, 3vh, 28px);
}

body.dg-page .dg-work__num {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

body.dg-page .dg-work__item h3 {
  margin: 8px 0 12px;
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg);
}

body.dg-page .dg-work__item p {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: rgba(237, 237, 237, 0.55);
}

body.dg-page .dg-work__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(237, 237, 237, 0.5);
  transform-origin: 0 50%;
}

/* Escritorio: la sección se fija y las tarjetas se revelan una a una (krovee-territorio.js). */
body.dg-page .dg-work--pin {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--header-h));
  box-sizing: border-box;
  overflow: hidden;
}

body.dg-page .dg-work--pin .dg-work__body {
  flex: 1;
  min-height: 0;
  padding: clamp(28px, 4vh, 44px) 0;
}

body.dg-page .dg-work--pin .dg-work__line {
  will-change: transform;
}

body.dg-page .dg-work--cover {
  box-shadow: 0 calc(-1 * var(--header-h)) 0 0 var(--bg);
}

/* —— Horizontal stack —— */
body.dg-page .dg-stack-scroll {
  background: var(--bg);
  overflow: hidden;
}

body.dg-page .dg-stack-scroll__head {
  display: grid;
  grid-template-columns: 1fr min(36vw, 200px);
  align-items: center;
  gap: 16px;
  padding: 18px var(--pad-x);
}

body.dg-page .dg-stack-scroll__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

body.dg-page .dg-stack-scroll__bar {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

body.dg-page .dg-stack-scroll__arrow {
  flex-shrink: 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(237, 237, 237, 0.45);
  line-height: 1;
}

body.dg-page .dg-stack-scroll__bar span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: #ededed;
}

body.dg-page .dg-stack-scroll__viewport {
  overflow: hidden;
}

body.dg-page .dg-stack-scroll__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

body.dg-page .dg-stack-card {
  flex: 0 0 auto;
  width: min(72vw, 380px);
  min-height: clamp(360px, 55vh, 520px);
  padding: clamp(32px, 4vh, 48px) clamp(28px, 3vw, 36px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--bg);
  transition: background 0.4s;
}

body.dg-page .dg-stack-card:hover {
  background: rgba(255, 255, 255, 0.025);
}

body.dg-page .dg-stack-card__num {
  display: block;
  margin-bottom: auto;
  padding-bottom: clamp(40px, 8vh, 80px);
  color: var(--muted);
}

body.dg-page .dg-stack-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border: 1px solid var(--line-alt);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--dg-accent);
}

body.dg-page .dg-stack-card h3 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
}

body.dg-page .dg-stack-card p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.58;
  color: rgba(237, 237, 237, 0.52);
  max-width: 30ch;
}

body.dg-page .dg-stack-card--accent {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 55%), var(--bg-alt);
}

/* —— Bento —— */
body.dg-page .dg-bento {
  padding: clamp(72px, 11vh, 120px) var(--pad-x);
  background: var(--bg-alt);
}

body.dg-page .dg-bento__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(40px, 6vh, 64px);
  align-items: end;
}

body.dg-page .dg-bento__head h2 {
  margin: 0;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
  max-width: 12ch;
}

body.dg-page .dg-bento__head p {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.68;
  color: rgba(237, 237, 237, 0.55);
  max-width: 42ch;
  justify-self: end;
}

body.dg-page .dg-bento__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  perspective: 1200px;
}

body.dg-page .dg-bento__tile {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  min-height: 180px;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}

body.dg-page .dg-bento__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--dg-glow), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

body.dg-page .dg-bento__tile:hover::before {
  opacity: 1;
}

body.dg-page .dg-bento__tile--a {
  grid-column: span 7;
}
body.dg-page .dg-bento__tile--b {
  grid-column: span 5;
}
body.dg-page .dg-bento__tile--c {
  grid-column: span 4;
}
body.dg-page .dg-bento__tile--d {
  grid-column: span 4;
}
body.dg-page .dg-bento__tile--e {
  grid-column: span 4;
}

body.dg-page .dg-bento__tile-num {
  display: block;
  margin-bottom: clamp(24px, 4vh, 40px);
  color: var(--muted);
}

body.dg-page .dg-bento__tile h3 {
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
}

body.dg-page .dg-bento__tile p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(237, 237, 237, 0.48);
  max-width: 36ch;
}

body.dg-page .dg-bento__tile-visual {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.5;
}

/* —— Metrics —— */
body.dg-page .dg-metrics {
  padding: clamp(56px, 8vh, 88px) var(--pad-x);
  background: var(--bg);
}

body.dg-page .dg-metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

body.dg-page .dg-metric__val {
  margin: 0;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

body.dg-page .dg-metric__lbl {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(237, 237, 237, 0.48);
  letter-spacing: -0.01em;
}

/* —— CTA —— */
body.dg-page .dg-cta {
  padding: clamp(88px, 14vh, 140px) var(--pad-x);
  background: #f4f1ea;
  color: #101010;
  text-align: center;
}

body.dg-page .dg-cta__label {
  display: block;
  margin-bottom: clamp(24px, 4vh, 36px);
  color: #666;
}

body.dg-page .dg-cta__title {
  margin: 0;
  font-size: clamp(48px, 10vw, 112px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: #101010;
}

body.dg-page .dg-cta__title span {
  color: rgba(16, 16, 16, 0.46);
}

body.dg-page .dg-cta__lede {
  margin: clamp(24px, 4vh, 36px) auto 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
  color: rgba(16, 16, 16, 0.62);
}

body.dg-page .dg-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(32px, 5vh, 48px);
}

/* —— Disciplinas —— */
body.dg-page .dg-disciplinas {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

body.dg-page .dg-disciplinas__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(56px, 9vh, 96px) var(--pad-x) clamp(40px, 6vh, 64px);
  border-bottom: 1px solid var(--line);
}

body.dg-page .dg-disciplinas__head h2 {
  margin: 0;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

body.dg-page .dg-disciplinas__head .mono {
  color: rgba(237, 237, 237, 0.42);
  white-space: nowrap;
}

body.dg-page .dg-disciplinas__list {
  display: flex;
  flex-direction: column;
}

body.dg-page .dg-disciplina {
  display: grid;
  grid-template-columns: clamp(88px, 10vw, 132px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 4.5vh, 44px) var(--pad-x);
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background 0.35s ease;
}

body.dg-page .dg-disciplina:last-child {
  border-bottom: 0;
}

body.dg-page .dg-disciplina:hover {
  background: rgba(255, 255, 255, 0.025);
}

body.dg-page .dg-disciplina__num {
  color: var(--muted);
  padding-top: 0.35em;
}

body.dg-page .dg-disciplina h3 {
  margin: 0 0 clamp(10px, 1.5vh, 14px);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.12;
}

body.dg-page .dg-disciplina p {
  margin: 0;
  max-width: min(56ch, 100%);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.64;
  letter-spacing: -0.012em;
  color: rgba(237, 237, 237, 0.56);
}

body.dg-page #kroveeEditorialAfter.editorial {
  position: relative;
  z-index: 37;
  background: var(--bg);
}

body.dg-page footer.site-foot {
  --pad-x: 48px;
}

body.dg-page footer.site-foot .site-foot__logo.reveal {
  opacity: 1;
  transform: none;
}

body.dg-page footer.site-foot .top .site-foot__logo {
  color: #e6eaf1;
}

body.dg-page footer.site-foot .top .site-foot__logo svg,
body.dg-page footer.site-foot .top .site-foot__logo svg use {
  fill: currentColor;
}

@media (max-width: 900px) {
  body.dg-page .dg-seen__prose {
    grid-template-columns: 1fr;
  }

  body.dg-page .dg-seen__prose p {
    grid-column: 1;
  }

  body.dg-page .dg-work__body {
    grid-template-columns: 1fr;
  }

  body.dg-page .dg-work__body > * {
    grid-column: 1;
  }

  body.dg-page .dg-work__body {
    grid-template-rows: none;
  }

  body.dg-page .dg-work__copy,
  body.dg-page .dg-work__cards {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
  }

  body.dg-page .dg-work__cards {
    margin-top: clamp(28px, 4vh, 44px);
  }

  body.dg-page .dg-work__cards {
    grid-template-columns: 1fr;
  }

  body.dg-page .dg-build__body,
  body.dg-page .dg-build__grid {
    grid-template-columns: 1fr;
  }

  body.dg-page .dg-build__body > * {
    grid-column: 1;
  }

  body.dg-page #dgBuild .dg-build__card:nth-child(even) {
    border-left: 0;
  }

  /* Móvil: las tarjetas se deslizan con el dedo (scroll horizontal nativo), sin efecto. */
  body.dg-page .dg-build__viewport {
    min-width: 0;
  }

  body.dg-page .dg-build__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 18px;
    padding: 0 18px;
    border-bottom: 0;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.dg-page .dg-build__grid::-webkit-scrollbar {
    display: none;
  }

  body.dg-page #dgBuild .dg-build__card {
    flex: 0 0 min(82vw, 340px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: 300px;
    box-sizing: border-box;
    padding: 22px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #101010;
    scroll-snap-align: start;
  }

  body.dg-page #dgBuild .dg-build__card h3 {
    margin: 0;
    font-size: 24px;
    color: #101010;
  }

  body.dg-page #dgBuild .dg-build__card p {
    color: rgba(16, 16, 16, 0.62);
  }

  body.dg-page #dgBuild .dg-build__card strong {
    margin-bottom: 6px;
    color: #101010;
  }

  body.dg-page .dg-bento__head {
    grid-template-columns: 1fr;
  }

  body.dg-page .dg-bento__head p {
    justify-self: start;
  }

  body.dg-page .dg-bento__tile--a,
  body.dg-page .dg-bento__tile--b,
  body.dg-page .dg-bento__tile--c,
  body.dg-page .dg-bento__tile--d,
  body.dg-page .dg-bento__tile--e {
    grid-column: span 12;
  }

  body.dg-page .dg-metrics__grid {
    grid-template-columns: 1fr 1fr;
  }

  body.dg-page .dg-lab__stage {
    display: block;
    padding: 0;
  }

  body.dg-page .dg-lab__phase {
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }

  body.dg-page .dg-lab__phase:first-child {
    border-top: 1px solid var(--line);
  }

  body.dg-page .dg-lab__row {
    display: grid;
    grid-template-columns: minmax(72px, 0.34fr) minmax(0, 1fr) 76px;
    gap: 0;
    align-items: stretch;
    padding: 0;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--muted);
  }

  body.dg-page .dg-lab__row-num::after {
    content: none;
  }

  body.dg-page .dg-lab__row-num,
  body.dg-page .dg-lab__row-title {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 16px 14px;
    border-right: 1px solid var(--line);
  }

  body.dg-page .dg-lab__phase.is-active .dg-lab__row {
    color: #101010;
  }

  body.dg-page .dg-lab__action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  body.dg-page .dg-lab__phase:not(.is-active) .dg-lab__action::after {
    content: "CLICK";
  }

  body.dg-page .dg-lab__phase.is-active .dg-lab__action::after {
    content: "CLOSE";
  }

  body.dg-page .dg-lab__body {
    display: none;
    height: auto !important;
    border-top: 1px solid var(--line);
  }

  body.dg-page .dg-lab__phase.is-active .dg-lab__body {
    display: block;
  }

  body.dg-page .dg-lab__body-inner {
    grid-template-columns: 1fr;
    padding: clamp(22px, 3.5vw, 36px) clamp(22px, 4vw, 44px) clamp(28px, 4vw, 44px);
    opacity: 1 !important;
  }

  body.dg-page .dg-lab__body-copy {
    display: block;
  }

  body.dg-page .dg-lab__phase-title,
  body.dg-page .dg-lab__phase-desc,
  body.dg-page .dg-lab__phase-tags {
    grid-column: auto;
    grid-row: auto;
  }

  body.dg-page .dg-lab__phase-title {
    margin: 0 0 10px;
  }

  body.dg-page .dg-stack-scroll__arrow {
    display: none;
  }

  body.dg-page .dg-disciplinas__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.dg-page .dg-disciplina {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.dg-page .dg-disciplina__num {
    padding-top: 0;
  }

  body.dg-page footer.site-foot {
    --pad-x: 20px;
  }
}

/* Enlaces dentro del texto (p. ej. la landing de Territorios enlaza a cada territorio y a Embedded) */
.dg-inline-link {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.dg-inline-link:hover {
  opacity: 0.7;
}

/* ——— Los territorios (/territorios, sección 03): un panel por territorio ———
   Arriba, en una fila: capacidades y título | cuándo entra y el párrafo | el botón (mismas columnas
   que la fila de la cabecera de la sección: 4 + 5 + 3). Debajo del párrafo, desde su misma columna,
   una raya y «En lo que ayudamos» con las capacidades numeradas en filas de cuatro (en escalón,
   como en la referencia). En escritorio la sección se fija y los paneles
   suben uno tras otro, como el Método de la Home (krovee-territorio.js, initTerr). ——— */
body.dg-page .dg-terr {
  position: relative;
  z-index: 2;                 /* tapa el hero fijo al subir, como la sección 03 del resto de landings */
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.dg-terr__stage {
  position: relative;
  background: var(--bg);
}
.dg-terr__panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(36px, 7vh, 88px) 18px clamp(40px, 7vh, 80px);
  border-top: 1px solid var(--line);
}
.dg-terr__panel:first-child {
  border-top: 0;
}
.dg-terr__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "eye eye eye eye lab lab lab lab lab . . ."
    "tit tit tit tit txt txt txt txt txt btn btn btn";
  column-gap: 36px;
  row-gap: 18px;
  align-items: start;
}
.dg-terr__eyebrow,
.dg-terr__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.dg-terr__eyebrow { grid-area: eye; }
.dg-terr__label { grid-area: lab; }
.dg-terr__title {
  grid-area: tit;
  margin: 0;
  font-size: clamp(34px, min(3.6vw, 6.4vh), 60px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}
.dg-terr__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}
.dg-terr__when {
  grid-area: txt;
  margin: 0;
  max-width: 34em;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.dg-terr__desc {
  color: var(--muted);
}
.dg-terr__btn {
  grid-area: btn;
  justify-self: end;
  align-self: start;
}
.dg-terr__caps {
  /* empieza en la columna 5 de 12, la del párrafo: (ancho + hueco) × 4/12 */
  margin-top: clamp(32px, 6vh, 72px);
  margin-left: calc((100% + 36px) / 3);
  border-top: 1px solid var(--line);
}
.dg-terr__caps-title {
  margin: 0;
  padding: clamp(18px, 2.6vh, 28px) 0 clamp(18px, 3vh, 32px);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.dg-terr__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: clamp(16px, 2.8vh, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Cada capacidad: el número grande a la izquierda y el nombre a su lado, siempre a la misma distancia. */
.dg-terr__grid li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding-top: clamp(12px, 1.8vh, 16px);
  border-top: 1px solid var(--line);
}
.dg-terr__n {
  min-width: 1.32em;          /* todos los números miden lo mismo: el nombre empieza siempre igual */
  font-size: clamp(22px, min(1.8vw, 3.4vh), 30px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.dg-terr__cap {
  padding-top: 1px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}

/* Escritorio con pin: la sección se queda fija y cada panel ocupa la pantalla. */
@media (min-width: 901px) {
  .dg-terr.is-pinned .dg-terr__stage {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .dg-terr.is-pinned .dg-terr__stack {
    will-change: transform;
  }
  .dg-terr.is-pinned .dg-terr__panel {
    justify-content: center;  /* el contenido, centrado bajo la cabecera */
    height: 100vh;
    height: 100svh;
    padding-top: calc(var(--header-h) + clamp(24px, 4vh, 48px));
    padding-bottom: clamp(32px, 6vh, 72px);
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .dg-terr__head {
    grid-template-areas:
      "eye eye eye eye eye lab lab lab lab lab lab lab"
      "tit tit tit tit tit txt txt txt txt txt txt txt"
      ". . . . . btn btn btn btn btn btn btn";
  }
  .dg-terr__btn { justify-self: start; }
  .dg-terr__caps { margin-left: calc((100% + 36px) * 5 / 12); }
  .dg-terr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .dg-terr__panel {
    padding: 40px 18px 48px;
  }
  .dg-terr__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .dg-terr__title {
    margin: 14px 0 28px;
    font-size: clamp(32px, 9vw, 44px);
  }
  .dg-terr__label { margin-bottom: 10px; }
  .dg-terr__when { font-size: 17px; }
  .dg-terr__btn { margin-top: 28px; justify-self: auto; }
  .dg-terr__caps { margin-top: 40px; margin-left: 0; }
  .dg-terr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }
  .dg-terr__n { font-size: 24px; }
}

@media (max-width: 520px) {
  .dg-terr__grid {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .dg-terr__grid li {
    align-items: center;
    padding: 14px 0;
  }
  .dg-terr__grid li:last-child {
    border-bottom: 1px solid var(--line);
  }
  .dg-terr__cap {
    padding-top: 0;
    font-size: 16px;
    color: var(--fg, #ededed);
  }
}

/* ——— Hero de /territorios: las tres láminas de territorio a distinta profundidad (K/DG delante,
   K/BR y K/ST detrás, desenfocadas como con poca profundidad de campo) sobre un campo con las tres
   luces y letras al azar (krovee-field). Con ratón cambia el punto de vista (krovee-trio.js). ——— */
.dg-trio {
  position: relative;
  width: 100%;
  min-height: 130px;
  perspective: 1500px;
  perspective-origin: calc(50% + var(--mx, 0) * 26%) calc(46% + var(--my, 0) * 18%);
}
.dg-trio__land {
  position: absolute;
  inset: -6% -4%;
  -webkit-mask-image: radial-gradient(ellipse 62% 47% at 50% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 47% at 50% 50%, #000 45%, transparent 100%);
  transform: translate(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px));
}
/* Móvil: las láminas toman su tamaño del alto disponible (proporción vertical fija). */
.dg-trio__sheet {
  position: absolute;
  left: 50%;
  top: 9%;
  height: 82%;
  aspect-ratio: 10 / 14;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.9);
}
.dg-trio__sheet--st {
  transform: translate3d(12%, -17%, -700px) rotateY(calc(-20deg + var(--mx, 0) * 6deg));
  filter: blur(1.6px) brightness(0.72);
}
.dg-trio__sheet--br {
  transform: translate3d(-26%, -6%, -330px) rotateY(calc(-20deg + var(--mx, 0) * 6deg));
  filter: blur(0.6px) brightness(0.88);
}
.dg-trio__sheet--dg {
  transform: translate3d(-80%, 8%, 0) rotateY(calc(-20deg + var(--mx, 0) * 6deg));
}
/* Vidrio: brillo arriba y una arista apenas visible. */
.dg-trio__sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(120% 40% at 0% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.dg-trio__code,
.dg-trio__n {
  position: absolute;
  z-index: 4;
  top: 12px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.85);
}
.dg-trio__code { left: 12px; }
.dg-trio__n { right: 12px; }
.dg-trio__name {
  position: absolute;
  z-index: 4;
  left: 12px;
  right: 12px;
  bottom: 12px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #f5f5f5;
}
.dg-trio__sheet--br .dg-trio__code,
.dg-trio__sheet--br .dg-trio__n { color: rgba(20, 18, 16, 0.72); }
.dg-trio__sheet--br .dg-trio__name { color: #141210; }
/* Blur sutil en una esquina, distinto en cada lámina. */
.dg-trio__blur {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.dg-trio__blur::before,
.dg-trio__blur::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.dg-trio__sheet--dg .dg-trio__blur::before {
  right: -55%;
  bottom: -9%;
  width: 150%;
  height: 22%;
  background: linear-gradient(90deg, rgba(160, 70, 255, 0), #b04dff 55%, #ff5fd2);
  opacity: 0.55;
  filter: blur(24px);
  transform: rotate(-32deg);
  mix-blend-mode: screen;
}
.dg-trio__sheet--br .dg-trio__blur::before {
  left: -55%;
  top: -12%;
  width: 150%;
  height: 34%;
  background: radial-gradient(closest-side, #9aa8be, rgba(154, 168, 190, 0));
  opacity: 0.55;
  filter: blur(18px);
}
.dg-trio__sheet--br .dg-trio__blur::after {
  left: 18%;
  top: -5%;
  width: 70%;
  height: 12%;
  background: #e0a457;
  opacity: 0.32;
  filter: blur(16px);
  transform: rotate(-12deg);
}
.dg-trio__sheet--st .dg-trio__blur::before {
  right: -22%;
  top: -6%;
  width: 82%;
  height: 28%;
  background: radial-gradient(closest-side, #5ff3e0, rgba(17, 168, 160, 0));
  opacity: 0.5;
  filter: blur(12px);
  mix-blend-mode: screen;
}
.dg-trio__sheet--st .dg-trio__blur::after {
  right: 8%;
  top: 9%;
  width: 110%;
  height: 4%;
  background: #c8ff6a;
  opacity: 0.24;
  filter: blur(9px);
  transform: rotate(-52deg);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  .dg-trio {
    animation: dg-trio-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
@keyframes dg-trio-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 901px) {
  /* El hero de esta página reparte 50/50: la composición ocupa casi media pantalla. */
  body.dg-page.dg-page--full-hero .dg-open {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body.dg-page .dg-open__mark:has(.dg-trio) {
    align-self: stretch;
    min-height: 0;
    padding: clamp(20px, 3vh, 40px) clamp(24px, 3.4vw, 56px) clamp(20px, 3vh, 40px) 0;
  }
  body.dg-page .dg-open__mark .dg-trio {
    height: 100%;
    max-height: 600px;
    margin-block: auto;
  }
  .dg-trio__land {
    inset: -7% -9% -7% -14%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-composite: intersect;
  }
  .dg-trio__sheet {
    left: 24%;
    width: 50%;
    aspect-ratio: auto;
    border-radius: 22px;
  }
  .dg-trio__sheet--st { transform: translate3d(62%, -17%, -700px) rotateY(calc(-20deg + var(--mx, 0) * 6deg)); }
  .dg-trio__sheet--br { transform: translate3d(24%, -6%, -330px) rotateY(calc(-20deg + var(--mx, 0) * 6deg)); }
  .dg-trio__sheet--dg { transform: translate3d(-30%, 8%, 0) rotateY(calc(-20deg + var(--mx, 0) * 6deg)); }
  .dg-trio__code,
  .dg-trio__n {
    top: 20px;
    font-size: 11px;
  }
  .dg-trio__code { left: 22px; }
  .dg-trio__n { right: 22px; }
  .dg-trio__name {
    left: 22px;
    right: 22px;
    bottom: 22px;
    font-size: clamp(16px, 1.35vw, 20px);
  }
}

/* /territorios en móvil: el hero cabe entero en la pantalla (titular, texto y botón visibles);
   la composición se queda con el alto que sobra. */
@media (max-width: 900px) {
  body.dg-page.dg-page--full-hero .dg-open {
    height: 100vh;
    height: 100svh;
    min-height: 0;
  }
  body.dg-page.dg-page--full-hero .dg-open__mark {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    align-items: stretch;
    padding-top: 10px;
    padding-bottom: 2px;
  }
  body.dg-page.dg-page--full-hero .dg-open__copy {
    padding-top: 16px;
    padding-bottom: 24px;
  }
}

/* /territorios: el hero ocupa toda la pantalla en escritorio y la sección 02 sube por encima,
   como lo hace la 03 en el resto de landings (mismo mecanismo que en móvil). */
@media (min-width: 901px) {
  body.dg-page.dg-page--full-hero .dg-lead {
    display: contents;
  }
  body.dg-page.dg-page--full-hero .dg-open {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100vh;
    height: 100svh;
  }
  body.dg-page.dg-page--full-hero .dg-seen {
    position: relative;
    z-index: 2;
    height: auto;
  }
}

/* ——— /territorios: ajustes de la entrega de octubre ——— */

/* Hero: el bloque de campo se funde también por la derecha y por abajo (antes terminaba en corte). */
@media (min-width: 901px) {
  .dg-trio__land {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 66%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 66%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  }
}

/* Sección 02 como manifiesto (sin círculo). */
body.dg-page .dg-seen--manifest {
  padding: 0 clamp(18px, 5vw, 88px);
}
body.dg-page .dg-seen--manifest .edo-declaration-rule {
  margin-inline: calc(-1 * clamp(18px, 5vw, 88px));
}
body.dg-page .dg-seen--manifest .edo-manifest__grid {
  padding: clamp(56px, 11vh, 128px) 0 clamp(56px, 10vh, 120px);
}
body.dg-page .dg-seen--manifest .edo-manifest__lbl {
  line-height: 1.7;
}
body.dg-page .dg-seen--manifest .edo-manifest__h2 {
  max-width: 18ch;
}
body.dg-page .dg-seen--manifest .edo-manifest__h2 .edo-manifest__muted {
  max-width: 30ch;
  line-height: 1.22;
}
@media (min-width: 901px) {
  body.dg-page .dg-seen--manifest .edo-manifest__lbl { grid-column: 1 / span 3; padding-left: 0; }
  body.dg-page .dg-seen--manifest .edo-manifest__body { grid-column: 4 / span 8; }
}

/* Sección 03: más aire a los lados y un fondo suave a la derecha de cada territorio. */
.dg-terr { --terr-px: clamp(20px, 5.4vw, 96px); }
.dg-terr .edo-declaration-intro {
  padding-inline: max(0px, calc(var(--terr-px) - 18px));
}
.dg-terr__panel {
  position: relative;
  overflow: hidden;
  padding-inline: var(--terr-px);
  isolation: isolate;
}
.dg-terr__panel > * { position: relative; z-index: 1; }
.dg-terr__panel::before,
.dg-terr__panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -18%;
  bottom: -18%;
  right: -12%;
  width: 88%;
  pointer-events: none;
  filter: blur(54px);
  will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
/* Cada territorio mueve sus luces de otra manera con el ratón (--lx, --ly, de -1 a 1):
   K/DG, dos manchas que se desplazan en sentidos contrarios (paralaje); K/BR, una franja cálida que
   barre arriba y abajo y se inclina; K/ST, un resplandor que se acerca al puntero. */
.dg-terr__panel--dg::before {
  opacity: 0.85;
  background:
    radial-gradient(46% 58% at 62% 26%, rgba(70, 84, 255, 0.36), transparent 70%),
    radial-gradient(32% 36% at 48% 88%, rgba(40, 190, 255, 0.18), transparent 70%);
  transform: translate(calc(var(--lx, 0) * -46px), calc(var(--ly, 0) * -30px));
}
.dg-terr__panel--dg::after {
  opacity: 0.85;
  background: radial-gradient(36% 48% at 90% 62%, rgba(150, 84, 255, 0.32), transparent 70%);
  transform: translate(calc(var(--lx, 0) * 70px), calc(var(--ly, 0) * 48px));
}
.dg-terr__panel--br::before {
  opacity: 0.9;
  background:
    radial-gradient(86% 22% at 54% 50%, rgba(238, 226, 198, 0.2), transparent 72%),
    radial-gradient(56% 16% at 78% 54%, rgba(224, 164, 87, 0.17), transparent 72%);
  top: 0;
  bottom: 0;
  transform: translate(0, calc(var(--ly, 0) * 150px)) rotate(calc(-8deg + var(--lx, 0) * 7deg));
}
.dg-terr__panel--br::after {
  opacity: 0.8;
  background:
    radial-gradient(40% 44% at 92% 20%, rgba(224, 164, 87, 0.2), transparent 70%),
    radial-gradient(34% 32% at 56% 86%, rgba(154, 168, 190, 0.17), transparent 70%);
  transform: translate(calc(var(--lx, 0) * -26px), calc(var(--ly, 0) * -18px));
}
.dg-terr__panel--st::before {
  opacity: 0.9;
  background: radial-gradient(40% 46% at 74% 46%, rgba(25, 196, 119, 0.32), transparent 70%);
  transform: translate(calc(var(--lx, 0) * 190px), calc(var(--ly, 0) * 120px));
}
.dg-terr__panel--st::after {
  opacity: 0.8;
  background:
    radial-gradient(32% 38% at 52% 80%, rgba(60, 214, 200, 0.2), transparent 70%),
    radial-gradient(30% 36% at 94% 16%, rgba(196, 238, 120, 0.18), transparent 70%);
  transform: translate(calc(var(--lx, 0) * 90px), calc(var(--ly, 0) * 60px));
}
@media (max-width: 900px) {
  .dg-terr__panel::before,
  .dg-terr__panel::after { width: 100%; }
}

/* Hero de /territorios: las letras de las láminas van grabadas en relieve, como los datos de una
   tarjeta (krovee-field.js las dibuja así con --kf-look: emboss); las del fondo se quedan suaves y
   tenues, por detrás. */
.dg-trio__sheet .kfield {
  --kf-look: emboss;
  --kf-emb-hi: rgba(255, 255, 255, 0.5);
  --kf-emb-lo: rgba(0, 0, 0, 0.55);
  --kf-emb-face: rgba(255, 255, 255, 0.07);
  --kf-emb-size: 1.25;
  --kf-emb-depth: 0.7;
  --kf-clear-top: 0.1;
  --kf-clear-bottom: 0.2;
  --kf-clear-x: 0.07;
}
.dg-trio__sheet .kfield--br {
  --kf-emb-hi: rgba(255, 255, 255, 0.85);
  --kf-emb-lo: rgba(84, 58, 28, 0.42);
  --kf-emb-face: rgba(255, 255, 255, 0.16);
}
@media (max-width: 900px) {
  .dg-trio__sheet .kfield {
    --kf-emb-size: 1.05;
    --kf-emb-depth: 0.55;
  }
}
.dg-trio__sheet .kfield__type { filter: none; }
.dg-trio__sheet .kfield__type--far { display: none; }
.dg-trio__land .kfield__type { filter: blur(0.1cqw); opacity: 0.55; }
.dg-trio__land .kfield__type--far { filter: blur(0.32cqw); opacity: 0.4; }

/* Rótulos de las láminas: grabados y con el canto metalizado, como el nombre en una tarjeta. */
.dg-trio__code,
.dg-trio__n,
.dg-trio__name {
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  color: transparent;
  background-image: linear-gradient(180deg, #ffffff 0%, #eceef3 34%, #a8aebb 54%, #d9dde5 76%, #f6f7fa 100%);
  background-size: 100% 1.3em;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(-0.5px -0.5px 0 rgba(255, 255, 255, 0.4)) drop-shadow(0.6px 0.8px 0 rgba(0, 0, 0, 0.62)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}
.dg-trio__name {
  font-size: 11px;
  letter-spacing: 0.06em;
}
.dg-trio__sheet--br .dg-trio__code,
.dg-trio__sheet--br .dg-trio__n,
.dg-trio__sheet--br .dg-trio__name {
  color: transparent;
  background-image: linear-gradient(180deg, #57504a 0%, #2a2520 40%, #141210 56%, #3a342d 100%);
  filter: drop-shadow(-0.5px -0.5px 0 rgba(255, 255, 255, 0.8)) drop-shadow(0.6px 0.8px 0 rgba(84, 58, 28, 0.38));
}
@media (min-width: 901px) {
  .dg-trio__name {
    font-size: clamp(12px, 1vw, 15px);
  }
}

/* Sección 06 / 07: los cuatro botones en filas de dos. */
body.dg-page #dgCombine .dg-cta__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 12px;
}
body.dg-page #dgCombine .dg-cta__actions .studio-page__btn {
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 560px) {
  body.dg-page #dgCombine .dg-cta__actions { grid-template-columns: 1fr; }
}

/* K/BR: su párrafo de "Lo que solemos ver" es más largo (5 líneas en lugar de 4) y se salía por el
   borde inferior. Esta sección gana algo de altura y el texto, una columna más de ancho. */
@media (min-width: 901px) {
  body.dg-page.dg-page--br {
    --dg-seen-h: calc(clamp(336px, 38vh, 400px) - var(--dg-hero-gap));
  }

  body.dg-page.dg-page--br .dg-seen__prose p {
    grid-column: 5 / span 7;
  }
}

/* Pantallas táctiles: las luces de cada territorio solo se mueven con el ratón, así que no necesitan
   capa propia (eran seis capas del alto de la pantalla). El desenfoque del último territorio es una
   transición de una sola vez: la capa se crea solo mientras dura. Mismo aspecto, menos memoria. */
@media (hover: none) {
  body .dg-terr__panel::before,
  body .dg-terr__panel::after,
  body .dg-terr.is-rise .dg-terr__panel:last-child {
    will-change: auto;
  }
}

/* Plataformas: el logotipo de la plataforma ocupa el hueco del hero (imagen ya girada hacia la izquierda). */
body.dg-page .dg-open__icon {
  display: block;
  width: min(300px, 70vw);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
@media (min-width: 901px) {
  body.dg-page .dg-open__icon {
    width: min(480px, 36vw, calc(100svh - 240px));
  }
}

/* TEST iOS B4: Territorios en móvil — blur más corto (el de 54px sobre cada panel anclado satura Safari)
   y el territorio de atrás se atenúa sin filtro cuando sube el cubo blanco. */
@media (max-width: 900px) {
  .dg-terr__panel::after { filter: blur(22px); will-change: auto; }
  .dg-terr.is-rise .dg-terr__panel:last-child.is-behind { filter: none; opacity: 0.35; }
}