/* Prototipo «Barcelona, barrio a barrio» · Gallery Properties
   Colores y tipografías de css/styles.css de la web (verde, crema y dorado;
   Cormorant Garamond e Inter). */

:root {
  --verde-950: #0a1410;
  --verde-900: #0f1c17;
  --verde-850: #13231c;
  --verde-800: #1a2e26;
  --verde-700: #2d4a3e;
  --verde-600: #3d6354;
  --verde-500: #4a6b5d;
  --crema-50: #faf9f7;
  --crema-100: #f5f8f6;
  --crema-200: #f1ece2;
  --linea: #e8e3dc;
  --oro: #c9a96e;
  --oro-claro: #e2d5b7;
  /* Dorado oscuro para texto sobre crema: contraste 5,3:1. */
  --oro-oscuro: #7d6530;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --alto-tira: 0px;
  --alto-cabecera: 76px;
  --ancho-panel: min(440px, 36vw);
  --margen-panel: clamp(20px, 3vw, 48px);
}

html.variante-a {
  --fondo: var(--verde-900);
  --tinta: #f1ebdf;
  --tinta-suave: #b8c5be;
  --oro-texto: #dcc287;
  --borde: rgba(226, 213, 183, 0.16);
  --panel: rgba(12, 23, 19, 0.82);
  --fondo-ficha: rgba(255, 255, 255, 0.035);
  --fondo-cierre: var(--verde-900);
  --fondo-pie: var(--verde-950);
  color-scheme: dark;
}

html.variante-b {
  --fondo: var(--crema-50);
  --tinta: var(--verde-800);
  --tinta-suave: #587063;
  --oro-texto: var(--oro-oscuro);
  --borde: var(--linea);
  --panel: transparent;
  --fondo-ficha: #ffffff;
  --fondo-cierre: var(--crema-200);
  --fondo-pie: #ebe5d9;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font: 400 16px/1.6 var(--sans);
  background: var(--fondo);
  color: var(--tinta);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--oro); color: var(--verde-900); font-weight: 600;
  padding: 12px 18px; border-radius: 10px; text-decoration: none;
}
.saltar:focus { top: 12px; }
.solo-movil { display: none; }
.icono { width: 12px; height: 12px; flex: none; }

/* ── Tira del prototipo ─────────────────────────────────────────────── */
.tira {
  position: sticky; top: 0; z-index: 80;
  height: var(--alto-tira);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 12px;
  background: #08110d; color: #dccfb0;
  font: 500 12px/1 var(--sans);
  border-bottom: 1px solid rgba(201, 169, 110, 0.28);
}
.tira__rotulo { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tira__rotulo strong { color: var(--oro); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; }
.tira__selector { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.tira__opcion {
  display: inline-flex; align-items: center; gap: 0.3em; min-height: 28px; padding: 0 12px;
  border-radius: 999px; color: #d6caac; text-decoration: none; white-space: nowrap;
}
.tira__opcion:hover { background: rgba(255, 255, 255, 0.08); }
.tira__opcion[aria-current="true"] { background: var(--oro); color: var(--verde-900); font-weight: 600; }
.solo-movil-lectores { display: none; }
.tira__letra { font-weight: 700; }
.tira__notas {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 12px;
  border: 1px solid rgba(201, 169, 110, 0.4); border-radius: 999px;
  background: none; color: #dccfb0; font: inherit; cursor: pointer; white-space: nowrap;
}
.tira__notas:hover { background: rgba(255, 255, 255, 0.07); }
.tira__estado { width: 8px; height: 8px; border-radius: 50%; background: #8d8a7b; }
.tira__estado[data-estado-datos="en-vivo"] { background: #5fcf92; }
.tira__estado[data-estado-datos="instantanea"] { background: #e3b64f; }

/* ── Cabecera ───────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: var(--alto-tira); z-index: 70;
  height: var(--alto-cabecera);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(16px, 3vw, 40px);
}
html.variante-a .cabecera {
  color: #f4eee2;
  background: linear-gradient(to bottom, rgba(9, 17, 14, 0.94), rgba(9, 17, 14, 0.62) 72%, rgba(9, 17, 14, 0));
}
html.variante-b .cabecera {
  color: var(--verde-800);
  background: rgba(250, 249, 247, 0.95);
  border-bottom: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.marca__logo { width: 44px; height: 44px; object-fit: contain; flex: none; }
.marca__texto { font: 500 21px/1.05 var(--serif); letter-spacing: 0.02em; white-space: nowrap; }
.marca__texto small {
  display: block; margin-top: 4px;
  font: 500 9.5px/1.3 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.78;
}
.cabecera__acciones { display: flex; align-items: center; gap: 10px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 14px/1 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.boton--grande { min-height: 52px; padding: 0 26px; font-size: 15px; }
.boton--linea { background: transparent; }
.boton--oro { background: var(--oro); border-color: var(--oro); color: var(--verde-900); }
.boton--oro:hover { background: #d9bd86; border-color: #d9bd86; }
html.variante-a .boton--linea { color: #f4eee2; border-color: rgba(244, 238, 226, 0.6); }
html.variante-a .boton--linea:hover { background: rgba(244, 238, 226, 0.1); }
html.variante-b .boton--linea { color: var(--verde-700); border-color: var(--verde-700); }
@media (hover: hover) {
  html.variante-b .boton--linea:hover { background: var(--verde-700); color: #fff; }
}

.boton-menu {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: inherit; font: 500 14px/1 var(--sans); cursor: pointer;
}
.boton-menu:hover { background: rgba(127, 127, 127, 0.12); }
.boton-menu__barras { display: inline-flex; flex-direction: column; gap: 4px; }
.boton-menu__barras span { display: block; width: 18px; height: 1.5px; background: currentColor; }
.menu {
  position: absolute; top: calc(100% + 4px); right: clamp(16px, 3vw, 40px);
  width: min(320px, calc(100vw - 32px));
  padding: 10px; border-radius: 16px;
  background: #fbfaf7; color: var(--verde-800);
  box-shadow: 0 24px 70px rgba(5, 12, 9, 0.32);
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; font: 500 15px/1.3 var(--sans); }
.menu a:hover { background: var(--crema-200); }
.menu__pie { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 8px 10px 2px; padding-top: 12px; border-top: 1px solid var(--linea); }
.menu__luz { display: flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--linea); border-radius: 999px; }
.menu__luz button { display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--verde-800); cursor: pointer; }
.menu__luz button[aria-pressed="true"] { background: var(--verde-700); color: white; }
.menu__luz svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu__fuentes { flex: 1; min-width: 0; color: #6b8578; }
.menu__fuentes summary { min-height: 38px; display: flex; align-items: center; list-style: none; cursor: pointer; font: 400 11.5px/1.4 var(--sans); }
.menu__fuentes summary::-webkit-details-marker { display: none; }
.menu__creditos { margin: 4px 0 8px; font: 400 11px/1.5 var(--sans); color: #6b8578; }
.menu__creditos a { display: inline; padding: 0; border-radius: 0; font: inherit; color: inherit; text-decoration: underline; }
.cabecera__volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid currentColor; border-radius: 999px; background: rgba(12, 26, 20, 0.8); color: #f3ead6; cursor: pointer; font: 500 14px/1 var(--sans); }
.cabecera__volver[hidden] { display: none; }
@media (max-width: 760px) { .cabecera__volver { padding: 0 10px; } .cabecera__volver span { display: none; } }

/* ── Escena (maqueta y plano) ───────────────────────────────────────── */
.escena { position: relative; overflow: hidden; background: #0e1a15; isolation: isolate; }
.escena.escena--dia { background: #e8e2d5; }
.escena__lienzo { position: absolute; inset: 0; }
.escena__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity 0.7s; }
.escena__lienzo.con-3d .escena__canvas { opacity: 1; }
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.7s, visibility 0s; }
.escena__lienzo.con-3d .mapa-svg { opacity: 0; visibility: hidden; transition: opacity 0.7s, visibility 0s 0.7s; }
.escena__etiquetas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.escena__aviso {
  position: absolute; left: 14px; top: 14px; z-index: 3; margin: 0;
  max-width: calc(100% - 28px); padding: 7px 12px; border-radius: 999px;
  background: rgba(10, 19, 15, 0.85); color: #f1e8d2; font-size: 12px; line-height: 1.3;
}
.escena__leyenda {
  position: absolute; right: 12px; bottom: 8px; z-index: 3; margin: 0;
  max-width: min(84ch, calc(100% - 24px)); text-align: right;
  font-size: 10.5px; line-height: 1.35; letter-spacing: 0.01em;
  color: rgba(236, 228, 210, 0.62); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.escena--dia .escena__leyenda { color: rgba(26, 46, 38, 0.62); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); }

/* Luz según la hora de Barcelona */
.luz {
  position: absolute; z-index: 4; top: 14px; right: 14px;
  display: flex; gap: 2px; padding: 3px; max-width: calc(100% - 28px);
  border-radius: 999px; overflow-x: auto; scrollbar-width: none;
  background: rgba(9, 18, 14, 0.78); border: 1px solid rgba(226, 213, 183, 0.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.luz::-webkit-scrollbar { display: none; }
.luz button {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
  background: none; color: #e7dcc4; font: 500 12.5px/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
@media (hover: hover) {
  .luz button:hover { background: rgba(255, 255, 255, 0.09); }
}
.luz button[aria-pressed="true"] { background: var(--oro); color: var(--verde-900); font-weight: 600; }
.luz__hora { font-variant-numeric: tabular-nums; opacity: 0.8; }
.escena--dia .luz { background: rgba(255, 255, 255, 0.88); border-color: rgba(45, 74, 62, 0.22); }
.escena--dia .luz button { color: var(--verde-800); }
@media (hover: hover) {
  .escena--dia .luz button:hover { background: var(--crema-200); }
}
.escena--dia .luz button[aria-pressed="true"] { background: var(--verde-700); color: #fff; }

.etiqueta { position: absolute; left: 0; top: 0; white-space: nowrap; translate: -50% -100%; will-change: transform; }
/* Barrio del recorrido: su nombre y, en la vista de ciudad, encima, la ficha
   de la vivienda que abre su capítulo. */
.etiqueta--barrio {
  pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity 0.4s;
}
.etiqueta__nombre {
  padding: 6px 12px; border-radius: 999px;
  font: 600 12.5px/1 var(--sans); letter-spacing: 0.01em;
  background: rgba(11, 21, 17, 0.84); color: #f1e6cd;
  border: 1px solid rgba(212, 184, 122, 0.6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: background-color 0.4s, color 0.4s;
}
.etiqueta--barrio.es-activa .etiqueta__nombre { background: var(--oro); color: var(--verde-900); border-color: var(--oro); }
.etiqueta--barrio.es-tenue { opacity: 0.45; }
.escena--dia .etiqueta__nombre { background: rgba(255, 255, 255, 0.92); color: var(--verde-800); border-color: rgba(45, 74, 62, 0.35); box-shadow: 0 6px 16px rgba(26, 46, 38, 0.14); }
.escena--dia .etiqueta--barrio.es-activa .etiqueta__nombre { background: var(--verde-700); color: #fff; border-color: var(--verde-700); }
.etiqueta__ficha { display: none; }
.etiqueta--barrio.con-ficha .etiqueta__ficha { display: block; position: relative; width: 148px; margin-bottom: 18px; --tallo: 18px; }
.etiqueta--lugar { font: italic 500 16px/1 var(--serif); letter-spacing: 0.04em; color: rgba(238, 228, 205, 0.62); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.escena--dia .etiqueta--lugar { color: rgba(26, 46, 38, 0.55); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); }
.etiqueta--mar { font-size: 18px; letter-spacing: 0.14em; }
/* Fichas sobre el mapa: foto, precio y lo mínimo de cada inmueble, sobre su
   pin con un tallo dorado. Si no caben, solo el precio (pastilla). El tallo
   mide lo mismo que en maqueta.js (TALLO). */
.etiqueta--ficha, .etiqueta__ficha {
  padding: 4px; border-radius: 10px; white-space: normal;
  background: rgba(10, 19, 15, 0.92); color: #f3ead6;
  border: 1px solid rgba(212, 184, 122, 0.85);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.etiqueta--ficha {
  --tallo: 16px;
  translate: -50% calc(-100% - var(--tallo));
  width: 152px; pointer-events: auto; cursor: pointer;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  transition: opacity 0.25s, border-color 0.2s, box-shadow 0.2s;
}
.etiqueta--ficha.es-oculta { opacity: 0; visibility: hidden; pointer-events: none; }
/* Al explorar, el dedo arrastra el mapa también sobre una ficha. */
html.explorando .etiqueta--ficha { touch-action: none; }
.etiqueta--ficha::after, .etiqueta__ficha::after {
  /* La zona transparente mantiene unido el pin con la ficha. Sin este puente,
     al crecer un punto bajo el cursor la ficha queda por encima del puntero,
     recibe pointerleave y alterna entre punto y ficha en cada fotograma. */
  content: ''; position: absolute; left: 50%; top: 100%; width: 32px; height: calc(var(--tallo) + 8px); margin: 1px 0 0 -16px;
  background: linear-gradient(to bottom, rgba(226, 200, 140, 0.95), rgba(226, 200, 140, 0.3)) center top / 2px var(--tallo) no-repeat;
}
.ficha-mapa__foto {
  display: block; height: 96px; border-radius: 7px; overflow: hidden;
  background: rgba(255, 255, 255, 0.06) url('../img/logo-gp.png') center / 30px no-repeat;
}
.ficha-mapa__foto img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ficha-mapa__foto img:not([src]), .sin-foto .ficha-mapa__foto img { visibility: hidden; }
.ficha-mapa__texto { display: grid; gap: 1px; min-width: 0; padding: 6px 5px 2px; }
.ficha-mapa__etiqueta { font: 600 9.5px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #dcc287; }
.ficha-mapa__etiqueta:empty, .ficha-mapa__n:empty { display: none; }
.ficha-mapa__precio { font: 600 17px/1.1 var(--serif); white-space: nowrap; }
.etiqueta__ficha .ficha-mapa__precio { display: block; padding: 5px 4px 1px; text-align: center; }
.etiqueta__ficha .ficha-mapa__foto { height: 92px; }
.ficha-mapa__datos { font: 500 11px/1.3 var(--sans); color: rgba(243, 234, 214, 0.74); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-mapa__n {
  position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--oro); color: var(--verde-900); font: 700 11px/1 var(--sans); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Varios en el mismo punto: un montón de fichas. */
.etiqueta--ficha.es-grupo { box-shadow: 5px -5px 0 -1px rgba(10, 19, 15, 0.92), 5px -5px 0 0 rgba(212, 184, 122, 0.6), 10px -10px 0 -2px rgba(10, 19, 15, 0.86), 10px -10px 0 -1px rgba(212, 184, 122, 0.4), 0 12px 28px rgba(0, 0, 0, 0.4); }
.etiqueta--ficha.es-elegida { border-color: var(--oro); box-shadow: 0 0 0 2px var(--oro), 0 0 30px rgba(226, 196, 120, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45); }
@media (hover: hover) { .etiqueta--ficha:hover, .etiqueta--barrio.con-ficha:hover .etiqueta__ficha { border-color: #f6e7c1; } }
.etiqueta--ficha.es-pastilla { --tallo: 9px; width: auto; padding: 5px 9px; border-radius: 8px; }
.etiqueta--ficha.es-pastilla .ficha-mapa__foto, .etiqueta--ficha.es-pastilla .ficha-mapa__datos, .etiqueta--ficha.es-pastilla .ficha-mapa__etiqueta { display: none; }
.etiqueta--ficha.es-pastilla .ficha-mapa__texto { padding: 0; }
.etiqueta--ficha.es-pastilla .ficha-mapa__precio { font: 600 14px/1 var(--sans); }
.etiqueta--ficha.es-pastilla.es-grupo { box-shadow: 3px -3px 0 -1px rgba(10, 19, 15, 0.92), 3px -3px 0 0 rgba(212, 184, 122, 0.6), 0 6px 16px rgba(0, 0, 0, 0.3); }
.escena--dia .etiqueta--ficha, .escena--dia .etiqueta__ficha { background: rgba(255, 255, 255, 0.97); color: var(--verde-900); border-color: rgba(166, 139, 75, 0.85); box-shadow: 0 12px 26px rgba(26, 46, 38, 0.22); }
.escena--dia .etiqueta--ficha::after, .escena--dia .etiqueta__ficha::after { background-image: linear-gradient(to bottom, rgba(125, 101, 48, 0.9), rgba(125, 101, 48, 0.25)); }
.escena--dia .ficha-mapa__foto { background-color: rgba(45, 74, 62, 0.08); }
.escena--dia .ficha-mapa__datos { color: #587063; }
.escena--dia .ficha-mapa__etiqueta { color: var(--oro-oscuro); }
.escena--dia .etiqueta--ficha.es-grupo { box-shadow: 5px -5px 0 -1px #fff, 5px -5px 0 0 rgba(166, 139, 75, 0.6), 10px -10px 0 -2px #fff, 10px -10px 0 -1px rgba(166, 139, 75, 0.4), 0 12px 26px rgba(26, 46, 38, 0.22); }
.escena--dia .etiqueta--ficha.es-pastilla.es-grupo { box-shadow: 3px -3px 0 -1px #fff, 3px -3px 0 0 rgba(166, 139, 75, 0.6), 0 6px 16px rgba(26, 46, 38, 0.2); }
.escena--dia .etiqueta--ficha.es-elegida { border-color: var(--verde-700); box-shadow: 0 0 0 2px var(--verde-700), 0 12px 26px rgba(26, 46, 38, 0.3); }
.etiqueta--tooltip {
  translate: 0 0; z-index: 4;
  padding: 7px 10px; border-radius: 8px;
  background: rgba(9, 17, 14, 0.92); color: #f2e9d4; font: 500 12.5px/1.2 var(--sans);
}

/* Plano SVG */
.escena--noche {
  --svg-suelo: #13211b; --svg-mar: #0a1410; --svg-verde: #1c3628;
  --svg-placa: #1d3129; --svg-borde: rgba(226, 213, 183, 0.18); --svg-recorrido: #24403440;
  --svg-activo: #2f5143; --svg-oro: #d4b87a; --svg-pin-dest: #f6e7c1; --svg-texto: #f1e6cd;
}
.escena--dia {
  --svg-suelo: #ddd4c2; --svg-mar: #c3d4cd; --svg-verde: #c2d2bd;
  --svg-placa: #f1ece1; --svg-borde: rgba(45, 74, 62, 0.22); --svg-recorrido: #ede0c3;
  --svg-activo: #e3cf9f; --svg-oro: #2d4a3e; --svg-pin-dest: #a68b4b; --svg-texto: #1a2e26;
}
.mapa-svg__suelo { fill: var(--svg-suelo); }
.mapa-svg__mar { fill: var(--svg-mar); }
.mapa-svg__verde { fill: var(--svg-verde); opacity: 0.85; }
.barrio { fill: var(--svg-placa); stroke: var(--svg-borde); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill 0.5s, opacity 0.5s; }
.barrio--recorrido { fill: var(--svg-recorrido); stroke: var(--svg-oro); stroke-width: 1.2; cursor: pointer; }
.barrio.es-activo { fill: var(--svg-activo); stroke: var(--svg-oro); stroke-width: 2.6; }
.barrio.es-atenuado { opacity: 0.45; }
.pin { fill: var(--svg-oro); stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pin--destacado { fill: var(--svg-pin-dest); }
.mapa-svg__textos text { fill: var(--svg-texto); font-family: var(--sans); font-weight: 600; text-anchor: middle; pointer-events: none; }
.mapa-svg__textos text.es-activo { fill: var(--svg-oro); }

/* ── Navegación por barrios ─────────────────────────────────────────── */
.barrios__lista {
  list-style: none; margin: 0; padding: 4px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.barrios__lista::-webkit-scrollbar { display: none; }
.barrios__lista a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 500 13.5px/1 var(--sans); transition: background-color 0.25s, color 0.25s;
}
html.variante-a .barrios__lista {
  background: rgba(9, 18, 14, 0.8); border: 1px solid rgba(226, 213, 183, 0.16); border-radius: 999px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html.variante-a .barrios__lista a { color: #e7dcc4; }
@media (hover: hover) {
  html.variante-a .barrios__lista a:hover { background: rgba(255, 255, 255, 0.08); }
}
html.variante-a .barrios__lista a[aria-current="true"] { background: var(--oro); color: var(--verde-900); font-weight: 600; }
html.variante-b .barrios__lista { background: #fff; border: 1px solid var(--linea); border-radius: 999px; }
html.variante-b .barrios__lista a { color: var(--verde-700); }
@media (hover: hover) {
  html.variante-b .barrios__lista a:hover { background: var(--crema-200); }
}
html.variante-b .barrios__lista a[aria-current="true"] { background: var(--verde-700); color: #fff; font-weight: 600; }

/* ── Pasos (intro y capítulos) ──────────────────────────────────────── */
.paso__antetitulo {
  margin: 0 0 12px;
  font: 600 11px/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--oro-texto);
}
h1 { margin: 0 0 18px; font: 500 clamp(46px, 5.4vw, 80px)/0.98 var(--serif); letter-spacing: -0.01em; }
h1 em { font-style: italic; }
html.variante-a h1 em { color: #e6cd93; }
html.variante-b h1 em { color: var(--verde-600); }
h1:focus, h2:focus { outline: none; }
h1:focus-visible, h2:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.intro__texto { max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--tinta-suave); }
.intro__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 18px; }
.intro__pista { margin: 0; font-size: 13.5px; color: var(--tinta-suave); }
.intro__pista a { color: var(--oro-texto); font-weight: 600; text-underline-offset: 3px; }
.intro__explorar {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--oro-texto); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

.capitulo__titulo { margin: 0 0 14px; font: 500 clamp(34px, 3.4vw, 50px)/1.02 var(--serif); }
.capitulo__historia { font-size: 15.5px; line-height: 1.65; color: var(--tinta-suave); }
.capitulo__fuente { margin: -4px 0 0; font-size: 12px; }
.capitulo__fuente a, .capitulo__catalogo a, .enlace-flecha {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px;
  color: var(--oro-texto); text-decoration: none; font-weight: 600;
}
.capitulo__fuente a { font-weight: 500; color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(127, 127, 127, 0.4); }
.capitulo__catalogo { margin: 10px 0 0; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; }
.capitulo__explorar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--oro-texto); font: 600 13.5px/1.2 var(--sans); text-align: left;
}
.capitulo__explorar:hover { text-decoration: underline; text-underline-offset: 3px; }
.capitulo__siguiente {
  display: inline-flex; flex-wrap: wrap; gap: 0 6px; align-items: center; min-height: 44px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde);
  width: 100%; font-size: 13px; color: var(--tinta-suave); text-decoration: none;
}
.capitulo__siguiente span { color: var(--tinta); font-weight: 600; }
.capitulo__siguiente::after { content: '↓'; margin-left: auto; color: var(--oro-texto); }

.ficha { margin: 18px 0 6px; }
.ficha__enlace {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px; border-radius: 14px; border: 1px solid var(--borde);
  background: var(--fondo-ficha); text-decoration: none;
  transition: border-color 0.2s;
}
.ficha__enlace:hover { border-color: var(--oro); }
.ficha__foto { width: 128px; height: 96px; object-fit: cover; border-radius: 9px; background: rgba(127, 127, 127, 0.16); }
.ficha__foto--vacia { display: flex; align-items: center; justify-content: center; }
.ficha__foto--vacia img { width: 40%; opacity: 0.6; }
.ficha__etiqueta { margin: 0 0 4px; font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--oro-texto); }
.ficha__titulo {
  margin: 0 0 5px; font: 500 19px/1.18 var(--serif);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ficha__datos { margin: 0 0 3px; font-size: 13px; line-height: 1.4; color: var(--tinta-suave); }
.ficha__precio { margin: 0 0 4px; font: 600 21px/1.2 var(--serif); }
.ficha__ver { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--oro-texto); }

.capitulo__mas-titulo { margin: 14px 0 4px; font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--tinta-suave); }
.filas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.filas a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 42px; padding: 6px 2px; border-bottom: 1px solid var(--borde);
  font-size: 13.5px; text-decoration: none;
}
.filas a:hover .fila__datos { text-decoration: underline; text-underline-offset: 3px; }
.fila__datos { color: var(--tinta-suave); }
.fila__precio { font-weight: 600; white-space: nowrap; }

.escena__flechas { display: none; }

/* ── Variante A · escritorio: maqueta a pantalla completa ───────────── */
html.variante-a .escenario { position: fixed; inset: 0; z-index: 0; }
html.variante-a .escena { position: absolute; inset: 0; }
html.variante-a .barrios {
  position: absolute; z-index: 4; bottom: 44px;
  left: calc(var(--ancho-panel) + var(--margen-panel) * 2); right: 24px;
  display: flex; justify-content: center; pointer-events: none;
}
html.variante-a .barrios__lista { pointer-events: auto; max-width: 100%; }
html.variante-a .luz { top: calc(var(--alto-tira) + var(--alto-cabecera) + 8px); right: clamp(16px, 3vw, 40px); }
html.variante-a .pasos {
  position: relative; z-index: 2;
  width: calc(var(--ancho-panel) + var(--margen-panel));
  padding-left: var(--margen-panel);
  pointer-events: none;
}
html.variante-a .paso {
  min-height: 100vh; display: flex; align-items: center;
  padding: calc(var(--alto-tira) + var(--alto-cabecera) + 16px) 0 96px;
}
html.variante-a .paso__panel {
  pointer-events: auto; width: 100%;
  padding: 24px 26px 18px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--borde);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
html.variante-a .capitulo__titulo { font-size: clamp(32px, 3vw, 44px); }
html.variante-a .capitulo__historia { font-size: 15px; line-height: 1.6; }
html.variante-a .intro .paso__panel { background: rgba(12, 23, 19, 0.7); }
html.variante-a .intro h1 { font-size: clamp(42px, 4.1vw, 60px); }
html.variante-a .cierre { border-top: 1px solid rgba(201, 169, 110, 0.3); }

/* ── Variante B · escritorio: capítulos con maqueta flotante ────────── */
html.variante-b .recorrido {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(32px, 5vw, 96px);
  max-width: 1560px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 88px);
}
html.variante-b .escenario {
  grid-column: 2; grid-row: 1;
  position: sticky; top: calc(var(--alto-tira) + var(--alto-cabecera) + 28px);
  align-self: start;
  height: calc(100vh - var(--alto-tira) - var(--alto-cabecera) - 56px);
  display: flex; flex-direction: column; gap: 14px;
}
html.variante-b .escena { flex: 1; border-radius: 26px; box-shadow: 0 30px 80px rgba(26, 46, 38, 0.2), 0 2px 6px rgba(26, 46, 38, 0.08); }
html.variante-b .barrios { display: flex; justify-content: center; }
@media (min-width: 761px) {
  html.variante-b .barrios__lista { flex-wrap: wrap; justify-content: center; border-radius: 24px; }
}
html.variante-b .pasos { grid-column: 1; grid-row: 1; }
html.variante-b .paso { min-height: 88vh; display: flex; align-items: center; padding: 9vh 0; }
html.variante-b .paso__panel { max-width: 560px; }
html.variante-b .intro { min-height: calc(100vh - var(--alto-tira) - var(--alto-cabecera)); }
html.variante-b .capitulo__titulo { font-size: clamp(40px, 4vw, 62px); }
html.variante-b .capitulo__historia { font-size: 17px; line-height: 1.7; }
html.variante-b .ficha__enlace { box-shadow: 0 10px 30px rgba(26, 46, 38, 0.06); }

/* ── Cierre y pie ───────────────────────────────────────────────────── */
.cierre { position: relative; z-index: 3; padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 88px); background: var(--fondo-cierre); }
.cierre h2 { margin: 0 0 32px; font: 500 clamp(40px, 5vw, 66px)/1 var(--serif); }
.cierre__caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1120px; }
.camino {
  display: flex; flex-direction: column; gap: 10px; min-height: 250px;
  padding: 30px; border-radius: 22px; text-decoration: none;
  transition: transform 0.25s;
}
@media (hover: hover) {
  .camino:hover { transform: translateY(-3px); }
}
.camino--comprar { background: var(--verde-700); color: #f6f1e6; }
.camino--vender { background: var(--oro); color: var(--verde-900); }
.camino__antetitulo { font: 600 11px/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.camino__titulo { font: 500 clamp(28px, 2.6vw, 36px)/1.05 var(--serif); }
.camino__texto { max-width: 34ch; font-size: 15px; opacity: 0.9; }
.camino__accion { margin-top: auto; font-weight: 600; }
.camino__accion::after { content: ' →'; }
.cierre__fuera { max-width: 760px; margin-top: 30px; color: var(--tinta-suave); }
.cierre__fuera p { margin-bottom: 4px; }
.pie {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 48px;
  padding: 30px clamp(20px, 5vw, 88px) 40px;
  background: var(--fondo-pie); color: var(--tinta-suave); font-size: 12.5px;
}
.pie__marca { display: flex; align-items: center; gap: 10px; }
.pie__marca img { width: 36px; height: 36px; object-fit: contain; }
.pie__marca p { margin: 0; font: 500 18px/1.1 var(--serif); color: var(--tinta); }
.pie__marca small { display: block; font: 500 9px/1.4 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-suave); }
.pie__nota { margin: 0; max-width: 80ch; }
.barra-movil { display: none; }

/* ── Notas ──────────────────────────────────────────────────────────── */
.notas {
  width: min(580px, calc(100vw - 24px)); max-height: calc(100dvh - 48px);
  padding: 28px 28px 24px; border: 0; border-radius: 20px;
  background: #fbfaf7; color: var(--verde-800);
  box-shadow: 0 30px 90px rgba(5, 12, 9, 0.4);
  font-size: 14.5px; line-height: 1.55;
}
.notas::backdrop { background: rgba(6, 12, 9, 0.6); }
.notas h2 { margin: 0 40px 10px 0; font: 500 30px/1.1 var(--serif); }
.notas h3 { margin: 18px 0 6px; font: 600 11px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro-oscuro); }
.notas ul { margin: 0; padding-left: 18px; }
.notas li { margin: 3px 0; }
.notas__cerrar {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--crema-200); color: var(--verde-800);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.notas__grupo { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0; padding: 8px 14px 10px; border: 1px solid var(--linea); border-radius: 12px; }
.notas__grupo legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.notas__grupo label { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; cursor: pointer; }
.notas__tecnico { margin: 10px 0 0; font-size: 12px; color: #6b8578; }
.notas__ayuda { margin: 6px 0 10px; }
.notas code { padding: 1px 5px; border-radius: 5px; background: var(--crema-200); font-size: 13px; }

/* ── Móvil ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --alto-tira: 0px; --alto-cabecera: 60px; }
  .solo-amplio { display: none; }
  .solo-movil-lectores { display: inline; }
  .solo-movil { display: inline; }
  .barrios__lista a { min-height: 44px; }
  .solo-escritorio { display: none; }
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .tira { padding: 0 8px; gap: 6px; }
  .tira__opcion { padding: 0 14px; }
  .marca__logo { width: 38px; height: 38px; }
  .marca__texto { font-size: 18px; }
  .marca__texto small { font-size: 8.5px; letter-spacing: 0.2em; }
  .cabecera .boton { display: none; }
  .boton-menu__texto { display: none; }
  .boton-menu { width: 44px; justify-content: center; padding: 0; }
  html.variante-a .cabecera { background: rgba(9, 17, 14, 0.96); }

  .barra-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    display: flex; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--borde);
  }
  .barra-movil .boton { flex: 1; min-height: 48px; padding: 0 10px; font-size: 14px; }
  html.variante-a .barra-movil { background: rgba(9, 17, 14, 0.97); }
  html.variante-b .barra-movil { background: rgba(250, 249, 247, 0.97); }

  h1 { font-size: 42px; }
  .intro__texto { font-size: 15.5px; }
  .intro__acciones { display: none; }
  .capitulo__titulo { font-size: 31px; }
  .capitulo__historia { font-size: 14.5px; line-height: 1.6; }
  .ficha__enlace { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .ficha__foto { width: 96px; height: 76px; }
  .ficha__titulo { font-size: 17px; }
  .ficha__precio { font-size: 19px; }
  .escena__leyenda { font-size: 9.5px; left: 10px; right: 10px; text-align: left; max-width: none; }
  .etiqueta--barrio { padding: 5px 10px; font-size: 11.5px; }
  .etiqueta--lugar { font-size: 13px; }

  .escena__leyenda .solo-amplio { display: none; }
  .luz, html.variante-a .luz { top: 8px; right: 8px; max-width: calc(100% - 16px); }
  .luz button { min-height: 36px; padding: 0 10px; font-size: 12px; }
  .luz__hora { display: none; }
  /* En móvil los nombres van en los chips (el activo, resaltado); en el mapa
     queda el precio de la vivienda destacada, que si no se pisaría con el nombre. */
  .etiqueta--barrio { display: none; }
  .mapa-svg__textos text:not(.es-activo) { display: none; }

  /* A móvil: maqueta fija arriba y tarjetas que se deslizan en horizontal. */
  html.variante-a .escenario {
    position: sticky; inset: auto; top: calc(var(--alto-tira) + var(--alto-cabecera)); z-index: 6;
    background: var(--verde-900);
  }
  html.variante-a .escena { position: relative; inset: auto; height: 38svh; min-height: 230px; }
  html.variante-a .barrios { position: static; padding: 8px 12px 6px; display: block; background: var(--verde-900); }
  html.variante-a .barrios__lista { border-radius: 999px; }
  html.variante-a .pasos {
    width: auto; padding: 12px 16px 10px; pointer-events: auto;
    display: flex; align-items: stretch; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none;
  }
  html.variante-a .pasos::-webkit-scrollbar { display: none; }
  html.variante-a .paso { flex: 0 0 calc(100% - 28px); min-height: 0; padding: 0; display: block; scroll-snap-align: center; }
  html.variante-a .paso__panel { height: 100%; padding: 20px 18px 16px; border-radius: 18px; background: var(--verde-850); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  html.variante-a .intro .paso__panel { background: var(--verde-850); }
  html.variante-a .escena__flechas {
    position: absolute; inset: 50% 8px auto 8px; z-index: 4; translate: 0 -50%;
    display: flex; justify-content: space-between; pointer-events: none;
  }
  html.variante-a .escena__flechas button {
    pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(226, 213, 183, 0.35); background: rgba(9, 17, 14, 0.72); color: #efe4c9;
    font-size: 24px; line-height: 1;
  }
  html.variante-a .pasos { padding-bottom: 22px; }
  html.variante-a .capitulo__siguiente { display: none; }

  /* B móvil: maqueta fija arriba y capítulos verticales. */
  html.variante-b .recorrido { display: block; padding: 0; }
  html.variante-b .escenario {
    position: sticky; top: calc(var(--alto-tira) + var(--alto-cabecera)); z-index: 6;
    height: auto; gap: 0; background: var(--fondo);
  }
  html.variante-b .escena { height: 34svh; min-height: 210px; flex: none; border-radius: 0; box-shadow: none; }
  html.variante-b .barrios { display: block; padding: 8px 12px; background: var(--fondo); border-bottom: 1px solid var(--linea); }
  html.variante-b .pasos { padding: 0 20px; }
  html.variante-b .paso { min-height: 0; display: block; padding: 34px 0 36px; border-bottom: 1px solid var(--linea); }
  html.variante-b .intro { min-height: 0; }
  html.variante-b .capitulo__titulo { font-size: 34px; }
  html.variante-b .capitulo__historia { font-size: 15.5px; }

  .cierre__caminos { grid-template-columns: 1fr; }
  .camino { min-height: 0; padding: 24px; }
  .pie { padding-bottom: 28px; }
}

@media (max-width: 380px) {
  .marca__texto small { display: none; }
  .tira__rotulo { display: none; }
}

/* Paneles sin desenfoque donde el navegador no lo soporta. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.variante-a .paso__panel { background: rgba(12, 23, 19, 0.95); }
}

/* Movimiento reducido: sin transiciones ni desplazamientos animados. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .camino:hover { transform: none; }
}
html.movimiento-reducido *, html.movimiento-reducido *::before, html.movimiento-reducido *::after {
  transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important;
}
html.movimiento-reducido .camino:hover { transform: none; }

/* ── Explorar el mapa ───────────────────────────────────────────────── */
.solo-tactil { display: none; }
@media (pointer: coarse) {
  .solo-puntero { display: none !important; }
  .solo-tactil { display: inline; }
}

/* Acceso desde el recorrido: botón sobre la maqueta y chip de la navegación. */
.escena__explorar {
  position: absolute; z-index: 4; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(226, 213, 183, 0.35); background: rgba(9, 18, 14, 0.8); color: #f1e6cd;
  font: 600 13px/1 var(--sans); white-space: nowrap;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.escena__explorar .icono { width: 15px; height: 15px; }
@media (hover: hover) { .escena__explorar:hover { background: rgba(20, 36, 29, 0.92); border-color: var(--oro); } }
.escena--dia .escena__explorar { background: rgba(255, 255, 255, 0.92); color: var(--verde-800); border-color: rgba(45, 74, 62, 0.25); box-shadow: 0 8px 20px rgba(26, 46, 38, 0.14); }
html.variante-a .escena__explorar { top: calc(var(--alto-tira) + var(--alto-cabecera) + 8px); left: calc(var(--ancho-panel) + var(--margen-panel) * 2); }
/* En B la maqueta es una tarjeta: el botón va abajo a la izquierda y deja la
   parte de arriba al control de luz. */
html.variante-b .escena__explorar { top: auto; bottom: 14px; }
html.variante-b .escena__explorar .solo-amplio { display: none; }
@media (min-width: 761px) {
  html.variante-b .escena__leyenda { left: 190px; }
  html.variante-b.explorando .escena__leyenda { left: auto; }
}
.barrios__todos button {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px;
  border-radius: 999px; border: 1px dashed currentColor; background: none; cursor: pointer; white-space: nowrap;
  font: 600 13.5px/1 var(--sans);
}
html.variante-a .barrios__todos button { color: #e2cf9f; }
html.variante-b .barrios__todos button { color: var(--verde-700); }

/* Con el mapa abierto: la maqueta ocupa la ventana bajo la cabecera. Solo
   html deja de desplazarse: con body también, la cabecera dejaría de ser fija. */
html.explorando { overflow: hidden; }
html.explorando .escenario {
  position: fixed; inset: 0; z-index: 60;
  display: block; height: auto; margin: 0; padding: 0; background: none;
  /* En B es un elemento de la rejilla con align-self: start; los navegadores
     actuales también alinean los fijos, y sin esto mediría 0 px de alto. */
  align-self: stretch; justify-self: stretch;
}
html.explorando .escena { position: absolute; inset: 0; height: auto; min-height: 0; border-radius: 0; box-shadow: none; }
html.explorando .pasos { visibility: hidden; }
html.explorando .barrios, html.explorando .escena__flechas, html.explorando .escena__explorar { display: none; }
html.explorando .luz { top: calc(var(--alto-tira) + var(--alto-cabecera) + 8px); right: clamp(16px, 3vw, 40px); }
html.explorando .escena__aviso { top: calc(var(--alto-tira) + var(--alto-cabecera) + 12px); left: auto; right: clamp(16px, 3vw, 40px); margin-top: 48px; }
html.explorando .escena:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; border-radius: 0; }
html.explorando .escena__canvas { touch-action: none; }

.explorador {
  position: absolute; z-index: 6;
  left: var(--margen-panel); top: calc(var(--alto-tira) + var(--alto-cabecera) + 12px); bottom: 18px;
  width: min(410px, 34vw); min-width: 320px;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; border: 1px solid rgba(226, 213, 183, 0.16);
  background: rgba(12, 23, 19, 0.9); color: #f1ebdf;
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
html.variante-b .explorador { background: rgba(250, 249, 247, 0.97); color: var(--verde-800); border-color: var(--linea); box-shadow: 0 30px 80px rgba(26, 46, 38, 0.22); }
.explorador__cabeza { position: relative; display: grid; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--borde); }
.explorador__volver {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.3em; min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--borde); background: none; color: inherit; cursor: pointer;
  font: 500 13px/1 var(--sans);
}
@media (hover: hover) { .explorador__volver:hover { border-color: var(--oro); } }
.explorador__plegar { display: none; }
.buscador { position: relative; }
.buscador__icono { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; opacity: 0.7; pointer-events: none; }
.buscador__campo {
  width: 100%; min-height: 46px; padding: 0 14px 0 40px;
  border-radius: 12px; border: 1px solid var(--borde); background: rgba(255, 255, 255, 0.07); color: inherit;
  font: 500 15px/1.2 var(--sans);
}
.buscador__campo::placeholder { color: var(--tinta-suave); opacity: 0.85; }
.buscador__campo:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }
html.variante-b .buscador__campo { background: #fff; }
.buscador__lista {
  touch-action: pan-y;
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 3;
  max-height: min(330px, 50vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  border-radius: 12px; background: #fbfaf7; color: var(--verde-800);
  box-shadow: 0 18px 50px rgba(5, 12, 9, 0.35);
}
.buscador__lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 42px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.buscador__lista li[aria-selected="true"] { background: var(--crema-200); }
@media (hover: hover) { .buscador__lista li:hover { background: var(--crema-200); } }
.sugerencia__nombre { font-weight: 600; }
.sugerencia__detalle { font-size: 12.5px; color: #587063; text-align: right; }
.explorador__cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 20px; }
.explorador__titulo { margin: 0 0 8px; font: 500 34px/1.05 var(--serif); }
.explorador__titulo:focus { outline: none; }
.explorador__resumen { margin-bottom: 12px; font-size: 14px; line-height: 1.5; color: var(--tinta-suave); }
.explorador__historia, .explorador__ciudad {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0; margin: 0 0 10px;
  border: 0; background: none; cursor: pointer; color: var(--oro-texto); font: 600 13.5px/1.2 var(--sans);
  text-decoration: underline; text-underline-offset: 3px;
}
.explorador__ciudad { margin: 4px 0 0; }
.explorador__grupo { margin: 16px 0 8px; font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--tinta-suave); }
.explorador__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.explorador__vacio { margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--borde); color: var(--tinta-suave); font-size: 14px; }
.explorador__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 18px 0 6px; }
.mini { position: relative; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo-ficha); transition: border-color 0.2s, box-shadow 0.2s; }
html.variante-b .mini { background: #fff; }
.mini.es-elegida { border-color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro); }
.mini__boton {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start;
  width: 100%; padding: 10px 10px 34px; border: 0; border-radius: 12px; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.mini__boton--fuera { cursor: default; }
@media (hover: hover) { .mini:hover { border-color: var(--oro); } }
.mini__foto { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; background: rgba(127, 127, 127, 0.16); }
.mini__foto--vacia { display: flex; align-items: center; justify-content: center; }
.mini__foto--vacia img { width: 40%; opacity: 0.6; }
.mini__texto { display: grid; gap: 2px; min-width: 0; }
.mini__etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/1.35 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro-texto); }
.mini__titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 16px/1.2 var(--serif); }
.mini__datos { font-size: 12.5px; line-height: 1.35; color: var(--tinta-suave); }
.mini__precio { font: 600 17px/1.2 var(--serif); }
.mini__ficha {
  position: absolute; left: 106px; bottom: 4px;
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px;
  font-size: 12.5px; font-weight: 600; color: var(--oro-texto); text-decoration: none;
}
.mini__ficha:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Detalle de un inmueble dentro del mapa. */
.detalle__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.detalle__volver {
  min-width: 0; max-width: 68%; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--borde); background: none; color: inherit; cursor: pointer;
  font: 500 13px/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detalle__nav { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tinta-suave); white-space: nowrap; }
.detalle__nav button {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--borde);
  background: none; color: inherit; font: 400 20px/1 var(--sans); cursor: pointer;
}
@media (hover: hover) { .detalle__volver:hover, .detalle__nav button:hover { border-color: var(--oro); } }
.detalle__fotos {
  display: flex; gap: 8px; margin: 0 -16px 14px; padding: 0 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain;
}
.detalle__fotos img {
  flex: 0 0 86%; height: 210px; object-fit: cover; border-radius: 12px; scroll-snap-align: center;
  background: rgba(127, 127, 127, 0.16);
}
.detalle__fotos--vacia { height: 150px; margin: 0 0 14px; padding: 0; align-items: center; justify-content: center; border-radius: 12px; background: rgba(127, 127, 127, 0.12); }
.detalle__fotos--vacia img { flex: none; width: 28%; height: auto; opacity: 0.6; background: none; }
.detalle__etiqueta { margin: 0 0 4px; font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--oro-texto); }
.detalle__titulo { margin: 0 0 6px; font: 500 26px/1.12 var(--serif); }
.detalle__titulo:focus { outline: none; }
.detalle__titulo:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.detalle__precio { margin: 0 0 12px; font: 600 26px/1.1 var(--serif); }
.detalle__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.detalle__datos div { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borde); }
.detalle__datos dt { font: 600 10px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
.detalle__datos dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; }
.detalle__caracteristicas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.detalle__caracteristicas li { padding: 4px 10px; border-radius: 999px; background: rgba(201, 169, 110, 0.18); font-size: 12.5px; }
.detalle__lugar { margin: 0 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--tinta-suave); }
.detalle__lugar strong { color: var(--tinta); font-weight: 600; }
.detalle__zona { margin: 0; font-size: 12.5px; color: var(--tinta-suave); }
.detalle__ref { margin: 8px 0 0; font-size: 11.5px; color: var(--tinta-suave); }

.mapa-controles {
  position: absolute; z-index: 5; right: clamp(16px, 3vw, 40px); bottom: 46px;
  display: flex; flex-direction: column; gap: 6px;
}
.mapa-controles button {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border-radius: 12px; border: 1px solid rgba(226, 213, 183, 0.28); cursor: pointer;
  background: rgba(9, 18, 14, 0.84); color: #f1e6cd; font: 500 21px/1 var(--sans);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (hover: hover) { .mapa-controles button:hover { border-color: var(--oro); } }
.escena--dia .mapa-controles button { background: rgba(255, 255, 255, 0.94); color: var(--verde-800); border-color: rgba(45, 74, 62, 0.22); }
.mapa-controles__brujula { width: 18px; height: 18px; }
.mapa-ayuda {
  position: absolute; z-index: 4; margin: 0;
  top: calc(var(--alto-tira) + var(--alto-cabecera) + 14px);
  left: calc(var(--margen-panel) + max(320px, min(410px, 34vw)) + 18px);
  padding: 7px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(9, 18, 14, 0.7); color: #e9dfc8; font-size: 12px; line-height: 1.3;
}
.escena--dia .mapa-ayuda { background: rgba(255, 255, 255, 0.85); color: var(--verde-800); }

/* Nombres en el mapa al explorar: barrios (con cuántos inmuebles) y distritos. */
/* Sobre una pastilla: se leen igual de día, al atardecer y de noche. */
.etiqueta--mapa {
  translate: -50% -50%; padding: 3px 8px; border-radius: 999px;
  font: 600 12px/1.15 var(--sans); letter-spacing: 0.01em; color: #f1e8d2;
  background: rgba(9, 18, 14, 0.66); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.etiqueta--mapa.con-viviendas { color: #f7e2a6; }
.etiqueta--mapa.es-elegida { background: var(--oro); color: var(--verde-900); }
.etiqueta__n {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 4px;
  border-radius: 999px; background: var(--oro); color: var(--verde-900);
  font: 700 10.5px/1 var(--sans); vertical-align: 1px;
}
.etiqueta--mapa.es-elegida .etiqueta__n { background: var(--verde-900); color: var(--oro-claro); }
.escena--dia .etiqueta--mapa { color: #1a2e26; background: rgba(250, 249, 247, 0.88); box-shadow: 0 2px 8px rgba(26, 46, 38, 0.16); }
.escena--dia .etiqueta--mapa.con-viviendas { color: #5a4313; }
.escena--dia .etiqueta--mapa.es-elegida { background: var(--verde-700); color: #fff; }
.escena--dia .etiqueta__n { background: var(--verde-700); color: #fff; }
.escena--dia .etiqueta--mapa.es-elegida .etiqueta__n { background: var(--oro); color: var(--verde-900); }
.etiqueta--distrito {
  translate: -50% -50%; padding: 4px 10px; border-radius: 999px;
  font: 600 11px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240, 232, 214, 0.9);
  background: rgba(9, 18, 14, 0.5);
}
.escena--dia .etiqueta--distrito { color: rgba(26, 46, 38, 0.85); background: rgba(250, 249, 247, 0.72); }

/* Plano 2D al explorar. */
.barrio.es-pulsable { cursor: pointer; }
.barrio.barrio--con { fill: var(--svg-recorrido); }
.mapa-svg--explorar .barrio { stroke-width: 1.2; }
.mapa-svg--explorar .barrio.es-activo { stroke-width: 3; }
.pin { cursor: pointer; }
.pin--elegido { fill: var(--svg-pin-dest); stroke: var(--svg-oro); stroke-width: 2.5; }
.pin--resaltado { fill: var(--svg-pin-dest); }
.mapa-svg--vender .pin:not(.pin--elegido) { opacity: 0.45; }
.mapa-svg__elegido { font-weight: 700; }

/* ── Comprar o vender ───────────────────────────────────────────────── */
.explorador__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.modos { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(255, 255, 255, 0.06); }
.modos button {
  min-height: 32px; padding: 0 15px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: inherit; font: 600 13px/1 var(--sans);
  transition: background-color 0.2s, color 0.2s;
}
@media (hover: hover) { .modos button:hover { background: rgba(127, 127, 127, 0.14); } }
.modos button[aria-pressed="true"] { background: var(--oro); color: var(--verde-900); }
html.variante-b .modos { background: #fff; }
html.variante-b .modos button[aria-pressed="true"] { background: var(--verde-700); color: #fff; }
.solo-vender, html.modo-vender .solo-comprar { display: none; }
html.modo-vender .solo-vender { display: inline; }

/* Total con impuestos y gastos, bajo el precio del detalle. */
.detalle__resumen { margin: -6px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--tinta-suave); }
.detalle__resumen strong { color: var(--tinta); font-weight: 600; }
.detalle__resumen button, .enlace-boton {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--oro-texto); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* Calculadora (motor de la web). */
.calculo { margin: 18px 0 8px; padding: 16px 14px 12px; border-radius: 14px; border: 1px solid var(--borde); background: var(--fondo-ficha); }
html.variante-b .calculo { background: #fff; }
.calculo--venta, html.variante-b .calculo--venta { margin: 2px 0 0; padding: 0; border: 0; background: none; }
.calculo__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 10px; }
.calculo__titulo { margin: 0; font: 500 22px/1.15 var(--serif); }
.calculo__titulo:focus { outline: none; }
.sello {
  display: inline-block; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  font: 600 9.5px/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--oro-texto); vertical-align: 1px;
}
.sello--demo { justify-self: start; margin: 0 0 8px; border-style: dashed; border-radius: 8px; color: var(--tinta-suave); }
.calculo__total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
  margin: 0 0 10px; padding: 12px; border-radius: 10px; background: rgba(201, 169, 110, 0.15);
}
.calculo__total span { font-size: 13px; color: var(--tinta-suave); }
.calculo__total output { font: 600 25px/1.1 var(--serif); white-space: nowrap; }
.calculo__desglose { display: grid; margin: 0 0 12px; }
.calculo__desglose div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 2px; border-bottom: 1px solid var(--borde); font-size: 13px; }
.calculo__desglose dt { color: var(--tinta-suave); }
.calculo__desglose dd { margin: 0; font-weight: 600; white-space: nowrap; }
.calculo__opciones { display: grid; gap: 8px; margin: 0 0 10px; }
.campo { display: grid; min-width: 0; gap: 4px; margin: 0 0 10px; font-size: 13px; overflow-wrap: anywhere; }
.campo__nombre { font-size: 12.5px; font-weight: 600; }
.campo small { font-size: 11.5px; line-height: 1.4; color: var(--tinta-suave); }
.campo input:not([type="checkbox"]), .campo select {
  width: 100%; min-width: 0; max-width: 100%; min-height: 40px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--borde); background: rgba(255, 255, 255, 0.07); color: inherit;
  font: 500 14px/1.2 var(--sans);
}
html.variante-b .campo input:not([type="checkbox"]), html.variante-b .campo select { background: #fff; }
.campo select option { color: var(--verde-800); background: #fff; }
.campo input:focus-visible, .campo select:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }
.campo input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.campo input[type="number"]::-webkit-inner-spin-button, .campo input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.campo__valor { position: relative; display: block; }
.campo__valor input { padding-right: 46px !important; }
.campo__valor span { position: absolute; right: 10px; top: 50%; translate: 0 -50%; font-size: 12.5px; color: var(--tinta-suave); pointer-events: none; }
.campo--fila { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; }
.campo--fila select { min-height: 36px; }
.campo--marca { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--tinta-suave); cursor: pointer; }
.campo--marca input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--oro); }
.interruptor { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-self: end; }
.interruptor button {
  min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde); cursor: pointer;
  background: none; color: inherit; font: 600 12.5px/1 var(--sans);
}
.interruptor button[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--verde-900); }
html.variante-b .interruptor button[aria-pressed="true"] { background: var(--verde-700); border-color: var(--verde-700); color: #fff; }
.interruptor--varias { justify-self: start; }
.interruptor--varias button { min-height: 36px; padding: 6px 12px; line-height: 1.2; text-align: left; }
.calculo__mas { margin: 0 0 10px; padding-top: 6px; border-top: 1px solid var(--borde); }
.calculo__mas summary, .calculo__fuentes summary { display: flex; align-items: center; min-height: 36px; list-style: none; cursor: pointer; font-weight: 600; }
.calculo__mas summary { font-size: 13.5px; color: var(--oro-texto); }
.calculo__mas summary::-webkit-details-marker, .calculo__fuentes summary::-webkit-details-marker { display: none; }
.calculo__mas summary::before {
  content: '+'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px;
  border-radius: 50%; border: 1px solid currentColor; font: 500 13px/1 var(--sans);
}
.calculo__mas[open] summary::before { content: '−'; }
.calculo__mas[open] summary { margin-bottom: 6px; }
.calculo__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; align-items: start; }
.calculo__grupo { min-width: 0; margin: 0 0 10px; padding: 8px 10px 0; border: 1px dashed var(--borde); border-radius: 10px; }
.calculo__grupo legend { padding: 0 6px; font-size: 12.5px; font-weight: 600; }
.calculo__nota { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--tinta-suave); }
.calculo__nota:empty { display: none; }
.calculo__total--hipoteca { margin-top: 2px; }
.calculo__revision { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--borde); }
.calculo__revision .sello--demo { margin: 0; }
.calculo__revision .calculo__nota { flex-basis: 100%; margin: 2px 0 0; }
.calculo__revision.es-enviada { padding-top: 0; border-top: 0; }
.calculo__confirmacion { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; flex-basis: 100%; min-width: 0; padding: 14px; border: 1px solid rgba(137, 173, 144, 0.35); border-radius: 10px; background: rgba(137, 173, 144, 0.08); }
.calculo__confirmacion-marca { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--verde-700); color: #fff; font: 600 14px/1 var(--sans); }
.calculo__confirmacion strong { display: block; font-size: 14px; line-height: 1.4; }
.calculo__confirmacion p { margin: 4px 0 0; color: var(--tinta-suave); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.boton--pequeno { min-height: 38px; padding: 0 14px; font-size: 13px; }
.calculo__fuentes { font-size: 12px; color: var(--tinta-suave); }
.calculo__fuentes p { margin: 4px 0 6px; }
.calculo__fuentes ul { margin: 0; padding-left: 16px; }
.calculo__fuentes a { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--oro-texto); }

/* Vender: los tres pasos de la página Vender, dentro del mapa. */
.herramientas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 14px 0 8px; }
.herramienta, .calculo, .calculo__acceso, .calculo__envio, .calculo__opciones, .estudio { min-width: 0; overflow-wrap: anywhere; }
.explorador .boton { max-width: 100%; white-space: normal; padding-top: 9px; padding-bottom: 9px; line-height: 1.3; text-align: center; }
.explorador .campo input:not([type="checkbox"]), .explorador .campo select { font-size: 16px; }
.herramienta { border-radius: 14px; border: 1px solid var(--borde); background: var(--fondo-ficha); transition: border-color 0.2s; }
html.variante-b .herramienta { background: #fff; }
.herramienta.es-abierta { border-color: rgba(201, 169, 110, 0.65); }
.herramienta__titulo { margin: 0; }
.herramienta__boton {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 10px 12px 4px;
  border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  font: 500 19px/1.15 var(--serif);
}
.herramienta__boton::after {
  content: '+'; flex: none; margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--borde); color: var(--oro-texto); font: 400 16px/1 var(--sans);
}
.herramienta.es-abierta .herramienta__boton::after { content: '−'; }
@media (hover: hover) { .herramienta__boton:hover::after { border-color: var(--oro); } }
.herramienta__n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--oro); color: var(--verde-900); font: 700 13px/1 var(--sans); }
html.variante-b .herramienta__n { background: var(--verde-700); color: #fff; }
.herramienta__texto { margin: 0; padding: 0 12px 12px 50px; font-size: 13px; line-height: 1.45; color: var(--tinta-suave); }
.herramienta__cuerpo { padding: 2px 12px 14px; }
.valorador { min-height: 500px; margin: 0 -4px 10px; border-radius: 10px; overflow: hidden; background: #fff; }
.valoracion-impuestos { margin: 20px 0; padding: 16px; border: 1px solid var(--oro); border-radius: 10px; }
.valoracion-impuestos h4 { margin: 0 0 14px; font-size: 20px; }
.valoracion-impuestos select { width: 100%; min-width: 0; }
.valoracion-impuestos button { max-width: 100%; white-space: normal; }
.estudio { display: grid; }
.estudio .boton { justify-self: start; margin: 2px 0 8px; }
/* El valorador es el objetivo: más grande y en dorado. */
.herramienta--principal, html.variante-b .herramienta--principal { border-color: rgba(201, 169, 110, 0.75); background: rgba(201, 169, 110, 0.1); }
.herramienta--principal .herramienta__boton { min-height: 58px; font-size: 23px; }
/* En el escritorio, vendiendo, el panel es algo más ancho. */
@media (min-width: 761px) {
  html.modo-vender .explorador { width: min(480px, 38vw); }
  html.modo-vender .mapa-ayuda { left: calc(var(--margen-panel) + max(320px, min(480px, 38vw)) + 18px); }
}

/* Así la vendemos: los pasos de la web, que el mapa acompaña. */
.historia { margin: 6px 0 4px; padding: 14px 14px 10px; border-radius: 14px; border: 1px solid var(--borde); background: var(--fondo-ficha); }
html.variante-b .historia { background: #fff; }
.historia__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.historia__antetitulo { margin: 0; font: 600 10.5px/1.35 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--oro-texto); }
.historia__cuenta { flex: none; font-size: 12px; color: var(--tinta-suave); }
.historia__pasos { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.historia__pasos button {
  min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borde); cursor: pointer;
  background: none; color: inherit; font: 600 12.5px/1 var(--sans);
}
@media (hover: hover) { .historia__pasos button:hover, .historia__ir:hover { border-color: var(--oro); } }
.historia__pasos button[aria-current="step"] { background: var(--oro); border-color: var(--oro); color: var(--verde-900); }
html.variante-b .historia__pasos button[aria-current="step"] { background: var(--verde-700); border-color: var(--verde-700); color: #fff; }
.historia__titulo { margin: 0 0 4px; font: 500 24px/1.15 var(--serif); }
.historia__texto { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--tinta-suave); }
.historia__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; padding: 0; list-style: none; }
.historia__chips li { padding: 5px 8px; border: 1px solid var(--borde); border-radius: 999px; font-size: 11px; line-height: 1.2; color: var(--tinta-suave); }
.historia__objecion { margin: 0 0 10px; color: var(--oro-texto); font: italic 500 12.5px/1.4 var(--serif); }
.historia__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.historia__ir {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--borde); cursor: pointer;
  background: none; color: inherit; font: 400 20px/1 var(--sans);
}
.historia__mapa {
  min-height: 38px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--oro-texto); font: 600 13.5px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px;
}
.historia__nota { margin-left: auto; font-size: 11px; color: var(--tinta-suave); }
.historia-cierre { margin: 12px 0 18px; padding: 14px; border-left: 2px solid var(--oro); background: rgba(201, 169, 110, 0.08); }
.historia-cierre p { margin: 0 0 10px; font: 500 18px/1.25 var(--serif); }
.historia-cierre .boton { width: 100%; text-align: center; }

/* Cifras de la página Vender de la web y las reseñas de Google: pequeñas, abajo. */
.cifras { margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--borde); }
.cifras__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 10px 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.cifras__lista li { display: grid; align-content: start; gap: 2px; }
.cifras__lista strong { font: 600 20px/1.1 var(--serif); font-variant-numeric: lining-nums; color: var(--oro-texto); }
.cifras__lista span { font-size: 11px; line-height: 1.3; color: var(--tinta-suave); }

/* Fichas como punto: lo que no cabe ni como precio (así se ven todas). El
   punto va sobre la cabeza del pin, sin tallo; el de un grupo lleva cuántos. */
.etiqueta--ficha:not(.es-punto) { z-index: 1; }
.etiqueta--ficha.es-elegida { z-index: 3; }
.etiqueta--ficha.es-punto, .escena--dia .etiqueta--ficha.es-punto {
  --tallo: 0px; translate: -50% -50%; z-index: 0;
  display: grid; place-items: center; width: 36px; height: 36px; max-width: none; padding: 0;
  border: 0; border-radius: 50%; background: none; box-shadow: none;
}
.etiqueta--ficha.es-punto > * { display: none; }
.etiqueta--ficha.es-punto::after { display: none; }
.etiqueta--ficha:not(.es-punto)::before { content: ''; position: absolute; left: 50%; top: calc(100% + var(--tallo)); translate: -50% -50%; width: 14px; height: 14px; border: 3px solid #fff8e8; border-radius: 50%; background: #c49a3c; box-shadow: 0 0 0 3px #173c2f99, 0 2px 7px #0009; pointer-events: none; }
.etiqueta--ficha.es-punto.es-grupo .ficha-mapa__n:not(:empty) { display: grid; min-width: 18px; height: 18px; padding: 0 4px; top: -4px; right: -5px; font-size: 10px; }
.etiqueta--ficha.es-punto::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  background: #ffdc83; border: 3px solid #fff8e8;
  box-shadow: 0 0 0 4px #173c2fbb, 0 0 12px #ffcf6377, 0 2px 6px #0008;
}
.escena--dia .etiqueta--ficha.es-punto::before { background: #d7a943; border-color: #fff; box-shadow: 0 0 0 4px #173c2fbb, 0 0 12px #ffcf6377, 0 2px 6px #0008; }
/* ── Móvil ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --alto-hoja-inm: 66svh; --alto-hoja-inm-alta: 82svh; }
  .escena__explorar, html.variante-a .escena__explorar { top: auto; left: auto; right: 8px; bottom: 26px; min-height: 36px; padding: 0 12px; font-size: 12px; }
  .escena__leyenda { right: 176px; }
  .modos button { min-height: 38px; padding: 0 16px; }
  .valorador { margin: 0 -8px 10px; }
  /* Los pasos pasan a otra fila antes de solaparse en pantallas estrechas. */
  .historia { padding: 12px 12px 8px; }
  .historia__pasos { flex-wrap: wrap; gap: 4px; }
  .historia__pasos li { flex: 1 0 auto; min-width: 0; }
  .historia__pasos button { width: 100%; min-height: 36px; padding: 0 8px; font-size: 11px; white-space: nowrap; }
  .historia__texto { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
  .historia-cierre { padding: 12px; }
  /* Fichas compactas: la foto pequeña al lado del precio. */
  .etiqueta--ficha { width: auto; max-width: 196px; display: grid; grid-template-columns: 54px auto; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; }
  .etiqueta--ficha .ficha-mapa__foto { width: 54px; height: 42px; border-radius: 6px; background-size: 20px; }
  .etiqueta--ficha .ficha-mapa__texto { padding: 0; }
  .etiqueta--ficha .ficha-mapa__precio { font-size: 15px; }
  .etiqueta--ficha .ficha-mapa__datos { font-size: 10.5px; }
  .etiqueta--ficha.es-pastilla { display: block; padding: 5px 9px; }
  .explorador__cabeza { padding: 24px 14px 10px; gap: 8px; }
  .explorador__volver { min-height: 40px; padding: 0 12px; }
  .explorador__plegar {
    display: block; position: absolute; top: 0; left: 50%; translate: -50% 0;
    width: 72px; height: 22px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  }
  .explorador__plegar::before { content: ''; display: block; width: 40px; height: 4px; margin: 9px auto 0; border-radius: 2px; background: currentColor; opacity: 0.35; }
  .buscador__campo { min-height: 44px; font-size: 16px; }
  .explorador__titulo { font-size: 28px; }
  .explorador__cuerpo { padding: 14px 14px 16px; }
  .detalle__fotos { margin: 0 -14px 12px; padding: 0 14px; }
  .detalle__fotos img { flex-basis: 78%; height: 150px; }
  .detalle__cabeza { margin-bottom: 8px; }
  .detalle__titulo { font-size: 21px; }
  .detalle__precio { font-size: 22px; margin-bottom: 10px; }
  .mapa-ayuda { display: none !important; }
}

/* ── Móvil inmersivo: el mapa a pantalla completa ─────────────────────
   La home del móvil es el mapa, explorando para comprar con todas las
   viviendas. Arriba, la marca, la variante y el menú; sobre el cielo, el
   título; abajo, una tarjeta con lo elegido, los barrios y las dos CTA. La
   hoja (lista, detalle con calculadora, vender) sube cuando se pide.
   --alto-barra-movil lo pone app.js (mide la barra de abajo). */
.solo-inmersiva { display: none !important; }
html.inmersiva .no-inmersiva { display: none !important; }
html.variante-a {
  --vidrio: rgba(10, 19, 15, 0.74); --vidrio-solido: rgba(12, 23, 19, 0.94);
  --vidrio-borde: rgba(226, 213, 183, 0.24); --vidrio-tinta: #f3ead6;
}
html.variante-b {
  --vidrio: rgba(250, 249, 247, 0.88); --vidrio-solido: rgba(255, 255, 255, 0.97);
  --vidrio-borde: rgba(45, 74, 62, 0.16); --vidrio-tinta: var(--verde-800);
}
.barra-movil__ctas { display: flex; gap: 8px; }
html:not(.inmersiva) .barra-movil__ctas { flex: 1; }

@media (max-width: 760px) {
  html.inmersiva .solo-inmersiva { display: revert !important; }
  html.inmersiva .solo-inmersiva[hidden] { display: none !important; }
  html.inmersiva { overflow: hidden; }
  html.inmersiva body { padding-bottom: 0; overscroll-behavior: none; }
  html.inmersiva .tira, html.inmersiva .barrios, html.inmersiva .escena__flechas, html.inmersiva .escena__explorar,
  html.inmersiva .luz, html.inmersiva .cierre, html.inmersiva .pie { display: none !important; }

  /* Mapa: toda la pantalla, detrás de todo. */
  html.inmersiva .escenario {
    position: fixed; inset: 0; z-index: 60; display: block; height: auto; margin: 0; padding: 0; background: none;
    align-self: stretch; justify-self: stretch;
  }
  html.inmersiva .escena { position: absolute; inset: 0; height: auto; min-height: 0; border-radius: 0; box-shadow: none; }

  /* Cabecera: la marca y, a la derecha, la variante (prototipo) y el menú, en
     cápsulas de vidrio sobre el mapa. */
  html.inmersiva .cabecera, html.variante-a.inmersiva .cabecera, html.variante-b.inmersiva .cabecera {
    /* Por encima de la barra de abajo: el menú abierto puede llegar hasta ella. */
    position: fixed; top: 0; left: 0; right: 0; z-index: 78; height: auto;
    display: flex; align-items: center; gap: 8px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 0 10px;
    background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
    pointer-events: none;
  }
  html.inmersiva .cabecera > * { pointer-events: auto; }
  html.inmersiva .marca, html.inmersiva .cabecera__prototipo, html.inmersiva .boton-menu {
    background: var(--vidrio); border: 1px solid var(--vidrio-borde); color: var(--vidrio-tinta);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  }
  html.inmersiva .marca { min-height: 44px; gap: 8px; padding: 0 14px 0 6px; border-radius: 999px; }
  html.inmersiva .marca__logo { width: 30px; height: 30px; }
  html.inmersiva .marca__texto { font-size: 17px; }
  html.inmersiva .marca__texto small { display: none; }
  .cabecera__prototipo { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; }
  html.inmersiva .cabecera__prototipo { display: inline-flex !important; }
  .cabecera__prototipo .tira__opcion { min-width: 36px; min-height: 36px; padding: 0 8px; justify-content: center; color: inherit; font: 600 13px/1 var(--sans); }
  .cabecera__prototipo .tira__opcion[aria-current="true"] { background: var(--oro); color: var(--verde-900); }
  html.inmersiva .boton-menu { width: 44px; height: 44px; border-radius: 50%; }
  html.inmersiva .menu { right: 10px; max-height: calc(100svh - 76px); overflow-y: auto; overscroll-behavior: contain; }

  /* Portada: el título sobre el cielo (sigue la luz del mapa) y cuántos
     inmuebles hay. Se va al elegir algo. */
  html.inmersiva .pasos, html.variante-a.inmersiva .pasos, html.variante-b.inmersiva .pasos {
    position: fixed; z-index: 65; left: 0; right: 0; top: calc(62px + env(safe-area-inset-top, 0px));
    width: auto; margin: 0; padding: 0 18px; display: block; overflow: visible; scroll-snap-type: none;
    pointer-events: none; visibility: visible; opacity: 1;
    transition: opacity 0.35s, visibility 0s;
  }
  /* Sin portada, el título se aparta pero sigue siendo el h1 de la página. */
  html.inmersiva:not(.con-portada) .pasos { opacity: 0; transition: opacity 0.25s; }
  html.inmersiva:not(.con-portada) .intro__resumen { visibility: hidden; transition: visibility 0s 0.25s; }
  html.inmersiva .capitulo { display: none; }
  html.inmersiva .intro, html.variante-b.inmersiva .intro { display: block; flex: none; min-height: 0; padding: 0; border: 0; }
  html.inmersiva .intro .paso__panel {
    pointer-events: none; max-width: 21em; height: auto; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.inmersiva .intro .paso__antetitulo, html.inmersiva .intro__texto, html.inmersiva .intro__pista, html.inmersiva .intro__acciones { display: none; }
  html.inmersiva .intro h1 {
    margin: 0 0 8px; font-size: clamp(34px, 10.5vw, 44px); line-height: 0.98;
    color: #f8f1e2; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  html.inmersiva .intro h1 em { color: #edd59c; }
  html.inmersiva .intro__resumen {
    margin: 0; max-width: 23em; font-size: 13.5px; line-height: 1.45;
    color: rgba(248, 241, 226, 0.94); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.55);
  }
  html.inmersiva .intro__resumen a { pointer-events: auto; color: #edd59c; font-weight: 600; text-underline-offset: 3px; }
  /* Velo suave detrás del título, del color contrario a la tinta. */
  html.inmersiva .pasos::before {
    content: ''; position: fixed; z-index: -1; left: 0; right: 0; top: 0; height: calc(250px + env(safe-area-inset-top, 0px));
    pointer-events: none; background: linear-gradient(to bottom, rgba(6, 12, 9, 0.62), rgba(6, 12, 9, 0.3) 55%, rgba(6, 12, 9, 0));
  }
  html.inmersiva.cielo-claro .pasos::before { background: linear-gradient(to bottom, rgba(250, 249, 247, 0.7), rgba(250, 249, 247, 0.35) 55%, rgba(250, 249, 247, 0)); }
  html.inmersiva.cielo-claro .intro h1 { color: var(--verde-900); text-shadow: 0 1px 18px rgba(255, 255, 255, 0.85), 0 0 2px rgba(255, 255, 255, 0.9); }
  html.inmersiva.cielo-claro .intro h1 em { color: var(--verde-600); }
  html.inmersiva.cielo-claro .intro__resumen { color: var(--verde-900); text-shadow: 0 1px 10px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.9); }
  html.inmersiva.cielo-claro .intro__resumen a { color: var(--oro-oscuro); }

  /* Sobre el mapa, encima de la barra: leyenda, controles y avisos. */
  html.inmersiva .escena__leyenda { left: 12px; right: 62px; bottom: calc(var(--alto-barra-movil, 150px) + 6px); max-width: none; text-align: left; font-size: 9.5px; }
  html.inmersiva .escena__aviso { top: auto; left: 12px; right: auto; bottom: calc(var(--alto-barra-movil, 150px) + 40px); margin: 0; }
  html.inmersiva .mapa-controles { top: auto; right: 10px; bottom: calc(var(--alto-barra-movil, 150px) + 12px); gap: 6px; }
  html.inmersiva .mapa-controles button { width: 40px; height: 40px; border-radius: 50%; }
  html.inmersiva.hoja-abierta .escena__leyenda, html.inmersiva.hoja-abierta .mapa-controles, html.inmersiva.hoja-abierta .escena__aviso { visibility: hidden; }

  /* Barra de abajo: tarjeta flotante, barrios y las dos CTA. */
  html.inmersiva .barra-movil, html.variante-a.inmersiva .barra-movil, html.variante-b.inmersiva .barra-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    display: flex; flex-direction: column; gap: 8px;
    padding: 0 0 calc(10px + env(safe-area-inset-bottom, 0px)); border: 0; background: none;
    pointer-events: none;
  }
  html.inmersiva .barra-movil > * { pointer-events: auto; }
  html.variante-a.inmersiva .barra-movil::before {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -36px; bottom: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(6, 12, 9, 0.72), rgba(6, 12, 9, 0.35) 55%, rgba(6, 12, 9, 0));
  }
  html.inmersiva.hoja-abierta .barra-movil::before { display: none; }
  html.inmersiva .barra-movil__ctas { padding: 0 12px; }
  html.inmersiva .barra-movil .boton { flex: 1; min-height: 52px; padding: 0 10px; font-size: 15px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); }
  html.inmersiva .barra-movil .boton--linea { background: var(--verde-700); border-color: var(--verde-700); color: #f6f1e6; }
  html.inmersiva.hoja-abierta .atajos, html.inmersiva.hoja-abierta .flotante { display: none !important; }
  html.inmersiva.hoja-abierta .barra-movil { padding-top: 8px; background: var(--fondo); }

  .atajos__lista {
    position: relative; display: flex; gap: 6px; margin: 0; padding: 2px 12px 4px; list-style: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-padding: 0 12px; scrollbar-width: none;
  }
  .atajos__lista::-webkit-scrollbar { display: none; }
  .atajo {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 240px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--vidrio-borde); background: var(--vidrio); color: var(--vidrio-tinta);
    font: 600 13px/1 var(--sans); white-space: nowrap; cursor: pointer;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  }
  .atajo__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .atajo .icono { width: 14px; height: 14px; }
  .atajo--todos { border-style: dashed; }
  .atajo[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--verde-900); }
  html.variante-b .atajo[aria-pressed="true"] { background: var(--verde-700); border-color: var(--verde-700); color: #fff; }
  .atajo__n {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: rgba(201, 169, 110, 0.3); font: 700 11px/1 var(--sans);
  }
  .atajo[aria-pressed="true"] .atajo__n { background: rgba(15, 28, 23, 0.16); }
  html.variante-b .atajo[aria-pressed="true"] .atajo__n { background: rgba(255, 255, 255, 0.22); }
  html.modo-vender .atajos .atajo__n { display: none; }

  /* Tarjeta flotante: lo elegido, sobre los barrios. Tocarla sube la hoja. */
  .flotante { padding: 0 12px; }
  .flotante__tarjeta {
    position: relative; border-radius: 18px; overflow: hidden;
    background: var(--vidrio-solido); color: var(--vidrio-tinta); border: 1px solid var(--vidrio-borde);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
    animation: flotante-entra 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .flotante__cuerpo { display: flex; gap: 12px; align-items: center; padding: 10px 46px 4px 10px; cursor: pointer; }
  /* Deslizar en horizontal es de la tarjeta (anterior y siguiente). */
  .flotante--vivienda, .flotante--historia { touch-action: pan-y; }
  /* Vender: el paso de «así la vendemos», con el mapa a la vista encima. */
  .flotante--historia .flotante__titulo { white-space: normal; font-size: 21px; line-height: 1.1; }
  .flotante__linea--historia { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  html.inmersiva.hoja-abierta .explorador__cabeza { touch-action: none; }
  .flotante--barrio .flotante__cuerpo, .flotante--vender .flotante__cuerpo { padding: 12px 46px 2px 14px; }
  .flotante__foto { flex: none; width: 88px; height: 66px; border-radius: 11px; object-fit: cover; background: rgba(127, 127, 127, 0.18); }
  .flotante__foto--vacia { display: grid; place-items: center; }
  .flotante__foto--vacia img { width: 40%; opacity: 0.6; }
  .flotante__texto { display: grid; gap: 2px; min-width: 0; }
  .flotante__etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro-texto); }
  .flotante__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 17px/1.2 var(--serif); }
  .flotante__titulo--lugar { white-space: normal; font-size: 25px; line-height: 1.05; }
  .flotante__historia { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--tinta-suave); }
  .flotante__linea { font-size: 13px; line-height: 1.35; color: var(--tinta-suave); }
  .flotante__linea strong { font: 600 18px/1.2 var(--serif); color: var(--vidrio-tinta); }
  .flotante__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 6px 4px; }
  .flotante__ver {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; border: 0; background: none; cursor: pointer;
    color: var(--oro-texto); font: 600 13px/1.2 var(--sans); text-align: left;
  }
  .flotante__ver::after { content: '→'; margin-left: 6px; }
  .flotante__nav { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }
  .flotante__nav button {
    width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--vidrio-borde); cursor: pointer;
    background: none; color: inherit; font: 400 20px/1 var(--sans);
  }
  .flotante__cerrar {
    position: absolute; top: 6px; right: 6px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(127, 127, 127, 0.16); color: inherit; font: 400 22px/1 var(--sans);
  }

  /* La hoja: sube desde la barra y la deja a la vista (las CTA siguen ahí). */
  html.inmersiva .explorador, html.variante-b.inmersiva .explorador {
    position: absolute; left: 0; right: 0; top: auto; bottom: var(--alto-barra-movil, 76px);
    width: auto; min-width: 0; height: var(--alto-hoja-inm);
    border-radius: 20px 20px 0 0; border-bottom: 0;
    transform: translateY(calc(100% + var(--alto-barra-movil, 76px))); visibility: hidden;
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.38s, height 0.3s;
  }
  html.inmersiva.hoja-abierta .explorador {
    transform: none; visibility: visible;
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s, height 0.3s;
  }
  html.inmersiva.hoja-abierta.hoja-alta .explorador { height: var(--alto-hoja-inm-alta); }

  /* Todos los barrios, en la hoja. */
  .lista-barrios { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
  .lista-barrios button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--borde); background: var(--fondo-ficha); color: inherit; font: 500 13.5px/1.2 var(--sans); text-align: left;
  }
  html.variante-b .lista-barrios button { background: #fff; }
  .explorador__relato { margin: 2px 0 12px; }
  .explorador__relato p:first-child { font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave); }
}
@keyframes flotante-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Producción: la home en «/» de la web ───────────────────────────── */
/* Sin la tira del prototipo (index.php pone la clase en <html>). */
html.produccion, html.produccion:root { --alto-tira: 0px; }
.menu__legal { margin: 8px 14px 4px; font-size: 12px; color: #6b8578; }
.menu__legal a { display: inline; padding: 0; border-radius: 0; font: inherit; color: inherit; }
.menu__legal a:hover { background: none; text-decoration: underline; }

/* Pie de la web (includes/home-pie.php). */
.pie--web { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px 48px; }
.pie--web h2 { margin: 0 0 10px; font: 600 11px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro-texto); }
.pie--web ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie--web a { color: var(--tinta); text-decoration: none; }
.pie--web a:hover { text-decoration: underline; }
.pie__contacto { margin: 12px 0 0; line-height: 1.7; }
.pie__barrios ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.pie__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-top: 18px; border-top: 1px solid var(--borde); }
.pie__base p { margin: 0; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie__creditos { grid-column: 1 / -1; margin: 0; max-width: 90ch; font-size: 11.5px; }
@media (max-width: 900px) {
  .pie--web { grid-template-columns: minmax(0, 1fr); }
}

/* Calculadora: la puerta del email (config.js, a) y la solicitud de revisión. */
.calculo--bloqueado > :not(.calculo__cabeza):not(.calculo__acceso) { display: none !important; }
.calculo:not(.calculo--bloqueado) > .calculo__acceso { display: none; }
.calculo__acceso { display: grid; gap: 4px; margin: 4px 0 2px; }
.calculo__acceso-titulo { margin: 0; font: 500 22px/1.15 var(--serif); }
.calculo__acceso .boton, .calculo__envio .boton { justify-self: start; }
.calculo__envio { flex-basis: 100%; display: grid; gap: 4px; margin: 4px 0 0; }
.calculo__trampa { display: none !important; }
.campo--marca a { color: inherit; }

/* Herramientas accesibles desde cualquier recorrido, sin salir de la home. */
.dialogo-gallery {
  width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--borde);
  border-radius: 20px; color: var(--tinta); background: var(--fondo);
  box-shadow: 0 20px 80px #0008; overflow-y: auto; overscroll-behavior: contain;
}
.dialogo-gallery::backdrop { background: #081610dc; }
.dialogo-gallery h2 { margin: 0 32px 12px 0; font: 500 clamp(28px, 5vw, 40px)/1.05 var(--serif); }
.dialogo-gallery > p { color: var(--tinta-suave); font-size: 14px; }
.dialogo-gallery__cerrar { float: right; position: sticky; top: 0; width: 40px; height: 40px; border: 1px solid var(--borde); border-radius: 50%; color: var(--tinta); background: var(--fondo); font-size: 28px; cursor: pointer; z-index: 2; }
.dialogo-gallery .calculo { margin-top: 18px; }
.dialogo-gallery .boton--linea { background: transparent; color: var(--tinta); }
.dialogo-gallery .campo input:not([type="checkbox"]), .dialogo-gallery .campo select { font-size: 16px; min-height: 46px; }
.dialogo-gallery--contacto { max-width: 540px; }
.dialogo-gallery [role="status"] { min-height: 1.5em; font-size: 14px; }
.intro__calculadora { display: block; margin-top: 18px; padding: 10px 0; border: 0; background: none; color: var(--oro-texto); text-align: left; font: 500 16px/1.5 var(--sans); cursor: pointer; }
.intro__calculadora span { display: block; color: var(--tinta-suave); font-size: 12px; }
.localidades { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.localidades button { border: 1px solid var(--borde); border-radius: 30px; padding: 9px 12px; color: var(--tinta); background: var(--fondo-ficha); cursor: pointer; }
.localidad { scroll-margin-top: 12px; }
@media (max-width: 1100px) { .cabecera__acciones > [data-calculadora-general] { display: none; } }
@media (max-width: 760px) {
  html.inmersiva .intro__calculadora { display: none; }
  .barra-movil__ctas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.inmersiva .barra-movil .boton { font-size: 13px; padding: 0 7px; }
  .dialogo-gallery .calculo__rejilla { grid-template-columns: 1fr; }
  .dialogo-gallery .calculo__total { flex-wrap: wrap; }
}

/* ── Filtro (como el de /venta) ─────────────────────────────────────── */
.filtro__abrir {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px;
  border-radius: 12px; border: 1px dashed var(--borde); background: none; color: inherit; cursor: pointer;
  font: 500 13.5px/1.2 var(--sans); text-align: left;
}
.filtro__abrir[aria-expanded="true"], .filtro__abrir.es-activo { border-style: solid; border-color: var(--oro); }
.filtro__abrir .icono { width: 15px; height: 15px; }
html.modo-vender .filtro__abrir, html.modo-vender .filtro { display: none !important; }
.filtro {
  flex: none; max-height: min(58vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 16px 10px; border-bottom: 1px solid var(--borde);
}
.filtro__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.filtro__ancho { grid-column: 1 / -1; }
.filtro__rango { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 0 0 10px; padding: 0; border: 0; min-width: 0; }
.filtro__rango legend { grid-column: 1 / -1; padding: 0; margin-bottom: 4px; }
.filtro__rango input, .filtro select {
  width: 100%; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.07); color: inherit; font: 500 14px/1.2 var(--sans);
}
html.variante-b .filtro__rango input, html.variante-b .filtro select { background: #fff; }
.filtro select option { color: var(--verde-800); background: #fff; }
.filtro__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 2px; }
.filtro__limpiar { min-height: 36px; padding: 0; border: 0; background: none; color: var(--oro-texto); cursor: pointer; font: 600 13px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.filtro__catalogo { margin: 8px 0 0; font-size: 12.5px; color: var(--tinta-suave); }
.barrios__filtrar button::before { content: ''; }
.barrios__filtrar { position: sticky; left: 0; z-index: 3; flex: none; border-radius: 999px; background: #13231c; }
.barrios__filtrar button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--oro); border-radius: 999px; background: var(--oro); color: var(--verde-900); font: 600 13.5px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.atajos__filtro { position: sticky; left: 0; z-index: 3; border-radius: 999px; background: #13231c; }
.atajos__filtro .atajo { border-color: var(--oro); background: var(--oro); color: var(--verde-900); }
@media (max-width: 760px) {
  .filtro { max-height: none; flex: 1 1 auto; padding: 10px 14px; }
  html.inmersiva.filtro-abierto .explorador__cuerpo { display: none; }
  /* «Ver N viviendas» siempre a mano, al pie del filtro. */
  .filtro__acciones { position: sticky; bottom: -10px; z-index: 1; margin: 0 -14px; padding: 10px 14px; background: var(--panel, rgba(12, 23, 19, 0.96)); }
  html.variante-a .filtro__acciones { background: rgba(14, 25, 21, 0.98); }
  .filtro__rango input, .filtro select { min-height: 44px; font-size: 16px; }
}

/* Frases de entrada con su subtítulo (config.js). */
.boton--con-sub { flex-direction: column; gap: 3px; min-height: 60px; padding: 8px 24px; line-height: 1.15; }
.boton--con-sub small { font: 500 11.5px/1.25 var(--sans); opacity: 0.82; white-space: normal; text-align: center; }

/* Atribución disponible a un toque, sin texto superpuesto al recorrido. */
.escena__leyenda.creditos { z-index: 7; width: 36px; max-width: none; right: 12px; bottom: 8px; text-shadow: none; pointer-events: auto; }
.creditos__texto {
  position: absolute; right: 0; bottom: calc(100% + 8px); margin: 0;
  width: min(340px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 12px;
  background: #13231c; color: #f1ebdf; border: 1px solid rgba(226, 213, 183, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); text-align: left; font: 400 12px/1.6 var(--sans);
}
.creditos:not(.es-abierto) .creditos__texto { display: none; }
.creditos__texto a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.creditos__i { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(226, 213, 183, 0.45); background: #13231c; color: #f1ebdf; font: italic 600 16px/1 Georgia, serif; cursor: pointer; }
.escena--dia .creditos__i { background: #faf9f7; color: #1a2e26; border-color: #c9a96e; }
@media (max-width: 760px) {
  .escena__leyenda.creditos, html.inmersiva .escena__leyenda.creditos { left: 12px; right: auto; }
  .creditos__texto { left: 0; right: auto; }
}
/* Brújula: discreta, siempre a la vista (en el mapa explorado, el botón del norte también gira). */
.brujula { position: absolute; z-index: 4; right: clamp(16px, 3vw, 40px); top: calc(var(--alto-tira) + var(--alto-cabecera) + 62px); width: 38px; height: 38px; padding: 5px; border-radius: 50%;
  background: rgba(10, 19, 15, 0.55); border: 1px solid rgba(226, 213, 183, 0.3); pointer-events: none; }
.escena--dia .brujula { background: rgba(250, 249, 247, 0.8); border-color: var(--linea); }
.brujula svg, .mapa-controles__brujula { display: block; width: 100%; height: 100%; overflow: visible; transition: transform 0.15s linear; }
.brujula__n { fill: var(--oro); } .brujula__s { fill: currentColor; opacity: 0.45; }
.brujula text { font: 700 5px/1 var(--sans); fill: var(--oro); }
.brujula { color: #f1ebdf; } .escena--dia .brujula { color: var(--verde-800); }
html.explorando .brujula, html.inmersiva .brujula { display: none; }
html.movimiento-reducido .brujula svg, html.movimiento-reducido .mapa-controles__brujula { transition: none; }
/* Gestos: la primera vez en el móvil, en el centro del mapa. */
.gestos { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--alto-barra-movil, 150px) + 52px); translate: -50% 0; margin: 0; width: max-content; max-width: min(300px, calc(100% - 120px)); padding: 6px 12px;
  display: flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(10, 19, 15, 0.66); color: #f1ebdf;
  font: 500 11.5px/1.3 var(--sans); text-align: left; pointer-events: none; }
.gestos__mano { font-size: 15px; animation: gestos-mano 1.8s ease-in-out infinite; }
@keyframes gestos-mano { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .gestos__mano { animation: none; } }
html.movimiento-reducido .gestos__mano { animation: none; }