/* Berchatti Residence Urubó — página cinematográfica (prueba local).
   Paleta de Royal Estate (tinta, pizarra, dorado) + la luz de atardecer de los renders. */
:root {
  --tinta: #11151a;
  --tinta-2: #171c22;
  --pizarra: #353942;
  --hueso: #f4f5f7;
  --hueso-2: rgba(244, 245, 247, .72);
  --hueso-3: rgba(244, 245, 247, .46);
  --oro: #6d767f;
  --oro-claro: #c9d0d7;
  --ambar: #9aa4ae;
  --coral: #6d767f;
  --atardecer: linear-gradient(100deg, #c9d0d7 0%, #9aa4ae 48%, #6d767f 100%);
  --vidrio: rgba(23, 28, 34, .62);
  --borde: rgba(244, 245, 247, .14);
  --radio: 22px;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --texto: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --lado: clamp(16px, 4vw, 64px);
  --curva: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--tinta); }
body { margin: 0; background: var(--tinta); color: var(--hueso); font: 400 16px/1.55 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ambar); color: var(--tinta); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* grano de película */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
@keyframes grano { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* ---------- tipografía ---------- */
.ceja { font: 600 12px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--oro-claro); }
.titulo { font: 900 clamp(56px, 11vw, 190px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0; }
.titulo--md { font-size: clamp(44px, 7.2vw, 120px); }
.titulo--sm { font-size: clamp(34px, 4.6vw, 72px); line-height: .9; }
.dorado { background: var(--atardecer); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grande { font: 500 clamp(20px, 2.1vw, 30px)/1.45 var(--texto); color: var(--hueso-2); max-width: 34em; }
.grande b { color: var(--hueso); font-weight: 700; }
.texto-chico { font-size: 14px; color: var(--hueso-3); }
.palabras .p { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.palabras .p > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--curva); transition-delay: calc(var(--i) * 55ms); }
.palabras.visto .p > span, html:not(.js) .palabras .p > span { transform: none; }

/* ---------- botones ---------- */
.pildora { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.6em; border-radius: 999px; font: 700 15px/1 var(--texto);
  background: var(--atardecer); color: #171c22; box-shadow: 0 10px 40px -12px rgba(154, 164, 174, .7); transition: transform .4s var(--curva), box-shadow .4s; }
.pildora:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 50px -12px rgba(154, 164, 174, .9); }
.pildora--vidrio { background: rgba(244, 245, 247, .08); color: var(--hueso); border: 1px solid var(--borde); box-shadow: none; backdrop-filter: blur(14px); }
.pildora--chica { padding: .7em 1.15em; font-size: 13px; }
.enlace-sitio { font: 700 14px/1 var(--texto); color: var(--oro-claro); display: inline-flex; gap: .5em; align-items: center; }
.enlace-sitio:hover { color: var(--hueso); }
.play { width: clamp(76px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(244, 245, 247, .92); color: var(--tinta);
  box-shadow: 0 0 0 0 rgba(244, 245, 247, .4); animation: latido 2.4s infinite; transition: transform .4s var(--curva); }
.play:hover { transform: scale(1.08); }
.play svg { width: 34%; margin-left: 8%; }
@keyframes latido { 70% { box-shadow: 0 0 0 26px rgba(244, 245, 247, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 245, 247, 0); } }

/* ---------- carga: el león de Royal Estate se enciende ---------- */
.carga { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, #1d232b 0%, var(--tinta) 62%, #07090c 100%); }
.carga__logo { width: clamp(96px, 11vw, 150px); aspect-ratio: 1007 / 1151; position: relative; }
.carga__logo i { position: absolute; inset: 0; -webkit-mask: url(../img/marca/royal-vertical.png) center / contain no-repeat; mask: url(../img/marca/royal-vertical.png) center / contain no-repeat; }
.carga__logo .base { background: rgba(244, 245, 247, .1); }
.carga__logo .luz { background: linear-gradient(0deg, var(--coral), var(--ambar) 40%, var(--oro-claro) 80%, #fff);
  clip-path: inset(calc(100% - var(--carga, 0%)) 0 0 0); filter: drop-shadow(0 0 18px rgba(154, 164, 174, .55)); }
.carga__dato { position: absolute; left: 50%; bottom: clamp(28px, 7vh, 64px); translate: -50% 0; font: 600 11px/1 var(--mono); letter-spacing: .3em; color: var(--hueso-3); text-transform: uppercase; }
.carga.fuera { pointer-events: none; }
html.sin-carga .carga { display: none; }

/* ---------- aviso y navegación ---------- */
.aviso { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 34px; display: grid; place-items: center; background: #0a0c10;
  font: 600 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--oro-claro); padding-top: env(safe-area-inset-top, 0px); transition: transform .6s var(--curva); }
.aviso b { color: var(--hueso); font-weight: 600; }
.nav { position: fixed; top: calc(34px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 28px; padding: 18px var(--lado);
  transition: transform .6s var(--curva), background .4s, top .6s var(--curva); }
.nav.solida { background: linear-gradient(180deg, rgba(15, 18, 23, .86), rgba(15, 18, 23, 0)); }
html.bajando .nav { transform: translateY(-140%); }
html.bajando .aviso { transform: translateY(-100%); }
html.pasado .nav { top: env(safe-area-inset-top, 0px); }
html.pasado .aviso { transform: translateY(-100%); }
.nav__marca img { height: 38px; width: auto; }
.nav__links { display: flex; gap: 26px; margin: 0 auto; font: 600 14px/1 var(--texto); color: var(--hueso-2); }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ambar); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--curva); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--hueso); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: none; }
.nav__menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borde); place-items: center; }
.nav__menu span, .nav__menu span::before { display: block; width: 18px; height: 1.5px; background: var(--hueso); position: relative; }
.nav__menu span::before { content: ""; position: absolute; top: 6px; }
.menu-sitio { position: fixed; inset: 0; z-index: 70; background: rgba(10, 12, 16, .96); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 var(--lado);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--curva); }
.menu-sitio.abierto { opacity: 1; pointer-events: auto; }
.menu-sitio a { font: 900 clamp(46px, 13vw, 84px)/1 var(--display); text-transform: uppercase; }
.menu-sitio a:hover { color: var(--ambar); }
.menu__cerrar { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); right: var(--lado); font: 600 12px/1 var(--mono); letter-spacing: .2em; }

/* ---------- secciones base ---------- */
.seccion { position: relative; padding-block: clamp(90px, 14vw, 200px); padding-inline: var(--lado); }
.ancho { max-width: 1320px; margin-inline: auto; }
.lleno { position: relative; height: 100vh; overflow: hidden; }
.lleno > img, .lleno > video, .cubrir { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.velo-arriba::before { content: ""; position: absolute; inset: 0 0 auto; height: 45%; z-index: 1; background: linear-gradient(180deg, rgba(15, 18, 23, .85), transparent); pointer-events: none; }
.velo-abajo::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; z-index: 1; background: linear-gradient(0deg, var(--tinta), transparent); pointer-events: none; }
.ilustrativa { position: absolute; right: 14px; bottom: 12px; z-index: 3; font: 500 10px/1 var(--mono); letter-spacing: .12em; color: rgba(244, 245, 247, .5); text-transform: uppercase; }
.js [data-rev]:not(.visto) { opacity: .005; transform: translateY(40px); }
[data-rev] { transition: opacity 1.2s var(--curva), transform 1.2s var(--curva); transition-delay: calc(var(--d, 0) * 90ms); }

/* ---------- portada: la ventana del logo ---------- */
.ventana { position: relative; height: 100vh; overflow: hidden; background: var(--tinta); }
.ventana__foto { position: absolute; inset: 0; }
.ventana__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.18)); }
.ventana__foto--mascara { -webkit-mask: url(../img/marca/berchatti.png) no-repeat; mask: url(../img/marca/berchatti.png) no-repeat;
  -webkit-mask-size: var(--mw) auto; mask-size: var(--mw) auto; -webkit-mask-position: var(--mx) var(--my); mask-position: var(--mx) var(--my); }
.ventana__foto--llena { opacity: 0; }
.ventana__brillo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 46%, rgba(154, 164, 174, .16), transparent 70%); }
.ventana__pie { position: absolute; left: var(--lado); right: var(--lado); bottom: clamp(22px, 5vh, 46px); z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; }
.ventana__pie .dato { font: 600 12px/1.6 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hueso-2); }
.ventana__pie .dato b { color: var(--hueso); font-weight: 600; }
.ventana__pie .marcas { justify-self: end; display: flex; align-items: center; gap: 16px; opacity: .85; }
.ventana__pie .marcas img { height: 22px; width: auto; }
.ventana__pie .marcas hr { width: 1px; height: 22px; border: 0; background: var(--borde); }
.ventana__bajar { position: absolute; left: 50%; translate: -50% 0; bottom: 116px; z-index: 4; font: 600 10px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--hueso-3); display: grid; justify-items: center; gap: 10px; }
.ventana__bajar i { width: 1px; height: 38px; background: linear-gradient(var(--hueso-3), transparent); animation: gota 2s infinite; transform-origin: top; }
@keyframes gota { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.ventana__titulo { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; gap: 22px; padding: 0 var(--lado); opacity: 0; }
.ventana__titulo .titulo { text-shadow: 0 6px 60px rgba(0, 0, 0, .35); }

/* ---------- datos en frase ---------- */
.frases { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--borde); }
.frases div { padding: 34px 26px 0 0; }
.frases b { display: block; font: 900 clamp(40px, 4.6vw, 76px)/.9 var(--display); text-transform: uppercase; }
.frases span { font-size: 15px; color: var(--hueso-2); }

/* ---------- vuelo del dron (cuadros con el scroll) ---------- */
.vuelo { position: relative; height: 100vh; overflow: hidden; background: #000; }
.vuelo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vuelo__linea { position: absolute; left: var(--lado); bottom: clamp(60px, 14vh, 140px); z-index: 2; max-width: min(92vw, 1100px); opacity: 0; }
.vuelo__linea .titulo { font-size: clamp(48px, 8.4vw, 150px); text-shadow: 0 10px 60px rgba(0, 0, 0, .45); }
.vuelo__marca { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: 0; }
.vuelo__marca::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 6px rgba(154, 164, 174, .22), 0 0 24px var(--ambar); }
.vuelo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 12, 16, .7), transparent 45%), linear-gradient(180deg, rgba(10, 12, 16, .5), transparent 30%); pointer-events: none; }

/* ---------- el camino: mapa ilustrado ---------- */
.camino { position: relative; height: 100vh; overflow: hidden; background: #11151a; }
.camino svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.camino__titulo { position: absolute; left: var(--lado); top: clamp(96px, 15vh, 150px); z-index: 3; pointer-events: none; }
.camino__titulo .texto-chico { margin-top: 12px; font: 600 12px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hueso-2); }
.m-calle { fill: none; stroke: rgba(244, 245, 247, .14); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.m-verde { fill: rgba(53, 65, 65, .1); }
.m-club { fill: rgba(154, 164, 174, .22); }
.m-vecino { fill: rgba(244, 245, 247, .025); stroke: rgba(244, 245, 247, .16); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.m-vecino-t { font: 600 26px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: rgba(244, 245, 247, .3); text-anchor: middle; }
.m-sector { fill: none; stroke: rgba(201, 208, 215, .5); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.m-lotes { stroke: rgba(15, 18, 23, .9); stroke-width: .6; vector-effect: non-scaling-stroke; opacity: .18; transition: opacity 1.4s var(--curva); }
.m-lotes.mirador { fill: #c9d0d7; } .m-lotes.jardines { fill: #9aa4ae; } .m-lotes.altos { fill: #6d767f; }
.camino.encendido .m-lotes { opacity: .92; }
.m-ruta-base { fill: none; stroke: rgba(154, 164, 174, .16); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.m-ruta { fill: none; stroke: url(#oroRuta); stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.m-ruta-brillo { fill: none; stroke: #9aa4ae; stroke-opacity: .22; stroke-width: 18; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.m-km { font: 600 22px var(--mono); fill: rgba(201, 208, 215, .5); text-anchor: middle; }
.m-pin circle { fill: var(--tinta); stroke: var(--oro-claro); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .4s; }
.m-pin text { font: 800 15px var(--mono); fill: var(--oro-claro); text-anchor: middle; dominant-baseline: central; }
.m-pin.paso circle { fill: var(--ambar); } .m-pin.paso text { fill: var(--tinta); }
.m-auto { fill: #fff; stroke: rgba(154, 164, 174, .45); stroke-width: 8; vector-effect: non-scaling-stroke; }
.camino__ficha { position: absolute; right: var(--lado); bottom: clamp(24px, 6vh, 64px); z-index: 3; width: min(360px, calc(100vw - 2 * var(--lado))); border-radius: var(--radio); overflow: hidden;
  background: rgba(17, 21, 27, .9); border: 1px solid var(--borde); transition: opacity .5s, transform .6s var(--curva); }
.camino__ficha.cambio { opacity: 0; transform: translateY(14px); }
.camino__ficha figure { margin: 0; position: relative; aspect-ratio: 16 / 9; background: #11151a; }
.camino__ficha figure img { width: 100%; height: 100%; object-fit: cover; }
.camino__ficha figure small { position: absolute; left: 10px; bottom: 8px; font: 500 9px/1 var(--mono); letter-spacing: .1em; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 4px #000; }
.camino__ficha div { padding: 16px 18px 18px; }
.camino__ficha h3 { margin: 6px 0 6px; font: 900 30px/.95 var(--display); text-transform: uppercase; }
.camino__ficha p { margin: 0; font-size: 14px; color: var(--hueso-2); }
.camino__leyenda { position: absolute; left: var(--lado); bottom: clamp(24px, 6vh, 64px); z-index: 3; display: grid; gap: 8px; opacity: 0; transition: opacity .8s; }
.camino.encendido .camino__leyenda { opacity: 1; }
.camino__leyenda span { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.camino__leyenda i { width: 14px; height: 14px; border-radius: 4px; }
.camino__reloj { position: absolute; right: var(--lado); top: clamp(96px, 15vh, 150px); z-index: 3; text-align: right; font: 600 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hueso-2); }
.camino__reloj b { display: block; font: 900 clamp(54px, 6vw, 96px)/.9 var(--display); color: var(--hueso); letter-spacing: 0; }

/* ---------- Royal, el personaje ---------- */
/* «escena-royal» y no «royal»: ese nombre es del chat flotante (/mapa/royal.css: fijo, 390 px, a la derecha), que en la
   página publicada se le aplicaba a esta escena y la dejaba angosta, con huecos vacíos en el medio y al final (04-11) */
.escena-royal { position: relative; min-height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 4vw; padding: 120px var(--lado) 80px;
  background: radial-gradient(70% 80% at 78% 55%, rgba(154, 164, 174, .2), transparent 60%), radial-gradient(60% 60% at 70% 110%, rgba(109, 118, 127, .25), transparent 70%), var(--tinta-2); }
.royal__nombre { font-size: clamp(110px, 19vw, 330px); line-height: .78; }
.royal__texto { display: grid; gap: 26px; max-width: 620px; position: relative; z-index: 2; }
.royal__figura { position: relative; height: min(84vh, 860px); display: grid; place-items: end center; }
.royal__figura img { position: absolute; bottom: 0; height: 100%; width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); opacity: 0; transition: opacity .55s, transform .9s var(--curva); transform: translateY(12px) scale(.985); }
.royal__figura img.activa { opacity: 1; transform: none; }
.royal__piso { position: absolute; bottom: -2%; left: 50%; width: 62%; height: 40px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.charla { display: grid; gap: 10px; max-width: 460px; }
.charla p { margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: rgba(244, 245, 247, .08); border: 1px solid var(--borde); font-size: 15px; width: fit-content; }
.charla p.yo { margin-left: auto; border-radius: 18px 18px 6px 18px; background: rgba(154, 164, 174, .18); }
.datos-mono { display: flex; flex-wrap: wrap; gap: 10px 28px; font: 600 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hueso-2); }
.datos-mono b { color: var(--oro-claro); font-weight: 600; }

/* ---------- lugares: tarjetas apiladas ---------- */
.pila { display: grid; gap: 4vh; }
.tarjeta { position: sticky; top: calc(12vh + var(--n) * 14px); display: grid; grid-template-columns: 1.25fr 1fr; min-height: min(72vh, 640px); border-radius: calc(var(--radio) * 1.4); overflow: hidden;
  background: var(--tinta-2); border: 1px solid var(--borde); transform-origin: 50% 0; box-shadow: 0 -30px 80px -40px rgba(0, 0, 0, .8); }
.tarjeta figure { margin: 0; position: relative; overflow: hidden; }
.tarjeta figure img { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; }
.tarjeta > div { padding: clamp(28px, 4vw, 64px); display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; }
.tarjeta p { margin: 0; color: var(--hueso-2); font-size: 17px; max-width: 30em; }

/* ---------- sectores ---------- */
.sectores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sector { position: relative; aspect-ratio: 3 / 4.3; border-radius: calc(var(--radio) * 1.2); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 28px; }
.sector img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--curva); }
.sector::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 12, 16, .92) 8%, rgba(10, 12, 16, .1) 60%); }
.sector:hover img { transform: scale(1.06); }
.sector .num { font: 600 12px/1 var(--mono); letter-spacing: .18em; color: var(--oro-claro); text-transform: uppercase; }
.sector h3 { margin: 0; font: 900 clamp(40px, 4.4vw, 70px)/.88 var(--display); text-transform: uppercase; }
.sector p { margin: 0; color: var(--hueso-2); font-size: 15px; }

/* ---------- cierre de noche ---------- */
.noche { position: relative; height: 115vh; overflow: hidden; display: grid; place-content: center; justify-items: center; text-align: center; gap: 28px; padding: 0 var(--lado); }
.noche > img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; z-index: -1; }
.noche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 50%, rgba(15, 18, 23, .2), rgba(15, 18, 23, .8)), linear-gradient(180deg, var(--tinta), transparent 25%, transparent 75%, var(--tinta)); }

/* ---------- videos ---------- */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.video-t { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 24px; isolation: isolate; text-align: left; }
.video-t--ancho { aspect-ratio: 16 / 10; }
.video-t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--curva); }
.video-t::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 12, 16, .9), transparent 60%); }
.video-t:hover img { transform: scale(1.05); }
.video-t .mini-play { position: absolute; top: 20px; right: 20px; width: 52px; height: 52px; border-radius: 50%; background: rgba(244, 245, 247, .9); color: var(--tinta); display: grid; place-items: center; }
.video-t .mini-play svg { width: 16px; margin-left: 3px; }
.video-t h3 { margin: 0; font: 900 clamp(30px, 2.8vw, 44px)/.92 var(--display); text-transform: uppercase; }
.video-t .dur { font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--hueso-2); }
.cine { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(5, 6, 8, .94); padding: 70px var(--lado) 40px; opacity: 0; pointer-events: none; transition: opacity .5s; }
.cine.abierto { opacity: 1; pointer-events: auto; }
.cine video { max-width: min(100%, 1400px); max-height: 100%; border-radius: 14px; background: #000; }
.cine__cerrar { position: absolute; top: calc(20px + env(safe-area-inset-top, 0px)); right: var(--lado); font: 600 12px/1 var(--mono); letter-spacing: .2em; padding: 12px 16px; border: 1px solid var(--borde); border-radius: 999px; }

/* ---------- cabeceras de subpágina ---------- */
.cabecera { position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: 140px var(--lado) clamp(44px, 9vh, 90px); overflow: hidden; isolation: isolate; }
.cabecera > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--tinta) 2%, rgba(15, 18, 23, .35) 55%, rgba(15, 18, 23, .7)); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 110px); align-items: start; }
.galeria { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 15vw; gap: 14px; }
.galeria figure { margin: 0; border-radius: var(--radio); overflow: hidden; position: relative; background: var(--tinta-2); }
.galeria figure img { width: 100%; height: 100%; object-fit: cover; }
.galeria .r { background: radial-gradient(80% 70% at 50% 80%, rgba(154, 164, 174, .28), transparent 70%), var(--tinta-2); }
.galeria .r img { object-fit: contain; object-position: bottom; padding-top: 10%; }
.cita { font: 900 clamp(40px, 6.2vw, 108px)/.9 var(--display); text-transform: uppercase; margin: 0; max-width: 16em; }

/* capítulos con riel (lugares, sectores) */
.capitulos { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 70px); }
.riel { position: sticky; top: 120px; align-self: start; display: grid; gap: 4px; }
.riel a { font: 700 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hueso-3); padding: 12px 0 12px 16px; border-left: 2px solid var(--borde); transition: color .3s, border-color .3s; }
.riel a.activo { color: var(--oro-claro); border-color: var(--ambar); }
.capitulo { display: grid; gap: 26px; padding-bottom: clamp(90px, 12vw, 170px); scroll-margin-top: 100px; }
.capitulo__foto { position: relative; border-radius: calc(var(--radio) * 1.3); overflow: hidden; aspect-ratio: 16 / 8.6; }
.capitulo__foto img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.capitulo__foto .titulo { position: absolute; left: clamp(20px, 3vw, 44px); bottom: clamp(16px, 2.6vw, 36px); z-index: 2; font-size: clamp(54px, 8vw, 136px); text-shadow: 0 8px 50px rgba(0, 0, 0, .5); }
.capitulo__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 12, 16, .75), transparent 50%); }
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tira img { border-radius: 16px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cifras div { border-top: 1px solid var(--borde); padding-top: 18px; }
.cifras b { display: block; font: 900 clamp(30px, 3vw, 48px)/.95 var(--display); text-transform: uppercase; color: var(--oro-claro); }
.cifras span { font-size: 14px; color: var(--hueso-2); }
.mini-mapa { position: relative; border-radius: calc(var(--radio) * 1.2); overflow: hidden; background: #11151a; border: 1px solid var(--borde); aspect-ratio: 16 / 9; }
.mini-mapa svg { width: 100%; height: 100%; }

/* camino completo (subpágina) */
.paradas { position: absolute; left: var(--lado); top: clamp(250px, 34vh, 330px); z-index: 3; display: grid; gap: 2px; counter-reset: p; }
.paradas li { list-style: none; display: flex; gap: 14px; align-items: baseline; font: 600 13px/1.25 var(--texto); color: var(--hueso-3); padding: 7px 0; transition: color .4s; }
.paradas li b { font: 700 11px/1 var(--mono); letter-spacing: .12em; color: var(--hueso-3); }
.paradas li.activa { color: var(--hueso); } .paradas li.activa b { color: var(--ambar); }
.paradas li.paso { color: var(--hueso-2); }

/* formulario de visita */
.visita { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.visita__foto { position: relative; overflow: hidden; }
.visita__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visita__foto .royal-chico { position: absolute; right: 6%; bottom: 0; height: 46%; width: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.visita__form { padding: 150px clamp(24px, 5vw, 90px) 70px; display: grid; align-content: center; gap: 22px; }
.campo { display: grid; gap: 8px; }
.campo label, .campo legend { font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--hueso-2); padding: 0; }
.campo input { font: 500 20px/1 var(--texto); color: var(--hueso); background: transparent; border: 0; border-bottom: 1px solid var(--borde); padding: 14px 0; outline: none; transition: border-color .3s; }
.campo input:focus { border-color: var(--ambar); }
fieldset.campo { border: 0; margin: 0; padding: 0; }
.opciones-visita { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.opciones-visita label { cursor: pointer; }
.opciones-visita input { position: absolute; opacity: 0; pointer-events: none; }
.opciones-visita span { display: inline-block; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--borde); font: 600 14px/1 var(--texto); color: var(--hueso-2); transition: all .3s; }
.opciones-visita input:checked + span { background: var(--atardecer); color: #171c22; border-color: transparent; }
.aviso-prueba { font-size: 14px; color: var(--oro-claro); min-height: 1.5em; }
.donde { display: grid; gap: 10px; border-top: 1px solid var(--borde); padding-top: 18px; font-size: 14px; color: var(--hueso-2); }
.donde b { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-claro); margin-right: 10px; }

/* ---------- pie ---------- */
.pie-sitio { padding: clamp(70px, 9vw, 120px) var(--lado) 40px; border-top: 1px solid var(--borde); display: grid; gap: 50px; background: #0a0c10; }
.pie__arriba { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 30px; }
.pie__arriba img { height: clamp(70px, 8vw, 110px); width: auto; }
.pie__links { display: flex; flex-wrap: wrap; gap: 14px 28px; font: 600 14px/1 var(--texto); color: var(--hueso-2); }
.pie__links a:hover { color: var(--ambar); }
.pie__abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; font: 500 12px/1.5 var(--mono); letter-spacing: .06em; color: var(--hueso-3); }
.pie__abajo .marcas { display: flex; align-items: center; gap: 22px; }
.pie__abajo .marcas img { height: 30px; width: auto; opacity: .8; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__menu { display: grid; margin-left: 10px; }
  .nav .pildora { margin-left: auto; }
  .nav__marca img { height: 32px; }
  .aviso { font-size: 9.5px; letter-spacing: .16em; }
  .ventana__pie { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .ventana__pie .marcas { justify-self: center; }
  .ventana__bajar { display: none; }
  .frases { grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .escena-royal { grid-template-columns: 1fr; padding-top: 110px; }
  .royal__figura { height: 62vh; order: -1; }
  .tarjeta { grid-template-columns: 1fr; grid-template-rows: 46% 1fr; min-height: 78vh; top: calc(10vh + var(--n) * 10px); }
  .tarjeta > div { justify-content: flex-start; padding: 24px; }
  .tarjeta p { font-size: 15px; }
  .sectores, .videos { grid-template-columns: 1fr; }
  .sector { aspect-ratio: 4 / 4.4; }
  .camino__ficha { left: var(--lado); right: var(--lado); width: auto; bottom: 18px; display: grid; grid-template-columns: 112px 1fr; }
  .camino__ficha figure { aspect-ratio: auto; height: 100%; }
  .camino__ficha div { padding: 12px 14px; }
  .camino__ficha h3 { font-size: 22px; }
  .camino__ficha p { font-size: 12.5px; }
  .camino__leyenda { bottom: auto; top: clamp(220px, 30vh, 260px); }
  .camino__reloj { top: auto; bottom: 150px; }
  .paradas { display: none; }
  .dos, .capitulos, .visita { grid-template-columns: 1fr; }
  .riel { display: none; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 52vw; }
  .galeria figure { grid-column: auto !important; grid-row: auto !important; }
  .tira { grid-template-columns: 1fr 1fr; } .tira img:nth-child(3) { display: none; }
  .visita__foto { min-height: 62vh; }
  .visita__form { padding-top: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .palabras .p > span, [data-rev] { transition: none; }
}

/* ---------- añadidos de la portada ---------- */
.ventana__foto--mascara { --mw: 42vw; --mx: 29vw; --my: 18vh; }
.js .ventana__titulo { opacity: 0; }
html:not(.js) .ventana__titulo { opacity: 1; }
.js .charla p:not(.visto) { opacity: .005; transform: translateY(12px); }
.charla p { transition: opacity .6s var(--curva), transform .6s var(--curva); }

/* la maqueta de la página actual: una isla de luz en la página oscura */
.maqueta { position: relative; height: 100vh; overflow: hidden; background: #e7e6e2; color: var(--tinta-2); }
.maqueta canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.maqueta__titulo { position: absolute; left: var(--lado); top: clamp(100px, 15vh, 150px); z-index: 2; }
.maqueta__titulo .ceja { color: #6d767f; }
.maqueta .ilustrativa { color: rgba(23, 28, 34, .5); }
.pin-s { position: absolute; z-index: 3; width: 0; height: 0; opacity: 0; transition: opacity .7s var(--curva); pointer-events: none; }
.maqueta.final .pin-s { opacity: 1; pointer-events: auto; }
.maqueta.final .pin-s:nth-child(2) { transition-delay: .15s; } .maqueta.final .pin-s:nth-child(3) { transition-delay: .3s; }
.pin-s i { position: absolute; width: 16px; height: 16px; left: -8px; top: -8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 7px rgba(154, 164, 174, .28), 0 0 0 1px #fff inset; }
.pin-s i::after { content: ""; position: absolute; left: 7px; bottom: 16px; width: 1.5px; height: 70px; background: linear-gradient(var(--tinta-2), transparent); transform-origin: bottom; }
.pin-s span { position: absolute; left: -14px; bottom: 92px; white-space: nowrap; padding: 12px 16px; border-radius: 14px; background: rgba(23, 28, 34, .88); color: var(--hueso); font: 600 12px/1.5 var(--mono); letter-spacing: .06em; backdrop-filter: blur(10px); transition: transform .4s var(--curva); }
.pin-s span b { display: block; font: 900 26px/1 var(--display); text-transform: uppercase; letter-spacing: 0; color: var(--oro-claro); }
.pin-s:hover span { transform: translateY(-4px); }

/* antes de reservar */
.antes { background: linear-gradient(180deg, var(--tinta), var(--tinta-2)); }
.antes__cabeza { position: sticky; top: 120px; display: grid; gap: 22px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.pasos li { padding: 30px 0; border-top: 1px solid var(--borde); display: grid; gap: 8px; }
.pasos b { font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--oro-claro); }
.pasos h3 { margin: 0; font: 900 clamp(30px, 3vw, 46px)/.95 var(--display); text-transform: uppercase; }
.pasos p { margin: 0; color: var(--hueso-2); }

/* cómo se compra */
.compra { background: var(--pizarra); }
.formas { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 16px; }
.forma { border-radius: var(--radio); padding: 26px; background: rgba(15, 18, 23, .35); border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.forma h3 { margin: 0; font: 900 clamp(26px, 2.3vw, 36px)/.95 var(--display); text-transform: uppercase; }
.forma--grande { background: linear-gradient(160deg, rgba(154, 164, 174, .16), rgba(15, 18, 23, .35)); }
.reparto { display: grid; gap: 8px; margin-top: auto; }
.reparto .texto-chico { margin: 8px 0 0; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.barra { display: flex; gap: 4px; }
.barra span { flex: 0 0 calc(var(--w) - 3px); min-width: 54px; padding: 10px; border-radius: 10px; background: rgba(244, 245, 247, .08); font-size: 11px; color: var(--hueso-2); line-height: 1.2; }
.barra span:first-child { background: var(--atardecer); color: #171c22; }
.barra b { display: block; font: 900 22px/1 var(--display); }
@media (max-width: 900px) {
  .formas { grid-template-columns: 1fr; }
  .antes__cabeza { position: static; }
  .pin-s span { font-size: 10.5px; padding: 9px 12px; bottom: 70px; }
  .pin-s span b { font-size: 20px; }
  .pin-s i::after { height: 50px; }
  .maqueta__titulo .titulo { font-size: 44px; }
}
.m-curva { fill: none; stroke: rgba(109, 118, 127, .16); stroke-width: .8; vector-effect: non-scaling-stroke; }
.m-curva--maestra { stroke: rgba(201, 208, 215, .28); stroke-width: 1.1; }
.camino::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(85% 75% at 50% 50%, transparent 55%, rgba(5, 7, 9, .75)); }
/* (04-11, revisión) el título de la maqueta abajo: arriba lo pisaba la etiqueta de Altos; contraste del «Bienvenido» */
.maqueta__titulo { top: auto; bottom: clamp(40px, 9vh, 90px); }
.ventana__titulo { background: radial-gradient(55% 45% at 50% 48%, rgba(10, 12, 16, .58), transparent 78%); }
.m-vecino { fill: rgba(244, 245, 247, .04); stroke: rgba(244, 245, 247, .24); }
/* (04-11, revisión en celular) */
.aviso span { white-space: nowrap; }
.pildora { white-space: nowrap; }
@media (max-width: 900px) {
  .aviso { font-size: 8.5px; letter-spacing: .1em; }
  .nav .pildora { padding: .65em 1em; font-size: 12px; }
  .camino__leyenda { top: auto; bottom: 150px; }
  .camino__reloj { bottom: 150px; }
  .camino__reloj b { font-size: 44px; }
}
@media (max-width: 900px) { .camino.encendido .camino__reloj { opacity: 0; } .camino__reloj { transition: opacity .6s; } }

/* ---------- desarrollo de la urbanización: la sección de /berchatti/ tal cual (Onest, fondo claro, mapa entero) ---------- */
@font-face { font-family: Onest; font-style: normal; font-weight: 300 500; font-display: swap; src: url(../fuentes/onest-latin.woff2) format("woff2"); }
.urbanizacion { background: #f9f9f9; color: #1b1c1e; padding: 96px 20px; font-family: Onest, var(--texto); }
.urbanizacion__cabeza { text-align: center; margin-bottom: 56px; }
.urbanizacion__titulo { margin: 0; font-size: clamp(36px, 5vw, 96px); line-height: .99; letter-spacing: -.04em; font-weight: 400; text-transform: uppercase; }
.urbanizacion__cabeza p { max-width: 28rem; margin: 20px auto 0; font-size: 16.5px; line-height: 1.5; font-weight: 300; color: #5f636e; }
.urbanizacion__mapa { position: relative; margin: 0; width: 100%; border-radius: 5px; overflow: hidden; background: #1d2a1f; }
.urbanizacion__mapa img { display: block; width: 100%; height: auto; }
.urbanizacion__mapa figcaption { position: absolute; right: 16px; bottom: 16px; padding: 4px 10px; border-radius: 5px; font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  background: hsla(0, 0%, 100%, .72); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); color: #1b1c1e; }
.urbanizacion__cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; margin: 80px 0 0; }
.urbanizacion__cifras div { display: flex; flex-direction: column; }
.urbanizacion__cifras dt { order: 2; margin-top: 16px; max-width: 24ch; font-size: 11.5px; line-height: 1.3; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: #808080; }
.urbanizacion__cifras dd { order: 1; margin: 0; }
.urbanizacion__cifras dd span { font-size: clamp(38px, 4.93vw, 96px); line-height: .99; letter-spacing: -.04em; font-weight: 400; }
.urbanizacion__cifras sup { margin-left: 4px; vertical-align: top; font-size: clamp(20px, 1.94vw, 34px); line-height: 1.07; letter-spacing: -.02em; text-transform: uppercase; }
@media (max-width: 900px) { .urbanizacion__cifras { grid-template-columns: 1fr 1fr; } }

/* ---------- tres sectores, un plano: la sección de /berchatti/ (reemplaza a la maqueta, 04-11) ---------- */
.sectores-pista { position: relative; height: 300vh; background: #fff; color: #1b1c1e; font-family: Onest, var(--texto); }
.sectores-fijo { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 96px 20px 40px; }
.sectores-fijo .urbanizacion__titulo { margin-bottom: 40px; }
.sp-rejilla { flex: 1; min-height: 0; display: grid; grid-template-columns: 8fr 4fr; gap: 20px; }
.sp-plano { position: relative; min-height: 0; border-radius: 5px; overflow: hidden; background: #f4f4f2; }
.sector-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.22, .61, .36, 1); }
.sector-foto.activa, .sector-foto.antes { clip-path: inset(0); }
.sector-foto.activa { z-index: 1; }
.sp-etiqueta { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 4px 10px; border-radius: 5px; font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #000;
  background: hsla(0, 0%, 100%, .72); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.sp-ficha { display: flex; flex-direction: column; min-height: 0; background: #f3f3f3; border-radius: 5px; padding: 32px; }
.sp-cuenta { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.sp-n b { font-weight: 400; font-size: clamp(38px, 4.93vw, 96px); line-height: .99; letter-spacing: -.04em; }
.sp-n small { margin-left: 4px; vertical-align: top; font-size: 11.5px; font-weight: 500; letter-spacing: .07em; color: #808080; }
.sp-barras { display: flex; gap: 6px; width: 128px; }
.sp-barra { flex: 1; height: 16px; padding: 7px 0; cursor: pointer; }
.sp-barra i { display: block; height: 2px; background: #000; transform: scaleX(0); transform-origin: left; transition: transform .3s; box-shadow: 0 0 0 0 transparent; }
.sp-barra::before { content: ""; display: block; height: 2px; margin-bottom: -2px; background: rgba(0, 0, 0, .12); }
.sp-textos { position: relative; flex: 1; min-height: 300px; }
.sector-texto { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .5s, transform .5s; }
.sector-texto.activo { opacity: 1; transform: none; pointer-events: auto; transition: opacity 1s .25s var(--curva), transform 1s .25s var(--curva); }
.sp-chico { margin-bottom: 12px; font-size: 11.5px; line-height: 1.3; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: #808080; }
.sector-texto h3 { margin: 0 0 16px; font-size: clamp(20px, 1.94vw, 34px); line-height: 1.07; letter-spacing: -.02em; font-weight: 400; text-transform: uppercase; }
.sector-texto p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.5; font-weight: 300; color: #5f636e; }
.sector-texto dl { margin: auto 0 0; }
.sector-texto dl div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .1); }
.sector-texto dt { font-size: 11.5px; line-height: 1.3; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: #808080; }
.sector-texto dd { margin: 0; font-size: 16.5px; font-weight: 300; color: #000; }
.btn-air { display: flex; flex-direction: column; justify-content: space-between; height: 50px; margin-top: 24px; padding: 10px; border-radius: 5px; font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  background: var(--tinta-2); color: #fff; transition: opacity .3s; }
.btn-air svg { align-self: flex-end; width: 12px; height: 12px; transition: transform .6s var(--curva); }
.btn-air:hover svg { transform: rotate(90deg); }
@media (max-width: 900px) {
  .sectores-pista { height: auto; }
  .sectores-fijo { position: static; height: auto; padding: 80px 16px 56px; }
  .sp-rejilla { grid-template-columns: 1fr; }
  .sp-plano { aspect-ratio: 1600 / 1100; }
  .sp-ficha { padding: 24px; }
  .sp-textos { min-height: 330px; }
  .sp-barra i { transition: transform 3.8s linear; }
}
/* (04-11, revisión) en el celular: la barra de AutoFast en filas y Royal dentro de la pantalla */
@media (max-width: 900px) {
  .barra { flex-direction: column; }
  .barra span { flex: none; min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
  .royal__figura img { max-width: 100%; }
}
/* (04-11) los sectores cambian con el scroll en cualquier ancho (Jhonny: «no quiero que lo hagas video»):
   la sección queda quieta tres pantallas también en el panel angosto y en el celular */
@media (max-width: 1100px) { .sp-rejilla { grid-template-columns: 7fr 5fr; } }
@media (max-width: 900px) {
  .sectores-pista { height: 300vh; }
  .sectores-fijo { position: sticky; height: 100vh; padding: 92px 16px 16px; }
  .sectores-fijo .urbanizacion__titulo { margin-bottom: 20px; }
  .sp-plano { aspect-ratio: auto; }
  .sp-textos { min-height: 0; }
  .sp-barra i { transition: transform .3s; }
}
@media (max-width: 700px) {
  .sectores-fijo { padding: 84px 14px 14px; }
  .sectores-fijo .urbanizacion__titulo { font-size: 30px; margin-bottom: 14px; }
  .sp-rejilla { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
  .sp-ficha { padding: 16px 18px; }
  .sp-cuenta { margin-bottom: 10px; }
  .sp-n b { font-size: 40px; }
  .sp-textos { flex: none; height: 262px; overflow: hidden; }
  .sp-chico { margin-bottom: 6px; }
  .sector-texto h3 { margin-bottom: 8px; }
  .sector-texto p { font-size: 14px; margin-bottom: 10px; }
  .sector-texto dl div { padding: 6px 0; }
  .sector-texto dd { font-size: 15px; }
  .btn-air { height: 40px; margin-top: 10px; }
}
/* (04-11) el plano sin «object-fit: contain»: con la cortina (clip-path) Chrome pintaba de negro los huecos de arriba y
   abajo. Un marco con la proporción del plano (1600 × 1100), centrado en la caja, no deja huecos. */
.sp-plano { display: grid; place-items: center; container-type: size; }
.sp-lienzo { position: relative; width: min(100cqw, 100cqh * 1600 / 1100); aspect-ratio: 1600 / 1100; }
.sp-lienzo .sector-foto { object-fit: fill; }
/* (04-11) los enlaces del menú nunca en dos líneas: si no entran, van al botón del menú */
.nav__links a { white-space: nowrap; }
@media (max-width: 1180px) { .nav__links { display: none; } .nav__menu { display: grid; margin-left: 10px; } .nav .pildora { margin-left: auto; } }
@media (max-width: 700px) { .sectores-fijo { padding-top: 76px; } .sp-textos { height: 278px; } }

/* ---------- alrededor: la sección de /berchatti/ tal cual (pizarra verde, Onest, mapa de líneas y 26 lugares) ---------- */
.alrededor { background: #354141; color: #fff; padding: 80px 20px 96px; font-family: Onest, var(--texto); }
.al-cifras { margin: 0 0 80px; }
.al-cifras dt { color: hsla(0, 0%, 100%, .55); }
.al-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.al-titulo { margin: 0; font-size: clamp(38px, 4.93vw, 96px); line-height: .99; letter-spacing: -.04em; font-weight: 400; text-transform: uppercase; }
.al-fichas { display: flex; gap: 8px; }
.ficha { height: 30px; padding: 0 12px; border-radius: 5px; font: 500 10px/1 Onest, var(--texto); letter-spacing: .08em; text-transform: uppercase; background: hsla(0, 0%, 100%, .1); color: #fff; transition: background-color .3s, color .3s; white-space: nowrap; }
.ficha[aria-pressed=true] { background: #fff; color: var(--tinta-2); }
.al-mapa { position: relative; border-radius: 5px; overflow: hidden; background: #11151a; margin-bottom: 20px; }
.mapa-lineas { width: 100%; height: auto; display: block; }
.mapa-lineas .cartel-t { fill: var(--tinta-2); font-size: 12px; letter-spacing: .14em; font-weight: 500; font-family: Onest, sans-serif; }
.mapa-lineas .km { fill: #8d8d8d; font-size: 11px; letter-spacing: .06em; font-family: Onest, sans-serif; }
.mapa-alrededor .punto { transition: opacity .4s, r .4s; }
.mapa-alrededor[data-filtro]:not([data-filtro=todo]) .punto { opacity: .12; }
.mapa-alrededor[data-filtro=compras] .punto[data-cat=compras], .mapa-alrededor[data-filtro=deporte] .punto[data-cat=deporte],
.mapa-alrededor[data-filtro=educacion] .punto[data-cat=educacion], .mapa-alrededor[data-filtro=salud] .punto[data-cat=salud] { opacity: 1; }
.al-lugares { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.al-lugares li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid hsla(0, 0%, 100%, .1); font-size: 16.5px; line-height: 1.5; font-weight: 300; }
.al-lugares small, .al-km, .al-nota { font-size: 11.5px; line-height: 1.3; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: hsla(0, 0%, 100%, .55); }
.al-lugares small { margin-left: 4px; }
.al-km { white-space: nowrap; }
.al-nota { display: flex; justify-content: space-between; gap: 8px; margin-top: 40px; }
@media (max-width: 1023px) { .al-lugares { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .al-cabeza { flex-direction: column; align-items: flex-start; }
  .desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .desliza::-webkit-scrollbar { display: none; }
  .desliza > svg { width: 900px; max-width: none; }
  .al-lugares { grid-template-columns: 1fr; }
  .al-nota { flex-direction: column; }
}
/* (04-11, Jhonny) las fotos de las tarjetas, enteras: el recorte a lo alto dejaba ver solo una parte del render */
.tarjeta { min-height: 0; align-items: center; }
.tarjeta figure { align-self: stretch; display: flex; align-items: center; background: #0d1014; }
.tarjeta figure img { position: static; width: 100%; height: auto; }
@media (max-width: 900px) { .tarjeta { grid-template-rows: auto auto; min-height: 0; } }

/* ---------- (04-11, Jhonny) la paleta de Royal Estate en toda la página: sin dorados ----------
   tinta #171c22 · hondo #11151a · pizarra #353942 · bosque #354141 · acero #6d767f · gris #808080 · blanco #f4f5f7 */
:root { --atardecer: linear-gradient(100deg, #eef1f4 0%, #c3cbd3 55%, #97a2ad 100%); }
.pildora { background: #f4f5f7; color: #171c22; box-shadow: 0 12px 40px -16px rgba(0, 0, 0, .7); }
.pildora:hover { box-shadow: 0 16px 50px -16px rgba(0, 0, 0, .8); background: #fff; }
.pildora--vidrio { background: rgba(244, 245, 247, .08); color: var(--hueso); }
.opciones-visita input:checked + span { background: #f4f5f7; color: #171c22; }
.m-lotes.mirador { fill: #c9d0d7; } .m-lotes.jardines { fill: #9aa4ae; } .m-lotes.altos { fill: #6d767f; }
.m-pin circle { stroke: #f4f5f7; } .m-pin text { fill: #f4f5f7; }
.m-pin.paso circle { fill: #f4f5f7; } .m-pin.paso text { fill: #171c22; }
.m-ruta-brillo { stroke: #f4f5f7; stroke-opacity: .14; }
/* con el pórtico de día el cielo es claro: más sombra detrás de «Bienvenido al Urubó» para que se lea */
.ventana__titulo { background: radial-gradient(60% 52% at 50% 48%, rgba(17, 21, 26, .68), transparent 80%); }
.ventana__titulo .titulo { text-shadow: 0 4px 40px rgba(0, 0, 0, .55); }

/* ---------- el pie (04-11, Jhonny): el logo al medio, Royal en una píldora, las redes y las políticas; sin repetir el
   menú de arriba. Se mantienen la dirección y los logos. ---------- */
.pie-sitio { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: clamp(70px, 9vw, 110px) var(--lado) 36px; text-align: center; }
.pie__logo { height: clamp(80px, 9vw, 120px); width: auto; }
.pie__royal { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px; width: min(1000px, 100%); padding: 22px 34px; border: 1px solid var(--borde); border-radius: 999px; text-align: left; transition: background .4s, border-color .4s; }
.pie__royal:hover { background: rgba(244, 245, 247, .05); border-color: rgba(244, 245, 247, .3); }
.pie__royal-t { display: flex; align-items: center; gap: 14px; font: 700 clamp(16px, 1.6vw, 22px)/1 var(--texto); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.pie__royal-t img { width: 44px; height: 44px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; background: var(--pizarra); }
.pie__royal-d { font-size: 15px; line-height: 1.5; color: var(--hueso-2); }
.pie__redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.pie__redes a { width: 40px; height: 40px; display: grid; place-items: center; color: var(--hueso-2); border-radius: 50%; transition: color .3s, background .3s; }
.pie__redes a:hover { color: var(--hueso); background: rgba(244, 245, 247, .08); }
.pie__redes svg { width: 22px; height: 22px; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font: 500 14px/1.4 var(--texto); color: var(--hueso-2); }
.pie__legal a:hover { color: var(--hueso); }
.pie-sitio .pie__abajo { width: 100%; padding-top: 28px; border-top: 1px solid var(--borde); text-align: left; }
.pie__nota { margin: 0; display: grid; gap: 6px; font: 500 11px/1.6 var(--mono); letter-spacing: .04em; color: var(--hueso-3); max-width: 70em; }
@media (max-width: 700px) {
  .pie__royal { grid-template-columns: 1fr; border-radius: 26px; padding: 22px; gap: 12px; }
  .pie__redes { gap: 6px 14px; }
  .pie-sitio .pie__abajo { flex-direction: column; align-items: flex-start; }
}

/* ---------- cookies: el aviso y el panel (04-11) ---------- */
.pie__legal button { font: inherit; color: inherit; padding: 0; }
.pie__legal button:hover { color: var(--hueso); }
.galletas { position: fixed; left: var(--lado); right: var(--lado); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 94; display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  max-width: 1100px; margin-inline: auto; padding: 18px 22px; border-radius: 22px; background: rgba(23, 28, 34, .96); border: 1px solid var(--borde); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.galletas p { margin: 0; flex: 1 1 360px; font-size: 14px; line-height: 1.5; color: var(--hueso-2); }
.galletas p b { color: var(--hueso); }
.galletas p a { text-decoration: underline; color: var(--hueso); }
.galletas > div { display: flex; flex-wrap: wrap; gap: 8px; }
.galletas-panel { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--borde); border-radius: 22px; background: var(--tinta-2); color: var(--hueso); }
.galletas-panel::backdrop { background: rgba(5, 6, 8, .7); }
.galletas-panel form { display: grid; gap: 4px; padding: 28px; }
.galletas-panel h2 { margin: 0 0 12px; font: 900 34px/1 var(--display); text-transform: uppercase; }
.g-fila { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--borde); cursor: pointer; }
.g-fila span { font-size: 14px; line-height: 1.45; color: var(--hueso-2); }
.g-fila b { display: block; color: var(--hueso); font-size: 15px; margin-bottom: 2px; }
.g-fila input { width: 20px; height: 20px; accent-color: #f4f5f7; flex: none; }
.g-botones { display: flex; gap: 8px; margin-top: 14px; }

/* ---------- páginas legales ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 160px var(--lado) 100px; display: grid; gap: 18px; }
.legal h1 { margin: 0 0 8px; font: 900 clamp(48px, 7vw, 96px)/.9 var(--display); text-transform: uppercase; }
.legal h2 { margin: 26px 0 0; font: 800 clamp(24px, 2.4vw, 32px)/1 var(--display); text-transform: uppercase; }
.legal p, .legal li { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--hueso-2); }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal a { text-decoration: underline; color: var(--hueso); }
.legal .borrador { padding: 12px 16px; border: 1px dashed var(--borde); border-radius: 12px; font: 500 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--hueso-3); }

/* ---------- (04-11) el cierre de noche sin su foto y el hueco antes: la foto iba detrás de todo (z-index -1 sin caja
   propia) y el último capítulo dejaba su margen de abajo entero ---------- */
.noche { isolation: isolate; }
.capitulo:last-child { padding-bottom: 0; }
/* (04-11, Jhonny: el aviso de cookies no se iba) «display: flex» le ganaba al atributo hidden: escondido es escondido */
.galletas[hidden] { display: none; }

/* ---------- (04-11, Jhonny) la imagen de entrada, limpia ---------- */
.nav__links, .nav__marca { transition: opacity .5s var(--curva); }
html.en-portada .nav__links, html.en-portada .nav__marca { opacity: 0; pointer-events: none; }
.ventana__pie { display: flex; justify-content: flex-end; }
.ventana__pie .marcas { gap: 22px; opacity: 1; }
.ventana__pie .marcas img { height: 38px; }
.ventana__pie .marcas hr { height: 38px; }
@media (max-width: 900px) { .ventana__pie { justify-content: center; } .ventana__pie .marcas img, .ventana__pie .marcas hr { height: 30px; } }

/* (04-11, Jhonny: «el botón de mapa 3D quedó muy apagado por el agua de la imagen de atrás») vidrio oscuro, con borde
   claro: se lee encima de cualquier foto, clara o con brillos */
.pildora--vidrio { background: rgba(15, 18, 23, .5); color: #fff; border: 1px solid rgba(244, 245, 247, .6);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.pildora--vidrio:hover { background: rgba(15, 18, 23, .66); border-color: #fff; }
/* (04-11, Jhonny) los logos de Berchatti y Luara del pie, más grandes y sin apagar */
.pie__abajo .marcas { gap: 28px; }
.pie__abajo .marcas img { height: 56px; opacity: 1; }
@media (max-width: 900px) { .pie__abajo .marcas img { height: 46px; } }

/* (04-11) el chat flotante de Royal (/mapa/royal.css) toma su altura y sus colores de estas variables, que pone cada
   página: sin ellas el botón quedaba perdido al final del contenido. Los valores de la portada anterior. Van en las
   piezas del chat y no en body, para no tocar la paleta de la página */
.royal, .royal-boton, .royal-aviso, .royal-nav, .royal-volver {
  --pie-h: 0px; --papel: #fafbfc; --tinta: #171c22; --tinta-suave: #5f636e; --principal: #353942; --acento: #5f636e;
  --acento-vivo: #c5cad1; --claro: #f4f5f7; --linea-papel: rgba(95, 99, 110, .24); --e: cubic-bezier(.16, 1, .3, 1);
  --serif: "Onest", system-ui, sans-serif; }
/* y, como el menú, el botón y el saludo de Royal esperan a que termine la entrada (la charla abierta no se esconde) */
.royal-boton, .royal-aviso { transition: opacity .4s; }
html.en-portada .royal-boton, html.en-portada .royal-aviso { opacity: 0; pointer-events: none; }