/*
 * Capa HTML de la experiencia (spec propia §11.5, §12, §14): menú visible, hoja de MENÚ, contenedor del HUD,
 * recorte accesible, paneles y detalle de proyecto en una columna con hairlines, cortina con cursor, foco
 * visible, diálogos y consentimiento. La carga XpShell (src/components/XpShell.tsx); sin WebGL2 queda
 * html.xp-doc. Colores y curvas de tokens.css. Las variables internas llevan el prefijo --xg- para no tapar
 * las --xp-* que ui/hud-layout.js publica en <html>; la rejilla es la misma de §11.2 por breakpoint.
 */

.xp-shell {
  /* Rejilla (§11.2–§11.3), pequeño 640–1599 */
  --xg-m: 24px;
  --xg-pad: 16px;
  --xg-bar-h: 44px;
  --xg-fs: 10.5px;
  --xg-fi: 12.5px;
  /* Menú (§11.3): borde derecho en W − m − pad − 8, centro en y = m + 26 */
  --xg-menu-right: 48px;
  --xg-menu-cy: 50px;
  --xg-menu-gap: 28px;
  --xg-menu-py: 8px;
  --xg-menu-fs: 10.5px;
  --xg-menu-lh: 12px;
  /* Columna de los paneles (§12.1) */
  --xg-col-right: 48px;
  --xg-col-left: auto;
  --xg-col-w: 520px;
  --xg-col-top: 92px;
  --xg-col-bottom: 92px;
  --xg-col-pad: 28px;
  --xg-arm: 14px;
  /* Consentimiento (§11.3) */
  --xg-consent-left: auto;
  --xg-consent-right: 24px;
  --xg-consent-top: auto;
  --xg-consent-bottom: 84px;
  --xg-consent-w: 340px;
  --xg-consent-h: 72px;
  --xg-consent-px: 16px;
  --xg-consent-py: 13px;
  --xg-consent-gap: 6px;
  --xg-consent-btn: 22px;
  /* Etiqueta del foco del recorte: por encima de la caja del carrusel */
  --xg-chip-bottom: 106px;
  /* Tipografía de la columna (§12.2) */
  --xg-title: 24px;
  --xg-title-lh: 30px;
  --xg-body: 15px;
  --xg-body-lh: 23px;
  --xg-tech-xs: 9.5px;
  --xg-tech-s: 10px;
  --xg-power2-in: cubic-bezier(0.32, 0, 0.67, 0);
  color: var(--bone);
  font-family: var(--font-sans);
}

@media (min-width: 1600px) and (min-height: 800px) {
  .xp-shell {
    --xg-m: 32px;
    --xg-pad: 20px;
    --xg-bar-h: 52px;
    --xg-fs: 12px;
    --xg-fi: 14px;
    --xg-menu-right: 60px;
    --xg-menu-cy: 62px;
    --xg-menu-gap: 34px;
    --xg-menu-fs: 12px;
    --xg-menu-lh: 14px;
    --xg-col-right: 60px;
    --xg-col-w: 600px;
    --xg-col-top: 116px;
    --xg-col-bottom: 108px;
    --xg-consent-right: 32px;
    --xg-consent-bottom: 100px;
    --xg-consent-w: 400px;
    --xg-consent-h: 80px;
    --xg-consent-px: 18px;
    --xg-consent-py: 15px;
    --xg-consent-gap: 8px;
    --xg-consent-btn: 24px;
    --xg-chip-bottom: 157px;
  }
}

/* Móvil: un eje < 640 (§11.2). Horizontal por defecto; vertical abajo. */
@media (max-width: 639.98px), (max-height: 639.98px) {
  .xp-shell {
    --xg-m: 14px;
    --xg-pad: 10px;
    --xg-bar-h: 36px;
    --xg-fs: 9.5px;
    --xg-fi: 12px;
    --xg-menu-right: 32px;
    --xg-menu-cy: 36px;
    --xg-menu-gap: 16px;
    --xg-menu-py: 14px;
    --xg-menu-fs: 9.5px;
    --xg-menu-lh: 10px;
    --xg-col-right: 14px;
    --xg-col-w: 406px;
    --xg-col-top: 62px;
    --xg-col-bottom: 60px;
    --xg-col-pad: 18px;
    --xg-arm: 12px;
    /* Apaisado: arriba a la izquierda, sobre el cielo (arriba a la derecha tapaba el ápice de la A). */
    --xg-consent-right: auto;
    --xg-consent-left: 14px;
    --xg-consent-top: 58px;
    --xg-consent-bottom: auto;
    --xg-consent-w: 340px;
    --xg-consent-h: 56px;
    --xg-consent-px: 12px;
    --xg-consent-py: 7px;
    --xg-consent-gap: 4px;
    --xg-consent-btn: 20px;
    --xg-chip-bottom: 141px;
    --xg-title: 20px;
    --xg-title-lh: 26px;
    --xg-body: 14px;
    --xg-body-lh: 21px;
  }
}

@media (max-width: 639.98px) and (orientation: portrait), (max-height: 639.98px) and (orientation: portrait) {
  .xp-shell {
    --xg-bar-h: 40px;
    --xg-col-left: 14px;
    --xg-col-w: auto;
    --xg-col-top: 70px;
    --xg-col-bottom: 64px;
    --xg-consent-left: 14px;
    --xg-consent-right: 14px;
    --xg-consent-w: auto;
    --xg-consent-h: 62px;
    --xg-consent-py: 9px;
    --xg-consent-btn: 22px;
  }
}

/* --- Recorte accesible --------------------------------------------------------------------- */

/* Legible por lectores y buscadores, invisible a la vista. Sin clip ni clip-path: así los descendientes
   fijos (el panel abierto y el control enfocado) escapan del recorte; la caja de 1 px queda fuera. */
html:not(.xp-doc) .xp-shell .xp-sr {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  white-space: nowrap;
  pointer-events: none;
}

html:not(.xp-doc) .xp-shell .xp-sr * {
  pointer-events: auto;
}

/* Lienzo WebGL a pantalla completa. */
.xp-shell .xp-webgl {
  position: fixed;
  z-index: 0;
  inset: 0;
  background: var(--ink);
}

.xp-shell .xp-webgl canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Contenedor del HUD (§11.9): cromo HTML de ui/hud-dom.js por encima del velo y de los paneles; no recibe
   clics (solo sus controles, que llevan pointer-events: auto en xp-hud.css). */
.xp-shell > .xp-hud {
  position: fixed;
  z-index: 320;
  inset: 0;
  pointer-events: none;
}

html.xp-doc .xp-shell > .xp-hud {
  display: none;
}

.xp-shell .xp-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* --- Foco visible: contorno de 1 px con 3 px de separación ------------------------------------ */

.xp-shell :focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 3px;
}

/* Un control del contenido accesible que recibe el foco sale del recorte como una etiqueta de 1 px abajo
   al centro, por encima de la barra y de la caja del carrusel: así el foco siempre se ve. */
html:not(.xp-doc) .xp-shell .xp-sr :is(a[href], button, summary, [tabindex]:not([tabindex="-1"])):focus-visible:not([data-xp-state] *) {
  position: fixed !important;
  z-index: 360;
  left: 50%;
  bottom: calc(var(--xg-chip-bottom) + env(safe-area-inset-bottom, 0px));
  display: block;
  box-sizing: border-box;
  width: max-content !important;
  max-width: min(calc(100vw - 2 * var(--xg-m)), 460px);
  height: auto !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  overflow: visible !important;
  border: 1px solid var(--hairline-strong);
  outline: none;
  transform: translateX(-50%);
  background: rgba(4, 5, 6, 0.86);
  color: var(--bone);
  font: 500 var(--xg-fi) / 1.4 var(--font-sans);
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: normal;
  animation: xp-chip-in 0.3s var(--ease-in-out) both;
}

@keyframes xp-chip-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* --- Cortina con cursor de 1 px (§11.7): sin sustitución de glifos ---------------------------- */

html:not(.xp-doc) .xp-shell [data-xp-rv="wait"] {
  clip-path: inset(0 100% 0 0);
}

html:not(.xp-doc) .xp-shell [data-xp-rv="run"] {
  animation: xp-curtain var(--xg-rd, 0.35s) var(--ease-in-out) var(--xg-rdelay, 0s) both;
}

html:not(.xp-doc) .xp-shell [data-xp-rv="run"]::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(244, 245, 246, 0.8);
  pointer-events: none;
  animation: xp-caret var(--xg-rd, 0.35s) var(--ease-in-out) var(--xg-rdelay, 0s) both;
}

@keyframes xp-curtain {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes xp-caret {
  0% {
    left: 0;
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 1px);
    opacity: 0;
  }
}

/* --- Menú visible (§11.5) ------------------------------------------------------------------ */

.xp-shell .xp-menu {
  position: fixed;
  z-index: 340;
  top: var(--xg-menu-cy);
  right: var(--xg-menu-right);
  transform: translateY(-50%);
}

.xp-shell .xp-menu__list {
  display: flex;
  gap: var(--xg-menu-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.xp-shell .xp-menu__item--more {
  display: none;
}

.xp-shell .xp-menu__link {
  position: relative;
  display: block;
  margin: 0;
  padding: var(--xg-menu-py) 0;
  border: 0;
  background: none;
  color: var(--silver);
  font: 400 var(--xg-menu-fs) / var(--xg-menu-lh) var(--font-tech);
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.25s var(--ease-premium),
    clip-path 0.3s var(--ease-in-out);
}

/* Subrayado de 1 px al 34 % que crece de izquierda a derecha (0,25 s); lleno en la ruta activa. */
.xp-shell .xp-menu__link::after {
  content: "";
  position: absolute;
  right: 0.13em;
  bottom: calc(var(--xg-menu-py) - 6px);
  left: 0;
  height: 1px;
  background: var(--hairline-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease-premium);
}

.xp-shell .xp-menu__link:hover,
.xp-shell .xp-menu__link[aria-current],
.xp-shell .xp-menu__link[data-xp-here] {
  color: var(--bone);
}

.xp-shell .xp-menu__link:hover::after,
.xp-shell .xp-menu__link[aria-current]::after,
.xp-shell .xp-menu__link[data-xp-here]::after {
  transform: scaleX(1);
}

.xp-shell .xp-menu__link[aria-current]::after,
.xp-shell .xp-menu__link[data-xp-here]::after {
  transition: none;
}

/* Antes del HUD (intro y loader) el menú espera tras una cortina; entra de derecha a izquierda (§11.8). */
/* El recorte deja margen fuera de la caja: no corta el foco ni la zona táctil. */
html.motion-xp:not([data-xp-menu-in]) .xp-shell .xp-menu:not(:focus-within) .xp-menu__link {
  clip-path: inset(-8px -12px -8px calc(100% + 12px));
  transition: none;
}

html.motion-xp[data-xp-menu-in] .xp-shell .xp-menu__link {
  clip-path: inset(-8px -12px -8px -12px);
}

/* Móvil: zona táctil de 44 px de alto (la caja visible mide lo de §11.3). */
@media (max-width: 639.98px), (max-height: 639.98px) {
  .xp-shell .xp-menu__link::before {
    content: "";
    position: absolute;
    inset: -3px -8px;
  }
}

/* Móvil vertical: SERVICIOS · CONTACTO · MENÚ. */
@media (max-width: 639.98px) and (orientation: portrait), (max-height: 639.98px) and (orientation: portrait) {
  .xp-shell .xp-menu__item--wide {
    display: none;
  }

  .xp-shell .xp-menu__item--more {
    display: block;
  }
}

/* --- Hoja de MENÚ (móvil vertical) ------------------------------------------------------------ */

.xp-shell .xp-sheet {
  position: fixed;
  z-index: 380;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: calc(var(--xg-m) + env(safe-area-inset-top, 0px)) var(--xg-m) calc(var(--xg-m) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: rgba(4, 5, 6, 0.96);
  color: var(--bone);
  transition: opacity 0.25s var(--ease-premium);
}

.xp-shell .xp-sheet[hidden] {
  display: none;
}

/* Con la hoja abierta, lo que queda debajo (menú, HUD, consentimiento y panel abierto) no se transparenta por
   el 4 % de la tinta. */
html[data-xp-sheet-open] .xp-shell .xp-menu,
html[data-xp-sheet-open] .xp-shell > .xp-hud,
html[data-xp-sheet-open] .xp-shell .xp-consent,
html[data-xp-sheet-open] .xp-shell .xp-section[data-xp-state] {
  visibility: hidden;
}

.xp-shell .xp-sheet[data-xp-sheet-state="opening"] {
  opacity: 0;
}

.xp-shell .xp-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 calc(var(--xg-pad) + 8px) 0 var(--xg-pad);
  border-bottom: 1px solid var(--hairline-soft);
}

.xp-shell .xp-sheet__kicker {
  margin: 0;
  color: var(--steel);
  font: 400 var(--xg-tech-s) / 1 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.xp-shell .xp-sheet__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.xp-shell .xp-sheet__list > li + li {
  border-top: 1px solid var(--hairline-soft);
}

.xp-shell .xp-sheet__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 13px var(--xg-pad);
  color: var(--bone);
  font: 400 20px / 26px var(--font-sans);
  text-decoration: none;
  transition: color 0.25s var(--ease-premium);
}

.xp-shell .xp-sheet__link[aria-current] {
  color: var(--bone);
}

.xp-shell .xp-sheet__link:not([aria-current]) {
  color: var(--silver);
}

.xp-shell .xp-sheet__num {
  min-width: 2.4em;
  color: var(--steel);
  font: 400 var(--xg-tech-xs) / 1 var(--font-tech);
  letter-spacing: 0.13em;
}

.xp-shell .xp-sheet__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: auto 0 0;
  padding: 18px var(--xg-pad) 4px;
  border-top: 1px solid var(--hairline-soft);
}

/* --- Botones y enlaces (§11.4): cajas de 1 px, Michroma, sin corchetes --------------------------- */

.xp-shell .xp-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 26px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  background: none;
  color: var(--bone);
  font: 400 var(--xg-tech-s) / 1 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.25s var(--ease-premium),
    color 0.25s var(--ease-premium);
}

.xp-shell .xp-button:hover {
  border-color: var(--hairline-strong);
}

.xp-shell .xp-arrow {
  flex: none;
  width: 0.92em;
  height: 0.92em;
  margin-left: 0.45em;
  overflow: visible;
}

.xp-shell .xp-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  color: var(--silver);
  font: 400 var(--xg-tech-s) / 1.3 var(--font-tech);
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s var(--ease-premium);
}

.xp-shell .xp-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: var(--hairline-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease-premium);
}

.xp-shell .xp-link:hover,
.xp-shell .xp-link:focus-visible {
  color: var(--bone);
}

.xp-shell .xp-link:hover::after,
.xp-shell .xp-link:focus-visible::after {
  transform: scaleX(1);
}

.xp-shell .xp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

/* --- Paneles y detalle de proyecto (§12) ------------------------------------------------------ */

.xp-shell .xp-section:not([data-xp-state]):not([data-xp-sr-open]) .xp-close {
  display: none;
}

.xp-shell .xp-section[data-xp-state] .xp-opener,
.xp-shell .xp-section[data-xp-sr-open] .xp-opener {
  display: none;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-state] {
  position: fixed !important;
  z-index: 300;
  inset: 0;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  color: var(--silver);
  font: 400 var(--xg-body) / var(--xg-body-lh) var(--font-sans);
  letter-spacing: 0;
  white-space: normal;
  pointer-events: auto;
}

/* Proyecto: la losa queda viva a la izquierda (se puede seguir limpiando el polvo); solo la columna recibe
   el puntero. */
html:not(.xp-doc) .xp-shell .xp-project[data-xp-state],
html:not(.xp-doc) .xp-shell .xp-project[data-xp-state] > .xp-opener {
  pointer-events: none;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-state] .xp-panel {
  position: absolute;
  top: var(--xg-col-top);
  right: var(--xg-col-right);
  bottom: var(--xg-col-bottom);
  left: var(--xg-col-left);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--xg-col-w);
  max-width: calc(100vw - 2 * var(--xg-m));
  padding: var(--xg-col-pad);
  clip-path: inset(-4px -4px -4px -4px);
  pointer-events: auto;
}

/* Con el consentimiento en pantalla la columna se acorta para no quedar debajo de él. */
html:not(.xp-doc) .xp-shell:has(.xp-consent) .xp-section[data-xp-state] .xp-panel {
  bottom: calc(var(--xg-consent-bottom) + var(--xg-consent-h) + 12px);
}

@media (max-width: 639.98px), (max-height: 639.98px) {
  html:not(.xp-doc) .xp-shell:has(.xp-consent) .xp-section[data-xp-state] .xp-panel {
    top: calc(var(--xg-consent-top) + var(--xg-consent-h) + 8px);
    bottom: var(--xg-col-bottom);
  }
}

/* Marco de 1 px al 12 % y esquinas al 34 % (brazos de 14 px); fondo tinta al 92 %. */
.xp-shell .xp-frame {
  display: none;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-state] .xp-frame {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-state] .xp-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 6, 0.92);
  opacity: 0;
  transition: opacity 0.3s var(--ease-premium) 0.05s;
}

.xp-shell .xp-frame__line {
  position: absolute;
  background: var(--hairline);
  transition: transform 0.35s var(--ease-premium);
}

.xp-shell .xp-frame__line--t {
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right center;
}

.xp-shell .xp-frame__line--b {
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right center;
}

.xp-shell .xp-frame__line--r,
.xp-shell .xp-frame__line--l {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: center top;
}

.xp-shell .xp-frame__line--r {
  right: 0;
}

.xp-shell .xp-frame__line--l {
  left: 0;
}

.xp-shell .xp-frame__corner {
  position: absolute;
  width: var(--xg-arm);
  height: var(--xg-arm);
  opacity: 0;
  transition: opacity 0.15s linear;
}

.xp-shell .xp-frame__corner::before,
.xp-shell .xp-frame__corner::after {
  content: "";
  position: absolute;
  background: var(--hairline-strong);
}

.xp-shell .xp-frame__corner::before {
  left: 0;
  width: 100%;
  height: 1px;
}

.xp-shell .xp-frame__corner::after {
  top: 0;
  width: 1px;
  height: 100%;
}

.xp-shell .xp-frame__corner--tl {
  top: 0;
  left: 0;
}

.xp-shell .xp-frame__corner--tr {
  top: 0;
  right: 0;
}

.xp-shell .xp-frame__corner--br {
  right: 0;
  bottom: 0;
}

.xp-shell .xp-frame__corner--bl {
  bottom: 0;
  left: 0;
}

.xp-shell .xp-frame__corner--tl::before,
.xp-shell .xp-frame__corner--tr::before {
  top: 0;
}

.xp-shell .xp-frame__corner--bl::before,
.xp-shell .xp-frame__corner--br::before {
  bottom: 0;
}

.xp-shell .xp-frame__corner--tl::after,
.xp-shell .xp-frame__corner--bl::after {
  left: 0;
}

.xp-shell .xp-frame__corner--tr::after,
.xp-shell .xp-frame__corner--br::after {
  right: 0;
}

/* Dibujo del marco (§12.3, t = 0,05 s): desde la esquina superior derecha, la hairline superior hacia la
   izquierda (0,35 s) y el lateral derecho hacia abajo (0,3 s); después el lateral izquierdo y la inferior. */
html:not(.xp-doc) .xp-shell .xp-section[data-xp-drawn] .xp-frame::before {
  opacity: 1;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-drawn] .xp-frame__line {
  transform: none;
}

.xp-shell .xp-section[data-xp-drawn] .xp-frame__line--t {
  transition: transform 0.35s var(--ease-premium) 0.05s;
}

.xp-shell .xp-section[data-xp-drawn] .xp-frame__line--r {
  transition: transform 0.3s var(--ease-premium) 0.05s;
}

.xp-shell .xp-section[data-xp-drawn] .xp-frame__line--b {
  transition: transform 0.35s var(--ease-premium) 0.35s;
}

.xp-shell .xp-section[data-xp-drawn] .xp-frame__line--l {
  transition: transform 0.3s var(--ease-premium) 0.4s;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-drawn] .xp-frame__corner {
  opacity: 1;
}

.xp-shell .xp-section[data-xp-drawn] .xp-frame__corner--tr {
  transition-delay: 0.05s;
}

.xp-shell .xp-section[data-xp-drawn] .xp-frame__corner--br {
  transition-delay: 0.35s;
}

.xp-shell .xp-section[data-xp-drawn] .xp-frame__corner--tl {
  transition-delay: 0.4s;
}

.xp-shell .xp-section[data-xp-drawn] .xp-frame__corner--bl {
  transition-delay: 0.7s;
}

/* Cierre (§12.3): contenido fuera en 0,15 s y el marco se recoge hacia la esquina superior derecha en
   0,3 s (power2.in). */
html:not(.xp-doc) .xp-shell .xp-section[data-xp-state="closing"] .xp-panel {
  clip-path: inset(0 0 100% 100%);
  transition: clip-path 0.3s var(--xg-power2-in) 0.15s;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-state="closing"] :is(.xp-panel__head, .xp-panel__view) {
  opacity: 0;
  transition: opacity 0.15s linear;
}

/* Cambio entre paneles, enlace directo o movimiento reducido: el marco ya está. */
html:not(.xp-doc) .xp-shell .xp-section[data-xp-instant] .xp-frame::before,
html:not(.xp-doc) .xp-shell .xp-section[data-xp-instant] .xp-frame__line,
html:not(.xp-doc) .xp-shell .xp-section[data-xp-instant] .xp-frame__corner {
  transition: none !important;
}

/* Contenido de la columna */
.xp-shell .xp-panel__head,
.xp-shell .xp-panel__view {
  position: relative;
  z-index: 1;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-state] .xp-panel__head {
  flex: none;
  padding-bottom: 18px;
}

.xp-shell .xp-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 26px;
}

.xp-shell .xp-panel__kicker {
  position: relative;
  margin: 0;
  color: var(--steel);
  font: 400 var(--xg-tech-s) / 1.3 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.xp-shell .xp-panel__title {
  position: relative;
  margin: 16px 0 0;
  color: var(--bone);
  font: 500 var(--xg-title) / var(--xg-title-lh) var(--font-sans);
  letter-spacing: -0.005em;
}

.xp-shell .xp-panel__title:focus {
  outline: none;
}

.xp-shell .xp-panel__status {
  position: relative;
  margin: 10px 0 0;
  color: var(--muted);
  font: 400 var(--xg-tech-xs) / 1.45 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.xp-shell .xp-panel__rule {
  display: none;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-state] .xp-panel__rule {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  background: var(--hairline-soft);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-premium) 0.35s;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-drawn] .xp-panel__rule {
  transform: none;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-instant] .xp-panel__rule {
  transition: none;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-state] .xp-panel__view {
  flex: 1 1 auto;
  min-height: 0;
}

/* Desplazamiento propio (§12.2): scroll nativo 1:1 (rueda, flechas, dedo) sin barra del sistema; pista de
   1 px al 7 % con cursor al 34 % y fundidos de 24 px arriba y abajo. */
html:not(.xp-doc) .xp-shell .xp-section[data-xp-state] .xp-panel__scroll {
  position: absolute;
  inset: 0;
  margin: 0 -10px 0 -6px;
  padding: 0 10px 0 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
}

.xp-shell .xp-panel__scroll::-webkit-scrollbar {
  display: none;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-overflow] .xp-panel__scroll {
  --xg-fade-top: 0px;
  --xg-fade-bottom: 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--xg-fade-top), #000 calc(100% - var(--xg-fade-bottom)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--xg-fade-top), #000 calc(100% - var(--xg-fade-bottom)), transparent 100%);
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-scrolled] .xp-panel__scroll {
  --xg-fade-top: 24px;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-at-end] .xp-panel__scroll {
  --xg-fade-bottom: 0px;
}

.xp-shell .xp-panel__body {
  padding: 22px 0 6px;
}

.xp-shell .xp-panel__track {
  display: none;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-overflow] .xp-panel__track {
  position: absolute;
  top: 22px;
  right: calc(var(--xg-col-pad) / -2);
  bottom: 6px;
  display: block;
  width: 1px;
  background: var(--hairline-soft);
  opacity: 0;
}

/* La pista entra con las secciones (t = 0,5 s). */
html:not(.xp-doc) .xp-shell .xp-section[data-xp-drawn][data-xp-overflow] .xp-panel__track {
  opacity: 1;
  transition: opacity 0.3s var(--ease-premium) 0.5s;
}

html:not(.xp-doc) .xp-shell .xp-section[data-xp-instant][data-xp-overflow] .xp-panel__track {
  transition: none;
}

.xp-shell .xp-panel__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  background: var(--hairline-strong);
  will-change: transform;
}

/* Secciones numeradas */
:where(.xp-shell .xp-section) :where(h2, h3, h4, p, ul, ol, dl, dd, figure) {
  margin: 0;
}

:where(.xp-shell .xp-section) :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.xp-shell .xp-sec {
  position: relative;
}

.xp-shell .xp-sec + .xp-sec {
  margin-top: 28px;
}

.xp-shell .xp-sec__kicker {
  margin: 0 0 10px;
  color: var(--steel);
  font: 400 var(--xg-tech-xs) / 1.4 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.xp-shell .xp-sec__num {
  margin-right: 0.5em;
  color: var(--bone);
}

.xp-shell .xp-sec__body > * + * {
  margin-top: 10px;
}

.xp-shell .xp-sec--next {
  padding-top: 22px;
  border-top: 1px solid var(--hairline-soft);
}

.xp-shell .xp-section .xp-strong,
.xp-shell .xp-section .xp-item__title {
  color: var(--bone);
  font-weight: 500;
}

.xp-shell .xp-item__title {
  font-size: var(--xg-body);
  line-height: var(--xg-body-lh);
}

.xp-shell .xp-num {
  margin-right: 0.6em;
  color: var(--steel);
  font: 400 var(--xg-tech-xs) / 1 var(--font-tech);
  letter-spacing: 0.13em;
}

.xp-shell .xp-items > li + li {
  margin-top: 18px;
}

.xp-shell .xp-items > li:focus {
  outline: none;
}

/* Servicio enfocado por fragmento (/servicios#servicio-04): hairline a la izquierda. */
.xp-shell .xp-items > li:focus-visible,
.xp-shell .xp-items > li[data-xp-target] {
  box-shadow: -10px 0 0 -9px var(--hairline-strong);
}

.xp-shell .xp-items > li > * + * {
  margin-top: 4px;
}

.xp-shell .xp-tags {
  color: var(--steel);
}

.xp-shell .xp-tags li {
  display: inline;
}

/* Listas con raya */
.xp-shell .xp-list > li {
  position: relative;
  padding-left: 1.4em;
}

.xp-shell .xp-list > li + li {
  margin-top: 8px;
}

.xp-shell .xp-list > li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--steel);
}

.xp-shell .xp-pairs > div + div {
  margin-top: 10px;
}

.xp-shell .xp-pairs dt {
  color: var(--steel);
  font: 400 var(--xg-tech-xs) / 1.6 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.xp-shell .xp-pairs dd {
  margin: 2px 0 0;
}

/* Preguntas: <details> con signo dibujado (Inter y el atlas no comparten el «−»). */
.xp-shell .xp-faq__item + .xp-faq__item {
  border-top: 1px solid var(--hairline-soft);
}

.xp-shell .xp-faq__q {
  position: relative;
  display: block;
  padding: 10px 22px 10px 0;
  color: var(--bone);
  cursor: pointer;
  list-style: none;
}

.xp-shell .xp-faq__q::-webkit-details-marker {
  display: none;
}

.xp-shell .xp-faq__q::after {
  content: "";
  position: absolute;
  top: calc(10px + var(--xg-body-lh) / 2 - 4.5px);
  right: 2px;
  width: 9px;
  height: 9px;
  background:
    linear-gradient(var(--steel), var(--steel)) center / 9px 1px no-repeat,
    linear-gradient(var(--steel), var(--steel)) center / 1px 9px no-repeat;
}

.xp-shell .xp-faq__item[open] > .xp-faq__q::after {
  background: linear-gradient(var(--steel), var(--steel)) center / 9px 1px no-repeat;
}

.xp-shell .xp-faq__item > p {
  padding-bottom: 12px;
}

/* CERRAR: caja de 1 px, Michroma 10 px (§12.2). */
.xp-shell .xp-close {
  flex: none;
}

/* Velo (§12.1): proyectos con la losa viva a la izquierda; paneles con una capa uniforme al 60 % más; móvil
   en tinta al 90 %. Entra en 0,45 s (--ease-premium) y sale en 0,35 s. El HUD queda por encima. */
.xp-shell .xp-veil {
  position: fixed;
  z-index: 290;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(4, 5, 6, 0.6), rgba(4, 5, 6, 0.6)),
    linear-gradient(90deg, rgba(4, 5, 6, 0) 0%, rgba(4, 5, 6, 0.35) 45%, rgba(4, 5, 6, 0.86) 60%, rgba(4, 5, 6, 0.94) 100%);
  transition:
    opacity 0.35s var(--ease-in-out) 0.15s,
    visibility 0s linear 0.5s;
}

html[data-xp-route-kind="project"] .xp-shell .xp-veil {
  background: linear-gradient(90deg, rgba(4, 5, 6, 0) 0%, rgba(4, 5, 6, 0.35) 45%, rgba(4, 5, 6, 0.86) 60%, rgba(4, 5, 6, 0.94) 100%);
}

@media (max-width: 639.98px), (max-height: 639.98px) {
  .xp-shell .xp-veil,
  html[data-xp-route-kind="project"] .xp-shell .xp-veil {
    background: rgba(4, 5, 6, 0.9);
  }
}

html[data-xp-panel-state="opening"] .xp-shell .xp-veil,
html[data-xp-panel-state="open"] .xp-shell .xp-veil {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.45s var(--ease-premium),
    visibility 0s;
}

html[data-xp-panel-instant] .xp-shell .xp-veil {
  transition: none !important;
}

html[data-xp-backdrop="webgl"] .xp-shell .xp-veil {
  display: none;
}

/* Con un panel abierto se retira la regla lateral del HUD (ui/hud-dom.js): sus números (x 1381–1400 a 1440)
   caerían sobre el borde derecho de la columna (1392) y sus saltos no aplican con el scroll detenido. La barra
   y el menú siguen activos (§12.1). Vuelve al cerrar. */
html.motion-xp .xp-hud__ruler {
  transition:
    opacity 0.3s var(--ease-premium),
    visibility 0s;
}

html.motion-xp[data-xp-panel-state="opening"] .xp-hud__ruler,
html.motion-xp[data-xp-panel-state="open"] .xp-hud__ruler {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s var(--ease-premium),
    visibility 0s linear 0.2s;
}

html[data-xp-panel-instant] .xp-hud__ruler {
  transition: none !important;
}

/* Proyecto abierto en el detalle WebGL antiguo (projects 'webgl', desconectado): su CERRAR HTML queda
   encima, transparente, para el clic y el teclado. */
html:not(.xp-doc) .xp-shell .xp-section[data-xp-sr-open] .xp-close {
  position: fixed !important;
  z-index: 300;
  top: var(--xg-menu-cy);
  right: var(--xg-menu-right);
  border-color: transparent;
  color: transparent;
  pointer-events: auto;
}

/* --- Diálogos de video y de imagen ------------------------------------------------------------- */

.xp-shell .xp-dialog {
  width: min(92vw, 960px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--silver);
  font: 400 var(--xg-body) / var(--xg-body-lh) var(--font-sans);
  white-space: normal;
}

.xp-shell .xp-dialog::backdrop {
  background: rgba(4, 5, 6, 0.88);
}

.xp-shell .xp-dialog__frame {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--hairline);
  background: rgba(4, 5, 6, 0.94);
}

.xp-shell .xp-dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.xp-shell .xp-dialog__title {
  margin: 0;
  color: var(--steel);
  font: 400 var(--xg-tech-s) / 1.4 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.xp-shell .xp-dialog__media {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68vh;
  background: #000;
  object-fit: contain;
}

.xp-shell .xp-dialog__desc {
  margin: 0;
}

.xp-shell .xp-dialog__actions {
  margin: 0;
}

/* --- Consentimiento (§11.5): caja de 1 px al 12 % con tinta al 86 % ------------------------------- */

.xp-shell .xp-consent {
  position: fixed;
  z-index: 330;
  top: var(--xg-consent-top);
  right: var(--xg-consent-right);
  bottom: var(--xg-consent-bottom);
  left: var(--xg-consent-left);
  display: flex;
  flex-direction: column;
  gap: var(--xg-consent-gap);
  box-sizing: border-box;
  width: var(--xg-consent-w);
  height: var(--xg-consent-h);
  padding: var(--xg-consent-py) var(--xg-consent-px);
  border: 1px solid var(--hairline);
  background: rgba(4, 5, 6, 0.86);
  color: var(--muted);
  font: 400 12px / 16px var(--font-sans);
  white-space: normal;
  pointer-events: auto;
}

.xp-shell .xp-consent:focus {
  outline: none;
}

body.intro-active .xp-shell .xp-consent,
html.motion-xp body:not(.xp-ready) .xp-shell .xp-consent {
  visibility: hidden;
}

/* En la experiencia, la caja espera tras la cortina hasta que ui/panels.js la descubre. */
html.motion-xp .xp-shell .xp-consent:not([data-xp-rv]) {
  clip-path: inset(0 100% 0 0);
}

.xp-shell .xp-consent p {
  margin: 0;
}

.xp-shell .xp-consent__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xp-shell .xp-consent__link {
  display: inline-flex;
  align-items: center;
  color: var(--silver);
  text-decoration: none;
  transition: color 0.25s var(--ease-premium);
}

.xp-shell .xp-consent__link:hover {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.xp-shell .xp-consent__link .xp-arrow {
  width: 9px;
  height: 9px;
  margin-left: 4px;
}

.xp-shell .xp-consent__actions {
  display: flex;
  gap: 10px;
}

.xp-shell .xp-consent__button {
  position: relative;
  box-sizing: border-box;
  height: var(--xg-consent-btn);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  background: none;
  color: var(--silver);
  font: 400 calc(var(--xg-fs) - 0.5px) / 1 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.25s var(--ease-premium),
    color 0.25s var(--ease-premium);
}

.xp-shell .xp-consent__button:hover,
.xp-shell .xp-consent__button[aria-pressed="true"] {
  border-color: var(--hairline-strong);
  color: var(--bone);
}

@media (max-width: 639.98px), (max-height: 639.98px) {
  /* Zona táctil mayor sin salir de la caja (que lleva data-xp-block) hacia los lados del texto. */
  .xp-shell .xp-consent__button::before {
    content: "";
    position: absolute;
    inset: -4px -5px -8px;
  }
}

/* --- Documento negro (sin WebGL2 o con el runtime caído, §14.1) --------------------------------- */

/* Solo el documento desplaza: con overflow en body, el menú fijo (sticky) no tendría contra qué pegarse. */
html.xp-doc,
html.xp-doc body {
  height: auto;
  background: var(--ink);
}

html.xp-doc {
  overflow: auto;
}

html.xp-doc body {
  overflow: visible;
}

html.xp-doc .xp-shell .xp-webgl,
html.xp-doc .xp-shell .xp-twins,
html.xp-doc .xp-shell .xp-veil,
html.xp-doc .xp-shell .xp-opener,
html.xp-doc .xp-shell .xp-close,
html.xp-doc .xp-shell .xp-twins-row,
html.xp-doc .xp-shell .xp-scenes {
  display: none !important;
}

/* El menú, en flujo arriba a la derecha y fijo al desplazarse. */
html.xp-doc .xp-shell .xp-menu {
  position: sticky;
  z-index: 340;
  top: 0;
  right: auto;
  display: flex;
  justify-content: flex-end;
  padding: 6px var(--xg-menu-right) 6px var(--xg-m);
  transform: none;
  background: var(--ink);
  border-bottom: 1px solid var(--hairline-soft);
}

html.xp-doc .xp-shell .xp-doc-main,
html.xp-doc .xp-shell .xp-footer {
  box-sizing: content-box;
  width: min(calc(100vw - 40px), 600px);
  margin: 0 auto;
  color: var(--silver);
  font: 400 var(--xg-body) / var(--xg-body-lh) var(--font-sans);
}

html.xp-doc .xp-shell .xp-doc-main {
  padding: 72px 0 48px;
}

html.xp-doc .xp-shell .xp-doc-main:focus {
  outline: none;
}

html.xp-doc .xp-shell .xp-group,
html.xp-doc .xp-shell .xp-section {
  scroll-margin-top: 64px;
}

html.xp-doc .xp-shell .xp-group + *,
html.xp-doc .xp-shell .xp-section + *,
html.xp-doc .xp-shell .xp-group--plain > .xp-section + .xp-section {
  margin-top: 72px;
}

html.xp-doc .xp-shell .xp-group > * + * {
  margin-top: 14px;
}

html.xp-doc .xp-shell .xp-group--plain > * + * {
  margin-top: 0;
}

html.xp-doc .xp-shell h1 {
  margin: 0;
  color: var(--bone);
  font: 400 clamp(22px, 4vw, 34px) / 1.15 var(--font-tech);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html.xp-doc .xp-shell .xp-kicker {
  color: var(--steel);
  font: 400 var(--xg-tech-s) / 1.4 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

html.xp-doc .xp-shell .xp-group > h2:not(.xp-kicker) {
  color: var(--bone);
  font: 500 var(--xg-title) / var(--xg-title-lh) var(--font-sans);
}

:where(html.xp-doc .xp-shell .xp-group) > :where(h2, p) {
  margin: 0;
}

html.xp-doc .xp-shell .xp-panel {
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

html.xp-doc .xp-shell .xp-panel__head {
  padding-bottom: 6px;
}

html.xp-doc .xp-shell .xp-group a:not(.xp-link),
html.xp-doc .xp-shell .xp-footer a,
html.xp-doc .xp-shell .xp-footer .xp-link-button {
  color: var(--silver);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease-premium);
}

html.xp-doc .xp-shell .xp-group a:hover,
html.xp-doc .xp-shell .xp-footer a:hover {
  color: var(--bone);
}

html.xp-doc .xp-shell .xp-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

html.xp-doc .xp-shell .xp-project + .xp-project {
  margin-top: 56px;
}

html.xp-doc .xp-shell .xp-footer {
  padding: 48px 0 140px;
  border-top: 1px solid var(--hairline);
}

html.xp-doc .xp-shell .xp-footer > * + * {
  margin-top: 14px;
}

html.xp-doc .xp-shell .xp-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.xp-doc .xp-shell [data-xp-text="e1.copyright"] {
  color: var(--steel);
  font: 400 var(--xg-tech-s) / 1.6 var(--font-tech);
  letter-spacing: 0.13em;
}

/* En el documento la caja del consentimiento queda abajo a la derecha, sobre el contenido. */
html.xp-doc .xp-shell .xp-consent {
  top: auto;
  bottom: calc(var(--xg-m) + env(safe-area-inset-bottom, 0px));
}

/* Movimiento reducido (sistema o ?motion=reduce, que ui/panels.js marca con data-xp-reduced): velo y
   cierre de 0,2 s, sin cursor en la cortina. */
@media (prefers-reduced-motion: reduce) {
  .xp-shell .xp-veil,
  html[data-xp-panel-state] .xp-shell .xp-veil {
    transition-duration: 0.2s !important;
    transition-delay: 0s !important;
  }

  .xp-shell [data-xp-rv="run"]::after {
    display: none;
  }

  html:not(.xp-doc) .xp-shell .xp-sr :focus-visible {
    animation: none !important;
  }
}

html[data-xp-reduced] .xp-shell .xp-veil,
html[data-xp-reduced][data-xp-panel-state] .xp-shell .xp-veil,
html[data-xp-reduced]:not(.xp-doc) .xp-shell .xp-section[data-xp-state="closing"] .xp-panel,
html[data-xp-reduced]:not(.xp-doc) .xp-shell .xp-section[data-xp-state="closing"] :is(.xp-panel__head, .xp-panel__view) {
  transition-duration: 0.2s !important;
  transition-delay: 0s !important;
}

html[data-xp-reduced] .xp-shell [data-xp-rv="run"]::after {
  display: none;
}

html[data-xp-reduced]:not(.xp-doc) .xp-shell .xp-sr :focus-visible {
  animation: none !important;
}

/* --- Logotipo arriba a la izquierda (simétrico al menú; entra con él al terminar la intro) ------- */

.xp-shell .xp-logo {
  position: fixed;
  z-index: 340;
  top: var(--xg-menu-cy);
  left: calc(var(--xg-m) + 24px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--bone);
  text-decoration: none;
  transform: translateY(-50%);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
}

.xp-shell .xp-logo__mark {
  display: block;
  width: 40px;
  height: 40px;
}

.xp-shell .xp-logo__type {
  display: grid;
  gap: 6px;
}

.xp-shell .xp-logo__type strong {
  font-family: var(--font-tech);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
}

.xp-shell .xp-logo__type small {
  color: var(--steel);
  font-family: var(--font-tech);
  font-size: 7.5px;
  letter-spacing: 0.3em;
  line-height: 1;
}

.xp-shell .xp-logo:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 6px;
}

html.motion-xp:not([data-xp-menu-in]) .xp-shell .xp-logo {
  opacity: 0;
  transform: translate(-6px, -50%);
}

html[data-xp-sheet-open] .xp-shell .xp-logo {
  visibility: hidden;
}

/* Pantalla grande: un poco mayor, como el resto del marco. */
@media (min-width: 1600px) and (min-height: 800px) {
  .xp-shell .xp-logo {
    left: calc(var(--xg-m) + 30px);
  }

  .xp-shell .xp-logo__mark {
    width: 48px;
    height: 48px;
  }

  .xp-shell .xp-logo__type strong {
    font-size: 15px;
  }

  .xp-shell .xp-logo__type small {
    font-size: 8.5px;
  }
}

/* Móvil: símbolo y AXIOM (DIGITAL STUDIO no cabe junto al menú). */
@media (max-width: 639.98px), (max-height: 639.98px) {
  .xp-shell .xp-logo {
    left: calc(var(--xg-m) + 12px);
    gap: 8px;
  }

  .xp-shell .xp-logo__mark {
    width: 26px;
    height: 26px;
  }

  .xp-shell .xp-logo__type strong {
    font-size: 10.5px;
  }

  .xp-shell .xp-logo__type small {
    display: none;
  }
}

/* Documento (sin WebGL o movimiento reducido): arriba a la izquierda, sobre la barra del menú. */
html.xp-doc .xp-shell .xp-logo {
  position: absolute;
  top: 12px;
  left: var(--xg-m);
  z-index: 341;
  transform: none;
  opacity: 1;
}

/* Móvil vertical: solo el símbolo (el menú SERVICIOS · CONTACTO · MENÚ ocupa el resto del ancho). */
@media (max-width: 639.98px) and (orientation: portrait) {
  .xp-shell .xp-logo__type {
    display: none;
  }

  .xp-shell .xp-logo__mark {
    width: 28px;
    height: 28px;
  }
}

/* --- Archivo (docs/xp/PLAN-archivo.md) ----------------------------------------------------------- */

/* Puerta HTML del Archivo: gemela accesible de la puerta 3D del pasillo; solo en la Galería (escena 02). */
.xp-shell .xp-archive-door {
  position: fixed;
  z-index: 330;
  left: 50%;
  bottom: calc(var(--xg-m) + var(--xg-bar-h) + 22px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  background: rgba(4, 5, 6, 0.55);
  color: var(--bone);
  font: 400 var(--xg-tech-s) / 1 var(--font-tech);
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-premium), visibility 0s linear 0.45s, border-color 0.2s;
}

.xp-shell .xp-archive-door__count {
  color: var(--steel);
}

.xp-shell .xp-archive-door:hover {
  border-color: var(--hairline-strong);
}

.xp-shell .xp-archive-door:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 4px;
}

html.motion-xp[data-xp-menu-in][data-xp-route-kind="home"]:not([data-xp-archive]) .xp-shell .xp-hud[data-xp-scene="02"] ~ .xp-archive-door,
html.motion-xp[data-xp-route-kind="home"]:not([data-xp-archive]) .xp-shell .xp-archive-door:focus-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-premium), visibility 0s, border-color 0.2s;
}

/* Cromo del Archivo abierto: volver y título arriba a la izquierda, filtros abajo al centro. */
.xp-shell .xp-archive-hud {
  position: fixed;
  inset: 0;
  z-index: 335;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease-premium), visibility 0s linear 0.35s;
}

html.motion-xp[data-xp-archive="open"] .xp-shell .xp-archive-hud {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.6s var(--ease-premium) 0.5s, visibility 0s;
}

.xp-shell .xp-archive-hud > * {
  pointer-events: auto;
}

.xp-shell .xp-archive-hud__back {
  position: absolute;
  gap: 6px;
  top: calc(var(--xg-menu-cy) + 40px);
  left: calc(var(--xg-m) + 24px);
}

.xp-shell .xp-archive-hud__title {
  position: absolute;
  top: calc(var(--xg-menu-cy) + 84px);
  left: calc(var(--xg-m) + 24px);
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--bone);
  font: 400 var(--xg-title) / 1 var(--font-tech);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.xp-shell .xp-archive-hud__count {
  color: var(--steel);
  font-size: var(--xg-tech-s);
  letter-spacing: 0.13em;
}

.xp-shell .xp-archive-hud__filters {
  position: absolute;
  left: 50%;
  bottom: calc(var(--xg-m) + var(--xg-bar-h) + 22px);
  display: flex;
  gap: 8px;
  max-width: calc(100vw - 2 * var(--xg-m));
  transform: translateX(-50%);
}

.xp-shell .xp-archive-hud__filter {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--hairline-soft, rgba(255, 255, 255, 0.07));
  background: rgba(4, 5, 6, 0.55);
  color: var(--steel);
  font: 400 var(--xg-tech-xs) / 1 var(--font-tech);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.xp-shell .xp-archive-hud__filter:hover {
  color: var(--bone);
  border-color: var(--hairline);
}

.xp-shell .xp-archive-hud__filter[aria-pressed="true"] {
  color: var(--bone);
  border-color: var(--hairline-strong);
}

.xp-shell .xp-archive-hud__filter:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 3px;
}

/* Planta del Archivo: «Elige una sección» bajo el título; «Plano» solo desde el pasillo. */
.xp-shell .xp-archive-hud__hint {
  color: var(--bone);
  font-size: var(--xg-tech-s);
  letter-spacing: 0.13em;
  opacity: 0;
  transition: opacity 0.4s var(--ease-premium);
}

html[data-xp-archive-phase="plan"] .xp-shell .xp-archive-hud__hint {
  opacity: 1;
}

html[data-xp-archive-phase="plan"] .xp-shell .xp-archive-hud__plan,
html[data-xp-archive-phase="ascent"] .xp-shell .xp-archive-hud__plan {
  display: none;
}

/* Con el Archivo abierto no hay tarjeta ni pista de scroll de la Galería encima. */
html.motion-xp[data-xp-archive] .xp-shell .xp-hud .xp-hud__hint {
  opacity: 0;
}

@media (max-width: 639.98px), (max-height: 639.98px) {
  /* Móvil: arriba a la derecha, bajo el menú (abajo chocaba con la tarjeta de la losa); con el aviso de
     consentimiento visible, debajo de él. */
  .xp-shell .xp-archive-door {
    left: auto;
    right: var(--xg-m);
    top: calc(var(--xg-menu-cy) + 28px);
    bottom: auto;
    height: 28px;
    padding: 0 10px;
    font-size: var(--xg-tech-xs);
    transform: none;
  }

  .xp-shell:has(.xp-consent) .xp-archive-door {
    top: calc(var(--xg-m) + 44px + 62px + 12px);
  }

  /* En móvil el aviso de consentimiento vive arriba: volver y el título bajan sobre los filtros. */
  .xp-shell .xp-archive-hud__back {
    top: auto;
    bottom: calc(var(--xg-m) + var(--xg-bar-h) + 48px);
    left: var(--xg-m);
  }

  .xp-shell .xp-archive-hud__title {
    top: auto;
    right: var(--xg-m);
    bottom: calc(var(--xg-m) + var(--xg-bar-h) + 48px);
    left: auto;
    justify-items: end;
    font-size: 15px;
    gap: 5px;
  }

  .xp-shell .xp-archive-hud__filters {
    left: var(--xg-m);
    right: var(--xg-m);
    bottom: calc(var(--xg-m) + var(--xg-bar-h) + 10px);
    overflow-x: auto;
    transform: none;
    scrollbar-width: none;
  }
}

/* Documento (sin WebGL): el Archivo es una sección normal en rejilla, sin cromo. */
html.xp-doc .xp-shell .xp-archive-door,
html.xp-doc .xp-shell .xp-archive-hud {
  display: none;
}

html.xp-doc .xp-shell .xp-archive-list {
  margin-top: 48px;
}

html.xp-doc .xp-shell .xp-archive-list__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  margin: 12px 0 32px;
  padding: 0;
  list-style: none;
}

html.xp-doc .xp-shell .xp-archive-list__item {
  padding: 16px;
  border: 1px solid var(--hairline);
}

html.xp-doc .xp-shell .xp-archive-list__code {
  display: block;
  margin-bottom: 8px;
  color: var(--steel);
  font: 400 var(--xg-tech-xs) / 1 var(--font-tech);
  letter-spacing: 0.13em;
}

/* Prerenderizado (scripts/prerender.mjs): el HTML estático es para rastreadores y lectores sin JavaScript. Con la
   experiencia activa queda recortado (el loader cubre el primer pintado y React lo reemplaza al montar). */
.xp-shell[data-xp-prerender] > nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 24px;
  list-style: none;
}

.xp-shell[data-xp-prerender] > nav a {
  color: var(--steel);
  font: 400 10.5px / 1.4 var(--font-tech);
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}

html.motion-xp .xp-shell[data-xp-prerender] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Páginas de servicio prerenderizadas, sin JavaScript: texto legible y sin ancho infinito. */
html:not(.motion-xp) .xp-shell[data-xp-prerender] main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 32px 24px;
  color: var(--bone);
  font: 400 16px / 1.6 var(--font-sans);
}

html:not(.motion-xp) .xp-shell[data-xp-prerender] main h1,
html:not(.motion-xp) .xp-shell[data-xp-prerender] main h2 {
  font-family: var(--font-tech);
  font-weight: 400;
  letter-spacing: 0.05em;
}

html:not(.motion-xp) .xp-shell[data-xp-prerender] main a {
  color: var(--bone);
}