/* Rampazzo Inmobiliaria · "La ventana de cuatro vidrios" (demo de Leomak.Soft).
   Mismos nombres y valores que las Variables "Primitivos" del archivo de Figma. */
@font-face { font-family: "Didact Gothic"; src: url("fonts/didact-gothic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --verde-rampazzo: #109038;
  --verde-hondo: #0b3d1c;
  --verde-accion: #0a7a2c;
  --tinta: #14241a;
  --papel: #f2f5f0;
  --niebla: #e3eadf;
  --blanco: #ffffff;
  --luz: #ffd76a;

  --f-display: "Didact Gothic", "Century Gothic", sans-serif;
  --f-texto: "Jost", "Century Gothic", sans-serif;
  /* Escala Escritorio / Celular (estilos de texto de Figma) */
  --t-nombre: clamp(2.375rem, 1.6rem + 2.2vw, 3.25rem);
  --t-h2: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  --t-h3: clamp(1.3125rem, 1.2rem + .35vw, 1.5rem);
  --t-precio: clamp(1.125rem, 1.05rem + .2vw, 1.25rem);
  --t-cuerpo: clamp(1.0625rem, 1.03rem + .1vw, 1.125rem);
  --t-chico: clamp(.875rem, .85rem + .1vw, .9375rem);

  --margen: clamp(1.25rem, 4vw, 4rem);
  --entre: clamp(6rem, 12vw, 10rem);
  --vidrio-gap: clamp(8px, 1vw, 14px);
  --sale: cubic-bezier(.16, 1, .3, 1);
  --abre: cubic-bezier(.77, 0, .18, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-cuerpo)/1.55 var(--f-texto); font-synthesis: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 400; color: var(--verde-hondo); }
h1 { font-size: var(--t-nombre); line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.01em; }
h3 { font-size: var(--t-h3); line-height: 1.2; }
p { margin: 0; }
a { color: var(--verde-accion); }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--verde-accion); color: var(--blanco); }
:focus-visible { outline: 3px solid var(--verde-accion); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--verde-hondo); color: var(--blanco); }
.saltar:focus { left: 1rem; top: 1rem; }
.franja { padding: .55rem var(--margen); background: var(--verde-hondo); color: var(--blanco); font-size: var(--t-chico); line-height: 1.4; text-align: center; }

/* Botones y enlaces: esquinas rectas, una sola forma en toda la página */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; background: var(--verde-accion); color: var(--blanco); font: 500 var(--t-cuerpo)/1 var(--f-texto); text-decoration: none; transition: background-color .25s, transform .2s var(--sale); }
.boton:active { transform: scale(.97); }
.boton-chico { min-height: 44px; padding: 0 1rem; font-size: var(--t-chico); }
.enlace { display: inline-flex; align-items: center; min-height: 44px; color: var(--verde-accion); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-underline-offset .25s var(--sale), color .2s; }
.enlace:active { color: var(--verde-hondo); }
@media (hover: hover) {
  .boton:hover { background: var(--verde-hondo); }
  .enlace:hover { text-underline-offset: .38em; color: var(--verde-hondo); }
}

/* ---------- La escena partida: la casa fija y la columna que se lee ---------- */
.escena { display: grid; grid-template-areas: "cab" "esc" "lec"; }
.cabecera { grid-area: cab; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--margen); }
.marca { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--verde-hondo); text-decoration: none; font: 400 var(--t-precio)/1 var(--f-display); }
.marca-casa { width: 30px; height: 30px; color: var(--verde-rampazzo); }
.cabecera nav { display: none; }
.cabecera nav ul { display: flex; white-space: nowrap; gap: clamp(.75rem, 1.5vw, 1.5rem); }
.cabecera nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font-size: var(--t-chico); text-decoration: none; }
.cabecera nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: var(--verde-accion); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--sale); }
@media (hover: hover) { .cabecera nav a:hover::after { transform: scaleX(1); } }

.escenario { grid-area: esc; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: clamp(1rem, 3vw, 2rem) var(--margen) 0; background: var(--verde-rampazzo); }
.techo { display: block; width: calc(100% + 2 * var(--alero)); height: clamp(40px, 9svh, 110px); margin: 0 calc(-1 * var(--alero)) -2px; overflow: visible; --alero: clamp(10px, 2vw, 28px); }
.casa-trazo { fill: none; stroke: var(--blanco); stroke-width: clamp(8px, 1.1vw, 14px); vector-effect: non-scaling-stroke; stroke-linejoin: miter; stroke-linecap: square; }
.ventana { position: relative; height: min(38svh, 86vw); padding: var(--vidrio-gap); background: var(--blanco); perspective: 1000px; }
.vista { position: relative; height: 100%; overflow: hidden; background: var(--verde-hondo); }
.vista-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.06; transition: opacity .9s var(--sale), scale 1.6s var(--sale); }
.vista-foto.activa { opacity: 1; scale: 1; }
.vista-foto[src*="ventana"] { object-position: 22% 40%; }
/* La cruz blanca del logo parte la vista en cuatro vidrios */
.vista::before, .vista::after { content: ""; position: absolute; z-index: 3; background: var(--blanco); }
.vista::before { left: calc(50% - var(--vidrio-gap) / 2); top: 0; bottom: 0; width: var(--vidrio-gap); }
.vista::after { top: calc(50% - var(--vidrio-gap) / 2); left: 0; right: 0; height: var(--vidrio-gap); }
.vidrio { position: absolute; z-index: 2; width: 50%; height: 50%; overflow: hidden; pointer-events: none; transform-origin: var(--bisagra) center; }
.vidrio:nth-of-type(1) { left: 0; top: 0; --cx: 100%; --cy: 100%; --bisagra: left; --giro: -24deg; }
.vidrio:nth-of-type(2) { right: 0; top: 0; --cx: 0%; --cy: 100%; --bisagra: right; --giro: 24deg; }
.vidrio:nth-of-type(3) { left: 0; bottom: 0; --cx: 100%; --cy: 0%; --bisagra: left; --giro: -24deg; }
.vidrio:nth-of-type(4) { right: 0; bottom: 0; --cx: 0%; --cy: 0%; --bisagra: right; --giro: 24deg; }
.vidrio .tapa, .vidrio .destello { position: absolute; inset: 0; }
.vidrio .tapa { display: none; background: var(--verde-hondo); }
.vidrio .destello { background: var(--luz); opacity: 0; mix-blend-mode: screen; transition: opacity .6s var(--sale); }
.vidrio.elegido .destello { opacity: .2; }
.leyenda { margin: 0 calc(-1 * var(--margen)); padding: .9rem var(--margen); background: var(--verde-hondo); color: var(--blanco); font-size: var(--t-chico); line-height: 1.4; }
@media (min-width: 720px) { .ventana { height: min(46svh, 70vw); } }

/* Apertura (solo con JS y movimiento): cada vidrio se abre como una hoja y su luz se prende desde la cruz */
.anim .vidrio .tapa { display: block; clip-path: circle(150% at var(--cx) var(--cy)); transition: clip-path 1s var(--abre); }
.anim .vidrio.prendido .tapa { clip-path: circle(0% at var(--cx) var(--cy)); }
.anim .vidrio.prendido { animation: abrir-vidrio 1.2s var(--sale) both; }
.anim .vidrio.prendido .destello, .anim .vidrio.relumbre .destello { animation: prender 1.4s ease-out both; }
@keyframes abrir-vidrio { from { transform: rotateY(var(--giro)); } to { transform: none; } }
@keyframes prender { 0% { opacity: 0; } 25% { opacity: .55; } 100% { opacity: 0; } }

.lectura { grid-area: lec; min-width: 0; }
.intro { padding: clamp(2.5rem, 6vw, 4rem) var(--margen) clamp(3rem, 6vw, 4rem); }
.intro h1 { max-width: 16ch; }
.bajada { margin-top: 1.5rem; max-width: 34ch; font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem); line-height: 1.4; }
.hero-dato { margin-top: 1rem; font-size: var(--t-cuerpo); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; }
.palabra { display: inline-block; white-space: nowrap; }
.letra { display: inline-block; transform-origin: 50% 100%; }

.cinta { padding: 1.1rem 0; background: var(--verde-hondo); color: var(--blanco); font: 400 var(--t-precio)/1.3 var(--f-display); }

/* ---------- Propiedades: una hoja impresa ---------- */
.propiedades { padding: var(--entre) var(--margen) clamp(4rem, 8vw, 5rem); }
.propiedades > h2 { max-width: 22ch; }
.buscador { display: none; }
.js .buscador { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem 2rem; margin-top: 2rem; }
.mini-ventana { display: grid; grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); gap: 6px; padding: 6px; background: var(--verde-hondo); }
.mv { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 52px; padding: .5rem .9rem; border: 0; background: var(--blanco); color: var(--tinta); font: 400 var(--t-chico)/1.2 var(--f-texto); text-align: left; cursor: pointer; transition: background-color .3s, color .3s, transform .2s var(--sale); }
.mv span { font-family: var(--f-display); font-size: var(--t-precio); font-variant-numeric: tabular-nums; }
.mv[aria-pressed="true"] { background: var(--luz); color: var(--verde-hondo); font-weight: 500; }
.mv:active { transform: scale(.96); }
@media (hover: hover) { .mv:hover:not([aria-pressed="true"]) { background: var(--niebla); } }
.campo { display: grid; gap: .35rem; font-size: var(--t-chico); }
.campo select { min-height: 52px; min-width: 14rem; padding: 0 2.25rem 0 .9rem; border: 1px solid var(--verde-hondo); border-radius: 0; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b3d1c' stroke-width='1.6'/%3E%3C/svg%3E") right .9rem center / 12px 8px no-repeat; color: var(--tinta); font: 400 1rem/1.3 var(--f-texto); appearance: none; }
.estado { margin-top: 1.25rem; font-size: var(--t-chico); }

.hoja { --festón: 14px; margin-top: 1.5rem; padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.25rem, 3.5vw, 3rem); background: var(--blanco);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 7px, #000 7.5px) top / var(--festón) 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) bottom / var(--festón) 51% repeat-x; /* taste-skill-ignore: máscara del festón, no es un relleno */
  mask: radial-gradient(circle at 50% 0, transparent 7px, #000 7.5px) top / var(--festón) 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) bottom / var(--festón) 51% repeat-x; } /* taste-skill-ignore: máscara del festón, no es un relleno */
.grupo + .grupo { margin-top: 3rem; }
.grupo[hidden] { display: none; }
.grupo h3 { margin-bottom: .75rem; color: var(--verde-accion); }
.filas { display: grid; }
.ficha { position: relative; padding: .9rem .75rem; margin: 0 -.75rem; transition: background-color .3s, transform .25s var(--sale); }
.ficha + .ficha { margin-top: 2px; }
.ficha[hidden] { display: none; }
.f-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.f-dir { font: 400 var(--t-precio)/1.25 var(--f-display); color: var(--tinta); }
.f-precio { flex: none; font: 400 var(--t-precio)/1.25 var(--f-display); font-variant-numeric: tabular-nums; color: var(--verde-hondo); }
.f-datos { margin-top: .2rem; font-size: var(--t-chico); }
.f-acciones { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: .1rem; }
.f-acciones .enlace, .f-acciones .fx-ver-360 { font-size: var(--t-chico); }
.fx-ver-360 { color: var(--verde-accion); }
.ficha:active { transform: scale(.99); }
@media (hover: hover) { .ficha:hover { background: var(--papel); } }
.sin-fichas { padding: 1rem 0; }

/* ---------- En pozo: rompe la escena y va a todo el ancho ---------- */
.en-pozo { margin-top: 0; padding: var(--entre) var(--margen); background: var(--verde-hondo); color: var(--blanco); }
.en-pozo h2, .en-pozo h3 { color: var(--blanco); }
.pozo-cab { display: grid; gap: 1.25rem; max-width: 1280px; margin: 0 auto; }
.pozo-cab p { max-width: 52ch; }
.edificios { display: grid; gap: 3.5rem 2rem; max-width: 1280px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; }
.edificio { display: grid; align-content: start; gap: .35rem; transition: transform .4s var(--sale); }
.edificio-dibujo { width: min(100%, 220px); height: auto; margin-bottom: 1.25rem; overflow: visible; }
.edificio-trazo { fill: none; stroke: var(--blanco); stroke-width: 6; }
.edificio-dibujo rect { fill: var(--luz); transition: fill .5s ease-out; }
.anim .edificio-dibujo .piso:not(.prendido) rect { fill: #1f5a33; }
.e-dir { font-size: var(--t-cuerpo); }
.e-datos { font-size: var(--t-chico); }
.e-precio { margin-top: .35rem; font: 400 var(--t-precio)/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.enlace-claro { color: var(--blanco); }
@media (hover: hover) { .enlace-claro:hover { color: var(--luz); } }
.pozo-nota { max-width: 1280px; margin: 3rem auto 0; font-size: var(--t-chico); }

/* ---------- Zonas ---------- */
.zonas { display: grid; gap: 2.5rem; max-width: 1280px; margin: 0 auto; padding: var(--entre) var(--margen) 0; }
.zonas-foto { margin: 0; }
.zonas-fotos { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.zonas-foto-2 img { aspect-ratio: 16 / 7; }
.para { overflow: hidden; }
.para img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; }
.zonas-foto:not(.zonas-foto-2) img { aspect-ratio: 4 / 3; }
figcaption { margin-top: .6rem; font-size: var(--t-chico); }
.zonas-foto { display: grid; }
.zonas-foto > img { grid-area: 1 / 1; }
.zonas-texto { display: grid; align-content: start; gap: 1.25rem; }
.zonas-texto > p:first-of-type { max-width: 46ch; }
.localidades { display: grid; gap: 2px; margin-top: .5rem; }
.localidades li:nth-child(odd) { background: var(--niebla); }
.localidades li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem .75rem; margin: 0 -.75rem; font: 400 var(--t-precio)/1.3 var(--f-display); transition: padding-left .3s var(--sale), color .3s; }
.localidades li span:last-child { font-variant-numeric: tabular-nums; color: var(--verde-hondo); }
@media (hover: hover) { .localidades li:hover { color: var(--verde-accion); } }
.nota { font-size: var(--t-chico); }

/* ---------- Sobre nosotros: una carta ---------- */
.nosotros { max-width: 36rem; margin: 0 auto; padding: var(--entre) var(--margen) 0; display: grid; gap: 1.1rem; }
.nos-casa { width: 44px; height: 44px; color: var(--verde-rampazzo); }
.nosotros h2 { margin-bottom: .4rem; }
.firma { margin-top: .8rem; font: 400 var(--t-h3)/1.2 var(--f-display); color: var(--verde-hondo); }
.firma span { display: block; margin-top: .3rem; font: 400 var(--t-chico)/1.4 var(--f-texto); color: var(--tinta); }

/* Mapa del kit con la escala de esta página */
.fx-mapa { max-width: 1280px; margin: 0 auto; padding: var(--entre) var(--margen) 0; }
.fx-mapa .fx-360-cab p { max-width: 60ch; }
.fx-mapa h2 { font-size: var(--t-h2); }
.fx-mapa-lista a, .fx-mapa-frame { border-radius: 0; }
.fx-mapa-lista a { font-size: var(--t-chico); }

/* ---------- Contacto ---------- */
.contacto { display: grid; gap: 2rem; max-width: 1280px; margin: 0 auto; padding: var(--entre) var(--margen) clamp(5rem, 9vw, 7.5rem); }
.c-frase { display: grid; gap: 1rem; }
.c-grande { max-width: 26ch; font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)/1.2 var(--f-display); color: var(--tinta); }
.c-foto { margin: 0; width: min(100%, 16rem); }
.c-foto img { aspect-ratio: 4 / 5; }
.c-datos a { overflow-wrap: anywhere; }
.c-datos a[href^="mailto"] { font-size: var(--t-chico); }
.c-pregunta { font: 500 var(--t-precio)/1.3 var(--f-texto); }
.c-datos ul { margin: .75rem 0 1rem; }
.c-datos li { line-height: 1.3; }

/* ---------- Pie ---------- */
.pie { padding: clamp(3.5rem, 7vw, 5rem) var(--margen) 2.5rem; background: var(--verde-accion); color: var(--blanco); }
.pie a { color: var(--blanco); }
.pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; max-width: 1280px; margin: 0 auto; }
.pie-marca { display: flex; align-items: center; gap: .8rem; font: 400 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem)/1.1 var(--f-display); }
.pie-casa { width: 1.4em; height: 1.4em; flex: none; }
.pie-links { display: flex; gap: 1.5rem; }
.pie-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-cuerpo); }
.pie-legal { max-width: 72ch; margin: 1.5rem 0 0 max(0px, calc((100% - 1280px) / 2)); font-size: var(--t-chico); line-height: 1.5; }
.pie-legal + .pie-legal { margin-top: .5rem; }

/* ---------- Tablet ---------- */
@media (min-width: 720px) {
  .edificios { grid-template-columns: repeat(3, 1fr); }
  .zonas { grid-template-columns: 7fr 5fr; align-items: start; gap: clamp(2rem, 5vw, 5rem); }
  .contacto { grid-template-columns: 14rem 1fr; align-items: start; }
  .c-frase { grid-column: 1 / -1; }
  .c-foto { width: 100%; }
}

/* ---------- Escritorio: la casa queda fija a la izquierda ---------- */
@media (min-width: 1024px) {
  .escena { grid-template-columns: 53% minmax(0, 1fr); grid-template-areas: "esc cab" "esc lec"; grid-template-rows: auto 1fr; }
  .escenario { position: sticky; top: 0; height: 100svh; align-self: start; grid-row: 1 / span 2; padding: 1.25rem clamp(1.5rem, 2.4vw, 2.5rem) 0; }
  .escenario .leyenda { margin: 0 calc(-1 * clamp(1.5rem, 2.4vw, 2.5rem)); padding-inline: clamp(1.5rem, 2.4vw, 2.5rem); }
  .techo { height: clamp(40px, 8svh, 90px); }
  .casa { width: min(76%, 62svh); }
  .cabecera { padding: 1.25rem clamp(2rem, 4vw, 4.5rem); }
  .cabecera nav { display: block; }
  .marca span { display: none; }
  .ventana { height: auto; }
  .leyenda { min-height: 4.2em; }
  .contacto { grid-template-columns: repeat(12, 1fr); column-gap: clamp(2rem, 4vw, 4rem); }
  .c-frase { grid-column: 1 / 7; grid-row: 1; }
  .c-datos { grid-column: 1 / 7; grid-row: 2; }
  .c-foto { grid-column: 7 / 13; grid-row: 1 / span 2; }
  .c-foto img { aspect-ratio: 5 / 4; }
  .nosotros { max-width: 1280px; grid-template-columns: 5fr 7fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .nos-casa, .nosotros h2, .firma { grid-column: 1; }
  .nos-casa { grid-row: 1; }
  .nosotros h2 { grid-row: 2; }
  .firma { grid-row: 3; margin-top: 0; }
  .nosotros > p:not(.firma) { grid-column: 2; max-width: 46ch; font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem); line-height: 1.45; }
  .nosotros > p:nth-of-type(1) { grid-row: 1 / span 2; align-self: end; }
  .nosotros > p:nth-of-type(2) { grid-row: 3; }
  .nosotros > p:nth-of-type(3) { grid-row: 4; }
  .zonas-fotos { order: -1; }
  .intro, .propiedades { padding-left: clamp(2.5rem, 5vw, 4.5rem); padding-right: clamp(2rem, 4vw, 4.5rem); }
  .intro { min-height: calc(100svh - 5.5rem); display: flex; flex-direction: column; justify-content: center; padding-top: 2rem; }

  .franja { position: absolute; top: 0; left: 53%; right: 0; z-index: 5; }
  .cabecera { margin-top: 2.4rem; }
}
@media (min-width: 1600px) { .marca span { display: inline; } }

/* Sin movimiento: todo quieto, encendido y visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim .vidrio .tapa { display: none; }
  .vidrio, .vista-foto, .ficha, .boton, .mv, .enlace, .edificio, .localidades li { transition: none; animation: none; }
  .vidrio .destello { display: none; }
}


/* La luz del kit sobre las tarjetas es un degradé: en esta demo la respuesta es un cambio de tono. */
.fx-luz { display: none; }

/* fx: colores para la capa de efectos */
:root { --fx-acento: #109038; --fx-oscuro: #0b3d1c; --fx-claro: #f2f5f0; }

/* El epígrafe tapa el sobrante del parallax y queda siempre legible */
.zonas-foto figcaption, .c-foto figcaption { position: relative; z-index: 1; margin-top: 0; padding-top: .6rem; background: var(--papel); }

/* Celular: el llamado a la acción entra en la primera pantalla y los edificios en pozo van compactos */
@media (max-width: 719px) {
  .ventana { height: min(27svh, 62vw); }
  .techo { height: clamp(30px, 6svh, 56px); }
  .intro { padding-top: 1.5rem; }
  .edificio { grid-template-columns: 6.5rem 1fr; column-gap: 1.25rem; align-items: start; }
  .edificio-dibujo { grid-row: 1 / span 6; width: 6.5rem; margin: 0; }
}

/* Sin JS no hay panel 360° ni filtro: no se muestran controles que no hacen nada */
.fx-ver-360 { display: none; }
.js .fx-ver-360 { display: inline-flex; }
.solo-js { display: none; }
.js .solo-js { display: inline; }

/* Superficies del navegador con la paleta de la marca */
html { scrollbar-color: var(--verde-accion) var(--niebla); }
input, select, textarea { caret-color: var(--verde-accion); accent-color: var(--verde-accion); }
.fx-mapa .fx-360-cab p { margin-top: .75rem; }