/* ═══════════════════════════════════════════════════════════════
   Costa Sacbé · Masterplan vivo — RÜM Showroom

   Lenguaje: místico y salvaje. Champagne sobre tinta de crepúsculo,
   niebla de laguna y hueso suave. Tipografía de display en Marcellus
   (serif elegante) con Outfit para la UI.

   Sistema de forma: lo interactivo es canto de río / semilla — radios
   asimétricos, nunca píldora. Los paneles siguen en 18px. Cada familia
   de botón (CTA, chip, dock, icono) tiene su propia irregularidad, y
   los hermanos se desfasán con nth-child para que no parezcan troquel.

   HORIZONTAL SIEMPRE. La ortofoto pide ancho: en retrato los lotes se
   vuelven ilegibles, así que se pide girar el dispositivo.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Suelo: crepúsculo de selva — verde oscuro, no azul */
  --ink:#07110C;
  --ink-2:#0F1C16;

  /* Tinta */
  --paper:#FCFBF8;          /* blanco de rótulo, solo para la marca */
  --bone:#E9E4D8;
  --bone-dim:#A8A296;
  --muted:#6F7A78;

  /* Acento: champagne. --coral se conserva como alias para no romper
     selectores existentes; el barro es su hermano apagado. */
  --accent:#C4A574;
  --accent-rgb:196,165,116;
  --coral:var(--accent);
  --coral-ink:#14100A;      /* texto sobre champagne, ~7:1 */
  --clay:#8B7355;           /* apartado, y relleno de barra retenida */
  --smoke:#55605C;
  --mist:#7D9A94;           /* laguna suave, solo velos */
  /* Trazo que recorre el filo: negro mate, sin emisión */
  --trace-glow:#000000;
  --trace-glow-soft:#1A1A1A;
  --trace-glow-rgb:0,0,0;

  --line:rgba(233,228,216,.12);
  --line-soft:rgba(233,228,216,.06);

  --display:"Marcellus","Optima",Georgia,serif;
  --ui:"Outfit",ui-sans-serif,system-ui,sans-serif;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.22,.8,.28,1);
  --ease-mist:cubic-bezier(.33,.1,.2,1);
  --ease-wild:cubic-bezier(.34,1.4,.46,1);

  --col:352px;               /* ancho de la columna izquierda */
  --gut:30px;                /* margen del cromo al borde */
  --top:64px;                /* despeje del botón "Showroom" de la plataforma */
  --r-panel:18px;            /* radio de panel */

  /* Semilla alargada: CTA, chips, dock, backs. Em relativo al tipo del botón. */
  --r-pill:1.2em 2.7em 1.45em 2.4em / 2.35em 1.25em 2.55em 1.4em;
  --r-pill-b:2.5em 1.15em 2.7em 1.35em / 1.3em 2.45em 1.2em 2.6em;
  --r-pill-c:1.05em 2.2em 1.8em 2.0em / 2.1em 1.55em 1.9em 1.7em;
  /* Guijarro: iconos cerrar / navegar — no es círculo. */
  --r-pebble:64% 36% 58% 42% / 42% 62% 38% 58%;
  --r-pebble-b:38% 62% 44% 56% / 58% 40% 60% 42%;
  /* Vaina: cáscara del dock. */
  --r-pod:2.6em 1.4em 2.2em 1.8em / 1.5em 2.4em 1.6em 2.1em;
}

*{box-sizing:border-box}
html,body{height:100%}

/* ── Iconos ──
   El sprite solo guarda las formas, no se pinta. Los iconos heredan el color
   del texto que acompañan y llevan el mismo grosor que las divisorias, para
   que no pesen más que la palabra a la que van pegados. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:1em;height:1em;flex:none;display:block;
  fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

/* ── Trazo mate que recorre el borde ──
   Un arco negro gira dentro de un cónico y dos máscaras lo recortan al
   grosor del filo: una cubre la caja de contenido y otra la de borde, y solo
   sobrevive lo que queda entre ambas. El ángulo se declara con @property
   porque una variable solo se puede animar si el navegador sabe que es un
   ángulo — sin eso el giro salta de 0 a 360 sin recorrido.

   Se hace con cónico y no siguiendo un offset-path rectangular, que sería el
   trazo exacto del borde, porque esto corre en el navegador del cliente en
   una junta de ventas y el cónico lo entiende cualquiera desde 2023. */
@property --trace{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --trace-c{syntax:"<color>";initial-value:#000000;inherits:false}

.trace{position:relative}
.trace::before{
  content:"";position:absolute;inset:0;z-index:0;
  border-radius:inherit;padding:1.6px;
  /* Un punto mate, no una estela. La cola larga se leía como un barrido y
     ensuciaba el filo; un arco corto se lee como la mancha que viaja por
     el borde, sin emisión ni halo. */
  background:conic-gradient(from var(--trace),
    transparent 0deg,
    transparent 330deg,
    rgba(var(--trace-glow-rgb),.35) 342deg,
    var(--trace-c) 352deg,
    var(--trace-glow-soft) 357deg,
    var(--trace-c) 359deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  filter:none;
  pointer-events:none;
  animation:traceRun 5s linear infinite;
}
@keyframes traceRun{to{--trace:360deg}}

/* En el botón relleno la luz corre por fuera. Probado por dentro y en blanco:
   1,6 px de blanco sobre champagne no se ven a un metro de la pantalla, y el
   champagne sobre champagne menos. Fuera del filo cae sobre el fondo oscuro,
   que es donde este acento sí contrasta. */
.trace--outer::before{inset:-3px;padding:2.2px}

/* En lo secundario la luz se enciende al apuntar: siete botones latiendo a la
   vez serían ruido, y el reposo es la mitad de este lenguaje. */
.trace--hover::before{
  opacity:0;animation-play-state:paused;
  transition:opacity .4s var(--ease-mist);
}
.trace--hover:hover::before,
.trace--hover:focus-visible::before{opacity:1;animation-play-state:running}

/* Un botón apagado no invita a nada, así que tampoco brilla */
.trace:disabled::before{display:none}

@media (prefers-reduced-motion:reduce){
  .trace::before{animation:none;background:none}
}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ui);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}
h1,h2{margin:0;font-weight:400}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* Grano de película sobre todo, en capa fija y sin eventos: da el aire
   analógico sin repintar en cada movimiento. */
body::after{
  content:"";
  position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.04;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mockup-badge{
  position:fixed;top:calc(16px + var(--safe-t));right:calc(16px + var(--safe-r));z-index:180;
  font:400 9px/1 var(--ui);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(241,232,220,.46);background:rgba(12,17,14,.6);
  border:1px solid var(--line-soft);border-radius:var(--r-pill-c);padding:8px 15px;
  backdrop-filter:blur(10px);pointer-events:none;
}

/* ───────────────── Escenario ───────────────── */

.stage{position:fixed;inset:0;z-index:1;background:var(--ink)}
.plan{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Velo: asienta la columna izquierda y deja limpio el resto del encuadre */
.veil{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(to right, rgba(7,11,13,.84) 0%, rgba(7,11,13,.32) 30%, transparent 52%),
    linear-gradient(to bottom, rgba(7,11,13,.52) 0%, transparent 20%, transparent 72%, rgba(7,11,13,.72) 100%);
}

/* ── Capas del plano dibujado (respaldo, sin material del sitio) ── */
.l-water path.sea{fill:url(#gWater)}
.l-water path.surf{fill:none;stroke:rgba(120,168,158,.5);stroke-width:1}
.l-water path.swell{fill:none;stroke:rgba(120,168,158,.2);stroke-width:.8}

.l-contours path{fill:none;stroke:rgba(241,232,220,.1);stroke-width:.8}
.l-contours path.major{stroke:rgba(241,232,220,.2);stroke-width:1.1}

.l-arroyo path.bed{fill:none;stroke:rgba(120,152,150,.46);stroke-width:3;stroke-linecap:round}
.l-arroyo path.bank{fill:none;stroke:rgba(120,152,150,.18);stroke-width:.9;stroke-dasharray:3 6}

.l-roads path{
  fill:none;stroke:rgba(241,232,220,.24);stroke-width:22;
  stroke-linecap:round;stroke-linejoin:round;
}
.l-roads path.axis{stroke:rgba(12,17,14,.92);stroke-width:17}
.l-roads path.dash{stroke:rgba(241,232,220,.3);stroke-width:1.2;stroke-dasharray:10 13}

.l-notes text{font:400 10px/1 var(--ui);letter-spacing:.3em;fill:rgba(241,232,220,.32);text-transform:uppercase}
.l-notes path,.l-notes line{stroke:rgba(241,232,220,.3);fill:none;stroke-width:1}
.l-notes .n-glyph{fill:rgba(241,232,220,.46);stroke:none}
.l-notes .n-sea{font-size:12px;letter-spacing:.46em;fill:rgba(120,168,158,.34)}

/* ── Lotes ── */
.lot{cursor:pointer;transition:opacity .45s var(--ease)}
.lot .fill{
  fill:rgba(241,232,220,.045);
  stroke:rgba(241,232,220,.28);
  stroke-width:1.4;stroke-linejoin:round;
  transition:fill .3s var(--ease),stroke .3s var(--ease),stroke-width .3s var(--ease);
}
.lot .halo{fill:none;stroke:var(--coral);stroke-width:3.6;opacity:0;transition:opacity .35s var(--ease)}

.lot[data-status="disponible"] .fill{fill:rgba(var(--accent-rgb),.16);stroke:rgba(var(--accent-rgb),.7)}
.lot[data-status="apartado"] .fill{fill:rgba(200,121,77,.08);stroke:rgba(200,121,77,.52);stroke-dasharray:5 4}
.lot[data-status="vendido"] .fill{fill:rgba(28,38,32,.46);stroke:rgba(89,99,92,.72)}

.lot.is-hot .fill{fill:rgba(var(--accent-rgb),.32);stroke:var(--coral);stroke-width:2.2}
.lot.is-sel .halo{opacity:1}
.lot.is-sel .fill{fill:rgba(var(--accent-rgb),.44);stroke:var(--coral);stroke-width:2.4}

.lot.is-off{opacity:.1;pointer-events:none}
.lot.is-off .fill{fill:rgba(241,232,220,.02)}

@keyframes lotIn{
  from{opacity:0;transform:scale(.94);filter:blur(4px)}
  to{opacity:1;transform:scale(1);filter:blur(0)}
}
.lot.anim-in{animation:lotIn .85s var(--ease-mist) both;transform-box:fill-box;transform-origin:center}

/* ── Etiquetas de lote ── */
.l-tags text{
  font:500 11px/1 var(--ui);letter-spacing:.1em;
  fill:rgba(241,232,220,.5);text-anchor:middle;pointer-events:none;
  transition:fill .3s var(--ease),opacity .3s var(--ease);
}
.l-tags text.on{fill:var(--coral)}
.l-tags text.off{opacity:.08}

/* ── Ortofoto ── */
.l-photo image{opacity:0;transition:opacity .7s var(--ease)}
body[data-photo="on"] .l-photo image{opacity:.62}
body[data-photo="on"] .l-contours,
body[data-photo="on"] .l-veg{opacity:.3}
body[data-photo="on"] .l-water path.sea{opacity:0}

/* ── Sitio real: la ortofoto es el plano ──
   La aérea limpia es la base y el plano surveyed es la capa alterna del
   botón. Con foto de fondo el dibujo sintético estorba, así que se apaga. */
.site-photo,.site-survey{pointer-events:none}
body[data-site="real"] .l-photo image.site-photo{opacity:1}
body[data-site="real"] .l-photo image.site-survey{opacity:0;transition:opacity .5s var(--ease)}
body[data-site="real"][data-survey="on"] .l-photo image.site-survey{opacity:1}
body[data-site="real"] #layerGround,
body[data-site="real"] #layerContours,
body[data-site="real"] #layerVeg,
body[data-site="real"] #layerWater,
body[data-site="real"] #layerArroyo,
body[data-site="real"] #layerRoads,
body[data-site="real"] #layerNotes{display:none}

/* Sobre foto el vector se pierde: el terreno tiene tanto contraste como el
   trazo. Se baja la foto con un velo verde y se suben trazos y etiquetas.
   Ese velo va cocido en el JPG, no aquí: el zoom anima el viewBox del SVG, así
   que un filter sobre la ortofoto a pantalla completa se recalculaba en cada
   cuadro de cada vuelo de cámara. Cocido no cuesta nada y el archivo pesa la
   mitad, porque se comprime la imagen apagada y no la clara.
   Grado original: saturate(.62) brightness(.52) contrast(1.04) hue-rotate(-10deg). */
body[data-site="real"] .lot[data-status="disponible"] .fill{
  fill:rgba(var(--accent-rgb),.26);
  stroke:rgba(255,171,156,.95);
  stroke-width:1.6;
}
body[data-site="real"] .lot[data-status="apartado"] .fill{
  fill:rgba(200,121,77,.16);
  stroke:rgba(238,222,198,.82);
  stroke-width:1.4;
}
body[data-site="real"] .lot[data-status="vendido"] .fill{
  fill:rgba(12,17,14,.55);
  stroke:rgba(150,160,152,.7);
  stroke-width:1.2;
}
body[data-site="real"] .lot.is-hot .fill{fill:rgba(var(--accent-rgb),.42);stroke:#FFF3EC;stroke-width:2.2}
body[data-site="real"] .lot.is-sel .fill{fill:rgba(var(--accent-rgb),.54);stroke:#FFF3EC;stroke-width:2.6}
body[data-site="real"] .l-tags text{
  paint-order:stroke;
  stroke:rgba(8,12,10,.74);
  stroke-width:2.6px;
  fill:rgba(255,248,240,.94);
}

/* ───────────────── Portada ───────────────── */

.cover{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--top) calc(var(--gut) + var(--safe-r)) 0 calc(var(--gut) + var(--safe-l));
  background:linear-gradient(100deg, rgba(7,11,13,.95) 0%, rgba(7,11,13,.8) 38%, rgba(7,11,13,.34) 72%, rgba(7,11,13,.14) 100%);
  transition:opacity 1.05s var(--ease-mist),transform 1.05s var(--ease-mist);
}
.cover.is-gone{opacity:0;transform:scale(1.015);pointer-events:none}

/* Portada sobre el pan del sitio: el video va detrás y el texto necesita piso. */
/* El grado del pan va cocido en el archivo, no en CSS: filtrar aquí obligaba
   a repintar la pantalla completa en cada uno de los 24 cuadros por segundo,
   y además se codificaba la imagen clara para luego apagarla — el doble de
   bits para el mismo resultado. Cocido pesa la mitad y no cuesta nada pintar.
   Grado original: saturate(.72) brightness(.48) contrast(1.05) hue-rotate(-6deg). */
.cover-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
}
.cover[data-video="on"] .cover-body{position:relative;z-index:1}
.cover[data-video="on"] .cover-meta{z-index:1}
.cover[data-video="on"]::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(100deg, rgba(7,11,13,.92) 0%, rgba(7,11,13,.55) 52%, rgba(7,11,13,.2) 100%),
    radial-gradient(ellipse at 70% 40%, rgba(125,154,148,.12), transparent 55%);
}

.cover-body{max-width:min(52ch,58vw)}
.cover-eyebrow{
  margin:0 0 22px;font:400 10px/1.4 var(--ui);letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);
}
/* El rótulo es la marca: versal fina y muy espaciada, en blanco. La serif se
   queda para los títulos de pantalla; aquí manda el aire entre letras. */
.cover-title{
  position:relative;
  font-family:var(--display);
  font-size:clamp(30px,5.6vw,92px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--paper);
  margin:0 0 26px;
  padding:.08em 0 .06em;
  white-space:nowrap;        /* los .ch son inline-block: sin esto la palabra se parte */
}
/* El acento ya no distingue por color: lo hace el trazo. */
.cover-title em{font-style:normal;font-weight:300;color:var(--paper)}

/* El rótulo no se representa: aparece y ya. Lo único que hace es esperar a que
   la fuente cargue para no dar el tirón del cambio de tipo. */
.cover-title{animation:titleIn .7s ease-out both}

/* ── Letras que se empapan ──
   La entrada no sube ni rebota: cada letra aparece como tinta ganando el
   papel. La mascara son dos manchas redondas de borde blando que crecen desde
   un punto propio de cada letra, asi el frente de avance es irregular y no un
   circulo perfecto. El desenfoque que se resuelve hace el resto.

   La animacion se APLICA con is-in, no se deja pausada esperandola: un rotulo
   pausado en su fotograma cero es un rotulo invisible, y bastaria un fallo de
   JS para perder el titulo. Sin la clase, el titulo simplemente esta ahi.

   farthest-corner (no closest-side): en una caja estrecha de letra, closest-side
   mide el radio por el ancho y la mancha nunca cubre el asta, aunque crezca.
   Al 100% la mascara se retira del todo: si se queda puesta, el borde suave
   sigue comiendo la mitad superior. */
.cover-title .ch{display:inline-block;padding:.06em .01em}
.cover-title .chi{display:inline-block;transform-origin:50% 88%}

.cover-title.is-in .ch{
  animation:chBleed 1.5s cubic-bezier(.26,.68,.18,1) both;
  animation-delay:calc(var(--i) * 95ms);
}
.cover-title.is-in .chi{
  animation:chSway 8s ease-in-out infinite;
  animation-delay:calc(2.1s + var(--i) * 150ms);
}

@keyframes chBleed{
  0%{
    opacity:0;
    filter:blur(7px);
    -webkit-mask-image:
      radial-gradient(farthest-corner circle at var(--bx,50%) var(--by,72%),
        #000 0%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%),
      radial-gradient(farthest-corner circle at calc(var(--bx,50%) + 18%) calc(var(--by,72%) - 28%),
        #000 0%, #000 36%, rgba(0,0,0,.45) 62%, transparent 100%);
    mask-image:
      radial-gradient(farthest-corner circle at var(--bx,50%) var(--by,72%),
        #000 0%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%),
      radial-gradient(farthest-corner circle at calc(var(--bx,50%) + 18%) calc(var(--by,72%) - 28%),
        #000 0%, #000 36%, rgba(0,0,0,.45) 62%, transparent 100%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:0% 0%;mask-size:0% 0%;
  }
  38%{opacity:1;filter:blur(2.4px)}
  /* Misma mascara hasta aqui: mask-image no interpola y, si solo esta en 0%
     y 100%, el motor la apaga a mitad de camino. */
  92%{
    opacity:1;
    filter:blur(0);
    -webkit-mask-image:
      radial-gradient(farthest-corner circle at var(--bx,50%) var(--by,72%),
        #000 0%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%),
      radial-gradient(farthest-corner circle at calc(var(--bx,50%) + 18%) calc(var(--by,72%) - 28%),
        #000 0%, #000 36%, rgba(0,0,0,.45) 62%, transparent 100%);
    mask-image:
      radial-gradient(farthest-corner circle at var(--bx,50%) var(--by,72%),
        #000 0%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%),
      radial-gradient(farthest-corner circle at calc(var(--bx,50%) + 18%) calc(var(--by,72%) - 28%),
        #000 0%, #000 36%, rgba(0,0,0,.45) 62%, transparent 100%);
    -webkit-mask-size:240% 240%;mask-size:240% 240%;
  }
  100%{
    opacity:1;
    filter:blur(0);
    -webkit-mask-image:none;
    mask-image:none;
  }
}

/* Un balanceo minimo: la tinta seca, no se agita. */
@keyframes chSway{
  0%,100%{transform:none}
  30%{transform:rotate(-1.1deg) translateY(2px)}
  66%{transform:rotate(1.3deg) translateY(-2px)}
}

/* ── Luz de dosel ──
   Manchas de sol que se arrastran despacio sobre todo el escenario. Capa fija,
   sin eventos y animando solo transform: es lo que hace que el plano se sienta
   bajo árboles y no bajo un foco. */
.canopy{
  position:fixed;inset:-12%;z-index:2;pointer-events:none;
  mix-blend-mode:screen;opacity:.55;
  background:
    radial-gradient(34% 28% at 20% 16%, rgba(214,255,196,.15), transparent 70%),
    radial-gradient(28% 24% at 70% 32%, rgba(196,244,186,.12), transparent 70%),
    radial-gradient(42% 32% at 46% 78%, rgba(168,226,176,.10), transparent 72%),
    radial-gradient(22% 20% at 86% 62%, rgba(206,250,198,.09), transparent 70%);
  animation:canopyDrift 27s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes canopyDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.4%,-1.8%,0) scale(1.07)}
  100%{transform:translate3d(-2%,2.2%,0) scale(1.02)}
}
/* Sobre la vista a nivel de ojo y los servicios el dosel ya está en la imagen */
body[data-mode="vista"] .canopy,
body[data-mode="servicios"] .canopy{opacity:0;transition:opacity .5s var(--ease)}
@keyframes titleIn{
  from{opacity:0}
  to{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .cover-title,
  .cover-title.is-in .ch,
  .cover-title.is-in .chi{animation:none}
}
.cover-lead{
  margin:0 0 30px;max-width:42ch;
  font-size:clamp(12.5px,1.1vw,15px);line-height:1.7;font-weight:300;
  color:var(--bone-dim);
}
.cover-lead b{color:var(--bone);font-weight:500}

.cover-go{
  align-self:flex-start;
  background:var(--accent);color:var(--coral-ink);
  font:500 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  padding:17px 32px;border-radius:var(--r-pill);
  transition:transform .5s var(--ease-wild),box-shadow .45s var(--ease-mist),filter .45s var(--ease-mist);
}
.cover-go:hover{
  transform:translateY(-2px) rotate(-.7deg) scale(1.02);
  box-shadow:0 18px 40px -16px rgba(var(--accent-rgb),.55);
  filter:brightness(1.06);
}
.cover-go:active{transform:translateY(0) rotate(-.2deg) scale(.985)}

.cover-meta{
  position:absolute;left:calc(var(--gut) + var(--safe-l));
  bottom:calc(28px + var(--safe-b));
  display:flex;gap:clamp(22px,3.6vw,58px);flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--line-soft);
  min-width:min(580px,74vw);
}
.cover-meta span{display:block;font:400 9px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.cover-meta b{display:block;margin-top:7px;font-family:var(--display);font-weight:400;font-size:16px;color:var(--bone)}

/* ───────────────── App ───────────────── */

.app{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  opacity:0;transition:opacity .7s var(--ease) .1s;
}
.app.is-live{opacity:1}
.app > *{pointer-events:auto}

.panel-left{
  position:absolute;top:calc(var(--top) + var(--safe-t));
  left:calc(var(--gut) + var(--safe-l));width:var(--col);
}
/* Sobre foto, el panel necesita piso propio para leerse. */
body[data-site="real"] .panel-left{position:relative;isolation:isolate}
body[data-site="real"] .panel-left::before{
  content:"";position:absolute;inset:-28px -46px -44px -28px;z-index:-1;
  background:linear-gradient(115deg, rgba(7,17,12,.94) 0%, rgba(7,17,12,.72) 44%, transparent 100%);
  pointer-events:none;
}

/* ── Membrete: monograma y nombre, al modo del rótulo de marca ── */
.masthead{display:flex;align-items:center;gap:13px}
.mh-mark{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border:1px solid rgba(var(--accent-rgb),.55);border-radius:var(--r-pebble);
  font-family:var(--display);font-size:14px;color:var(--coral);
}
/* Misma marca que la portada, en pequeño: versal fina y espaciada */
.mh-name{
  flex:1;font-family:var(--ui);font-weight:200;font-size:15px;line-height:1.2;
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper);
}
.mh-name i{
  display:block;margin-top:6px;font:400 8.5px/1 var(--ui);font-style:normal;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
.mh-photo{
  flex:none;font:400 9px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);
  border:1px solid var(--line);border-radius:var(--r-pill-b);padding:9px 15px;
  background:rgba(12,17,14,.55);backdrop-filter:blur(8px);
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .4s var(--ease-wild);
}
.mh-photo:hover{color:var(--bone);border-color:rgba(241,232,220,.32);transform:rotate(.8deg)}
body[data-photo="on"] .mh-photo{color:var(--coral-ink);background:var(--coral);border-color:var(--coral)}

/* ── Contadores ── */
.counters{display:flex;gap:2px;margin-top:26px}
.ct{
  flex:1;text-align:left;padding:13px 0 14px;
  border-top:1px solid var(--line-soft);
  transition:border-color .3s var(--ease);
}
.ct b{
  display:block;font-family:var(--display);font-size:clamp(26px,2.5vw,36px);line-height:1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.ct span{
  display:block;margin-top:7px;font:400 8px/1 var(--ui);letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.ct[data-status="disponible"] b{color:var(--coral)}
.ct[data-status="apartado"] b{color:var(--clay)}
.ct[data-status="vendido"] b{color:var(--smoke)}
.ct.is-on{border-top-color:var(--coral)}
.ct.is-on span{color:var(--bone-dim)}
.ct--static{cursor:default}
.ct--static b{color:var(--bone)}

/* ── Fases ──
   Fuera de su modo NO ocupa flujo: si solo se apagara con opacity, seguiría
   inflando la columna y en pantallas bajas empujaría al dock y al rail.
   El movimiento lo pone el llenado de las barras, no la entrada del bloque. */
.phases{display:none;margin-top:34px}
.phases.is-live{display:block}
.ph-head{font:400 8.5px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.ph-row{margin-bottom:17px}
.ph-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.ph-name{font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.ph-name i{
  font-style:normal;color:var(--muted);font-family:var(--ui);
  font-size:8px;letter-spacing:.22em;margin-left:11px;
}
.ph-pct{font-size:10.5px;font-weight:300;font-variant-numeric:tabular-nums;color:var(--bone-dim)}
.ph-bar{height:2px;background:rgba(241,232,220,.1);position:relative;overflow:hidden;border-radius:2px}
.ph-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--coral);transition:width 1.1s var(--ease);border-radius:2px}
.ph-fill.held{background:var(--clay);opacity:.62}

/* ── Rail de filtros: panel de barro que entra por la izquierda ── */
.rail{
  position:absolute;left:calc(var(--gut) + var(--safe-l));
  bottom:calc(92px + var(--safe-b));width:var(--col);
  background:
    linear-gradient(150deg, rgba(30,38,28,.72) 0%, rgba(16,28,20,.88) 58%),
    rgba(8,18,13,.9);
  backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:var(--r-panel);
  padding:22px 22px 16px;
  /* Techo propio: con los chips envueltos en pantallas bajas el rail crecía
     hasta meterse debajo del botón "Showroom" de la plataforma. */
  max-height:calc(100dvh - 150px);overflow-y:auto;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.9);
  transform:translateX(calc(-100% - var(--gut) - 14px));
  opacity:0;
  transition:transform .55s var(--ease),opacity .35s var(--ease);
}
.rail.is-open{transform:none;opacity:1}
.fgroup{margin-bottom:18px}
.flabel{display:block;font:400 8px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font:400 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--bone-dim);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .35s var(--ease-wild);
}
.chip:nth-child(3n+2){border-radius:var(--r-pill-b)}
.chip:nth-child(3n+3){border-radius:var(--r-pill-c)}
.chip:hover{border-color:rgba(241,232,220,.34);color:var(--bone);transform:rotate(-1deg) scale(1.03)}
.chip:active{transform:scale(.97) rotate(0)}
.chip.is-on{background:var(--coral);border-color:var(--coral);color:var(--coral-ink)}
.rail-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:10px;font-weight:300;color:var(--muted);letter-spacing:.06em;
}
.rail-reset{
  font:400 9px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--coral);
  border:1px solid rgba(var(--accent-rgb),.35);border-radius:var(--r-pill-c);
  padding:8px 14px;
  transition:background .25s var(--ease),color .25s var(--ease),transform .35s var(--ease-wild);
}
.rail-reset:hover{background:rgba(var(--accent-rgb),.14);transform:rotate(.9deg)}

/* ── Dock: vaina flotante ──
   Cada semilla lleva la misma luz de borde que el CTA de portada. En la
   activa (champagne) corre por fuera — champagne sobre champagne no se ve —
   y en las demás también por fuera, porque el fondo del dock es oscuro. Los
   delays van desfasados para que no giren al unísono. */
.dock{
  position:absolute;left:calc(var(--gut) + var(--safe-l));
  bottom:calc(26px + var(--safe-b));
  display:flex;gap:7px;padding:7px 8px;
  background:rgba(8,18,13,.78);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-pod);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.85);
}
.dk{
  position:relative;isolation:isolate;
  padding:11px 18px;border-radius:var(--r-pill);
  font:400 9.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease),background .3s var(--ease),transform .4s var(--ease-wild);
}
.dock .dk:nth-child(odd){border-radius:var(--r-pill-b)}
.dock .dk:nth-child(3n){border-radius:var(--r-pill-c)}
.dk > span{position:relative;z-index:1}
.dk:hover{color:var(--bone);transform:rotate(-.8deg) translateY(-1px)}
.dk.is-on{background:var(--coral);color:var(--coral-ink)}
.dk.is-on:hover{transform:rotate(.5deg) translateY(-1px)}

/* Misma luz que .trace--outer del CTA: fuera del filo, sobre el fondo oscuro */
.dk.trace::before{inset:-3px;padding:2.2px}
.dock .dk:nth-child(1).trace::before{animation-delay:0s}
.dock .dk:nth-child(2).trace::before{animation-delay:-.7s}
.dock .dk:nth-child(3).trace::before{animation-delay:-1.4s}
.dock .dk:nth-child(4).trace::before{animation-delay:-2.1s}
.dock .dk:nth-child(5).trace::before{animation-delay:-2.8s}
.dock .dk:nth-child(6).trace::before{animation-delay:-3.5s}
.dock .dk:nth-child(7).trace::before{animation-delay:-4.2s}

/* ── Expediente ── */
.dossier{
  position:absolute;right:calc(var(--gut) + var(--safe-r));
  top:calc(var(--top) + var(--safe-t));
  width:min(410px,34vw);
  max-height:calc(100vh - var(--top) - var(--safe-t) - 26px - var(--safe-b));
  overflow-y:auto;
  background:
    linear-gradient(155deg, rgba(22,40,30,.9) 0%, rgba(12,24,18,.97) 56%),
    var(--ink-2);
  backdrop-filter:blur(18px);
  border:1px solid rgba(var(--accent-rgb),.32);border-radius:var(--r-panel);
  padding:26px 24px 24px;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.95);
  transform:translateX(calc(100% + var(--gut) + 18px));
  transition:transform .75s var(--ease-mist);
}
.dossier.is-open{transform:none}
.ds-close{
  position:absolute;top:16px;right:16px;
  width:34px;height:34px;border-radius:var(--r-pebble);border:1px solid var(--line);
  font-size:11px;color:var(--bone-dim);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .4s var(--ease-wild);
}
.ds-close:hover{color:var(--bone);border-color:rgba(241,232,220,.34);transform:rotate(12deg) scale(1.06)}

.ds-status{
  display:inline-block;font:400 8.5px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;
  padding:7px 13px;border-radius:var(--r-pill-c);border:1px solid currentColor;
}
.ds-status[data-s="disponible"]{color:var(--coral)}
.ds-status[data-s="apartado"]{color:var(--clay)}
.ds-status[data-s="vendido"]{color:var(--muted)}
.ds-id{
  font-family:var(--display);font-size:clamp(36px,3.4vw,52px);line-height:1;
  letter-spacing:-.02em;margin:16px 0 7px;
}
.ds-view{margin:0 0 22px;font-size:11px;font-weight:300;color:var(--bone-dim);letter-spacing:.04em}

.ds-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;margin:0 0 20px;background:var(--line-soft)}
.ds-grid > div{background:var(--ink-2);padding:13px 0 14px}
.ds-grid dt{font:400 7.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ds-grid dd{margin:8px 0 0;font-family:var(--display);font-size:15px;font-variant-numeric:tabular-nums}

.ds-price{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  padding:17px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  margin-bottom:18px;
}
.ds-price span{font:400 8.5px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);width:100%}
.ds-price b{font-family:var(--display);font-size:clamp(28px,2.7vw,38px);line-height:1;letter-spacing:-.02em;color:var(--coral)}
.ds-price i{font-style:normal;font-size:10.5px;font-weight:300;color:var(--muted);letter-spacing:.06em}

.ds-go{
  display:block;width:100%;text-align:center;
  background:var(--coral);color:var(--coral-ink);
  font:500 10.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  padding:17px 18px;border-radius:var(--r-pill-b);
  transition:transform .4s var(--ease-wild),box-shadow .25s var(--ease);
}
.ds-go:hover{transform:translateY(-2px) rotate(.6deg);box-shadow:0 12px 30px -12px rgba(var(--accent-rgb),.7)}
.ds-go:active{transform:translateY(0) rotate(.2deg) scale(.99)}
.ds-go[disabled]{
  background:transparent;color:var(--muted);
  border:1px solid var(--line);cursor:not-allowed;
  transform:none;box-shadow:none;
}

.scrim{position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none}

/* ───────────────── Acercamiento al lote ───────────────── */

.vista{
  position:absolute;inset:0;z-index:4;
  opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease);
}
.vista.is-live{opacity:1;pointer-events:auto}
.vista-media{position:absolute;inset:0;background-size:cover;background-position:center}

/* Marcador de media pendiente: honesto, con la ficha del encuadre */
.slot{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(32px,6vw,92px);gap:18px;
  background:linear-gradient(to bottom, #101814 0%, #1B2A22 44%, #24352B 58%, #0D1310 100%);
}
.slot::before{
  content:"";position:absolute;left:0;right:0;top:58%;height:1px;
  background:rgba(241,232,220,.18);
}
.slot-tag{font:400 8.5px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--coral)}
.slot-name{
  font-family:var(--display);font-size:clamp(30px,4.2vw,56px);line-height:1.04;
  letter-spacing:-.02em;max-width:20ch;
}
.slot-spec{display:grid;gap:9px;max-width:60ch}
.slot-spec div{display:flex;gap:16px;font-size:10.5px;font-weight:300;color:var(--bone-dim)}
.slot-spec b{
  flex:none;width:92px;font-weight:400;color:var(--muted);
  letter-spacing:.18em;text-transform:uppercase;font-size:8.5px;padding-top:2px;
}
.slot-foot{
  position:absolute;left:clamp(32px,6vw,92px);bottom:24px;
  font:400 8.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

.vista-grain{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right, rgba(9,13,11,.84) 0%, rgba(9,13,11,.34) 42%, transparent 66%),
             linear-gradient(to bottom, rgba(9,13,11,.5) 0%, transparent 26%, transparent 70%, rgba(9,13,11,.8) 100%);
}
.vista-hud{
  position:absolute;left:calc(var(--gut) + var(--safe-l));
  bottom:calc(32px + var(--safe-b));max-width:min(48ch,46vw);
}
.vista-crumb{
  display:flex;align-items:center;gap:12px;
  font:400 9px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--coral);
  margin-bottom:16px;
}
.vista-crumb i{display:block;width:20px;height:1px;background:currentColor;opacity:.5}
.vista-title{
  font-family:var(--display);font-size:clamp(34px,4.6vw,66px);line-height:1.04;
  letter-spacing:-.025em;margin:0 0 14px;padding-bottom:.04em;
}
.vista-note{margin:0;font-size:12px;font-weight:300;line-height:1.7;color:var(--bone-dim)}
.vista-back{
  position:absolute;top:calc(var(--top) + var(--safe-t));left:calc(var(--gut) + var(--safe-l));
  font:400 9px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);border:1px solid var(--line);border-radius:var(--r-pill-c);
  padding:12px 19px;background:rgba(12,17,14,.66);backdrop-filter:blur(10px);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .4s var(--ease-wild);
}
.vista-back:hover{color:var(--bone);border-color:rgba(241,232,220,.34);transform:rotate(-1deg) translateX(-2px)}
.vista-back span{color:var(--coral);margin-right:7px}

/* La procedencia del encuadre, dicha en la propia pantalla. */
.vista-src{
  position:absolute;right:0;bottom:0;z-index:3;
  padding:9px 15px;
  font:400 9px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(241,232,220,.6);
  background:rgba(9,13,11,.6);
  border-radius:var(--r-panel) 0 0 0;
}

/* ───────────────── Amenidades ───────────────── */

/* Chinche sobre la ortofoto: anillo champagne, punto y rótulo con contraorden de
   trazo para que se lea sobre el dosel. */
.am{cursor:pointer}
.am .am-ring{
  fill:rgba(var(--accent-rgb),.14);stroke:var(--accent);stroke-width:1.5;
  transition:fill .45s var(--ease-mist),stroke-width .45s var(--ease-mist);
}
.am .am-dot{fill:var(--accent)}
.am .am-pulse{fill:none;stroke:var(--mist);opacity:0;transform-box:fill-box;transform-origin:center}
.am text{
  font:400 10px/1 var(--display);letter-spacing:.18em;text-transform:none;
  font-style:italic;
  text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:rgba(6,10,12,.78);stroke-width:2.8px;
  fill:rgba(233,228,216,.94);
  transition:fill .35s var(--ease-mist),opacity .35s var(--ease-mist);
}
.am:hover .am-ring,.am.is-sel .am-ring{fill:rgba(var(--accent-rgb),.38);stroke-width:2.4}
.am:hover text,.am.is-sel text{fill:var(--accent)}

@keyframes amPulse{
  0%{opacity:.45;transform:scale(1)}
  100%{opacity:0;transform:scale(2.35)}
}
.am.is-live .am-pulse{animation:amPulse 3.2s var(--ease-mist) infinite}

/* Fuera del plano las chinches estorban */
body[data-mode="fases"] .l-amen,
body[data-mode="vista"] .l-amen{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}

/* En su modo, las chinches son el sujeto: el producto se retira y ellas laten */
body[data-mode="amenidades"] .l-lots{opacity:.24;transition:opacity .5s var(--ease)}
body[data-mode="amenidades"] .l-tags{opacity:.12;transition:opacity .5s var(--ease)}
body[data-mode="amenidades"] .am-pulse{animation:amPulse 2.4s var(--ease) infinite}
body[data-mode="amenidades"] .am text{font-size:10.5px}

/* Ficha de amenidad: mismo sitio que el expediente, nunca los dos a la vez */
.amen{
  position:absolute;right:calc(var(--gut) + var(--safe-r));
  top:calc(var(--top) + var(--safe-t));
  width:min(410px,34vw);
  max-height:calc(100vh - var(--top) - var(--safe-t) - 26px - var(--safe-b));
  overflow-y:auto;
  background:
    linear-gradient(155deg, rgba(22,40,30,.9) 0%, rgba(12,24,18,.97) 56%),
    var(--ink-2);
  backdrop-filter:blur(18px);
  border:1px solid rgba(var(--accent-rgb),.32);border-radius:var(--r-panel);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.95);
  transform:translateX(calc(100% + var(--gut) + 18px));
  transition:transform .75s var(--ease-mist);
}
.amen.is-open{transform:none}
.amen-shot{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:var(--r-panel) var(--r-panel) 0 0;overflow:hidden;
  background-size:cover;background-position:center;
  background-color:#122018;
  opacity:0;transition:opacity .7s var(--ease-mist);
}
.amen-shot.is-ready{opacity:1}
.amen-shot .amen-clip{opacity:0;transition:opacity .7s var(--ease-mist)}
.amen-shot.is-ready .amen-clip{opacity:1}
/* Marcador honesto mientras no llega la foto */
.amen-slot{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:6px;padding:16px;
  background:linear-gradient(to bottom, #16211B 0%, #1E2E25 58%, #101A15 100%);
}
.amen-slot b{font:400 8px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--coral)}
.amen-slot span{font-size:10px;font-weight:300;color:var(--bone-dim);letter-spacing:.04em}
.amen-body{padding:22px 24px 24px}
.amen-kind{
  display:flex;align-items:center;gap:8px;
  font:400 8.5px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.amen-kind i{font-style:normal}
.amen-kind .ico{font-size:15px;color:var(--accent)}
.amen-name{
  font-family:var(--display);font-size:clamp(28px,2.9vw,40px);line-height:1.02;
  letter-spacing:-.02em;margin:12px 0 10px;
}
.amen-note{margin:0 0 18px;font-size:11.5px;font-weight:300;line-height:1.7;color:var(--bone-dim)}
.amen-facts{display:flex;gap:1px;background:var(--line-soft);margin-bottom:20px}
.amen-facts > div{flex:1;background:var(--ink-2);padding:12px 0 13px}
.amen-facts dt{font:400 7.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.amen-facts dd{margin:8px 0 0;font-family:var(--display);font-size:15px}
.amen-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:var(--r-pebble-b);
  border:1px solid rgba(241,232,220,.3);background:rgba(8,13,10,.62);backdrop-filter:blur(8px);
  font-size:11px;color:var(--bone);
  transition:transform .4s var(--ease-wild),border-color .25s var(--ease);
}
.amen-close:hover{transform:rotate(14deg) scale(1.06);border-color:rgba(var(--accent-rgb),.55)}
.amen-go{
  display:block;width:100%;text-align:center;
  border:1px solid var(--line);color:var(--bone-dim);
  font:400 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  padding:15px 16px;border-radius:var(--r-pill);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .4s var(--ease-wild);
}
.amen-go:hover{color:var(--bone);border-color:rgba(241,232,220,.34);transform:rotate(-.7deg)}

/* ───────────────── Servicios ───────────────── */

.svc{
  position:absolute;inset:0;z-index:5;
  opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease);
}
.svc.is-live{opacity:1;pointer-events:auto}
.svc-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  filter:saturate(.86) brightness(.5);
}
.svc-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right, rgba(8,13,10,.93) 0%, rgba(8,13,10,.62) 44%, rgba(8,13,10,.12) 78%),
    linear-gradient(to bottom, rgba(8,13,10,.55) 0%, transparent 26%, transparent 70%, rgba(8,13,10,.7) 100%);
}
.svc-body{
  position:absolute;left:calc(var(--gut) + var(--safe-l));
  top:50%;transform:translateY(-50%);
  max-width:min(50ch,46vw);
}
.svc-title{
  font-family:var(--display);font-size:clamp(32px,4.4vw,62px);line-height:1.02;
  letter-spacing:-.025em;margin:0 0 30px;
}
/* Lista, no tarjetas: tres filas con una sola divisoria entre ellas. */
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.svc-list li{
  display:grid;grid-template-columns:20px 96px 1fr;gap:14px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--line-soft);
}
.svc-list li:first-child{border-top:0;padding-top:0}
/* El icono se alinea con la línea base del rótulo, no con la caja */
.svc-list .ico{font-size:19px;color:var(--accent);align-self:start;margin-top:-4px}
.svc-list b{
  font:400 9px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;
  color:var(--coral);font-weight:400;
}
.svc-list span{font-size:12px;font-weight:300;line-height:1.7;color:var(--bone-dim)}
.svc-back{
  position:absolute;top:calc(var(--top) + var(--safe-t));left:calc(var(--gut) + var(--safe-l));
  font:400 9px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);border:1px solid var(--line);border-radius:var(--r-pill-b);
  padding:12px 19px;background:rgba(8,13,10,.66);backdrop-filter:blur(10px);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .4s var(--ease-wild);
}
.svc-back:hover{color:var(--bone);border-color:rgba(241,232,220,.34);transform:rotate(-1deg) translateX(-2px)}
.svc-back span{color:var(--coral);margin-right:7px}

/* La amenidad puede traer clip en vez de foto */
.amen-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ───────────────── El lugar ───────────────── */

/* Lo que ya crecía aquí, sobre el plano apagado: la selva es parte del
   producto y se enseña con nombre propio antes de hablar de precios. */
.place{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;
  padding:calc(var(--top) + var(--safe-t) + 52px) calc(var(--gut) + var(--safe-r))
          calc(92px + var(--safe-b)) calc(var(--gut) + var(--safe-l));
  background:
    linear-gradient(to bottom, rgba(7,11,13,.93) 0%, rgba(7,11,13,.86) 44%, rgba(7,11,13,.96) 100%),
    radial-gradient(ellipse at 24% 30%, rgba(125,154,148,.13), transparent 60%);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease-mist);
}
.place.is-live{opacity:1;pointer-events:auto}

.place-head{flex:none;max-width:min(54ch,52vw)}
.place-eyebrow{
  margin:0 0 10px;font:400 9px/1.4 var(--ui);letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);
  opacity:0;
}
.place-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:.01em;
  text-transform:lowercase;margin:0 0 16px;
  opacity:0;
}
.place-lead{
  margin:0;font-size:clamp(12px,1.05vw,14px);font-weight:300;line-height:1.75;
  color:var(--bone-dim);
  opacity:0;
}
.place-lead em{font-family:var(--display);font-style:italic;font-size:1.22em;color:var(--bone)}

/* El título entra como marca serif: sube, se aclara y el tracking se abre un
   poco. Eyebrow y lead van en cascada detrás. */
.place-head.is-in .place-eyebrow{animation:placeRise .85s var(--ease-mist) both}
.place-head.is-in .place-title{animation:placeTitle 1.25s var(--ease-mist) .1s both}
.place-head.is-in .place-lead{animation:placeRise .9s var(--ease-mist) .35s both}
@keyframes placeTitle{
  from{opacity:0;transform:translateY(.28em);letter-spacing:.08em;filter:blur(6px)}
  to{opacity:1;transform:none;letter-spacing:.01em;filter:blur(0)}
}
@keyframes placeRise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* El texto entra por arriba y la fila se centra en lo que queda: pegada al
   pie quedaba a un renglón del dock y con medio lienzo vacío encima. */
.place-list{
  list-style:none;margin:auto 0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(148px,1fr);
  gap:clamp(12px,2.2vw,34px);
  border-top:1px solid var(--line-soft);
  overflow-x:auto;overscroll-behavior-x:contain;
}
.pstep{
  position:relative;padding:26px 0 0;
  animation:placeIn .95s var(--ease-mist) both;
  animation-delay:calc(.45s + var(--i) * 100ms);
}
@keyframes placeIn{
  from{opacity:0;transform:translateY(12px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
/* El punto se sienta sobre la divisoria, no debajo */
.pstep::before{
  content:"";position:absolute;top:-4.5px;left:0;
  width:10px;height:10px;border-radius:var(--r-pebble);
  background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.13);
}
/* Foto de campo encima del nombre: sin marco de tarjeta, solo el recorte
   vertical que cabe en la columna. Entra con el resto de la cascada. */
.pstep-media{
  width:100%;aspect-ratio:3/4;max-height:min(28vh,220px);
  margin:0 0 14px;overflow:hidden;
  background-color:#122018;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.04);
  transition:opacity .9s var(--ease-mist),transform 1.1s var(--ease-mist);
}
/* Toh: pájaro alto con cola larga — anclar arriba para no perder la cabeza
   en el recorte corto de la columna. */
.pstep[data-slug="toh"] .pstep-media{background-position:center 18%}
.pstep-media.is-ready{opacity:1;transform:none}
.pstep-kind{
  display:block;margin:0 0 10px;
  font:400 8px/1 var(--ui);letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);
}
/* El nombre en maya (o común) manda; el latín va debajo, en versalita, como
   en una etiqueta de herbario o de campo. */
.pstep-name{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(18px,1.8vw,26px);line-height:1;letter-spacing:.01em;
  color:var(--accent);
}
.pstep-latin{
  display:block;margin:9px 0 8px;
  font:400 8.5px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone);
}
.pstep-text{
  margin:0;font-size:11px;font-weight:300;line-height:1.72;color:var(--bone-dim);
  max-width:34ch;
}

@media (prefers-reduced-motion:reduce){
  .place-eyebrow,.place-title,.place-lead{opacity:1}
  .place-head.is-in .place-eyebrow,
  .place-head.is-in .place-title,
  .place-head.is-in .place-lead,
  .pstep{animation:none}
  .pstep-media{opacity:1;transform:none;transition:none}
}

.place-back{
  position:absolute;top:calc(var(--top) + var(--safe-t));left:calc(var(--gut) + var(--safe-l));
  font:400 9px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:12px 19px;background:rgba(7,11,13,.66);backdrop-filter:blur(10px);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .4s var(--ease-wild);
}
.place-back:hover{color:var(--bone);border-color:rgba(233,228,216,.34);transform:rotate(-1deg) translateX(-2px)}
.place-back span{color:var(--accent);margin-right:7px}

/* ───────────────── Galería de amenidades ───────────────── */

/* El modo Amenidades deja de ser solo chinches sobre la ortofoto: las siete
   piezas se ven juntas, cada una con su clip si lo tiene y su foto si no.
   El plano sigue detrás, apagado, para no perder el sitio. */
.gal{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;
  padding:calc(var(--top) + var(--safe-t) + 52px) calc(var(--gut) + var(--safe-r))
          calc(84px + var(--safe-b)) calc(var(--gut) + var(--safe-l));
  background:
    linear-gradient(to bottom, rgba(7,11,13,.94) 0%, rgba(7,11,13,.88) 46%, rgba(7,11,13,.95) 100%),
    radial-gradient(ellipse at 72% 22%, rgba(125,154,148,.1), transparent 58%);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease-mist);
}
.gal.is-live{opacity:1;pointer-events:auto}

.gal-head{flex:none;margin-bottom:20px}
.gal-eyebrow{
  margin:0 0 8px;font:400 9px/1.4 var(--ui);letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);
}
.gal-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.6vw,50px);line-height:1;letter-spacing:.01em;
  text-transform:lowercase;margin:0;
}

.gal-grid{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:grid;gap:16px;
  grid-template-columns:repeat(4,1fr);
  align-content:center;
  padding-right:4px;
}
/* Siete piezas en cuatro columnas dejan un hueco al final: la última se
   ensancha para cerrar la fila. Suelta su 16:9 y toma el alto de la fila —
   con la proporción puesta crecería al doble y dejaría a sus vecinas
   colgando de un renglón vacío. */
@media (min-width:1101px){
  .gcard:last-child{grid-column:span 2;aspect-ratio:auto;min-height:130px}
}

.gcard{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;
  background:#122018;
  text-align:left;
  opacity:0;
  animation:galIn .9s var(--ease-mist) both;
  animation-delay:calc(var(--i) * 70ms);
  transition:border-color .45s var(--ease-mist),transform .45s var(--ease-mist),box-shadow .45s var(--ease-mist);
}
@keyframes galIn{
  from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.gcard:hover,.gcard:focus-visible{
  border-color:rgba(var(--accent-rgb),.5);
  transform:translateY(-3px);
  box-shadow:0 26px 56px -30px rgba(0,0,0,.95);
}
.gcard-media{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .8s var(--ease-mist),transform .9s var(--ease-mist);
}
.gcard-media video{width:100%;height:100%;object-fit:cover;display:block}
.gcard.is-ready .gcard-media{opacity:1}
.gcard:hover .gcard-media{transform:scale(1.035)}
.gcard-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(7,11,13,.9) 0%, rgba(7,11,13,.28) 46%, transparent 72%);
}
.gcard-body{position:absolute;left:0;right:0;bottom:0;padding:14px 15px}
.gcard-kind{
  display:flex;align-items:center;gap:7px;
  font:400 7.5px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px;
}
.gcard-kind i{font-style:normal}
.gcard-kind .ico{font-size:15px}
.gcard-name{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(17px,1.5vw,23px);line-height:1.05;letter-spacing:.01em;
  color:var(--bone);
}
/* Un clip se anuncia: el que se mueve merece decirlo */
.gcard-badge{
  position:absolute;top:11px;right:11px;
  display:flex;align-items:center;gap:6px;
  font:400 7.5px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone);background:rgba(7,11,13,.6);backdrop-filter:blur(8px);
  border:1px solid rgba(var(--accent-rgb),.34);border-radius:var(--r-pill-c);
  padding:6px 11px;
}
.gcard-badge::before{
  content:"";width:6px;height:6px;border-radius:var(--r-pebble);background:var(--accent);
  animation:galLive 2.8s ease-in-out infinite;
}
@keyframes galLive{0%,100%{opacity:1}50%{opacity:.3}}
/* Marcador honesto: la tarjeta dice qué archivo le falta */
.gcard-slot{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:6px;padding:16px;text-align:center;
  font:400 8px/1.5 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

.gal-back{
  position:absolute;top:calc(var(--top) + var(--safe-t));left:calc(var(--gut) + var(--safe-l));
  font:400 9px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);border:1px solid var(--line);border-radius:var(--r-pill-c);
  padding:12px 19px;background:rgba(7,11,13,.66);backdrop-filter:blur(10px);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .4s var(--ease-wild);
}
.gal-back:hover{color:var(--bone);border-color:rgba(233,228,216,.34);transform:rotate(-1deg) translateX(-2px)}
.gal-back span{color:var(--accent);margin-right:7px}

/* ── Visor ── */

.lb{
  position:absolute;inset:0;z-index:8;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--top) + var(--safe-t)) calc(64px + var(--safe-r))
          calc(26px + var(--safe-b)) calc(64px + var(--safe-l));
  background:rgba(4,7,8,.9);backdrop-filter:blur(16px);
  opacity:0;pointer-events:none;
  transition:opacity .55s var(--ease-mist);
}
.lb.is-open{opacity:1;pointer-events:auto}
.lb-stage{
  position:relative;width:min(1180px,100%);aspect-ratio:16/9;max-height:100%;
  border-radius:16px;overflow:hidden;background:#0C1612;
  background-size:cover;background-position:center;
  border:1px solid rgba(var(--accent-rgb),.22);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.98);
  opacity:0;transform:scale(.985);
  transition:opacity .6s var(--ease-mist),transform .6s var(--ease-mist);
}
.lb-stage.is-ready{opacity:1;transform:none}
.lb-stage video{width:100%;height:100%;object-fit:cover;display:block}
.lb-body{
  position:absolute;left:calc(64px + var(--safe-l));bottom:calc(34px + var(--safe-b));
  max-width:min(46ch,42vw);
  text-shadow:0 2px 24px rgba(0,0,0,.9);
}
.lb-kind{
  display:flex;align-items:center;gap:9px;
  font:400 8.5px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
}
.lb-kind i{font-style:normal}
.lb-kind .ico{font-size:17px}
.lb-name{
  margin:11px 0 9px;font-family:var(--display);font-weight:400;
  font-size:clamp(26px,3.2vw,44px);line-height:1.02;letter-spacing:.01em;
}
.lb-note{margin:0 0 16px;font-size:11.5px;font-weight:300;line-height:1.7;color:var(--bone-dim)}
.lb-go{
  font:400 9.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral-ink);background:var(--accent);
  border-radius:var(--r-pill);padding:13px 24px;
  transition:filter .3s var(--ease-mist),transform .4s var(--ease-wild);
}
.lb-go:hover{filter:brightness(1.07);transform:translateY(-2px) rotate(-.8deg) scale(1.02)}
.lb-nav,.lb-close{
  position:absolute;width:44px;height:44px;border-radius:var(--r-pebble);
  border:1px solid var(--line);background:rgba(7,11,13,.66);backdrop-filter:blur(10px);
  color:var(--bone-dim);font-size:14px;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .4s var(--ease-wild);
}
.lb-nav--next,.lb-close{border-radius:var(--r-pebble-b)}
.lb-nav:hover,.lb-close:hover{color:var(--bone);border-color:rgba(var(--accent-rgb),.5);transform:rotate(8deg) scale(1.06)}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-nav:hover{transform:translateY(-50%) rotate(8deg) scale(1.06)}
.lb-nav--prev{left:calc(12px + var(--safe-l))}
.lb-nav--next{right:calc(12px + var(--safe-r))}
.lb-close{top:calc(var(--top) + var(--safe-t));right:calc(16px + var(--safe-r))}
.lb-count{
  position:absolute;top:calc(var(--top) + var(--safe-t) + 13px);left:calc(64px + var(--safe-l));
  font:400 9px/1 var(--ui);letter-spacing:.24em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ───────────────── Modos ───────────────── */

body[data-mode="vista"] .panel-left,
body[data-mode="vista"] .dock,
body[data-mode="vista"] .rail,
body[data-mode="vista"] .mockup-badge,
body[data-mode="servicios"] .panel-left,
body[data-mode="servicios"] .rail{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
body[data-mode="vista"] .plan,
body[data-mode="servicios"] .plan{opacity:0;transition:opacity .7s var(--ease)}
body[data-mode="servicios"] .l-amen{opacity:0;pointer-events:none}
body[data-mode="fases"] .l-lots .lot{cursor:default}

/* Amenidades y El lugar: la pantalla manda. El plano queda apenas visible
   detrás para no perder el sitio, y la columna izquierda se retira. */
body[data-mode="amenidades"] .panel-left,
body[data-mode="amenidades"] .rail,
body[data-mode="lugar"] .panel-left,
body[data-mode="lugar"] .rail{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
body[data-mode="amenidades"] .plan,
body[data-mode="lugar"] .plan{opacity:.18;transition:opacity .8s var(--ease-mist)}
body[data-mode="amenidades"] .veil,
body[data-mode="lugar"] .veil{opacity:0;transition:opacity .8s var(--ease-mist)}

/* El visor va dentro del escenario y el dock vive en el cromo, que pinta por
   encima: con el visor abierto el dock tapaba su propio botón. */
body[data-lb="open"] .dock,
body[data-lb="open"] .mockup-badge{opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}

/* ───────────────── Puerta de orientación ───────────────── */

.rotate-gate{display:none}

@media (orientation:portrait) and (max-width:900px){
  .rotate-gate{
    position:fixed;inset:0;z-index:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:22px;padding:44px 36px;text-align:center;
    background:var(--ink);
  }
  .rg-phone{
    width:54px;height:88px;border:1.5px solid var(--coral);border-radius:11px;
    position:relative;margin-bottom:10px;
    animation:rgTurn 2.6s var(--ease) infinite;
  }
  .rg-phone i{
    position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
    width:17px;height:2px;border-radius:2px;background:rgba(var(--accent-rgb),.55);
  }
  @keyframes rgTurn{
    0%,26%{transform:rotate(0)}
    54%,88%{transform:rotate(-90deg)}
    100%{transform:rotate(-90deg)}
  }
  .rg-title{margin:0;font-family:var(--display);font-size:32px;letter-spacing:-.02em;text-transform:lowercase}
  .rg-note{margin:0;max-width:30ch;font-size:11.5px;font-weight:300;line-height:1.7;color:var(--bone-dim)}

  /* Nada del plano corre detrás de la puerta */
  .stage,.cover,.app,.mockup-badge{visibility:hidden}
}

/* ───────────────── Horizontal corto (teléfono acostado) ───────────────── */

@media (orientation:landscape) and (max-height:480px){
  :root{--col:296px;--gut:18px;--top:56px}
  .mh-name{font-size:20px}
  .mh-mark{width:33px;height:33px;font-size:12px}
  .ct b{font-size:25px}
  .counters{margin-top:18px}
  .phases{margin-top:22px}

  /* 390 px de alto no dan para apilar todo. Las fases toman el lugar de los
     contadores, el rail cubre la columna mientras está abierto y la ficha de
     la portada se retira: el rótulo y su botón mandan. */
  body[data-mode="fases"] .counters{display:none}
  body[data-rail="open"] .panel-left{opacity:0;pointer-events:none}
  .cover-meta{display:none}

  /* Servicios: entre el botón de volver y el dock quedan ~220 px. El bloque
     deja de ir centrado, se aprieta y se lleva su propio scroll. */
  .svc-body{
    top:calc(var(--top) + 44px);transform:none;
    max-height:calc(100dvh - var(--top) - 108px - var(--safe-b));
    overflow-y:auto;max-width:min(46ch,52vw);
  }
  .svc-title{font-size:clamp(24px,3.4vw,32px);margin-bottom:18px}
  .svc-list li{grid-template-columns:84px 1fr;gap:14px;padding:11px 0}
  .svc-list span{font-size:11px;line-height:1.6}
  .ph-row{margin-bottom:12px}
  .ph-name{font-size:16px}
  .rail{padding:16px 17px 12px;bottom:calc(80px + var(--safe-b));border-radius:14px}
  .fgroup{margin-bottom:12px}
  .chip{padding:8px 12px;font-size:10px}
  .dk{padding:9px 14px;font-size:9px}
  .dossier{padding:20px 19px;width:min(348px,42vw);border-radius:14px}
  .ds-id{font-size:34px}
  .ds-grid > div{padding:10px 0 11px}
  .cover-meta{gap:22px;min-width:0}
  /* En versal espaciada el rótulo pide bastante más ancho que en caja baja */
  .cover-title{font-size:clamp(26px,4.6vw,50px);letter-spacing:.15em;margin-bottom:18px}

  /* Galería: el encabezado se encoge y las tarjetas bajan a tres por fila para
     que la primera fila entre completa antes del scroll. */
  .gal{padding-top:calc(var(--top) + var(--safe-t) + 42px);padding-bottom:calc(72px + var(--safe-b))}
  .gal-head{margin-bottom:13px}
  .gal-title{font-size:26px}
  .gal-eyebrow{margin-bottom:5px}
  .gal-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .gcard-body{padding:11px 12px}
  .gcard-name{font-size:16px}
  .lb{padding-left:calc(52px + var(--safe-l));padding-right:calc(52px + var(--safe-r))}
  .lb-body{left:calc(52px + var(--safe-l));bottom:calc(22px + var(--safe-b));max-width:min(38ch,44vw)}
  .lb-name{font-size:24px;margin:8px 0 6px}
  .lb-note{font-size:10.5px;margin-bottom:12px}
  .lb-go{padding:11px 18px}
  .lb-nav,.lb-close{width:36px;height:36px}

  /* El lugar: el texto se aprieta, porque seis columnas a 390 px de alto
     dejan cada descripción en un hilo. */
  .place{padding-top:calc(var(--top) + var(--safe-t) + 40px);padding-bottom:calc(78px + var(--safe-b))}
  .place-title{font-size:30px;margin-bottom:9px}
  .place-lead{font-size:11px;line-height:1.6}
  .place-head{max-width:min(46ch,58vw)}
  .place-list{grid-auto-columns:minmax(146px,1fr);gap:16px}
  .pstep{padding-top:19px}
  .pstep-media{max-height:min(22vh,160px);margin-bottom:11px}
  .pstep-name{font-size:18px}
  .pstep-latin{margin:7px 0 5px}
  .pstep-text{font-size:10px;line-height:1.6}
}

@media (max-width:1100px){
  .gal-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .lb-body{max-width:min(40ch,72vw)}
}

@media (prefers-reduced-motion:reduce){
  .gcard,.pstep{animation:none;opacity:1}
  .gcard:hover .gcard-media{transform:none}
}

/* ───────────────── CTA y orbe de la plataforma ───────────────── */

/* Esta demo es una app a pantalla completa sin flujo de documento: la barra
   final del CTA no aplica. El orbe Ü se reubica desde app.js (placeOrb):
   viene con `inset` en línea y !important, que ninguna hoja puede ganar. */
.rum-cta-bar{display:none!important}
.rum-cta-fab{
  right:calc(22px + var(--safe-r))!important;
  bottom:calc(100px + var(--safe-b))!important;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
body[data-ds="open"] .rum-cta-fab,
body[data-mode="vista"] .rum-cta-fab{opacity:0;transform:scale(.85);pointer-events:none}
.rum-rum-widget{transition:opacity .35s var(--ease)!important}

/* Modo reel: sin cromo de plataforma para grabar limpio */
body[data-reel="1"] .mockup-badge,
body[data-reel="1"] .showroom-back,
body[data-reel="1"] .rum-cta-bar,
body[data-reel="1"] .rum-cta-pop,
body[data-reel="1"] .rum-cta-fab,
body[data-reel="1"] .rum-rum-widget{display:none!important}

/* Sin el botón de la plataforma, el cromo propio recupera el borde superior */
body[data-reel="1"]{--top:26px}

/* ───────────────── Accesibilidad ───────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* En SVG el anillo de foco se dibuja sobre la caja envolvente, así que al
   pulsar un lote aparecía un rectángulo alrededor de un polígono irregular.
   El foco se marca sobre el propio contorno, que es lo que el usuario está
   señalando, y el teclado sigue teniendo indicación clara. */
.lot:focus,.am:focus{outline:none}
.lot:focus-visible,.am:focus-visible{outline:none}
.lot:focus-visible .fill{
  stroke:var(--paper,#F4ECE0);
  stroke-width:3;
  stroke-dasharray:none;
}
.am:focus-visible .am-ring{stroke-width:3.4}