/* =========================================================
   QWA SPATIAL · CARCASA VISUAL · v2
   ---------------------------------------------------------
   PASO 16A

   Objetivo:
   - Crear la geometría real de Spatial.
   - Mantener Spatial completamente aislado.
   - No cargar todavía visor 3D.
   - No conectar AR.
   - No conectar métricas.
   - No conectar navegación.
   - No modificar Orbital ni Qwebar estable.
========================================================= */


/* =========================================================
   0) BASE
========================================================= */

*{
  box-sizing: border-box;
}

html,
body{
  margin: 0;
  width: 100%;
  min-width: 0;
  min-height: 100%;
}

html{
  --qwa-spatial-page-bg: #f3f1eb;
  background: var(--qwa-spatial-page-bg);
}

body.qwa-spatial-preview{
  --qwa-spatial-text: #171717;

  margin: 0;

  min-width: 0;
  min-height: 100dvh;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,.94),
      transparent 38%
    ),
    var(--qwa-spatial-page-bg);

  color: var(--qwa-spatial-text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* =========================================================
   1) ROOT
========================================================= */

.qwa-spatial-root{
  width: 100%;
  min-width: 0;

  min-height: 100dvh;
  height: 100dvh;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;

  overflow: hidden;

  padding:
    env(safe-area-inset-top, 0px)
    0
    env(safe-area-inset-bottom, 0px);
}

/* Color del proyecto, imagen decorativa y contenido Spatial. */
.qwa-spatial-root {
  background:
    var(--qwa-spatial-viewer-image, none)
      center / cover no-repeat,
    var(--qwa-spatial-page-bg, #f3f1eb);
}

/* =========================================================
   2) CABECERA
========================================================= */

.qwa-spatial-header{
  width: 100%;
  min-width: 0;

  min-height: 66px;

  display: grid;

  grid-template-columns:
    minmax(70px, 1fr)
    minmax(0, 2.4fr)
    minmax(70px, 1fr);

  align-items: center;

  gap: 8px;

  padding:
    8px
    clamp(12px, 3vw, 24px)
    6px;

  position: relative;

  z-index: 20;
}

.qwa-spatial-header__side{
  min-width: 0;

  display: flex;
  align-items: center;
}

.qwa-spatial-header__side--left{
  justify-content: flex-start;
}

.qwa-spatial-header__side--right{
  justify-content: flex-end;
}

.qwa-spatial-header__placeholder{
  min-height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 12px;

  border-radius: 999px;

  background: rgba(255,255,255,.72);

  border:
    1px solid
    rgba(20,20,20,.08);

  box-shadow:
    0 6px 18px
    rgba(30,30,30,.06);

  color: rgba(23,23,23,.55);

  font-size: 11px;
  font-weight: 800;

  user-select: none;
}


/* =========================================================
   3) PROYECTO / BOOTSTRAP
========================================================= */

.qwa-spatial-bootstrap{
  min-width: 0;

  display: grid;

  justify-items: center;
  align-content: center;

  gap: 4px;

  text-align: center;
}

.qwa-spatial-bootstrap strong{
  width: 100%;

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

  color: #181818;

  font-size:
    clamp(
      15px,
      4.4vw,
      20px
    );

  line-height: 1;

  font-weight: 900;

  letter-spacing: -.035em;
}

.qwa-spatial-bootstrap span{
  width: 100%;

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

  color: rgba(23,23,23,.48);

  font-size: 9.5px;

  line-height: 1;

  font-weight: 700;
}


/* =========================================================
   4) MAIN
========================================================= */

.qwa-spatial-main{
  width: 100%;
  min-width: 0;

  min-height: 0;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  gap: 10px;

  padding:
    4px
    clamp(10px, 3vw, 20px)
    8px;

  overflow: hidden;
}


/* =========================================================
   5) STAGE
========================================================= */

.qwa-spatial-stage{
  width: 100%;
  min-width: 0;

  min-height: 0;

  display: grid;
}

.qwa-spatial-stage__surface{
  position: relative;

  width: 100%;
  min-width: 0;

  min-height: 0;

  display: grid;

  place-items: center;

  overflow: hidden;

  border-radius:
    clamp(
      24px,
      6vw,
      34px
    );

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,.98),
      var(--qwa-spatial-stage-mid, rgba(245,244,239,.96)) 46%,
      var(--qwa-spatial-stage-edge, rgba(227,225,219,.96)) 100%
    );

  border:
    1px solid
    rgba(20,20,20,.075);

  box-shadow:
    0 20px 50px
    rgba(40,40,40,.09),
    inset 0 1px 0
    rgba(255,255,255,.75);
}



.qwa-spatial-stage__surface::before{
  content: "";

  position: absolute;

  left: 12%;
  right: 12%;

  bottom: 13%;

  height: 10%;

  border-radius: 50%;

  background:
    rgba(20,20,20,.06);

  filter: blur(18px);

  transform: scaleX(.72);

  pointer-events: none;
}

.qwa-spatial-stage__placeholder{
  position: relative;

  z-index: 2;

  display: grid;

  justify-items: center;

  gap: 7px;

  padding: 24px;

  text-align: center;

  color: rgba(23,23,23,.55);

  user-select: none;
}

.qwa-spatial-stage__placeholder strong{
  color: rgba(23,23,23,.78);

  font-size:
    clamp(
      19px,
      5vw,
      28px
    );

  line-height: 1.05;

  font-weight: 850;

  letter-spacing: -.035em;
}

.qwa-spatial-stage__placeholder > span:last-child{
  font-size: 12px;

  line-height: 1.35;

  font-weight: 650;

  opacity: .72;
}

.qwa-spatial-stage__eyebrow{
  display: inline-flex;

  padding: 6px 9px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.58);

  border:
    1px solid
    rgba(20,20,20,.07);

  font-size: 9px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: .12em;
}


/* =========================================================
   6) INFORMACIÓN
========================================================= */

.qwa-spatial-info{
  width: 100%;
  min-width: 0;

  position: relative;

  display: grid;

  gap: 8px;

  padding:
    12px
    15px
    11px;

  border-radius:
    24px;

  background:
    rgba(255,255,255,.88);

  border:
    1px solid
    rgba(20,20,20,.075);

  box-shadow:
    0 14px 34px
    rgba(30,30,30,.08);
}

.qwa-spatial-info__handle{
  width: 38px;
  height: 4px;

  margin:
    -4px
    auto
    1px;

  border-radius: 999px;

  background:
    rgba(23,23,23,.14);
}

.qwa-spatial-info__meta{
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 6px;

  color:
    rgba(23,23,23,.50);

  font-size: 10px;

  line-height: 1;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .055em;
}

.qwa-spatial-info__title-row{
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: start;

  gap: 10px;
}

.qwa-spatial-info__title-row h1{
  min-width: 0;

  margin: 0;

  color: #181818;

  font-size:
    clamp(
      20px,
      5.8vw,
      28px
    );

  line-height: 1;

  font-weight: 900;

  letter-spacing: -.045em;
}

.qwa-spatial-info__price{
  align-self: center;

  padding:
    7px
    10px;

  border-radius:
    999px;

  background:
    rgba(23,23,23,.055);

  color:
    rgba(23,23,23,.65);

  font-size: 11px;

  line-height: 1;

  font-weight: 850;
}

.qwa-spatial-info__description{
  margin: 0;

  color:
    rgba(23,23,23,.61);

  font-size: 12px;

  line-height: 1.35;

  font-weight: 550;
}


/* =========================================================
   7) POSICIÓN
========================================================= */

.qwa-spatial-position{
  width: 100%;
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: center;

  gap: 10px;

  padding-top:
    4px;
}

.qwa-spatial-position span{
  color:
    rgba(23,23,23,.52);

  font-size: 10px;

  line-height: 1;

  font-weight: 750;
}

.qwa-spatial-position span:first-child{
  text-align: left;
}

.qwa-spatial-position span:last-child{
  text-align: right;
}

.qwa-spatial-position strong{
  min-width: 64px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    6px
    9px;

  border-radius:
    999px;

  background:
    rgba(23,23,23,.055);

  color:
    rgba(23,23,23,.74);

  font-size: 10px;

  line-height: 1;

  font-weight: 900;
}


/* =========================================================
   8) FOOTER
========================================================= */

.qwa-spatial-footer{
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;

  padding:
    7px
    clamp(10px, 3vw, 20px)
    8px;
}

.qwa-spatial-footer__placeholder{
  min-height: 44px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    17px;

  background:
    rgba(255,255,255,.84);

  border:
    1px solid
    rgba(20,20,20,.075);

  box-shadow:
    0 8px 22px
    rgba(30,30,30,.065);

  color:
    rgba(23,23,23,.68);

  font-size: 11px;

  line-height: 1;

  font-weight: 850;

  user-select: none;
}


/* =========================================================
   9) MÓVILES MUY BAJOS
========================================================= */

@media
(max-height: 680px)
and
(max-width: 720px){

  .qwa-spatial-header{
    min-height: 58px;
    padding-top: 5px;
    padding-bottom: 4px;
  }

  .qwa-spatial-header__placeholder{
    min-height: 32px;
  }

  .qwa-spatial-main{
    gap: 7px;
  }

  .qwa-spatial-info{
    gap: 5px;

    padding:
      10px
      13px
      9px;
  }

  .qwa-spatial-info__description{
    display: none;
  }

  .qwa-spatial-footer{
    padding-top: 5px;
  }

  .qwa-spatial-footer__placeholder{
    min-height: 40px;
  }
}


/* =========================================================
   10) TABLET / DESKTOP
========================================================= */

@media
(min-width: 760px){

  body.qwa-spatial-preview{
    background:
      radial-gradient(
        circle at 50% -10%,
        rgba(255,255,255,1),
        transparent 38%
      ),
      var(--qwa-spatial-page-bg);
  }

  .qwa-spatial-root{
    grid-template-rows:
      auto
      minmax(0, 1fr);
  }

  .qwa-spatial-header{
    width:
      min(
        1180px,
        calc(100% - 36px)
      );

    margin:
      0 auto;

    grid-template-columns:
      120px
      minmax(0, 1fr)
      120px;

    padding-left: 0;
    padding-right: 0;
  }

  .qwa-spatial-main{
    width:
      min(
        1180px,
        calc(100% - 36px)
      );

    margin:
      0 auto;

    grid-template-columns:
      minmax(0, 1.75fr)
      minmax(300px, .75fr);

    grid-template-rows:
      minmax(0, 1fr);

    align-items:
      stretch;

    gap:
      clamp(
        14px,
        2vw,
        24px
      );

    padding:
      8px
      0
      18px;
  }

  .qwa-spatial-stage{
    grid-column: 1;
  }

  .qwa-spatial-stage__surface{
    border-radius: 36px;
  }

  .qwa-spatial-info{
    grid-column: 2;

    align-self: stretch;

    align-content: end;

    border-radius: 30px;

    padding:
      24px;

    gap:
      13px;
  }

  .qwa-spatial-info__handle{
    display: none;
  }

  .qwa-spatial-info__title-row{
    grid-template-columns:
      minmax(0, 1fr);
  }

  .qwa-spatial-info__price{
    justify-self: start;
  }

  .qwa-spatial-info__description{
    font-size: 14px;
  }

  .qwa-spatial-position{
    margin-top:
      10px;
  }

  .qwa-spatial-footer{
    position: fixed;

    z-index: 30;

    left: 50%;
    bottom:
      calc(
        env(
          safe-area-inset-bottom,
          0px
        ) +
        20px
      );

    transform:
      translateX(-50%);

    width:
      min(
        430px,
        calc(100% - 32px)
      );

    padding: 0;

    pointer-events: none;
  }

  .qwa-spatial-footer__placeholder{
    min-height: 48px;

    background:
      rgba(255,255,255,.94);

    pointer-events: none;
  }

}


/* =========================================================
   11) LANDSCAPE MÓVIL
========================================================= */

@media
(max-width: 759px)
and
(orientation: landscape){

  .qwa-spatial-root{
    grid-template-rows:
      auto
      minmax(0, 1fr);

    height: 100dvh;
  }

  .qwa-spatial-header{
    min-height: 52px;
  }

  .qwa-spatial-main{
    grid-template-columns:
      minmax(0, 1.55fr)
      minmax(230px, .8fr);

    grid-template-rows:
      minmax(0, 1fr);

    gap: 8px;
  }

  .qwa-spatial-stage{
    grid-column: 1;
  }

  .qwa-spatial-info{
    grid-column: 2;

    align-self: stretch;

    align-content: end;

    overflow: hidden;
  }

  .qwa-spatial-info__description{
    display: none;
  }

  .qwa-spatial-footer{
    display: none;
  }
}


/* =========================================================
   12) iOS · ALTURA ESTABLE
========================================================= */

@supports (-webkit-touch-callout: none){

  .qwa-spatial-root{
    min-height: 100svh;
    height: 100svh;
  }

}

/* =========================================================
   13) SPATIAL · STAGE 3D REAL · PASO 16D
   ---------------------------------------------------------
   Alcance:
   - Un único model-viewer.
   - GLB real.
   - Cámara interactiva.
   - Giro.
   - Zoom.
   - Responsive heredado del Stage.

   NO conecta:
   - AR
   - Foto
   - fullscreen
   - likes
   - métricas
   - navegación
========================================================= */


/* =========================================================
   CONTENEDOR
========================================================= */

.qwa-spatial-stage__surface{
  isolation:
    isolate;
}


/*
  La sombra decorativa de la carcasa queda
  físicamente detrás del modelo.
*/

.qwa-spatial-stage__surface::before{
  z-index:
    0;
}


/* =========================================================
   MODEL VIEWER
========================================================= */

.qwa-spatial-model-viewer{
  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  display:
    block;

  background:
    transparent;

  border:
    0;

  outline:
    0;

  --poster-color:
    transparent;

  /*
    El usuario gira el objeto dentro del visor.

    Spatial NO utiliza el arrastre horizontal
    sobre un modelo 3D para cambiar de elemento.
  */
  touch-action:
    pan-y;
}


.qwa-spatial-model-viewer[hidden]{
  display:
    none !important;
}


/* =========================================================
   PLACEHOLDER / CARGA
========================================================= */

.qwa-spatial-stage__placeholder{
  position:
    absolute;

  inset:
    0;

  z-index:
    3;

  width:
    100%;

  height:
    100%;

  display:
    grid;

  align-content:
    center;

  justify-items:
    center;

  pointer-events:
    none;

  transition:
    opacity .22s ease,
    visibility .22s ease;
}


/* =========================================================
   ESTADO CARGANDO
========================================================= */

.qwa-spatial-stage.is-model-loading
.qwa-spatial-stage__placeholder{
  opacity:
    1;

  visibility:
    visible;
}


/*
  Mientras carga el GLB dejamos el objeto
  disponible por debajo, pero la información
  de carga permanece visible.
*/

.qwa-spatial-stage.is-model-loading
.qwa-spatial-model-viewer{
  opacity:
    .01;
}


/* =========================================================
   MODELO PREPARADO
========================================================= */

.qwa-spatial-stage.is-model-ready
.qwa-spatial-stage__placeholder{
  opacity:
    0;

  visibility:
    hidden;
}


.qwa-spatial-stage.is-model-ready
.qwa-spatial-model-viewer{
  opacity:
    1;
}


/* =========================================================
   ERROR
========================================================= */

.qwa-spatial-stage.is-model-error
.qwa-spatial-stage__placeholder{
  opacity:
    1;

  visibility:
    visible;
}


.qwa-spatial-stage.is-model-error
.qwa-spatial-model-viewer{
  display:
    none;
}


/* =========================================================
   FOTO / EDITORIAL
   ---------------------------------------------------------
   Todavía no construimos la fotografía.
   El placeholder sigue siendo la representación segura.
========================================================= */

.qwa-spatial-stage[data-stage-mode="photo"]
.qwa-spatial-model-viewer,

.qwa-spatial-stage[data-stage-mode="editorial"]
.qwa-spatial-model-viewer{
  display:
    none;
}


/* =========================================================
   TRANSICIÓN DEL VISOR
========================================================= */

.qwa-spatial-model-viewer{
  transition:
    opacity .22s ease;
}

/* =========================================================
   14) SPATIAL · NAVEGACIÓN · PASO 16E
   ---------------------------------------------------------
   Navegación reconocible, táctil y elegante.
   Misma identidad en móvil y escritorio.
========================================================= */

.qwa-spatial-position
> span[role="button"]{
  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0
    10px;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      .66
    );

  border:
    1px solid
    rgba(
      23,
      23,
      23,
      .09
    );

  box-shadow:
    0
    5px
    14px
    rgba(
      30,
      30,
      30,
      .055
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .72
    );

  color:
    rgba(
      23,
      23,
      23,
      .76
    );

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    850;

  cursor:
    pointer;

  user-select:
    none;

  touch-action:
    manipulation;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    opacity .16s ease,
    transform .12s ease;
}


/* =========================================================
   POSICIÓN
========================================================= */

.qwa-spatial-position
> span[role="button"]:first-child{
  justify-self:
    start;
}


.qwa-spatial-position
> span[role="button"]:last-child{
  justify-self:
    end;
}


/* =========================================================
   ICONOS DE NAVEGACIÓN
========================================================= */

.qwa-spatial-position
> span[role="button"]:first-child::before,

.qwa-spatial-position
> span[role="button"]:last-child::after{
  width:
    23px;

  height:
    23px;

  flex:
    0
    0
    23px;

  display:
    inline-grid;

  place-items:
    center;

  border-radius:
    999px;

  background:
    rgba(
      23,
      23,
      23,
      .065
    );

  color:
    rgba(
      23,
      23,
      23,
      .78
    );

  font-size:
    14px;

  line-height:
    1;

  font-weight:
    900;

  transition:
    background .16s ease,
    color .16s ease,
    transform .14s ease;
}


.qwa-spatial-position
> span[role="button"]:first-child::before{
  content:
    "←";
}


.qwa-spatial-position
> span[role="button"]:last-child::after{
  content:
    "→";
}


/* =========================================================
   CONTADOR CENTRAL
========================================================= */

.qwa-spatial-position
> strong{
  min-width:
    68px;

  min-height:
    30px;

  padding:
    0
    10px;

  background:
    rgba(
      23,
      23,
      23,
      .055
    );

  border:
    1px solid
    rgba(
      23,
      23,
      23,
      .055
    );

  font-size:
    10.5px;

  font-weight:
    900;
}


/* =========================================================
   HOVER · ESCRITORIO
========================================================= */

@media
(hover:hover){

  .qwa-spatial-position
  > span[role="button"]:not(.is-disabled):hover{
    background:
      rgba(
        255,
        255,
        255,
        .94
      );

    border-color:
      rgba(
        23,
        23,
        23,
        .15
      );

    color:
      rgba(
        23,
        23,
        23,
        .94
      );

    transform:
      translateY(
        -1px
      );

    box-shadow:
      0
      8px
      20px
      rgba(
        30,
        30,
        30,
        .09
      );
  }


  .qwa-spatial-position
  > span[role="button"]:first-child:not(.is-disabled):hover::before,

  .qwa-spatial-position
  > span[role="button"]:last-child:not(.is-disabled):hover::after{
    background:
      #181818;

    color:
      #ffffff;
  }


  .qwa-spatial-position
  > span[role="button"]:first-child:not(.is-disabled):hover::before{
    transform:
      translateX(
        -2px
      );
  }


  .qwa-spatial-position
  > span[role="button"]:last-child:not(.is-disabled):hover::after{
    transform:
      translateX(
        2px
      );
  }

}


/* =========================================================
   PULSACIÓN · MÓVIL + ESCRITORIO
========================================================= */

.qwa-spatial-position
> span[role="button"]:not(.is-disabled):active{
  transform:
    scale(
      .965
    );

  background:
    rgba(
      23,
      23,
      23,
      .075
    );

  box-shadow:
    inset
    0
    1px
    3px
    rgba(
      23,
      23,
      23,
      .08
    );
}


.qwa-spatial-position
> span[role="button"]:first-child:not(.is-disabled):active::before{
  transform:
    translateX(
      -2px
    );
}


.qwa-spatial-position
> span[role="button"]:last-child:not(.is-disabled):active::after{
  transform:
    translateX(
      2px
    );
}


/* =========================================================
   TECLADO
========================================================= */

.qwa-spatial-position
> span[role="button"]:focus-visible{
  outline:
    2px solid
    rgba(
      23,
      23,
      23,
      .34
    );

  outline-offset:
    2px;
}


/* =========================================================
   DESHABILITADO
========================================================= */

.qwa-spatial-position
> span[role="button"].is-disabled,

.qwa-spatial-position
> span[role="button"][aria-disabled="true"]{
  opacity:
    .28;

  cursor:
    default;

  pointer-events:
    none;

  box-shadow:
    none;
}


.qwa-spatial-root[data-navigation-locked="1"]
.qwa-spatial-position strong{
  opacity:
    .58;
}


/* =========================================================
   ESCRITORIO
========================================================= */

@media
(min-width:760px){

  .qwa-spatial-position
  > span[role="button"]{
    min-height:
      42px;

    padding:
      0
      12px;

    gap:
      8px;

    font-size:
      11.5px;
  }


  .qwa-spatial-position
  > span[role="button"]:first-child::before,

  .qwa-spatial-position
  > span[role="button"]:last-child::after{
    width:
      25px;

    height:
      25px;

    flex-basis:
      25px;
  }


  .qwa-spatial-position
  > strong{
    min-width:
      72px;

    min-height:
      32px;

    font-size:
      11px;
  }

}

/* =========================================================
   15) SPATIAL · EXPLORAR · PASO 16F1
========================================================= */

#qwaSpatialExploreBtn{
  pointer-events: auto;

  cursor: pointer;

  touch-action:
    manipulation;

  transition:
    transform .14s ease,
    background .16s ease,
    box-shadow .16s ease;
}

#qwaSpatialExploreBtn:active{
  transform:
    scale(.98);
}

#qwaSpatialExploreBtn:focus-visible{
  outline:
    2px solid
    rgba(23,23,23,.34);

  outline-offset:
    2px;
}


/* =========================================================
   OVERLAY
========================================================= */

.qwa-spatial-explore[hidden]{
  display:
    none !important;
}

.qwa-spatial-explore{
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    grid;

  align-items:
    end;

  justify-items:
    center;
}


.qwa-spatial-explore__backdrop{
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  margin:
    0;

  padding:
    0;

  border:
    0;

  background:
    rgba(15,15,15,.28);

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);

  cursor:
    default;
}


/* =========================================================
   SHEET
========================================================= */

.qwa-spatial-explore__sheet{
  position:
    relative;

  z-index:
    1;

  width:
    min(
      820px,
      calc(100% - 24px)
    );

  height:
    calc(
      100dvh
      -
      28px
    );

  max-height:
    900px;

  display:
    grid;

  grid-template-rows:
    auto
    auto
    minmax(0, 1fr);

  overflow:
    hidden;

  border-radius:
    30px
    30px
    0
    0;

  background:
    rgba(252,252,250,.98);

  border:
    1px solid
    rgba(20,20,20,.09);

  border-bottom:
    0;

  box-shadow:
    0 -18px 60px
    rgba(20,20,20,.18);
}


.qwa-spatial-explore__handle{
  width:
    42px;

  height:
    4px;

  margin:
    9px
    auto
    2px;

  border-radius:
    999px;

  background:
    rgba(23,23,23,.16);
}


/* =========================================================
   CABECERA
========================================================= */

.qwa-spatial-explore__header{
  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items:
    center;

  gap:
    12px;

  padding:
    10px
    18px
    12px;

  border-bottom:
    1px solid
    rgba(20,20,20,.07);
}


.qwa-spatial-explore__header h2{
  margin:
    0;

  font-size:
    clamp(
      21px,
      4vw,
      28px
    );

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -.045em;
}


.qwa-spatial-explore__close{
  width:
    38px;

  height:
    38px;

  display:
    inline-grid;

  place-items:
    center;

  margin:
    0;

  padding:
    0 0 2px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(20,20,20,.08);

  background:
    rgba(23,23,23,.055);

  color:
    rgba(23,23,23,.72);

  font-size:
    25px;

  line-height:
    1;

  cursor:
    pointer;

  touch-action:
    manipulation;
}


/* =========================================================
   CONTENIDO
========================================================= */

.qwa-spatial-explore__body{
  min-height:
    0;

  display:
    grid;

  grid-template-rows:
    auto
    auto
    minmax(0,1fr);

  gap:
    14px;

  padding:
    14px
    18px
    calc(
      env(
        safe-area-inset-bottom,
        0px
      ) +
      16px
    );

  overflow:
    hidden;
}


.qwa-spatial-explore__block{
  min-width:
    0;

  display:
    grid;

  gap:
    8px;
}


.qwa-spatial-explore__block[hidden]{
  display:
    none !important;
}


.qwa-spatial-explore__block h3,
.qwa-spatial-explore__results-head h3{
  margin:
    0;

  color:
    rgba(23,23,23,.50);

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}


/* =========================================================
   SECCIONES / CATEGORÍAS
========================================================= */

.qwa-spatial-explore__chips{
  min-width:
    0;

  display:
    flex;

  gap:
    7px;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  padding:
    1px
    1px
    3px;

  scrollbar-width:
    none;

  -webkit-overflow-scrolling:
    touch;
}


.qwa-spatial-explore__chips::-webkit-scrollbar{
  display:
    none;
}


.qwa-spatial-explore__chip{
  flex:
    0 0 auto;

  min-height:
    36px;

  max-width:
    min(
      230px,
      68vw
    );

  padding:
    0
    13px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(20,20,20,.08);

  background:
    rgba(23,23,23,.045);

  color:
    rgba(23,23,23,.68);

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  cursor:
    pointer;

  touch-action:
    manipulation;
}


.qwa-spatial-explore__chip.is-active{
  background:
    #181818;

  border-color:
    #181818;

  color:
    #ffffff;
}


/* =========================================================
   RESULTADOS
========================================================= */

.qwa-spatial-explore__block--results{
  min-height:
    0;

  grid-template-rows:
    auto
    minmax(0,1fr);
}


.qwa-spatial-explore__results-head{
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.qwa-spatial-explore__count{
  min-width:
    30px;

  min-height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    8px;

  border-radius:
    999px;

  background:
    rgba(23,23,23,.055);

  color:
    rgba(23,23,23,.60);

  font-size:
    10px;

  font-weight:
    900;
}


.qwa-spatial-explore__results{
  min-height:
    0;

  display:
    grid;

  align-content:
    start;

  gap:
    8px;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  padding:
    1px
    2px
    4px;

  scrollbar-width:
    thin;

  -webkit-overflow-scrolling:
    touch;
}


.qwa-spatial-explore__item{
  width:
    100%;

  min-width:
    0;

  min-height:
    58px;

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items:
    center;

  gap:
    12px;

  padding:
    10px
    12px;

  text-align:
    left;

  border-radius:
    17px;

  border:
    1px solid
    rgba(20,20,20,.075);

  background:
    rgba(255,255,255,.88);

  color:
    #181818;

  box-shadow:
    0 6px 18px
    rgba(30,30,30,.045);

  cursor:
    pointer;

  touch-action:
    manipulation;
}


.qwa-spatial-explore__item.is-active{
  border-color:
    rgba(23,23,23,.30);

  box-shadow:
    0 0 0 2px
    rgba(23,23,23,.07),
    0 8px 22px
    rgba(30,30,30,.06);
}


.qwa-spatial-explore__item-copy{
  min-width:
    0;

  display:
    grid;

  gap:
    4px;
}


.qwa-spatial-explore__item-copy strong{
  min-width:
    0;

  overflow:
    hidden;

  display:
    -webkit-box;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;

  line-clamp:
    2;

  text-overflow:
    ellipsis;

  color:
    #181818;

  font-size:
    13px;

  line-height:
    1.08;

  font-weight:
    850;
}


.qwa-spatial-explore__item-meta{
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    rgba(23,23,23,.46);

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    .055em;
}


.qwa-spatial-explore__item-price{
  flex:
    0 0 auto;

  padding:
    7px
    9px;

  border-radius:
    999px;

  background:
    rgba(23,23,23,.055);

  color:
    rgba(23,23,23,.68);

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    850;
}


body.qwa-spatial-explore-open{
  overflow:
    hidden;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover:hover){

  #qwaSpatialExploreBtn:hover,
  .qwa-spatial-explore__chip:hover,
  .qwa-spatial-explore__item:hover,
  .qwa-spatial-explore__close:hover{
    filter:
      brightness(.98);
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-explore__sheet{
    width:
      100%;

    height:
      calc(
        100dvh
        -
        env(
          safe-area-inset-top,
          0px
        )
        -
        10px
      );

    max-height:
      calc(
        100dvh
        -
        env(
          safe-area-inset-top,
          0px
        )
        -
        10px
      );

    min-height:
      0;

    border-left:
      0;

    border-right:
      0;

    border-radius:
      28px
      28px
      0
      0;
  }


  .qwa-spatial-explore__header{
    padding-left:
      15px;

    padding-right:
      15px;
  }


  .qwa-spatial-explore__body{
    padding-left:
      12px;

    padding-right:
      12px;
  }

}


/* =========================================================
   MÓVIL HORIZONTAL
   ---------------------------------------------------------
   La carcasa anterior ocultaba el footer.
   Ahora Explorar debe seguir siendo accesible.
========================================================= */

@media
(max-width:759px)
and
(orientation:landscape){

  .qwa-spatial-main{
    padding-bottom:
      56px;
  }


  .qwa-spatial-footer{
    position:
      fixed;

    z-index:
      40;

    left:
      50%;

    bottom:
      calc(
        env(
          safe-area-inset-bottom,
          0px
        ) +
        7px
      );

    transform:
      translateX(-50%);

    width:
      min(
        360px,
        calc(100% - 24px)
      );

    display:
      grid;

    padding:
      0;
  }


  .qwa-spatial-footer__placeholder{
    min-height:
      38px;
  }


  .qwa-spatial-explore__sheet{
    width:
      min(
        760px,
        calc(100% - 20px)
      );

    max-height:
      calc(
        100dvh
        -
        env(
          safe-area-inset-top,
          0px
        )
        -
        8px
      );

    border-radius:
      24px
      24px
      0
      0;
  }

}


/* =========================================================
   iOS
========================================================= */

@supports (-webkit-touch-callout:none){

  @media
  (max-width:759px){

    .qwa-spatial-explore__sheet{
      max-height:
        calc(
          100svh
          -
          env(
            safe-area-inset-top,
            0px
          )
          -
          10px
        );
    }

  }

}

/* =========================================================
   16) SPATIAL · BÚSQUEDA · PASO 16F2
========================================================= */


/* =========================================================
   EL BODY DE EXPLORAR AHORA TIENE:
   buscador + secciones + categorías + resultados
========================================================= */

.qwa-spatial-explore__body{
  grid-template-rows:
    auto
    auto
    auto
    minmax(0,1fr);
}


/* =========================================================
   BUSCADOR
========================================================= */

.qwa-spatial-explore-search{
  min-width:
    0;

  display:
    grid;
}


.qwa-spatial-explore-search__box{
  width:
    100%;

  min-width:
    0;

  min-height:
    44px;

  display:
    grid;

  grid-template-columns:
    28px
    minmax(0,1fr)
    auto;

  align-items:
    center;

  gap:
    5px;

  padding:
    4px
    6px
    4px
    10px;

  border-radius:
    17px;

  background:
    rgba(23,23,23,.045);

  border:
    1px solid
    rgba(20,20,20,.075);

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}


.qwa-spatial-explore-search__box:focus-within{
  background:
    rgba(255,255,255,.98);

  border-color:
    rgba(23,23,23,.20);

  box-shadow:
    0 0 0 3px
    rgba(23,23,23,.055);
}


.qwa-spatial-explore-search__icon{
  display:
    grid;

  place-items:
    center;

  color:
    rgba(23,23,23,.42);

  font-size:
    20px;

  line-height:
    1;

  user-select:
    none;
}


.qwa-spatial-explore-search__input{
  width:
    100%;

  min-width:
    0;

  height:
    34px;

  margin:
    0;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    #181818;

  font:
    inherit;

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    650;

  appearance:
    none;

  -webkit-appearance:
    none;
}


.qwa-spatial-explore-search__input::-webkit-search-cancel-button{
  display:
    none;
}


.qwa-spatial-explore-search__input::placeholder{
  color:
    rgba(23,23,23,.40);

  opacity:
    1;
}


.qwa-spatial-explore-search__clear{
  width:
    32px;

  height:
    32px;

  display:
    inline-grid;

  place-items:
    center;

  margin:
    0;

  padding:
    0 0 2px;

  border:
    0;

  border-radius:
    999px;

  background:
    rgba(23,23,23,.07);

  color:
    rgba(23,23,23,.62);

  font-size:
    20px;

  line-height:
    1;

  cursor:
    pointer;

  touch-action:
    manipulation;
}


.qwa-spatial-explore-search__clear[hidden]{
  display:
    none !important;
}


/* =========================================================
   MODO BÚSQUEDA GLOBAL
========================================================= */

.qwa-spatial-explore.is-searching
.qwa-spatial-explore__body{
  grid-template-rows:
    auto
    minmax(0,1fr);
}


.qwa-spatial-explore.is-searching
.qwa-spatial-explore__block--results{
  min-height:
    0;
}


/* =========================================================
   RESULTADOS
========================================================= */

.qwa-spatial-search-result
.qwa-spatial-explore__item-meta{
  white-space:
    normal;

  line-height:
    1.2;
}


.qwa-spatial-explore-search__empty{
  min-height:
    92px;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  border-radius:
    18px;

  background:
    rgba(23,23,23,.035);

  border:
    1px dashed
    rgba(23,23,23,.11);

  color:
    rgba(23,23,23,.48);

  text-align:
    center;

  font-size:
    12px;

  line-height:
    1.4;

  font-weight:
    700;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover:hover){

  .qwa-spatial-explore-search__clear:hover{
    background:
      rgba(23,23,23,.11);

    color:
      rgba(23,23,23,.84);
  }

}


/* =========================================================
   TECLADO MÓVIL · ALTURA REAL VISIBLE
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-explore__sheet{
    max-height:
      calc(
        var(
          --qwa-spatial-visible-height,
          100dvh
        )
        -
        env(
          safe-area-inset-top,
          0px
        )
        -
        8px
      );
  }


  .qwa-spatial-explore-search__box{
    min-height:
      46px;
  }


  .qwa-spatial-explore-search__input{
    /*
      16px evita el zoom automático de Safari
      al tocar inputs pequeños.
    */
    font-size:
      16px;
  }

}

/* =========================================================
   SPATIAL · 16F3
   FILTROS ALIMENTARIOS PLEGABLES
========================================================= */

.qwa-spatial-food-filters__toggle{
  width: 100%;
  min-height: 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 0 14px;

  border: 1px solid
    rgba(20, 20, 20, .08);

  border-radius: 14px;

  background:
    rgba(245, 245, 243, .92);

  color:
    inherit;

  font:
    inherit;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;

  cursor:
    pointer;
}


.qwa-spatial-food-filters__toggle-icon{
  flex:
    0 0 auto;

  font-size:
    16px;

  line-height:
    1;

  transition:
    transform .18s ease;
}


.qwa-spatial-food-filters__content{
  padding-top:
    12px;
}


.qwa-spatial-food-filters__content[hidden]{
  display:
    none !important;
}

/* =========================================================
   QWA SPATIAL · PASO 16F4
   MOVIMIENTO + TACTILIDAD DE EXPLORAR
   ---------------------------------------------------------
   - Entrada / salida elegante.
   - Sheet arrastrable desde su handle.
   - Ratón + touch.
   - Chips horizontales táctiles y arrastrables.
   - Más profundidad visual.
========================================================= */


/* =========================================================
   1) OVERLAY · TRANSICIÓN
========================================================= */

.qwa-spatial-explore{
  --qwa-explore-drag-y:
    0px;

  --qwa-explore-drag-progress:
    0;
}


.qwa-spatial-explore__backdrop{
  opacity:
    0;

  transition:
    opacity
    .30s
    ease;
}


.qwa-spatial-explore.is-open
.qwa-spatial-explore__backdrop{
  opacity:
    calc(
      1 -
      (
        var(
          --qwa-explore-drag-progress,
          0
        )
        *
        .72
      )
    );
}


/* =========================================================
   2) SHEET · ENTRADA / SALIDA
========================================================= */

.qwa-spatial-explore__sheet{
  transform:
    translate3d(
      0,
      calc(
        100%
        +
        24px
      ),
      0
    );

  opacity:
    .985;

  will-change:
    transform,
    opacity;

  transition:
    transform
      .39s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      ),
    opacity
      .24s
      ease,
    box-shadow
      .28s
      ease;

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        253,
        .995
      )
      0%,
      rgba(
        248,
        247,
        244,
        .985
      )
      100%
    );

  box-shadow:
    0
    -26px
    80px
    rgba(
      20,
      20,
      20,
      .21
    ),
    0
    -2px
    10px
    rgba(
      20,
      20,
      20,
      .055
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .88
    );
}


.qwa-spatial-explore.is-open
.qwa-spatial-explore__sheet{
  transform:
    translate3d(
      0,
      var(
        --qwa-explore-drag-y,
        0px
      ),
      0
    );

  opacity:
    1;
}


.qwa-spatial-explore.is-dragging
.qwa-spatial-explore__sheet{
  transition:
    none !important;
}


/* =========================================================
   3) HANDLE REAL
   ---------------------------------------------------------
   Amplía la zona de agarre pero mantiene
   visualmente una barra pequeña.
========================================================= */

.qwa-spatial-explore__handle{
  position:
    relative;

  width:
    84px;

  height:
    25px;

  flex:
    0 0 auto;

  margin:
    0
    auto
    -5px;

  background:
    transparent;

  border-radius:
    999px;

  cursor:
    grab;

  touch-action:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;
}


.qwa-spatial-explore__handle::before{
  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    9px;

  width:
    44px;

  height:
    5px;

  transform:
    translateX(
      -50%
    );

  border-radius:
    999px;

  background:
    rgba(
      23,
      23,
      23,
      .18
    );

  box-shadow:
    inset
    0
    1px
    1px
    rgba(
      255,
      255,
      255,
      .72
    );

  transition:
    width
      .18s
      ease,
    background
      .18s
      ease;
}


.qwa-spatial-explore__handle:hover::before{
  width:
    52px;

  background:
    rgba(
      23,
      23,
      23,
      .28
    );
}


.qwa-spatial-explore.is-dragging
.qwa-spatial-explore__handle{
  cursor:
    grabbing;
}


.qwa-spatial-explore.is-dragging
.qwa-spatial-explore__handle::before{
  width:
    56px;

  background:
    rgba(
      23,
      23,
      23,
      .34
    );
}


/* =========================================================
   4) SECCIONES / CATEGORÍAS · PROFUNDIDAD
========================================================= */

.qwa-spatial-explore__body
>
.qwa-spatial-explore__block:not(
  .qwa-spatial-explore__block--results
){
  padding:
    10px
    10px
    11px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .065
    );

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      .62
    );

  box-shadow:
    0
    8px
    24px
    rgba(
      30,
      30,
      30,
      .038
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .82
    );
}


/* =========================================================
   5) FILAS HORIZONTALES
========================================================= */

.qwa-spatial-explore__chips{
  gap:
    8px;

  padding:
    3px
    8px
    7px
    2px;

  cursor:
    grab;

  touch-action:
    pan-x;

  user-select:
    none;

  -webkit-user-select:
    none;

  overscroll-behavior-x:
    contain;

  scroll-snap-type:
    x proximity;

  scroll-padding-inline:
    2px;
}


.qwa-spatial-explore__chips.is-dragging-x{
  cursor:
    grabbing;

  scroll-snap-type:
    none;
}


/* =========================================================
   6) CHIPS · RESPUESTA FÍSICA
========================================================= */

.qwa-spatial-explore__chip{
  scroll-snap-align:
    center;

  box-shadow:
    0
    4px
    12px
    rgba(
      30,
      30,
      30,
      .045
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .68
    );

  transition:
    transform
      .14s
      ease,
    background
      .18s
      ease,
    border-color
      .18s
      ease,
    color
      .18s
      ease,
    box-shadow
      .18s
      ease;
}


.qwa-spatial-explore__chip.is-active{
  box-shadow:
    0
    7px
    17px
    rgba(
      20,
      20,
      20,
      .17
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .11
    );
}


.qwa-spatial-explore__chip:active{
  transform:
    scale(
      .965
    );
}


/* =========================================================
   7) RESULTADOS · MENOS PLANOS
========================================================= */

.qwa-spatial-explore__item{
  box-shadow:
    0
    7px
    20px
    rgba(
      30,
      30,
      30,
      .055
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .88
    );

  transition:
    transform
      .15s
      ease,
    border-color
      .18s
      ease,
    box-shadow
      .18s
      ease,
    background
      .18s
      ease;
}


.qwa-spatial-explore__item:active{
  transform:
    scale(
      .992
    );
}


/* =========================================================
   8) FILTROS ALIMENTARIOS
========================================================= */

.qwa-spatial-food-filters__toggle{
  box-shadow:
    0
    5px
    15px
    rgba(
      30,
      30,
      30,
      .045
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .82
    );

  transition:
    transform
      .14s
      ease,
    background
      .18s
      ease,
    box-shadow
      .18s
      ease;
}


.qwa-spatial-food-filters__toggle:active{
  transform:
    scale(
      .992
    );
}


/* =========================================================
   9) HOVER · SOLO DISPOSITIVOS CON RATÓN
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-explore__chip:hover{
    transform:
      translateY(
        -1px
      );

    background:
      rgba(
        23,
        23,
        23,
        .07
      );

    box-shadow:
      0
      7px
      16px
      rgba(
        30,
        30,
        30,
        .075
      );
  }


  .qwa-spatial-explore__chip.is-active:hover{
    background:
      #181818;
  }


  .qwa-spatial-explore__item:hover{
    transform:
      translateY(
        -1px
      );

    border-color:
      rgba(
        20,
        20,
        20,
        .13
      );

    box-shadow:
      0
      10px
      26px
      rgba(
        30,
        30,
        30,
        .075
      );
  }


  .qwa-spatial-food-filters__toggle:hover{
    background:
      rgba(
        255,
        255,
        255,
        .96
      );

    box-shadow:
      0
      7px
      18px
      rgba(
        30,
        30,
        30,
        .065
      );
  }

}


/* =========================================================
   10) REDUCIR MOVIMIENTO
========================================================= */

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

  .qwa-spatial-explore__sheet,
  .qwa-spatial-explore__backdrop,
  .qwa-spatial-explore__chip,
  .qwa-spatial-explore__item,
  .qwa-spatial-food-filters__toggle{
    transition-duration:
      .01ms !important;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16F5
   FICHA INFERIOR PLEGABLE
========================================================= */

@media
(max-width: 759px)
and
(orientation: portrait){

  /* =======================================================
     PANEL
  ======================================================= */

  .qwa-spatial-info{
    overflow:
      hidden;

    will-change:
      height,
      transform;

    transition:
      height
        .34s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      padding
        .30s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      gap
        .30s
        ease,
      box-shadow
        .28s
        ease,
      transform
        .20s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        );
  }


  /* =======================================================
     BARRA · ZONA REAL DE AGARRE
     -------------------------------------------------------
     Visualmente sigue siendo pequeña,
     pero su área táctil es mucho mayor.
  ======================================================= */

  .qwa-spatial-info__handle{
    position:
      relative;

    width:
      88px;

    height:
      22px;

    min-height:
      22px;

    margin:
      -7px
      auto
      -2px;

    flex:
      0 0 auto;

    background:
      transparent;

    border-radius:
      999px;

    cursor:
      grab;

    touch-action:
      none;

    user-select:
      none;

    -webkit-user-select:
      none;

    outline:
      none;
  }


  .qwa-spatial-info__handle::before{
    content:
      "";

    position:
      absolute;

    left:
      50%;

    top:
      9px;

    width:
      42px;

    height:
      4px;

    transform:
      translateX(
        -50%
      );

    border-radius:
      999px;

    background:
      rgba(
        23,
        23,
        23,
        .16
      );

    transition:
      width
        .18s
        ease,
      background
        .18s
        ease;
  }


  .qwa-spatial-info__handle:hover::before{
    width:
      50px;

    background:
      rgba(
        23,
        23,
        23,
        .25
      );
  }


  /* =======================================================
     CONTENIDO
  ======================================================= */

  .qwa-spatial-info
  >
  :not(
    .qwa-spatial-info__handle
  ){
    transition:
      opacity
        .18s
        ease,
      transform
        .22s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      visibility
        0s
        linear
        0s;
  }


  /* =======================================================
     ESTADO PLEGADO
  ======================================================= */

  .qwa-spatial-info.is-collapsed{
    min-height:
      34px;

    padding:
      7px
      15px
      5px;

    gap:
      0;

    align-content:
      start;

    box-shadow:
      0
      8px
      22px
      rgba(
        30,
        30,
        30,
        .065
      );
  }


  .qwa-spatial-info.is-collapsed
  >
  :not(
    .qwa-spatial-info__handle
  ){
    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translateY(
        8px
      );
  }


  .qwa-spatial-info.is-collapsed
  .qwa-spatial-info__handle{
    margin:
      -2px
      auto
      0;
  }


  .qwa-spatial-info.is-collapsed
  .qwa-spatial-info__handle::before{
    width:
      48px;

    background:
      rgba(
        23,
        23,
        23,
        .22
      );
  }


  /* =======================================================
     ARRASTRE
  ======================================================= */

  .qwa-spatial-info.is-dragging-info{
    transition:
      none !important;

    transform:
      translate3d(
        0,
        var(
          --qwa-info-drag-y,
          0px
        ),
        0
      );

    cursor:
      grabbing;
  }


  .qwa-spatial-info.is-dragging-info
  .qwa-spatial-info__handle{
    cursor:
      grabbing;
  }


  .qwa-spatial-info.is-dragging-info
  .qwa-spatial-info__handle::before{
    width:
      54px;

    background:
      rgba(
        23,
        23,
        23,
        .34
      );
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .qwa-spatial-info,
  .qwa-spatial-info
  >
  :not(
    .qwa-spatial-info__handle
  ){
    transition-duration:
      .01ms !important;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16G1
   MI SELECCIÓN
========================================================= */


/* =========================================================
   BOTÓN INFERIOR
========================================================= */

.qwa-spatial-selection-trigger{
  position:
    relative;

  cursor:
    pointer;

  user-select:
    none;

  -webkit-user-select:
    none;

  touch-action:
    manipulation;
}


.qwa-spatial-selection-trigger__label{
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.qwa-spatial-selection-trigger__badge{
  position:
    absolute;

  top:
    5px;

  right:
    7px;

  min-width:
    20px;

  height:
    20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    6px;

  border-radius:
    999px;

  background:
    #181818;

  color:
    #ffffff;

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    900;

  box-shadow:
    0
    5px
    14px
    rgba(
      20,
      20,
      20,
      .18
    );
}


.qwa-spatial-selection-trigger__badge[hidden]{
  display:
    none !important;
}


/* =========================================================
   OVERLAY
========================================================= */

.qwa-spatial-selection{
  position:
    fixed;

  inset:
    0;

  z-index:
    160;

  display:
    grid;

  place-items:
    end
    center;

  overflow:
    hidden;

  pointer-events:
    none;
}


.qwa-spatial-selection[hidden]{
  display:
    none !important;
}


.qwa-spatial-selection__backdrop{
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      18,
      18,
      18,
      .22
    );

  backdrop-filter:
    blur(
      7px
    )
    saturate(
      112%
    );

  -webkit-backdrop-filter:
    blur(
      7px
    )
    saturate(
      112%
    );

  opacity:
    0;

  transition:
    opacity
    .28s
    ease;

  pointer-events:
    auto;
}


.qwa-spatial-selection.is-open
.qwa-spatial-selection__backdrop{
  opacity:
    1;
}


/* =========================================================
   PANEL
========================================================= */

.qwa-spatial-selection__sheet{
  position:
    relative;

  z-index:
    2;

  width:
    min(
      680px,
      calc(
        100% -
        28px
      )
    );

  max-height:
    min(
      78dvh,
      720px
    );

  display:
    grid;

  grid-template-rows:
    auto
    auto
    minmax(
      0,
      1fr
    )
    auto;

  margin:
    0
    auto
    max(
      12px,
      env(
        safe-area-inset-bottom,
        0px
      )
    );

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .08
    );

  border-radius:
    28px;

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        253,
        .995
      ),
      rgba(
        246,
        245,
        241,
        .995
      )
    );

  box-shadow:
    0
    30px
    90px
    rgba(
      20,
      20,
      20,
      .25
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .90
    );

  transform:
    translate3d(
      0,
      calc(
        100% +
        30px
      ),
      0
    );

  opacity:
    .985;

  transition:
    transform
      .36s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      ),
    opacity
      .24s
      ease;

  pointer-events:
    auto;

  will-change:
    transform;
}


.qwa-spatial-selection.is-open
.qwa-spatial-selection__sheet{
  transform:
    translate3d(
      0,
      0,
      0
    );

  opacity:
    1;
}


/* =========================================================
   CABECERA
========================================================= */

.qwa-spatial-selection__header{
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    17px
    18px
    14px;

  border-bottom:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );
}


.qwa-spatial-selection__heading{
  min-width:
    0;

  display:
    grid;

  gap:
    4px;
}


.qwa-spatial-selection__title{
  margin:
    0;

  color:
    #181818;

  font-size:
    clamp(
      20px,
      4vw,
      25px
    );

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -.045em;
}


.qwa-spatial-selection__subtitle{
  margin:
    0;

  color:
    rgba(
      23,
      23,
      23,
      .48
    );

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    700;
}


.qwa-spatial-selection__header-actions{
  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.qwa-spatial-selection__clear,
.qwa-spatial-selection__close{
  appearance:
    none;

  -webkit-appearance:
    none;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .09
    );

  background:
    rgba(
      255,
      255,
      255,
      .82
    );

  color:
    #181818;

  cursor:
    pointer;

  touch-action:
    manipulation;

  box-shadow:
    0
    5px
    14px
    rgba(
      30,
      30,
      30,
      .06
    );

  transition:
    transform
      .14s
      ease,
    background
      .18s
      ease,
    box-shadow
      .18s
      ease;
}


.qwa-spatial-selection__clear{
  min-height:
    34px;

  padding:
    0
    11px;

  border-radius:
    999px;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    850;
}


.qwa-spatial-selection__clear:disabled{
  opacity:
    .38;

  cursor:
    default;
}


.qwa-spatial-selection__close{
  width:
    36px;

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border-radius:
    999px;

  font-size:
    22px;

  line-height:
    1;

  font-weight:
    500;
}


/* =========================================================
   RESUMEN
========================================================= */

.qwa-spatial-selection__summary{
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  padding:
    10px
    18px
    5px;
}


.qwa-spatial-selection__summary-count{
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    27px;

  padding:
    0
    10px;

  border-radius:
    999px;

  background:
    rgba(
      23,
      23,
      23,
      .055
    );

  color:
    rgba(
      23,
      23,
      23,
      .62
    );

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    850;
}


/* =========================================================
   LISTA
========================================================= */

.qwa-spatial-selection__items{
  min-width:
    0;

  min-height:
    0;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  display:
    grid;

  align-content:
    start;

  gap:
    7px;

  padding:
    8px
    15px
    14px;

  scrollbar-width:
    thin;
}


.qwa-spatial-selection__category{
  width:
    fit-content;

  max-width:
    100%;

  margin:
    6px
    0
    1px;

  padding:
    6px
    9px;

  border-radius:
    999px;

  background:
    rgba(
      23,
      23,
      23,
      .055
    );

  color:
    rgba(
      23,
      23,
      23,
      .58
    );

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .065em;

  text-transform:
    uppercase;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   ELEMENTO
========================================================= */

.qwa-spatial-selection__item{
  min-width:
    0;

  min-height:
    64px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    10px;

  padding:
    9px
    10px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .065
    );

  border-radius:
    17px;

  background:
    rgba(
      255,
      255,
      255,
      .80
    );

  box-shadow:
    0
    8px
    22px
    rgba(
      30,
      30,
      30,
      .055
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .90
    );
}


.qwa-spatial-selection__item-main{
  min-width:
    0;

  display:
    grid;

  justify-items:
    start;

  gap:
    5px;
}


.qwa-spatial-selection__item-name{
  width:
    100%;

  min-width:
    0;

  color:
    #181818;

  font-size:
    12px;

  line-height:
    1.18;

  font-weight:
    850;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.qwa-spatial-selection__item-price{
  color:
    rgba(
      23,
      23,
      23,
      .57
    );

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    800;
}


/* =========================================================
   CANTIDAD
========================================================= */

.qwa-spatial-selection__controls{
  flex:
    0
    0
    auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    5px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );

  border-radius:
    999px;

  background:
    rgba(
      246,
      246,
      243,
      .94
    );
}


.qwa-spatial-selection__qty-btn{
  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    29px;

  height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .08
    );

  border-radius:
    999px;

  background:
    #ffffff;

  color:
    #181818;

  font-size:
    17px;

  line-height:
    1;

  font-weight:
    700;

  cursor:
    pointer;

  touch-action:
    manipulation;

  box-shadow:
    0
    3px
    9px
    rgba(
      20,
      20,
      20,
      .07
    );

  transition:
    transform
      .12s
      ease,
    box-shadow
      .16s
      ease;
}


.qwa-spatial-selection__qty-btn:active{
  transform:
    scale(
      .92
    );
}


.qwa-spatial-selection__qty{
  min-width:
    26px;

  height:
    26px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    5px;

  border-radius:
    999px;

  background:
    rgba(
      23,
      23,
      23,
      .07
    );

  color:
    rgba(
      23,
      23,
      23,
      .78
    );

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    900;
}


/* =========================================================
   VACÍO
========================================================= */

.qwa-spatial-selection__empty{
  min-height:
    190px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    10px;

  padding:
    28px;

  text-align:
    center;
}


.qwa-spatial-selection__empty[hidden]{
  display:
    none !important;
}


.qwa-spatial-selection__empty-icon{
  width:
    46px;

  height:
    46px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    16px;

  background:
    rgba(
      23,
      23,
      23,
      .055
    );

  color:
    rgba(
      23,
      23,
      23,
      .48
    );

  font-size:
    23px;

  line-height:
    1;

  font-weight:
    500;
}


.qwa-spatial-selection__empty p{
  max-width:
    280px;

  margin:
    0;

  color:
    rgba(
      23,
      23,
      23,
      .52
    );

  font-size:
    12px;

  line-height:
    1.4;

  font-weight:
    650;
}


/* =========================================================
   TOTAL
========================================================= */

.qwa-spatial-selection__footer{
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    14px
    18px
    calc(
      14px +
      env(
        safe-area-inset-bottom,
        0px
      )
    );

  border-top:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );

  background:
    rgba(
      255,
      255,
      255,
      .72
    );

  color:
    rgba(
      23,
      23,
      23,
      .62
    );

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    800;
}


.qwa-spatial-selection__footer strong{
  color:
    #181818;

  font-size:
    15px;

  line-height:
    1;

  font-weight:
    950;
}


/* =========================================================
   HOVER ESCRITORIO
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-selection__clear:not(
    :disabled
  ):hover,
  .qwa-spatial-selection__close:hover,
  .qwa-spatial-selection__qty-btn:hover{
    background:
      #ffffff;

    box-shadow:
      0
      7px
      18px
      rgba(
        30,
        30,
        30,
        .09
      );
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-selection__sheet{
    width:
      100%;

    max-height:
      calc(
        100dvh
        -
        env(
          safe-area-inset-top,
          0px
        )
        -
        10px
      );

    margin:
      0;

    border-left:
      0;

    border-right:
      0;

    border-bottom:
      0;

    border-radius:
      28px
      28px
      0
      0;
  }


  .qwa-spatial-selection__header{
    padding-left:
      14px;

    padding-right:
      14px;
  }


  .qwa-spatial-selection__items{
    padding-left:
      12px;

    padding-right:
      12px;
  }


  .qwa-spatial-selection__footer{
    padding-left:
      15px;

    padding-right:
      15px;
  }

}


/* =========================================================
   iOS
========================================================= */

@supports
(-webkit-touch-callout:none){

  @media
  (max-width:759px){

    .qwa-spatial-selection__sheet{
      max-height:
        calc(
          100svh
          -
          env(
            safe-area-inset-top,
            0px
          )
          -
          10px
        );
    }

  }

}


/* =========================================================
   BODY BLOQUEADO
========================================================= */

body.qwa-spatial-selection-open{
  overflow:
    hidden;
}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .qwa-spatial-selection__sheet,
  .qwa-spatial-selection__backdrop{
    transition-duration:
      .01ms !important;
  }

}

/* =========================================================
   QWA SPATIAL · 16G1
   FIX MI SELECCIÓN · ESCRITORIO
========================================================= */

#qwaSpatialSelectionBtn{
  pointer-events:
    auto;

  cursor:
    pointer;

  touch-action:
    manipulation;
}


#qwaSpatialSelectionBtn:active{
  transform:
    scale(.98);
}


#qwaSpatialSelectionBtn:focus-visible{
  outline:
    2px solid
    rgba(23,23,23,.34);

  outline-offset:
    2px;
}

/* =========================================================
   QWA SPATIAL · PASO 16G2
   CONTROL − / CANTIDAD / +
========================================================= */

.qwa-spatial-info-selection{
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    43px;

  padding:
    5px
    6px
    5px
    11px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .065
    );

  border-radius:
    16px;

  background:
    rgba(
      248,
      248,
      245,
      .82
    );

  box-shadow:
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .82
    );

  transition:
    background
      .18s
      ease,
    border-color
      .18s
      ease,
    box-shadow
      .18s
      ease;
}


.qwa-spatial-info-selection[hidden]{
  display:
    none !important;
}


/* =========================================================
   ETIQUETA
========================================================= */

.qwa-spatial-info-selection__label{
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    rgba(
      23,
      23,
      23,
      .58
    );

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    850;

  letter-spacing:
    .015em;
}


/* =========================================================
   CONTROL
========================================================= */

.qwa-spatial-info-selection__quantity{
  flex:
    0
    0
    auto;

  display:
    inline-grid;

  grid-template-columns:
    32px
    minmax(
      30px,
      auto
    )
    32px;

  align-items:
    center;

  gap:
    4px;

  padding:
    4px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      .92
    );

  box-shadow:
    0
    4px
    12px
    rgba(
      30,
      30,
      30,
      .055
    );
}


/* =========================================================
   BOTONES
========================================================= */

.qwa-spatial-info-selection__button{
  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    32px;

  height:
    32px;

  min-width:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .075
    );

  border-radius:
    999px;

  background:
    rgba(
      247,
      247,
      244,
      .98
    );

  color:
    #181818;

  font-family:
    inherit;

  font-size:
    18px;

  line-height:
    1;

  font-weight:
    700;

  cursor:
    pointer;

  touch-action:
    manipulation;

  user-select:
    none;

  -webkit-user-select:
    none;

  box-shadow:
    0
    3px
    9px
    rgba(
      20,
      20,
      20,
      .055
    );

  transition:
    transform
      .12s
      ease,
    background
      .16s
      ease,
    opacity
      .16s
      ease,
    box-shadow
      .16s
      ease;
}


.qwa-spatial-info-selection__button:active:not(
  :disabled
){
  transform:
    scale(
      .91
    );
}


.qwa-spatial-info-selection__button:disabled{
  opacity:
    .28;

  cursor:
    default;

  box-shadow:
    none;
}


/* =========================================================
   CANTIDAD
========================================================= */

.qwa-spatial-info-selection__count{
  min-width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    5px;

  border-radius:
    999px;

  color:
    rgba(
      23,
      23,
      23,
      .62
    );

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   CUANDO YA ESTÁ EN MI SELECCIÓN
========================================================= */

.qwa-spatial-info-selection.has-selection{
  border-color:
    rgba(
      20,
      20,
      20,
      .105
    );

  background:
    rgba(
      255,
      255,
      255,
      .94
    );

  box-shadow:
    0
    5px
    15px
    rgba(
      30,
      30,
      30,
      .045
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .90
    );
}


.qwa-spatial-info-selection.has-selection
.qwa-spatial-info-selection__count{
  background:
    #181818;

  color:
    #ffffff;
}


/* =========================================================
   RATÓN
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-info-selection__button:hover:not(
    :disabled
  ){
    background:
      #ffffff;

    box-shadow:
      0
      6px
      15px
      rgba(
        30,
        30,
        30,
        .10
      );
  }

}


/* =========================================================
   MÓVIL MUY BAJO
========================================================= */

@media
(max-height:680px)
and
(max-width:759px){

  .qwa-spatial-info-selection{
    min-height:
      38px;

    padding-top:
      3px;

    padding-bottom:
      3px;
  }


  .qwa-spatial-info-selection__quantity{
    grid-template-columns:
      29px
      minmax(
        27px,
        auto
      )
      29px;
  }


  .qwa-spatial-info-selection__button{
    width:
      29px;

    height:
      29px;

    min-width:
      29px;
  }


  .qwa-spatial-info-selection__count{
    height:
      27px;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16G3
   MI SELECCIÓN · ELEMENTO NAVEGABLE
========================================================= */

.qwa-spatial-selection__item-main.is-spatial-navigation{
  position:
    relative;

  margin:
    -4px
    0
    -4px
    -3px;

  padding:
    7px
    9px;

  border-radius:
    12px;

  cursor:
    pointer;

  touch-action:
    manipulation;

  user-select:
    none;

  -webkit-user-select:
    none;

  transition:
    background
      .17s
      ease,
    transform
      .14s
      ease;
}


.qwa-spatial-selection__item-main.is-spatial-navigation:active{
  transform:
    scale(
      .985
    );

  background:
    rgba(
      23,
      23,
      23,
      .055
    );
}


.qwa-spatial-selection__item-main.is-spatial-navigation:focus-visible{
  outline:
    2px solid
    rgba(
      23,
      23,
      23,
      .28
    );

  outline-offset:
    1px;
}


/* =========================================================
   ELEMENTO YA NO DISPONIBLE
========================================================= */

.qwa-spatial-selection__item-main.is-unavailable{
  cursor:
    default;

  opacity:
    .48;

  pointer-events:
    none;
}


/* =========================================================
   RATÓN
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-selection__item-main.is-spatial-navigation:not(
    .is-unavailable
  ):hover{
    background:
      rgba(
        23,
        23,
        23,
        .045
      );
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16H1
   SELECTOR DE IDIOMA
========================================================= */

.qwa-spatial-lang{
  position:
    relative;

  z-index:
    80;
}


.qwa-spatial-lang__button{
  appearance:
    none;

  -webkit-appearance:
    none;

  min-height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    0
    10px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .08
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      .84
    );

  color:
    rgba(
      23,
      23,
      23,
      .76
    );

  box-shadow:
    0
    6px
    18px
    rgba(
      30,
      30,
      30,
      .065
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .88
    );

  font:
    inherit;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    900;

  cursor:
    pointer;

  touch-action:
    manipulation;

  user-select:
    none;

  transition:
    transform
      .14s
      ease,
    background
      .18s
      ease,
    box-shadow
      .18s
      ease;
}


.qwa-spatial-lang__button:active{
  transform:
    scale(
      .96
    );
}


.qwa-spatial-lang__flag{
  width:
    21px;

  height:
    15px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border-radius:
    4px;

  font-size:
    10px;
}


.qwa-spatial-lang__flag-img,
.qwa-spatial-lang__item-flag
.qwa-spatial-lang__flag-img{
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;
}


.qwa-spatial-lang__code{
  font-variant-numeric:
    tabular-nums;
}


.qwa-spatial-lang__arrow{
  font-size:
    10px;

  opacity:
    .58;
}


/* =========================================================
   MENÚ
========================================================= */

.qwa-spatial-lang__menu{
  position:
    absolute;

  top:
    calc(
      100% +
      8px
    );

  left:
    0;

  width:
    220px;

  max-height:
    min(
      360px,
      calc(
        100dvh -
        92px
      )
    );

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  padding:
    7px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .08
    );

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      253,
      .97
    );

  box-shadow:
    0
    18px
    48px
    rgba(
      25,
      25,
      25,
      .16
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .92
    );

  backdrop-filter:
    blur(
      18px
    )
    saturate(
      125%
    );

  -webkit-backdrop-filter:
    blur(
      18px
    )
    saturate(
      125%
    );
}


.qwa-spatial-lang__menu[hidden]{
  display:
    none !important;
}


/* =========================================================
   OPCIÓN
========================================================= */

.qwa-spatial-lang__item{
  appearance:
    none;

  width:
    100%;

  min-height:
    42px;

  display:
    grid;

  grid-template-columns:
    24px
    28px
    minmax(
      0,
      1fr
    )
    18px;

  align-items:
    center;

  gap:
    7px;

  padding:
    5px
    8px;

  border:
    0;

  border-radius:
    12px;

  background:
    transparent;

  color:
    rgba(
      23,
      23,
      23,
      .72
    );

  text-align:
    left;

  font:
    inherit;

  font-size:
    11px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background
      .15s
      ease,
    transform
      .12s
      ease;
}


.qwa-spatial-lang__item-flag{
  width:
    22px;

  height:
    15px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border-radius:
    4px;
}


.qwa-spatial-lang__item strong{
  font-size:
    9px;

  font-weight:
    900;

  opacity:
    .58;
}


.qwa-spatial-lang__item > span:nth-child(3){
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-weight:
    760;
}


.qwa-spatial-lang__check{
  text-align:
    center;

  font-size:
    12px;

  font-weight:
    900;
}


.qwa-spatial-lang__item.is-active{
  background:
    rgba(
      23,
      23,
      23,
      .065
    );

  color:
    #181818;
}


.qwa-spatial-lang__item:active{
  transform:
    scale(
      .985
    );
}


/* =========================================================
   RATÓN
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-lang__button:hover{
    background:
      #ffffff;

    box-shadow:
      0
      8px
      22px
      rgba(
        30,
        30,
        30,
        .09
      );
  }


  .qwa-spatial-lang__item:hover{
    background:
      rgba(
        23,
        23,
        23,
        .045
      );
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-lang__button{
    min-height:
      34px;

    padding:
      0
      8px;
  }


  .qwa-spatial-lang__menu{
    width:
      min(
        218px,
        calc(
          100vw -
          24px
        )
      );
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16H2
   MENÚ DEL PROYECTO
========================================================= */

.qwa-spatial-menu{
  position:
    relative;

  z-index:
    81;
}


.qwa-spatial-menu__button{
  appearance:
    none;

  min-height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(20,20,20,.08);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.84);

  color:
    rgba(23,23,23,.76);

  box-shadow:
    0 6px 18px
    rgba(30,30,30,.065),
    inset 0 1px 0
    rgba(255,255,255,.88);

  font:
    inherit;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    900;

  cursor:
    pointer;

  touch-action:
    manipulation;

  transition:
    transform .14s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.qwa-spatial-menu__button:active{
  transform:
    scale(.96);
}


.qwa-spatial-menu__button-icon{
  width:
    16px;

  display:
    grid;

  gap:
    2.5px;
}


.qwa-spatial-menu__button-icon i{
  display:
    block;

  width:
    16px;

  height:
    1.5px;

  border-radius:
    999px;

  background:
    currentColor;
}


/* =========================================================
   PANEL
========================================================= */

.qwa-spatial-menu__panel{
  position:
    absolute;

  top:
    calc(100% + 8px);

  right:
    0;

  width:
    min(
      270px,
      calc(100vw - 24px)
    );

  padding:
    8px;

  border:
    1px solid
    rgba(20,20,20,.08);

  border-radius:
    20px;

  background:
    rgba(255,255,253,.975);

  box-shadow:
    0 20px 54px
    rgba(25,25,25,.17),
    inset 0 1px 0
    rgba(255,255,255,.92);

  backdrop-filter:
    blur(18px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(125%);
}


.qwa-spatial-menu__panel[hidden]{
  display:
    none !important;
}


.qwa-spatial-menu__head{
  min-width:
    0;

  display:
    grid;

  gap:
    4px;

  padding:
    9px
    9px
    11px;

  border-bottom:
    1px solid
    rgba(20,20,20,.065);
}


.qwa-spatial-menu__eyebrow{
  color:
    rgba(23,23,23,.42);

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}


.qwa-spatial-menu__title{
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    #181818;

  font-size:
    13px;

  line-height:
    1.1;

  font-weight:
    900;
}


/* =========================================================
   ACCIONES
========================================================= */

.qwa-spatial-menu__list{
  display:
    grid;

  gap:
    3px;

  padding-top:
    6px;
}


.qwa-spatial-menu__item{
  appearance:
    none;

  width:
    100%;

  min-height:
    45px;

  display:
    grid;

  grid-template-columns:
    34px
    minmax(0,1fr)
    18px;

  align-items:
    center;

  gap:
    7px;

  padding:
    5px
    8px;

  border:
    0;

  border-radius:
    13px;

  background:
    transparent;

  color:
    rgba(23,23,23,.72);

  font:
    inherit;

  cursor:
    pointer;

  text-align:
    left;

  touch-action:
    manipulation;

  transition:
    background .16s ease,
    transform .12s ease;
}


.qwa-spatial-menu__item:active{
  transform:
    scale(.985);
}


.qwa-spatial-menu__item-icon{
  width:
    32px;

  height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    11px;

  background:
    rgba(23,23,23,.055);

  color:
    rgba(23,23,23,.68);

  font-size:
    15px;

  line-height:
    1;

  font-weight:
    900;
}


.qwa-spatial-menu__item-label{
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  font-weight:
    800;
}


.qwa-spatial-menu__item-arrow{
  text-align:
    center;

  color:
    rgba(23,23,23,.28);

  font-size:
    17px;
}


/* =========================================================
   WIFI
========================================================= */

.qwa-spatial-wifi{
  position:
    fixed;

  inset:
    0;

  z-index:
    210;

  display:
    grid;

  place-items:
    center;

  padding:
    14px;

  opacity:
    0;

  transition:
    opacity .22s ease;
}


.qwa-spatial-wifi[hidden]{
  display:
    none !important;
}


.qwa-spatial-wifi.is-open{
  opacity:
    1;
}


.qwa-spatial-wifi__backdrop{
  position:
    absolute;

  inset:
    0;

  background:
    rgba(18,18,18,.25);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.qwa-spatial-wifi__card{
  position:
    relative;

  z-index:
    2;

  width:
    min(
      430px,
      calc(100vw - 28px)
    );

  overflow:
    hidden;

  border:
    1px solid
    rgba(20,20,20,.08);

  border-radius:
    26px;

  background:
    rgba(255,255,253,.99);

  box-shadow:
    0 28px 80px
    rgba(20,20,20,.24);

  transform:
    translateY(12px)
    scale(.985);

  transition:
    transform
    .24s
    cubic-bezier(.22,1,.36,1);
}


.qwa-spatial-wifi.is-open
.qwa-spatial-wifi__card{
  transform:
    translateY(0)
    scale(1);
}


.qwa-spatial-wifi__card > header{
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    18px;

  border-bottom:
    1px solid
    rgba(20,20,20,.07);
}


.qwa-spatial-wifi__card h2{
  margin:
    0 0 5px;

  font-size:
    20px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -.04em;
}


.qwa-spatial-wifi__card p{
  margin:
    0;

  color:
    rgba(23,23,23,.52);

  font-size:
    11px;

  line-height:
    1.4;

  font-weight:
    650;
}


.qwa-spatial-wifi__close{
  appearance:
    none;

  flex:
    0 0 auto;

  width:
    36px;

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(20,20,20,.08);

  border-radius:
    999px;

  background:
    rgba(247,247,244,.96);

  font-size:
    22px;

  cursor:
    pointer;
}


.qwa-spatial-wifi__body{
  display:
    grid;

  gap:
    8px;

  padding:
    14px;
}


.qwa-spatial-wifi__row{
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items:
    center;

  gap:
    10px;

  padding:
    11px;

  border:
    1px solid
    rgba(20,20,20,.065);

  border-radius:
    16px;

  background:
    rgba(247,247,244,.74);
}


.qwa-spatial-wifi__row-copy{
  min-width:
    0;

  display:
    grid;

  gap:
    4px;
}


.qwa-spatial-wifi__row-copy span{
  color:
    rgba(23,23,23,.43);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.qwa-spatial-wifi__row-copy strong{
  min-width:
    0;

  overflow-wrap:
    anywhere;

  color:
    #181818;

  font-size:
    12px;

  font-weight:
    850;
}


.qwa-spatial-wifi__row > button{
  appearance:
    none;

  min-height:
    32px;

  padding:
    0 10px;

  border:
    1px solid
    rgba(20,20,20,.08);

  border-radius:
    999px;

  background:
    #fff;

  color:
    #181818;

  font-size:
    9px;

  font-weight:
    850;

  cursor:
    pointer;
}


/* =========================================================
   TOAST
========================================================= */

.qwa-spatial-menu-toast{
  position:
    fixed;

  left:
    50%;

  bottom:
    max(
      22px,
      calc(
        env(safe-area-inset-bottom,0px)
        + 14px
      )
    );

  z-index:
    260;

  padding:
    10px 14px;

  border-radius:
    999px;

  background:
    rgba(24,24,24,.94);

  color:
    #fff;

  box-shadow:
    0 10px 30px
    rgba(20,20,20,.22);

  font-size:
    10px;

  font-weight:
    800;

  opacity:
    0;

  transform:
    translate(-50%,8px);

  transition:
    opacity .18s ease,
    transform .18s ease;

  pointer-events:
    none;
}


.qwa-spatial-menu-toast[hidden]{
  display:
    none !important;
}


.qwa-spatial-menu-toast.is-visible{
  opacity:
    1;

  transform:
    translate(-50%,0);
}


/* =========================================================
   RATÓN
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-menu__button:hover{
    background:
      #fff;

    box-shadow:
      0 8px 22px
      rgba(30,30,30,.09);
  }


  .qwa-spatial-menu__item:hover{
    background:
      rgba(23,23,23,.045);
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-menu__button{
    min-height:
      34px;

    padding:
      0 8px;
  }


  .qwa-spatial-menu__button-label{
    display:
      none;
  }


  .qwa-spatial-menu__panel{
    width:
      min(
        260px,
        calc(100vw - 24px)
      );
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I1
   STAGE FOTO REAL
========================================================= */


/* =========================================================
   IMAGEN PERSISTENTE
========================================================= */

.qwa-spatial-stage-photo{
  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  padding:
    clamp(
      12px,
      3vw,
      24px
    );

  opacity:
    0;

  transform:
    scale(
      .985
    );

  transition:
    opacity
      .28s
      ease,
    transform
      .38s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      );

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;
}


.qwa-spatial-stage-photo[hidden]{
  display:
    none !important;
}


.qwa-spatial-stage-photo.is-visible{
  opacity:
    1;

  transform:
    scale(
      1
    );
}


/* =========================================================
   FOTO CARGANDO
========================================================= */

.qwa-spatial-stage.is-photo-loading
.qwa-spatial-stage__placeholder{
  opacity:
    1;

  visibility:
    visible;
}


.qwa-spatial-stage.is-photo-loading
.qwa-spatial-stage-photo{
  opacity:
    0;
}


/* =========================================================
   FOTO PREPARADA
========================================================= */

.qwa-spatial-stage.is-photo-ready
.qwa-spatial-stage__placeholder{
  opacity:
    0;

  visibility:
    hidden;
}


.qwa-spatial-stage.is-photo-ready
.qwa-spatial-stage-photo{
  opacity:
    1;
}


/* =========================================================
   ERROR FOTO
========================================================= */

.qwa-spatial-stage.is-photo-error
.qwa-spatial-stage__placeholder{
  opacity:
    1;

  visibility:
    visible;
}


.qwa-spatial-stage.is-photo-error
.qwa-spatial-stage-photo{
  display:
    none;
}


/* =========================================================
   SEGURIDAD DE MODOS
========================================================= */

.qwa-spatial-stage[data-stage-mode="3d"]
.qwa-spatial-stage-photo,

.qwa-spatial-stage[data-stage-mode="editorial"]
.qwa-spatial-stage-photo{
  display:
    none !important;
}


/*
  El modelo 3D sigue siendo exactamente
  el único contenido visual del Stage 3D.
*/
.qwa-spatial-stage[data-stage-mode="photo"]
.qwa-spatial-model-viewer{
  display:
    none !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media
(min-width:760px){

  .qwa-spatial-stage-photo{
    padding:
      clamp(
        20px,
        3vw,
        38px
      );
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .qwa-spatial-stage-photo{
    transition-duration:
      .01ms !important;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I1B
   FOTO INMERSIVA + MOVIMIENTO ESPACIAL
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.qwa-spatial-stage{
  --qwa-photo-x:
    0px;

  --qwa-photo-y:
    0px;

  --qwa-photo-rx:
    0deg;

  --qwa-photo-ry:
    0deg;

  --qwa-photo-zoom:
    1.065;
}


/* =========================================================
   FOTO · LLENAR EL STAGE
   ---------------------------------------------------------
   Sustituye visualmente el comportamiento
   anterior:
     contain + padding

   por:
     cover + sin padding
========================================================= */

.qwa-spatial-stage[data-stage-mode="photo"]
.qwa-spatial-stage__surface{
  perspective:
    950px;

  transform-style:
    preserve-3d;
}


.qwa-spatial-stage[data-stage-mode="photo"]
.qwa-spatial-stage-photo{
  inset:
    0;

  width:
    100%;

  height:
    100%;

  padding:
    0 !important;

  object-fit:
    cover;

  object-position:
    50% 50%;

  transform-origin:
    50% 50%;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  will-change:
    transform,
    opacity;

  /*
    El suavizado ya lo controla JS.
    No queremos que una transición CSS
    retrase el giroscopio.
  */
  transition:
    opacity
    .28s
    ease !important;
}


/* =========================================================
   TRANSFORMACIÓN ESPACIAL
========================================================= */

.qwa-spatial-stage[data-stage-mode="photo"]
.qwa-spatial-stage-photo.is-visible{
  transform:
    translate3d(
      var(
        --qwa-photo-x,
        0px
      ),
      var(
        --qwa-photo-y,
        0px
      ),
      0
    )

    rotateX(
      var(
        --qwa-photo-rx,
        0deg
      )
    )

    rotateY(
      var(
        --qwa-photo-ry,
        0deg
      )
    )

    scale(
      var(
        --qwa-photo-zoom,
        1.065
      )
    );
}


/* =========================================================
   MÓVIL
   ---------------------------------------------------------
   Algo más de ampliación porque el Stage
   es más vertical y necesitamos margen
   para el parallax.
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-stage{
    --qwa-photo-zoom:
      1.10;
  }

}


/* =========================================================
   BOTÓN DE PERMISO DE MOVIMIENTO
   ---------------------------------------------------------
   Normalmente solo será visible en iOS.
========================================================= */

.qwa-spatial-photo-motion{
  appearance:
    none;

  -webkit-appearance:
    none;

  position:
    absolute;

  right:
    10px;

  bottom:
    10px;

  z-index:
    10;

  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0
    11px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .08
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      .86
    );

  color:
    rgba(
      23,
      23,
      23,
      .72
    );

  backdrop-filter:
    blur(
      12px
    );

  -webkit-backdrop-filter:
    blur(
      12px
    );

  box-shadow:
    0
    6px
    18px
    rgba(
      20,
      20,
      20,
      .10
    );

  font:
    inherit;

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    850;

  cursor:
    pointer;

  touch-action:
    manipulation;
}


.qwa-spatial-photo-motion[hidden]{
  display:
    none !important;
}


.qwa-spatial-photo-motion:disabled{
  opacity:
    .42;

  cursor:
    default;
}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .qwa-spatial-stage[data-stage-mode="photo"]
  .qwa-spatial-stage-photo.is-visible{
    transform:
      scale(
        1.04
      ) !important;
  }


  .qwa-spatial-photo-motion{
    display:
      none !important;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I1C
   ENCUADRE INTELIGENTE DE FOTOGRAFÍA
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.qwa-spatial-stage{
  --qwa-photo-focus-x:
    50%;

  --qwa-photo-focus-y:
    50%;

  --qwa-photo-smart-zoom:
    var(
      --qwa-photo-zoom,
      1.065
    );
}


/* =========================================================
   BACKDROP
   ---------------------------------------------------------
   Siempre llena el Stage por detrás.
   En una foto normal apenas se percibe.

   En formatos extremos evita bandas vacías.
========================================================= */

.qwa-spatial-stage-photo-backdrop{
  position:
    absolute;

  inset:
    -28px;

  z-index:
    1;

  width:
    calc(
      100% +
      56px
    );

  height:
    calc(
      100% +
      56px
    );

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  filter:
    blur(
      25px
    )
    saturate(
      .88
    );

  opacity:
    .10;

  transform:
    scale(
      1.08
    );

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;

  transition:
    opacity
    .28s
    ease;
}


.qwa-spatial-stage-photo-backdrop[hidden]{
  display:
    none !important;
}


/* =========================================================
   FOTO PRINCIPAL
========================================================= */

.qwa-spatial-stage[data-stage-mode="photo"]
.qwa-spatial-stage-photo{
  z-index:
    2;

  object-position:
    var(
      --qwa-photo-focus-x,
      50%
    )
    var(
      --qwa-photo-focus-y,
      50%
    );

  transform-origin:
    var(
      --qwa-photo-focus-x,
      50%
    )
    var(
      --qwa-photo-focus-y,
      50%
    );
}


/* =========================================================
   TRANSFORMACIÓN
   ---------------------------------------------------------
   Sustituye únicamente el scale de 16I1B.

   El movimiento X/Y y las rotaciones
   continúan viniendo del bloque anterior.
========================================================= */

.qwa-spatial-stage[data-stage-mode="photo"]
.qwa-spatial-stage-photo.is-visible{
  transform:
    translate3d(
      var(
        --qwa-photo-x,
        0px
      ),
      var(
        --qwa-photo-y,
        0px
      ),
      0
    )

    rotateX(
      var(
        --qwa-photo-rx,
        0deg
      )
    )

    rotateY(
      var(
        --qwa-photo-ry,
        0deg
      )
    )

    scale(
      var(
        --qwa-photo-smart-zoom,
        1.065
      )
    );
}


/* =========================================================
   FOTO NORMAL
   ---------------------------------------------------------
   Fotografía cuya proporción encaja
   razonablemente bien con el Stage.
========================================================= */

.qwa-spatial-stage.is-photo-standard-ratio
.qwa-spatial-stage-photo{
  object-fit:
    cover;
}


.qwa-spatial-stage.is-photo-standard-ratio
.qwa-spatial-stage-photo-backdrop{
  opacity:
    .045;
}


/* =========================================================
   FORMATO EXTREMO
   ---------------------------------------------------------
   Ejemplo:
   - vertical muy estrecha en escritorio
   - horizontal panorámica en móvil

   No sacrificamos media imagen para llenar.
========================================================= */

.qwa-spatial-stage.is-photo-extreme-ratio
.qwa-spatial-stage-photo{
  object-fit:
    contain;

  padding:
    clamp(
      6px,
      1.4vw,
      16px
    )
    !important;
}


.qwa-spatial-stage.is-photo-extreme-ratio
.qwa-spatial-stage-photo-backdrop{
  opacity:
    .17;
}


/* =========================================================
   OBJETO AISLADO
   ---------------------------------------------------------
   El JS ha detectado automáticamente
   mucho espacio vacío alrededor del objeto.

   Aquí permitimos que el zoom automático
   haga el trabajo.
========================================================= */

.qwa-spatial-stage.is-photo-smart-object
.qwa-spatial-stage-photo{
  object-fit:
    contain;

  padding:
    0
    !important;
}


.qwa-spatial-stage.is-photo-smart-object
.qwa-spatial-stage-photo-backdrop{
  opacity:
    .075;

  filter:
    blur(
      30px
    )
    saturate(
      .78
    );
}


/* =========================================================
   SEGURIDAD
========================================================= */

.qwa-spatial-stage[data-stage-mode="3d"]
.qwa-spatial-stage-photo-backdrop,

.qwa-spatial-stage[data-stage-mode="editorial"]
.qwa-spatial-stage-photo-backdrop{
  display:
    none !important;
}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-stage.is-photo-extreme-ratio
  .qwa-spatial-stage-photo{
    padding:
      4px
      !important;
  }


  .qwa-spatial-stage.is-photo-extreme-ratio
  .qwa-spatial-stage-photo-backdrop{
    opacity:
      .20;
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .qwa-spatial-stage[data-stage-mode="photo"]
  .qwa-spatial-stage-photo.is-visible{
    transform:
      scale(
        var(
          --qwa-photo-smart-zoom,
          1.04
        )
      ) !important;
  }

}

/* =========================================================
   QWA SPATIAL · 16I1C FIX
   FALLBACK MÓVIL · LLENAR EL STAGE
   ---------------------------------------------------------
   Cuando:
   - estamos en móvil
   - la proporción es extrema
   - no ha sido posible analizar el contenido

   No usamos contain.
   Priorizamos la experiencia inmersiva.
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-stage.is-photo-extreme-ratio.is-photo-analysis-unavailable
  .qwa-spatial-stage-photo{
    width:
      100%;

    height:
      100%;

    padding:
      0 !important;

    object-fit:
      cover;

    object-position:
      var(
        --qwa-photo-focus-x,
        50%
      )
      var(
        --qwa-photo-focus-y,
        50%
      );
  }


  .qwa-spatial-stage.is-photo-extreme-ratio.is-photo-analysis-unavailable{
    --qwa-photo-smart-zoom:
      1.10;
  }


  .qwa-spatial-stage.is-photo-extreme-ratio.is-photo-analysis-unavailable
  .qwa-spatial-stage-photo-backdrop{
    opacity:
      .045;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I1D
   ALINEACIÓN DESKTOP
========================================================= */

@media
(min-width:760px){

  /* =======================================================
     FICHA INFORMATIVA
     -------------------------------------------------------
     Antes:
       align-content: end

     Ahora:
       toda la información nace desde arriba.
  ======================================================= */

  .qwa-spatial-info{
    align-content:
      start;
  }


  /*
    Eliminamos el empuje extra que tenía
    sentido cuando el contenido estaba abajo.
  */

  .qwa-spatial-position{
    margin-top:
      8px;
  }


  /* =======================================================
     EXPLORAR + MI SELECCIÓN
     -------------------------------------------------------
     Ya no se centran en la pantalla.

     JS proporciona exactamente el centro
     horizontal del Stage.
  ======================================================= */

  .qwa-spatial-footer{
    left:
      var(
        --qwa-spatial-stage-center-x,
        50%
      );

    width:
      min(
        430px,
        calc(
          var(
            --qwa-spatial-stage-width,
            454px
          )
          -
          24px
        )
      );

    transform:
      translateX(
        -50%
      );
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I1E
   DESKTOP · APROVECHAR TODO EL VIEWPORT
   ---------------------------------------------------------
   - Elimina el antiguo límite de 1180px.
   - Stage ocupa el espacio disponible.
   - La ficha lateral conserva un ancho ergonómico.
   - Mantiene pequeños márgenes de seguridad.
   - No afecta a móvil.
========================================================= */

@media
(min-width: 1220px){

  /* =======================================================
     CABECERA
  ======================================================= */

  .qwa-spatial-header{
    width:
      calc(
        100% -
        clamp(
          24px,
          2vw,
          48px
        )
      );

    max-width:
      none;

    min-height:
      76px;

    margin-left:
      auto;

    margin-right:
      auto;
  }


  .qwa-spatial-bootstrap{
    gap:
      5px;
  }


  .qwa-spatial-bootstrap strong{
    font-size:
      clamp(
        22px,
        1.45vw,
        28px
      );
  }


  .qwa-spatial-bootstrap span{
    font-size:
      11px;
  }


  /* Idioma */

  .qwa-spatial-lang__button{
    min-height:
      40px;

    padding:
      0
      13px;

    font-size:
      11px;
  }


  .qwa-spatial-lang__flag{
    width:
      24px;

    height:
      17px;
  }


  /* Menú */

  .qwa-spatial-menu__button{
    min-height:
      40px;

    padding:
      0
      14px;

    font-size:
      11px;
  }


  /* =======================================================
     ÁREA PRINCIPAL
  ======================================================= */

  .qwa-spatial-main{
    width:
      calc(
        100% -
        clamp(
          24px,
          2vw,
          48px
        )
      );

    max-width:
      none;

    margin-left:
      auto;

    margin-right:
      auto;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      clamp(
        360px,
        23vw,
        460px
      );

    gap:
      clamp(
        18px,
        1.5vw,
        30px
      );
  }


  /* =======================================================
     STAGE
  ======================================================= */

  .qwa-spatial-stage{
    width:
      100%;

    max-width:
      none;
  }


  .qwa-spatial-stage__surface{
    width:
      100%;

    max-width:
      none;
  }


  /* =======================================================
     FICHA INFORMATIVA
  ======================================================= */

  .qwa-spatial-info{
    width:
      100%;

    min-width:
      0;

    max-width:
      460px;

    justify-self:
      stretch;

    align-content:
      start;

    gap:
      15px;

    padding:
      28px;

    border-radius:
      32px;
  }


  .qwa-spatial-info__meta{
    gap:
      7px;

    font-size:
      11px;
  }


  .qwa-spatial-info__title-row h1{
    font-size:
      clamp(
        30px,
        2vw,
        36px
      );

    line-height:
      1.03;
  }


  .qwa-spatial-info__price{
    padding:
      8px
      12px;

    font-size:
      12px;
  }


  .qwa-spatial-info__description{
    font-size:
      15.5px;

    line-height:
      1.48;
  }


  /* =======================================================
     MI SELECCIÓN · FICHA
  ======================================================= */

  .qwa-spatial-info-selection{
    min-height:
      48px;

    padding:
      6px
      7px
      6px
      13px;

    border-radius:
      17px;
  }


  .qwa-spatial-info-selection__label{
    font-size:
      11px;
  }


  .qwa-spatial-info-selection__quantity{
    grid-template-columns:
      34px
      minmax(
        32px,
        auto
      )
      34px;
  }


  .qwa-spatial-info-selection__button{
    width:
      34px;

    height:
      34px;

    min-width:
      34px;

    font-size:
      19px;
  }


  .qwa-spatial-info-selection__count{
    min-width:
      32px;

    height:
      32px;

    font-size:
      12px;
  }


  /* =======================================================
     ACCESOS INFERIORES
  ======================================================= */

  .qwa-spatial-footer{
    width:
      min(
        480px,
        calc(
          var(
            --qwa-spatial-stage-width,
            500px
          )
          -
          24px
        )
      );
  }


  .qwa-spatial-footer__placeholder{
    min-height:
      52px;

    font-size:
      12px;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I1F
   NITIDEZ TIPOGRÁFICA
   ---------------------------------------------------------
   - Evita mantener el panel rasterizado por GPU
     cuando está quieto.
   - Mejora textos pequeños.
   - Conserva las animaciones y el drag.
========================================================= */


/* =========================================================
   1. EXPLORAR · AL QUEDAR QUIETO
   ---------------------------------------------------------
   Durante entrada y drag sigue existiendo transform.
   Una vez abierto y quieto dejamos el panel en
   coordenadas normales para que Chrome renderice
   el texto directamente.
========================================================= */

.qwa-spatial-explore.is-open:not(.is-dragging)
.qwa-spatial-explore__sheet{
  transform:
    none;

  will-change:
    auto;
}


/* =========================================================
   2. MI SELECCIÓN
   ---------------------------------------------------------
   Mismo principio:
   no mantener translate3d(0,0,0) permanentemente.
========================================================= */

.qwa-spatial-selection.is-open
.qwa-spatial-selection__sheet{
  transform:
    none;

  will-change:
    auto;
}


/* =========================================================
   3. MICROTIPOGRAFÍA EXPLORAR
========================================================= */

.qwa-spatial-explore__block h3,
.qwa-spatial-explore__results-head h3{
  font-size:
    11px;

  font-weight:
    800;

  color:
    rgba(
      23,
      23,
      23,
      .60
    );
}


.qwa-spatial-explore__chip{
  font-size:
    12px;

  font-weight:
    800;
}


.qwa-spatial-explore__item-copy strong{
  font-size:
    12.5px;

  line-height:
    1.18;

  font-weight:
    800;

  letter-spacing:
    0;
}


.qwa-spatial-explore__item-meta{
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    rgba(
      23,
      23,
      23,
      .56
    );

  font-size:
    9px;

  line-height:
    1.16;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .045em;
}


.qwa-spatial-explore__item-price{
  font-size:
    11px;

  font-weight:
    800;

  color:
    rgba(
      23,
      23,
      23,
      .72
    );
}


.qwa-spatial-explore__count{
  font-size:
    11px;

  font-weight:
    800;
}


/* =========================================================
   4. BUSCADOR
========================================================= */

.qwa-spatial-explore-search__input{
  font-weight:
    600;
}


.qwa-spatial-explore-search__input::placeholder{
  color:
    rgba(
      23,
      23,
      23,
      .50
    );
}


/* =========================================================
   5. FILTROS
========================================================= */

.qwa-spatial-food-filters__toggle{
  font-weight:
    800;

  color:
    rgba(
      23,
      23,
      23,
      .82
    );
}

/* =========================================================
   QWA SPATIAL · PASO 16I2
   FICHA LATERAL PLEGABLE · DESKTOP
========================================================= */

@media
(min-width:760px){

  /* =======================================================
     TRANSICIÓN DEL LAYOUT
     -------------------------------------------------------
     El Stage crece porque reducimos físicamente
     la segunda columna del grid.
  ======================================================= */

  .qwa-spatial-main{
    transition:
      grid-template-columns
        .36s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      gap
        .32s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        );
  }


  /* =======================================================
     FICHA
  ======================================================= */

  .qwa-spatial-info{
    position:
      relative;

    overflow:
      visible;

    transition:
      width
        .34s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      max-width
        .34s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      padding
        .30s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      border-radius
        .26s
        ease,
      background
        .22s
        ease,
      box-shadow
        .26s
        ease,
      transform
        .16s
        ease;
  }


  /* =======================================================
     CONTENIDO DE LA FICHA
  ======================================================= */

  .qwa-spatial-info
  >
  :not(
    .qwa-spatial-info__handle
  ){
    min-width:
      0;

    transition:
      opacity
        .17s
        ease,
      transform
        .24s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      visibility
        0s
        linear
        0s;
  }


  /* =======================================================
     CONTROL LATERAL
     -------------------------------------------------------
     Reutilizamos la misma barra física de 16F5.

     En móvil = barra horizontal.
     En escritorio = pestaña vertical.
  ======================================================= */

  .qwa-spatial-info__handle{
    position:
      absolute;

    left:
      0;

    top:
      50%;

    z-index:
      12;

    width:
      30px;

    height:
      68px;

    min-width:
      30px;

    min-height:
      68px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    margin:
      0;

    padding:
      0;

    transform:
      translate(
        -50%,
        -50%
      );

    border:
      1px solid
      rgba(
        20,
        20,
        20,
        .09
      );

    border-radius:
      999px;

    background:
      rgba(
        255,
        255,
        255,
        .94
      );

    box-shadow:
      0
      8px
      22px
      rgba(
        25,
        25,
        25,
        .10
      ),
      inset
      0
      1px
      0
      rgba(
        255,
        255,
        255,
        .90
      );

    cursor:
      pointer;

    touch-action:
      none;

    user-select:
      none;

    -webkit-user-select:
      none;

    outline:
      none;

    transition:
      left
        .30s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      width
        .18s
        ease,
      background
        .18s
        ease,
      box-shadow
        .18s
        ease,
      transform
        .16s
        ease;
  }


  /*
    Eliminamos la barrita horizontal base.
  */

  .qwa-spatial-info__handle{
    color:
      rgba(
        23,
        23,
        23,
        .55
      );
  }


  /* =======================================================
     CHEVRON
  ======================================================= */

  .qwa-spatial-info__handle::before{
    content:
      "";

    width:
      8px;

    height:
      8px;

    display:
      block;

    border-right:
      2px solid
      currentColor;

    border-bottom:
      2px solid
      currentColor;

    transform:
      rotate(
        -45deg
      );

    transition:
      transform
        .26s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        ),
      color
        .18s
        ease;
  }


  .qwa-spatial-info__handle::after{
    content:
      none;
  }


  .qwa-spatial-info__handle:active{
    transform:
      translate(
        -50%,
        -50%
      )
      scale(
        .94
      );
  }


  .qwa-spatial-info__handle:focus-visible{
    outline:
      2px solid
      rgba(
        23,
        23,
        23,
        .32
      );

    outline-offset:
      3px;
  }


  /* =======================================================
     ESTADO PLEGADO
  ======================================================= */

  .qwa-spatial-root.qwa-spatial-desktop-info-collapsed
  .qwa-spatial-main{
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      46px;

    gap:
      10px;
  }


  .qwa-spatial-info.is-desktop-collapsed{
    width:
      46px;

    min-width:
      46px;

    max-width:
      46px;

    padding:
      0;

    gap:
      0;

    align-content:
      center;

    justify-self:
      end;

    border-radius:
      23px;

    background:
      rgba(
        255,
        255,
        255,
        .72
      );

    box-shadow:
      0
      10px
      26px
      rgba(
        30,
        30,
        30,
        .065
      );
  }


  .qwa-spatial-info.is-desktop-collapsed
  >
  :not(
    .qwa-spatial-info__handle
  ){
    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translateX(
        10px
      );
  }


  /* =======================================================
     CONTROL CUANDO ESTÁ PLEGADO
  ======================================================= */

  .qwa-spatial-info.is-desktop-collapsed
  .qwa-spatial-info__handle{
    left:
      50%;

    width:
      32px;

    background:
      rgba(
        255,
        255,
        255,
        .96
      );

    box-shadow:
      0
      9px
      24px
      rgba(
        25,
        25,
        25,
        .11
      );
  }


  /*
    La flecha pasa de:

        >  ocultar

    a:

        <  mostrar
  */

  .qwa-spatial-info.is-desktop-collapsed
  .qwa-spatial-info__handle::before{
    transform:
      rotate(
        135deg
      );
  }


  /* =======================================================
     DRAG
  ======================================================= */

  .qwa-spatial-info.is-desktop-info-dragging{
    transition:
      none !important;

    transform:
      translate3d(
        var(
          --qwa-desktop-info-drag-x,
          0px
        ),
        0,
        0
      );
  }


  .qwa-spatial-info.is-desktop-info-dragging
  .qwa-spatial-info__handle{
    cursor:
      ew-resize;
  }


  /* =======================================================
     RATÓN
  ======================================================= */

  @media
  (hover:hover)
  and
  (pointer:fine){

    .qwa-spatial-info__handle:hover{
      width:
        34px;

      background:
        #ffffff;

      color:
        rgba(
          23,
          23,
          23,
          .82
        );

      box-shadow:
        0
        11px
        28px
        rgba(
          25,
          25,
          25,
          .13
        );
    }

  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .qwa-spatial-main,
  .qwa-spatial-info,
  .qwa-spatial-info
  >
  :not(
    .qwa-spatial-info__handle
  ),
  .qwa-spatial-info__handle{
    transition-duration:
      .01ms !important;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I3
   FOTO ↔ 3D EN EL MISMO STAGE
========================================================= */




/* =========================================================
   SEGUNDO ESTADO DEL STAGE
   ---------------------------------------------------------
   MUY IMPORTANTE:

   stageMode continúa siendo "3d".

   Solo data-stage-view cambia a "photo".

   Por tanto no dispararnos el motor normal
   de cambio de modelo.
========================================================= */

.qwa-spatial-stage[
  data-stage-mode="3d"
][
  data-stage-view="photo"
]
.qwa-spatial-stage__surface{
  perspective:
    950px;

  transform-style:
    preserve-3d;
}


/* =========================================================
   MODEL VIEWER
   ---------------------------------------------------------
   No utilizamos display:none.

   Sigue existiendo, conserva src y estado.
========================================================= */

.qwa-spatial-stage[
  data-stage-mode="3d"
][
  data-stage-view="photo"
]
.qwa-spatial-model-viewer{
  opacity:
    0
    !important;

  visibility:
    hidden;

  pointer-events:
    none;
}


/* =========================================================
   FOTO CONTEXTUAL
   ---------------------------------------------------------
   Este selector sobreescribe expresamente
   la seguridad anterior que ocultaba fotografías
   cuando stageMode era 3d.
========================================================= */

.qwa-spatial-stage[
  data-stage-mode="3d"
][
  data-stage-view="photo"
]
.qwa-spatial-stage-photo{
  display:
    block
    !important;

  position:
    absolute;

  inset:
    0;

  z-index:
    6;

  width:
    100%;

  height:
    100%;

  padding:
    0
    !important;

  object-fit:
    cover;

  object-position:
    center;

  opacity:
    1;

  transform-origin:
    center;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  pointer-events:
    none;

  will-change:
    transform;

  transform:
    translate3d(
      var(
        --qwa-photo-x,
        0px
      ),
      var(
        --qwa-photo-y,
        0px
      ),
      0
    )

    rotateX(
      var(
        --qwa-photo-rx,
        0deg
      )
    )

    rotateY(
      var(
        --qwa-photo-ry,
        0deg
      )
    )

    scale(
      1.07
    );

  transition:
    opacity
      .24s
      ease;
}


/* =========================================================
   FOTO TODAVÍA CARGANDO
========================================================= */

.qwa-spatial-stage.is-context-photo-loading
.qwa-spatial-stage-photo{
  opacity:
    0;
}


/* =========================================================
   FOTO CARGADA
========================================================= */

.qwa-spatial-stage.is-context-photo-ready
.qwa-spatial-stage-photo{
  opacity:
    1;
}


/* =========================================================
   BACKDROP DE LA FOTO
========================================================= */

.qwa-spatial-stage[
  data-stage-mode="3d"
][
  data-stage-view="photo"
]
.qwa-spatial-stage-photo-backdrop{
  display:
    block
    !important;

  position:
    absolute;

  inset:
    -30px;

  z-index:
    4;

  width:
    calc(
      100% +
      60px
    );

  height:
    calc(
      100% +
      60px
    );

  object-fit:
    cover;

  object-position:
    center;

  opacity:
    .08;

  filter:
    blur(
      28px
    )
    saturate(
      .85
    );

  transform:
    scale(
      1.08
    );

  pointer-events:
    none;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.qwa-spatial-stage[
  data-stage-mode="3d"
][
  data-stage-view="photo"
]
.qwa-spatial-stage__placeholder{
  opacity:
    0
    !important;

  visibility:
    hidden
    !important;
}


/* =========================================================
   VOLVER A 3D
   ---------------------------------------------------------
   Una vez se ha cargado una foto podemos conservarla
   transparente debajo.

   El model-viewer vuelve a verse inmediatamente.
========================================================= */

.qwa-spatial-stage[
  data-stage-mode="3d"
][
  data-stage-view="3d"
]
.qwa-spatial-stage-photo:not(
  [hidden]
){
  display:
    block
    !important;

  opacity:
    0;

  pointer-events:
    none;
}


/* =========================================================
   MOVIMIENTO iOS · PERMISO
========================================================= */

.qwa-spatial-context-photo-motion{
  appearance:
    none;

  -webkit-appearance:
    none;

  position:
    absolute;

  right:
    11px;

  bottom:
    11px;

  z-index:
    32;

  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    11px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .08
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      .88
    );

  color:
    rgba(
      23,
      23,
      23,
      .72
    );

  backdrop-filter:
    blur(
      12px
    );

  -webkit-backdrop-filter:
    blur(
      12px
    );

  box-shadow:
    0
    6px
    18px
    rgba(
      20,
      20,
      20,
      .10
    );

  font:
    inherit;

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    850;

  cursor:
    pointer;

  touch-action:
    manipulation;
}


.qwa-spatial-context-photo-motion[hidden]{
  display:
    none !important;
}


/* =========================================================
   RATÓN
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  

  /*
    Un poco más de zoom para que el movimiento
    espacial nunca descubra los bordes.
  */

  .qwa-spatial-stage[
    data-stage-mode="3d"
  ][
    data-stage-view="photo"
  ]
  .qwa-spatial-stage-photo{
    transform:
      translate3d(
        var(
          --qwa-photo-x,
          0px
        ),
        var(
          --qwa-photo-y,
          0px
        ),
        0
      )

      rotateX(
        var(
          --qwa-photo-rx,
          0deg
        )
      )

      rotateY(
        var(
          --qwa-photo-ry,
          0deg
        )
      )

      scale(
        1.11
      );
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .qwa-spatial-stage[
    data-stage-mode="3d"
  ][
    data-stage-view="photo"
  ]
  .qwa-spatial-stage-photo{
    transform:
      scale(
        1.05
      )
      !important;
  }


  .qwa-spatial-context-photo-motion{
    display:
      none
      !important;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I3A
   ENCUADRE ADAPTATIVO · FOTO CONTEXTUAL
========================================================= */


/* =========================================================
   TRANSFORM ÚNICO
   ---------------------------------------------------------
   Sustituimos el scale fijo 1.07 / 1.11
   que estaba provocando demasiado recorte.
========================================================= */

.qwa-spatial-stage[
  data-stage-mode="3d"
][
  data-stage-view="photo"
]
.qwa-spatial-stage-photo{
  object-position:
    50%
    50%;

  transform:
    translate3d(
      var(
        --qwa-photo-x,
        0px
      ),
      var(
        --qwa-photo-y,
        0px
      ),
      0
    )

    rotateX(
      var(
        --qwa-photo-rx,
        0deg
      )
    )

    rotateY(
      var(
        --qwa-photo-ry,
        0deg
      )
    )

    scale(
      var(
        --qwa-context-photo-scale,
        1.04
      )
    );
}


/* =========================================================
   PROPORCIÓN COMPATIBLE
   ---------------------------------------------------------
   Puede llenar el Stage.
========================================================= */

.qwa-spatial-stage.is-context-photo-fit-cover[
  data-stage-view="photo"
]
.qwa-spatial-stage-photo{
  object-fit:
    cover;

  padding:
    0 !important;
}


.qwa-spatial-stage.is-context-photo-fit-cover
.qwa-spatial-stage-photo-backdrop{
  opacity:
    .06;
}


/* =========================================================
   PROPORCIÓN MUY DISTINTA
   ---------------------------------------------------------
   Conservamos la foto completa.

   El backdrop mantiene el Stage visualmente lleno.
========================================================= */

.qwa-spatial-stage.is-context-photo-fit-contain[
  data-stage-view="photo"
]
.qwa-spatial-stage-photo{
  object-fit:
    contain;

  padding:
    clamp(
      3px,
      .7vw,
      8px
    )
    !important;
}


.qwa-spatial-stage.is-context-photo-fit-contain
.qwa-spatial-stage-photo-backdrop{
  opacity:
    .16;

  filter:
    blur(
      28px
    )
    saturate(
      .82
    );

  transform:
    scale(
      1.10
    );
}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  /*
    Esta regla está DESPUÉS de la antigua
    scale(1.11), por eso la sustituye.
  */

  .qwa-spatial-stage[
    data-stage-mode="3d"
  ][
    data-stage-view="photo"
  ]
  .qwa-spatial-stage-photo{
    transform:
      translate3d(
        var(
          --qwa-photo-x,
          0px
        ),
        var(
          --qwa-photo-y,
          0px
        ),
        0
      )

      rotateX(
        var(
          --qwa-photo-rx,
          0deg
        )
      )

      rotateY(
        var(
          --qwa-photo-ry,
          0deg
        )
      )

      scale(
        var(
          --qwa-context-photo-scale,
          1.018
        )
      );
  }


  .qwa-spatial-stage.is-context-photo-fit-contain
  .qwa-spatial-stage-photo{
    padding:
      0
      !important;
  }


  .qwa-spatial-stage.is-context-photo-fit-contain
  .qwa-spatial-stage-photo-backdrop{
    opacity:
      .14;
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .qwa-spatial-stage[
    data-stage-mode="3d"
  ][
    data-stage-view="photo"
  ]
  .qwa-spatial-stage-photo{
    transform:
      scale(
        1
      )
      !important;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I3B
   ZOOM + PAN UNIVERSAL DE FOTOGRAFÍAS
========================================================= */


/* =========================================================
   SUPERFICIE INTERACTIVA
   ---------------------------------------------------------
   Solo se aplica cuando realmente estamos viendo fotografía.
========================================================= */

.qwa-spatial-stage.is-photo-gesture-ready
.qwa-spatial-stage__surface{
  touch-action:
    none;

  overscroll-behavior:
    contain;
}


/* =========================================================
   CONTROL MANUAL
   ---------------------------------------------------------
   MUY IMPORTANTE:

   Mientras is-photo-user-control está activo
   NO utilizamos:

     --qwa-photo-x
     --qwa-photo-y
     --qwa-photo-rx
     --qwa-photo-ry

   Es decir:
   el parallax deja de afectar visualmente
   a la fotografía.
========================================================= */


/* FOTO COMO STAGE NATURAL */

.qwa-spatial-stage.is-photo-user-control[
  data-stage-mode="photo"
]
.qwa-spatial-stage-photo.is-visible{
  transform:
    translate3d(
      var(
        --qwa-photo-user-pan-x,
        0px
      ),
      var(
        --qwa-photo-user-pan-y,
        0px
      ),
      0
    )

    rotateX(
      0deg
    )

    rotateY(
      0deg
    )

    scale(
      var(
        --qwa-photo-user-scale,
        1
      )
    );

  transform-origin:
    50%
    50%;

  will-change:
    transform;
}


/* FOTO ABIERTA DESDE UN 3D */

.qwa-spatial-stage.is-photo-user-control[
  data-stage-mode="3d"
][
  data-stage-view="photo"
]
.qwa-spatial-stage-photo{
  transform:
    translate3d(
      var(
        --qwa-photo-user-pan-x,
        0px
      ),
      var(
        --qwa-photo-user-pan-y,
        0px
      ),
      0
    )

    rotateX(
      0deg
    )

    rotateY(
      0deg
    )

    scale(
      var(
        --qwa-photo-user-scale,
        1
      )
    );

  transform-origin:
    50%
    50%;

  will-change:
    transform;
}


/* =========================================================
   ESTADO AMPLIADO
========================================================= */

.qwa-spatial-stage.is-photo-user-zoomed
.qwa-spatial-stage__surface{
  cursor:
    grab;
}


.qwa-spatial-stage.is-photo-user-panning
.qwa-spatial-stage__surface{
  cursor:
    grabbing;
}


/* =========================================================
   BOTONES DE MOVIMIENTO
   ---------------------------------------------------------
   Si estamos ampliando no tiene sentido mostrar
   el permiso/estado del parallax.
========================================================= */

.qwa-spatial-stage.is-photo-user-control
.qwa-spatial-photo-motion,

.qwa-spatial-stage.is-photo-user-control
.qwa-spatial-context-photo-motion{
  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;
}


/* =========================================================
   VUELTA SUAVE AL PARALLAX
========================================================= */

.qwa-spatial-stage.is-photo-user-releasing
.qwa-spatial-stage-photo{
  transition:
    transform
      .20s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      ),
    opacity
      .20s
      ease;
}


/* =========================================================
   SELECCIÓN / DRAG NATIVO
========================================================= */

.qwa-spatial-stage.is-photo-gesture-ready
.qwa-spatial-stage-photo{
  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;
}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-stage.is-photo-user-zoomed
  .qwa-spatial-stage__surface{
    cursor:
      default;
  }

}


/* =========================================================
   PREFERS REDUCED MOTION
   ---------------------------------------------------------
   El usuario sigue pudiendo hacer zoom.

   Solo eliminamos la animación del regreso.
========================================================= */

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

  .qwa-spatial-stage.is-photo-user-control[
    data-stage-mode="photo"
  ]
  .qwa-spatial-stage-photo.is-visible,

  .qwa-spatial-stage.is-photo-user-control[
    data-stage-mode="3d"
  ][
    data-stage-view="photo"
  ]
  .qwa-spatial-stage-photo{
    transform:
      translate3d(
        var(
          --qwa-photo-user-pan-x,
          0px
        ),
        var(
          --qwa-photo-user-pan-y,
          0px
        ),
        0
      )

      scale(
        var(
          --qwa-photo-user-scale,
          1
        )
      )

      !important;
  }


  .qwa-spatial-stage.is-photo-user-releasing
  .qwa-spatial-stage-photo{
    transition:
      none
      !important;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16I4A
   AR REAL · CONTROLES + GUÍA
========================================================= */


/* =========================================================
   ACCIONES DEL STAGE · DISEÑO DEFINITIVO
   ---------------------------------------------------------
   FOTO / 3D + AR

   - Vertical
   - Iconos circulares reales
   - Nombre debajo
   - Compacto
   - Un único sistema
========================================================= */


/* =========================================================
   GRUPO
========================================================= */

.qwa-spatial-stage-actions{
  position:
    absolute;

  top:
    12px;

  right:
    12px;

  z-index:
    35;

  width:
    48px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    11px;

  pointer-events:
    auto;
}


.qwa-spatial-stage-actions[hidden]{
  display:
    none !important;
}


/* =========================================================
   ACCIÓN INDIVIDUAL
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-media-toggle,

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn{
  appearance:
    none;

  -webkit-appearance:
    none;

  position:
    static;

  width:
    48px;

  min-width:
    48px;

  height:
    auto;

  min-height:
    51px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    4px;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  color:
    #181818;

  box-shadow:
    none;

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  font:
    inherit;

  line-height:
    1;

  cursor:
    pointer;

  touch-action:
    manipulation;

  user-select:
    none;

  -webkit-user-select:
    none;

  overflow:
    visible;

  transition:
    transform
    .14s
    ease;
}


.qwa-spatial-stage-actions
.qwa-spatial-media-toggle[hidden],

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn[hidden]{
  display:
    none !important;
}


/* =========================================================
   CÍRCULO
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-media-toggle__icon,

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn__icon{
  position:
    relative;

  width:
    38px;

  min-width:
    38px;

  height:
    38px;

  min-height:
    38px;

  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    38px;

  margin:
    0;

  padding:
    0;

  border-radius:
    50%;

  overflow:
    hidden;

  transform:
    none;
}


/* =========================================================
   LIMPIEZA TOTAL DE ICONOS ANTIGUOS
   ---------------------------------------------------------
   Si alguna regla antigua quedase en caché o volviese
   accidentalmente, no puede dibujar encima de los SVG.
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-media-toggle__icon::before,

.qwa-spatial-stage-actions
.qwa-spatial-media-toggle__icon::after,

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn__icon::before,

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn__icon::after{
  content:
    none !important;

  display:
    none !important;
}


/* =========================================================
   FOTO
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-media-toggle__icon{
  background:
    rgba(
      255,
      255,
      255,
      .96
    );

  color:
    #181818;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .10
    );

  box-shadow:
    0
    7px
    18px
    rgba(
      20,
      20,
      20,
      .10
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .95
    );
}


/* =========================================================
   3D ACTIVO
   ---------------------------------------------------------
   Cuando estamos viendo Foto, el botón pasa a 3D.
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-media-toggle.is-photo-active
.qwa-spatial-media-toggle__icon{
  background:
    #181818;

  color:
    #ffffff;

  border-color:
    #181818;

  box-shadow:
    0
    8px
    20px
    rgba(
      20,
      20,
      20,
      .15
    );
}


/* =========================================================
   AR
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn__icon{
  background:
    rgba(
      255,
      255,
      255,
      .96
    );

  color:
    #181818;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .10
    );

  box-shadow:
    0
    7px
    18px
    rgba(
      20,
      20,
      20,
      .10
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .95
    );
}


/* =========================================================
   SVG
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-action-svg{
  width:
    18px;

  height:
    18px;

  display:
    block;

  overflow:
    visible;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.65;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  pointer-events:
    none;
}


/* =========================================================
   FOTO / 3D · CAMBIO DE ICONO
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-action-svg--photo{
  display:
    block;
}


.qwa-spatial-stage-actions
.qwa-spatial-action-svg--3d{
  display:
    none;
}


.qwa-spatial-stage-actions
.qwa-spatial-media-toggle.is-photo-active
.qwa-spatial-action-svg--photo{
  display:
    none;
}


.qwa-spatial-stage-actions
.qwa-spatial-media-toggle.is-photo-active
.qwa-spatial-action-svg--3d{
  display:
    block;
}


/* =========================================================
   NOMBRE DEBAJO
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-media-toggle__label,

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn__label{
  position:
    static;

  width:
    100%;

  height:
    auto;

  min-width:
    0;

  display:
    block;

  margin:
    0;

  padding:
    0;

  overflow:
    visible;

  clip:
    auto;

  clip-path:
    none;

  border:
    0;

  background:
    transparent;

  color:
    rgba(
      23,
      23,
      23,
      .72
    );

  text-align:
    center;

  white-space:
    nowrap;

  font-size:
    8.5px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -.01em;

  pointer-events:
    none;
}


/* =========================================================
   ACTIVE
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-media-toggle:active,

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn:active{
  transform:
    scale(
      .94
    );
}


/* =========================================================
   FOCUS
========================================================= */

.qwa-spatial-stage-actions
.qwa-spatial-media-toggle:focus-visible,

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn:focus-visible{
  outline:
    none;
}


.qwa-spatial-stage-actions
.qwa-spatial-media-toggle:focus-visible
.qwa-spatial-media-toggle__icon,

.qwa-spatial-stage-actions
.qwa-spatial-ar-btn:focus-visible
.qwa-spatial-ar-btn__icon{
  box-shadow:
    0
    0
    0
    3px
    rgba(
      23,
      23,
      23,
      .15
    ),
    0
    8px
    22px
    rgba(
      20,
      20,
      20,
      .12
    );
}


/* =========================================================
   RATÓN
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-stage-actions
  .qwa-spatial-media-toggle:hover,

  .qwa-spatial-stage-actions
  .qwa-spatial-ar-btn:hover{
    transform:
      translateY(
        -1px
      );
  }


  .qwa-spatial-stage-actions
  .qwa-spatial-media-toggle:hover
  .qwa-spatial-media-toggle__icon,

  .qwa-spatial-stage-actions
  .qwa-spatial-ar-btn:hover
  .qwa-spatial-ar-btn__icon{
    box-shadow:
      0
      10px
      24px
      rgba(
        20,
        20,
        20,
        .15
      );
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-stage-actions{
    top:
      9px;

    right:
      9px;

    width:
      44px;

    gap:
      9px;
  }


  .qwa-spatial-stage-actions
  .qwa-spatial-media-toggle,

  .qwa-spatial-stage-actions
  .qwa-spatial-ar-btn{
    width:
      44px;

    min-width:
      44px;

    min-height:
      49px;

    gap:
      3px;
  }


  .qwa-spatial-stage-actions
  .qwa-spatial-media-toggle__icon,

  .qwa-spatial-stage-actions
  .qwa-spatial-ar-btn__icon{
    width:
      36px;

    min-width:
      36px;

    height:
      36px;

    min-height:
      36px;

    flex-basis:
      36px;
  }


  .qwa-spatial-stage-actions
  .qwa-spatial-action-svg{
    width:
      17px;

    height:
      17px;
  }


  .qwa-spatial-stage-actions
  .qwa-spatial-media-toggle__label,

  .qwa-spatial-stage-actions
  .qwa-spatial-ar-btn__label{
    font-size:
      8px;
  }

}

/* =========================================================
   OVERLAY
========================================================= */

.qwa-spatial-ar-overlay{
  position:
    fixed;

  inset:
    0;

  z-index:
    520;

  display:
    grid;

  place-items:
    center;

  padding:
    18px;

  opacity:
    0;

  transition:
    opacity
    .22s
    ease;
}


.qwa-spatial-ar-overlay[hidden]{
  display:
    none !important;
}


.qwa-spatial-ar-overlay.is-open{
  opacity:
    1;
}


.qwa-spatial-ar-overlay__backdrop{
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      18,
      18,
      18,
      .32
    );

  backdrop-filter:
    blur(
      12px
    );

  -webkit-backdrop-filter:
    blur(
      12px
    );
}


/* =========================================================
   TARJETA
========================================================= */

.qwa-spatial-ar-card{
  position:
    relative;

  z-index:
    2;

  width:
    min(
      390px,
      100%
    );

  display:
    grid;

  justify-items:
    stretch;

  gap:
    12px;

  padding:
    24px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .08
    );

  border-radius:
    28px;

  background:
    rgba(
      255,
      255,
      255,
      .97
    );

  color:
    #181818;

  box-shadow:
    0
    30px
    90px
    rgba(
      0,
      0,
      0,
      .22
    );

  transform:
    translateY(
      10px
    )
    scale(
      .985
    );

  transition:
    transform
    .27s
    cubic-bezier(
      .22,
      1,
      .36,
      1
    );
}


.qwa-spatial-ar-overlay.is-open
.qwa-spatial-ar-card{
  transform:
    translateY(
      0
    )
    scale(
      1
    );
}


.qwa-spatial-ar-card__handle{
  display:
    none;
}


.qwa-spatial-ar-card__badge{
  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    14px;

  background:
    #181818;

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    950;

  letter-spacing:
    .03em;
}


/* =========================================================
   GUÍA AR · JERARQUÍA
========================================================= */

.qwa-spatial-ar-card h2{
  margin:
    2px
    44px
    0
    0;

  color:
    #181818;

  font-size:
    22px;

  line-height:
    1.04;

  font-weight:
    900;

  letter-spacing:
    -.04em;
}


/* =========================================================
   CONTENIDO DE GUÍA
========================================================= */

.qwa-spatial-ar-card__guide{
  min-width:
    0;

  display:
    grid;

  gap:
    14px;
}

/* =========================================================
   GUÍA AR · GIFS REALES QWEBAR
   ---------------------------------------------------------
   ar_burguer_002.gif:
   demostración principal.

   guiar_003.gif:
   movimiento del dispositivo dentro del paso 2.
========================================================= */


/* =========================================================
   DEMOSTRACIÓN PRINCIPAL
========================================================= */

.qwa-spatial-ar-guide__hero{
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      rgba(
        245,
        245,
        242,
        .94
      ),
      rgba(
        238,
        238,
        234,
        .86
      )
    );
}


.qwa-spatial-ar-guide__hero-media{
  width:
    100%;

  height:
    82px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    5px;

  overflow:
    hidden;
}


/* =========================================================
   GIF BASE
========================================================= */

.qwa-spatial-ar-guide__gif{
  display:
    block;

  max-width:
    100%;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;

  pointer-events:
    none;
}


/* =========================================================
   GIF PRINCIPAL
========================================================= */

.qwa-spatial-ar-guide__gif--hero{
  width:
    auto;

  max-width:
    68%;

  height:
    auto;

  max-height:
    72px;

  object-fit:
    contain;

  object-position:
    center;

  margin:
    0 auto;
}


/* =========================================================
   GIF DEL PASO 2
========================================================= */

.qwa-spatial-ar-guide__motion-media{
  width:
    100%;

  height:
    92px;

  margin-top:
    4px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    11px;

  background:
    #ffffff;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .05
    );
}


.qwa-spatial-ar-guide__gif--motion{
  width:
    130%;

  max-width:
    none;

  height:
    130%;

  object-fit:
    contain;

  object-position:
    center;

  transform:
    scale(
      1.14
    );

  transform-origin:
    center;
}


/* =========================================================
   PASO 2
   ---------------------------------------------------------
   Le damos un poco más de espacio porque contiene
   la demostración del movimiento.
========================================================= */

.qwa-spatial-ar-guide__step--motion{
  align-items:
    start;
}


/* =========================================================
   TARJETA · SEGURIDAD DE ALTURA
   ---------------------------------------------------------
   Ahora la guía contiene más información.

   Nunca debe salirse físicamente de la pantalla.
========================================================= */

.qwa-spatial-ar-card{
  max-height:
    calc(
      100dvh -
      28px
    );

  overflow-x:
    hidden;

  overflow-y:
    hidden;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;
}


/* =========================================================
   BOTÓN AR SIEMPRE LOCALIZABLE
========================================================= */

.qwa-spatial-ar-card__launch{
  position:
    static;

  z-index:
    6;

  box-shadow:
    0
    -8px
    22px
    rgba(
      255,
      255,
      255,
      .92
    ),
    0
    8px
    20px
    rgba(
      20,
      20,
      20,
      .12
    );
}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-ar-card{
    max-height:
      calc(
        100dvh -
        max(
          8px,
          env(
            safe-area-inset-top,
            0px
          )
        )
      );

    overflow-y:
      auto;
  }


  /*
    El GIF principal debe ayudar,
    no comerse media pantalla.
  */

  .qwa-spatial-ar-guide__hero-media{
    height:
      118px;
  }


  .qwa-spatial-ar-guide__gif--motion{
    height:
      66px;
  }


  .qwa-spatial-ar-guide__motion-media{
    margin-top:
      5px;

    padding:
      5px;
  }

}


/* =========================================================
   MÓVILES BAJOS
========================================================= */

@media
(max-width:759px)
and
(max-height:700px){

  .qwa-spatial-ar-guide__hero-media{
    height:
      96px;
  }


  .qwa-spatial-ar-guide__gif--motion{
    height:
      54px;
  }

}

.qwa-spatial-ar-guide__intro{
  margin:
    0;

  color:
    rgba(
      23,
      23,
      23,
      .60
    );

  font-size:
    12.5px;

  line-height:
    1.42;

  font-weight:
    600;
}


/* =========================================================
   PASOS
========================================================= */

.qwa-spatial-ar-guide__steps{
  list-style:
    none;

  display:
    grid;

  gap:
    8px;

  margin:
    0;

  padding:
    0;
}


.qwa-spatial-ar-guide__step{
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    11px;

  min-height:
    58px;

  padding:
    9px
    11px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );

  border-radius:
    17px;

  background:
    rgba(
      246,
      246,
      243,
      .82
    );
}


.qwa-spatial-ar-guide__number{
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    #181818;

  color:
    #ffffff;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    900;
}


.qwa-spatial-ar-guide__copy{
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.qwa-spatial-ar-guide__copy strong{
  display:
    block;

  color:
    rgba(
      23,
      23,
      23,
      .88
    );

  font-size:
    12px;

  line-height:
    1.12;

  font-weight:
    850;
}


.qwa-spatial-ar-guide__copy > span{
  display:
    block;

  color:
    rgba(
      23,
      23,
      23,
      .56
    );

  font-size:
    10.5px;

  line-height:
    1.32;

  font-weight:
    600;
}


/* =========================================================
   CONSEJO
========================================================= */

.qwa-spatial-ar-guide__tip{
  display:
    grid;

  grid-template-columns:
    24px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    8px;

  padding:
    9px
    11px;

  border-radius:
    14px;

  background:
    rgba(
      23,
      23,
      23,
      .045
    );

  color:
    rgba(
      23,
      23,
      23,
      .58
    );

  font-size:
    10.5px;

  line-height:
    1.32;

  font-weight:
    650;
}


.qwa-spatial-ar-guide__tip-icon{
  width:
    24px;

  height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    rgba(
      255,
      255,
      255,
      .82
    );

  color:
    #181818;

  font-size:
    11px;
}


/* =========================================================
   GUÍA AR · JERARQUÍA
========================================================= */

.qwa-spatial-ar-card h2{
  margin:
    2px
    44px
    0
    0;

  color:
    #181818;

  font-size:
    22px;

  line-height:
    1.04;

  font-weight:
    900;

  letter-spacing:
    -.04em;
}


/* =========================================================
   CONTENIDO DE GUÍA
========================================================= */

.qwa-spatial-ar-card__guide{
  min-width:
    0;

  display:
    grid;

  gap:
    14px;
}


.qwa-spatial-ar-guide__intro{
  margin:
    0;

  color:
    rgba(
      23,
      23,
      23,
      .60
    );

  font-size:
    12.5px;

  line-height:
    1.42;

  font-weight:
    600;
}


/* =========================================================
   HERO GIF
========================================================= */

.qwa-spatial-ar-guide__hero{
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      rgba(
        245,
        245,
        242,
        .96
      ),
      rgba(
        238,
        238,
        234,
        .88
      )
    );
}


.qwa-spatial-ar-guide__hero-media{
  width:
    100%;

  height:
    170px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;
}


.qwa-spatial-ar-guide__gif{
  display:
    block;

  max-width:
    100%;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;

  pointer-events:
    none;
}


.qwa-spatial-ar-guide__gif--hero{
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center
    center;
}


/* =========================================================
   PASOS
========================================================= */

.qwa-spatial-ar-guide__steps{
  list-style:
    none;

  display:
    grid;

  gap:
    8px;

  margin:
    0;

  padding:
    0;
}


.qwa-spatial-ar-guide__step{
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    11px;

  min-height:
    58px;

  padding:
    9px
    11px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );

  border-radius:
    17px;

  background:
    rgba(
      246,
      246,
      243,
      .82
    );
}


.qwa-spatial-ar-guide__step--motion{
  align-items:
    start;
}


.qwa-spatial-ar-guide__number{
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    #181818;

  color:
    #ffffff;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    900;
}


.qwa-spatial-ar-guide__copy{
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.qwa-spatial-ar-guide__copy strong{
  display:
    block;

  color:
    rgba(
      23,
      23,
      23,
      .88
    );

  font-size:
    12px;

  line-height:
    1.12;

  font-weight:
    850;
}


.qwa-spatial-ar-guide__copy > span{
  display:
    block;

  color:
    rgba(
      23,
      23,
      23,
      .56
    );

  font-size:
    10.5px;

  line-height:
    1.32;

  font-weight:
    600;
}


/* =========================================================
   GIF PASO 2
========================================================= */

.qwa-spatial-ar-guide__motion-media{
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  place-items:
    center;

  margin-top:
    8px;

  padding:
    8px;

  overflow:
    hidden;

  border-radius:
    12px;

  background:
    rgba(
      255,
      255,
      255,
      .88
    );

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .055
    );
}


.qwa-spatial-ar-guide__gif--motion{
  width:
    100%;

  max-width:
    240px;

  height:
    110px;

  object-fit:
    contain;

  object-position:
    center;
}


/* =========================================================
   CONSEJO
========================================================= */

.qwa-spatial-ar-guide__tip{
  display:
    grid;

  grid-template-columns:
    24px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    8px;

  padding:
    9px
    11px;

  border-radius:
    14px;

  background:
    rgba(
      23,
      23,
      23,
      .045
    );

  color:
    rgba(
      23,
      23,
      23,
      .58
    );

  font-size:
    10.5px;

  line-height:
    1.32;

  font-weight:
    650;
}


.qwa-spatial-ar-guide__tip-icon{
  width:
    24px;

  height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    rgba(
      255,
      255,
      255,
      .82
    );

  color:
    #181818;

  font-size:
    11px;
}


/* =========================================================
   ESTADO AR
========================================================= */

.qwa-spatial-ar-card__status{
  margin:
    0;

  padding:
    0
    2px;

  color:
    rgba(
      23,
      23,
      23,
      .56
    );

  font-size:
    11px;

  line-height:
    1.35;

  font-weight:
    650;
}


.qwa-spatial-ar-card__status:empty{
  display:
    none;
}


/* =========================================================
   TARJETA SCROLL + BOTÓN SIEMPRE LOCALIZABLE
========================================================= */

.qwa-spatial-ar-card{
  max-height:
    calc(
      100dvh -
      28px
    );

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;
}


.qwa-spatial-ar-card__launch{
  position:
    sticky;

  bottom:
    0;

  z-index:
    6;

  box-shadow:
    0
    -8px
    22px
    rgba(
      255,
      255,
      255,
      .92
    ),
    0
    8px
    20px
    rgba(
      20,
      20,
      20,
      .12
    );
}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-ar-card h2{
    font-size:
      20px;
  }


  .qwa-spatial-ar-card__guide{
    gap:
      11px;
  }


  .qwa-spatial-ar-guide__hero-media{
    height:
      82px;

    padding:
      5px;
  }


  .qwa-spatial-ar-guide__step{
    min-height:
      54px;

    grid-template-columns:
      31px
      minmax(
        0,
        1fr
      );

    gap:
      9px;

    padding:
      8px
      9px;

    border-radius:
      15px;
  }


  .qwa-spatial-ar-guide__number{
    width:
      31px;

    height:
      31px;
  }


  .qwa-spatial-ar-guide__motion-media{
    margin-top:
      6px;

    padding:
      6px;
  }


  .qwa-spatial-ar-guide__gif--motion{
    width:
      100%;

    max-width:
      220px;

    height:
      96px;
  }


  .qwa-spatial-ar-card{
    max-height:
      calc(
        100dvh -
        max(
          8px,
          env(
            safe-area-inset-top,
            0px
          )
        )
      );
  }

}


/* =========================================================
   MÓVILES BAJOS
========================================================= */

@media
(max-width:759px)
and
(max-height:700px){

  .qwa-spatial-ar-guide__hero-media{
    height:
      128px;
  }


  .qwa-spatial-ar-guide__gif--motion{
    height:
      84px;
  }

}

/* =========================================================
   ESTADO AR
========================================================= */

.qwa-spatial-ar-card__status{
  margin:
    0;

  padding:
    0
    2px;

  color:
    rgba(
      23,
      23,
      23,
      .56
    );

  font-size:
    11px;

  line-height:
    1.35;

  font-weight:
    650;
}


.qwa-spatial-ar-card__status:empty{
  display:
    none;
}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-ar-card h2{
    font-size:
      20px;
  }


  .qwa-spatial-ar-card__guide{
    gap:
      11px;
  }


  .qwa-spatial-ar-guide__step{
    min-height:
      54px;

    grid-template-columns:
      31px
      minmax(
        0,
        1fr
      );

    gap:
      9px;

    padding:
      8px
      9px;

    border-radius:
      15px;
  }


  .qwa-spatial-ar-guide__number{
    width:
      31px;

    height:
      31px;
  }

}


/* =========================================================
   LANZAR
========================================================= */

.qwa-spatial-ar-card__launch{
  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    100%;

  min-height:
    46px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    16px;

  border:
    0;

  border-radius:
    16px;

  background:
    #181818;

  color:
    #ffffff;

  font:
    inherit;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    900;

  cursor:
    pointer;

  touch-action:
    manipulation;

  transition:
    transform
      .12s
      ease,
    opacity
      .18s
      ease;
}


.qwa-spatial-ar-card__launch:active:not(
  :disabled
){
  transform:
    scale(
      .98
    );
}


.qwa-spatial-ar-card__launch:disabled{
  opacity:
    .36;

  cursor:
    default;
}


/* =========================================================
   BOTÓN SECUNDARIO
========================================================= */

.qwa-spatial-ar-card__secondary{
  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    100%;

  min-height:
    42px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .08
    );

  border-radius:
    15px;

  background:
    rgba(
      23,
      23,
      23,
      .045
    );

  color:
    rgba(
      23,
      23,
      23,
      .74
    );

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    850;

  cursor:
    pointer;
}


.qwa-spatial-ar-card__secondary[hidden]{
  display:
    none !important;
}


/* =========================================================
   CERRAR
========================================================= */

.qwa-spatial-ar-card__close{
  appearance:
    none;

  -webkit-appearance:
    none;

  position:
    absolute;

  top:
    12px;

  right:
    12px;

  width:
    36px;

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );

  border-radius:
    999px;

  background:
    rgba(
      23,
      23,
      23,
      .045
    );

  color:
    rgba(
      23,
      23,
      23,
      .70
    );

  font:
    inherit;

  font-size:
    22px;

  line-height:
    1;

  cursor:
    pointer;
}


body.qwa-spatial-ar-open{
  overflow:
    hidden;
}


/* =========================================================
   HOVER
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-ar-card__launch:hover:not(
    :disabled
  ){
    background:
      #000000;
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  
  .qwa-spatial-ar-overlay{
    place-items:
      end
      center;

    padding:
      0;
  }


  .qwa-spatial-ar-card{
    width:
      100%;

    max-width:
      none;

    padding:
      18px
      18px
      calc(
        18px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );

    border-left:
      0;

    border-right:
      0;

    border-bottom:
      0;

    border-radius:
      26px
      26px
      0
      0;

    transform:
      translateY(
        24px
      );
  }


  .qwa-spatial-ar-overlay.is-open
  .qwa-spatial-ar-card{
    transform:
      translateY(
        0
      );
  }


  .qwa-spatial-ar-card__handle{
    width:
      38px;

    height:
      4px;

    display:
      block;

    justify-self:
      center;

    margin:
      -6px
      0
      2px;

    border-radius:
      999px;

    background:
      rgba(
        23,
        23,
        23,
        .14
      );

    touch-action:
      none;

    user-select:
      none;

    -webkit-user-select:
      none;

    cursor:
      grab;
  }

  .qwa-spatial-ar-card.is-dragging-handle{
    transition:
      none;
  }


  .qwa-spatial-ar-card.is-dragging-handle
  .qwa-spatial-ar-card__handle{
    width:
      56px;

    height:
      24px;

    display:
      grid;

    place-items:
      center;

    justify-self:
      center;

    margin:
      -10px
      0
      -6px;

    border-radius:
      999px;

    background:
      transparent;

    touch-action:
      none;

    user-select:
      none;

    -webkit-user-select:
      none;

    cursor:
      grab;
  }
  .qwa-spatial-ar-card__handle::before{
    content:
      "";

    width:
      38px;

    height:
      4px;

    display:
      block;

    border-radius:
      999px;

    background:
      rgba(
        23,
        23,
        23,
        .14
      );

    pointer-events:
      none;
  }
}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .qwa-spatial-ar-overlay,
  .qwa-spatial-ar-card,
  .qwa-spatial-ar-btn{
    transition-duration:
      .01ms !important;
  }

}



/* =========================================================
   QWA SPATIAL · PASO 16J1
   ALÉRGENOS EN FICHA ACTIVA
========================================================= */

.qwa-spatial-info-allergens{
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin:
    2px
    0
    10px;

  min-height:
    0;
}


.qwa-spatial-info-allergens[hidden]{
  display:
    none !important;
}


.qwa-spatial-info-allergens__icon{
  display:
    block;

  width:
    27px;

  height:
    27px;

  flex:
    0 0 27px;

  object-fit:
    contain;

  user-select:
    none;

  -webkit-user-drag:
    none;
}


@media
(max-width:759px){

  .qwa-spatial-info-allergens{
    gap:
      5px;

    margin-bottom:
      8px;
  }


  .qwa-spatial-info-allergens__icon{
    width:
      24px;

    height:
      24px;

    flex-basis:
      24px;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16J2A
   GUÍA DE ALÉRGENOS
========================================================= */


/* =========================================================
   ICONOS DE LA FICHA · INTERACTIVOS
========================================================= */

.qwa-spatial-info-allergens__icon[
  role="button"
]{
  cursor:
    pointer;

  border-radius:
    8px;

  transition:
    transform
      .14s
      ease,
    background
      .16s
      ease,
    box-shadow
      .16s
      ease;
}


.qwa-spatial-info-allergens__icon[
  role="button"
]:active{
  transform:
    scale(
      .91
    );
}


.qwa-spatial-info-allergens__icon[
  role="button"
]:focus-visible{
  outline:
    2px solid
    rgba(
      23,
      23,
      23,
      .30
    );

  outline-offset:
    3px;
}


/* =========================================================
   OVERLAY
========================================================= */

.qwa-spatial-allergen-guide{
  position:
    fixed;

  inset:
    0;

  z-index:
    580;

  display:
    grid;

  place-items:
    center;

  padding:
    18px;

  opacity:
    0;

  transition:
    opacity
      .20s
      ease;
}


.qwa-spatial-allergen-guide[hidden]{
  display:
    none !important;
}


.qwa-spatial-allergen-guide.is-open{
  opacity:
    1;
}


.qwa-spatial-allergen-guide__backdrop{
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      18,
      18,
      18,
      .28
    );

  backdrop-filter:
    blur(
      10px
    );

  -webkit-backdrop-filter:
    blur(
      10px
    );
}


/* =========================================================
   TARJETA
========================================================= */

.qwa-spatial-allergen-guide__card{
  position:
    relative;

  z-index:
    2;

  width:
    min(
      520px,
      100%
    );

  display:
    grid;

  gap:
    15px;

  padding:
    22px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .08
    );

  border-radius:
    27px;

  background:
    rgba(
      255,
      255,
      255,
      .98
    );

  box-shadow:
    0
    28px
    80px
    rgba(
      0,
      0,
      0,
      .20
    );

  transform:
    translateY(
      8px
    )
    scale(
      .985
    );

  transition:
    transform
      .25s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      );
}


.qwa-spatial-allergen-guide.is-open
.qwa-spatial-allergen-guide__card{
  transform:
    translateY(
      0
    )
    scale(
      1
    );
}


.qwa-spatial-allergen-guide__handle{
  display:
    none;
}


/* =========================================================
   CABECERA
========================================================= */

.qwa-spatial-allergen-guide__header{
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    38px;

  align-items:
    start;

  gap:
    14px;
}


.qwa-spatial-allergen-guide__header h2{
  margin:
    0;

  color:
    #181818;

  font-size:
    22px;

  line-height:
    1.02;

  font-weight:
    900;

  letter-spacing:
    -.04em;
}


.qwa-spatial-allergen-guide__header p{
  margin:
    7px
    0
    0;

  max-width:
    390px;

  color:
    rgba(
      23,
      23,
      23,
      .56
    );

  font-size:
    11px;

  line-height:
    1.38;

  font-weight:
    600;
}


/* =========================================================
   CERRAR
========================================================= */

.qwa-spatial-allergen-guide__close{
  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    38px;

  height:
    38px;

  display:
    inline-grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .07
    );

  border-radius:
    50%;

  background:
    rgba(
      23,
      23,
      23,
      .045
    );

  color:
    rgba(
      23,
      23,
      23,
      .70
    );

  font:
    inherit;

  font-size:
    22px;

  line-height:
    1;

  cursor:
    pointer;
}


/* =========================================================
   GRID
========================================================= */

.qwa-spatial-allergen-guide__grid{
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;
}


/* =========================================================
   ELEMENTO
========================================================= */

.qwa-spatial-allergen-guide__item{
  min-width:
    0;

  min-height:
    50px;

  display:
    grid;

  grid-template-columns:
    36px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    9px;

  padding:
    6px
    9px;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .06
    );

  border-radius:
    14px;

  background:
    rgba(
      246,
      246,
      243,
      .78
    );

  transition:
    border-color
      .18s
      ease,
    background
      .18s
      ease,
    box-shadow
      .18s
      ease;
}


.qwa-spatial-allergen-guide__item.is-active{
  border-color:
    rgba(
      23,
      23,
      23,
      .22
    );

  background:
    #ffffff;

  box-shadow:
    0
    7px
    18px
    rgba(
      20,
      20,
      20,
      .08
    );
}


.qwa-spatial-allergen-guide__icon{
  width:
    34px;

  height:
    34px;

  display:
    block;

  object-fit:
    contain;

  user-select:
    none;

  -webkit-user-drag:
    none;
}


.qwa-spatial-allergen-guide__item span{
  min-width:
    0;

  color:
    rgba(
      23,
      23,
      23,
      .78
    );

  font-size:
    10.5px;

  line-height:
    1.17;

  font-weight:
    750;
}


/* =========================================================
   NOTA
========================================================= */

.qwa-spatial-allergen-guide__note{
  margin:
    0;

  padding:
    9px
    11px;

  border-radius:
    13px;

  background:
    rgba(
      23,
      23,
      23,
      .045
    );

  color:
    rgba(
      23,
      23,
      23,
      .55
    );

  font-size:
    9.5px;

  line-height:
    1.34;

  font-weight:
    600;
}


body.qwa-spatial-allergen-guide-open{
  overflow:
    hidden;
}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-allergen-guide{
    place-items:
      end
      center;

    padding:
      0;
  }


  .qwa-spatial-allergen-guide__card{
    width:
      100%;

    max-width:
      none;

    max-height:
      calc(
        100dvh -
        8px
      );

    gap:
      11px;

    padding:
      14px
      14px
      calc(
        14px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );

    overflow-y:
      auto;

    border-left:
      0;

    border-right:
      0;

    border-bottom:
      0;

    border-radius:
      25px
      25px
      0
      0;
  }


  .qwa-spatial-allergen-guide__handle{
    width:
      38px;

    height:
      4px;

    display:
      block;

    justify-self:
      center;

    margin:
      -4px
      0
      0;

    border-radius:
      999px;

    background:
      rgba(
        23,
        23,
        23,
        .14
      );
  }


  .qwa-spatial-allergen-guide__header{
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      34px;

    gap:
      10px;
  }


  .qwa-spatial-allergen-guide__header h2{
    font-size:
      20px;
  }


  .qwa-spatial-allergen-guide__header p{
    margin-top:
      5px;

    font-size:
      10px;
  }


  .qwa-spatial-allergen-guide__close{
    width:
      34px;

    height:
      34px;
  }


  .qwa-spatial-allergen-guide__grid{
    gap:
      6px;
  }


  .qwa-spatial-allergen-guide__item{
    grid-template-columns:
      31px
      minmax(
        0,
        1fr
      );

    min-height:
      44px;

    gap:
      7px;

    padding:
      5px
      7px;

    border-radius:
      12px;
  }


  .qwa-spatial-allergen-guide__icon{
    width:
      29px;

    height:
      29px;
  }


  .qwa-spatial-allergen-guide__item span{
    font-size:
      9px;
  }


  .qwa-spatial-allergen-guide__note{
    padding:
      7px
      9px;

    font-size:
      8.7px;
  }

}


/* =========================================================
   HOVER
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-info-allergens__icon[
    role="button"
  ]:hover{
    transform:
      translateY(
        -1px
      )
      scale(
        1.05
      );

    background:
      rgba(
        23,
        23,
        23,
        .035
      );

    box-shadow:
      0
      5px
      14px
      rgba(
        20,
        20,
        20,
        .07
      );
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16J2B
   EXPLORAR · FOTO + ALÉRGENOS + CANTIDAD
========================================================= */


/* =========================================================
   FICHA ENRIQUECIDA
========================================================= */

.qwa-spatial-explore__item--rich{
  height:
    76px;

  min-height:
    76px;

  display:
    grid;

  grid-template-columns:
    58px
    minmax(0,1fr)
    auto;

  grid-template-rows:
    auto
    auto;

  grid-template-areas:
    "photo copy price"
    "photo copy qty";

  column-gap:
    10px;

  row-gap:
    5px;

  padding:
    8px
    9px;
}


/* =========================================================
   CONTENIDO CENTRAL
========================================================= */

.qwa-spatial-explore__item--rich
.qwa-spatial-explore__item-copy{
  grid-area:
    copy;

  min-width:
    0;

  min-height:
    0;

  max-height:
    64px;

  align-self:
    center;

  display:
    grid;

  align-content:
    center;

  gap:
    2px;

  overflow:
    hidden;
}


/* =========================================================
   PRECIO
========================================================= */

.qwa-spatial-explore__item--rich
.qwa-spatial-explore__item-price{
  grid-area:
    price;

  justify-self:
    end;

  align-self:
    start;
}


/* =========================================================
   CUANDO NO HAY FOTO
========================================================= */

.qwa-spatial-explore__item--rich:not(
  .has-rich-photo
){
  grid-template-columns:
    minmax(0,1fr)
    auto;

  grid-template-areas:
    "copy price"
    "copy qty";
}


/* =========================================================
   FOTO
========================================================= */

.qwa-spatial-explore-rich__photo{
  grid-area:
    photo;

  width:
    58px;

  height:
    58px;

  align-self:
    center;

  display:
    block;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .055
    );

  border-radius:
    13px;

  background:
    rgba(
      23,
      23,
      23,
      .045
    );

  pointer-events:
    none;
}


.qwa-spatial-explore-rich__photo img{
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;
}


/* =========================================================
   ALÉRGENOS EN LA FICHA
========================================================= */

.qwa-spatial-explore-rich__allergens{
  width:
    100%;

  min-width:
    0;

  max-height:
    20px;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    nowrap;

  gap:
    3px;

  margin-top:
    1px;

  overflow:
    hidden;
}


.qwa-spatial-explore-rich__allergen{
  width:
    20px;

  height:
    20px;

  flex:
    0 0
    20px;

  display:
    inline-grid;

  place-items:
    center;

  padding:
    1px;

  border-radius:
    6px;

  background:
    rgba(
      255,
      255,
      255,
      .78
    );

  cursor:
    pointer;

  touch-action:
    manipulation;

  transition:
    transform
      .14s
      ease,
    background
      .14s
      ease;
}


.qwa-spatial-explore-rich__allergen img{
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;

  pointer-events:
    none;
}


.qwa-spatial-explore-rich__allergen:active{
  transform:
    scale(
      .90
    );
}


/* =========================================================
   − 0 +
========================================================= */

.qwa-spatial-explore-rich__qty{
  grid-area:
    qty;

  justify-self:
    end;

  align-self:
    end;

  height:
    29px;

  display:
    inline-grid;

  grid-template-columns:
    27px
    23px
    27px;

  align-items:
    center;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      20,
      20,
      20,
      .075
    );

  border-radius:
    999px;

  background:
    rgba(
      23,
      23,
      23,
      .045
    );

  color:
    rgba(
      23,
      23,
      23,
      .78
    );

  cursor:
    default;
}


.qwa-spatial-explore-rich__qty.has-quantity{
  background:
    rgba(
      255,
      255,
      255,
      .96
    );

  border-color:
    rgba(
      23,
      23,
      23,
      .15
    );
}


.qwa-spatial-explore-rich__qty-btn{
  width:
    27px;

  height:
    27px;

  display:
    inline-grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    rgba(
      23,
      23,
      23,
      .80
    );

  font-size:
    17px;

  line-height:
    1;

  font-weight:
    700;

  cursor:
    pointer;

  user-select:
    none;

  -webkit-user-select:
    none;

  touch-action:
    manipulation;

  transition:
    transform
      .12s
      ease,
    background
      .14s
      ease,
    opacity
      .14s
      ease;
}


.qwa-spatial-explore-rich__qty-btn:active{
  transform:
    scale(
      .88
    );
}


.qwa-spatial-explore-rich__qty-btn.is-disabled{
  opacity:
    .24;

  cursor:
    default;
}


.qwa-spatial-explore-rich__qty-number{
  min-width:
    0;

  display:
    block;

  text-align:
    center;

  color:
    #181818;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;

  user-select:
    none;

  -webkit-user-select:
    none;
}


/* =========================================================
   FILTROS DE ALÉRGENOS · ICONOS
========================================================= */

.qwa-spatial-food-filter-allergen{
  min-height:
    36px;

  display:
    inline-flex !important;

  align-items:
    center;

  gap:
    6px;

  padding-left:
    5px !important;
}


.qwa-spatial-food-filter-allergen__icon{
  width:
    26px;

  height:
    26px;

  flex:
    0 0
    26px;

  display:
    inline-grid;

  place-items:
    center;

  padding:
    3px;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      .96
    );

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(
      20,
      20,
      20,
      .055
    );

  pointer-events:
    none;
}


.qwa-spatial-food-filter-allergen__icon img{
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;
}


.qwa-spatial-food-filter-allergen__label{
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  pointer-events:
    none;
}


/* =========================================================
   HOVER DE ESCRITORIO
========================================================= */

@media
(hover:hover)
and
(pointer:fine){

  .qwa-spatial-explore-rich__allergen:hover{
    transform:
      translateY(
        -1px
      )
      scale(
        1.06
      );

    background:
      rgba(
        23,
        23,
        23,
        .055
      );
  }


  .qwa-spatial-explore-rich__qty-btn:not(
    .is-disabled
  ):hover{
    background:
      rgba(
        23,
        23,
        23,
        .075
      );
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media
(max-width:759px){

  .qwa-spatial-explore__item--rich{
    width:
      100%;

    height:
      82px;

    min-height:
      82px;

    max-height:
      82px;

    box-sizing:
      border-box;

    overflow:
      hidden;

    grid-template-columns:
      54px
      minmax(0,1fr)
      auto;

    grid-template-rows:
      minmax(0,1fr)
      27px;

    grid-template-areas:
      "photo copy price"
      "photo copy qty";

    column-gap:
      9px;

    row-gap:
      3px;

    padding:
      8px;
  }


  .qwa-spatial-explore__item--rich:not(
    .has-rich-photo
  ){
    grid-template-columns:
      minmax(0,1fr)
      auto;

    grid-template-areas:
      "copy price"
      "copy qty";
  }


  .qwa-spatial-explore-rich__photo{
    width:
      54px;

    height:
      54px;

    border-radius:
      12px;
  }


  .qwa-spatial-explore-rich__allergen{
    width:
      19px;

    height:
      19px;

    flex-basis:
      19px;
  }


  .qwa-spatial-explore-rich__qty{
    height:
      27px;

    grid-template-columns:
      25px
      21px
      25px;
  }


  .qwa-spatial-explore-rich__qty-btn{
    width:
      25px;

    height:
      25px;

    font-size:
      16px;
  }


  .qwa-spatial-explore-rich__qty-number{
    font-size:
      9.5px;
  }

}

/* =========================================================
   ESCRITORIO · FICHA ENRIQUECIDA
========================================================= */

@media
(min-width:760px){

  .qwa-spatial-explore__item--rich{
    height:
      92px;

    min-height:
      92px;

    max-height:
      92px;

    grid-template-columns:
      68px
      minmax(0,1fr)
      auto;

    grid-template-rows:
      minmax(0,1fr)
      32px;

    column-gap:
      13px;

    row-gap:
      4px;

    padding:
      10px
      11px;
  }


  .qwa-spatial-explore__item--rich:not(
    .has-rich-photo
  ){
    grid-template-columns:
      minmax(0,1fr)
      auto;
  }


  .qwa-spatial-explore-rich__photo{
    width:
      68px;

    height:
      68px;

    border-radius:
      15px;
  }


  .qwa-spatial-explore__item--rich
  .qwa-spatial-explore__item-copy{
    max-height:
      72px;

    gap:
      4px;
  }


  .qwa-spatial-explore__item--rich
  .qwa-spatial-explore__item-copy
  strong{
    font-size:
      14.5px;

    line-height:
      1.15;

    font-weight:
      850;
  }


  .qwa-spatial-explore__item--rich
  .qwa-spatial-explore__item-meta{
    font-size:
      10px;

    line-height:
      1.15;
  }


  .qwa-spatial-explore-rich__allergens{
    max-height:
      24px;

    gap:
      4px;
  }


  .qwa-spatial-explore-rich__allergen{
    width:
      23px;

    height:
      23px;

    flex-basis:
      23px;

    border-radius:
      7px;
  }


  .qwa-spatial-explore__item--rich
  .qwa-spatial-explore__item-price{
    padding:
      8px
      10px;

    font-size:
      11px;
  }


  .qwa-spatial-explore-rich__qty{
    height:
      32px;

    grid-template-columns:
      30px
      25px
      30px;
  }


  .qwa-spatial-explore-rich__qty-btn{
    width:
      30px;

    height:
      30px;

    font-size:
      17px;
  }


  .qwa-spatial-explore-rich__qty-number{
    font-size:
      10.5px;
  }

}

/* =========================================================
   QWA SPATIAL · PASO 16K1C
   SESIÓN PAUSADA / CERRADA
========================================================= */

.qwa-spatial-session-overlay{
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  background:
    rgba(
      20,
      20,
      20,
      .20
    );

  backdrop-filter:
    blur(
      12px
    );

  -webkit-backdrop-filter:
    blur(
      12px
    );
}


.qwa-spatial-session-overlay[hidden]{
  display:
    none !important;
}


.qwa-spatial-session-card{
  width:
    min(
      420px,
      100%
    );

  display:
    grid;

  justify-items:
    center;

  gap:
    14px;

  padding:
    28px;

  border-radius:
    28px;

  background:
    rgba(
      255,
      255,
      255,
      .96
    );

  border:
    1px solid
    rgba(
      23,
      23,
      23,
      .08
    );

  box-shadow:
    0
    24px
    70px
    rgba(
      20,
      20,
      20,
      .18
    );

  text-align:
    center;
}


.qwa-spatial-session-card h2{
  margin:
    0;

  color:
    #181818;

  font-size:
    clamp(
      24px,
      5vw,
      32px
    );

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -.04em;
}


.qwa-spatial-session-card p{
  max-width:
    320px;

  margin:
    0;

  color:
    rgba(
      23,
      23,
      23,
      .60
    );

  font-size:
    13px;

  line-height:
    1.45;

  font-weight:
    600;
}


.qwa-spatial-session-button{
  min-width:
    150px;

  min-height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    4px;

  padding:
    0
    18px;

  border:
    0;

  border-radius:
    999px;

  background:
    #181818;

  color:
    #ffffff;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    850;

  cursor:
    pointer;

  box-shadow:
    0
    8px
    20px
    rgba(
      20,
      20,
      20,
      .14
    );

  transition:
    transform .12s ease,
    opacity .15s ease;
}


.qwa-spatial-session-button:active{
  transform:
    scale(
      .97
    );
}


@media
(max-width:759px){

  .qwa-spatial-session-overlay{
    align-items:
      end;

    padding:
      10px
      10px
      calc(
        10px
        +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }


  .qwa-spatial-session-card{
    width:
      100%;

    padding:
      24px
      20px;

    border-radius:
      26px;
  }

}

/* =========================================================
   QWA SPATIAL · D5B · VALORACIÓN OPCIONAL
   ---------------------------------------------------------
   Estilos aislados del panel de estrellas.
   No modifica AR, Foto, Me gusta ni Mi selección.
========================================================= */

.qwa-spatial-rating {
  position: fixed;
  inset: 0;
  z-index: 650;

  display: grid;
  place-items: center;

  padding: 18px;
  pointer-events: auto;
}

.qwa-spatial-rating[hidden] {
  display: none !important;
}

.qwa-spatial-rating__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(11, 14, 20, .56);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.qwa-spatial-rating__card {
  position: relative;

  width: min(420px, 100%);
  min-width: 0;

  display: grid;
  justify-items: center;
  gap: 14px;

  padding: 30px 20px 22px;

  border: 1px solid rgba(10, 10, 10, .08);
  border-radius: 26px;

  background: #fffefa;
  color: #1a1a1a;

  box-shadow: 0 22px 70px rgba(0, 0, 0, .24);

  text-align: center;
  outline: none;
}

.qwa-spatial-rating__card h2 {
  margin: 0;
  padding-right: 20px;

  font-size: clamp(20px, 5vw, 25px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 850;
}

.qwa-spatial-rating__card p {
  margin: 0;
  max-width: 31ch;

  font-size: 13px;
  line-height: 1.5;

  color: #555;
}

.qwa-spatial-rating__close {
  position: absolute;
  top: 9px;
  right: 10px;

  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background: transparent;
  color: #4d4d4d;

  font-size: 27px;
  cursor: pointer;
}

.qwa-spatial-rating__stars {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(2px, 1.8vw, 9px);
}

.qwa-spatial-rating__stars button {
  appearance: none;

  min-width: 40px;
  min-height: 46px;

  padding: 0 2px;

  border: 0;
  background: transparent;

  color: #a6a6a6;

  font-size: clamp(34px, 9vw, 44px);
  line-height: 1;

  cursor: pointer;

  transition:
    transform .12s ease,
    color .12s ease;
}

.qwa-spatial-rating__stars button:hover:not(:disabled),
.qwa-spatial-rating__stars button.is-selected {
  color: #e2a625;
}

.qwa-spatial-rating__stars button:active:not(:disabled) {
  transform: scale(.93);
}

.qwa-spatial-rating__stars button:disabled {
  cursor: default;
}

.qwa-spatial-rating__feedback {
  min-height: 19px;
  font-weight: 750;
}

.qwa-spatial-rating__skip {
  padding: 11px 24px;

  border: 1px solid #dedbd3;
  border-radius: 999px;

  background: #f2f0eb;
  color: #262626;

  font: inherit;
  font-size: 13px;
  font-weight: 800;

  cursor: pointer;
}

.qwa-spatial-rating__close:focus-visible,
.qwa-spatial-rating__stars button:focus-visible,
.qwa-spatial-rating__skip:focus-visible {
  outline: 3px solid #337acc;
  outline-offset: 3px;
}

/* Móvil: panel inferior, con espacio para la zona segura. */
@media (max-width: 600px) {
  .qwa-spatial-rating {
    place-items: end center;
    padding: 0;
  }

  .qwa-spatial-rating__card {
    width: 100%;

    border-radius: 26px 26px 0 0;

    padding:
      30px
      16px
      calc(22px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   SPATIAL · LOADER DE IDENTIDAD · V3
   Pantalla completa · Proyecto protagonista · Orbital real
========================================================= */

.qwa-spatial-loader {
  --qwa-loader-bg: none;
  --qwa-loader-accent: #d5e5eb;
  --qwa-loader-ink: #ffffff;

  position: fixed;
  inset: 0;
  z-index: 620;

  display: grid;
  grid-template-rows: 1fr auto 1fr;
  place-items: center;

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;
  isolation: isolate;

  padding:
    env(safe-area-inset-top, 0px)
    18px
    env(safe-area-inset-bottom, 0px);

  background: #122331;

  opacity: 1;
  transition: opacity 520ms ease;
}

.qwa-spatial-loader[hidden],
.qwa-spatial-loader__logo[hidden] {
  display: none !important;
}

/* Fondo configurado para el proyecto */
.qwa-spatial-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: var(--qwa-loader-bg);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  animation: none;
}

/* Velo suave: no oculta la identidad del fondo */
.qwa-spatial-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    180deg,
    rgba(10, 21, 30, .48),
    rgba(10, 21, 30, .30) 45%,
    rgba(10, 21, 30, .68)
  );
  pointer-events: none;
}

/* SIN TARJETA: composición directamente sobre el fondo */
.qwa-spatial-loader__card {
  position: relative;
  z-index: 2;

  grid-row: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: min(460px, 100%);
  min-height: 0;

  gap: 14px;
  margin: 0;
  padding: 12px;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  color: var(--qwa-loader-ink);
  text-align: center;

  animation: qwaSpatialLoaderEnter 700ms ease-out both;
}

.qwa-spatial-loader__card::before,
.qwa-spatial-loader__card::after {
  content: none;
  display: none;
}

/* Esfera protagonista */
.qwa-spatial-loader__orbital {
  position: relative;

  width: clamp(210px, 29vmin, 270px);
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  margin: 0 auto 8px;
}

/* Tres planos orbitales reales */
.qwa-spatial-loader__orbits {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
  pointer-events: none;
}

.qwa-spatial-loader__orbit {
  transform-origin: 80px 80px;
  transform-box: view-box;
}

.qwa-spatial-loader__orbit ellipse {
  fill: none;

  stroke: var(--qwa-loader-accent);
  stroke-width: 1.45;

  opacity: .82;
}

.qwa-spatial-loader__orbit circle {
  fill: var(--qwa-loader-accent);
  stroke: none;
}

.qwa-spatial-loader__orbit--one {
  animation: qwaSpatialOrbitOne 6s linear infinite;
}

.qwa-spatial-loader__orbit--two {
  animation: qwaSpatialOrbitTwo 8s linear infinite;
}

.qwa-spatial-loader__orbit--three {
  animation: qwaSpatialOrbitThree 10s linear infinite;
}

.qwa-spatial-loader__orbit--two ellipse {
  opacity: .58;
}

.qwa-spatial-loader__orbit--three ellipse {
  opacity: .40;
}

/* Núcleo central de la esfera */
.qwa-spatial-loader__core {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: 57%;
  aspect-ratio: 1;

  overflow: hidden;
  border-radius: 50%;

  background: #fffdf8;
  border: 1px solid rgba(60, 55, 40, .08);

  box-shadow:
    0 10px 28px rgba(38, 40, 32, .10),
    0 0 0 7px rgba(255, 253, 248, .25);
}

/* Logo auténtico: sin filtros ni recoloreado */
.qwa-spatial-loader__logo {
  display: block;

  width: 100%;
  height: 100%;

  padding: 3px;
  margin: 0;

  object-fit: contain;

  border-radius: 50%;
  background: transparent;
  box-shadow: none;

  animation: qwaSpatialLogoAppear 650ms ease-out both;
}

/* Respaldo cuando un proyecto no tenga logo */
.qwa-spatial-loader__fallback {
  display: none;

  color: var(--qwa-loader-accent);
  font-size: 54px;
  line-height: 1;
}

.qwa-spatial-loader__logo[hidden]
+ .qwa-spatial-loader__fallback {
  display: grid;
  place-items: center;
}

/* Nombre del proyecto: nunca una frase genérica */
#qwaSpatialLoaderTitle {
  display: block;

  max-width: 100%;
  margin: 0;

  color: var(--qwa-loader-ink);

  font-size: clamp(27px, 5vw, 38px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.045em;

  overflow-wrap: anywhere;
}

/* Mensaje secundario */
#qwaSpatialLoaderStatus {
  margin: 0;

  color: rgba(255, 255, 255, .88);

  font-size: 13px;
  line-height: 1.4;
  font-weight: 550;
}

/* Actividad sin porcentaje inventado */
.qwa-spatial-loader__progress {
  position: relative;

  width: min(210px, 70%);
  height: 3px;

  margin-top: 3px;

  overflow: hidden;
  border-radius: 999px;

  background: rgba(255, 255, 255, .28);
}

.qwa-spatial-loader__progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 35%;

  border-radius: inherit;
  background: var(--qwa-loader-accent);

  animation: qwaSpatialLoaderSlide 1.5s ease-in-out infinite;
}

/* Qwebar: firma pequeña, fuera de la composición central */
.qwa-spatial-loader__brand {
  position: relative;
  z-index: 2;

  grid-row: 3;
  align-self: end;

  margin-bottom: 20px;

  color: rgba(255, 255, 255, .78);

  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .2em;

  text-align: center;
}

/* Movimiento de las órbitas */
@keyframes qwaSpatialOrbitOne {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes qwaSpatialOrbitTwo {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

@keyframes qwaSpatialOrbitThree {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes qwaSpatialLogoAppear {
  from { opacity: 0; transform: scale(.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes qwaSpatialLoaderEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes qwaSpatialLoaderBackground {
  from { transform: scale(1.015); }
  to   { transform: scale(1); }
}

@keyframes qwaSpatialLoaderSlide {
  from { transform: translateX(-110%); }
  to   { transform: translateX(290%); }
}

/* Pantallas bajas */
@media (max-height: 560px) {
  .qwa-spatial-loader__orbital {
    width: 155px;
    margin-bottom: 0;
  }

  .qwa-spatial-loader__card {
    gap: 7px;
  }

  #qwaSpatialLoaderTitle {
    font-size: 24px;
  }

  .qwa-spatial-loader__brand {
    margin-bottom: 6px;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .qwa-spatial-loader,
  .qwa-spatial-loader::before,
  .qwa-spatial-loader__card,
  .qwa-spatial-loader__logo,
  .qwa-spatial-loader__orbit,
  .qwa-spatial-loader__progress span {
    animation: none !important;
    transition: none !important;
  }
}


/* SPATIAL · Entrada fluida del fondo del proyecto */
.qwa-spatial-loader::before {
  opacity: 0;
  transition: opacity 700ms ease;
  animation: none;
}

.qwa-spatial-loader.qwa-spatial-loader--bg-ready::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .qwa-spatial-loader::before {
    transition: none;
  }
}



/* =========================================================
   SPATIAL · INFORMACIÓN DESPLEGABLE DEL VISOR
   Superior izquierda · Alineada con Foto
========================================================= */

.qwa-spatial-disclaimer[hidden] {
  display: none !important;
}

.qwa-spatial-stage__surface > .qwa-spatial-disclaimer {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 46;

  width: 38px;
  height: 38px;

  margin: 0;
  padding: 0;

  overflow: visible;
  pointer-events: auto;
}

/* Icono circular */
.qwa-spatial-disclaimer__trigger {
  list-style: none;

  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  margin: 0;
  padding: 0;

  border: 1px solid rgba(20, 20, 20, .10);
  border-radius: 50%;

  background: rgba(255, 255, 255, .96);
  color: #181818;

  box-shadow: 0 7px 18px rgba(20, 20, 20, .10);

  font-size: 21px;
  line-height: 1;

  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.qwa-spatial-disclaimer__trigger::-webkit-details-marker {
  display: none;
}

.qwa-spatial-disclaimer__trigger::marker {
  content: "";
}

.qwa-spatial-disclaimer__trigger:focus-visible {
  outline: 2px solid #607d56;
  outline-offset: 3px;
}

.qwa-spatial-disclaimer[open]
.qwa-spatial-disclaimer__trigger {
  background: #edf3e9;
  border-color: #9caf91;
  color: #3e5d35;
}

/* Panel: aparece debajo del icono, dentro del visor */
.qwa-spatial-disclaimer__panel {
  position: absolute;
  top: 48px;
  left: 0;

  width: min(300px, calc(100vw - 130px));

  padding: 13px 14px;

  border: 1px solid rgba(20, 20, 20, .12);
  border-radius: 15px;

  background: rgba(255, 253, 248, .98);
  color: #282b24;

  box-shadow: 0 12px 30px rgba(20, 25, 20, .14);

  text-align: left;
}

.qwa-spatial-disclaimer__panel strong {
  display: block;

  margin-bottom: 7px;

  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
}

.qwa-spatial-disclaimer__panel p {
  margin: 0;

  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 500;
}

/* Misma altura que los controles del visor en móvil */
@media (max-width: 759px) {
  .qwa-spatial-stage__surface > .qwa-spatial-disclaimer {
    top: 9px;
    left: 9px;

    width: 36px;
    height: 36px;
  }

  .qwa-spatial-disclaimer__trigger {
    width: 36px;
    height: 36px;
  }

  .qwa-spatial-disclaimer__panel {
    top: 46px;
  }
}


/* =========================================================
   SPATIAL · NOTA MEDIA
   Esquina inferior izquierda del visor
========================================================= */

.qwa-spatial-average-badge[hidden] {
  display: none !important;
}

.qwa-spatial-stage__surface > .qwa-spatial-average-badge {
  position: absolute;
  left: 16px;
  bottom: 76px;
  z-index: 36;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  width: max-content;
  max-width: calc(100% - 85px);
  box-sizing: border-box;

  margin: 0;
  padding: 5px 8px;

  border: 0;
  border-radius: 999px;

  background: rgba(255, 253, 248, .72);
  color: #454740;
  box-shadow: none;

  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;

  pointer-events: none;
  user-select: none;
}

.qwa-spatial-average-badge__star {
  color: #b9872d;
  font-size: 12px;
  line-height: 1;
}

.qwa-spatial-average-badge__separator {
  margin: 0 2px;
  opacity: .5;
}

.qwa-spatial-average-badge svg {
  flex: 0 0 14px;
}

@media (max-width: 759px) {
  .qwa-spatial-stage__surface > .qwa-spatial-average-badge {
    left: 10px;
    bottom: 10px;
    padding: 4px 7px;
    font-size: 10px;
  }
}


/* =========================================================
   SPATIAL · DISTINCIÓN DE FOTOGRAMETRÍA
   En la ficha informativa del elemento
========================================================= */

.qwa-spatial-photogrammetry[hidden] {
  display: none !important;
}

.qwa-spatial-info__meta {
  flex-wrap: wrap;
}

.qwa-spatial-info__meta > .qwa-spatial-photogrammetry {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;

  padding: 5px 8px;
  border-radius: 999px;

  background: rgba(181, 127, 36, .11);
  color: #8b611c;

  font-size: 9px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}


/* =========================================================
   SPATIAL · FOTOGRAMETRÍA · LEGIBILIDAD
   Ficha principal + resultados de Explorar
========================================================= */

/* FICHA PRINCIPAL: etiqueta claramente legible */
.qwa-spatial-info__meta {
  flex-wrap: wrap;
  row-gap: 7px;
}

.qwa-spatial-info__meta > .qwa-spatial-photogrammetry {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-height: 27px;
  padding: 6px 10px;

  border: 1px solid #d9b975;
  border-radius: 999px;

  background: #f5e9cc;
  color: #67420c;

  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.qwa-spatial-photogrammetry[hidden] {
  display: none !important;
}

/* EXPLORAR: estrella superpuesta en la miniatura */
.qwa-spatial-explore__item--rich {
  position: relative;
}

.qwa-spatial-explore__item--rich.has-rich-photo
> .qwa-spatial-explore-rich__photogrammetry {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 3;

  display: grid;
  place-items: center;

  width: 26px;
  height: 26px;

  border: 1px solid #d6ac55;
  border-radius: 50%;

  background: #fff7e5;
  color: #a66c09;

  box-shadow: 0 2px 7px rgba(38, 28, 12, .18);

  font-size: 19px;
  line-height: 1;
  font-weight: 900;

  pointer-events: none;
}

/* Si no existe miniatura, mantener la distinción en el texto. */
.qwa-spatial-explore__item-copy
> .qwa-spatial-explore-rich__photogrammetry {
  display: inline-block;
  justify-self: start;

  color: #a66c09;
  font-size: 18px;
  line-height: 1;
}


/* =========================================================
   SPATIAL · RECARGA MANUAL DEL MODELO 3D
========================================================= */

.qwa-spatial-model-retry[hidden] {
  display: none !important;
}

/* Botón centrado en el mensaje de error */
.qwa-spatial-stage__placeholder
.qwa-spatial-model-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  margin-top: 10px;
  padding: 10px 17px;

  border: 1px solid #8ba481;
  border-radius: 999px;

  background: #ffffff;
  color: #294b28;

  box-shadow: 0 5px 16px rgba(20, 35, 20, .12);

  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;

  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

/* La recarga también es accesible desde el panel informativo */
.qwa-spatial-disclaimer__panel
.qwa-spatial-model-retry--info {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 36px;
  margin-top: 12px;
  padding: 8px 10px;

  border: 1px solid #b5c6aa;
  border-radius: 10px;

  background: #edf3e9;
  color: #294b28;

  font: inherit;
  font-size: 11.5px;
  font-weight: 800;

  cursor: pointer;
  touch-action: manipulation;
}

.qwa-spatial-model-retry:focus-visible {
  outline: 2px solid #52794a;
  outline-offset: 3px;
}

.qwa-spatial-model-retry:disabled {
  opacity: .55;
  cursor: default;
}

/* Fotografía dentro de la ficha informativa */
.qwa-spatial-info__photo {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(23, 23, 23, .04);
}

.qwa-spatial-info__photo[hidden] {
  display: none !important;
}

.qwa-spatial-info__photo img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

@media (max-width: 759px) and (orientation: portrait) {
  .qwa-spatial-info__photo {
    display: none;
  }

  .qwa-spatial-info.is-full .qwa-spatial-info__photo {
    display: block;
  }
}

/* Ficha informativa completa en móvil vertical */
@media (max-width: 759px) and (orientation: portrait) {
  .qwa-spatial-info.is-full {
    position: fixed;
    z-index: 90;
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    left: 12px;

    width: auto;
    height: auto !important;
    max-height: none;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-content: start;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .qwa-spatial-info.is-full
  .qwa-spatial-info__handle {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

/* Foto ampliada desde la ficha lateral */
@media (min-width: 760px) {
  .qwa-spatial-info__photo img {
    cursor: zoom-in;
  }

  .qwa-spatial-info__photo img:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
}

.qwa-spatial-photo-dialog {
  position: fixed;
  inset: 0;
  margin: auto;

  width: min(92vw, 900px);
  max-width: 92vw;
  max-height: 88vh;
  padding: 20px;

  border: 0;
  border-radius: 20px;
  background: #fff;
  color: #171717;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
}

.qwa-spatial-photo-dialog::backdrop {
  background: rgba(0, 0, 0, .70);
}

.qwa-spatial-photo-dialog__close {
  display: block;
  margin: 0 0 12px auto;
  padding: 8px 14px;

  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 999px;
  background: #fff;
  color: #171717;
  cursor: pointer;
}

.qwa-spatial-photo-dialog img {
  display: block;
  width: 100%;
  max-height: calc(88vh - 72px);
  object-fit: contain;
}




/* La foto del elemento 3D se abre desde la ficha. */
#qwaSpatialMediaToggleBtn {
  display: none !important;
}



@media (max-width: 759px) and (orientation: portrait) {
  .qwa-spatial-info.is-full {
    background: #fffefa;
    isolation: isolate;
  }
}




@media (max-width: 759px) and (orientation: portrait) {
  .qwa-spatial-info.is-preview-full {
    position: fixed;
    z-index: 90;
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    left: 12px;
    width: auto;
    height: auto !important;
    max-height: none;
    overflow: hidden !important;
    align-content: start;
    background: #fffefa;
    isolation: isolate;
  }

  .qwa-spatial-info.is-preview-full
  .qwa-spatial-info__photo {
    display: block;
  }
}


@media (max-width: 759px) and (orientation: portrait) {
  .qwa-spatial-info__photo {
    position: relative;
    perspective: 900px;
  }

  .qwa-spatial-info.is-full
  .qwa-spatial-info__photo img {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform-origin: center;
    transition: none;
    will-change: transform;
  }

  .qwa-spatial-info__photo.is-photo-interacting img {
    transition: none;
  }

  .qwa-spatial-info.is-preview-full
  .qwa-spatial-info__photo img {
    pointer-events: none;
  }

  .qwa-spatial-info__photo-motion {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    padding: 7px 10px;
    border: 1px solid rgba(20, 20, 20, .12);
    border-radius: 999px;
    background: #fffefa;
    color: #202020;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
  }

  .qwa-spatial-info__photo-motion[hidden] {
    display: none !important;
  }
}

/* Spatial: corazón arriba; AR en la esquina inferior del Stage. */
.qwa-spatial-stage-actions {
  bottom: 12px;
  pointer-events: none;
}

.qwa-spatial-stage-actions > button {
  pointer-events: auto;
}

#qwaSpatialArBtn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58px;
  min-width: 58px;
}

#qwaSpatialArBtn .qwa-spatial-ar-btn__icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  flex-basis: 44px;
}

#qwaSpatialArBtn .qwa-spatial-action-svg {
  width: 21px;
  height: 21px;
}

/* Spatial: visor de un único elemento. */
.qwa-spatial-root[data-spatial-mode="direct"]
.qwa-spatial-header__side--right,

.qwa-spatial-root[data-spatial-mode="direct"]
.qwa-spatial-position,

.qwa-spatial-root[data-spatial-mode="direct"]
.qwa-spatial-footer {
  display: none !important;
}

@media (max-width: 759px) and (orientation: portrait) {
  .qwa-spatial-root[data-spatial-mode="direct"]
  .qwa-spatial-info.is-full {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* Spatial · Noche · paleta salvia */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview {
  --qwa-night-surface: rgba(12, 12, 14, .78);
  --qwa-night-surface-soft: rgba(255, 255, 255, .08);
  --qwa-night-text: #f7f7f8;
  --qwa-night-muted: #d0d0d5;
  --qwa-night-line: rgba(255, 255, 255, .20);
  --qwa-night-control: rgba(18, 18, 21, .78);
  --qwa-night-control-hover: rgba(35, 35, 39, .94);
  --qwa-night-control-text: #f4f4f6;
}

/* Ficha y paneles */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-info,
  .qwa-spatial-explore__sheet,
  .qwa-spatial-selection__sheet,
  .qwa-spatial-lang__menu,
  .qwa-spatial-menu__panel
) {
  background: var(--qwa-night-surface) !important;
  color: var(--qwa-night-text) !important;
  border-color: var(--qwa-night-line) !important;

  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 12px 30px rgba(0, 0, 0, .20) !important;
}

/* Títulos */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-info__title-row h1,
  .qwa-spatial-explore__header h2,
  .qwa-spatial-explore__results-head h3,
  .qwa-spatial-explore__item-copy strong,
  .qwa-spatial-selection__title,
  .qwa-spatial-selection__item-name,
  .qwa-spatial-menu__title
) {
  color: var(--qwa-night-text) !important;
}

/* Textos secundarios */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-info__meta,
  .qwa-spatial-info__description,
  .qwa-spatial-explore__item-meta,
  .qwa-spatial-explore-search__empty,
  .qwa-spatial-selection__subtitle,
  .qwa-spatial-selection__category,
  .qwa-spatial-selection__empty,
  .qwa-spatial-menu__eyebrow
) {
  color: var(--qwa-night-muted) !important;
}

/* Tarjetas de resultados */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-explore__item,
  .qwa-spatial-selection__item
) {
  background: var(--qwa-night-surface-soft) !important;
  color: var(--qwa-night-text) !important;
  border-color: var(--qwa-night-line) !important;
}

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview .qwa-spatial-explore__item.is-active {
  border-color: #e3edcf !important;
}

/* Precios y contadores */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-info__price,
  .qwa-spatial-explore__item-price,
  .qwa-spatial-explore__count,
  .qwa-spatial-selection__item-price,
  .qwa-spatial-selection__summary-count,
  .qwa-spatial-position strong
) {
  background: var(--qwa-night-surface-soft) !important;
  color: var(--qwa-night-text) !important;
}

/* Controles claros de Spatial */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-footer__placeholder,
  .qwa-spatial-header__placeholder,
  .qwa-spatial-lang__button,
  .qwa-spatial-lang__item,
  .qwa-spatial-menu__button,
  .qwa-spatial-menu__item,
  .qwa-spatial-explore__close,
  .qwa-spatial-explore__chip,
  .qwa-spatial-food-filters__toggle,
  .qwa-spatial-selection__close,
  .qwa-spatial-selection__clear,
  .qwa-spatial-selection__qty-btn,
  .qwa-spatial-info-selection,
  .qwa-spatial-info-selection__quantity,
  .qwa-spatial-info-selection__button,
  .qwa-spatial-explore-rich__qty,
  .qwa-spatial-explore-rich__qty-btn,
  .qwa-spatial-info__photo-motion,
  .qwa-spatial-position button,
  .qwa-spatial-ar-btn__icon
) {
  background: var(--qwa-night-control) !important;
  color: var(--qwa-night-control-text) !important;
  border-color: #b7c3aa !important;
}

/* Texto dentro de controles claros */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-info-selection__label,
  .qwa-spatial-info-selection__count,
  .qwa-spatial-explore-rich__qty-number,
  .qwa-spatial-menu__item-icon,
  .qwa-spatial-menu__item-arrow
) {
  color: var(--qwa-night-control-text) !important;
}

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview
.qwa-spatial-info-selection.has-selection
.qwa-spatial-info-selection__count {
  background: var(--qwa-night-control) !important;
}

/* Categoría e idioma seleccionados */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-explore__chip.is-active,
  .qwa-spatial-lang__item.is-active
) {
  background: #edf3dc !important;
  color: #293528 !important;
  border-color: #edf3dc !important;
}

/* Buscador */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview .qwa-spatial-explore-search__box {
  background: var(--qwa-night-control) !important;
  border-color: #b7c3aa !important;
}

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-explore-search__input,
  .qwa-spatial-explore-search__icon,
  .qwa-spatial-explore-search__clear
) {
  color: var(--qwa-night-control-text) !important;
}

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview
.qwa-spatial-explore-search__input::placeholder {
  color: #52614c !important;
}

/* Tirador y fotografía */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview .qwa-spatial-info__handle {
  background: #c4ceba !important;
}

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview .qwa-spatial-info__photo {
  background: var(--qwa-night-surface-soft) !important;
}

/* Respuesta al ratón */

@media (hover: hover) and (pointer: fine) {
  html[data-qwa-spatial-appearance="dark"]
  body.qwa-spatial-preview :is(
    .qwa-spatial-info-selection__button,
    .qwa-spatial-selection__qty-btn,
    .qwa-spatial-explore-rich__qty-btn
  ):hover:not(:disabled) {
    background: var(--qwa-night-control-hover) !important;
  }
}

/* Spatial · Glass · detalles neutros */

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-footer__placeholder,
  .qwa-spatial-header__placeholder,
  .qwa-spatial-lang__button,
  .qwa-spatial-lang__item,
  .qwa-spatial-menu__button,
  .qwa-spatial-menu__item,
  .qwa-spatial-explore__close,
  .qwa-spatial-explore__chip,
  .qwa-spatial-food-filters__toggle,
  .qwa-spatial-selection__close,
  .qwa-spatial-selection__clear,
  .qwa-spatial-selection__qty-btn,
  .qwa-spatial-info-selection,
  .qwa-spatial-info-selection__quantity,
  .qwa-spatial-info-selection__button,
  .qwa-spatial-explore-rich__qty,
  .qwa-spatial-explore-rich__qty-btn,
  .qwa-spatial-info__photo-motion,
  .qwa-spatial-position button,
  .qwa-spatial-ar-btn__icon,
  .qwa-spatial-explore-search__box
) {
  border-color: var(--qwa-night-line) !important;
}

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview :is(
  .qwa-spatial-explore__chip.is-active,
  .qwa-spatial-lang__item.is-active
) {
  background: rgba(255, 255, 255, .92) !important;
  color: #18181b !important;
  border-color: rgba(255, 255, 255, .60) !important;
}

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview .qwa-spatial-explore__item.is-active {
  border-color: rgba(255, 255, 255, .65) !important;
}

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview .qwa-spatial-info__handle {
  background: rgba(255, 255, 255, .38) !important;
}

html[data-qwa-spatial-appearance="dark"]
body.qwa-spatial-preview
.qwa-spatial-explore-search__input::placeholder {
  color: #bcbcc5 !important;
}

/* Spatial · limitar el ancho de los carriles alimentarios */

body.qwa-spatial-preview #qwaSpatialFoodFilters {
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

body.qwa-spatial-preview
#qwaSpatialFoodFilters .qwa-spatial-food-filters__content {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

body.qwa-spatial-preview
#qwaSpatialFoodFilters .qwa-spatial-explore__chips {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

body.qwa-spatial-preview
#qwaSpatialFoodFilters .qwa-spatial-explore__chip {
  flex: 0 0 auto;
}


/* Spatial · filtros compactos, más espacio para las fichas */

body.qwa-spatial-preview
#qwaSpatialExplore .qwa-spatial-explore__body {
  gap: 8px;
  padding-top: 10px;
}

/* Contenedores de secciones y categorías */
body.qwa-spatial-preview
#qwaSpatialExplore
.qwa-spatial-explore__body >
.qwa-spatial-explore__block:not(
  .qwa-spatial-explore__block--results
) {
  padding: 7px 8px;
  gap: 4px;
  border-radius: 14px;
}

/* Encabezados de filtros, secciones y categorías */
body.qwa-spatial-preview
#qwaSpatialExplore
.qwa-spatial-explore__block:not(
  .qwa-spatial-explore__block--results
) h3 {
  font-size: 10px;
  line-height: 1.1;
}

/* Carriles horizontales */
body.qwa-spatial-preview
#qwaSpatialExplore .qwa-spatial-explore__chips {
  gap: 6px;
  padding-top: 2px;
  padding-bottom: 4px;
}

/* Botones de secciones, categorías y filtros */
body.qwa-spatial-preview
#qwaSpatialExplore .qwa-spatial-explore__chip {
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

/* Botón para desplegar filtros alimentarios */
body.qwa-spatial-preview
#qwaSpatialExplore .qwa-spatial-food-filters__toggle {
  min-height: 32px;
  padding: 0 10px;
  gap: 8px;
  border-radius: 11px;
  font-size: 11px;
}

/* Separación de los filtros desplegados */
body.qwa-spatial-preview
#qwaSpatialExplore .qwa-spatial-food-filters__content {
  padding-top: 7px;
}

/* Iconos de alérgenos */
body.qwa-spatial-preview
#qwaSpatialExplore .qwa-spatial-food-filter-allergen__icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}


/* SPATIAL · Descripción y etiqueta en la ficha móvil */
@media (max-width: 759px) and (orientation: portrait) {

  /* Ficha normal: hasta dos líneas de descripción. */
  .qwa-spatial-info:not(.is-collapsed)
  .qwa-spatial-info__description:not([hidden]) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    overflow: hidden;
    max-height: 3em;

    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  /* Ficha completa: descripción entera. */
  .qwa-spatial-info:is(.is-full, .is-preview-full)
  .qwa-spatial-info__description:not([hidden]) {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: none;
    overflow: visible;
  }

  /* Separar los metadatos de la zona de agarre. */
  .qwa-spatial-info__meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 8px;
    column-gap: 6px;
    row-gap: 7px;
  }

  /* Fotogrametría: primera etiqueta, a la izquierda. */
  .qwa-spatial-info__meta > .qwa-spatial-photogrammetry {
    order: -1;
    position: static;
    transform: none;
    margin: 0;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    justify-content: flex-start;
  }
}

/* SPATIAL · Consejos y recuperación de la carga */

#qwaSpatialLoader .qwa-spatial-loader__tip,
#qwaSpatialLoader .qwa-spatial-loader__recovery {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 12px 16px;

  color: #ffffff;
  background: rgba(8, 12, 16, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

#qwaSpatialLoader .qwa-spatial-loader__recovery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#qwaSpatialLoaderRecoveryText {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
}

#qwaSpatialLoader .qwa-spatial-loader__retry {
  appearance: none;
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 20px;

  border: 1px solid #ffffff;
  border-radius: 999px;
  background: #ffffff;
  color: #101820;

  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  cursor: pointer;
  touch-action: manipulation;
}

#qwaSpatialLoader .qwa-spatial-loader__retry:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

#qwaSpatialLoader .qwa-spatial-loader__retry:disabled {
  cursor: wait;
}

#qwaSpatialLoaderTip[hidden],
#qwaSpatialLoaderRecovery[hidden] {
  display: none !important;
}


/* SPATIAL · Indicación del gesto en la ficha móvil */

.qwa-spatial-info__handle-hint {
  display: none;
}

.qwa-spatial-info__handle-hint[hidden] {
  display: none !important;
}

@media (max-width: 759px) and (orientation: portrait) {

  .qwa-spatial-info .qwa-spatial-info__handle {
    width: min(180px, 100%);
    height: 28px;
    min-height: 28px;
    margin: 0 auto 2px;
  }

  .qwa-spatial-info.is-collapsed {
    min-height: 42px;
  }

  .qwa-spatial-info.is-collapsed
  .qwa-spatial-info__handle {
    margin: 0 auto;
  }

  /* Texto encima de la rayita. */
  .qwa-spatial-info__handle-hint:not([hidden]) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    padding: 0 4px;
    color: #353535;

    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    white-space: nowrap;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }

  html[data-qwa-spatial-appearance="dark"]
  .qwa-spatial-info__handle-hint {
    color: #ffffff;
  }

  /* Rayita fija debajo del texto. */
  .qwa-spatial-info .qwa-spatial-info__handle::before {
    top: 19px;
    animation: none;
  }

  /* Menos separación hasta los metadatos. */
  .qwa-spatial-info .qwa-spatial-info__meta {
    margin-top: 0;
  }

  /* El panel completo realiza el pequeño rebote. */
  .qwa-spatial-info:not(.is-full):not(.is-preview-full)
  :is(.qwa-spatial-info__handle) {
    animation: none;
  }

  .qwa-spatial-info:not(.is-full):not(.is-preview-full):not(.is-dragging-info):not(:active) {
    transform-origin: center bottom;
    animation: qwaSpatialPanelNudge 7s ease-in-out infinite;
  }
}

@keyframes qwaSpatialPanelNudge {
  0%, 12%, 24%, 100% {
    scale: 1 1;
  }

  6%, 18% {
    scale: 1 1.015;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qwa-spatial-info {
    animation: none !important;
  }
}