@font-face{font-family:"Jost";src:url("https://assets.pedasioceanproperties.com/brand/fonts/jost-latin.woff2") format("woff2");font-weight:200 500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Jost";src:url("https://assets.pedasioceanproperties.com/brand/fonts/jost-latin-ext.woff2") format("woff2");font-weight:200 500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";src:url("https://assets.pedasioceanproperties.com/brand/fonts/cormorant-garamond-latin.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";src:url("https://assets.pedasioceanproperties.com/brand/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";src:url("https://assets.pedasioceanproperties.com/brand/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");font-weight:300 400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";src:url("https://assets.pedasioceanproperties.com/brand/fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");font-weight:300 400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --navy:#0c1d35;
  --gold:#c9a96e;
  --gold-deep:#9c7d43;   /* dorado oscurecido, para lo que deba LEERSE sobre crema */
  --cream:#faf7f2;
  --paper:#ffffff;
  --ink:#16202e;         /* cuerpo de texto. Nunca dorado. */
  --soft:#46535f;
  --rule:#ddd4c6;
  --hi:#f0e6d4;          /* sombreado del lote activo en el croquis */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Jost",-apple-system,"Segoe UI",sans-serif;font-weight:400;
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;
}
img,video,svg{display:block;max-width:100%}
a{color:var(--navy)}
p{margin:0}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;color:var(--navy);margin:0;line-height:1.14;text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.2rem;font-family:"Jost";font-weight:400;letter-spacing:.01em}

/* Eyebrow: dorado OSCURO y peso 400, para que se lea. */
.eyebrow{
  font-family:"Jost";font-weight:400;font-size:.7rem;text-transform:uppercase;
  letter-spacing:4.5px;color:var(--gold-deep);
}
.shell{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:60ch}
.stack{display:flex;flex-direction:column;gap:18px}
.s{padding:96px 0}
.s-lite{padding:64px 0}

/* ---------- índice de secciones. Sustituye al número de página del PDF:
     permite decir "mírame la sección 4" por teléfono. ---------- */
.index{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper)}
.index ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.index li{border-right:1px solid var(--rule)}
.index a{display:flex;gap:9px;padding:13px 18px;text-decoration:none;font-size:.82rem;color:var(--ink)}
.index a:hover,.index a:focus-visible{background:var(--cream)}
.index .num{color:var(--gold-deep);font-weight:400;font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);min-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.hero video,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Realce en vivo. Levanta luz y color sin volver a codificar el archivo. */
  filter:brightness(1.04) saturate(1.08) contrast(1.02)}
/* Nada de oscurecer el fotograma entero: mata el color del video.
   Solo dos velos localizados, uno bajo el logo y otro tras el texto.
   El centro de la imagen queda intacto. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, rgba(12,29,53,.18) 0%, rgba(12,29,53,.06) 55%, rgba(12,29,53,0) 88%)}
/* La tarjeta da suelo al texto sin oscurecer el resto del metraje. */
.hero-body .shell{position:relative;isolation:isolate}
.hero-body .shell>*{position:relative;z-index:1}
.hero-body .shell::before{content:"";position:absolute;z-index:0;background:rgba(12,29,53,.42);
  left:-40px;top:-36px;bottom:-34px;width:min(calc(100% + 80px), 700px)}
/* Por debajo de 1300 no hay margen para que la tarjeta salga del contenedor,
   asi que se queda dentro y el texto entra un poco. */
@media (max-width:1300px){
  .hero-body .shell{padding-left:46px}
  .hero-body .shell::before{left:20px;width:min(calc(100% - 40px), 680px)}
}
@media (max-width:760px){
  .hero-body .shell{padding-left:38px}
  .hero-body .shell::before{left:16px;top:-26px;bottom:-24px;width:calc(100% - 32px)}
}
.hero-top{position:relative;z-index:2;padding:44px 0 0}
.hero-top img{width:190px;opacity:1}
.hero-body{position:relative;z-index:2;margin-top:auto;padding:0 0 70px}
.hero h1,.hero p{color:var(--cream);text-shadow:0 1px 26px rgba(8,18,32,.55)}
.hero p{max-width:44ch;margin-top:22px;font-size:1.06rem}
.hero .eyebrow{color:#f0dfbe;display:block;margin-bottom:20px;text-shadow:0 1px 3px rgba(8,18,32,.85),0 1px 20px rgba(8,18,32,.75)}

/* ---------- croquis ---------- */
.plot-wrap{display:grid;gap:34px}
@media(min-width:980px){.plot-wrap{grid-template-columns:1.45fr 1fr;align-items:start}}
.croquis{background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:14px}
.lot-shape{fill:var(--paper);stroke:var(--gold-deep);stroke-width:2;transition:fill .18s ease}
.lot-g{cursor:pointer}
.lot-g:hover .lot-shape,.lot-g.on .lot-shape{fill:var(--hi)}
.lot-num{font-family:"Jost";font-weight:200;font-size:34px;fill:var(--navy)}
.lot-area{font-family:"Jost";font-weight:400;font-size:15px;fill:#46535f}
.dimtext{font-family:"Jost";font-weight:400;font-size:15px;fill:#46535f}
.roadtext{font-family:"Jost";font-weight:400;font-size:13px;fill:var(--navy);letter-spacing:2.4px}
.backtext{font-family:"Jost";font-weight:400;font-size:13px;fill:var(--gold-deep);letter-spacing:2px}

.whole{margin-top:56px;background:var(--navy);color:#dfe5ec;padding:46px 44px;display:flex;flex-direction:column;gap:30px}
.whole .eyebrow{color:var(--gold)}
.whole h3{color:var(--cream);font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:1.9rem;margin-top:8px}
.whole-figs{display:grid;gap:26px}
@media(min-width:780px){.whole-figs{grid-template-columns:repeat(3,1fr);gap:40px}}
.whole-figs>div{display:flex;flex-direction:column;gap:6px}
.wk{font-family:"Jost";font-weight:200;font-size:2.5rem;line-height:1;color:var(--cream)}
/* El precio nunca es el elemento mayor de la pieza. Manda el argumento. */
.whole-figs>div:last-child .wk{font-size:1.9rem}
.wl{font-size:.86rem;color:#a9b8c8}
.whole-note{max-width:56ch;color:#c3cedb;font-size:.97rem}
.cards{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--paper);padding:18px 20px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:baseline;transition:background .18s ease}
.card.on{background:var(--hi)}
.card .id{font-family:"Jost";font-weight:200;font-size:1.7rem;color:var(--navy);line-height:1}
.card .meta{font-size:.83rem;color:var(--soft);grid-column:2}
.card .price{font-family:"Jost";font-weight:400;font-size:1.06rem;color:var(--navy);font-variant-numeric:tabular-nums;text-align:right}
.card .finca{grid-column:2;font-size:.75rem;color:var(--soft);letter-spacing:.4px}
.card .perm{grid-column:3;text-align:right;font-size:.75rem;color:var(--soft);font-variant-numeric:tabular-nums}

/* ---------- datos ---------- */
.grid2{display:grid;gap:30px}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr;gap:38px 56px}}
/* Al ampliar, el mapa tiene que caber en pantalla y verse entero de una vez.
   Se le reserva sitio para la cabecera fija y la barra de capitulos. */
.mapstage{position:relative;margin-top:8px;
  scroll-margin-top:calc(var(--mapa-techo, 156px) + 16px)}

/* Rescatado del <style> que estaba dentro del SVG del mapa. */
.map-main .mapfig{width:100%;height:auto;display:block}
.map-inset .mapfig{width:100%;height:auto;display:block}
.mapstage.swapped .map-main .mapfig{width:auto;max-width:100%;
  max-height:min(740px, calc(100vh - var(--mapa-techo, 156px) - 96px))}
.map-inset #mapCoast text{display:none}

.map-credit{margin:10px 0 0;font-family:"Jost";font-size:.72rem;font-weight:300;color:var(--soft);opacity:.8}

.band{position:relative;height:46vh;min-height:300px;max-height:560px;overflow:hidden;background:var(--navy) center/cover no-repeat}
.band-still,.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.band video{background:transparent}
/* En un movil la altura salia del alto de la pantalla --46vh-- y la franja
   se volvia casi cuadrada: 360x414 para un video de 16:9. Solo quedaba la
   tira central y se perdia la mitad del encuadre. Por debajo de 620 px la
   altura sale del ancho, asi que se ve entero y sigue siendo una franja.
   La proporcion no es 16/9 sino 1920/1012: el video trae 34 px de banda
   negra arriba y abajo incrustados en el propio fichero, y a 16/9 se veian
   --34 px exactos, medidos sobre el mp4 y sobre el poster--. Se recortan 40
   y no 34 a proposito: la fila 34 es de transicion, ni negra ni imagen, y
   al recortar lo justo quedaba una linea oscura arriba. Los 6 px de margen
   se comen esa fila y el redondeo a subpixel. Cuestan el 0,6% de la altura. */
@media (max-width:620px){
  .band{height:auto;aspect-ratio:1920/1000;min-height:0;max-height:none}
}

/* ---------- Galeria: carrusel + visor ----------
   La foto del centro mide 1000 px FIJOS, no un porcentaje. Medido en la
   referencia con dos ventanas distintas: a 1221 daba 998 y a 1900 daba 999.
   Y el carrusel ocupa la pagina de lado a lado, asi que las vecinas llegan
   hasta el borde --a 1900 asoman 448 px por lado--. Se acota a 82cqw para
   que en pantallas estrechas quede el mismo asomo del 9%.
   Las vecinas NO van en gris: en gris siguen compitiendo por la mirada; al
   10% de opacidad se retiran y solo prometen.
   Todo se mide en cqw --y no en vw ni en %-- para que el ancho de la foto,
   el desplazamiento de la pista, la altura de la flecha y su distancia al
   borde salgan de UNA sola base: el ancho de .gal-vista.
   El tope sube de 1000 a 1200 px el 22-09-2026: con 1000 la foto se congelaba
   y en un monitor de 1920 ocupaba el 52 % entre dos franjas vacias de 453 px.
   A 1200 pasa al 63 %. No se quita el tope del todo porque sin el, a 1920, la
   foto mediria 1562x879 y ya no cabria en pantalla con su pie debajo. */
.gal-vista{--gal-foto:min(1200px, 82cqw);
  position:relative;overflow:hidden;container-type:inline-size}
.gal-pista{list-style:none;display:flex;margin:0;padding:0;
  transform:translateX(calc((100% - var(--gal-foto))/2 - var(--i,0) * var(--gal-foto)));
  transition:transform .55s cubic-bezier(.4,0,.2,1)}
.gal-dia{flex:0 0 var(--gal-foto);min-width:0;opacity:.1;transition:opacity .3s ease}
.gal-dia[data-activa]{opacity:1}
.gal-dia figure{margin:0}
/* El pie de la vecina se apaga del todo. Al 10% una foto queda en veladura,
   pero un texto queda en letras partidas asomando por el borde, que parece
   un fallo de maquetacion. Se apaga con opacidad y no con display para que
   la fila conserve su alto y no salte al pasar de una a otra. */
.gal-dia .sp-caption{margin:14px 2px 0;opacity:0;transition:opacity .3s ease}
.gal-dia[data-activa] .sp-caption{opacity:1}
.gal-i{display:block;width:100%;padding:0;border:0;cursor:pointer;overflow:hidden;
       background:var(--navy);border-radius:2px;aspect-ratio:16/9}
.gal-i img{width:100%;height:100%;object-fit:cover;display:block}
.gal-i:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Las flechas viven FUERA de la fotografia, en el margen (22-09-2026).
   Dentro se perdian: un filete crema de 1,4 px sobre follaje verde o sobre
   cielo claro no se ve, y la sombra que lo sostenia ensuciaba la foto. Fuera,
   sobre crema, van en navy y no compiten con nada.
   El margen mide 9cqw --(100% - 82cqw)/2--, que en el contenedor mas estrecho
   que llega aqui, 700 px, son 63: caben los 44 de la flecha y su hueco de 12.
   Siguen siendo altas como la foto: el icono se ve chico pero el area de clic
   es toda la columna. */
.gal-f{--gal-flecha:44px;--gal-hueco:12px;
  position:absolute;top:0;height:calc(var(--gal-foto) * 9 / 16);
  width:var(--gal-flecha);z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;
  color:rgba(12,29,53,.5);transition:color .3s ease,opacity .3s ease}
.gal-f:hover,.gal-f:focus-visible{color:var(--navy)}
.gal-f:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
.gal-f svg{width:26px;height:26px}
.gal-f-izq{left:calc((100% - var(--gal-foto))/2 - var(--gal-flecha) - var(--gal-hueco))}
.gal-f-der{right:calc((100% - var(--gal-foto))/2 - var(--gal-flecha) - var(--gal-hueco))}
/* Indicador de paso, sobre el borde bajo de la fotografia y centrado con ella.
   Se apoya en la misma base que todo lo demas --var(--gal-foto)-- para que no
   se descuadre al cambiar el ancho. La pastilla translucida existe porque
   debajo hay fotografia: sobre el cielo claro unos puntos crema solos no se
   verian. 22-09-2026. */
.gal-ind{position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  top:calc(var(--gal-foto) * 9 / 16 - 34px);
  display:flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:rgba(12,29,53,.34);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.gal-ind i{display:block;width:6px;height:6px;border-radius:999px;
  background:rgba(250,247,242,.55);
  transition:width .45s cubic-bezier(.4,0,.2,1),background-color .45s ease}
.gal-ind i[data-activa]{width:26px;background:var(--cream)}
@media (prefers-reduced-motion:reduce){
  .gal-ind i{transition:none}
}

@media (max-width:700px){
  /* En movil la vecina asoma menos: con el 9% la foto se quedaba en nada. */
  .gal-vista{--gal-foto:92cqw}
  /* En movil el margen es de 4cqw --13 px en un telefono-- y ahi no cabe
     ninguna flecha, asi que vuelven dentro. Para que no se pierdan llevan la
     misma pastilla translucida que el indicador, que es el recurso que esta
     galeria ya usa sobre fotografia. El dedo, ademas, arrastra. */
  .gal-f{--gal-flecha:34px;color:var(--cream);
    height:var(--gal-flecha);top:calc(var(--gal-foto) * 9 / 32 - var(--gal-flecha)/2);
    border-radius:999px;background:rgba(12,29,53,.34);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
  .gal-f:hover,.gal-f:focus-visible{color:var(--cream)}
  .gal-f svg{width:20px;height:20px}
  .gal-f-izq{left:calc((100% - var(--gal-foto))/2 + 8px)}
  .gal-f-der{right:calc((100% - var(--gal-foto))/2 + 8px)}
  .gal-ind{top:calc(var(--gal-foto) * 9 / 16 - 28px);padding:6px 11px;gap:6px}
  .gal-ind i[data-activa]{width:20px}
}

.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:90;background:rgba(8,18,32,.94);
    display:flex;align-items:center;justify-content:center;padding:44px 62px 66px;
    --lb-lado:124px; --lb-alto:120px}
/* El marco se cine a la foto para que la marca se pueda situar en porcentaje
   de la IMAGEN y no de la pantalla: si no, al cambiar la ventana la marca se
   despegaria del sitio que senala. */
/* `inline-block` y no `flex`: con flex, el max-width del <img> se medía contra
   el marco y el marco contra el <img>, asi que la foto colapsaba a 351 px en
   una ventana de 1280. Ahora el marco se cine a la foto, que se limita contra
   la ventana descontando el propio relleno del visor. */
.lb-marco{position:relative;display:inline-block;line-height:0;max-width:100%}
.lb img{display:block;border-radius:2px;width:auto;height:auto;
  max-width:calc(100vw - var(--lb-lado, 124px));
  max-height:calc(100vh - var(--lb-alto, 110px))}

/* Misma marca que en el hero: punto crema, aro, filete y rotulo. */
/* Misma estructura que el hero -punto, filete, rotulo- pero a otra escala:
   aqui la foto esta para situarse de un vistazo, asi que el rotulo tiene que
   leerse sin buscarlo. De ahi que sea el triple de grande que en el hero. */
.lb-mk{position:absolute;left:var(--mx);top:var(--my);display:flex;align-items:center;
  --lb-punto:clamp(14px, 1.5vw, 22px);
  --lb-aro:clamp(26px, 2.8vw, 42px);
  --lb-filete:clamp(34px, 6vw, 96px);
  --lb-letra:clamp(12px, 1.15vw, 18px);
  pointer-events:none;animation:lpMk .5s ease both}
.lb-marcas{position:absolute;inset:0;pointer-events:none}
.lb-mk:nth-of-type(2){animation-delay:.16s}
.lb-mk-izq{transform:translate(calc(-100% + var(--lb-punto)/2), -50%)}
.lb-mk-der{transform:translate(calc(var(--lb-punto)/-2), -50%);flex-direction:row-reverse}
.lb-mk-t{font-family:"Jost";font-weight:400;font-size:var(--lb-letra);
  letter-spacing:.2em;text-transform:uppercase;color:#fbf8f3;
  white-space:nowrap;line-height:1;margin-inline:clamp(7px,.8vw,13px);
  /* Aqui SI lleva fondo, al reves que en el hero. Alli manda la discrecion;
     aqui manda leerse, y el rotulo cruza cielo, arena y tejados blancos, sobre
     los que una sombra sola no basta. Es un velo, no una placa: sin borde y
     sin canto duro. */
  padding:clamp(6px,.65vw,10px) clamp(9px,1vw,15px);
  background:rgba(12,29,53,.52);
  backdrop-filter:blur(3px);
  text-shadow:0 1px 3px rgba(12,29,53,.6)}
.lb-mk-l{width:var(--lb-filete);height:1.5px;flex:0 0 auto;
  background:rgba(250,247,242,.8);box-shadow:0 1px 4px rgba(12,29,53,.6)}
.lb-mk-o{position:relative;flex:0 0 auto;width:var(--lb-punto);height:var(--lb-punto);
  background:var(--cream);border-radius:50%}
.lb-mk-o{box-shadow:0 1px 6px rgba(12,29,53,.5)}
.lb-mk-o::after{content:"";position:absolute;left:50%;top:50%;
  width:var(--lb-aro);height:var(--lb-aro);transform:translate(-50%,-50%);
  border-radius:50%;border:1.5px solid rgba(250,247,242,.6)}

/* En movil la foto es pequena: la marca encoge con ella para no taparla. */
@media (max-width:620px){
  .lb{padding:34px 16px 74px; --lb-lado:32px; --lb-alto:118px}
  /* En vertical un 16:9 mide 193px de alto y los dos puntos caen a 23px uno
     del otro: con el rotulo grande se pisaban y se salian de la foto. */
  .lb-mk{--lb-punto:11px; --lb-aro:19px; --lb-filete:26px; --lb-letra:9px}
  .lb-mk-t{letter-spacing:.14em;padding:4px 7px;margin-inline:6px}
}
/* Foto suelta: sin flechas ni contador, que no hay serie que recorrer. */
.lb.solo .lb-p,.lb.solo .lb-n,.lb.solo .lb-num{display:none}
.lb-cap{position:absolute;left:0;right:0;bottom:26px;margin:0;text-align:center;
        font-family:"Jost";font-size:.82rem;font-weight:300;color:#faf7f2;opacity:.72;
        padding:0 62px;line-height:1.5}
.lb-n,.lb-p,.lb-x{position:absolute;background:none;border:0;cursor:pointer;padding:14px;
                  color:#faf7f2;opacity:.62;transition:opacity .2s ease}
.lb-n:hover,.lb-p:hover,.lb-x:hover,.lb-n:focus-visible,.lb-p:focus-visible,.lb-x:focus-visible{opacity:1}
.lb-p{left:6px;top:50%;transform:translateY(-50%)}
.lb-n{right:6px;top:50%;transform:translateY(-50%)}
.lb-x{top:8px;right:10px}
.lb-num{position:absolute;top:20px;left:24px;margin:0;font-family:"Jost";font-size:.78rem;
        font-weight:300;letter-spacing:.16em;color:#faf7f2;opacity:.6;
        font-variant-numeric:tabular-nums}
@media (max-width:640px){.lb{padding:52px 12px 74px}.lb-p{left:-4px}.lb-n{right:-4px}
  .lb-cap{padding:0 18px;font-size:.76rem}}
@media (prefers-reduced-motion:reduce){.gal-pista,.gal-dia{transition:none}}


.map-main img{width:100%;height:auto;display:block}
.map-main{position:relative}
.map-link{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.map-inset{position:relative;display:block;padding:0;margin:18px 0 0 auto;width:190px;
  background:var(--paper);border:1px solid var(--rule);cursor:pointer;transition:border-color .2s ease}
.map-zoom{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;
  justify-content:center;background:var(--navy);color:var(--gold);border-radius:2px;opacity:.92}
.map-inset:hover .map-zoom,.map-inset:focus-visible .map-zoom{background:var(--gold);color:var(--navy)}
.map-inset:hover,.map-inset:focus-visible{border-color:var(--gold-deep)}
.map-inset img{width:100%;height:auto;display:block}
.map-tag{display:block;padding:8px 10px;font-size:.68rem;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold-deep);text-align:left;border-top:1px solid var(--rule)}
@media(min-width:980px){
  .map-inset{position:absolute;right:0;top:0;bottom:auto;margin:0;width:238px;box-shadow:0 6px 30px rgba(12,29,53,.13)}
  .map-link{display:block}
  /* Cuando se intercambian, el marco localizador ya no describe nada. */
  .mapstage.swapped .map-link{display:none}
  /* Con la costa en grande se cambia a fila: mapa y recuadro uno al lado del
     otro, con separacion fija. Se acota por ALTURA, no por anchura, para que
     el bloque nunca se coma la pantalla, y asi desaparece el hueco suelto. */
  .mapstage.swapped{display:flex;align-items:flex-end;gap:30px}
  .mapstage.swapped .map-main{flex:0 1 auto;min-width:0}
  .mapstage.swapped .map-main img{width:auto;max-width:100%;
    max-height:min(560px, calc(100vh - var(--mapa-techo, 156px) - 96px))}
  .mapstage.swapped .map-inset{position:relative;right:auto;bottom:auto;margin:0;flex:0 0 238px;box-shadow:none}
}
.grid3{display:grid;gap:26px}
@media(min-width:760px){
  /* Tres columnas IGUALES, pero sobre un ancho acotado. A todo lo ancho cada
     dato dejaba un tercio de aire muerto a su derecha y los tres se leian como
     islas sueltas; con `auto` se igualaba el problema contrario, columnas de
     anchos distintos. Acotando la reja se consigue lo que se busca: bloques
     iguales, pegados a la izquierda y en la misma medida que el parrafo. */
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:62rem;
    gap:34px clamp(32px,4vw,56px)}
  /* El dato del medio es el mas corto de los tres, asi que su masa caia
     pegada al borde izquierdo de su columna y el conjunto se leia
     descentrado. Se centra la caja en su columna y el texto en la caja. */
  }
.fact{max-width:34ch}
.fact .k{font-family:"Jost";font-weight:200;font-size:2.1rem;color:var(--navy);line-height:1.05}
.fact h3{margin-top:8px}
/* Medida acotada: con la columna a todo lo ancho, cada dato rompia el texto
   donde le tocaba y los tres quedaban desiguales, como islas sueltas. */
.fact p{margin-top:5px;font-size:.93rem;color:var(--soft);max-width:32ch}

.zone-wrap{display:grid;gap:38px;margin-top:44px;align-items:start}
@media(min-width:940px){.zone-wrap{grid-template-columns:1fr 1fr;gap:46px}}
.scale{display:flex;flex-direction:column;gap:14px}
.scale figcaption{color:#a9b8c8;font-size:.78rem;max-width:52ch}
.scale figcaption em{font-style:normal;color:var(--gold);letter-spacing:.4px}
/* La lamina vive SOBRE el navy, sin caja blanca: la version anterior era una
   imagen incrustada con su propio fondo y se leia como algo pegado encima. */
.marco{display:block;width:100%;height:auto}
.mk-rot{font-family:"Jost";font-weight:400;font-size:11px;letter-spacing:2.6px;fill:var(--gold)}
.mk-cifra{font-family:"Jost";font-weight:300;font-size:17px;fill:var(--cream);letter-spacing:.3px}
.mk-pie{font-family:"Jost";font-weight:400;font-size:10px;letter-spacing:2px;fill:#a9b8c8}
.mk-nota{font-family:"Jost";font-weight:300;font-size:11px;fill:#8ea0b4}
.mk-caja{fill:none;stroke:rgba(250,247,242,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-lleno{fill:rgba(250,247,242,.14);stroke:none}
.mk-lote{fill:none;stroke:rgba(250,247,242,.3);stroke-width:1;vector-effect:non-scaling-stroke}
/* 60 unidades ocupadas, 40 libres. La trama dice CUANTO, nunca DONDE. */
.mk-cota-t{font-family:"Jost";font-weight:400;font-size:10px;letter-spacing:2px;fill:#a9b8c8}
.mk-si{fill:var(--gold);stroke:none}
.mk-no{fill:none;stroke:rgba(250,247,242,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-tope{stroke:var(--gold);stroke-width:1.2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.mk-suelo{stroke:rgba(250,247,242,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-cota{stroke:var(--gold);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
/* ===== SISTEMA DE DATOS =====
   Sin caja y sin fondo propio. El contorno completo mas el fondo blanco hacian
   que la tabla se leyera como un widget pegado sobre la pagina -y sobre el navy,
   como una tarjeta flotante-. Ahora es un registro dibujado sobre el propio
   fondo de la seccion: filete fuerte bajo la cabecera, filetes tenues entre
   filas, y un filete de cierre distinto para los totales.

   Y una jerarquia: no todas las columnas pesan lo mismo. La cifra que decide
   -la huella edificable, el impuesto anual- va en tinta plena; la que solo da
   contexto -superficie, base imponible- va atenuada. Antes competian. */
.tw{overflow-x:auto;border:0;background:none}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;padding:14px 22px 14px 0;border-bottom:1px solid var(--rule)}
th:last-child,td:last-child{padding-right:0}
thead th{font-family:"Jost";font-weight:400;font-size:.64rem;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--soft);background:none;white-space:nowrap;
  padding-bottom:11px;border-bottom:1px solid var(--gold-deep)}
tbody tr:last-child td{border-bottom:0}

/* Cifras: tabulares y a la derecha, que es lo unico que permite compararlas
   de un vistazo. Proporcionales, los digitos bailan de fila en fila. */
td.n,th.n{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
td.n{color:var(--navy)}
td.apoyo{color:var(--soft)}                  /* dato de contexto */
td.clave{color:var(--navy);font-weight:400}  /* dato que decide */
td.lote{font-family:"Jost";font-weight:400;letter-spacing:1.4px;color:var(--navy)}

/* El total no es otra fila: es un cierre. */
tfoot td{border-top:1px solid var(--gold-deep);border-bottom:0;
  padding-top:15px;color:var(--navy)}
tfoot .lote{color:var(--gold-deep);font-size:.66rem;letter-spacing:2.2px;
  text-transform:uppercase}

/* Sobre navy, la misma gramatica con la tinta invertida. */
.navy .tw{background:none}
.navy thead th{color:#a9b8c8;border-bottom-color:var(--gold)}
.navy th,.navy td{border-bottom-color:rgba(250,247,242,.16)}
.navy td.n,.navy td.clave,.navy td.lote{color:var(--cream)}
.navy td.apoyo{color:#8ea0b4}
.navy tfoot td{border-top-color:var(--gold);color:var(--cream)}
.navy tfoot .lote{color:var(--gold)}

/* La regla del calculo vive en la cabecera de la columna que gobierna: asi la
   formula se lee cruzando la fila y no hace falta contarla aparte en prosa. */
thead th .op{display:block;margin-top:5px;text-transform:none;letter-spacing:.3px;
  font-size:.7rem;color:var(--gold-deep);font-variant-numeric:tabular-nums}

/* Tres cifras por fila, pero solo una responde al titulo. El impuesto anual
   sube de cuerpo; precio y base se quedan de contexto. */
#ownership td.clave{font-size:1.1rem}
/* La conclusion del argumento, no una nota al pie. */
.cierre{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);
  max-width:720px;font-size:1rem;color:var(--soft)}
.cierre b{font-weight:400;color:var(--navy);font-size:1.18rem;
  font-variant-numeric:tabular-nums}

/* Marca en la fila que merece un apunte al lado de la cifra. */
.justo{font-family:"Jost";font-weight:400;font-size:.58rem;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--gold);margin-left:10px;white-space:nowrap}

/* En movil las tablas se apretan para CABER. Al quitarles la caja ya no hay
   borde que insinue que se pueden desplazar de lado, asi que una tabla cortada
   se leeria como una tabla incompleta. */
@media (max-width:620px){
  th,td{padding:11px 10px 11px 0;font-size:.85rem}
  thead th{font-size:.55rem;letter-spacing:1.3px}
  .justo{display:block;margin-left:0;margin-top:3px;font-size:.52rem;letter-spacing:1.2px}
}

.navy{background:var(--navy);color:#e6e2da}
.navy h2,.navy h3{color:var(--cream)}
.navy .eyebrow{color:var(--gold)}
.navy a{color:var(--gold)}
.navy .fact .k{color:var(--gold)}
/* La tabla vive sobre fondo blanco aunque este dentro del bloque navy.
   Sin esto hereda el texto claro y queda blanco sobre blanco. */
.navy table{color:var(--ink)}
.navy thead th{color:#46535f}
.navy .fact p{color:#a9b8c8}
.navy .legalnote{color:#a9b8c8}

/* ---------- pasos ---------- */
.steps{counter-reset:st;display:flex;flex-direction:column;gap:0}
.step{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .n{font-family:"Jost";font-weight:200;font-size:1.5rem;color:var(--gold-deep);line-height:1}

/* ---------- formulario ---------- */
.form{background:var(--paper);border:1px solid var(--rule);padding:34px 32px;display:flex;flex-direction:column;gap:18px}
.row{display:grid;gap:16px}
@media(min-width:640px){.row{grid-template-columns:1fr 1fr}}
label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--soft)}
input[type=text],input[type=email],input[type=tel]{
  font-family:"Jost";font-weight:300;font-size:1rem;color:var(--ink);
  border:1px solid var(--rule);background:var(--cream);padding:11px 13px;border-radius:2px;
}
input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px}
.check{flex-direction:row;align-items:flex-start;gap:11px;font-size:.9rem;color:var(--ink);cursor:pointer}
.check input{margin-top:5px;accent-color:var(--navy);width:17px;height:17px}
.btn{
  align-self:flex-start;font-family:"Jost";font-weight:400;font-size:.74rem;letter-spacing:3px;
  text-transform:uppercase;padding:14px 30px;border:1px solid var(--navy);background:var(--navy);
  color:var(--cream);cursor:pointer;transition:background .3s ease,color .3s ease;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--navy)}
.legalnote{font-size:.78rem;color:var(--soft);line-height:1.5}
/* campo trampa: fuera de la vista, pero sin display:none que algunos bots detectan */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formmsg{margin:14px 0 0;font-size:.9rem;line-height:1.55;padding:12px 16px;border-left:2px solid}
.formmsg.ok{border-color:#9c7d43;background:rgba(201,169,110,.14);color:#16202e}
.formmsg.mal{border-color:#a4442f;background:rgba(164,68,47,.09);color:#7d2f1f}
.cf-turnstile{margin:4px 0 18px}

/* ---------- Private enquiries ---------- */
/* ===================================================================
   PRIVATE ENQUIRIES  ·  rediseno
   El vacio de la izquierda no venia de que sobrara aire, sino de que esa
   mitad no tenia trabajo: dos parrafos y dos enlaces no llenan medio ancho.
   Se le da contenido -que se puede pedir y por que vias- y se reparte
   5/6 en vez de mitad y mitad, para que el formulario tenga el sitio que
   de verdad necesita.
   =================================================================== */
.enq{display:grid;gap:34px}
@media(min-width:860px){
  .enq{grid-template-columns:5fr 6fr;gap:64px;align-items:start}
}

/* --- columna izquierda --- */
.enq-lado{display:flex;flex-direction:column;gap:0}
.enq-intro{margin:0;color:var(--soft);max-width:46ch}
.enq-bloque{margin-top:32px}
.enq-rot{font-family:"Jost";font-weight:400;font-size:.66rem;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 14px}
.enq-lista{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.enq-lista li{font-size:.96rem;color:var(--ink);padding-left:16px;position:relative}
.enq-lista li::before{content:"";position:absolute;left:0;top:.68em;
  width:6px;height:1px;background:var(--gold-deep)}

/* Las vias dejan de ser dos lineas de texto y pasan a ser destinos:
   filete, area de toque alta y flecha. */
.enq-vias{display:grid;gap:10px;margin-top:14px}
.enq-via{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--rule);padding:15px 18px;text-decoration:none;color:var(--ink);
  min-height:48px;transition:border-color .3s ease,background .3s ease}
.enq-via:hover,.enq-via:focus-visible{border-color:var(--gold-deep);background:var(--paper)}
.enq-via-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.enq-via-l{font-size:.62rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold-deep)}
.enq-via-v{font-size:1.02rem;color:var(--ink);overflow-wrap:anywhere}
.enq-via-f{flex:none;color:var(--gold-deep);transition:transform .3s ease}
.enq-via:hover .enq-via-f{transform:translateX(4px)}
.enq-nota{margin-top:12px;font-size:.88rem;color:var(--soft)}

/* --- el panel del formulario --- */
.form{background:var(--paper);border:1px solid var(--rule);padding:36px 34px;
  display:flex;flex-direction:column;gap:0}
/* Ritmo: 14px dentro de un grupo, 30px entre grupos. Antes todo iba a 18 y
   por eso no se percibia ninguna agrupacion. */
.f-grupo{display:grid;gap:14px}
.f-grupo + .f-grupo{margin-top:30px}

label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;
  font-weight:400;color:var(--ink)}
.f-opt{font-weight:300;color:var(--soft)}
input[type=text],input[type=email],input[type=tel],.form select{
  font-family:"Jost";font-weight:300;font-size:1rem;color:var(--ink);
  border:1px solid var(--rule);background:var(--cream);padding:12px 13px;border-radius:2px;
  transition:border-color .25s ease;
}
input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,
.form select:hover,.form textarea:hover{border-color:rgba(135,108,58,.45)}
input:focus-visible,.form select:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px}
.form select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23876c3a'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px 6px;
  padding-right:38px}

/* Los lotes solo se muestran cuando la intencion es un lote concreto. Sin
   JS quedan visibles: nadie se queda sin poder elegirlos. */
.lots{border:0;padding:0;margin:0;min-width:0}
.lots[hidden]{display:none}
.lots legend{padding:0;font-size:.8rem;color:var(--ink);margin-bottom:11px}
.lots-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px}
.lot-c{flex-direction:row;align-items:center;gap:10px;font-size:.94rem;color:var(--ink);
  cursor:pointer;border:1px solid var(--rule);padding:11px 13px;min-height:44px;
  transition:border-color .25s ease,background .25s ease}
.lot-c:hover{border-color:rgba(135,108,58,.45)}
.lot-c:has(input:checked){border-color:var(--gold-deep);background:var(--paper)}
.lot-c input{width:16px;height:16px;accent-color:var(--navy);flex:none;margin:0}

.form textarea{font-family:inherit;font-size:1rem;font-weight:300;color:var(--ink);
  border:1px solid var(--rule);background:var(--cream);padding:12px 13px;border-radius:2px;
  min-height:112px;resize:vertical;transition:border-color .25s ease}
.form textarea:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px}

.check{flex-direction:row;align-items:flex-start;gap:11px;font-size:.88rem;
  font-weight:300;color:var(--ink);cursor:pointer;line-height:1.55}
.check input{margin-top:4px;accent-color:var(--navy);width:17px;height:17px;flex:none}

/* Error en linea: texto ademas de color, y unido al campo por aria. */
.f-err{font-size:.78rem;color:#a4442f;margin:0;display:none}
.f-err::before{content:"— "}
[data-mal] .f-err{display:block}
/* El error del consentimiento es hermano del label, no hijo: sin esta
   regla la casilla se marcaba pero el mensaje no aparecia nunca. */
.check[data-mal] + .f-err{display:block}
[data-mal] input,[data-mal] select,[data-mal] textarea{border-color:#a4442f}

/* Hueco reservado para el desafio: si aparece, el boton no salta. */
.cf-hueco{min-height:8px;margin-top:26px}
.cf-hueco:not(:empty){min-height:70px}

.btn{align-self:flex-start;margin-top:26px}
.enq-resp{margin-top:14px;font-size:.84rem;color:var(--soft)}

.enq-rule{width:64px;height:1px;background:var(--gold-deep);border:0;margin:30px 0 26px}
.vias{display:grid;gap:22px}
@media(min-width:520px){.vias{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.via{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--ink)}
.via:hover .via-v,.via:focus-visible .via-v{color:var(--gold-deep)}
.via-l{font-size:.66rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold-deep)}
/* La direccion de correo no tiene por donde partirse, y como celda de un
   grid impone su ancho minimo a toda la columna: en un movil de 360 px eso
   sacaba la pagina 34 px por la derecha. min-width:0 deja que la celda se
   encoja, y anywhere permite partir la direccion. */
#enquiries .grid2>*{min-width:0}
/* Un <input> trae de fabrica un ancho propio de unos 20 caracteres. Dentro de
   una rejilla eso es un suelo, no una sugerencia: a 768 px, con la seccion ya
   en dos columnas y la fila en dos campos, sacaba el formulario 53 px. */
#enquiries .row>*,#enquiries .form label{min-width:0}
#enquiries .form input:not([type=checkbox]):not([type=radio]),
#enquiries .form textarea,#enquiries .form select{
  min-width:0;max-width:100%;width:100%}
.via-v{font-size:1.02rem;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.via-note{margin-top:22px;font-size:.84rem;color:var(--soft)}
.lots{border:0;padding:0;margin:0;min-width:0}
.lots legend{padding:0;font-size:.82rem;color:var(--soft);margin-bottom:10px}
/* min() para que, cuando no quepan dos columnas de 150 px, pase a una en vez
   de salirse. Sin esto se iba 12 px por la derecha de 375 a 768 px. */
.lots-g{display:grid;gap:9px 18px;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.lots-g>*{min-width:0}
.lot-c{flex-direction:row;align-items:center;gap:10px;font-size:.92rem;color:var(--ink);cursor:pointer}
.lot-c input{width:17px;height:17px;accent-color:var(--navy);flex:none;margin:0}
.form textarea{font-family:inherit;font-size:1rem;font-weight:300;color:var(--ink);
  border:1px solid var(--rule);background:var(--cream);padding:11px 13px;border-radius:2px;
  width:100%;resize:vertical;min-height:76px}
.form textarea:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px}
.broker-line{margin:34px 0 0;padding-top:24px;border-top:1px solid var(--rule);
  font-size:.9rem;color:var(--soft)}
.broker-line a{color:var(--gold-deep)}

/* Aparato de referencia. Se separa del contenido con filete, etiqueta y aire,
   para que nunca se lea como parte del argumento. */
.source{margin-top:52px;padding-top:16px;border-top:1px solid var(--rule);max-width:74ch;
  display:flex;flex-direction:column;gap:7px}
.source .lbl{font-family:"Jost";font-weight:400;font-size:.6rem;letter-spacing:3.4px;
  text-transform:uppercase;color:var(--gold-deep)}
.source p{font-size:.79rem;line-height:1.6;color:var(--soft)}
.navy .source{border-top-color:rgba(201,169,110,.28)}
.navy .source .lbl{color:var(--gold)}
.navy .source p{color:#9aa8b8}
figure{margin:0}
figcaption{font-size:.78rem;color:var(--soft);padding-top:12px}
footer{background:var(--navy);color:#c8cfd8;padding:56px 0;font-size:.86rem}
footer a{color:var(--gold);text-decoration:none}
footer img{width:150px;margin-bottom:22px}
.colophon{margin-top:26px;font-size:.76rem;line-height:1.6;color:#8b98a6;max-width:76ch}
.colophon + .colophon{margin-top:8px}
.footnote{margin-top:22px;padding-top:16px;border-top:1px solid rgba(201,169,110,.22);
  font-size:.76rem;line-height:1.6;color:#8b98a6;max-width:76ch}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ---- site plan sobre la foto aerea ---- */
.siteplan{margin:0}
.siteplan-media{position:relative;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--navy)}
.sp{display:block;width:100%;height:auto}
.sp-scrim{fill:#0c1d35;fill-opacity:.27}
.lot-g{cursor:pointer;outline:none}
.sp-fill{fill:#d9bd85;fill-opacity:.10;transition:fill-opacity .22s ease}
.lot-g.on .sp-fill,.lot-g:focus-visible .sp-fill{fill-opacity:.38}
.sp-num{font-family:"Cormorant Garamond",Georgia,serif;font-size:78px;font-weight:400;fill:#faf7f2;
        letter-spacing:.02em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.sp-div{stroke:#faf7f2;stroke-opacity:.85;stroke-width:2.6;fill:none}
.sp-out{stroke:#faf7f2;stroke-width:4;fill:none;stroke-linejoin:round}
.sp-tick{stroke:#faf7f2;stroke-opacity:.6;stroke-width:1.9;fill:none}
.sp-dim{font-family:"Jost";font-size:33px;font-weight:300;fill:#faf7f2;fill-opacity:.92;letter-spacing:.08em}
.sp-notice text{font-family:"Jost";font-size:31px;font-weight:300;fill:#faf7f2;fill-opacity:.88;letter-spacing:.14em}
.sp-rule{stroke:#d9bd85;stroke-opacity:.6;stroke-width:1.5;fill:none}
/* Rotulos sobre la calzada, siguiendo su trazado real. */
.sp-via{font-family:"Jost";font-size:28px;font-weight:300;fill:#faf7f2;fill-opacity:.92;letter-spacing:.08em}
.sp-via-s{font-size:23px}
.sp-flecha{fill:none;stroke:#faf7f2;stroke-opacity:.92;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ico .lleno{fill:#faf7f2;fill-opacity:.94;stroke:none}
.ico .raya{fill:none;stroke:#faf7f2;stroke-opacity:.94;stroke-linecap:round;stroke-linejoin:round}


/* La animacion solo existe si el JS la enciende. Sin JS, todo se ve. */
.sp.js .sp-out,.sp.js .sp-div{stroke-dasharray:3200;stroke-dashoffset:3200}
.sp.js .sp-num,.sp.js .sp-dim,.sp.js .sp-tick,.sp.js .sp-notice,.sp.js .sp-road{opacity:0}
.sp.js.drawn .sp-out{animation:spDraw 1.15s cubic-bezier(.4,0,.2,1) forwards}
.sp.js.drawn .sp-div{animation:spDraw .5s ease forwards;animation-delay:calc(.8s + var(--i)*.16s)}
.sp.js.drawn .lot-g .sp-num{animation:spIn .5s ease forwards;animation-delay:calc(1.15s + var(--i)*.16s)}
.sp.js.drawn .sp-dim,.sp.js.drawn .sp-tick{animation:spIn .5s ease forwards;animation-delay:1.9s}
.sp.js.drawn .sp-road{animation:spIn .6s ease forwards;animation-delay:2.15s}
.sp.js.drawn .sp-notice{animation:spIn .6s ease forwards;animation-delay:2.2s}
@keyframes spDraw{to{stroke-dashoffset:0}}
@keyframes spIn{from{opacity:0}to{opacity:1}}

.sp-caption{margin:12px 2px 0;color:var(--navy);opacity:.55;font-family:"Jost";
            font-size:.76rem;font-weight:300;line-height:1.55}
/* --- Foto de contexto: donde estan los lotes y la salida a la playa --- */
.ctxfig{margin:46px 0 0}
.ctxfig-media{position:relative;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--navy)}
.ctx{display:block;width:100%;height:auto;--ctxR:17px;--ctxC:6.6px;--ctxw:3.2px;--ctxN:33px;--ctxL:.18em;--ctxFw:300;--ctxD:26px}
/* En pantalla estrecha LOTS cambia de lado: las dos placas no caben apiladas. */
@media (max-width:1000px){.ctx{--ctxR:22px;--ctxC:8.6px;--ctxw:4.2px;--ctxN:42px;--ctxD:44px;--ctxDL:-190px}
  .ctx-g1 .ctx-name{text-anchor:end}
  .ctx-g1 .ctx-lbl{--pxoff:3.82;transform:translateX(var(--ctxDL))}}
@media (max-width:620px){.ctx{--ctxR:23px;--ctxC:9px;--ctxw:4.4px;--ctxN:46px;--ctxFw:400;--ctxD:52px;--ctxDL:-198px}}
.ctx-ring{fill:none;stroke:#faf7f2;stroke-width:var(--ctxw)}
.ctx-core{fill:#faf7f2}
.ctx-r{r:var(--ctxR)}
.ctx-c{r:var(--ctxC)}
.ctx-lbl{transform:translateX(var(--ctxD))}
/* placa: canto vivo, sin difuminar. Mas aire a los lados que arriba y abajo. */
.ctx-guion{stroke:#faf7f2;stroke-opacity:.85;stroke-width:1.6;stroke-linecap:round}
.ctx-plate{fill:#0c1d35;fill-opacity:.14;
  x:calc(var(--cx) - var(--ctxN)*1.15);
  y:calc(var(--cy) - var(--ctxN)*.88);
  width:calc(var(--ctxN)*var(--pw));
  height:calc(var(--ctxN)*1.76)}
.ctx-name{font-family:"Jost";font-size:var(--ctxN);letter-spacing:calc(var(--ctxL)*.55);
          font-weight:var(--ctxFw);fill:#faf7f2}
.ctx.js .ctx-g{opacity:0}
.ctx.js.drawn .ctx-g{animation:spIn .7s ease forwards;animation-delay:calc(.1s + var(--i)*.24s)}
@media (prefers-reduced-motion:reduce){
  .ctx.js .ctx-g{opacity:1}
  .ctx *{animation:none!important}
}
@media (prefers-reduced-motion:reduce){
  .sp.js .sp-out,.sp.js .sp-div{stroke-dashoffset:0}
  .sp.js .sp-num,.sp.js .sp-dim,.sp.js .sp-tick,.sp.js .sp-notice,.sp.js .sp-road{opacity:1}
  .sp *{animation:none!important}
}

/* ===== INICIO SISTEMA DE PIE PUBLICO =====================================
   Identico en las cuatro paginas publicas. Si se toca, se tocan todas.
   No lleva ni un color literal: todo deriva de --navy, --gold y --cream, para
   que la migracion de paleta aprobada solo tenga que cambiar el token.
   ======================================================================== */
.op-pie{background:var(--navy);color:var(--cream);margin-top:64px}
.op-pie-shell{max-width:1200px;margin-inline:auto;padding:72px 48px 28px}
@media (max-width:1279px){ .op-pie-shell{padding-left:32px;padding-right:32px} }

/* --- fila de marca --- */
.op-pie-marca{display:flex;align-items:center}
.op-pie-logo{display:block;width:200px;max-width:62%;height:auto}
.op-pie-sep{flex:none;width:1px;height:36px;margin:0 24px;
  background:var(--gold);opacity:.55}
.op-pie-division{font-family:"Jost",-apple-system,"Segoe UI",sans-serif;
  font-size:12px;font-weight:300;letter-spacing:.31em;text-transform:uppercase;
  color:var(--cream);opacity:.78;line-height:1}

/* --- fila de informacion --- */
/* 60/40 en fr, no en %. Con porcentajes el gap SE SUMA al 100% y la columna
   derecha se sale del contenedor; con fr se reparte lo que queda tras el gap.
   El minmax(0,...) es lo que permite que el correo largo encoja en vez de
   empujar la columna. */
.op-pie-info{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:52px;align-items:start;margin-top:52px}
.op-pie-lugar,.op-pie-contacto{min-width:0}
.op-pie-proyecto{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:27px;line-height:1.15;margin:0 0 15px;color:var(--cream)}
.op-pie-geo{font-family:"Jost",-apple-system,"Segoe UI",sans-serif;
  font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  margin:0;color:var(--cream);opacity:.66}
.op-pie-rotulo{font-family:"Jost",-apple-system,"Segoe UI",sans-serif;
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 12px;color:var(--cream);opacity:.6}
.op-pie-rotulo-2{margin-top:34px}
.op-pie-dato{margin:0;font-size:15px;line-height:1.5;
  /* El correo es largo y no tiene por donde partirse: si la columna se estrecha
     se sale. Se deja partir solo cuando no cabe de ninguna otra forma. */
  min-width:0;overflow-wrap:anywhere}
.op-pie-dato + .op-pie-dato{margin-top:12px}
.op-pie-dato a{color:var(--cream);text-decoration:none;border-bottom:1px solid transparent}
.op-pie-dato a:hover{border-bottom-color:var(--gold)}
.op-pie-social{margin:14px 0 0;font-size:13px;line-height:1.7;
  color:var(--cream);opacity:.66}
.op-pie-social a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.op-pie-social a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* --- filete y base --- */
.op-pie-filete{border:0;height:1px;width:100%;background:var(--gold);opacity:.25;
  margin:60px 0 0}
.op-pie-base{display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;margin-top:22px;
  font-family:"Jost",-apple-system,"Segoe UI",sans-serif;font-size:11px;
  letter-spacing:.04em}
.op-pie-base a{color:var(--cream);opacity:.8;text-decoration:none;
  border-bottom:1px solid transparent}
.op-pie-base a:hover{opacity:1;border-bottom-color:var(--gold)}
.op-pie-copy{margin:0;color:var(--cream);opacity:.66}
.op-pie-nota{margin:0;color:var(--cream);opacity:.8}

/* --- foco visible, dentro del pie --- */
.op-pie a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;
  border-bottom-color:transparent}

/* --- variante minima de la politica de privacidad --- */
.op-pie-min .op-pie-nota{margin-top:48px}
.op-pie-min .op-pie-filete{margin-top:56px}
.op-pie-min .op-pie-base{margin-top:20px;justify-content:flex-start}

/* --- movil: una columna, todo a la izquierda --- */
@media (max-width:767px){
  .op-pie-shell{padding:48px 24px 24px}
  .op-pie-marca{display:block}
  .op-pie-logo{width:172px;max-width:78%}
  /* En movil el separador deja de ser vertical y pasa a ser un filete corto
     bajo el logo: la barra vertical de escritorio aqui no cabe con calma. */
  /* El separador es un <span>: en escritorio funciona porque es hijo de un
     flex y se blockifica, pero aqui el padre pasa a display:block y volveria a
     ser inline, ignorando width y height. */
  .op-pie-sep{display:block;width:36px;height:1px;margin:22px 0 15px}
  .op-pie-info{display:block;margin-top:0}
  .op-pie-lugar{margin-top:48px}
  .op-pie-proyecto{font-size:25px;margin-bottom:13px}
  .op-pie-contacto{margin-top:44px}
  .op-pie-rotulo-2{margin-top:38px}
  .op-pie-filete{margin-top:52px}
  .op-pie-base{display:block;margin-top:20px}
  .op-pie-copy{margin-top:16px}
  .op-pie-min .op-pie-nota{margin-top:48px}
}

@media (prefers-reduced-motion:reduce){
  .op-pie a{transition:none!important}
}

/* --- impresion: el pie no se lleva un bloque navy a la hoja --- */
@media print{
  .op-pie{background:transparent;color:var(--ink);margin-top:18pt;
    border-top:1.5pt solid var(--navy)}
  .op-pie-shell{padding:16pt 0 0;max-width:none}
  .op-pie-logo{display:none}
  .op-pie-division,.op-pie-geo,.op-pie-rotulo,.op-pie-copy,.op-pie-social{
    color:var(--soft);opacity:1}
  .op-pie-proyecto,.op-pie-dato a,.op-pie-base a{color:var(--ink)}
  .op-pie-sep,.op-pie-filete{background:var(--rule);opacity:1}
}
/* ===== FIN SISTEMA DE PIE PUBLICO ======================================== */

/* ===================================================================
   HERO · anotaciones sobre la aérea de contexto
   Construido sobre la imagen de Bunny. No reutiliza el componente de la
   página anterior: aquel traía la foto incrustada en base64 a baja
   resolución y el rótulo en crema sobre placa opaca.
   =================================================================== */

.lp-hero{background:var(--navy)}

/* container-type para poder medir en cqw: la anotación escala con la propia
   fotografía, no con la ventana. */
/* La foto se recorta por los lados para ganar altura: nativa es 2,44:1 y en
   una ventana de 1440 se quedaba en una tira de 590 px. A 2:1 sube a 720.
   El primer intento (22-09-2026) se revirtio porque las marcas quedaban
   senalando otro sitio --62 px de error en "Lots", 74 en "Beach access"--:
   la culpa no era del anclaje sino de la formula de --x, que daba por hecho
   que la foto entraba entera. Ahora el recorte esta en el calculo.
   Los dos anclajes se confirmaron contra los puntos naranjas que la propia
   fotografia lleva pintados: (1203,225) y (1251,307) sobre el original de
   1920x787, que es exactamente lo que dicen --px y --y.
   No se baja de 2:1. Se probo 16:9 y el recorte se come el Pacifico abierto
   del borde derecho, que es justo lo que vende la vista. */
.lp-hero-foto{--ar:2;aspect-ratio:var(--ar);overflow:hidden;
  position:relative;width:100%;background:var(--navy);
  container-type:inline-size;line-height:0}
.lp-hero-foto img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block}
/* Por encima de 1560 la foto ya llega alta sin tocarla (a 1920 son sus 787 px
   nativos), asi que se sirve entera y el recorte sobra. */
@media (min-width:1560px){
  .lp-hero-foto{--ar:2.4396}
}

/* ===== la anotación =====
        LOTS
        ──────────── ○
   Sin caja, sin icono, sin sombra, sin borde. Un rótulo pequeño, un filete
   finísimo y un punto mínimo.

   Lleva una placa navy al 26 %, el extremo bajo del rango. No es decorativa:
   se midió la fotografía y sin ella el texto crema cae a 3,13 de contraste
   sobre las manchas claras -tejados blancos, una furgoneta-, por debajo del
   4,5 que necesita un texto pequeño. Con la placa al 26 % y en la posición
   elegida, el 0 % del rótulo queda por debajo del umbral. Casi no se ve:
   solo sostiene la lectura. */
/* --x se calcula aqui, NO en el atributo style: en linea gana siempre a
   cualquier media query, y por eso el ajuste movil no se aplicaba nunca.
   La formula deshace el recorte de object-fit:cover. Con la ventana mas baja
   que la foto, esta se escala por el alto y se centra, de modo que sobresale
   por los dos lados; lo que queda visible es la franja de 787*--ar pixeles
   centrada en 960. De ahi: distancia del punto al centro, entre el ancho
   visible, mas el 50 % del centro. Con --ar:2.4396 --la foto entera-- se
   reduce a --px/1920, que es lo que habia antes. */
.lp-mk{position:absolute;
  --x:calc((var(--px) - 960) / (787 * var(--ar,2.4396)) * 100% + 50%);
  left:var(--x);top:var(--y);
  display:flex;align-items:center;
  /* Ahora es un boton. El punto crece para alojar un "+" legible sin dejar de
     tapar el naranja de la foto, que a este tamano mide 12 px. */
  --mk-punto:max(19px, 1.55cqw);
  --mk-aro:max(28px, 2.6cqw);
  --mk-filete:calc(var(--largo,140) * 1cqw / 19.2);
  --mk-letra:max(9px, 0.66cqw);
  background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  /* Relleno solo vertical: agranda el area de toque a 37px sin mover nada.
     El translate es de -50%, asi que la caja sigue centrada en su punto, y
     con relleno lateral si se desplazaria, porque ahi el calculo usa el ancho. */
  padding:9px 0}
.lp-mk:focus-visible{outline:2px solid var(--gold);outline-offset:7px}

/* A la izquierda del punto: rótulo, filete, punto. */
.lp-mk-izq{transform:translate(calc(-100% + var(--mk-punto)/2), -50%)}
/* A la derecha: punto, filete, rótulo. Se invierte el orden visual. */
.lp-mk-der{transform:translate(calc(var(--mk-punto)/-2), -50%);
  flex-direction:row-reverse}

/* Rotulos lo mas discretos posible sin dejar de leerse: fuera la placa de
   fondo, que era lo que mas cantaba, y en su lugar una sombra suave que los
   sostiene sobre cualquier zona de la foto. El aire que daba el relleno lo
   pone ahora un margen, para no juntarlos con el filete. */
.lp-mk-t{font-family:var(--body);font-weight:300;
  font-size:var(--mk-letra);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(250,247,242,.93);white-space:nowrap;line-height:1;
  background:none;padding:0;
  margin-inline:max(9px,.75cqw);
  text-shadow:0 1px 3px rgba(12,29,53,.6), 0 0 9px rgba(12,29,53,.4)}

.lp-mk-l{width:var(--mk-filete);height:1px;flex:0 0 auto;
  background:rgba(250,247,242,.5)}

.lp-mk-o{position:relative;flex:0 0 auto;
  width:var(--mk-punto);height:var(--mk-punto);
  background:var(--cream);border-radius:50%}
.lp-mk-o::after{content:"";position:absolute;left:50%;top:50%;
  width:var(--mk-aro);height:var(--mk-aro);
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(250,247,242,.34);
  transition:width .3s ease,height .3s ease,border-color .3s ease}
/* El "+" se dibuja con dos filetes, no con el caracter: asi no depende de la
   tipografia ni de como cada sistema centre el signo dentro de su caja. */
.lp-mk-o::before{content:"";position:absolute;left:50%;top:50%;
  width:calc(var(--mk-punto) * .5);height:calc(var(--mk-punto) * .5);
  transform:translate(-50%,-50%);
  background:linear-gradient(var(--navy),var(--navy)) center/100% 1.5px no-repeat,
             linear-gradient(var(--navy),var(--navy)) center/1.5px 100% no-repeat}
.lp-mk:hover .lp-mk-o::after,.lp-mk:focus-visible .lp-mk-o::after{
  width:calc(var(--mk-aro) + 8px);height:calc(var(--mk-aro) + 8px);
  border-color:rgba(250,247,242,.75)}

/* Entran en silencio, escalonadas, y no entran si se ha pedido menos
   movimiento. */
.lp-mk{opacity:0;animation:lpMk .8s ease forwards;
  animation-delay:calc(.4s + var(--i)*.24s)}
@keyframes lpMk{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lp-mk{opacity:1;animation:none}
}

/* ===== estrecho ===== */
@media (max-width:900px){
  .lp-mk{--mk-filete:max(20px,1.8cqw);letter-spacing:.22em}
}
@media (max-width:620px){
  /* La foto es 2,44:1: en vertical queda una tira demasiado baja. Se recorta
     por los LADOS -nunca por arriba y abajo- centrando en la zona de los
     puntos, y las coordenadas se recalculan sobre el trozo visible. */
  /* La cuadrada ya viene recortada, asi que no hay que recortar nada aqui:
     la imagen entra entera y las marcas se situan sobre SUS propias
     coordenadas. La formula anterior restaba 820 -el desbordamiento
     maximo- pero object-position:74% dejaba la ventana empezando en 607,
     y el punto crema caia 32 px a la derecha del naranja, dejandolo a la
     vista y senalando donde no era. */
  .lp-hero-foto{aspect-ratio:1/1;overflow:hidden}
  .lp-hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .lp-mk{--x:calc(var(--pxm) / 787 * 100%);
         --mk-filete:max(14px,1.4cqw)}
  /* Antes se ocultaba porque, anotando hacia la derecha, se salia del recorte.
     Con la foto cuadrada ya no hace falta: se gira hacia la izquierda, como
     LOTS, y cabe de sobra. Y hay que recuperarla, porque si no su punto
     naranja de la foto se queda a la vista sin nada que lo tape ni lo
     explique. */
  .lp-mk-der{flex-direction:row;
    transform:translate(calc(-100% + var(--mk-punto)/2), -50%)}
}

/* ===== banda de texto ===== */
.lp-hero-texto{width:min(100% - var(--lp-lado)*2, var(--lp-ancho));
  margin-inline:auto;padding:clamp(40px,5vw,68px) 0 clamp(36px,4vw,56px);
  display:grid;gap:clamp(28px,3vw,52px);line-height:1.6}
@media (min-width:1000px){
  .lp-hero-texto{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:end}
}
.lp-hero-texto h1{font-family:var(--display);font-weight:300;color:var(--cream);
  font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.04;letter-spacing:-.5px;
  margin:14px 0 0;text-wrap:balance}
.lp-hero-eyebrow{font-size:.66rem;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold);margin:0}
.lp-hero-entrada{color:rgba(250,247,242,.86);font-size:1.04rem;line-height:1.72;
  margin:0 0 26px;max-width:52ch}


/* ===================================================================
   LA BANDA DE PRUEBAS DEL ENTORNO
   No trae el contenido de Explore: trae la prueba de que existe. Seis
   datos, seis líneas, cada uno enlazando a su página. Si crece a ocho o
   se le meten iconos y fotos, deja de ser prueba y pasa a ser folleto.
   =================================================================== */
.lp-pruebas{background:var(--cream)}
.lp-pruebas .lp-pruebas-intro{max-width:64ch;margin:18px 0 0;
  font-size:1.02rem;line-height:1.72}

.lp-pruebas-lista{list-style:none;margin:52px 0 0;padding:0;
  display:grid;gap:34px 40px;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){
  .lp-pruebas-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .lp-pruebas-lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 52px}
}

/* Mismo patrón que .vias del cierre del dossier: rótulo dorado diminuto
   arriba, dato en Cormorant debajo. Sin recuadro, sin flecha, sin fondo
   que cambie al pasar. Solo el color. */
.lp-pruebas-lista a{display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:var(--ink);
  padding-top:16px;border-top:1px solid var(--rule);
  transition:color .3s ease,border-color .3s ease}
.lp-pruebas-lista a:hover{color:var(--gold-deep);border-top-color:var(--gold-deep)}
.lp-pruebas-lista a:focus-visible{outline:1px solid var(--gold-deep);
  outline-offset:6px}
.lp-pruebas-lista .lbl{font-family:var(--body);font-weight:300;
  font-size:.62rem;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--gold-deep)}
.lp-pruebas-lista .val{font-family:var(--display);font-weight:300;
  font-size:1.32rem;line-height:1.28;letter-spacing:.2px}

/* Una sola invitación al final, no seis. */
.lp-pruebas .lp-ctas{margin-top:46px}


/* ===================================================================
   LAND · PLAYA DESTILADEROS — sistema de composición panorámica
   Se añade al final de la hoja existente, así que gana por orden.
   Nada de esto sustituye tokens: navy, gold, cream y rule son los suyos.
   =================================================================== */

/* ---- anchos ----
   La página vivía entera dentro de 1180px. Ese era el problema: todo
   estrecho y centrado. Aquí se abren tres anchos distintos según lo que
   tenga que respirar. */
:root{
  --lp-texto: 720px;    /* columna de lectura */
  --lp-ancho: 1560px;   /* composiciones de lado a lado */
  --lp-tecnico: 1320px; /* tablas y datos */
  --lp-lado: clamp(24px, 4vw, 64px);
  --lp-nav: 52px;       /* alto de la barra de capítulos */
}

/* El hero y sus marcadores viven en land-hero.css. */

/* ===== NAVEGACIÓN DE CAPÍTULOS =====
   Editorial, no utilitaria: un filete arriba y otro abajo, versalitas
   diminutas muy espaciadas, y el capítulo en curso marcado con un filete
   dorado. Nada de pestañas de aplicación. */
.lp-caps{position:sticky;top:var(--oph-alto,100px);z-index:30;
  background:var(--navy);border-top:1px solid rgba(250,247,242,.14);
  border-bottom:1px solid rgba(250,247,242,.14)}
.lp-caps-in{width:min(100% - var(--lp-lado)*2, var(--lp-ancho));
  margin-inline:auto;display:flex;align-items:center;gap:8px;
  height:var(--lp-nav)}
.lp-caps ol{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);
  list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.lp-caps ol::-webkit-scrollbar{display:none}
.lp-caps a{display:block;padding:6px 0;text-decoration:none;white-space:nowrap;
  font-size:.62rem;letter-spacing:2.4px;text-transform:uppercase;
  color:rgba(250,247,242,.62);border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease}
.lp-caps a:hover{color:var(--cream)}
.lp-caps a[aria-current]{color:var(--cream);border-bottom-color:var(--gold)}
.lp-caps a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
/* En móvil la fila se sustituye por un desplegable nativo: accesible sin
   JavaScript y sin ser un mega menú. */
.lp-caps-movil{display:none}
@media (max-width:900px){
  .lp-caps ol{display:none}
  .lp-caps-movil{display:block;position:relative;flex:1}
  .lp-caps-movil summary{list-style:none;cursor:pointer;padding:6px 0;
    font-size:.62rem;letter-spacing:2.4px;text-transform:uppercase;
    color:var(--cream);display:flex;align-items:center;gap:10px}
  .lp-caps-movil summary::-webkit-details-marker{display:none}
  .lp-caps-movil summary svg{width:11px;height:7px;stroke:var(--gold);
    stroke-width:1.4;fill:none;transition:transform .3s ease}
  .lp-caps-movil[open] summary svg{transform:rotate(180deg)}
  .lp-caps-movil ul{position:absolute;left:calc(var(--lp-lado)*-1);
    right:calc(var(--lp-lado)*-1);top:calc(100% + 13px);
    background:var(--navy);border-top:1px solid rgba(250,247,242,.14);
    border-bottom:1px solid rgba(250,247,242,.14);
    list-style:none;margin:0;padding:8px var(--lp-lado) 18px}
  .lp-caps-movil li a{display:block;padding:13px 0;font-size:.68rem;
    border-bottom:1px solid rgba(250,247,242,.09)}
  .lp-caps-movil li:last-child a{border-bottom:0}
}

/* El ancla no debe quedar tapada por el header fijo ni por los capítulos. */
[id]{scroll-margin-top:calc(var(--oph-alto,100px) + var(--lp-nav) + 24px)}

/* ===== COMPOSICIÓN DE LADO A LADO =====
   Lo que pedía la página: el visual ocupando espacio real, el texto en
   una columna ancha al lado, y alternando el orden. */
.lp-duo{width:min(100% - var(--lp-lado)*2, var(--lp-ancho));
  margin-inline:auto;display:grid;gap:clamp(30px,3.4vw,64px);align-items:center}
@media (min-width:1000px){
  .lp-duo{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .lp-duo.lp-invierte > :first-child{order:2}
}
.lp-duo-texto{max-width:var(--lp-texto)}
.lp-duo-texto h2{margin-top:10px}
/* El titular y su primer parrafo se tocaban: los parrafos van sin margen
   (p{margin:0}) y aqui no habia separador, asi que la caja de linea del h2
   quedaba pegada a la del texto. Se veia apretado en "The opportunity" y en
   "Documentation". 22-09-2026. */
.lp-duo-texto h2 + p{margin-top:20px}
.lp-duo-media img,.lp-duo-media svg{display:block;width:100%;height:auto}

/* Asset vertical. La version que habia escrita en la hoja le daba a la foto
   la columna ANCHA --0.86fr de texto por 1.14fr de foto-- y con una foto de
   9:16 eso dispara el alto: 608 de ancho salian 1081 de alto, 1,65 veces la
   columna de texto, y la seccion se comia 1,38 pantallas. En vertical el
   ancho no es una eleccion libre: cada pixel de ancho son 1,78 de alto.
   Asi que la columna ancha es la del texto y la foto va en la estrecha, con
   tope de 400 px para que en monitores grandes no vuelva a crecer sola. */
@media (min-width:1000px){
  .lp-duo.lp-vertical{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
  .lp-duo.lp-vertical .lp-duo-media{max-width:400px;justify-self:start}
  /* El texto se centra, no se pega arriba. Pegarlo tenia sentido cuando la
     foto era el doble de alta y habia trecho que acompanar; ahora sobran
     247 px y lo unico que hacia era dejar ese blanco debajo del texto.
     Centrado hereda del .lp-duo de siempre, que es lo que ya hace el resto
     de la pagina. */
}

/* ===== BANDAS A SANGRE ===== */
.lp-sangre{position:relative;width:100%;background:var(--navy)}
.lp-sangre img{display:block;width:100%;height:auto}
.lp-sangre figcaption{width:min(100% - var(--lp-lado)*2, var(--lp-ancho));
  margin:16px auto 0;font-size:.86rem;line-height:1.6;color:var(--soft)}

/* ===== ANCHO TÉCNICO =====
   Para tablas y datos: más ancho que la columna de lectura, más estrecho
   que las composiciones panorámicas. */
.lp-tecnico{width:min(100% - var(--lp-lado)*2, var(--lp-tecnico));
  margin-inline:auto}

/* ===== CTA =====
   Geometría del .btn que ya existe: versalitas, letter-spacing, esquinas
   rectas. Dos jerarquías: uno relleno, otro fileteado. */
.lp-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.lp-cta{display:inline-block;font-family:var(--body);font-weight:400;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 30px;text-decoration:none;white-space:nowrap;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.lp-cta-1{background:var(--navy);color:var(--cream);border:1px solid var(--navy)}
.lp-cta-1:hover{background:var(--gold-deep);border-color:var(--gold-deep)}

/* EL CTA EN UN TELEFONO ESTRECHO. .lp-cta lleva white-space:nowrap, que le
   prohibe partirse, y en la seccion de los lotes el hueco es 40 px mas
   angosto que en el resto. A 320 px el boton se salia en los tres idiomas:
   el ingles 64 px, el frances 53, el español 4. No es cosa de la traduccion.

   La salida del oficio no es achicar la letra ni truncar con puntos
   suspensivos --Peninsula, Aman y Christie's no hacen ni lo uno ni lo otro,
   y las tres mantienen en el movil el mismo cuerpo que en escritorio-- sino
   que el boton deje de abrazar su texto y pase a ocupar la columna. El
   sistema de diseño del gobierno de EE UU lo dicta asi: ancho completo por
   debajo del corte, el principal encima del secundario, y por encima del
   corte vuelven a su ancho natural. Nuestro orden en el HTML ya es ese.

   El corte va en 440 y no en 400 porque un iPhone Pro Max mide 430: con el
   corte mas bajo, el telefono grande enseñaba los botones en fila y el normal
   apilados, dos caras distintas de la misma pagina en dos telefonos de la
   misma familia. A 440 todos los telefonos en vertical caen del mismo lado y
   las tabletas se quedan fuera, que es donde vuelve a tener sentido la fila.

   Debajo de 440 px, entonces: el grupo se apila, cada boton ocupa el ancho
   y el texto ya puede partirse, que es la red de seguridad: asi no vuelve a
   salirse por mucho que crezca una etiqueta o entre un idioma nuevo. */
@media (max-width:440px){
  .lp-ctas{flex-direction:column;align-items:stretch}
  .lp-cta{display:block;width:100%;white-space:normal;text-align:center;
    line-height:1.5;padding:15px 22px}
}
.lp-cta-2{background:transparent;color:var(--navy);border:1px solid var(--rule)}
.lp-cta-2:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.lp-cta:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
/* Sobre navy se invierten. */
.navy .lp-cta-1,.lp-hero .lp-cta-1{background:var(--cream);color:var(--navy);
  border-color:var(--cream)}
.navy .lp-cta-1:hover,.lp-hero .lp-cta-1:hover{background:var(--gold);
  border-color:var(--gold)}
.navy .lp-cta-2,.lp-hero .lp-cta-2{color:var(--cream);
  border-color:rgba(250,247,242,.42)}
.navy .lp-cta-2:hover,.lp-hero .lp-cta-2:hover{border-color:var(--gold);
  color:var(--gold)}
/* El de la barra de capítulos, más pequeño. */
.lp-caps .lp-cta{font-size:10px;padding:8px 16px;
  background:transparent;color:var(--cream);border:1px solid var(--gold)}
.lp-caps .lp-cta:hover{background:var(--gold);color:var(--navy)}

/* ===== HUECO DE FOTOGRAFÍA =====
   Marca dónde va cada imagen y con qué encargo. No se publica con el
   hueco visible: es un andamio para decidir con Azucena. */
/* La pelicula y la foto ocupan el sitio que ocupaban los huecos de encargo.
   El realce del video es el mismo que ya usaba el hero: levanta luz y color
   sin volver a codificar el archivo. */
.lp-foto{margin:0}
/* ---------- Croquis sobre la foto, en Documentacion ----------
   Mismo lenguaje que el croquis de "Los cuatro lotes": linea crema, sombra
   suave para que no se pierda sobre el verde, y el numero en la Cormorant.
   Aqui va solo el contorno, las tres divisorias y los cuatro numeros: en un
   hueco de 491 px las cotas y los rotulos de calle no se leerian.
   La foto sigue siendo un <img> --y no un <image> dentro del SVG-- para no
   perder loading="lazy": esta al final de la pagina y pesa 595 KB. */
/* Marco de cualquier figura que lleve el "+". Envuelve SOLO la imagen.
   Anclarlo a la figura lo dejaba
   encima del pie, porque el pie tambien vive dentro de la figura. */
.lp-marco{position:relative;line-height:0}
.cr{position:absolute;inset:0;width:100%;height:100%;display:block}
.cr-out{fill:none;stroke:#faf7f2;stroke-width:4;stroke-linejoin:round}
.cr-div{fill:none;stroke:#faf7f2;stroke-opacity:.85;stroke-width:2.6}
/* El "+" para ampliar. Hereda .lp-mk, que es la marca del hero, y solo
   cambia donde se pone: sin rotulo ni filete, apoyado en la esquina. Las
   dos medidas se fijan en px porque las del hero van en cqw y aqui no hay
   contenedor de consulta que las sostenga. */
.lp-mk-lupa{left:auto;top:auto;right:14px;bottom:14px;transform:none;
  --mk-punto:19px;--mk-aro:28px;padding:9px;opacity:1;animation:none}
.cr-num{font-family:"Cormorant Garamond",Georgia,serif;font-size:62px;
  font-weight:400;fill:#faf7f2;text-anchor:middle;dominant-baseline:middle}
.lp-foto img{display:block;width:100%;height:auto}

.lp-film{position:relative;margin:0;overflow:hidden;background:var(--navy);aspect-ratio:16/9}
.lp-film-v{display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.04) saturate(1.08) contrast(1.02)}
.lp-film-play{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:rgba(12,29,53,.55);border:1px solid rgba(250,247,242,.5);
  color:var(--cream);padding:13px 22px;
  font-family:var(--body);font-size:.66rem;letter-spacing:2.6px;text-transform:uppercase;
  transition:background .3s ease,border-color .3s ease}
.lp-film-play[hidden]{display:none}
.lp-film-play:hover,.lp-film-play:focus-visible{background:rgba(12,29,53,.75);border-color:var(--gold)}
.lp-film-play:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lp-film-play svg{width:15px;height:15px;flex:0 0 auto}

/* ===== VOLVER ARRIBA =====
   Deja de ser un boton con rotulo. Con su filete dorado, sus versalitas y su
   fondo navy se leia como una llamada a la accion, y competia con CONSULTAR
   y VER LOS LOTES, que son los dos unicos que deben pedir algo.
   Ahora es un disco crema con la flecha en navy: el mismo par de colores que
   la marca del hero, y sin una gota de dorado, que era lo que mas cantaba.
   Sobre las secciones navy se recorta solo; sobre las claras lo sostienen el
   filete y una sombra baja. Al pasar por encima se invierte, que es senal
   suficiente de que se puede pulsar. */
.lp-arriba{position:fixed;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);
  z-index:35;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--cream);color:var(--navy);
  border:1px solid rgba(12,29,53,.14);
  box-shadow:0 2px 10px rgba(12,29,53,.13);
  text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .35s ease,visibility .35s,transform .35s ease,
             background-color .3s ease,color .3s ease,border-color .3s ease}
/* .lp-arriba se retiro del HTML el 22-09-2026 (la barra de capitulos hace ese
   trabajo). Las reglas se dejan por si vuelve; no pesan y no pintan nada. */
.lp-arriba[data-visible]{opacity:1;visibility:visible;transform:none}
.lp-arriba:hover{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.lp-arriba:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lp-arriba svg{width:11px;height:13px;stroke:currentColor;stroke-width:1.6;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
/* El rotulo se queda, pero solo para quien navega a oidas: 44 px es el
   minimo de area tactil, asi que no hace falta relleno ni palabra. */
.lp-arriba span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* CTA persistente. Es la UNICA llamada de venta de la pagina: el header lleva
   a reservas --otro negocio-- y los botones del cuerpo se retiraron el
   22-09-2026. El formulario vive al 88% de la pagina, asi que sin este boton
   habria que recorrerla entera para poder escribir.

   NACE VISIBLE y el script solo lo oculta. Al reves --nacer oculto y que JS lo
   muestre-- un fallo del script dejaria la pagina sin ninguna via de contacto.

   Sin precio a proposito: una cifra fija en pantalla todo el rato es justo lo
   que se probo y se descarto --delata necesidad--. El precio ya va en la
   entrada del hero, y filtra mejor en el anuncio, antes de pagar el clic. */
.lp-fijo{position:fixed;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);
  z-index:35;display:inline-block;
  font-family:"Jost";font-weight:400;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding:14px 26px;
  background:var(--navy);color:var(--cream);text-decoration:none;
  border:1px solid var(--navy);
  box-shadow:0 2px 14px rgba(12,29,53,.18);
  opacity:1;visibility:visible;transform:none;
  transition:opacity .35s ease,visibility .35s,transform .35s ease,
             background-color .3s ease,border-color .3s ease}
.lp-fijo[data-oculto]{opacity:0;visibility:hidden;transform:translateY(8px)}
/* Solo cuando el boton pasa por delante de un bloque navy: ahi un borde navy
   lo deja sin contorno, flotando como texto suelto. Sobre crema o sobre
   fotografia el propio bloque navy ya se recorta contra el fondo y el filete
   sobra. Lo pone el script, que es quien sabe que hay detras de un fijo. */
.lp-fijo[data-navy]{border-color:var(--gold)}
.lp-fijo:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.lp-fijo:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:560px){
  .lp-fijo{font-size:11px;padding:13px 20px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  .lp-fijo{transition:opacity .01s linear}
}

/* ===== RITMO VERTICAL =====
   Su sistema pide ritmo irregular: que no midan todas lo mismo es
   justamente lo que evita el aire de plantilla. */
.lp-cap{padding:clamp(64px,7vw,116px) 0}
.lp-cap.lp-apretado{padding:clamp(46px,5vw,78px) 0}
.lp-cap.lp-suelto{padding:clamp(84px,9vw,150px) 0}

/* La página vieja limitaba .shell a 1180. Las secciones que se quedan
   como estaban se ensanchan a la nueva medida técnica. */
.lp-cap .shell{max-width:var(--lp-tecnico)}

/* ===== reventón de rejilla en móvil =====
   Los hijos de una rejilla llevan min-width:auto, así que no encogen por
   debajo de su contenido mínimo. En el bloque de consultas ese mínimo es
   sales@pedasioceanproperties.com -31 caracteres sin punto de corte-, que
   mide 366px y empujaba la página a 394 en una ventana de 375.
   El efecto colateral era una tira clara al lado de la foto del hero,
   porque la imagen sí medía 375 y el documento 394.
   Se arregla dejando que los hijos encojan y que el correo parta. */
.lp-cap .grid2 > *{min-width:0}
.lp-cap .via-v,
.lp-cap .form input,
.lp-cap .form textarea{overflow-wrap:anywhere}