/* SHOWROOM 3D (#/showroom-3d): el recorrido ocupa toda la pantalla debajo de
   la cabecera. Sin pie y sin scroll. El "top" lo fija showroom3d.js midiendo
   la cabecera; el 64px es solo el valor de arranque. */

body.s3d-on{overflow:hidden}

.s3d{
  position:fixed;
  top:64px; left:0; right:0; bottom:0;
  z-index:1;               /* debajo del menu desplegable del celular */
  background:#0b0b0d;
}
.s3d iframe{display:block;width:100%;height:100%;border:0}

.s3dmsg{
  height:100%;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;color:#B4B4BA;
  font-family:"IBM Plex Sans",sans-serif;font-size:16px;
}

/* ---- Boton de WhatsApp arriba a la izquierda, encima del recorrido ----
   Copia la pieza de Ariel: pastilla negra con borde rojo, icono de WhatsApp
   en un circulo oscuro, separador, dos lineas de texto, rayas en diagonal y
   una flecha roja en un circulo. Tapa el logo de Matterport, asi que no
   achicarlo por debajo de lo que mide el logo. Va pegado a la esquina (3px)
   porque con mas margen la curva de la pastilla dejaba asomar el logo. */
.s3dwa{
  position:absolute; top:3px; left:3px; z-index:2;
  display:flex; align-items:center; gap:10px;
  height:54px; padding:0 7px 0 5px;
  border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg,#202024 0%,#0c0c0e 100%);
  border:2px solid #e11b22;
  box-shadow:0 0 0 1px rgba(0,0,0,.65),0 8px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  text-decoration:none; color:#fff;
  transition:box-shadow .2s ease;
}
.s3dwa:hover{box-shadow:0 0 0 1px rgba(0,0,0,.65),0 8px 22px rgba(0,0,0,.5),0 0 16px rgba(225,27,34,.5),inset 0 1px 0 rgba(255,255,255,.07)}

/* el circulo del icono */
.s3dwa-ico{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%,#26262b 0%,#0a0a0b 75%);
  box-shadow:inset 0 0 0 1.5px rgba(225,27,34,.6),0 0 10px rgba(225,27,34,.25);
}
.s3dwa-verde{
  width:29px; height:29px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#5fe384 0%,#25d366 55%,#1aa851 100%);
  color:#fff; box-shadow:0 0 8px rgba(37,211,102,.45);
}
.s3dwa-verde svg{width:20px; height:20px; display:block}

.s3dwa-sep{flex:none; width:1px; height:28px; background:#3a3a40}

/* las dos lineas */
.s3dwa-tx{display:flex; flex-direction:column; line-height:1.05; padding-right:34px; position:relative; z-index:1}
.s3dwa-tx b{font-family:"Days One",sans-serif; font-weight:400; font-size:16px; color:#fff; white-space:nowrap; letter-spacing:.1px}
.s3dwa-tx b em{font-style:normal; color:#e11b22}
.s3dwa-tx>span{font-family:"IBM Plex Sans",sans-serif; font-size:10.5px; letter-spacing:.3em; color:#bdbdc3; margin-top:5px; white-space:nowrap}

/* las dos rayas en diagonal, antes de la flecha */
.s3dwa::after{
  content:""; position:absolute; top:-12px; bottom:-12px; right:44px; width:28px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.07) 0 7px, transparent 7px 13px,
    #e11b22 13px 16px, transparent 16px);
  transform:skewX(-38deg); pointer-events:none;
}

/* la flecha */
.s3dwa-go{
  flex:none; width:34px; height:34px; border-radius:50%; margin-left:auto;
  display:flex; align-items:center; justify-content:center;
  background:#141417; box-shadow:inset 0 0 0 1px #2a2a2f;
  color:#e11b22; position:relative; z-index:1;
}
.s3dwa-go svg{width:17px; height:17px; transition:transform .2s ease}
.s3dwa:hover .s3dwa-go svg{transform:translateX(2px)}

/* celular: mas chico y sin "Respuesta rapida" */
@media (max-width:600px){
  .s3dwa{top:3px; left:3px; height:52px; gap:8px; padding:0 6px 0 5px}
  .s3dwa-ico{width:40px; height:40px}
  .s3dwa-verde{width:27px; height:27px}
  .s3dwa-verde svg{width:18px; height:18px}
  .s3dwa-sep{height:24px}
  .s3dwa-tx{padding-right:28px}
  .s3dwa-tx b{font-size:13px}
  .s3dwa-tx>span{display:none}
  .s3dwa::after{right:36px; width:22px}
  .s3dwa-go{width:30px; height:30px}
  .s3dwa-go svg{width:16px; height:16px}
}

/* ---- LASERITO abajo a la derecha, encima del recorrido ----
   Tapa el boton de los tres puntos de Matterport. Un globo oscuro con borde
   rojo (mismo estilo que el boton de arriba) y Laserito parado sobre un
   circulo oscuro que es lo que realmente cubre los tres puntos; la cabeza
   sobresale del circulo hacia arriba. */
.s3dlz{
  position:absolute; right:6px; bottom:6px; z-index:2;
  display:flex; align-items:flex-end; gap:0;
  text-decoration:none;
}
.s3dlz-globo{
  display:flex; flex-direction:column; justify-content:center;
  height:44px; margin-bottom:8px; margin-right:-14px; padding:0 24px 0 14px;
  border-radius:999px 0 0 999px;
  background:linear-gradient(180deg,#202024 0%,#0c0c0e 100%);
  border:2px solid #e11b22; border-right:0;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  line-height:1.1; white-space:nowrap;
}
.s3dlz-globo b{font-family:"Days One",sans-serif; font-weight:400; font-size:13px; color:#fff}
.s3dlz-globo b em{font-style:normal; color:#e11b22}
.s3dlz-globo>span{font-family:"IBM Plex Sans",sans-serif; font-size:10.5px; color:#bdbdc3; margin-top:3px; letter-spacing:.04em}
.s3dlz-av{
  position:relative; flex:none; width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#26262b 0%,#0a0a0b 75%);
  border:2px solid #e11b22;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.s3dlz-av img{
  position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:auto; height:96px; display:block;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
  transition:transform .2s ease;
}
.s3dlz:hover .s3dlz-av img{transform:translateX(-50%) translateY(-3px)}
.s3dlz:hover .s3dlz-av,.s3dlz:hover .s3dlz-globo{box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 14px rgba(225,27,34,.45)}

@media (max-width:600px){
  .s3dlz{right:4px; bottom:4px}
  .s3dlz-globo{height:38px; margin-bottom:7px; padding:0 20px 0 12px}
  .s3dlz-globo b{font-size:12px}
  .s3dlz-globo>span{display:none}
  .s3dlz-av{width:56px; height:56px}
  .s3dlz-av img{height:86px}
}

/* ---- Cortina de carga ----
   Mientras Matterport carga muestra su propio logo grande en el medio
   ("Powered by Matterport"). Esta cortina tapa todo el recorrido en ese
   momento, con Laserito y una barra de carga, y se desvanece sola cuando
   Matterport ya paso esa etapa (ver s3dCargo() en showroom3d.js). */
.s3dcar{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:24px; text-align:center;
  background:radial-gradient(ellipse at 50% 40%,#1c1c20 0%,#0b0b0d 70%);
  transition:opacity .6s ease, visibility .6s ease;
}
.s3dcar.fuera{opacity:0; visibility:hidden; pointer-events:none}
.s3dcar img{height:150px; width:auto; display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));
  animation:s3dflota 2.4s ease-in-out infinite}
@keyframes s3dflota{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.s3dcar h2{margin:6px 0 0; font-family:"Days One",sans-serif; font-weight:400; font-size:24px; line-height:1.2; color:#fff}
.s3dcar h2 em{font-style:normal; color:#e11b22}
.s3dcar-barra{width:min(320px,80vw); height:6px; border-radius:999px; background:#26262b; overflow:hidden;
  box-shadow:inset 0 0 0 1px #34343a}
.s3dcar-barra i{display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg,#a3141a,#e11b22 60%,#ff4a50);
  animation:s3dcarga 6s cubic-bezier(.2,.7,.3,1) forwards}
.s3dcar.listo .s3dcar-barra i{width:100%; animation:none; transition:width .35s ease}
@keyframes s3dcarga{from{width:0}to{width:92%}}
.s3dcar p{margin:0; font-family:"IBM Plex Sans",sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:#9a9aa1}
@media (max-width:600px){
  .s3dcar img{height:120px}
  .s3dcar h2{font-size:19px}
  .s3dcar p{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.s3dcar img{animation:none}}