/* =========================================================
   Top House Real Estate
   Paleta muestreada del plano: sombra de cal, piedra caliente,
   agua profunda y el primer sol, que es el oro de la marca.
   ========================================================= */

:root{
  --canvas:#0B1417;
  --canvas-deep:#070E11;
  --panel:#101D21;
  --panel-2:#16272C;
  --accent:#D4A94B;
  --accent-hover:#E8C572;
  --accent-muted:rgba(212,169,75,.18);
  --text-secondary:#9EB2B4;
  --text-primary:#F1EBDF;
  --line:rgba(158,178,180,.16);
  --line-strong:rgba(158,178,180,.34);

  --d:'Fraunces',Georgia,'Times New Roman',serif;
  --b:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --m:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --gut:clamp(20px,5vw,72px);
  --maxw:1240px;
  --lane:min(38vw,520px);
}

*,*::before,*::after{box-sizing:border-box}

/* el atributo hidden tiene que ganar siempre a las clases de abajo */
[hidden]{display:none!important}

html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--b);
  font-size:clamp(16px,1.02vw,18px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .9s var(--ease-soft);
}
body.lit{opacity:1}

img{max-width:100%;display:block}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip{
  position:fixed;left:12px;top:-100px;z-index:200;
  background:var(--accent);color:var(--canvas-deep);
  padding:12px 18px;border-radius:10px;font-weight:700;
  transition:top .3s var(--ease);
}
.skip:focus{top:12px}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

a{color:inherit;text-decoration:none}

/* ---------- Tipografía ---------- */

.d1,.d2,.d3{
  font-family:var(--d);
  font-weight:300;
  font-variation-settings:'SOFT' 22,'WONK' 1;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
.d1{font-size:clamp(2.1rem,4.6vw,4.1rem)}
.d2{font-size:clamp(1.75rem,3.2vw,2.9rem)}
.d3{font-size:clamp(1.25rem,1.9vw,1.65rem);line-height:1.15}

.kicker{
  font-family:var(--m);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.1rem;
  font-weight:500;
}

.lede{
  font-size:clamp(1.02rem,1.25vw,1.2rem);
  color:var(--text-secondary);
  max-width:52ch;
  margin:1.2rem 0 0;
}

.mono{font-family:var(--m);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- Botones ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;
  font-family:var(--b);font-weight:700;
  font-size:.92rem;letter-spacing:.005em;
  padding:.82em 1.5em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  text-shadow:none;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.btn--solid{
  background:var(--accent);
  color:var(--canvas-deep);
  box-shadow:0 8px 30px rgba(212,169,75,.14);
}
.btn--solid:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 38px rgba(212,169,75,.24)}
.btn--ghost{
  border-color:var(--line-strong);
  color:var(--text-primary);
  background:rgba(16,29,33,.42);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn--lg{padding:1em 1.9em;font-size:.98rem}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none!important}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- Capa de entorno fija ---------- */

.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env__glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(58% 44% at 22% 14%,rgba(30,64,70,.5),transparent 62%),
    radial-gradient(46% 40% at 82% 78%,rgba(212,169,75,.07),transparent 66%),
    radial-gradient(70% 60% at 50% 110%,rgba(14,34,38,.7),transparent 70%);
  animation:drift 96s var(--ease-soft) -22s infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(-2.5%,-1.5%,0) scale(1.03)}
  100%{transform:translate3d(2.5%,2%,0) scale(1.09)}
}
.env__grain{
  position:absolute;inset:0;opacity:.05;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Navegación ---------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:16px var(--gut);
  transition:background-color .5s var(--ease),backdrop-filter .5s var(--ease),
             border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(7,14,17,.82);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
  padding-top:11px;padding-bottom:11px;
}

.nav__brand{display:flex;align-items:center;gap:12px}
/* El emblema real de la marca, tal cual lo entrego el cliente. Se sirve a
   256px y se muestra a 38 para que quede nitido en pantallas de retina. */
.mark{width:38px;height:38px;flex:none;display:block}
.nav__word{display:flex;flex-direction:column;line-height:1.12}
/* El rotulo va en Lato, que es la tipografia del logo del cliente, para que
   emblema y texto lean como una sola marca y no como dos piezas pegadas. */
.nav__name{
  font-family:'Lato',var(--b);font-weight:700;
  font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-primary);
}
.nav__kicker{
  font-family:'Lato',var(--b);font-weight:400;font-size:.58rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
}

.nav__links{display:flex;gap:26px;font-size:.9rem;font-weight:500}
.nav__links a{color:var(--text-secondary);position:relative;padding:4px 0;transition:color .3s var(--ease)}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .4s var(--ease);
}
.nav__links a:hover{color:var(--text-primary)}
.nav__links a:hover::after{right:0}

.nav__actions{display:flex;gap:10px;align-items:center}
.nav__tel{font-family:var(--m);font-size:.78rem;letter-spacing:.08em}

@media (max-width:1080px){.nav__links{display:none}}
@media (max-width:720px){
  .nav__tel{display:none}
  .nav__name{font-size:.74rem}
  .nav{padding:12px var(--gut)}
}

/* =========================================================
   HÉROE
   ========================================================= */

.hero{position:relative;height:760vh;z-index:1}

.stage{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  background:var(--canvas-deep);
}

.poster{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  background-color:#0d1b1f;
}

.hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s var(--ease-soft);
  will-change:transform;
  transform:translateZ(0);
}
.stage.video-ready .hero__video{opacity:1}
.stage.video-failed .hero__video{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(7,14,17,0) 34%,rgba(7,14,17,.64) 100%);
}

/* anillo de carga */
.loader{
  position:absolute;left:50%;bottom:46px;transform:translateX(-50%);
  color:var(--accent);opacity:.85;
  transition:opacity .5s var(--ease);
}
.stage.video-ready .loader,.stage.video-failed .loader{opacity:0}
.ring{width:34px;height:34px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .16s linear}

/* pista de scroll */
.cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  width:1px;height:56px;background:linear-gradient(var(--line-strong),transparent);
  opacity:0;transition:opacity .6s var(--ease);
}
.stage.video-ready .cue,.stage.video-failed .cue{opacity:1}
.cue span{
  position:absolute;left:-1px;top:0;width:3px;height:16px;
  background:var(--accent);border-radius:2px;
  animation:cueRun 2.8s var(--ease-soft) -.6s infinite;
}
@keyframes cueRun{
  0%{transform:translateY(0);opacity:0}
  22%{opacity:1}
  78%{opacity:1}
  100%{transform:translateY(40px);opacity:0}
}

/* ---------- Bandas ---------- */

.bands{position:absolute;inset:0;pointer-events:none}

.band{
  position:absolute;inset:0;
  display:grid;align-content:center;
  padding:0 var(--gut);
  opacity:0;
  text-shadow:var(--tshadow);
}
.band .btn{text-shadow:none}
.band__cta{pointer-events:auto}

/* Velo doble para las bandas partidas: el carril del arco queda intacto.
   z-index explicito porque ::after se pinta POR ENCIMA del contenido: sin el,
   el velo derecho caia sobre las propias letras y las apagaba, mientras el
   izquierdo (::before) si quedaba detras. De ahi que la mitad derecha se
   viera mucho mas floja que la izquierda. */
.band--split::before,.band--split::after{
  content:"";position:absolute;top:-6%;bottom:-6%;pointer-events:none;z-index:0;
  opacity:calc(.84 + .16*var(--k,1));
}
/* Velos asimetricos: la pared de la derecha del plano es mucho mas clara que
   la de la izquierda, asi que pide mas velo para que las dos mitades de la
   frase pesen igual. Cada uno se apaga en su borde interior, de modo que el
   carril del arco queda intacto y sin costura visible. */
.band--split::before{
  left:-8%;right:calc(50% + var(--lane)/2 - 6%);
  background:radial-gradient(ellipse 48% 62% at 56% 50%,
    rgba(4,8,10,.78) 0%,rgba(4,8,10,.60) 50%,rgba(4,8,10,0) 96%);
}
.band--split::after{
  right:-8%;left:calc(50% + var(--lane)/2 - 6%);
  background:radial-gradient(ellipse 46% 82% at 44% 50%,
    rgba(4,8,10,.80) 0%,rgba(4,8,10,.72) 34%,
    rgba(4,8,10,.56) 58%,rgba(4,8,10,.28) 80%,rgba(4,8,10,0) 100%);
}

/* La banda 3 cruza el plano del cristal, donde la luz revienta y las paredes
   se van a blanco. Pide bastante mas velo que las demas para que el texto
   aguante; leido como el ojo cerrandose ante la luz, que es su entrada. */
.band--bloom::before{
  background:radial-gradient(ellipse 48% 60% at 56% 50%,
    rgba(4,8,10,.88) 0%,rgba(4,8,10,.70) 48%,
    rgba(4,8,10,.40) 74%,rgba(4,8,10,0) 96%);
}
.band--bloom::after{
  background:radial-gradient(ellipse 44% 78% at 44% 50%,
    rgba(4,8,10,.92) 0%,rgba(4,8,10,.86) 34%,
    rgba(4,8,10,.68) 60%,rgba(4,8,10,.34) 82%,rgba(4,8,10,0) 100%);
}

/* velo único superior para el posado */
.band--center::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:0;
  opacity:calc(.86 + .14*var(--k,1));
  background:radial-gradient(ellipse 86% 72% at 50% 46%,
    rgba(4,8,10,.74) 0%,rgba(4,8,10,.60) 44%,
    rgba(4,8,10,.34) 68%,rgba(4,8,10,0) 92%);
}

.ln{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr var(--lane) 1fr;
  align-items:baseline;
  margin:0;
  font-family:var(--d);
  font-weight:300;
  font-variation-settings:'SOFT' 24,'WONK' 1;
  font-size:clamp(1.6rem,3.5vw,3.4rem);
  line-height:1.05;
  letter-spacing:-.015em;
}
.half--l{grid-column:1;justify-self:end;text-align:right;padding-right:clamp(8px,1.6vw,24px)}
.half--r{grid-column:3;justify-self:start;text-align:left;padding-left:clamp(8px,1.6vw,24px)}

.sub{
  position:relative;z-index:1;
  margin:1.15rem 0 0;
  font-size:clamp(.92rem,1.05vw,1.05rem);
  color:var(--text-primary);
  line-height:1.5;
}
.sub--l{max-width:34ch;margin-right:auto;padding-right:clamp(8px,1.6vw,24px);
  width:calc(50% - var(--lane)/2);text-align:right;margin-left:0}
.sub--r{max-width:34ch;margin-left:auto;padding-left:clamp(8px,1.6vw,24px);
  width:calc(50% - var(--lane)/2);text-align:left}
.sub--c{max-width:46ch;margin-left:auto;margin-right:auto;text-align:center}

.ln--center{display:block;text-align:center}
.cline{display:block}
.cline--2{color:var(--accent)}

.band--center{justify-items:center;text-align:center}
.band__cta{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:2rem}

/* ---------- Partido en palabras y letras ---------- */

.w{display:inline-block;white-space:pre;will-change:transform,opacity}
.c{display:inline-block;will-change:transform,opacity}

/* (a) mitades que se separan */
[data-entrance="part"] .half--l .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*44px));
}
[data-entrance="part"] .half--r .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*-44px));
}

/* (b) aproximación desde la profundidad */
[data-entrance="depth"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:scale(calc(.8 + .2*var(--kc))) translateY(calc((1 - var(--kc))*10px));
}

/* (c) de desenfoque a nitidez */
[data-entrance="blur"] .ln{position:relative}
[data-entrance="blur"] .half{position:relative;display:inline-block}
[data-entrance="blur"] .half .soft{
  position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - var(--k,0));
  pointer-events:none;
}
[data-entrance="blur"] .half .sharp{opacity:var(--k,0)}

/* (d) subida palabra a palabra hacia el posado */
[data-entrance="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px));
}
[data-entrance="rise"] .cline--2{
  --ks:clamp(0,(var(--k,0) - .42)*2.6,1);
  opacity:var(--ks);
}
[data-entrance="rise"] .sub--c{
  --ks:clamp(0,(var(--k,0) - .62)*3.4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px));
}
[data-entrance="rise"] .band__cta{
  --kb:clamp(0,(var(--k,0) - .76)*4.2,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*16px));
}

@media (max-width:1024px){
  :root{--lane:min(46vw,420px)}
}
@media (max-height:560px){
  .cue,.loader{display:none}
}

/* =========================================================
   HÉROE ESTÁTICO
   ========================================================= */

.statichero{
  position:relative;z-index:1;
  min-height:92vh;min-height:92svh;
  display:grid;align-content:end;
  padding:120px var(--gut) clamp(56px,10vh,110px);
  overflow:hidden;
}
.statichero__art{
  position:absolute;inset:0;
  background-color:#0d1b1f;
  background-image:linear-gradient(180deg,rgba(7,14,17,.35) 0%,rgba(7,14,17,.62) 52%,rgba(11,20,23,.96) 100%),
                   var(--hero-still,linear-gradient(160deg,#12262b,#0a1417 70%));
  background-size:cover;background-position:center;
}
.statichero__body{position:relative;max-width:640px}
.statichero .lede{margin-bottom:2rem}
.row{display:flex;gap:12px;flex-wrap:wrap}

/* =========================================================
   SECCIONES
   ========================================================= */

main{position:relative;z-index:1}

section{
  padding:clamp(84px,13vh,160px) var(--gut);
  max-width:calc(var(--maxw) + 2*var(--gut));
  margin-inline:auto;
}

/* entradas */
.reveal .part{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.reveal.in .part{opacity:1;transform:none}
.reveal.in .part:nth-child(1){transition-delay:.02s}
.reveal.in .part:nth-child(2){transition-delay:.12s}
.reveal.in .part:nth-child(3){transition-delay:.22s}
.reveal.in .part:nth-child(4){transition-delay:.32s}
.reveal.in .part:nth-child(5){transition-delay:.42s}
.reveal.in .part:nth-child(6){transition-delay:.52s}
.reveal.done .part:nth-child(1),
.reveal.done .part:nth-child(2),
.reveal.done .part:nth-child(3),
.reveal.done .part:nth-child(4),
.reveal.done .part:nth-child(5),
.reveal.done .part:nth-child(6){transition-delay:0s!important}

/* ---------- La vista real del pueblo ---------- */
/* Foto propia del cliente, no generada. Va antes del mapa: primero el pueblo
   de verdad con sus tramos a la vista, y justo debajo el visitante elige el
   suyo. Alineada al mismo ancho y radio que el panel del mapa. */
.vista{max-width:var(--maxw);margin:0 0 clamp(22px,3.4vh,40px)}
.vista__frame{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:24px;
  background:var(--panel);
  box-shadow:0 26px 70px rgba(3,8,10,.5);
}
.vista__frame img{
  display:block;width:100%;height:auto;
  transform:scale(1.05);
  transition:transform 1.6s var(--ease);
}
.zones.in .vista__frame img{transform:scale(1)}
/* el borde inferior se funde con el lienzo, como en el umbral */
.vista__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,14,17,.16) 0%,rgba(7,14,17,0) 38%,rgba(7,14,17,.46) 100%);
}
.vista__cap{
  margin:.85rem 0 0;color:var(--text-secondary);
  font-family:var(--m);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- La bifurcación ---------- */

/* Tres puertas: la del propietario pesa mas porque es a donde empuja la
   pagina; comprar y alquilar comparten el mismo peso entre ellas. */
.fork__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(16px,2.2vw,28px);
  align-items:stretch;
}
@media (max-width:1080px){
  .fork__grid{grid-template-columns:1fr 1fr}
  .door--big{grid-column:1 / -1}
}
@media (max-width:680px){
  .fork__grid{grid-template-columns:1fr}
  .door--big{grid-column:auto}
}
.door{
  position:relative;
  border:1px solid var(--line);
  border-radius:22px;
  padding:clamp(26px,3.4vw,44px);
  background:linear-gradient(168deg,rgba(22,39,44,.7),rgba(16,29,33,.42));
  overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.door::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-muted) 30%,var(--accent) 50%,var(--accent-muted) 70%,transparent);
  opacity:.5;transition:opacity .5s var(--ease);
}
.door:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.door:hover::after{opacity:1}
.door__num{
  font-family:var(--m);font-size:.7rem;letter-spacing:.24em;
  color:var(--accent);margin-bottom:1.4rem;
}
.door h3{margin:0 0 .9rem}
.door p{color:var(--text-secondary);margin:0 0 1.6rem;max-width:44ch}
.door .btn{margin-top:.4rem;align-self:flex-start}
.door--big{display:flex;flex-direction:column;align-items:flex-start}
.door--small{display:flex;flex-direction:column;align-items:flex-start}
.door--small p{margin-bottom:1rem}
.door__gate{
  width:100%;max-width:230px;height:auto;display:block;
  margin:.4rem auto 1.6rem;opacity:.5;
  align-self:center;
}
.door__gate path{
  fill:none;stroke:var(--accent);stroke-width:1;
  opacity:.55;
}
.door__gate path:nth-child(2){opacity:.38}
.door__gate path:nth-child(3){opacity:.24}
.door--small:hover .door__gate{opacity:.85}
.door__gate{transition:opacity .6s var(--ease)}

.ticks{list-style:none;padding:0;margin:0 0 1.9rem;display:grid;gap:.62rem}
.ticks li{
  position:relative;padding-left:26px;
  color:var(--text-primary);font-size:.96rem;
}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:9px;height:9px;border-radius:50%;
  border:1px solid var(--accent);
}

@media (max-width:860px){
  .fork__grid{grid-template-columns:1fr}
}

/* ---------- El arco (firma) ---------- */

.premise{
  display:grid;
  grid-template-columns:minmax(260px,.85fr) 1.15fr;
  gap:clamp(28px,5vw,80px);
  align-items:end;
}
.premise__art{position:relative}
.gate{width:100%;height:auto;display:block;overflow:visible}
.gate__img{opacity:.92}
.gate__bed{fill:#132327}
.gate__wash{fill:rgba(11,20,23,.34)}
.gate__line{
  fill:none;stroke:var(--accent);stroke-width:1.4;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 2.1s var(--ease);
}
.premise.drawn .gate__line{stroke-dashoffset:0}
.premise__art::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:96px;
  background:linear-gradient(transparent,var(--canvas) 82%);
  pointer-events:none;
}
.premise__body .beat{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.premise.in .beat{opacity:1;transform:none;transition-delay:.35s}
.premise.in .beat--accent{transition-delay:.7s}
.beat--accent{color:var(--accent);font-family:var(--d);font-weight:300;
  font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.25;max-width:24ch}

@media (max-width:820px){
  .premise{grid-template-columns:1fr}
  .premise__art{max-width:380px;margin:0 auto}
}

/* ---------- Los cuatro pasos ---------- */

.steps{position:relative}
.steps__head{margin-bottom:clamp(38px,6vh,72px)}
.thread{
  position:absolute;
  left:calc(var(--gut) + 27px);
  top:clamp(190px,27vh,320px);
  bottom:clamp(100px,14vh,180px);
  width:1px;
  pointer-events:none;
  overflow:hidden;
}
.thread i{
  display:block;width:100%;height:100%;
  background:linear-gradient(var(--accent),rgba(212,169,75,.22) 55%,transparent);
  transform:scaleY(0);transform-origin:top;
  transition:transform 2.4s var(--ease);
}
.steps.drawn .thread i{transform:scaleY(1)}

.steps__list{list-style:none;padding:0;margin:0;display:grid;gap:clamp(20px,3vh,38px)}
.step{
  display:grid;
  grid-template-columns:56px minmax(0,180px) 1fr;
  gap:clamp(18px,2.6vw,38px);
  align-items:center;
  padding:clamp(16px,2vw,24px) 0;
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:0}
.step__n{
  font-family:var(--d);font-weight:300;
  font-size:clamp(1.6rem,2.4vw,2.2rem);
  color:var(--accent);line-height:1;
  align-self:start;padding-top:.2em;
}
.step__art{
  aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg,#16272c,#0d1a1e);
  border:1px solid var(--line);
}
.step__art img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.step:hover .step__art img{transform:scale(1.05)}
.step__body h3{margin:0 0 .5rem}
.step__body p{margin:0;color:var(--text-secondary);max-width:52ch}

@media (max-width:820px){
  .thread{display:none}
  .step{grid-template-columns:44px 1fr;gap:16px}
  .step__art{grid-column:1/-1;max-width:none}
}

/* ---------- La calculadora de pre-valoracion ---------- */

.calc{padding:clamp(84px,13vh,160px) var(--gut)}
.calc__intro{margin-bottom:clamp(30px,5vh,56px);max-width:var(--maxw)}
.calc__panel{
  max-width:var(--maxw);
  border:1px solid var(--line);border-radius:24px;
  padding:clamp(22px,3.4vw,46px);
  background:linear-gradient(150deg,rgba(22,39,44,.56),rgba(11,20,23,.3));
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,56px);align-items:start;
}
.calc__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,22px);margin-bottom:1.8rem;
}
.cfield{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.cfield--wide{grid-column:1 / -1}
.cfield label,.cextras legend{
  font-family:var(--m);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);
}
.cfield select,.cfield input[type=number]{
  width:100%;padding:.78rem .9rem;
  background:var(--panel);color:var(--text-primary);
  border:1px solid var(--line);border-radius:10px;
  font-family:var(--b);font-size:1rem;
}
.cfield select{
  appearance:none;padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239EB2B4' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
}
.cextras{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.7rem 1.4rem}
.cextras legend{margin-bottom:.55rem}
.chk{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  color:var(--text-primary);
}
/* .cfield label alcanzaba tambien a estas etiquetas y las dejaba en
   versalitas de la mono; aqui vuelven a ser texto normal, que se lee mejor */
.cextras .chk{
  font-family:var(--b);font-size:.95rem;
  letter-spacing:0;text-transform:none;color:var(--text-primary);
}
.chk input{
  width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex:none;
}
.calc__go{width:100%}

/* el resultado */
.calc__out{
  border:1px solid var(--accent-muted);border-radius:18px;
  padding:clamp(20px,2.6vw,32px);
  background:linear-gradient(160deg,rgba(212,169,75,.07),rgba(11,20,23,.2));
  align-self:stretch;
}
.calc__lbl{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .7rem;
}
.calc__num{
  font-family:var(--d);font-weight:300;
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1;
  color:var(--text-primary);margin:0 0 .5rem;
  font-variant-numeric:tabular-nums;text-wrap:balance;
}
.calc__unit{font-size:.76rem;color:var(--text-secondary);margin:0 0 1.4rem;line-height:1.6}
.calc__warn{
  font-size:.92rem;line-height:1.6;color:var(--text-secondary);
  padding-top:1.1rem;border-top:1px solid var(--line);margin:0 0 1.6rem;
}
.calc__fuente{
  font-size:.68rem;line-height:1.6;color:var(--text-secondary);
  margin:-.9rem 0 1.2rem;letter-spacing:.02em;
}
.calc__warn--gen{
  color:var(--accent);border-top:0;border-left:2px solid var(--accent-muted);
  padding:0 0 0 .9rem;margin-bottom:1.1rem;
}
.calc__cta{width:100%}

@media (max-width:900px){
  .calc__panel{grid-template-columns:1fr}
}
@media (max-width:520px){
  .calc__grid{grid-template-columns:1fr}
}

/* ---------- La prueba ---------- */

.proof__row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,44px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(34px,5vh,58px) 0;
}
.stat{text-align:center}
.stat__n{
  font-family:var(--d);font-weight:300;
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1;margin:0 0 .5rem;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.stat__l{margin:0;color:var(--text-secondary);font-size:.94rem;max-width:22ch;
  margin-left:auto;margin-right:auto}

@media (max-width:700px){
  .proof__row{grid-template-columns:1fr;gap:34px}
}

/* ---------- Servicios ---------- */

.svc{padding:clamp(84px,13vh,160px) var(--gut)}
.svc__intro{max-width:var(--maxw);margin-bottom:clamp(30px,5vh,56px)}
/* Una reticula de una sola pieza: los servicios son una lista, no siete
   tarjetas sueltas, asi que comparten reglas en vez de flotar separados. */
.svc__list{
  list-style:none;margin:0 auto;padding:0;max-width:var(--maxw);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
.svc__item{
  background:var(--canvas);
  padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;gap:.6rem;
  transition:background .5s var(--ease);
}
.svc__item:hover{background:var(--panel)}
/* Siete servicios no llenan cuatro columnas, asi que el primero ocupa dos.
   No es relleno: la valoracion es a donde empuja toda la pagina, y ese peso
   extra la senala como la puerta de entrada. */
@media (min-width:1180px){
  .svc__item:first-child{grid-column:span 2}
  .svc__item:first-child h3{font-size:clamp(1.2rem,1.8vw,1.5rem)}
}
.svc__item h3{
  font-family:var(--d);font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.25;
  color:var(--text-primary);margin:0;
}
.svc__item p{
  margin:0;color:var(--text-secondary);
  font-size:.95rem;line-height:1.6;
}

/* ---------- Preguntas ---------- */

.faq{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(26px,5vw,80px);
  align-items:start;
}
.faq__head{position:sticky;top:110px}
.faq__list{display:grid;gap:0}
.qa{
  border-bottom:1px solid var(--line);
}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;gap:16px;
  padding:1.3rem 0;
  font-family:var(--b);font-weight:700;font-size:1.02rem;
  transition:color .35s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;margin-left:auto;
  width:11px;height:11px;
  border-right:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .45s var(--ease);
}
.qa[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.qa summary:hover{color:var(--accent)}
.qa p{
  margin:0 0 1.5rem;color:var(--text-secondary);max-width:58ch;
  animation:qaIn .5s var(--ease) both;
}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .faq{grid-template-columns:1fr}
  .faq__head{position:static}
}

/* ---------- El cierre ---------- */

.close{
  display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(30px,5vw,84px);
  align-items:start;
}
.office{
  margin-top:2.6rem;padding-top:1.8rem;
  border-top:1px solid var(--line);
  color:var(--text-secondary);
}
.office__l{color:var(--accent);margin:0 0 .7rem}
.office p{margin:0 0 .8rem}
.office__tel{
  font-family:var(--d);font-size:1.4rem;font-weight:300;
  color:var(--text-primary);
  border-bottom:1px solid var(--accent-muted);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.office__tel:hover{color:var(--accent);border-color:var(--accent)}

.form{
  display:grid;grid-template-columns:1fr 1fr;
  gap:16px;
  border:1px solid var(--line);
  border-radius:22px;
  padding:clamp(22px,3vw,40px);
  background:linear-gradient(160deg,rgba(22,39,44,.6),rgba(11,20,23,.34));
}
.field{display:grid;gap:.5rem}
.field--wide{grid-column:1/-1}
.field label{
  font-family:var(--m);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary);
}
.opt{text-transform:none;letter-spacing:0;opacity:.7}
.field input,.field select,.field textarea{
  font-family:var(--b);font-size:.98rem;color:var(--text-primary);
  background:rgba(7,14,17,.6);
  border:1px solid var(--line-strong);
  border-radius:11px;
  padding:.82em .95em;
  width:100%;
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.field textarea{resize:vertical;min-height:88px}
.field input::placeholder,.field textarea::placeholder{color:rgba(158,178,180,.5)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);background:rgba(7,14,17,.85);
}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239EB2B4' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.form__go{grid-column:1/-1;margin-top:.4rem}
.form__note{grid-column:1/-1;color:var(--text-secondary);margin:.2rem 0 0;opacity:.72;
  text-transform:none;letter-spacing:.02em;font-size:.78rem}
.form__err{grid-column:1/-1;color:#E8A0A0;margin:0;font-size:.9rem}
.form__ok{
  grid-column:1/-1;margin:.6rem 0 0;color:var(--accent);
  font-family:var(--d);font-size:1.15rem;font-weight:300;line-height:1.3;
}

@media (max-width:860px){
  .close{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}

/* ---------- La cartera (comprar y alquilar) ---------- */

.cart__head{padding:clamp(120px,17vh,190px) var(--gut) clamp(24px,4vh,44px);max-width:var(--maxw)}
.cart{padding:0 var(--gut) clamp(60px,9vh,110px)}
.cart__filtros{
  max-width:var(--maxw);margin:0 auto clamp(22px,3.4vh,38px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:clamp(12px,1.8vw,20px);align-items:end;
  padding-bottom:clamp(18px,2.6vh,28px);border-bottom:1px solid var(--line);
}
/* La etiqueta envuelve al campo, que los asocia sin necesidad de id y deja
   que varias carteras conviviesen en un mismo documento. */
.cart__filtros label{display:flex;flex-direction:column;gap:.45rem}
.cfield__t{
  font-family:var(--m);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);
}
.cart__cuenta{color:var(--text-secondary);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 .7rem;justify-self:end}

.cart__grid{
  list-style:none;margin:0 auto;padding:0;max-width:var(--maxw);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(18px,2.4vw,30px);
}
.inm{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(22,39,44,.5),rgba(11,20,23,.28));
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.inm:hover{border-color:var(--accent-muted);transform:translateY(-3px)}
.inm--dest{border-color:var(--accent-muted)}
.inm__foto{position:relative;aspect-ratio:4/3;background:var(--panel);overflow:hidden}
.inm__foto img{width:100%;height:100%;object-fit:cover;display:block}
.inm__foto--sin{display:grid;place-items:center;color:var(--text-secondary);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.inm__flag{
  position:absolute;top:12px;left:12px;
  background:var(--accent);color:#20170a;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:999px;
}
.inm__cuerpo{padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:.55rem;flex:1}
.inm__sitio{color:var(--accent);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin:0}
.inm__t{font-family:var(--d);font-weight:500;font-size:1.1rem;line-height:1.28;margin:0;color:var(--text-primary)}
.inm__datos{margin:0;color:var(--text-secondary);font-size:.9rem}
.inm__tags{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.inm__tags li{
  font-family:var(--m);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary);border:1px solid var(--line);
  padding:.24rem .55rem;border-radius:999px;
}
.inm__precio{
  font-family:var(--d);font-weight:500;font-size:1.35rem;
  color:var(--text-primary);margin:.5rem 0 0;font-variant-numeric:tabular-nums;
}
.inm__mes{font-family:var(--b);font-size:.8rem;color:var(--text-secondary)}
.inm__cta{margin-top:auto;align-self:flex-start}

.cart__vacio{
  max-width:640px;margin:clamp(30px,6vh,70px) auto;text-align:center;
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(28px,4vw,52px);
  background:linear-gradient(160deg,rgba(22,39,44,.44),rgba(11,20,23,.24));
}
.cart__vacio-t{font-family:var(--d);font-size:clamp(1.2rem,2.2vw,1.6rem);
  color:var(--text-primary);margin:0 0 .7rem}
.cart__vacio p{color:var(--text-secondary);line-height:1.6;margin:0}
.cart__vacio-btns,.cart__cierre-btns{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:1.8rem;
}
.cart__cierre{padding:clamp(60px,9vh,120px) var(--gut) clamp(80px,12vh,150px);
  border-top:1px solid var(--line)}
.cart__cierre-in{max-width:640px;margin:0 auto;text-align:center}
.cart__cierre-in .lede{margin-top:.8rem}

@media (max-width:900px){
  .cart__filtros{grid-template-columns:1fr 1fr}
  .cart__cuenta{grid-column:1 / -1;justify-self:start;margin:0}
}
@media (max-width:520px){
  .cart__filtros{grid-template-columns:1fr}
}

/* ---------- Pie ---------- */

.foot{
  position:relative;z-index:1;
  border-top:1px solid var(--line);
  padding:clamp(46px,7vh,80px) var(--gut) 30px;
  background:var(--canvas-deep);
}
.foot__top{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(28px,5vw,80px);align-items:start;
}
.foot__cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,44px);
  color:var(--text-secondary);font-size:.94rem;
}
.foot__l{color:var(--accent);margin:0 0 .7rem}
.foot__cols p{margin:0}
.foot__cols a{border-bottom:1px solid transparent;transition:border-color .35s var(--ease),color .35s var(--ease)}
.foot__cols a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot__bar{
  max-width:var(--maxw);margin:clamp(34px,5vh,58px) auto 0;
  padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:var(--text-secondary);font-size:.8rem;
}
.foot__bar p{margin:0}
.foot__note{opacity:.66;max-width:52ch}

@media (max-width:760px){
  .foot__top{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr 1fr}
}

/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important;
  }
  body{opacity:1}
  .reveal .part{opacity:1;transform:none}
  .premise__body .beat{opacity:1;transform:none}
  .gate__line{stroke-dashoffset:0}
  .thread i{transform:scaleY(1)}
  .zones__line{opacity:1;transform:none}
}
.rm .reveal .part{opacity:1;transform:none}
.rm .premise__body .beat{opacity:1;transform:none}
.rm .gate__line{stroke-dashoffset:0}
.rm .thread i{transform:scaleY(1)}
.rm .zones__line{opacity:1;transform:none}

/* pausa global de animaciones */
body.paused *,body.paused *::before,body.paused *::after{
  animation-play-state:paused!important;
}