/* ─────────────────────────────────────────────────────────────────────────────
   Berchatti Residence Urubó · explorador — la interfaz
   (la de explorador-lotes/urubo-norte, que Jhonny aprobó; lo nuevo va al final, con las mismas piezas)
   Copia de la FORMA de explore.ownprimland.com, medida el 2026-10-01
   (_referencias/web-transiciones/PRIMLAND-COMPLETO.md). Todo está escrito de nuevo:
   ni su código, ni sus íconos, ni sus fuentes. Sus fuentes son de pago (Inferi, Centra,
   PetitSerif): acá van Cormorant Garamond (serif) y DM Sans (etiquetas), SIL OFL.

   La escala es la suya: 1 rem = 10 px en el celular (ancho 390) y 9,6 px a 1440
   (10 × ancho / 1500, entre 9 y 10 px). Así «4.5rem» es su «h-45», etc.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant-garamond-400-600.woff2) format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(assets/fonts/dm-sans-400-500.woff2) format("woff2");
  font-weight:400 500;font-style:normal;font-display:swap}

:root{
  /* ── PALETA ── la de Primland, medida. Para pasarla a la marca de la desarrolladora se
     cambian solo estas líneas (el resto del archivo no tiene colores sueltos). */
  --principal:#456a4b;          /* verde: pantalla de carga, barras, títulos */
  --claro:#fffbe7;              /* crema: botones, fichas, textos sobre el mapa */
  --claro-50:rgba(255,251,231,.5);
  --blanco:#ffffff;
  --suave:#798d73;              /* salvia: la casita, íconos */
  --marco:#777c60;              /* el marco oscuro del botón de la portada */
  --acento:#a8611a;             /* bronce: antetítulos, botón de la ficha */
  --acento-claro:#f7d9bb;       /* beige: etiqueta del bloque de contacto */
  --acento-vivo:#eab279;        /* beige vivo: barra de avance del visor */
  --papel:#fffdf3;              /* fondo de «Relacionadas» */
  --tinta-suave:#686b58;
  --linea:hsla(38,20%,50%,.3);
  --fondo:#1f2b20;              /* lo que se ve antes de que pinte el mapa */
  /* estados de los lotes (el motor los lee de acá con UI.colores). Revisión 02-10: a la vista general
     no se distinguían; ahora disponible = la pintura limpia y un poco más clara con borde crema,
     reservado = ámbar, vendido = oscuro y apagado (ver js/escena.js y js/movil.js) */
  --lote-disponible:#cfe08f;
  --lote-reservado:#e09a4a;
  --lote-vendido:#6f6a60;
  --lote-borde-disponible:#fffbeb;   /* el borde de cada estado (el motor le pone su transparencia y su ancho) */
  --lote-borde-reservado:#ffd69e;
  --lote-borde-vendido:#33302a;
  /* al ATARDECER (revisión 02-10 b): la pintura es verde dorada y más oscura, y el ámbar de día se
     perdía. Disponible = más claro y fresco con borde crema; reservado = naranja ámbar más lleno (se
     separa del césped por el matiz); vendido = gris frío y apagado (se separa por la luz y el croma).
     La leyenda de arriba de «Solo disponibles» toma estos colores al atardecer. */
  --lote-disponible-tarde:#dce8a8;
  --lote-reservado-tarde:#ec9038;
  --lote-vendido-tarde:#54565a;
  --lote-borde-disponible-tarde:#fff1d2;
  --lote-borde-reservado-tarde:#ffb45e;
  --lote-borde-vendido-tarde:#1d1c1a;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* curvas de movimiento (los nombres de GSAP que usa Primland, en CSS) */
  --e-unmask:cubic-bezier(.16,1,.3,1);       /* su «unmask» */
  --e-expo-out:cubic-bezier(.19,1,.22,1);    /* ease-out-expo */
  --e-expo-inout:cubic-bezier(.87,0,.13,1);  /* expo.inOut */
  --e-p3-inout:cubic-bezier(.76,0,.24,1);    /* power3.inOut = quart.inOut */
  --e-p2-in:cubic-bezier(.32,0,.67,0);       /* power2.in */
  --e-p1:cubic-bezier(.5,1,.89,1);           /* power1(.out) */
  --e-back:cubic-bezier(.34,1.56,.64,1);     /* back.out */

  --size:390;
  --abajo:calc(3.2rem + var(--bottom-bar, 0px)); /* la franja de Luara publica --bottom-bar */
}
@media (min-width:1024px){:root{--size:1500}}

*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(9px, 10 * 100vw / var(--size), 10px);-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--fondo);color:var(--claro);font-family:var(--serif);font-size:1.9rem;line-height:1.2;font-variant-numeric:lining-nums proportional-nums}
body.cargando{cursor:wait}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acento-vivo);outline-offset:2px}

/* ── tipos (sus nombres: label-m, eyebrow, h1, h2, h3, p1) ── */
.label-m{font-family:var(--sans);font-size:1.1rem;font-weight:500;letter-spacing:.1em;line-height:1.5;text-transform:uppercase}

/* ── el mapa ── el motor pone su lienzo dentro de #mapa */
.mapa{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mapa.arrastrando{cursor:grabbing}
.mapa canvas{display:block;width:100%;height:100%}
/* el degradé de arriba y de abajo que tiene su lienzo */
.vineta{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent 83.79%,rgba(0,0,0,.6)),linear-gradient(180deg,rgba(0,0,0,.6),transparent 19.03%)}
/* el velo negro al 30 % de la portada y el tutorial */
.velo{position:fixed;inset:0;background:#000;opacity:.3;pointer-events:none;z-index:3;transition:opacity .5s var(--e-p1)}
body.en-mapa .velo{opacity:0}

/* ── los puntos (discos blancos) ── el motor los ubica con UI.colocar() */
.puntos{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.punto{touch-action:none} /* un pellizco que empieza sobre un disco es del mapa, no del navegador (lo maneja el motor) */
.punto{position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;margin:-1.1rem 0 0 -1.1rem;pointer-events:auto;visibility:hidden;
  border-radius:50%;will-change:transform;opacity:0;transition:opacity .3s var(--e-p1),visibility 0s linear .3s}
.punto.ve{visibility:visible;opacity:1;transition:opacity .3s var(--e-p1),visibility 0s}
.punto::before{content:"";position:absolute;inset:-1.4rem;border-radius:50%} /* área para tocar: 2,5 veces el disco */
.punto-disco{position:absolute;inset:0;border-radius:50%;background:rgba(240,240,236,.93);box-shadow:0 .1rem .6rem rgba(0,0,0,.28);
  transform:scale(0);transition:transform .33s var(--e-p1),background-color .4s,box-shadow .4s}
.punto-disco::after{content:"";position:absolute;left:50%;top:50%;width:.6rem;height:.6rem;margin:-.3rem 0 0 -.3rem;border-radius:50%;
  background:#2f3e2f;transition:transform .4s var(--e-p3-inout),background-color .4s}
body:not(.en-mapa) .puntos{opacity:0}
body:not(.en-mapa) .punto.ve{visibility:hidden} /* en la portada no se ven: tampoco se enfocan ni se tocan (y #puntos va inert) */
/* aparecen de a uno: rebote de 1 s, uno cada 0,12 s */
.punto.entro .punto-disco{transform:scale(1)}
.punto.entrando .punto-disco{transition:transform 1s var(--e-back) calc(var(--i,0) * .12s)}
@media (hover:hover) and (pointer:fine){.punto.entro:not(.entrando):not(.activo):hover .punto-disco{transform:scale(1.2)}}
/* activo: crece y por dentro se ve el mapa desenfocado (el «vidrio esmerilado») */
.punto.entro.activo .punto-disco{transform:scale(2);background:rgba(120,128,112,.28);
  -webkit-backdrop-filter:blur(3px) brightness(.85);backdrop-filter:blur(3px) brightness(.85);
  box-shadow:inset 0 0 0 .1rem rgba(255,255,255,.95),0 .1rem .8rem rgba(0,0,0,.25);transition:transform .6s var(--e-p3-inout),background-color .4s}
.punto.activo .punto-disco::after{background:var(--blanco);transform:scale(1.15)}
.puntos.sin-puntos .punto{visibility:hidden}

/* la etiqueta al pasar el mouse (puntos y lotes): crema, flecha a la izquierda */
.etiqueta{position:fixed;left:0;top:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .25s var(--e-p1);will-change:transform}
.etiqueta.ve{opacity:1}
.etiqueta span{position:relative;display:block;transform:translateY(-50%);background:var(--claro);color:var(--principal);
  padding:.8rem 1.6rem;white-space:nowrap;font-family:var(--sans);font-size:1.1rem;font-weight:500;letter-spacing:.1em;line-height:1.5;
  text-transform:uppercase;box-shadow:0 .2rem 1.2rem rgba(0,0,0,.12)}
.etiqueta span::before{content:"";position:absolute;left:-.3rem;top:50%;width:.8rem;height:.8rem;margin-top:-.4rem;background:var(--claro);transform:rotate(45deg)}
.etiqueta.izq span::before{left:auto;right:-.3rem}
.etiqueta .dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin:0 .8rem .1rem 0;vertical-align:middle;
  box-shadow:inset 0 0 0 .1rem rgba(0,0,0,.18)}

/* ── arriba: sonido · logo · consultar ── */
.cabecera{position:fixed;left:0;right:0;top:0;height:6.5rem;z-index:20;pointer-events:none}
.cabecera>*{pointer-events:auto}
.sonido{position:absolute;left:2rem;top:50%;transform:translateY(-50%);height:1.4rem;color:var(--claro);display:inline-flex;align-items:center}
.sonido svg{height:1.4rem;width:auto;display:block;overflow:visible}
.sonido .onda{stroke-dasharray:6 2;animation:onda 1.6s linear infinite}
@keyframes onda{to{stroke-dashoffset:-16}}
.sonido::before{content:"";position:absolute;left:-.2rem;right:-.2rem;top:calc(50% - .05rem);height:.12rem;min-height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .75s var(--e-expo-out)}
.sonido.apagado::before{transform:scaleX(1);transform-origin:left}
.sonido.apagado .onda{animation-play-state:paused}
.logo{position:absolute;left:50%;top:2.4rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:var(--claro);
  text-align:center;line-height:1;transition:opacity .5s var(--e-p1)}
.logo svg{width:auto;height:1.7rem;display:block}
.logo b{display:block;margin-top:.45rem;font-family:var(--serif);font-weight:500;font-size:2.65rem;letter-spacing:.005em;white-space:nowrap}
.logo small{display:block;margin-top:.4rem;font-family:var(--sans);font-weight:500;font-size:.9rem;letter-spacing:.24em;text-transform:uppercase;padding-left:.24em;white-space:nowrap}
.cabecera .consultar{position:absolute;right:2rem;top:2.25rem;color:var(--claro);transition:opacity .5s var(--e-p1)}
/* «Ingresar» (el equipo): en el lugar del sonido de Primland, con la letra y el subrayado de «Consultar» */
.cabecera .ingresar{position:absolute;left:2rem;top:2.25rem;color:var(--claro);text-decoration:none;transition:opacity .5s var(--e-p1)}
body.ficha-abierta .logo,body.ficha-abierta .consultar,body.ficha-abierta .ingresar{opacity:0;pointer-events:none}

/* subrayados de Primland: «uline» crece de izquierda a derecha; «uline-doble» cambia de línea */
.uline{position:relative;display:inline-flex;white-space:nowrap}
.uline::before{content:"";position:absolute;left:0;right:0;bottom:0;height:.05em;min-height:1px;background:currentColor;transform:scaleX(0);
  transform-origin:right;transition:transform .75s var(--e-expo-out)}
@media (hover:hover) and (pointer:fine){.uline:hover::before{transform:scaleX(1);transform-origin:left}}
.uline-doble{position:relative;display:inline-flex;white-space:nowrap;--bajo:.2em}
.uline-doble::before,.uline-doble::after{content:"";position:absolute;left:0;right:0;bottom:var(--bajo);height:.05em;min-height:1px;background:currentColor}
.uline-doble::before{transform:scaleX(1);transform-origin:left;transition:transform .75s var(--e-expo-out) .5s}
.uline-doble::after{transform:scaleX(0);transform-origin:right;transition:transform .75s var(--e-expo-out) 0s}
@media (hover:hover) and (pointer:fine){
  .uline-doble:hover::before{transform:scaleX(0);transform-origin:right;transition-delay:0s}
  .uline-doble:hover::after{transform:scaleX(1);transform-origin:left;transition-delay:.2s}
}

/* ── la pantalla de carga ── verde liso, anillo que gira (1 s por vuelta) y la marca */
.cargador{position:fixed;inset:0;z-index:100;background:var(--principal);color:var(--claro);display:flex;align-items:center;justify-content:center;
  transition:opacity 1s linear .25s,visibility 0s linear 1.25s}
.cargador.sale{opacity:0;visibility:hidden}
.cargador-caja{position:relative;width:28rem;height:28rem;display:flex;align-items:center;justify-content:center}
.cargador-giro{position:absolute;inset:0;animation:gira 1s linear infinite}
.cargador-anillo{width:100%;height:100%;display:block;transition:transform 1.5s var(--e-expo-inout),opacity 1.5s var(--e-expo-inout)}
.cargador.sale .cargador-anillo{transform:scale(1.5);opacity:0}
@keyframes gira{to{transform:rotate(360deg)}}
.cargador-marca{position:relative;width:5.8rem;height:auto;color:var(--claro)}
.cargador-pct{position:absolute;left:0;right:0;bottom:-3.2rem;text-align:center;opacity:.55}
@media (min-width:650px){.cargador-caja{width:36rem;height:36rem}}

/* ── la portada ── */
.portada{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.2rem;
  pointer-events:none;color:var(--blanco);text-align:center}
.portada-txt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4rem;max-width:60rem;
  transition:transform 1.25s var(--e-p2-in),opacity 1.25s var(--e-p2-in)}
.destello{width:1.6rem;height:1.6rem;color:var(--acento-vivo);display:block}
.antetitulo{margin:0;font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.1;letter-spacing:.2em;text-transform:uppercase}
.antetitulo small{font-size:.62em;letter-spacing:.2em;vertical-align:.45em;margin-left:.1em}
.titulo{margin:0;font-family:var(--serif);font-weight:600;font-size:3.9rem;line-height:1.1;letter-spacing:.2em;text-transform:uppercase;padding:0 10%;
  text-shadow:0 .2rem 3rem rgba(0,0,0,.18)}
.titulo .palabra{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.14em;margin-top:-.14em;margin-right:-.2em}
.titulo .palabra+.palabra{margin-left:.2em}
.titulo .letra{display:inline-block;transform:translateY(105%);will-change:transform}
.portada.entra .titulo .letra{transform:none;transition:transform 2s var(--e-unmask) calc(1s + var(--i) * .075s)}
.frase{margin:0;font-family:var(--serif);font-weight:500;font-size:1.85rem;line-height:1.25;letter-spacing:-.01em;max-width:52rem;padding:0 2.4rem;text-wrap:balance}
.sube{opacity:0;transform:translateY(3.5rem)}
.portada.entra .sube{opacity:1;transform:none;transition:opacity 1.5s var(--e-unmask) calc(1s + var(--j,0) * .1s),transform 1.5s var(--e-unmask) calc(1s + var(--j,0) * .1s)}
.portada-boton{display:flex;justify-content:center;transition:transform 1s var(--e-p2-in),opacity 1s var(--e-p2-in)}
/* abajo: «Conocé la urbanización» (y «Empezar sin sonido», si algún día hay sonido: en la misma fila,
   y uno arriba del otro si no entran; nunca se pisan) */
.portada-abajo{position:absolute;left:0;right:0;bottom:var(--abajo);display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 4rem;padding:0 1.6rem;
  transition:transform 1s var(--e-p2-in),opacity 1s var(--e-p2-in)}
.portada-abajo button{pointer-events:auto;padding:.8rem 0;color:var(--blanco)}
.portada.sale .portada-txt{transform:scale(1.75);opacity:0}
.portada.sale .portada-boton{transform:translateY(5rem) scale(1.25);opacity:0}
.portada.sale .portada-abajo{transform:translateY(5rem);opacity:0}
@media (min-width:650px){
  .antetitulo{font-size:1.6rem}
  .titulo{font-size:5.4rem;line-height:1.12;padding:0}
}
/* computadora: las medidas de Primland a 1440 (5,2 rem = 49,92 px; 1,4 rem = 13,44; 1,6 rem = 15,36) */
@media (min-width:1024px){
  .titulo{font-size:5.2rem}
  .antetitulo{font-size:1.4rem}
  .frase{font-size:1.6rem}
}

/* el botón crema con su marco oscuro: la palabra sube y una copia entra desde abajo (0,5 s) */
.boton-crema{position:relative;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-width:15.2rem;height:3.9rem;
  padding:0 1.2rem;background:var(--claro);color:var(--principal);font-family:var(--sans);font-size:1.1rem;font-weight:500;letter-spacing:.1em;
  line-height:1.5;text-transform:uppercase;isolation:isolate}
.boton-crema::before{content:"";position:absolute;left:-.3rem;top:-.3rem;width:calc(100% + .6rem);height:calc(100% + .6rem);background:var(--marco);
  opacity:.9;z-index:-1}
.boton-crema::after{content:"";position:absolute;inset:0;background:var(--claro);z-index:-1}
.cambia{position:relative;display:block;overflow:hidden}
.cambia>span{display:block;transition:transform .5s var(--e-p1);will-change:transform}
.cambia>span+span{position:absolute;inset:0;transform:translateY(100%)}
@media (hover:hover) and (pointer:fine){
  :is(.boton-crema,.boton-acento,.boton-blanco,.boton-borde):hover .cambia>span:first-child{transform:translateY(-100%)}
  :is(.boton-crema,.boton-acento,.boton-blanco,.boton-borde):hover .cambia>span+span{transform:translateY(0)}
}

/* ── el tutorial ── «Arrastrá / para moverte» ⇄ «Girá la rueda / para acercarte», 8 s el ciclo */
.tutorial{position:fixed;left:50%;top:50%;z-index:9;transform:translate(-50%,-50%);pointer-events:none;color:var(--blanco);
  transition:opacity .5s var(--e-p1)}
.tutorial.sale{opacity:0}
.tut-caja{position:relative;width:28.2rem;height:21.3rem}
.tut-paso{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;animation:tut-fundido 8s infinite}
.tut-paso+.tut-paso{animation-delay:4s}
@keyframes tut-fundido{0%{opacity:0}10%,40%{opacity:1}50%,100%{opacity:0}}
.tut-gesto{margin:0;font-family:var(--serif);font-size:3rem;line-height:1.1;letter-spacing:-.01em;text-align:center;text-shadow:0 .2rem 2rem rgba(0,0,0,.3)}
.tut-gesto span{display:block}
.tut-dibujo{position:relative;flex:1;width:100%}
.tut-dibujo>svg:not(.mano-rueda){position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.tut-leyenda{margin:0;text-align:center;color:var(--blanco);text-shadow:0 .1rem 1rem rgba(0,0,0,.35)}
.tut-leyenda span{display:block}
/* arrastrar: arco punteado, un trazo que lo recorre con su cabeza, y la mano que va a la derecha */
.arco-punteado{stroke:var(--blanco);stroke-width:2;stroke-linecap:round;stroke-dasharray:.1 7;opacity:.85}
.arco-trazo{stroke:var(--blanco);stroke-width:2;stroke-linecap:round;stroke-dasharray:28 200;stroke-dashoffset:28;animation:arco 2s infinite}
@keyframes arco{0%{stroke-dashoffset:28;opacity:1;animation-timing-function:cubic-bezier(.83,0,.17,1)}70%{stroke-dashoffset:-44;opacity:1}85%,100%{stroke-dashoffset:-44;opacity:0}}
.mano-arrastra{animation:mano-x 2s infinite}
@keyframes mano-x{0%{transform:translate(0,0);opacity:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}18%{opacity:1}55%{opacity:1}70%{transform:translate(150px,0);opacity:0}100%{transform:translate(150px,0);opacity:0}}
/* rueda: barrita de 2 × 80 px con su indicador, y la mano que baja al lado */
.rueda-barra{position:absolute;left:50%;top:1.6rem;width:2px;height:8rem;margin-left:-1px;border-radius:9rem;background:rgba(255,255,255,.5);overflow:hidden}
.rueda-barra i{display:block;width:100%;height:25%;border-radius:9rem;background:var(--principal);animation:rueda 1s var(--e-p3-inout) infinite alternate}
@keyframes rueda{to{transform:translateY(300%)}}
.mano-rueda{position:absolute;left:calc(50% + .8rem);top:1.6rem;width:2.2rem;height:2.6rem;animation:rueda-mano 1s var(--e-p3-inout) infinite alternate}
@keyframes rueda-mano{to{transform:translate(0,6rem)}}
/* pellizco (celular): dos puntos que se separan con su pulso, y la mano que se abre */
.pellizco-linea{stroke:var(--blanco);stroke-dasharray:2 4;stroke-linecap:round;stroke-opacity:.45}
.pellizco-punto{fill:var(--blanco);transform-box:fill-box;transform-origin:center;animation:pel-punto 2s var(--e-p3-inout) infinite}
.pellizco-pulso{fill:var(--blanco);transform-box:fill-box;transform-origin:center;animation:pel-pulso 2s var(--e-p3-inout) infinite}
.pellizco-izq{animation:pel-izq 2s var(--e-p3-inout) infinite}
.pellizco-der{animation:pel-der 2s var(--e-p3-inout) infinite}
@keyframes pel-izq{0%,15%{transform:translateX(3rem)}55%,100%{transform:translateX(0)}}
@keyframes pel-der{0%,15%{transform:translateX(-3rem)}55%,100%{transform:translateX(0)}}
@keyframes pel-punto{0%{transform:scale(0);opacity:1}25%{transform:scale(1);opacity:1}70%,100%{transform:scale(1);opacity:0}}
@keyframes pel-pulso{0%,15%{transform:scale(0);opacity:.5}65%,100%{transform:scale(1);opacity:0}}
.mano-pellizco{transform-box:fill-box;transform-origin:50% 100%;animation:pel-mano 2s var(--e-p3-inout) infinite}
@keyframes pel-mano{0%,15%{transform:rotate(-12deg)}40%,100%{transform:rotate(4deg)}}

/* ── abajo: brújula · casita + «Explorá Urubó Norte» · solo disponibles · día/atardecer ── */
.brujula{position:fixed;left:3.2rem;bottom:var(--abajo);z-index:12;width:8.4rem;height:9.7rem;transform:translate(-.5rem,1.2rem);
  pointer-events:none;display:none;opacity:0;transition:opacity .6s var(--e-p1) .6s}
.brujula svg{width:100%;height:100%;display:block;overflow:visible}
body.en-mapa .brujula{opacity:1}
@media (min-width:650px){.brujula{display:block}}

.entra-abajo{transform:translateY(calc(100% + var(--sube, 3.2rem) + var(--bottom-bar,0px)));visibility:hidden;
  transition:transform .3s var(--e-expo-out),visibility 0s linear .3s,translate .35s var(--e-p3-inout),opacity .25s var(--e-p1)}
body.en-mapa:not(.ficha-abierta) .entra-abajo{transform:none;visibility:visible;transition:transform .7s var(--e-expo-out) 1s,visibility 0s,translate .35s var(--e-p3-inout),opacity .25s var(--e-p1)}
@media (min-width:650px){body.en-mapa:not(.ficha-abierta) .entra-abajo{transition-delay:.6s,.6s,0s,0s}}
/* con la hora abierta (mouse), sus etiquetas salen a la izquierda: filtro y leyenda se corren lo que miden */
body.hora-abierta:not(.hora-tapa) :is(.filtro,.leyenda-lotes){translate:calc(-1 * var(--corre, 0px)) 0}
body.hora-abierta.hora-tapa :is(.filtro,.leyenda-lotes){opacity:0;pointer-events:none} /* angosto: no hay lugar para correrse */

.barra{position:fixed;left:1.6rem;bottom:var(--abajo);z-index:14;width:calc(100% - 3.2rem);height:4.5rem;display:flex;align-items:stretch}
.barra-inicio{position:relative;z-index:1;flex:0 0 auto;width:4.5rem;height:4.5rem;display:flex;align-items:center;justify-content:center;
  background:var(--suave);color:var(--claro);transition:background-color .3s}
.barra-inicio svg{width:1.6rem;height:1.6rem;opacity:.5;transition:opacity .3s}
.barra-inicio.movida{background:var(--principal)}
.barra-inicio.movida svg{opacity:1}
@media (hover:hover) and (pointer:fine){.barra-inicio.movida:hover svg{opacity:.5}}
.barra-menu{position:relative;flex:1;display:flex;align-items:center;height:4.5rem;color:var(--principal)}
.barra-menu::before{content:"";position:absolute;left:0;top:0;bottom:0;right:4.6rem;background:var(--claro)}
.barra-texto{position:absolute;left:1.6rem;transition:opacity .3s}
.barra-flecha{position:absolute;right:4.6rem;top:0;width:4.5rem;height:100%;display:flex;align-items:center;justify-content:center}
.barra-flecha>span{position:relative;display:flex;overflow:hidden}
.barra-flecha svg{width:1.6rem;height:1.6rem;display:block;transition:transform .3s,opacity .3s}
.barra-flecha svg+svg{position:absolute;left:0;top:0;transform:translateY(-100%)}
@media (hover:hover) and (pointer:fine){
  .barra-menu:hover .barra-texto{opacity:.5}
  .barra-menu:hover .barra-flecha svg{transform:translateY(100%);opacity:.5}
  .barra-menu:hover .barra-flecha svg+svg{transform:translateY(0)}
}
@media (min-width:650px){
  .barra{left:50%;width:100%;max-width:28.5rem;transform:translateX(-50%)}
  body.en-mapa:not(.ficha-abierta) .barra.entra-abajo{transform:translateX(-50%)}
  .barra.entra-abajo{transform:translate(-50%,calc(100% + 3.2rem + var(--bottom-bar,0px)))}
  .barra-menu::before{right:0}
  .barra-flecha{right:0}
}
@media (min-width:1024px){.barra{max-width:28rem}}
body.menu-abierto .barra{z-index:16} /* el menú abierto tapa también el cuadrado de la hora, como el suyo */

/* el menú: una tarjeta que se destapa de abajo hacia arriba (1,25 s) con los nombres de a uno */
.menu{position:absolute;left:0;bottom:0;width:100%;overflow:hidden;z-index:2;transform:translateY(100%);
  transition:transform .75s var(--e-p3-inout),visibility 0s linear .75s;visibility:hidden}
/* alto máximo: abajo, la barra y la franja de Luara; arriba queda libre el logo (con los dos grupos, en el
   celular la hoja llega al tope y se desplaza adentro) */
.menu-mascara{display:flex;flex-direction:column;align-items:center;gap:2.4rem;padding:3rem 1.6rem 7rem;background:var(--claro);color:var(--principal);
  transform:translateY(-100%);transition:transform .75s var(--e-p3-inout);max-height:calc(100dvh - 14.6rem - var(--bottom-bar,0px));overflow-y:auto;
  scrollbar-width:none;overscroll-behavior:contain}
.menu-mascara::-webkit-scrollbar{display:none}
.menu-etq{margin:0;color:var(--acento)}
/* dos grupos («Conocé Urubó Norte» y «En el mapa»), cada uno con su etiqueta y su línea como el de Primland */
.menu-grupos{display:flex;flex-direction:column;gap:3.6rem;width:100%}
.menu-grupo{display:flex;flex-direction:column;align-items:center;gap:2.4rem;width:100%;min-width:0}
.menu hr{width:100%;margin:0 0 .8rem;border:0;border-top:1px solid var(--suave);opacity:.25}
.menu-lista{display:flex;flex-direction:column;gap:1.6rem;align-items:center;width:100%;margin:0;padding:0;list-style:none}
.menu-lista li{width:100%}
.menu-item{position:relative;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--serif);font-size:2.3rem;
  line-height:1.2;letter-spacing:-.01em;color:var(--principal);transition:opacity .5s var(--e-expo-out)}
.menu-item i{position:absolute;left:.5rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--principal);opacity:0;transform:scale(.75);
  transition:opacity .5s var(--e-expo-out)}
.menu-item.actual{opacity:.5}
.menu-item.actual i{opacity:.4}
@media (hover:hover) and (pointer:fine){.menu-item:hover{opacity:.5}.menu-item:hover i{opacity:1}}
.menu-creditos{margin-top:.8rem;font-family:var(--sans);font-size:1.1rem;color:var(--suave);transition:opacity .3s}
.menu-pie{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 2rem;margin:.8rem 0 0}
.menu-pie .menu-creditos{margin:0;padding:.6rem 0}
.menu-red{text-decoration:none}
@media (hover:hover) and (pointer:fine){.menu-creditos:hover{opacity:.5}}
.tactil .menu-lista{gap:0}
.tactil .menu-item{padding:.8rem 0}
.tactil .f-chip{min-height:4.4rem}
.tactil .f-ampliar{min-width:4.4rem;min-height:4.4rem}
.menu-cerrar{position:absolute;left:0;right:0;bottom:0;height:4.5rem;display:flex;align-items:center;justify-content:center;background:var(--principal);color:var(--claro)}
.menu-cerrar svg{width:1.2rem;height:1.2rem;transition:transform .5s}
@media (hover:hover) and (pointer:fine){.menu-cerrar:hover svg{transform:rotate(90deg)}}
.menu .js-item{opacity:0;transition:opacity .2s linear}
.menu.abierto{transform:none;visibility:visible;transition:transform 1.25s var(--e-p3-inout),visibility 0s}
.menu.abierto .menu-mascara{transform:none;transition:transform 1.25s var(--e-p3-inout)}
.menu.abierto .js-item{opacity:1;transition:opacity .5s var(--e-p3-inout) calc(.4s + var(--i,0) * var(--paso,.05s))} /* --paso lo pone ui.js: todos adentro antes de 1,4 s */
@media (min-width:1024px){.menu-item{font-size:2rem}.tut-gesto{font-size:2.8rem}}
/* computadora (y celular de costado): los dos grupos lado a lado; el panel es más ancho que la barra pero
   queda centrado sobre ella, y entra entero sin scroll a 1440 × 900 y a 1366 × 768 */
@media (min-width:1024px),(orientation:landscape) and (max-height:520px) and (min-width:560px){
  .menu{left:calc(50% - 30rem);width:60rem}
  .menu-mascara{padding-left:3.2rem;padding-right:3.2rem}
  .menu-grupos{display:grid;grid-template-columns:1fr 1fr;gap:0 3.2rem;align-items:start}
}

/* solo disponibles */
.filtro{position:fixed;left:1.6rem;bottom:calc(var(--abajo) + 4.5rem + 1rem);z-index:13;height:3.6rem;display:flex;align-items:center;gap:1rem;
  padding:0 1.4rem 0 1.2rem;background:var(--claro);color:var(--principal)}
.filtro .dot{width:.8rem;height:.8rem;border-radius:50%;background:var(--lote-disponible);box-shadow:inset 0 0 0 .1rem rgba(0,0,0,.15)}
.interruptor{position:relative;width:2.8rem;height:1.6rem;border-radius:2rem;background:rgba(121,141,115,.35);transition:background-color .3s;flex:0 0 auto}
.interruptor::after{content:"";position:absolute;left:.2rem;top:.2rem;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--blanco);
  box-shadow:0 .1rem .3rem rgba(0,0,0,.2);transition:transform .35s var(--e-p3-inout)}
[aria-pressed="true"] .interruptor,[aria-checked="true"] .interruptor{background:var(--principal)}
[aria-pressed="true"] .interruptor::after,[aria-checked="true"] .interruptor::after{transform:translateX(1.2rem)}
@media (min-width:650px){
  .filtro{left:auto;right:calc(3.2rem + 4.4rem + .8rem);bottom:var(--abajo);height:4.4rem}
}

/* la leyenda de los estados: arriba de «Solo disponibles» (con el filtro prendido, los otros dos se apagan) */
.filtro{--sube:9rem}
.leyenda-lotes{--sube:14rem;position:fixed;left:1.6rem;bottom:calc(var(--abajo) + 4.5rem + 1rem + 3.6rem + .6rem);z-index:13;margin:0;height:2.8rem;
  display:flex;align-items:center;gap:1.4rem;padding:0 1.2rem;background:rgba(255,251,231,.94);color:var(--principal);
  font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:.1em;line-height:1;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.leyenda-lotes span{display:inline-flex;align-items:center;gap:.6rem;transition:opacity .3s}
.leyenda-lotes i{display:block;width:.9rem;height:.9rem;border-radius:50%}
.leyenda-lotes .est-disponible i{background:var(--lote-disponible);box-shadow:0 0 0 .15rem var(--claro),0 0 0 .25rem rgba(69,106,75,.35)}
.leyenda-lotes .est-reservado i{background:var(--lote-reservado)}
.leyenda-lotes .est-vendido i{background:var(--lote-vendido)}
body[data-hora="tarde"] .leyenda-lotes .est-disponible i,body[data-hora="tarde"] .filtro .dot{background:var(--lote-disponible-tarde)}
body[data-hora="tarde"] .leyenda-lotes .est-reservado i{background:var(--lote-reservado-tarde)}
body[data-hora="tarde"] .leyenda-lotes .est-vendido i{background:var(--lote-vendido-tarde)}
.leyenda-lotes i,.filtro .dot{transition:background-color .6s}
body.solo-disponibles .leyenda-lotes :is(.est-reservado,.est-vendido){opacity:.3}
@media (min-width:650px){.leyenda-lotes{left:auto;right:calc(3.2rem + 4.4rem + .8rem);bottom:calc(var(--abajo) + 4.4rem + .6rem)}}

/* «Mapa ilustrativo»: debajo de la brújula en la computadora, arriba a la izquierda en el celular */
.ilustrativo{position:fixed;z-index:12;left:2rem;top:2.5rem;margin:0;font-family:var(--sans);font-size:.95rem;font-weight:500;letter-spacing:.12em;
  line-height:1.3;text-transform:uppercase;color:var(--claro);opacity:0;pointer-events:none;text-shadow:0 .1rem .6rem rgba(0,0,0,.35);transition:opacity .6s var(--e-p1) .6s}
body.en-mapa .ilustrativo{opacity:.6}
@media (min-width:650px){.ilustrativo{top:auto;left:calc(3.2rem - .5rem + 4.2rem);bottom:calc(.7rem + var(--bottom-bar,0px));transform:translateX(-50%);white-space:nowrap}}

/* día / atardecer: el cuadrado activo, y al pasar el mouse la otra opción crece hacia arriba */
.hora{position:fixed;right:1.6rem;bottom:var(--abajo);z-index:15;display:flex;flex-direction:column;align-items:flex-end}
.hora-op{position:relative;display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;padding:1.2rem;background:var(--claro);color:var(--suave)}
.hora-op svg{width:2rem;height:2rem;display:block;transition:opacity .3s,color .3s}
.hora-otra{background:var(--claro);color:var(--suave);border-left:1px solid rgba(121,141,115,.25);opacity:0;transform:translateY(100%);pointer-events:none;
  transition:transform .25s var(--e-p3-inout),opacity .25s var(--e-p3-inout);position:absolute;bottom:4.4rem;right:0}
.hora.abierta .hora-otra{opacity:1;transform:none;pointer-events:auto;transition:transform .3s var(--e-p3-inout),opacity .3s var(--e-p3-inout)}
.hora-etq{position:absolute;right:5rem;top:50%;margin-right:.3rem;padding:.8rem 1.6rem .6rem;background:var(--claro);color:var(--principal);white-space:nowrap;
  transform:translate(10%,-50%);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.hora-etq::after{content:"";position:absolute;right:-.3rem;top:50%;width:.8rem;height:.8rem;margin-top:-.4rem;background:var(--claro);transform:rotate(45deg)}
.hora-op:hover .hora-etq{opacity:1;transform:translate(0,-50%);transition:opacity .85s var(--e-p1),transform .85s var(--e-p1)}
.hora-cerrar{display:none;width:4.4rem;height:0;overflow:hidden;align-items:center;justify-content:center;background:var(--principal);color:var(--claro);
  transition:height .25s var(--e-p3-inout)}
.hora-cerrar svg{width:1.2rem;height:1.2rem}
@media (min-width:650px){
  .hora{right:3.2rem}
  .hora-otra{background:var(--principal);color:var(--claro-50);border:0}
  .hora-otra:hover{color:var(--claro)}
}
/* en el celular se abre con un toque: suben las dos opciones y abajo aparece la × verde */
.tactil .hora-cerrar{display:flex}
.tactil .hora.abierta .hora-cerrar{height:4.6rem}
.tactil .hora.abierta .hora-activa svg{opacity:.5}
.tactil .hora-etq{display:none}
.tactil .hora.abierta .hora-otra{bottom:calc(4.4rem + 4.6rem)}

/* el barrido circular de la hora (solo en la maqueta: en el motor lo hace la tarjeta de video) */
.barrido{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ── la ficha ── a la derecha en la computadora (582 px de ancho), desde abajo en el celular */
.ficha{position:fixed;z-index:30;left:1.2rem;right:1.2rem;bottom:calc(1.2rem + var(--bottom-bar,0px));height:calc(100dvh - 2.4rem - var(--bottom-bar,0px));
  overflow:hidden;pointer-events:none;visibility:hidden;transition:visibility 0s linear .75s}
.ficha.abierta{pointer-events:auto;visibility:visible;transition:visibility 0s}
.ficha-caja{position:absolute;inset:0;overflow:hidden;background:var(--claro);color:var(--principal);transform:translateY(100%);
  transition:transform .75s var(--e-p3-inout)}
.ficha-mascara{position:absolute;inset:0;display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .75s var(--e-p3-inout)}
.ficha.abierta .ficha-caja,.ficha.abierta .ficha-mascara{transform:none}
.ficha-cab{position:relative;flex:0 0 auto;height:6rem;display:flex;align-items:center;padding:0 5.6rem 0 2.4rem;background:var(--principal);color:var(--blanco)}
.ficha-migas{display:flex;align-items:center;gap:1.6rem;min-width:0}
.ficha-migas>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha-migas button{opacity:.5;transition:opacity .3s}
.ficha-migas button:hover{opacity:1}
.ficha-migas .barra-sep{color:var(--acento-claro)}
.cerrar{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);padding:1.5rem;color:var(--blanco);line-height:0}
.cerrar svg{width:1.4rem;height:1.4rem;transition:transform .5s var(--e-p1)}
@media (hover:hover) and (pointer:fine){.cerrar:hover svg{transform:rotate(90deg)}}
.ficha-scroll{position:relative;flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ficha-scroll::-webkit-scrollbar{display:none}
.ficha-contenido{min-height:100%;display:flex;flex-direction:column;padding:2rem 2.4rem 0;transition:opacity .5s var(--e-p1)}
.ficha-contenido.oculto{opacity:0;transition:opacity .25s var(--e-p1)}
.ficha.entrando .ficha-contenido{opacity:0}
.ficha.abierta:not(.entrando) .ficha-contenido:not(.oculto){transition:opacity .5s var(--e-p1) .15s}
@media (min-width:650px){
  .ficha{left:2.4rem;right:2.4rem;bottom:calc(2.4rem + var(--bottom-bar,0px));height:calc(100dvh - 4.8rem - var(--bottom-bar,0px))}
  .ficha-cab{height:8rem;padding-left:6rem}
  .ficha-contenido{padding:6rem 6rem 0}
}
@media (min-width:1024px),(orientation:landscape) and (max-height:520px) and (min-width:560px){
  .ficha{left:auto;right:0;top:0;bottom:0;height:auto;width:min(60.6rem,100%)}
  .ficha-caja{transform:translateX(100%)}
  .ficha-mascara{transform:translateX(-100%)}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  .ficha{width:min(46rem,58vw)}
  .ficha-cab{height:5.2rem;padding-left:2.4rem}
  .ficha-contenido{padding:2rem 2.4rem 0}
}
.ficha-pie{height:3rem;flex:0 0 auto} /* la ficha ya termina arriba de la franja (bottom: … + --bottom-bar): no se suma otra vez */
/* la acción principal, fija abajo de la ficha (la del lote: «Cotizar por WhatsApp»): siempre a la vista.
   En la computadora la ficha llega al borde de abajo: ahí suma lo que mide la franja de Luara. */
.ficha-fija{position:relative;flex:0 0 auto;padding:1.4rem 2.4rem 1.4rem;background:var(--claro);border-top:1px solid var(--linea);
  box-shadow:0 -1rem 2rem -1.4rem rgba(47,62,47,.25);transition:opacity .5s var(--e-p1)}
.ficha-fija.oculto{opacity:0;transition:opacity .25s var(--e-p1)}
.ficha.entrando .ficha-fija{opacity:0}
.ficha-fija .boton-acento{margin:0}
.f-fija-etq{margin:0 0 1rem;color:var(--acento)}
.f-fija-nota{margin:.8rem 0 0;text-align:center;font-family:var(--sans);font-size:1.1rem;line-height:1.4;color:var(--tinta-suave)}
@media (min-width:650px){.ficha-fija{padding:2rem 6rem 2rem}}
@media (min-width:1024px),(orientation:landscape) and (max-height:520px) and (min-width:560px){
  .ficha-fija{padding-bottom:calc(2rem + var(--bottom-bar,0px))}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  .ficha-fija{padding:1rem 2.4rem calc(1rem + var(--bottom-bar,0px))}
  .f-fija-etq{display:none}
}
/* el recorte del plano oficial (Áreas verdes): entero, sobre papel, sin recortar */
.f-media-plano figure{background:#fbfaf4}
.f-media-plano img{object-fit:contain}

/* piezas de la ficha */
.f-media{position:relative;margin:0 0 2.4rem}
.f-media figure{position:relative;margin:0;overflow:hidden;background:rgba(121,141,115,.15);aspect-ratio:972/616}
.f-media img{width:100%;height:100%;object-fit:cover}
.f-media figcaption,.f-credito{margin-top:.6rem;font-family:var(--sans);font-size:1rem;letter-spacing:.02em;color:var(--tinta-suave);opacity:.8}
.f-ampliar{position:absolute;right:1.6rem;top:1.6rem;width:3.8rem;height:3.8rem;border-radius:50%;background:var(--blanco);color:var(--principal);
  display:flex;align-items:center;justify-content:center;box-shadow:0 .2rem .8rem rgba(0,0,0,.12);transition:transform .4s var(--e-p1)}
.f-ampliar svg{width:1.6rem;height:1.6rem}
@media (hover:hover) and (pointer:fine){.f-ampliar:hover{transform:scale(1.08)}}
.f-ante{margin:0 0 .8rem;color:var(--acento)}
.f-titulo{text-wrap:balance;margin:0 0 1.8rem;font-family:var(--serif);font-weight:500;font-size:2.6rem;line-height:1.17;letter-spacing:-.01em;color:var(--principal)}
.f-texto{font-family:var(--serif);font-size:1.75rem;line-height:1.45;letter-spacing:-.01em;color:var(--principal);margin-bottom:2rem}
.f-texto p{margin:0 0 1em}
.f-texto p:last-child{margin-bottom:0}
.f-fecha{display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1.6rem;color:var(--acento)}
@media (min-width:650px){
  .f-titulo{font-size:3.1rem;line-height:1.21;margin-bottom:2rem}
  .f-texto{font-size:1.85rem;margin-bottom:5rem}
}

/* acordeón de la galería y tarjetas de 285 × 400 */
.f-acordeon{border-top:1px solid var(--linea);margin:0 0 3rem}
.f-acordeon>button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:2.2rem .8rem;font-family:var(--sans);font-size:1.4rem;
  color:var(--principal)}
.f-acordeon>button span:last-child{font-size:1.8rem;line-height:1;width:1.6rem;text-align:center}
.f-galeria{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -2.4rem;padding:0 2.4rem;scroll-padding:0 2.4rem}
.f-galeria::-webkit-scrollbar{display:none}
.f-acordeon:not(.abierto) .f-galeria,.f-acordeon:not(.abierto) .f-gal-ctrl{display:none}
.f-tarjeta{position:relative;flex:0 0 auto;width:min(28.5rem,70%);aspect-ratio:285/400;scroll-snap-align:start;overflow:hidden;background:rgba(121,141,115,.2)}
.f-tarjeta img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-expo-out)}
.f-tarjeta span{position:absolute;z-index:1;left:2.2rem;bottom:1.6rem;color:var(--blanco);text-shadow:0 .1rem .8rem rgba(0,0,0,.45);text-align:left}
/* un velo apenas oscuro abajo, para que la leyenda se lea sobre un piso claro (la churrasquera, la obra) */
.f-tarjeta:has(span)::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.3));pointer-events:none}
@media (hover:hover) and (pointer:fine){.f-tarjeta:hover img{transform:scale(1.04)}}
.f-gal-ctrl{display:flex;align-items:center;gap:1.6rem;margin-top:1.6rem}
.f-gal-avance{position:relative;flex:1;height:1px;background:var(--linea)}
.f-gal-avance i{position:absolute;left:0;top:-.05rem;height:.2rem;background:var(--principal);transition:width 1s var(--e-expo-out),left 1s var(--e-expo-out)}
.f-gal-ctrl button{width:3.2rem;height:3.2rem;display:flex;align-items:center;justify-content:center;color:var(--principal)}
.f-gal-ctrl button:disabled{opacity:.3;cursor:default}
.f-gal-ctrl svg{width:1.6rem;height:1.6rem}
@media (min-width:650px){.f-galeria{margin:0 -6rem;padding:0 6rem;scroll-padding:0 6rem}}

/* «Relacionadas»: fondo papel, punto bronce a la izquierda, filas con miniatura */
.f-rel{margin:2rem -2.4rem 0;padding:0 2.4rem;background:var(--papel);border-top:1px solid var(--linea)}
.f-rel-etq{position:relative;margin:0;padding:2.6rem 0 1.4rem;color:var(--acento)}
.f-rel-etq::before{content:"";position:absolute;left:-1.6rem;top:calc(2.6rem + .55em);width:.6rem;height:.6rem;border-radius:50%;background:var(--acento)}
.f-rel ul{list-style:none;margin:0;padding:0}
.f-rel li+li{border-top:1px solid var(--linea)}
.f-fila{width:100%;display:flex;align-items:center;gap:2.4rem;padding:2.2rem 0;text-align:left}
.f-fila-img{flex:0 0 auto;width:12rem;aspect-ratio:161/96;overflow:hidden;background:rgba(121,141,115,.18);display:flex;align-items:center;justify-content:center;color:var(--suave)}
.f-fila-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-expo-out)}
.f-fila-img svg{width:2.4rem;height:2.4rem}
.f-fila b{display:block;font-family:var(--sans);font-weight:500;font-size:1.5rem;line-height:1.3;color:var(--principal);margin-bottom:.4rem}
.f-fila small{color:var(--acento)}
@media (hover:hover) and (pointer:fine){.f-fila:hover img{transform:scale(1.05)}.f-fila:hover b{opacity:.6}}
@media (min-width:650px){
  .f-rel{margin:3rem -6rem 0;padding:0 6rem}
  .f-rel-etq::before{left:-4rem}
  .f-fila-img{width:16.1rem}
  .f-fila{gap:4rem}
}

/* botones de la ficha */
.boton-acento{display:flex;align-items:center;justify-content:center;width:100%;height:4.5rem;margin-top:auto;background:var(--acento);color:var(--blanco);
  text-decoration:none;font-family:var(--sans);font-size:1.1rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.boton-acento .cambia>span,.boton-blanco .cambia>span,.boton-borde .cambia>span{display:flex;align-items:center;justify-content:center;gap:1rem}
.boton-acento svg,.boton-blanco svg,.boton-borde svg{width:1.5rem;height:1.5rem;flex:0 0 auto}
.f-cta{margin-top:auto;padding-top:2.4rem}
.f-cta .boton-acento{margin:0}
.f-cta-nota{margin:1rem 0 0;text-align:center;font-family:var(--sans);font-size:1.15rem;line-height:1.45;color:var(--tinta-suave)}
@media (min-width:650px){.boton-acento{height:6rem}}
@media (min-width:1024px){.boton-acento{height:5.6rem}}
.boton-blanco{display:inline-flex;align-items:center;justify-content:center;min-width:15.2rem;height:4.5rem;padding:0 2.4rem;background:var(--blanco);
  color:var(--principal);text-decoration:none;font-family:var(--sans);font-size:1.1rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  outline:3px solid rgba(255,255,255,.16)}
.boton-borde{display:flex;align-items:center;justify-content:center;width:100%;height:5.6rem;border:1px solid var(--linea);color:var(--principal);
  font-family:var(--sans);font-size:1.1rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:border-color .3s}
@media (hover:hover) and (pointer:fine){.boton-borde:hover{border-color:var(--principal)}}

/* ficha del lote */
.f-plano{margin:0 0 2.4rem;background:rgba(121,141,115,.10);border:1px solid var(--linea);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.f-plano svg{width:100%;height:100%;display:block}
.f-plano .lote-forma{stroke:var(--principal);stroke-width:1.5;vector-effect:non-scaling-stroke}
.f-plano text{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.08em;fill:var(--principal)}
.f-plano .cota{stroke:var(--principal);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.6}
.f-estado{display:inline-flex;align-items:center;gap:.8rem;margin:-.6rem 0 2rem;color:var(--principal)}
.f-estado i,.f-leyenda i,.f-lote-estado i{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;box-shadow:inset 0 0 0 .1rem rgba(0,0,0,.15)}
.est-disponible i{background:var(--lote-disponible)}
.est-reservado i{background:var(--lote-reservado)}
.est-vendido i{background:var(--lote-vendido)}
.f-detalles{list-style:none;margin:0 0 2rem;padding:0}
.f-detalles li{display:flex;align-items:center;gap:1.4rem;padding:.75rem 0;font-family:var(--sans);font-size:1.45rem;line-height:1.4;color:var(--principal)}
.f-detalles svg{width:1.6rem;height:1.6rem;flex:0 0 auto;color:var(--suave)}
.f-detalles b{font-weight:500}
.f-nota{margin:0 0 3rem;padding:1.2rem 1.4rem;background:rgba(234,178,121,.18);font-family:var(--sans);font-size:1.2rem;line-height:1.5;color:var(--tinta-suave)}
.f-contacto{margin:0 -2.4rem 3.2rem;padding:4.4rem 2.4rem 4rem;background:var(--principal);color:var(--claro)}
.f-contacto .label-m{color:var(--acento-claro);margin:0 0 1.6rem}
.f-contacto h3{margin:0 0 2.8rem;font-family:var(--serif);font-weight:500;font-size:2.8rem;line-height:1.15;letter-spacing:-.01em;color:var(--claro)}
.f-contacto-nota{margin:1.6rem 0 0;font-family:var(--sans);font-size:1.15rem;line-height:1.45;color:var(--claro);opacity:.7}
@media (min-width:650px){.f-contacto{margin:0 -6rem 4.8rem;padding:5.6rem 6rem 5.2rem}.f-contacto h3{font-size:3.1rem}}
.f-chips{display:flex;flex-wrap:wrap;gap:.8rem;padding:0 0 3rem}
.f-chip{display:inline-flex;align-items:center;gap:.8rem;padding:.9rem 1.4rem;border:1px solid var(--linea);background:var(--claro);color:var(--principal);
  font-family:var(--sans);font-size:1.2rem;font-weight:500;letter-spacing:.04em;transition:border-color .3s,background-color .3s}
.f-chip i{width:.7rem;height:.7rem;border-radius:50%;background:var(--lote-disponible);box-shadow:inset 0 0 0 .1rem rgba(0,0,0,.15)}
.f-chip small{font-weight:400;opacity:.7}
@media (hover:hover) and (pointer:fine){.f-chip:hover{border-color:var(--principal)}}

/* lista de lotes */
.f-interruptor{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1.6rem 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  color:var(--principal)}
.f-leyenda{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin:1.6rem 0 2.4rem;font-family:var(--sans);font-size:1.2rem;color:var(--tinta-suave)}
.f-leyenda span{display:inline-flex;align-items:center;gap:.6rem}
.f-manzana{margin:2.4rem 0 .4rem;color:var(--acento)}
.f-lote{width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1.6rem;padding:1.3rem 0;border-bottom:1px solid var(--linea);
  font-family:var(--sans);font-size:1.4rem;color:var(--principal);text-align:left}
.f-lote b{font-family:var(--serif);font-weight:500;font-size:1.9rem}
.f-lote-estado{display:inline-flex;align-items:center;gap:.6rem;font-size:1.15rem;color:var(--tinta-suave);min-width:9.6rem}
@media (hover:hover) and (pointer:fine){.f-lote:hover{background:rgba(121,141,115,.08)}}
.f-lote.no-disp{opacity:.55}
.f-lista-creditos{list-style:none;margin:0 0 3rem;padding:0;font-family:var(--sans);font-size:1.3rem;line-height:1.55;color:var(--principal)}
.f-lista-creditos li{padding:1.1rem 0;border-bottom:1px solid var(--linea)}
.f-lista-creditos small{display:block;color:var(--tinta-suave);font-size:1.15rem}
.f-boton-plano{margin:0 0 2.4rem}

/* ── lo de la página principal de urubonorte.com (contenido.json): las mismas piezas de la ficha ── */
/* sus tarjetas, numeradas 01 / 02 / 03: número bronce, título serif chico, subtítulo, párrafo y foto */
.f-bloques{list-style:none;margin:0 0 3rem;padding:0}
.f-bloque{padding:2.8rem 0 0;border-top:1px solid var(--linea)}
.f-bloque-titulo{text-wrap:balance;margin:0 0 .8rem;font-family:var(--serif);font-weight:500;font-size:2.2rem;line-height:1.2;letter-spacing:-.01em;color:var(--principal)}
.f-bloque-sub{margin:0 0 1.2rem;color:var(--tinta-suave)}
.f-bloque .f-texto{margin-bottom:2.4rem}
.f-bloque .f-media{margin-bottom:2.8rem}
@media (min-width:650px){.f-bloque-titulo{font-size:2.4rem}.f-bloque .f-texto{margin-bottom:2.8rem}}
/* una lista con etiqueta («Privilegios», «En el camino») */
.f-seccion{margin:0 0 3rem}
.f-seccion>.f-ante{margin-bottom:1.2rem}
.f-seccion .f-detalles{margin-bottom:0}
/* los privilegios que llevan a un punto o a una ficha: filas con línea y flecha bronce */
.f-detalles-ir li{padding:0;border-top:1px solid var(--linea)}
.f-detalles-ir li:last-child{border-bottom:1px solid var(--linea)}
.f-detalles-ir li>*{display:flex;align-items:center;gap:1.4rem;width:100%;padding:1.3rem 0;text-align:left;color:var(--principal)}
.f-ir-flecha{margin-left:auto;padding-left:1.2rem;line-height:0}
.f-detalles .f-ir-flecha svg{color:var(--acento);transition:transform .5s var(--e-expo-out)}
@media (hover:hover) and (pointer:fine){.f-ir:hover .f-ir-flecha svg{transform:translateX(.4rem)}.f-ir:hover>span:not(.f-ir-flecha){opacity:.6}}
.f-detalles a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35rem;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color .3s}
@media (hover:hover) and (pointer:fine){.f-detalles a:hover{text-decoration-color:currentColor}}
.f-credito-pie{margin:-1.4rem 0 2.4rem}
/* la galería entera: grupos con su etiqueta y tarjetas de dos en dos (las de la galería de siempre) */
.f-grupo-etq{margin:1.6rem 0 1.2rem;color:var(--acento)}
.f-grupo-etq~.f-grupo-etq{margin-top:3.2rem}
.f-grilla{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.f-grilla .f-tarjeta{width:auto;aspect-ratio:1}
.f-grilla .f-tarjeta span{left:1.4rem;right:1.2rem;bottom:1.2rem}
.f-grilla .f-tarjeta-ancha{grid-column:1/-1;aspect-ratio:2/1}
.f-grilla+.f-credito-pie{margin-top:2.4rem}
/* el formulario de «Contacto» (el «Inquire» de Primland): etiqueta chica arriba, línea abajo */
.f-form{margin:0 0 3.2rem}
.f-form-etq{margin-bottom:2.8rem;border-bottom:1px solid var(--linea)}
.f-campo{display:flex;flex-direction:column;gap:.4rem;margin:0 0 2.6rem;padding:0;border:0;min-width:0}
.f-campo>label,.f-campo>legend{color:var(--principal)}
.f-opciones{display:block}
.f-opciones>legend{padding:0;margin:0 0 1.2rem}
.f-opciones .f-chips{padding:0}
.f-campo :is(input,textarea){width:100%;margin:0;padding:.5rem 0 .9rem;border:0;border-bottom:1px solid var(--linea);border-radius:0;background:transparent;
  color:var(--principal);font-family:var(--serif);font-size:1.9rem;line-height:1.3;letter-spacing:-.01em;transition:border-color .3s}
.f-campo textarea{min-height:6.4rem;resize:vertical}
.f-campo :is(input,textarea)::placeholder{color:var(--principal);opacity:.38}
.f-campo :is(input,textarea):focus{outline:none;border-bottom-color:var(--principal)}
.f-campo :is(input,textarea):focus-visible{outline:none;box-shadow:0 1px 0 var(--principal)}
.f-campo [aria-invalid="true"]{border-bottom-color:var(--acento)}
.f-error{margin:.6rem 0 0;font-family:var(--sans);font-size:1.2rem;line-height:1.4;color:var(--acento)}
label.f-chip{position:relative;cursor:pointer}
.f-chip input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.f-chip:has(input:checked){background:var(--principal);border-color:var(--principal);color:var(--claro)}
.f-chip:has(input:focus-visible){outline:2px solid var(--acento-vivo);outline-offset:2px}
.f-form .boton-acento{margin-top:3.2rem}
@media (min-width:650px){.f-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem}}
/* la oficina de ventas, abajo de «Contacto», en el papel de «Relacionadas» */
.f-oficina .f-detalles{margin:0}
.f-oficina .f-detalles li{padding:1.3rem 0}
.f-oficina .f-credito{margin:1.2rem 0 2rem}

/* ── el visor a pantalla completa (galería) ── */
.visor{position:fixed;inset:0;z-index:60;background:var(--principal);color:var(--claro);display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transition:opacity .25s var(--e-p1),visibility 0s linear .25s}
.visor.abierto{opacity:1;visibility:visible;transition:opacity .75s var(--e-p3-inout),visibility 0s}
.visor-avance{position:absolute;left:0;top:0;height:.4rem;background:var(--acento-vivo);transition:width .75s var(--e-expo-out)}
.visor-cont{position:absolute;left:2rem;top:3.6rem;display:flex;gap:1rem;align-items:center}
.visor-cont b{font-weight:500;text-decoration:underline;text-underline-offset:.4rem;text-decoration-thickness:1px}
.visor-cont i{font-style:normal;color:var(--acento-vivo)}
.visor .cerrar{top:4.6rem;right:.5rem}
.visor-escena{flex:1;display:flex;align-items:center;justify-content:center;padding:7.8rem 1.6rem 1rem;min-height:0}
.visor-escena img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .35s var(--e-p1)}
.visor-escena img.cambiando{opacity:0}
.visor-pie{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1.4rem;padding:1.4rem 1.6rem calc(3rem + var(--bottom-bar,0px))}
.visor-leyenda{text-align:center}
.visor-credito{font-family:var(--sans);font-size:1rem;letter-spacing:.04em;opacity:.6;margin-top:-.8rem}
.visor-flechas{display:flex;align-items:center;gap:1.4rem}
.visor-flechas button{width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;color:var(--claro)}
.visor-flechas button:disabled{opacity:.3;cursor:default}
.visor-flechas svg{width:1.8rem;height:1.8rem}
.visor-flechas i{font-style:normal;color:var(--acento-vivo)}
@media (min-width:1024px){.visor-escena{padding:8rem 20.4rem .6rem}}

/* ── la cortina verde (para pasar a una vista cercana, si algún día hay) ── */
.cortina{position:fixed;inset:0;z-index:90;background:var(--principal);clip-path:inset(0 100% 0 0);pointer-events:none}

/* ── aviso para quien no tiene WebGL o JavaScript ── */
.sin-js{position:fixed;inset:auto 1.6rem 1.6rem;z-index:200;padding:1.2rem 1.6rem;background:var(--claro);color:var(--principal);font-family:var(--sans);font-size:1.3rem}

/* ── celular de costado: la portada se achica para que entre ── */
@media (orientation:landscape) and (max-height:520px){
  .cabecera{height:5.2rem}
  .logo{top:1rem}
  .logo svg{height:1.3rem}.logo b{font-size:2.1rem}.logo small{display:none}
  .consultar,.ingresar{top:1.6rem}
  .portada{gap:1.8rem}
  .portada-txt{gap:1.2rem}
  .titulo{font-size:3.6rem;padding:0}
  .frase{display:none}
  .tut-caja{transform:scale(.8)}
  .menu-mascara{max-height:calc(100dvh - 9rem - var(--bottom-bar,0px));gap:1.4rem;padding-top:2rem}
  .menu-grupo{gap:1.4rem}
  .menu-lista{gap:1rem}
  .menu-item{font-size:2rem}
  .tactil .menu-item{padding:.5rem 0}
  .filtro{left:auto;right:calc(1.6rem + 4.4rem + .8rem);bottom:var(--abajo);height:4.4rem}
  .leyenda-lotes{left:auto;right:calc(1.6rem + 4.4rem + .8rem);bottom:calc(var(--abajo) + 4.4rem + .6rem)}
  .ilustrativo{display:none}
  .visor-escena{padding:5.6rem 6rem .4rem}
  .visor-pie{gap:.6rem;padding-bottom:calc(1rem + var(--bottom-bar,0px))}
  .visor-credito{display:none}
  .visor-flechas button{height:3.2rem}
  .barra{left:50%;width:100%;max-width:28.5rem;transform:translateX(-50%)}
  body.en-mapa:not(.ficha-abierta) .barra.entra-abajo{transform:translateX(-50%)}
  .barra.entra-abajo{transform:translate(-50%,calc(100% + 3.2rem + var(--bottom-bar,0px)))}
  .barra-menu::before{right:0}
  .barra-flecha{right:0}
  :root{--abajo:calc(1.6rem + var(--bottom-bar, 0px))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .tut-paso{animation:none!important;opacity:1}
  .tut-paso+.tut-paso{display:none}
  .cargador-giro{animation:gira 1s linear infinite!important;animation-iteration-count:infinite!important;animation-duration:1s!important}
}

/* ═════════════════════════════ lo nuevo de Berchatti ═════════════════════════════ */
/* sin la base detrás no hay estados: la leyenda muestra los sectores (sus colores son los del mapa actual) y
   «Solo disponibles» no está */
.leyenda-lotes .ley-sector{display:none}
.leyenda-lotes .ley-sector i{background:transparent;box-shadow:inset 0 0 0 .2rem var(--c)}
body.sin-estados .leyenda-lotes :is(.est-disponible,.est-reservado,.est-vendido){display:none}
body.sin-estados .leyenda-lotes .ley-sector{display:inline-flex}
body.sin-estados .filtro{display:none}
body.sin-estados .leyenda-lotes{bottom:calc(var(--abajo) + 4.5rem + 1rem)}
@media (min-width:650px){body.sin-estados .leyenda-lotes{bottom:var(--abajo);height:4.4rem}}
/* la ficha del lote: la forma (la del mapa actual), el sector, la manzana y sus datos */
.f-plano .f-plano-lado{font-size:11.5px;font-weight:400;letter-spacing:0;fill:var(--tinta-suave)}
.f-plano .f-plano-sup{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:0;fill:var(--principal)}
.f-plano .f-plano-calle{font-size:9.5px;letter-spacing:.16em;fill:var(--acento)}
.f-sub{margin:-1.6rem 0 1.6rem;color:var(--tinta-suave)}
.f-estado small,.f-estado span{font-weight:400}
.f-datos{margin:0 0 2rem;padding:0;border-top:1px solid var(--linea)}
.f-datos>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.2rem;padding:1.05rem 0;border-bottom:1px solid var(--linea)}
.f-datos dt{display:flex;align-items:center;gap:1.1rem;font-family:var(--sans);font-size:1.25rem;line-height:1.35;color:var(--tinta-suave)}
.f-datos dt svg{width:1.6rem;height:1.6rem;flex:0 0 auto;color:var(--suave)}
.f-datos dd{margin:0;font-family:var(--sans);font-size:1.4rem;font-weight:500;line-height:1.35;color:var(--principal);text-align:right}
.f-datos dd small{display:block;margin-top:.2rem;font-size:1.15rem;font-weight:400;color:var(--tinta-suave)}
/* «Me interesa este lote» (el formulario del mapa actual) */
.f-interes{margin:0 0 3rem}
.f-interes-txt{margin:0 0 1.6rem}
.f-interes .trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.f-interes [data-interes-msj]{min-height:1.6em}
.f-interes [data-interes-msj].error{color:#a3372a;opacity:1}
.f-interes.enviado .f-campos,.f-interes.enviado .f-campo,.f-interes.enviado button[type=submit]{display:none}
/* la lista de lotes: los sectores arriba y cada manzana un acordeón (son 2.712 lotes) */
.f-sectores{padding-bottom:2rem}
.f-chip.on{border-color:var(--principal);background:var(--papel)}
.f-chip i{background:var(--c, var(--lote-disponible))}
.f-mz>button small{font-family:var(--sans);font-size:1.15rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--tinta-suave)}
.f-mz .f-mz-lotes{display:none}
.f-mz.abierto .f-mz-lotes{display:block;padding-bottom:1.2rem}
.f-lote small{font-family:var(--sans);font-size:1.1rem;color:var(--tinta-suave)}
.est-sin i{background:var(--suave)}
/* «Ubicación y cómo llegar»: los km del camino desde el puente */
.f-ruta{list-style:none;margin:0 0 2.4rem;padding:0;border-top:1px solid var(--linea)}
.f-ruta li{display:grid;grid-template-columns:7.2rem 1fr;gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--linea);font-family:var(--sans);font-size:1.4rem;line-height:1.35;color:var(--principal)}
.f-ruta b{font-family:var(--serif);font-weight:500;font-size:1.8rem;line-height:1.1;color:var(--acento)}
/* una ficha todavía sin contenido (Formas de pago) o un dato que falta (los WhatsApp del equipo) */
.f-vacia{margin:0 0 3rem;padding:2.4rem 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font-family:var(--serif);font-style:italic;font-size:1.9rem;color:var(--tinta-suave)}
/* celular: arriba a la izquierda está «Ingresar»: «Mapa ilustrativo» baja a la izquierda, sobre la leyenda */
@media (max-width:649px){.ilustrativo{top:auto;left:1.6rem;bottom:calc(var(--abajo) + 4.5rem + 1rem + 2.8rem + .8rem)}
  body:not(.sin-estados) .ilustrativo{bottom:calc(var(--abajo) + 4.5rem + 1rem + 3.6rem + .6rem + 2.8rem + .8rem)}}
/* el estado del lote: el punto y el texto en un renglón que se parte bien en el celular */
.f-estado{display:block;line-height:1.5}
.f-estado i{display:inline-block;vertical-align:-.05rem;margin-right:.8rem}
/* computadora: «Mapa ilustrativo · Ejemplo local» es más largo que el de Urubó Norte: va desde el borde, no centrado */
@media (min-width:650px){.ilustrativo{left:1.6rem;transform:none}}
/* dentro del mapa principal (/mapa/plano-3d/): «← Mapa 3D» a la izquierda, con la letra de «Consultar», a la vista
   también con una ficha abierta (así vuelve con el lote que se está mirando); «Ingresar» y «Consultar» a la derecha */
.cabecera .volver{position:absolute;left:2rem;top:2.25rem;color:var(--claro);text-decoration:none;align-items:center;gap:.7rem}
.cabecera .volver svg{width:1.5rem;height:1.5rem;flex:0 0 auto}
.cabecera-der{position:absolute;right:2rem;top:2.25rem;display:flex;align-items:center;gap:2.4rem;pointer-events:none}
.cabecera-der>*{pointer-events:auto}
.cabecera .cabecera-der>.consultar,.cabecera .cabecera-der>.ingresar{position:static}
@media (max-width:649px){.cabecera-der{flex-direction:column;align-items:flex-end;gap:1.3rem}}
@media (orientation:landscape) and (max-height:520px){.cabecera .volver,.cabecera-der{top:1.6rem}}
/* (celular y tableta: la ficha deja libre la franja de arriba, donde queda «← Mapa 3D») */
@media (max-width:649px) and (min-height:521px){body.en-mapa-modo .ficha{height:calc(100dvh - 2.4rem - 5.2rem - var(--bottom-bar,0px))}}
@media (min-width:650px) and (max-width:1023px) and (min-height:521px){body.en-mapa-modo .ficha{height:calc(100dvh - 4.8rem - 5.2rem - var(--bottom-bar,0px))}}
/* ?en-mapa: se entra directo, sin portada: sin el velo oscuro de la portada mientras baja */
body.directo .velo{opacity:0}