/* Selector de plantas: el edificio en una ventana redondeada, las plantas, el carril y el panel. */
.escenario {
  position: relative;
  height: calc(100svh - 2 * var(--flotar));
  min-height: 680px;
  /* Ancho explícito (y no solo margen): al anclarla, ScrollTrigger mide el ancho sin el margen */
  width: calc(100% - 2 * var(--margen));
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-l);
  background: #C9D2D4;
  /* Al saltar aquí queda a la misma distancia del borde que la cabecera flotante */
  scroll-margin-top: calc(var(--flotar) - var(--alto-cabecera));
}
.escenario__lienzo { position: absolute; inset: 0; }
.escenario__svg { width: 100%; height: 100%; -webkit-user-select: none; user-select: none; }

/* Plantas sobre la foto: siguen el canto de los forjados; blanco al pasar, foco al elegir */
.planta {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  outline: none;
  transition: fill var(--d-media) var(--curva), stroke var(--d-media) var(--curva);
}
.planta:hover,
.planta.es-hover,
.planta:focus-visible { fill: rgba(255, 255, 255, 0.28); stroke: rgba(255, 255, 255, 0.95); }
.planta:focus-visible { stroke-width: 2.5; }
.planta.es-activa { fill: rgba(255, 255, 255, 0.2); stroke: var(--c-blanco); stroke-width: 2; }
.foco { fill: rgba(5, 14, 18, 0.58); pointer-events: none; opacity: 0; transition: opacity var(--d-lenta) var(--curva); }
.escenario.con-planta .foco { opacity: 1; }
.pista .planta { animation: destello 1.4s var(--curva) backwards; animation-delay: calc(var(--orden, 0) * 0.14s); }
@keyframes destello {
  40% { fill: rgba(255, 255, 255, 0.24); stroke: rgba(255, 255, 255, 0.8); }
}
/* En pantallas táctiles no hay «pasar el ratón»: las plantas se dibujan siempre con una línea fina */
@media (hover: none) {
  .planta { stroke: rgba(255, 255, 255, 0.6); }
  .escenario.con-planta .planta:not(.es-activa) { stroke: rgba(255, 255, 255, 0.18); }
}

/* Estilo Mairen, como la portada: el texto va directamente sobre la foto, sin tarjetas.
   Una sombra suave en los bordes deja leer el blanco sin tapar el edificio. */
.escenario__lienzo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 12, 14, 0.62) 0%, rgba(8, 12, 14, 0.38) 22%, rgba(8, 12, 14, 0.1) 36%, rgba(8, 12, 14, 0) 46%, rgba(8, 12, 14, 0) 62%, rgba(8, 12, 14, 0.18) 76%, rgba(8, 12, 14, 0.55) 100%),
    linear-gradient(180deg, rgba(8, 12, 14, 0.32) 0%, rgba(8, 12, 14, 0) 30%);
}
.escenario__cabeza,
.carril { text-shadow: 0 1px 22px rgba(8, 12, 14, 0.35); }

/* Entrada: título, frase y cuántas quedan, arriba a la izquierda */
.escenario__cabeza {
  position: absolute;
  top: 7.4rem;
  left: clamp(1.6rem, 1rem + 1.6vw, 2.8rem);
  z-index: 2;
  width: min(440px, calc(100% - 3.2rem));
  color: var(--c-blanco);
  transition: opacity var(--d-media), transform var(--d-media) var(--curva);
}
.escenario.con-planta .escenario__cabeza { opacity: 0; transform: translateX(-16px); pointer-events: none; }
.escenario__titulo { font-size: clamp(2.6rem, 1.4rem + 2.8vw, 4.4rem); line-height: 0.95; }
.escenario__linea { max-width: 30ch; margin-top: 1.2rem; color: rgba(255, 255, 255, 0.86); font-weight: 400; line-height: 1.55; }
.resumen { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 2rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.4); list-style: none; }
.resumen li { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
/* Cifras en la letra de los títulos: la de las cifras tiene trazos muy finos y sobre la foto no se leía */
.resumen__num { font-family: var(--f-titulo); font-size: 1.6rem; letter-spacing: 0; line-height: 1; }

/* Plantas: una lista de texto a la derecha; la elegida, subrayada como «Elige tu vivienda» en la portada */
.carril {
  position: absolute;
  top: 50%;
  right: clamp(1.6rem, 1rem + 1.6vw, 2.8rem);
  z-index: 2;
  display: grid;
  transform: translateY(-50%);
  color: var(--c-blanco);
}
.carril__planta {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
  min-width: 200px;
  padding: 0.95rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  background: none;
  color: inherit;
  text-align: right;
  cursor: pointer;
  transition: opacity 0.35s var(--curva);
}
.carril__planta:last-child { border-bottom: 0; }
.carril:hover .carril__planta:not(:hover):not(.es-hover):not([aria-pressed="true"]) { opacity: 0.62; }
.carril__planta:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.carril__nombre,
.carril__corto { font-family: var(--f-titulo); font-size: clamp(1.3rem, 1rem + 0.6vw, 1.6rem); line-height: 1.05; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: text-decoration-color 0.35s var(--curva); }
.carril__planta:hover .carril__nombre,
.carril__planta.es-hover .carril__nombre,
.carril__planta[aria-pressed="true"] .carril__nombre,
.carril__planta[aria-pressed="true"] .carril__corto { text-decoration-color: currentColor; }
.carril__corto { display: none; }
.carril__libres { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
/* Con una planta abierta, el carril se queda en la inicial de cada planta */
.escenario.con-planta .carril__planta { min-width: 0; padding: 0.7rem 0; border-bottom: 0; }
.escenario.con-planta .carril__nombre,
.escenario.con-planta .carril__libres { display: none; }
.escenario.con-planta .carril__corto { display: block; }

/* Etiqueta que sigue al ratón */
.etiqueta {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  padding: 0.75rem 1rem;
  border-radius: var(--r-s);
  background: rgba(8, 12, 14, 0.86);
  color: var(--c-blanco);
  white-space: nowrap;
  pointer-events: none;
}
.etiqueta b { display: block; font-family: var(--f-titulo); font-size: 1.05rem; font-weight: 400; line-height: 1.1; }
.etiqueta span { display: block; margin-top: 0.3rem; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }

/* Panel de planta y ficha */
.panel {
  position: absolute;
  top: 6.4rem;
  bottom: 1.4rem;
  left: 1.4rem;
  z-index: 5;
  width: clamp(400px, 32vw, 450px);
  padding: 1.4rem 1.6rem 1.8rem;
  /* Hoja blanca lisa, sin cristal */
  border-radius: var(--r-m);
  background: var(--c-blanco);
  box-shadow: 0 30px 80px rgba(8, 12, 14, 0.28);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateX(calc(-100% - 3rem));
  transition: transform var(--d-lenta) var(--curva), opacity var(--d-media);
}
.escenario.con-planta .panel { opacity: 1; transform: none; }
.panel__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  font-size: 0.66rem;
  font-weight: 500;
 
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-tinta-2);
  cursor: pointer;
}
.panel__volver svg { width: 15px; height: 15px; }
.panel__volver:hover { color: var(--c-tinta); }
.panel__titulo { margin-top: 0.6rem; font-size: clamp(1.8rem, 1.4rem + 1.1vw, 2.4rem); outline: none; }
.panel__meta { margin-top: 0.6rem; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tinta-2); }

.plano { margin: 1.3rem 0 0; padding: 0.9rem 0.9rem 0.6rem; border: 1px solid var(--c-linea); border-radius: var(--r-m); background: var(--c-blanco); }
.plano__svg { width: 100%; height: auto; overflow: visible; }
.plano__fondo { fill: #FBFBFA; }
.plano__vivienda { outline: none; transition: fill var(--d-media) var(--curva), opacity var(--d-media); }
/* Sin colores de estado: libre en blanco, reservada en gris claro y vendida algo más oscura (y lo dice en texto) */
.plano__vivienda--disponible { fill: rgba(255, 255, 255, 0); }
.plano__vivienda--reservada { fill: rgba(20, 17, 15, 0.06); }
.plano__vivienda--vendida { fill: rgba(20, 17, 15, 0.12); }
.plano__vivienda[role="button"] { cursor: pointer; }
.plano__vivienda[role="button"]:hover,
.plano__vivienda[role="button"]:focus-visible { fill: rgba(13, 40, 50, 0.16); }
.plano__vivienda[role="button"]:focus-visible { stroke: var(--c-mar-2); stroke-width: 4; }
.plano__vivienda.es-activa { fill: rgba(13, 40, 50, 0.3); }
.plano__vivienda.es-tenue { opacity: 0.45; }
.plano__exterior,
.plano__interior,
.plano__tabique,
.plano__division,
.plano__nucleo,
.plano__nucleo-texto,
.plano__contorno,
.plano__letra,
.plano__dato,
.plano__mar,
.plano__norte { pointer-events: none; }
.plano__rayado { stroke: rgba(14, 17, 19, 0.13); stroke-width: 1.6; }
.plano__interior { fill: none; stroke: var(--c-tinta); stroke-width: 2.6; }
.plano__tabique { stroke: var(--c-tinta); stroke-width: 1.4; }
.plano__division { stroke: rgba(14, 17, 19, 0.4); stroke-width: 1; stroke-dasharray: 4 4; }
.plano__nucleo { fill: #EDEDEA; stroke: rgba(14, 17, 19, 0.3); stroke-width: 1; }
.plano__nucleo-texto { font: 500 12px var(--f-texto); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--c-tinta-2); }
.plano__contorno { fill: none; stroke: var(--c-tinta); stroke-width: 1.2; }
.plano__letra { font: 400 40px var(--f-titulo); fill: var(--c-tinta); }
.plano__dato { font: 500 14px var(--f-texto); letter-spacing: 0.06em; fill: var(--c-tinta-2); }
.plano__mar { fill: none; stroke: var(--c-mar-2); stroke-width: 1.2; }
.plano__norte circle { fill: none; stroke: rgba(14, 17, 19, 0.3); }
.plano__norte path { fill: var(--c-tinta); }

.plano__dato--estado { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--c-tinta-3); }

.unidades { margin: 1.2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linea); }
.unidad {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "letra datos pie" "letra sub pie";
  align-items: center;
  gap: 0.2rem 1.1rem;
  width: 100%;
  padding: 1rem 0.2rem;
  border: 0;
  border-bottom: 1px solid var(--c-linea);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--d-rapida);
}
.unidad:hover { background: rgba(14, 17, 19, 0.035); }
.unidad__letra { grid-area: letra; width: 2.4rem; font-family: var(--f-titulo); font-size: 1.7rem; line-height: 1; }
.unidad__datos { grid-area: datos; font-size: var(--t-s); font-weight: 500; }
.unidad__precio { font-family: var(--f-estetica); font-size: 1.55rem; text-align: right; }
.unidad__sub { grid-area: sub; font-size: var(--t-xs); color: var(--c-tinta-2); }
.unidad__pie { grid-area: pie; display: grid; justify-items: end; gap: 0.35rem; }

/* Planta baja: sus zonas comunes en filas de texto y el enlace a la sección */
.comunes { margin: 1.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linea); }
.comunes li { padding: 1rem 0.2rem; border-bottom: 1px solid var(--c-linea); font-family: var(--f-titulo); font-size: 1.4rem; line-height: 1.1; }
.comunes__enlace { margin-top: 1.4rem; }

/* Ficha de vivienda */
.ficha__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin-top: 0.8rem; }
.ficha__tipo { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tinta-2); }
.ficha__foto { margin: 1.2rem 0 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-m); background: var(--c-arena); }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: 1.3rem; font-family: var(--f-estetica); font-size: 3.1rem; line-height: 1; }
.ficha__precio small { font-family: var(--f-texto); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tinta-2); }
.ficha__accion { width: 100%; margin-top: 1.2rem; }
.ficha__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; margin: 1.4rem 0 0; }
.ficha__datos div { padding: 0.75rem 0; border-top: 1px solid var(--c-linea); }
.ficha__datos dt { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-tinta-3); }
.ficha__datos dd { margin: 0.3rem 0 0; font-size: var(--t-s); font-weight: 500; }
.ficha__estancias { margin-top: 1.2rem; border-top: 1px solid var(--c-linea); border-bottom: 1px solid var(--c-linea); }
.ficha__estancias summary { padding: 0.95rem 0; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.ficha__estancias ul { display: grid; gap: 0.45rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: var(--t-s); }
.ficha__estancias li { display: flex; justify-content: space-between; gap: 1rem; }
.ficha__estancias li span:last-child { font-variant-numeric: tabular-nums; }
.ficha__vistas { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.2rem; }
.ficha__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.ficha__nav { display: flex; gap: 0.45rem; }
.ficha__nota { margin-top: 1.1rem; }

/* Móvil y tableta: el edificio arriba y el panel debajo */
@media (max-width: 1180px) {
  .escenario { display: flex; flex-direction: column; width: auto; height: auto; min-height: 0; margin-inline: 0; padding-bottom: 2rem; border-radius: 0; background: var(--c-papel); scroll-margin-top: 0; }
  .escenario__lienzo { position: relative; inset: auto; aspect-ratio: 1 / 1.08; margin-inline: var(--margen); overflow: hidden; border-radius: var(--r-l); background: #C9D2D4; }
  /* Aquí el texto no va sobre la foto: título arriba en tinta, la foto y las plantas como filas de texto */
  .escenario__lienzo::after { display: none; }
  .escenario__cabeza,
  .carril { text-shadow: none; }
  .escenario__cabeza { order: -1; position: relative; top: auto; left: auto; width: auto; margin: 0 var(--margen) 1.8rem; color: var(--c-tinta); }
  .escenario.con-planta .escenario__cabeza { display: none; }
  .escenario__linea { color: var(--c-tinta-2); }
  .resumen { border-top-color: var(--c-linea); }
  .carril { position: relative; top: auto; right: auto; margin: 0.8rem var(--margen) 0; transform: none; color: var(--c-tinta); }
  .carril__planta { grid-template-columns: 1fr auto; align-items: baseline; justify-items: start; min-width: 0; padding: 1.05rem 0; border-bottom-color: var(--c-linea); text-align: left; }
  .carril__libres { justify-self: end; color: var(--c-tinta-2); }
  .escenario.con-planta .carril { display: flex; gap: 1.8rem; }
  .escenario.con-planta .carril__planta { grid-template-columns: auto; padding: 0.6rem 0; }
  .panel { position: relative; top: auto; bottom: auto; left: auto; display: none; width: auto; margin: 1rem var(--margen) 0; overflow: visible; opacity: 1; transform: none; border: 1px solid var(--c-linea); box-shadow: none; }
  .escenario.con-planta .panel { display: block; }
  .etiqueta { display: none; }
}
/* Tableta: foto apaisada y una columna centrada */
@media (min-width: 561px) and (max-width: 1180px) {
  .escenario__lienzo { aspect-ratio: auto; height: clamp(420px, 62svh, 720px); }
  .escenario__cabeza,
  .carril,
  .panel { align-self: center; width: min(720px, calc(100% - 2 * var(--margen))); margin-inline: auto; }
}

/* Móvil: el plano se queda con las letras (los datos van en la lista de debajo) y cada fila lleva el precio en su propia línea */
@media (max-width: 560px) {
  /* Los tres estados en una sola fila */
  .resumen { flex-wrap: nowrap; gap: 0.6rem 1.1rem; }
  .resumen li { gap: 0.35rem; letter-spacing: 0.05em; }
  .panel { padding: 1.1rem 1.1rem 1.4rem; }
  .plano { padding: 0.6rem 0.5rem 0.4rem; }
  .plano__dato--vivienda,
  .plano__dato--exterior,
  .plano__dato--estado,
  .plano__nucleo-texto { display: none; }
  .plano__letra { font-size: 60px; }
  .plano__dato--mar,
  .plano__dato--norte { font-size: 24px; }
  .plano__dato--mar { transform: translateY(5px); }
  .unidad {
    grid-template-columns: auto 1fr;
    grid-template-areas: "letra datos" "letra sub" "letra pie";
    gap: 0.25rem 1rem;
  }
  .unidad__letra { align-self: start; }
  .unidad__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 1rem; margin-top: 0.45rem; }
}

/* Ficha imprimible: «Descargar ficha» imprime solo el panel */
@media print {
  body > :not(main),
  main > :not(#viviendas),
  .escenario > :not(.panel),
  .panel__volver,
  .ficha__vistas,
  .ficha__pie,
  .ficha__accion { display: none !important; }
  .escenario { height: auto; min-height: 0; overflow: visible; background: none; }
  .panel { position: static; width: auto; max-height: none; overflow: visible; opacity: 1; transform: none; border: 0; box-shadow: none; background: none; }
}