/* ============================================================
   Base común de los showrooms
   ------------------------------------------------------------
   La comparten demo/ (Casa Campo) y torre-prisma/. Cada proyecto
   carga después su propia hoja, que solo añade lo que le es
   exclusivo y puede redefinir cualquier token.

   Antes esto estaba duplicado y cada corrección había que hacerla
   dos veces; tres arreglos de móvil se aplicaron a un proyecto y
   reaparecieron en el otro.
   ============================================================ */

:root {
  --tinta:     #1B211D;
  --tinta-2:   #47524B;
  --tenue:     #7C8A82;
  --papel:     #FFFFFF;
  --niebla:    rgba(255,255,255,.92);
  --linea:     rgba(27,33,29,.12);

  --verde:     #3F6B4F;
  --verde-cl:  #EAF1EC;
  --teja:      #B4553C;
  --teja-cl:   #FBEFEB;

  --ok:        #2E9E63;
  --sep:       #D9A02B;
  --no:        #C0554A;

  --r:   14px;
  --r-lg: 22px;
  --sombra:   0 4px 24px rgba(15,25,20,.14);
  --sombra-lg: 0 18px 60px rgba(15,25,20,.26);
  --ease: cubic-bezier(.22,.7,.24,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta); background: #0E1310;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Portada ---------- */
#portada {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; text-align: center;
  transition: opacity .8s var(--ease), visibility .8s;
}
/* pointer-events sin transición: visibility es discreta y seguiría
   capturando clics durante los .8s del fundido. */
#portada.fuera { opacity: 0; visibility: hidden; pointer-events: none; }
#portada .fondo { position: absolute; inset: 0; overflow: hidden; background: #0E1310; }
#portada .fondo video { width: 100%; height: 100%; object-fit: cover; display: block; }
#portada .fondo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 45%, rgba(10,16,12,.30), rgba(10,16,12,.68));
}
#portada .centro { position: relative; display: grid; justify-items: center; gap: 26px; padding: 24px; }
.cc-marca { display: grid; justify-items: center; gap: 10px; color: #fff; }
.cc-marca .simbolo { width: 76px; height: 76px; opacity: .96; }
.cc-marca .nombre {
  font-size: clamp(38px, 8vw, 76px); font-weight: 300; letter-spacing: .22em;
  text-transform: uppercase; text-shadow: 0 4px 30px rgba(0,0,0,.5);
  padding-left: .22em;
}
.cc-marca .bajada {
  font-size: clamp(10px, 1.5vw, 12.5px); letter-spacing: .48em; text-transform: uppercase;
  color: rgba(255,255,255,.82); padding-left: .48em;
}
.btn-entrar {
  border: 0; cursor: pointer; border-radius: 999px; padding: 16px 54px;
  background: var(--verde); color: #fff; font-size: 16px; font-weight: 500;
  box-shadow: 0 12px 34px rgba(23,50,33,.5);
  transition: transform .2s var(--ease), background .2s;
}
.btn-entrar:hover { transform: translateY(-2px); background: #34593F; }
#portada .credito {
  position: absolute; bottom: 26px; left: 0; right: 0;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
#portada .credito a { border-bottom: 1px solid rgba(255,255,255,.3); }

/* ---------- Intro (animación de entrada) ---------- */
/* Oculta va con visibility y pointer-events apagados: si solo se bajara la
   opacidad quedaría una pared invisible tapando toda la pantalla. */
#intro {
  position: fixed; inset: 0; z-index: 65; background: #05070A;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s var(--ease), visibility .5s;
}
#intro.visible { opacity: 1; visibility: visible; pointer-events: auto; }
#intro video { width: 100%; height: 100%; object-fit: cover; }
#intro .saltar {
  position: absolute; right: 22px; bottom: 22px;
  background: rgba(14,19,16,.55); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  padding: 11px 22px; font-size: 13.5px; cursor: pointer;
  transition: background .18s, border-color .18s;
}
#intro .saltar:hover { background: rgba(255,255,255,.95); color: var(--tinta); border-color: #fff; }

/* ---------- Chrome flotante ---------- */
.chrome { position: fixed; z-index: 40; }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--niebla); color: var(--tinta);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 11px 18px; font-size: 14px; font-weight: 500; cursor: pointer;
  box-shadow: var(--sombra); transition: transform .16s var(--ease), background .16s;
}
.pill:hover { transform: translateY(-1px); background: #fff; }
.pill svg { width: 17px; height: 17px; }
.pill.icono { padding: 11px; border-radius: 50%; }

#barra-sup { top: 18px; left: 18px; display: flex; gap: 10px; align-items: center; }
#marca-sup {
  top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 11px; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.6); pointer-events: none;
}
#marca-sup .simbolo { width: 26px; height: 26px; }
#marca-sup .txt { font-size: 14px; letter-spacing: .22em; text-transform: uppercase; font-weight: 300; }
body.panel-claro #marca-sup { color: var(--tinta); text-shadow: none; }

#acciones { top: 18px; right: 18px; display: flex; gap: 10px; }
#wsp {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 54px; height: 54px; border-radius: 50%; background: #25D366;
  display: grid; place-items: center; box-shadow: 0 8px 26px rgba(37,211,102,.45);
  transition: transform .18s var(--ease);
}
#wsp:hover { transform: scale(1.07); }
#wsp svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- Menú ---------- */
#menu {
  position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(310px, 84vw);
  background: var(--papel); box-shadow: var(--sombra-lg);
  transform: translateX(-102%); transition: transform .38s var(--ease);
  display: flex; flex-direction: column; padding: 22px 0;
}
#menu.abierto { transform: none; }
#menu .cab { display: flex; align-items: center; gap: 12px; padding: 4px 24px 22px; border-bottom: 1px solid var(--linea); }
#menu .cab .simbolo { width: 34px; height: 34px; color: var(--verde); }
#menu .cab b { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; }
#menu .cab span { display: block; font-size: 9.5px; letter-spacing: .3em; color: var(--tenue); text-transform: uppercase; }
#menu nav { padding: 14px 12px; display: grid; gap: 2px; overflow-y: auto; }
#menu nav button {
  display: flex; align-items: center; gap: 13px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 12px 14px; border-radius: 10px; font-size: 14.5px; color: var(--tinta-2);
  transition: background .15s, color .15s;
}
#menu nav button svg { width: 18px; height: 18px; flex: none; opacity: .7; }
#menu nav button:hover { background: var(--verde-cl); color: var(--tinta); }
#menu nav button.on { background: var(--verde); color: #fff; }
#menu nav button.on svg { opacity: 1; }
#menu .pie { margin-top: auto; padding: 18px 24px 4px; border-top: 1px solid var(--linea); font-size: 11px; color: var(--tenue); }
#menu .pie a { color: var(--verde); font-weight: 500; }
#velo {
  position: fixed; inset: 0; z-index: 49; background: rgba(12,18,14,.45);
  opacity: 0; visibility: hidden; transition: .3s var(--ease);
}
#velo.on { opacity: 1; visibility: visible; }

/* ---------- Vistas ---------- */
.vista { position: fixed; inset: 0; z-index: 10; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s; }
.vista.activa { opacity: 1; visibility: visible; }
/* Una vista oculta no debe recibir clics jamás. No basta con el visibility
   heredado: `.toma.on` lo revierte a visible en sus descendientes, y opacity 0
   no desactiva el hit-testing. Sin esto, la capa .marcas de una vista oculta
   se queda flotando encima y se come los clics de la vista que sí se ve. */
.vista:not(.activa) { pointer-events: none; }
.vista.scroll { overflow-y: auto; background: #F4F6F4; padding: 84px 0 40px; }
.lienzo { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 34px); }
.titulo { font-size: clamp(24px, 3.6vw, 38px); font-weight: 600; letter-spacing: -.02em; }
.sub { color: var(--tenue); font-size: 15px; margin-top: 6px; }
.cabecera { margin-bottom: 26px; }

/* ---------- Implantación ---------- */
#v-implantacion { background: #0E1310; }
.mapa { position: absolute; inset: 0; overflow: hidden; }

/* Tomas: fundido cruzado suave con un leve acercamiento */
.tomas { position: absolute; inset: 0; }
.toma {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; transform: scale(1.045);
  transition: opacity .9s var(--ease), transform 1.15s var(--ease), visibility .9s;
}
.toma.on { opacity: 1; visibility: visible; transform: scale(1); }
.toma > img { width: 100%; height: 100%; object-fit: cover; }
.marcas { position: absolute; inset: 0; }

/* Marcador de cada vivienda */
.marca {
  position: absolute; z-index: 5; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.95); color: var(--tinta);
  border: 0; border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; font-family: inherit; white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0,0,0,.34); cursor: pointer;
  transition: opacity .22s, box-shadow .18s, background .18s,
              transform .18s var(--ease);
}
.marca i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.marca:hover, .marca:focus-visible {
  transform: translate(-50%, -50%) scale(1.12); background: #fff; outline: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.42);
}
.marca.sel {
  background: var(--verde); color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.75), 0 6px 20px rgba(0,0,0,.4);
}
.marca.apagada { opacity: .2; pointer-events: none; }
.marca.oculta { display: none; }

/* Marcador de la zona social */
.marca.social { background: var(--teja); color: #fff; padding: 6px 14px; }
.marca.social:hover, .marca.social:focus-visible { background: #9E4632; color: #fff; }
.marca.social svg { width: 14px; height: 14px; flex: none; }

/* Flechas de navegación entre tomas */
.flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 8;
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
  background: rgba(14,19,16,.42); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.32);
  display: grid; place-items: center;
  transition: background .18s, border-color .18s, transform .18s var(--ease);
}
.flecha svg { width: 24px; height: 24px; }
.flecha:hover { background: rgba(255,255,255,.95); color: var(--tinta); border-color: #fff; }
.flecha.ant { left: 20px; }
.flecha.sig { right: 20px; }
.flecha.ant:hover { transform: translateY(-50%) translateX(-3px); }
.flecha.sig:hover { transform: translateY(-50%) translateX(3px); }

/* Indicador de toma actual */
.pasos {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 8;
  display: flex; gap: 8px; align-items: center;
}
.pasos button {
  width: 9px; height: 9px; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.45); border: 1px solid rgba(0,0,0,.18);
  transition: width .28s var(--ease), background .2s;
}
.pasos button.on { width: 30px; background: #fff; }
@media (max-width: 620px) {
  .pasos { bottom: 148px; }
  .flecha { width: 42px; height: 42px; }
  .flecha.ant { left: 10px; } .flecha.sig { right: 10px; }
  .marca { padding: 4px 10px; font-size: 11px; }
}

/* ---------- Editor de marcadores ---------- */
#editor {
  position: fixed; left: 18px; bottom: 18px; z-index: 47; width: min(330px, calc(100vw - 36px));
  background: var(--niebla); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--linea); border-radius: var(--r); padding: 16px 18px;
  box-shadow: var(--sombra-lg); display: none;
}
#editor.on { display: block; }
#editor .cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#editor .cab b { font-size: 14px; }
#editor .cab span { font-size: 11px; color: var(--tenue); }
#editor .ayuda { font-size: 11.5px; color: var(--tinta-2); line-height: 1.6; margin: 9px 0 13px; }
#editor kbd {
  display: inline-block; background: #fff; border: 1px solid var(--linea);
  border-bottom-width: 2px; border-radius: 5px; padding: 0 5px;
  font: 600 10.5px/1.6 ui-monospace, monospace; margin: 0 1px;
}
.fila-ed { display: flex; gap: 7px; flex-wrap: wrap; }
.btn-ed {
  flex: 1 1 auto; border: 1px solid var(--linea); background: #fff; cursor: pointer;
  border-radius: 9px; padding: 9px 12px; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: border-color .16s, color .16s, background .16s;
}
.btn-ed:hover { border-color: var(--verde); color: var(--verde); }
.btn-ed.cerrar { flex: 0 0 auto; }
.btn-ed.cerrar:hover { border-color: var(--no); color: var(--no); }
#editor .aviso { font-size: 11.5px; color: var(--ok); margin-top: 10px; display: none; }
#editor .aviso.on { display: block; }
body.editando .marca { cursor: grab; }
body.editando .marca.arrastrando { cursor: grabbing; z-index: 9; transform: translate(-50%,-50%) scale(1.14); }
body.editando .marca.oculta {
  display: inline-flex; opacity: .3;
  text-decoration: line-through; box-shadow: none;
}
body.editando .marca.apagada { opacity: 1; pointer-events: auto; }

#globo {
  position: fixed; z-index: 46; pointer-events: none;
  background: rgba(255,255,255,.97); border-radius: var(--r); padding: 12px 15px;
  box-shadow: var(--sombra-lg); min-width: 178px;
  opacity: 0; transform: translate(-50%, calc(-100% - 16px)) scale(.96);
  transition: opacity .16s, transform .16s var(--ease);
}
#globo.on { opacity: 1; transform: translate(-50%, calc(-100% - 16px)) scale(1); }
#globo b { font-size: 15px; }
#globo .est { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
#globo .dat { font-size: 12.5px; color: var(--tenue); margin-top: 7px; }
#globo .val { font-size: 14px; font-weight: 600; margin-top: 4px; }

/* Barra inferior de estado */
#panel-inf {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 42;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  background: var(--niebla); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--linea); border-radius: 999px; padding: 8px;
  box-shadow: var(--sombra-lg); max-width: calc(100vw - 32px);
}
.filtro {
  border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  padding: 9px 16px; font-size: 13.5px; color: var(--tinta-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s;
}
.filtro i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.filtro:hover { background: rgba(27,33,29,.06); }
.filtro.on { background: var(--verde); color: #fff; font-weight: 500; }
.filtro b { font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  /* En pantalla angosta la barra se partía en cuatro filas y, con el radio de
     999px, se volvía un círculo enorme encima del render. Una sola fila que
     se desplaza en horizontal ocupa una franja y ya. */
  #panel-inf {
    bottom: 76px; left: 12px; right: 12px; transform: none;
    max-width: none; border-radius: 14px; padding: 6px;
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none;
  }
  #panel-inf::-webkit-scrollbar { display: none; }
  .filtro { padding: 8px 12px; font-size: 12.5px; flex: 0 0 auto; }

}

/* ---------- Ficha lateral ---------- */
#ficha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 48; width: min(392px, 92vw);
  background: var(--papel); box-shadow: var(--sombra-lg);
  transform: translateX(104%); transition: transform .4s var(--ease);
  display: flex; flex-direction: column;
}
#ficha.abierta { transform: none; }
#ficha .foto { position: relative; height: 208px; flex: none; overflow: hidden; background: #DDE3DE; }
#ficha .foto img { width: 100%; height: 100%; object-fit: cover; }
#ficha .cerrar {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 0; cursor: pointer; font-size: 19px; line-height: 1;
  display: grid; place-items: center; box-shadow: var(--sombra);
}
#ficha .cuerpo { padding: 22px 24px; overflow-y: auto; flex: 1; }
#ficha h3 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
#ficha .tip { color: var(--tenue); font-size: 14px; margin-top: 2px; }
.chip-est {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.chip-est i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-disponible { background: #E6F6ED; color: #1F7A4C; }
.e-separado   { background: #FCF3DE; color: #946B10; }
.e-vendido    { background: #FBEAE8; color: #9E382E; }

#ficha dl { display: grid; grid-template-columns: 1fr auto; gap: 11px 16px; margin: 22px 0 6px; font-size: 14px; }
#ficha dt { color: var(--tenue); }
#ficha dd { font-weight: 600; text-align: right; }
#ficha .valor { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linea); }
#ficha .valor span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
#ficha .valor b { display: block; font-size: 27px; font-weight: 600; letter-spacing: -.02em; margin-top: 3px; }
#ficha .acciones { padding: 18px 24px 22px; border-top: 1px solid var(--linea); display: grid; gap: 9px; }
.btn {
  border: 1px solid var(--linea); background: #fff; cursor: pointer; border-radius: 11px;
  padding: 13px 18px; font-size: 14.5px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .16s, border-color .16s, transform .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); border-color: var(--verde); color: var(--verde); }
.btn svg { width: 17px; height: 17px; }
.btn-verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-verde:hover { background: #34593F; color: #fff; }
.btn-wsp { background: #25D366; border-color: #25D366; color: #fff; }
.btn-wsp:hover { background: #1FBA59; color: #fff; }

/* ---------- Tipologías ---------- */
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; }
.tipo {
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--linea); box-shadow: var(--sombra); display: flex; flex-direction: column;
}
.tipo .cab { padding: 20px 22px 0; }
.tipo .cab h3 { font-size: 21px; font-weight: 600; }
.tipo .cab p { color: var(--tenue); font-size: 13.5px; margin-top: 3px; }
.tipo .datos { padding: 16px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tipo .datos div span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.tipo .datos div b { font-size: 16px; font-weight: 600; }
.tipo .precio { margin-top: auto; padding: 16px 22px; border-top: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tipo .precio b { font-size: 18px; font-weight: 600; }
.tipo .precio em { font-style: normal; font-size: 11.5px; color: var(--tenue); display: block; }
.disponibles { font-size: 12.5px; color: var(--ok); font-weight: 600; }

.planta { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--linea); box-shadow: var(--sombra); overflow: hidden; margin-top: 22px; position: relative; }
.planta img { width: 100%; }
.punto {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid #fff;
  background: var(--verde); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.35);
  transition: transform .16s var(--ease);
}
.punto.con360 { background: var(--teja); }
.punto:hover { transform: translate(-50%,-50%) scale(1.22); }
.punto-tip {
  position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 18px));
  background: rgba(27,33,29,.95); color: #fff; border-radius: 10px; padding: 8px 13px;
  font-size: 12.5px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s;
}
.punto-tip.on { opacity: 1; }
.punto-tip em { font-style: normal; display: block; font-size: 11px; color: rgba(255,255,255,.6); }

/* ---------- Recorrido 360 ---------- */
#v-recorrido { background: #05070A; }
#psv { position: absolute; inset: 0; }
/* Puntos que saltan de un espacio a otro dentro de la panorámica.
   Van en una capa propia sobre el visor; su posición la calcula el JS
   proyectando las coordenadas esféricas a píxeles en cada movimiento. */
#saltos { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }

/* Los saltos van tumbados en el suelo y apuntando a su destino. El giro en Z
   lo calcula colocarSaltos() proyectando dos puntos del mismo rumbo: así el
   cheurón señala de verdad hacia donde lleva, no siempre al mismo lado. */
.salto360 {
  position: absolute; border: 0; background: none; padding: 0; font: inherit;
  cursor: pointer; pointer-events: auto; user-select: none; -webkit-user-select: none;
  transform-style: preserve-3d;
  --giro: 0deg;
  transform: translate(-50%, -50%) rotateX(68deg) rotate(var(--giro));
  transition: filter .18s var(--ease);
}
.salto360 i {
  display: block; width: 116px; height: 116px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
  animation: pisada 2.6s var(--ease) infinite;
}
.salto360 i svg { width: 100%; height: 100%; display: block; }
.salto360:hover i, .salto360:focus-visible i { filter: drop-shadow(0 6px 16px rgba(0,0,0,.7)); }
.salto360:hover i, .salto360:focus-visible i { animation: none; transform: scale(1.12); }
.salto360:focus-visible { outline: 0; }

/* El nombre se endereza: la etiqueta no debe quedar tumbada */
.salto360 span {
  position: absolute; left: 50%; top: 50%;
  transform-origin: center;
  transform: rotate(calc(var(--giro) * -1)) rotateX(-68deg) translate(-50%, -190%);
  background: rgba(14,19,16,.78); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600;
  white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.salto360:hover span, .salto360:focus-visible span { opacity: 1; }

@keyframes pisada {
  0%, 100% { transform: scale(1);    opacity: .92; }
  55%      { transform: scale(1.07); opacity: 1; }
}

/* Panel lateral, no barra inferior: el suelo del recorrido lo ocupan las
   flechas de navegación y cualquier ángulo que las asiente bien quedaba
   tapado por la barra. Mismo patrón que el selector de pisos de Torre Prisma. */
#ambientes {
  position: fixed; top: 50%; right: 18px; transform: translateY(-50%); z-index: 42;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--niebla); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 9px;
  box-shadow: var(--sombra-lg); max-height: calc(100vh - 190px); overflow-y: auto;
}
#ambientes button {
  border: 0; background: transparent; color: var(--tinta-2); cursor: pointer;
  border-radius: 11px; padding: 9px 15px; font-size: 13.5px; text-align: right;
  min-width: 148px; white-space: nowrap; transition: background .16s, color .16s;
}
#ambientes button:hover { background: var(--verde-cl); color: var(--tinta); }
#ambientes button.on { background: var(--verde); color: #fff; font-weight: 600; }

@media (max-width: 820px) {
  /* Apilado en filas y con radio grande, el panel se convertía en un bloque
     que tapaba medio recorrido. Una sola fila desplazable ocupa una franja. */
  #ambientes {
    top: auto; bottom: 76px; left: 12px; right: 12px; transform: none;
    flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;
    max-width: none; max-height: none; border-radius: 14px; padding: 6px;
    overflow-x: auto; scrollbar-width: none;
  }
  #ambientes::-webkit-scrollbar { display: none; }
  #ambientes button { min-width: 0; flex: 0 0 auto; padding: 8px 13px; font-size: 12.5px; text-align: center; }

  /* El cheurón, proporcionado a la pantalla */
  .salto360 i { width: 88px; height: 88px; }
}

/* ---------- Galería ---------- */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.galeria figure {
  position: relative; aspect-ratio: 3/2; border-radius: var(--r); overflow: hidden;
  cursor: pointer; background: #DDE3DE; width: 100%; min-width: 0; align-self: start;
  box-shadow: var(--sombra);
}
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.galeria figure:hover img { transform: scale(1.06); }
.galeria figcaption {
  position: absolute; inset: auto 0 0 0; padding: 24px 13px 11px; color: #fff; font-size: 13px; font-weight: 500;
  background: linear-gradient(transparent, rgba(10,16,12,.85)); opacity: 0; transition: opacity .22s;
}
.galeria figure:hover figcaption { opacity: 1; }

/* ---------- Comparador de acabados ---------- */
.acabados { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.comparador {
  position: relative; aspect-ratio: 3/2; border-radius: var(--r); overflow: hidden;
  background: #DDE3DE; box-shadow: var(--sombra); cursor: ew-resize;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.comparador:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.comparador img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}
/* La imagen B se recorta desde la posición del cursor hacia la derecha */
.comparador .b { clip-path: inset(0 0 0 var(--p, 50%)); }

.comparador .linea {
  position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 2px;
  background: rgba(255,255,255,.92); box-shadow: 0 0 12px rgba(0,0,0,.5);
  transform: translateX(-1px); pointer-events: none;
}
.comparador .tirador {
  position: absolute; top: 50%; left: var(--p, 50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.96); color: var(--tinta);
  box-shadow: 0 3px 14px rgba(0,0,0,.42); display: grid; place-items: center;
  pointer-events: none;
}
.comparador .tirador svg { width: 18px; height: 18px; }
.comparador .nombre {
  position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none;
  background: rgba(255,255,255,.94); color: var(--tinta);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 600;
}
.comparador .rotulo {
  position: absolute; bottom: 12px; z-index: 2; pointer-events: none;
  background: rgba(14,19,16,.72); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 5px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.comparador .rotulo.izq { left: 12px; }
.comparador .rotulo.der { right: 12px; }

#visor {
  position: fixed; inset: 0; z-index: 70; background: rgba(8,12,10,.95);
  display: grid; place-items: center; padding: 60px 20px;
  opacity: 0; visibility: hidden; transition: .28s var(--ease);
}
#visor.on { opacity: 1; visibility: visible; }
#visor img { max-height: calc(100vh - 130px); width: auto; border-radius: var(--r); }
#visor .pie { color: rgba(255,255,255,.8); text-align: center; margin-top: 12px; font-size: 14px; }
#visor button {
  position: absolute; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 24px;
  display: grid; place-items: center; transition: .16s;
}
#visor button:hover { background: #fff; color: var(--tinta); }
#visor .x { top: 20px; right: 20px; font-size: 22px; }
#visor .ant { left: 20px; top: 50%; transform: translateY(-50%); }
#visor .sig { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------- Financiación ---------- */
.conmutador {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px;
  background: #E7EBE8; border-radius: 999px; flex-wrap: wrap;
}
.conmutador button {
  border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  padding: 10px 22px; font-size: 14px; color: var(--tinta-2); white-space: nowrap;
  transition: background .16s, color .16s;
}
.conmutador button:hover { color: var(--tinta); }
.conmutador button.on { background: #fff; color: var(--verde); font-weight: 600; box-shadow: 0 1px 4px rgba(15,25,20,.14); }
.conmutador.chico button { padding: 8px 16px; font-size: 13px; }
.conmutador.chico { background: #EFF2F0; margin-bottom: 16px; }

/* Doble clase: .tarjeta se declara más abajo y si no, gana su relleno */
.fin-tabla.tarjeta { padding: 8px 24px 0; overflow: hidden; }
.fin-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; }
.fin-fila + .fin-fila { border-top: 1px solid var(--linea); }
.fin-fila span { font-size: 14.5px; color: var(--tinta-2); }
.fin-fila em { font-style: normal; display: block; font-size: 12px; color: var(--tenue); margin-top: 2px; }
.fin-fila b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-fila.resta b { color: var(--ok); }
.fin-fila.total { background: var(--verde-cl); margin-inline: -24px; padding: 18px 24px; }
.fin-fila.total span { color: var(--tinta); font-weight: 600; }
.fin-fila.total b { font-size: 22px; color: var(--verde); }

.fin-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
@media (max-width: 820px) { .fin-opciones { grid-template-columns: 1fr; } }
.fin-op { display: flex; flex-direction: column; }
.fin-cab .paso {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teja); margin-bottom: 8px;
}
.fin-cab h3 { font-size: 20px; font-weight: 600; }
.fin-cab p { font-size: 13.5px; color: var(--tenue); line-height: 1.6; margin: 6px 0 18px; }
.fin-cifra { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linea); }
.fin-cifra span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.fin-cifra b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fin-cifra em { font-style: normal; display: block; font-size: 13px; color: var(--tinta-2); margin-top: 7px; line-height: 1.6; }
.fin-ahorro {
  background: #E6F6ED; color: #1F7A4C; border-radius: 10px; padding: 11px 15px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 18px;
}

.fin-cta {
  margin-top: 22px; background: var(--verde); color: #fff;
  border-radius: var(--r-lg); padding: 32px 30px; text-align: center;
}
.fin-cta h3 { font-size: 24px; font-weight: 600; }
.fin-cta p { font-size: 14.5px; color: rgba(255,255,255,.82); margin: 8px auto 22px; max-width: 460px; }
.fin-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fin-botones .btn { min-width: 210px; color: var(--tinta); }
.fin-botones .btn-wsp { color: #fff; }
.fin-nota { font-size: 11.5px; color: var(--tenue); line-height: 1.65; margin-top: 18px; max-width: 640px; }

/* ---------- Avance de obra ---------- */
.acceso { max-width: 372px; margin: 6vh auto 0; background: #fff; border-radius: var(--r-lg); padding: 34px 30px; box-shadow: var(--sombra); text-align: center; }
.acceso .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--verde-cl); color: var(--verde); display: grid; place-items: center; margin: 0 auto 14px; }
.acceso .ico svg { width: 24px; height: 24px; }
.acceso h3 { font-size: 20px; font-weight: 600; }
.acceso p { color: var(--tenue); font-size: 13.5px; margin: 4px 0 20px; }
.acceso input { width: 100%; padding: 12px 15px; border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 10px; font-size: 14px; background: #FAFBFA; }
.acceso input:focus { outline: 0; border-color: var(--verde); background: #fff; }
.acceso .btn { width: 100%; }
.acceso .nota { font-size: 11.5px; color: var(--tenue); margin-top: 12px; }

.obra { display: none; gap: 18px; grid-template-columns: 1.25fr .75fr; align-items: start; }
.obra.on { display: grid; }
@media (max-width: 900px) { .obra.on { grid-template-columns: 1fr; } }
.tarjeta { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--linea); box-shadow: var(--sombra); padding: 22px 24px; }
.tarjeta h4 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.etapa + .etapa { margin-top: 15px; }
.etapa .fila { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; gap: 12px; }
.etapa .fila em { font-style: normal; color: var(--tenue); }
.etapa .fila b { color: var(--verde); font-variant-numeric: tabular-nums; }
.riel { height: 7px; border-radius: 99px; background: #E9EDEA; overflow: hidden; }
.riel i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--verde), #6FA07E); transition: width 1.1s var(--ease); }
.hitos { display: grid; }
.hito { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.hito:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 1px; background: var(--linea); }
.hito .pt { width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; display: grid; place-items: center; font-size: 9px; z-index: 1; }
.hito.hecho .pt { background: var(--verde); border-color: var(--verde); color: #fff; }
.hito.ahora .pt { background: var(--teja-cl); border-color: var(--teja); color: var(--teja); }
.hito h5 { font-size: 13.5px; font-weight: 600; }
.hito p { font-size: 12px; color: var(--tenue); }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .contacto { grid-template-columns: 1fr; } }
.form { display: grid; gap: 10px; }
.form input, .form textarea, .form select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--linea); border-radius: 11px;
  font-size: 14.5px; background: #fff;
}
.form textarea { min-height: 96px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 0; border-color: var(--verde); }
.form .ok { display: none; font-size: 13.5px; color: var(--ok); }
.form.enviado .ok { display: block; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Volver al sitio de Cedral ---------- */
/* Abajo a la izquierda: es la única esquina libre. El centro lo ocupan los
   filtros y la derecha el botón de WhatsApp. */
#ir-cedral {
  position: fixed; left: 20px; bottom: 22px; z-index: 44;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  padding: 7px 13px; border-radius: 9px;
  background: rgba(10,14,12,.36);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: color .16s;
}
#ir-cedral svg { width: 14px; height: 14px; }
#ir-cedral u { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
#ir-cedral:hover { color: #fff; }
/* Las vistas con fondo claro necesitan el texto oscuro */
body.panel-claro #ir-cedral { color: var(--tenue); text-shadow: none; }
/* En las vistas de fondo claro el texto solo ya contrasta: sobra el velo */
body.panel-claro #ir-cedral { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }

body.panel-claro #ir-cedral:hover { color: var(--tinta); }
/* Franja intermedia: la barra de filtros se parte en dos líneas y crece hacia
   la izquierda hasta rozar el enlace. Por debajo de 620px la barra ya sube
   sola y el enlace le queda por debajo, así que solo hace falta aquí. */
@media (min-width: 621px) and (max-width: 1023px) {
  #ir-cedral { bottom: 126px; }
}
@media (max-width: 620px) {
  #ir-cedral { left: 16px; bottom: 18px; font-size: 11px; letter-spacing: .06em; }
}

/* ---------- Modo editar: saltos ---------- */
body.editando .salto360 span { opacity: 1; }
/* El filtro va en el cheurón, nunca en el botón: sobre el botón aplana el
   contexto 3D y la etiqueta deja de poder ponerse de pie. */
body.editando .salto360 i { animation: none; outline: 2px dashed rgba(255,255,255,.75); outline-offset: 4px; border-radius: 50%; }
body.editando .salto360.sel i { filter: drop-shadow(0 0 10px var(--verde)) drop-shadow(0 0 3px var(--verde)); outline-color: var(--verde); }
body.editando .salto360.sel span { background: var(--verde); }
#ed-salto { display: none; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
#ed-salto.on { display: flex; }
#ed-salto select {
  flex: 1 1 130px; min-width: 0; padding: 7px 9px; font-size: 12px;
  border: 1px solid var(--linea); border-radius: 8px; background: #fff;
}
#ed-salto .giro { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; }
.btn-ed.peligro { color: #A6362B; border-color: rgba(166,54,43,.35); }
.btn-ed.peligro:hover { background: #FBEAE8; border-color: #A6362B; }
#ed-nuevo { display: none; }
body.editando.en-tour #ed-nuevo { display: inline-flex; }