*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  color-scheme:dark;
  --background:#030303;
  --ink:#f4f4f4;
  --zinc-100:#f4f4f5;
  --zinc-500:#71717a;
  --red:#ff2f2f;
  --no-grad:linear-gradient(180deg,#d7dbe1 0%,#c6ccd1 52%,#969daa 100%);
  --font-inter:"Inter",system-ui,sans-serif;
  --font-dm-serif:"DM Serif Display",Georgia,serif;
  --font-cal-sans:"Cal Sans","Inter",sans-serif;
  /* NUNCA estuvo definida y la usaban 14 reglas. Un var() inexistente
     invalida la propiedad entera, asi que esas 14 transiciones y
     animaciones corrian sin easing (instantaneas). */
  --ease:cubic-bezier(.16,1,.3,1);
  --ast:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Crect x='43' y='3' width='14' height='94' rx='7'/%3E%3Crect x='43' y='3' width='14' height='94' rx='7' transform='rotate(45 50 50)'/%3E%3Crect x='43' y='3' width='14' height='94' rx='7' transform='rotate(90 50 50)'/%3E%3Crect x='43' y='3' width='14' height='94' rx='7' transform='rotate(135 50 50)'/%3E%3C/g%3E%3C/svg%3E");
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--background);
  color:var(--ink);
  font-family:var(--font-inter);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.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}

.page{position:relative;background:var(--background)}
.content-layer{position:relative;z-index:10;background:var(--background)}
.black-wrap{position:relative;z-index:10;background:#000}
.bg-wrap{position:relative;width:100%;background:var(--background)}

.ast{
  display:inline-block;
  background-color:currentColor;
  -webkit-mask-image:var(--ast);mask-image:var(--ast);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  animation:spin-continuous 5s linear infinite;
}
@keyframes spin-continuous{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.ast{animation:none}}

.display{
  max-width:1220px;
  font-family:var(--font-inter);
  font-size:clamp(3.6rem,17.5vw,9.6rem);
  font-weight:680;
  line-height:.92;
  letter-spacing:-.058em;
  color:var(--zinc-100);
}
.display em{
  font-style:italic;
  font-weight:400;
  letter-spacing:-.025em;
  font-family:var(--font-dm-serif);
}
.display .ln{display:block}
.display .ln-2{margin-top:.05em}
.sub{
  font-family:var(--font-inter);
  font-size:clamp(1.55rem,5.6vw,3rem);
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--zinc-500);
}
.sub .nb{white-space:nowrap}
.only-desk{display:none}
.only-mobile{display:block}
p.sub .only-mobile{display:block}

@media (max-width:360px){
  .display{font-size:clamp(3.1rem,14.8vw,7.2rem)}
  .sub{font-size:clamp(1.35rem,4.6vw,2.4rem)}
}
@media (min-width:640px){
  .display{font-size:clamp(4rem,12.8vw,9.6rem)}
  .sub{font-size:clamp(1.7rem,3.8vw,3rem)}
}
@media (min-width:768px){
  .display{font-size:clamp(4.5rem,11.2vw,10.1rem)}
  .sub{font-size:clamp(1.75rem,3.2vw,3.2rem)}
}
@media (min-width:1024px){
  .display{font-size:clamp(3.6rem,8.7vw,10.1rem)}
  .sub{font-size:clamp(1rem,1.6vw,2.2rem)}
  .only-desk{display:block}
  .only-mobile{display:none}
  p.sub .only-desk{display:inline}
  p.sub .only-mobile{display:none}
}
@media (min-width:1280px){
  .display{font-size:clamp(4.1rem,7.9vw,11.1rem);max-width:1360px}
  .sub{font-size:clamp(1.1rem,1.5vw,2.4rem)}
}
@media (min-width:1536px){
  .display{font-size:clamp(4.4rem,6.8vw,11.9rem);max-width:1480px}
  .sub{font-size:clamp(1.2rem,1.35vw,2.6rem)}
}

.s01{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#000}
.grain{position:absolute;inset:0;z-index:-10;opacity:.7;pointer-events:none;width:100%;height:100%}

.hero-figure{display:none}
@media (min-width:1024px){
  .hero-figure{
    position:absolute;left:50%;bottom:-6vh;top:auto;z-index:10;
    transform:translateX(-50%);
    height:min(93vh,980px);width:auto;overflow:visible;
    display:flex;align-items:flex-end;justify-content:center;
    will-change:transform;pointer-events:none;
  }
  .hero-img{
    height:100%;width:auto;min-width:0;max-width:none;
    object-fit:contain;object-position:bottom center;
    filter:contrast(1.05) saturate(1.02);
  }
}

.hero-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(62% 50% at 50% 74%,rgba(206,36,32,.50) 0%,rgba(196,42,38,0) 68%),
    radial-gradient(52% 42% at 14% 18%,rgba(232,116,48,.24) 0%,rgba(230,120,52,0) 66%),
    radial-gradient(56% 44% at 90% 12%,rgba(206,36,32,.24) 0%,rgba(196,42,38,0) 64%),
    radial-gradient(86% 64% at 50% 116%,rgba(104,20,24,.78) 0%,rgba(12,6,7,0) 74%);
}
@media (min-width:1024px){
  .hero-glow{
    background:
      radial-gradient(50% 62% at 50% 60%,rgba(206,36,32,.54) 0%,rgba(196,42,38,0) 70%),
      radial-gradient(46% 42% at 11% 24%,rgba(232,116,48,.26) 0%,rgba(230,120,52,0) 64%),
      radial-gradient(46% 40% at 90% 16%,rgba(206,36,32,.24) 0%,rgba(196,42,38,0) 62%),
      radial-gradient(80% 56% at 50% 112%,rgba(104,20,24,.72) 0%,rgba(12,6,7,0) 76%);
  }
}

.hero-m{position:relative;z-index:5;min-height:100vh;min-height:100svh;width:100%}
@media (min-width:1024px){.hero-m{display:none}}

.hero-m-top{
  position:absolute;left:.5rem;right:.5rem;top:.75rem;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
}
@media (min-width:640px){.hero-m-top{left:.75rem;right:.75rem;top:1rem}}
@media (min-width:768px){.hero-m-top{left:1rem;right:1rem;top:1.25rem}}
.hero-m-menu{
  font-family:var(--font-inter);font-size:.86rem;font-weight:500;
  text-transform:uppercase;letter-spacing:-.01em;color:#d4d4d8;
}
.hero-m-right{
  display:flex;align-items:center;gap:.375rem;
  max-width:74vw;white-space:nowrap;
  font-family:var(--font-inter);font-size:.86rem;letter-spacing:-.01em;
}
@media (min-width:640px){
  .hero-m-menu,.hero-m-right{font-size:.93rem}
  .hero-m-right{max-width:70vw;gap:.5rem}
}
@media (min-width:768px){
  .hero-m-menu,.hero-m-right{font-size:1rem}
  .hero-m-right{max-width:66vw}
}
.hero-m-right a{text-transform:uppercase;color:#d4d4d8;transition:color .3s ease}
.hero-m-right a:hover{color:#f4f4f5}
.hero-m-dot{color:#ff3a3a}
.hero-m-acct{
  max-width:38vw;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid rgba(244,244,245,.9);padding-bottom:1px;
  text-align:right;color:#f4f4f5;
}
@media (min-width:640px){.hero-m-acct{max-width:32vw}}
@media (min-width:768px){.hero-m-acct{max-width:30vw}}

.hero-m-bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:center;
}
.hero-m-stack{position:relative;width:min(97vw,452px);margin-bottom:-4vh}
@media (min-width:640px){.hero-m-stack{width:min(88vw,500px)}}
@media (min-width:768px){.hero-m-stack{width:min(76vw,540px)}}

.hero-m-no{
  position:absolute;left:50%;top:clamp(-96px,-17vw,-62px);z-index:10;
  transform:translateX(-50%);
  font-family:var(--font-cal-sans);
  font-size:clamp(10.8rem,56vw,19.2rem);
  line-height:.82;letter-spacing:-.038em;
  background:var(--no-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  pointer-events:none;
}
@media (min-width:640px){.hero-m-no{top:clamp(-104px,-14vw,-72px)}}
@media (min-width:768px){.hero-m-no{top:clamp(-112px,-11vw,-80px)}}

/* centrado con flex, NO con translateX(-50%): gsap anima `y` en la intro y
   pisaria el transform entero, tirando la fila a la izquierda. */
.hero-m-cta{
  position:absolute;left:0;right:0;top:auto;z-index:40;
  bottom:calc(1.6rem + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:center;gap:.625rem;
  padding:0 1rem;
}
@media (min-width:640px){.hero-m-cta{bottom:calc(2rem + env(safe-area-inset-bottom,0px));gap:.75rem}}
@media (min-width:768px){.hero-m-cta{bottom:calc(2.4rem + env(safe-area-inset-bottom,0px))}}

/* menu de idioma: abre hacia arriba porque el boton vive abajo */
.hero-m-cta .lang-menu{
  top:auto;bottom:calc(100% + .75rem);
  transform-origin:bottom left;
}
/* el selector de idioma es secundario: no puede competir con el boton rojo.
   estaba a 1.65rem (26px) al lado de un CTA de 0.92rem. */
.hero-m-cta .lang-name{font-size:.95rem;font-weight:500;letter-spacing:-.01em}
@media (min-width:640px){.hero-m-cta .lang-name{font-size:1.02rem}}
@media (min-width:768px){.hero-m-cta .lang-name{font-size:1.08rem}}
.hero-m-cta .lang-flag{font-size:1.05rem}
.hero-m-cta .lang-chev{width:.85rem;height:.85rem}
.hero-m-cta .lang-btn{gap:.4rem}
.hero-m-cta .lang{max-width:46vw}
@media (min-width:640px){.hero-m-cta .lang{max-width:42vw}}
@media (min-width:768px){.hero-m-cta .lang{max-width:38vw}}
.hero-m-pill{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  height:2.62rem;min-width:7.7rem;padding:0 .98rem;
  border-radius:999px;background:var(--red);color:#fff;
  font-size:.92rem;font-weight:650;line-height:1;
  text-transform:uppercase;letter-spacing:-.015em;white-space:nowrap;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.hero-m-pill:hover{transform:scale(1.02)}
@media (min-width:640px){.hero-m-pill{height:2.78rem;min-width:8.1rem;padding:0 1.08rem;font-size:.97rem}}
@media (min-width:768px){.hero-m-pill{height:2.96rem;min-width:8.6rem;padding:0 1.16rem;font-size:1.02rem}}
.hero-m-img{position:relative;z-index:20;width:100%;height:auto;display:block}

.hero-left{display:none}
@media (min-width:1024px){
  .hero-left{
    position:absolute;left:10.6vw;bottom:0;top:0;z-index:30;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:22vh;pointer-events:none;
    will-change:transform,opacity;
  }
  .hero-left > *{pointer-events:auto}
}
.drop-no{
  font-family:var(--font-cal-sans);
  font-size:clamp(5.6rem,10.6vw,8.8rem);
  line-height:.86;letter-spacing:-.03em;
  background:var(--no-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (min-width:1024px){.drop-no{font-size:clamp(6.6rem,12.3vw,10.45rem);line-height:.84}}
@media (min-width:1280px){.drop-no{font-size:clamp(7.2rem,11.8vw,11.8rem)}}
@media (min-width:1536px){.drop-no{font-size:clamp(7.6rem,11.2vw,12.6rem)}}
.hero-row{
  margin-top:1.5rem;position:relative;
  display:flex;align-items:center;gap:.95rem;flex-wrap:wrap;
}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:.5rem;color:#fff}
.lang-chev{width:1.05rem;height:1.05rem;opacity:.9;transition:transform .3s ease}
.lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}
.lang-flag{
  display:inline-block;flex:0 0 auto;
  width:1.55em;height:1.06em;border-radius:3px;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
  font-size:.92rem;
}
.lang-flag[data-flag="es"],.lang-flag.is-es{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23c60b1e'/%3E%3Crect y='1.5' width='9' height='3' fill='%23ffc400'/%3E%3C/svg%3E");
}
.lang-flag[data-flag="en"],.lang-flag.is-en{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 100'%3E%3Crect width='190' height='100' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect y='0' width='190' height='7.7'/%3E%3Crect y='15.4' width='190' height='7.7'/%3E%3Crect y='30.8' width='190' height='7.7'/%3E%3Crect y='46.2' width='190' height='7.7'/%3E%3Crect y='61.5' width='190' height='7.7'/%3E%3Crect y='76.9' width='190' height='7.7'/%3E%3Crect y='92.3' width='190' height='7.7'/%3E%3C/g%3E%3Crect width='76' height='53.8' fill='%233c3b6e'/%3E%3C/svg%3E");
}
.lang-menu .lang-flag{font-size:1rem}
.lang-name{font-size:clamp(1.05rem,1.35vw,1.32rem);font-weight:730;letter-spacing:-.03em}
.lang-menu{
  position:absolute;top:calc(100% + .75rem);left:-.5rem;z-index:60;
  min-width:14.5rem;padding:.5rem;
  border-radius:20px;background:#1c1c1e;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 26px 64px rgba(0,0,0,.72);
  display:flex;flex-direction:column;gap:.1rem;
  transform-origin:top left;
}
.lang-menu button{
  display:flex;align-items:center;gap:.8rem;
  padding:.72rem .85rem;border-radius:14px;
  font-size:1.02rem;font-weight:500;letter-spacing:-.02em;color:#f2f2f5;
  transition:background .2s ease;
}
.lang-menu button:hover{background:#242427}
.lang-menu button.is-on{background:#2c2c2f}
.hero-pill{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--red);color:#fff;
  padding:.82rem 1.6rem;font-size:clamp(.86rem,1.02vw,1rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.004em;white-space:nowrap;
  transition:transform .3s cubic-bezier(.16,1,.3,1),filter .3s ease;
}
.hero-pill:hover{transform:translateY(-2px);filter:brightness(1.1)}

.hero-nav{display:none}
@media (min-width:1024px){
  .hero-nav{
    position:absolute;right:10vw;top:0;bottom:0;z-index:30;
    display:flex;flex-direction:column;align-items:flex-start;
    justify-content:center;padding-top:18vh;pointer-events:none;
    will-change:transform,opacity;
  }
  .hero-nav > *{pointer-events:auto}
}
.hnav{
  font-size:clamp(1.5rem,3.4vw,4.4rem);
  display:flex;align-items:flex-end;gap:.26em;
  color:#cdd5da;text-align:left;
  transition:color .35s ease;
}
.hnav:hover{color:#fff}
.hnav + .hnav{margin-top:-.30em}
.hnav[data-off="1"]{margin-left:1.4rem}
.hnav[data-off="2"]{margin-left:3.4rem}
@media (max-width:1023.98px){
  .hnav[data-off="1"]{margin-left:.6rem}
  .hnav[data-off="2"]{margin-left:1.6rem}
}
.hidx{
  font-family:var(--font-dm-serif);font-style:italic;
  font-size:.32em;line-height:1;
  transform:translateY(-1.2em);
  opacity:.9;flex:0 0 auto;
}
.hmask{
  display:block;overflow:hidden;padding:.16em 0 .22em;
  flex:0 0 auto;min-width:max-content;
}
.hintro{display:block;transform:translateY(118%)}
.hroll{
  display:block;
  font-weight:560;letter-spacing:-.035em;line-height:.92;
  white-space:nowrap;
}
.hchar{display:inline-block;position:relative;vertical-align:top}
.hci{
  display:block;
  transition:transform .34s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i,0) * 18ms);
  will-change:transform;
}
.hci i{display:block;font-style:normal;white-space:pre}
.hci i + i{position:absolute;top:calc(100% + .38em);left:0}
@media (hover:hover){
  .hnav:hover .hci{transform:translateY(calc(-100% - .38em))}
}
.hnav:focus-visible .hci,
.hnav.is-rolling .hci{transform:translateY(calc(-100% - .38em))}
.hnav.is-resetting .hci{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){.hci{transition:none;transition-delay:0s}}

.s02{
  position:relative;z-index:10;background:#000;
  height:420vh;min-height:420svh;
}
@media (min-width:640px){.s02{height:390vh;min-height:390svh}}
@media (min-width:768px){.s02{height:360vh;min-height:360svh}}
@media (min-width:1024px){.s02{height:320vh;min-height:320svh}}

.s02-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:visible}

.trail-stage{
  position:absolute;inset:0;z-index:10;
  overflow:hidden;pointer-events:none;
}
.tr-item{
  position:absolute;top:0;left:0;
  border-radius:16px;overflow:hidden;
  opacity:0;transition:opacity .8s ease;
  will-change:transform,opacity;
  box-shadow:0 26px 64px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.07);
}
.tr-item.is-in{opacity:var(--do,1)}

.wd{
  opacity:var(--o,.16);
  text-shadow:0 0 var(--g,0px) rgba(255,47,47,.6);
  will-change:opacity;
}
.tr-item img,.tr-item video{
  width:100%;height:100%;object-fit:cover;display:block;background:#0b0405;
  filter:blur(var(--db,0px));
}
@media (prefers-reduced-motion:reduce){.trail-stage{display:none}}
.s02-inner{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:6rem 1.5rem;pointer-events:none;
}
@media (min-width:640px){.s02-inner{padding:6rem 2.5rem}}
.s02-copy{
  margin:0 auto;width:100%;max-width:1320px;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
}
@media (min-width:640px){.s02-copy{align-items:center;text-align:center}}
@media (min-width:1280px){.s02-copy{max-width:1480px}}
@media (min-width:1536px){.s02-copy{max-width:1600px}}
.s02-copy .sub{margin-top:2rem}
.s02-curtain{
  position:absolute;left:0;right:0;top:0;z-index:90;
  height:100vh;pointer-events:none;
  transform:translate3d(0,106vh,0);
  will-change:transform;
}

.gap-40{height:40svh;background:#000}
@media (max-width:767.98px){.gap-40{height:0}}

.s02b{position:relative;width:100%;overflow:visible;isolation:isolate}
@media (max-width:1023.98px){.s02b{margin-top:-30vh}}
.s02b-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:visible}
.s02b-inner{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:6rem 1.5rem;text-align:center;color:#fff;
  mix-blend-mode:exclusion;pointer-events:none;
}
@media (min-width:640px){.s02b-inner{padding:6rem 2.5rem}}
.s02b-copy{
  margin:0 auto;width:100%;max-width:1320px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
@media (min-width:1280px){.s02b-copy{max-width:1480px}}
@media (min-width:1536px){.s02b-copy{max-width:1600px}}
.s02b-copy .sub{margin-top:.75rem}

.grid-trail{position:relative;z-index:0;margin-bottom:2vh;padding-bottom:3rem;overflow:visible}
@media (max-width:1023.98px){.grid-trail{margin-bottom:0;padding-bottom:120svh}}
.trow{display:flex;width:100%;overflow:visible}
.cell{aspect-ratio:1/1;flex:0 0 30%}
@media (min-width:640px){.cell{flex:1 1 0%}}
.ph{position:relative;height:100%;width:100%}
.ph-in{
  position:relative;height:100%;width:100%;
  will-change:transform;transform:scale(0);
}
.ph-in img{
  height:100%;width:100%;object-fit:cover;
  filter:contrast(1.2);
  transition:transform .5s ease-in-out;
}
.ph-in:hover img{transform:scale(.95)}
.ph-lab{
  position:absolute;bottom:-.5rem;left:0;
  display:flex;width:100%;justify-content:space-between;
  transform:translateY(100%);
  padding-bottom:1rem;
  font-size:.62rem;line-height:1.15;text-transform:uppercase;opacity:.4;
}
@media (min-width:640px){.ph-lab{font-size:.875rem}}

.s03{
  position:relative;width:100%;min-height:100svh;
  background:#050505;overflow:hidden;z-index:10;
}
.mask-stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 1.5rem;
}
.mask-text{
  font-family:var(--font-inter);
  font-size:clamp(2.6rem,9vw,7.5rem);
  font-weight:680;line-height:.95;letter-spacing:-.055em;
  text-align:center;max-width:16ch;
  background:linear-gradient(90deg,#fff 0%,#fff 50%,#2a2a2e 50%,#2a2a2e 100%);
  background-size:200% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.s04{position:relative;z-index:20;background:#000;color:#fff}
.s04-wrap{margin:0 auto;width:100%;max-width:1400px;padding:4rem 1.5rem 7rem}
@media (min-width:640px){.s04-wrap{padding:4rem 2.5rem 8rem}}
@media (min-width:1024px){.s04-wrap{padding:6rem 3rem 9rem}}
.s04-grid{display:grid;gap:2.5rem;justify-items:center}
@media (min-width:640px){.s04-grid{grid-template-columns:1fr 1fr;gap:3rem}}
@media (min-width:1024px){.s04-grid{gap:2rem}}
.pcard{display:flex;width:100%;max-width:420px;flex-direction:column;align-items:center;text-align:center}
@media (min-width:1024px){
  .s04-grid .pcard:first-child{justify-self:start}
  .s04-grid .pcard:last-child{justify-self:end}
}
.pcard-img{position:relative;width:100%;overflow:hidden;border-radius:28px;background:#000;aspect-ratio:1664/2514}
.pcard-img img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pcard:hover .pcard-img img{transform:scale(1.045)}
.pcard-meta{margin-top:1.25rem}
.pc-t{font-size:1.12rem;font-weight:600;letter-spacing:-.02em}
.pc-s{margin-top:.25rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.28em;color:#7b7b7b}
.pc-p{margin-top:.25rem;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:#f2f2f2}

.s05{position:relative;z-index:20;background:#000;color:#fff}
.s05-wrap{margin:0 auto;width:100%;max-width:1400px;padding:2rem 1.5rem 8rem}
@media (min-width:640px){.s05-wrap{padding:3rem 2.5rem 9rem}}
@media (min-width:1024px){.s05-wrap{padding:4rem 3rem 10rem}}
.s05-head{margin-bottom:2.5rem}
.s05-eyebrow{
  display:flex;align-items:baseline;gap:.85rem;margin-bottom:1.1rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.28em;color:#7b7b83;
}
.s05-no{
  font-size:1.05rem;font-weight:760;letter-spacing:-.03em;
  background:linear-gradient(180deg,#f3f5f7,#8d949c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.display.sm{font-size:clamp(2.6rem,10vw,5.4rem)}
@media (min-width:1024px){.display.sm{font-size:clamp(3rem,5.4vw,6.4rem)}}
.s05-head .sub{margin-top:.9rem}

.ai-search{
  display:flex;align-items:center;gap:.75rem;
  border-bottom:1px solid #26262b;padding-bottom:1rem;
}
.ai-input{
  flex:1;background:none;border:0;outline:none;color:#f4f4f5;
  font-family:var(--font-inter);
  font-size:clamp(1.1rem,3.4vw,1.9rem);font-weight:600;letter-spacing:-.03em;
}
.ai-input::placeholder{color:#48484f}
.ai-go{
  border-radius:999px;background:#fff;color:#000;
  padding:.72rem 1.5rem;font-size:.92rem;font-weight:650;
  text-transform:uppercase;letter-spacing:-.018em;white-space:nowrap;
  transition:transform .25s ease,opacity .25s ease;
}
.ai-go:hover{transform:translateY(-2px)}
.mkt-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chip{
  border-radius:999px;padding:.52rem 1.05rem;
  border:1px solid rgba(255,255,255,.14);background:transparent;
  font-size:.82rem;font-weight:520;letter-spacing:-.01em;color:#9a9aa3;
  text-transform:lowercase;transition:all .25s ease;
}
.chip:hover{border-color:rgba(255,255,255,.32);color:#e4e4e8}
.chip.is-on{background:var(--red);border-color:var(--red);color:#fff}
.ai-state{margin-top:1.1rem;font-size:.9rem;color:#8a8a93;letter-spacing:-.01em}

.mkt-grid{
  margin-top:3rem;display:grid;gap:1.6rem 1.2rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){.mkt-grid{grid-template-columns:repeat(3,1fr);gap:2.2rem 1.6rem}}
@media (min-width:1280px){.mkt-grid{grid-template-columns:repeat(4,1fr)}}
.mkt-card{text-align:left;display:flex;flex-direction:column}
.mkt-img{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:4/3;background:#111}
.mkt-img img{height:100%;width:100%;object-fit:cover;filter:contrast(1.2);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.mkt-card:hover .mkt-img img{transform:scale(1.06)}
.mkt-p{margin-top:.85rem;font-size:1.02rem;font-weight:650;letter-spacing:-.02em}
.mkt-a{margin-top:.2rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:#7b7b7b}
.mkt-s{margin-top:.35rem;font-size:.82rem;color:#9a9aa3;letter-spacing:-.01em}

.footer-spacer{pointer-events:none;height:100svh}
.footer-fixed{position:fixed;bottom:0;left:0;z-index:0;width:100%}
.site-footer{position:relative;height:100vh;height:100svh;width:100%;overflow:hidden}
.footer-bg{position:absolute;inset:0;background:#000}
.footer-mesh{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 18% 12%,rgba(196,42,38,.42) 0%,rgba(196,42,38,0) 62%),
    radial-gradient(60% 45% at 86% 8%,rgba(230,120,52,.30) 0%,rgba(230,120,52,0) 60%),
    radial-gradient(85% 60% at 50% 108%,rgba(84,20,26,.72) 0%,rgba(20,8,10,0) 68%),
    linear-gradient(180deg,#120608 0%,#070405 46%,#000 100%);
}
.footer-body{position:relative;z-index:20;display:flex;height:100%;width:100%;flex-direction:column}
.footer-links{position:relative;z-index:30;width:100%;padding:7vh 7vw 0}
@media (min-width:1024px){.footer-links{padding:5vh min(4vw,3.2rem) 0}}
.fl-mobile{display:flex;width:100%;align-items:flex-start;justify-content:space-between}
.fl-desk{display:none}
@media (min-width:1024px){
  .fl-mobile{display:none}
  .fl-desk{display:flex;align-items:flex-start;justify-content:space-between}
}
.fl-col{position:relative;z-index:20;display:flex;flex-direction:column;gap:1.3vh}
@media (min-width:1024px){.fl-col{gap:1.2vh}}
.fl-col a,.fl-col button{
  color:#fff;font-size:min(4.2vw,2rem);font-weight:430;line-height:1.2;
  text-align:left;transition:opacity .3s ease;
}
@media (min-width:640px){.fl-col a,.fl-col button{font-size:min(3.1vw,1.9rem)}}
@media (min-width:1024px){.fl-col a,.fl-col button{font-size:min(1.9vw,1.6rem)}}
.fl-col a:hover,.fl-col button:hover{text-decoration:underline}
/* en telefono el texto mide 19px de alto y eso era TODO el area tapeable.
   el padding la sube sin mover el texto de sitio (la separacion baja lo mismo). */
@media (max-width:1023px){
  .fl-col{gap:0}
  .fl-col a,.fl-col button{padding-block:.55rem}
  .fl-gap{margin-top:calc(3vh - .55rem)}
  .fl-gap2{margin-top:calc(3.2vh - .55rem);gap:0}
}
.fl-gap{margin-top:3vh}
.fl-gap2{margin-top:3.2vh;display:flex;flex-direction:column;gap:1.3vh}
.mt3{margin-top:3vh}
.fl-right{margin-left:auto;display:flex;align-items:flex-start;gap:min(7vw,5.6rem);padding-right:min(20vw,16rem)}

/* la cuerdita con el carnet: estaba display:none y solo aparecia en pc.
   en telefono tambien va — mas chica y corrida para no chocar con el texto. */
.lanyard{position:absolute;inset:0;z-index:30;display:block;pointer-events:none}
.lanyard-rope{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lanyard-card{
  position:absolute;top:0;left:0;
  width:206px;height:296px;
  transform-origin:0 0;
  pointer-events:auto;cursor:grab;
  will-change:transform;
}
.lanyard-card:active{cursor:grabbing}
@media (max-width:1023px){
  .lanyard{left:auto;right:-2%;width:56%}
  .lanyard-card{transform-origin:top center}
}
.lc-face{
  position:relative;height:100%;width:100%;border-radius:18px;overflow:hidden;
  background:linear-gradient(168deg,#16161a 0%,#0a0a0c 62%,#101013 100%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 30px 64px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;flex-direction:column;
}
.lc-slot{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:44px;height:7px;border-radius:4px;
  background:#000;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08);
}
.lc-brand{
  margin:26px auto 0;
  display:inline-flex;align-items:baseline;justify-content:center;
  font-family:var(--font-cal-sans);font-weight:200;font-size:2.35rem;
  line-height:.9;letter-spacing:-.02em;color:#fff;
}
.lc-brand .ast.sm{width:.56em;height:.56em;margin:0 -.01em;transform:translateY(.02em)}
.lc-photo{
  margin-top:14px;flex:1;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 6%,#3a1416 0%,#0a0a0c 72%);
  display:flex;align-items:flex-end;justify-content:center;
}
.lc-photo img{width:110%;max-width:none;height:100%;object-fit:cover;object-position:top center;filter:contrast(1.06)}
.lc-face::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(var(--gloss,118deg),
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.055) 43%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.03) 57%,
    rgba(255,255,255,0) 70%);
}

.footer-mark{
  position:absolute;bottom:0;left:0;right:0;z-index:20;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:4vh;pointer-events:none;
}
.wordmark{
  display:inline-flex;align-items:baseline;white-space:nowrap;text-align:center;
  font-family:var(--font-cal-sans);font-weight:200;
  font-size:min(33vw,29vh);
  line-height:.78;letter-spacing:-.02em;color:#fff;
}
.wordmark .ast{width:.54em;height:.54em;margin:0 -.02em;transform:translateY(.02em)}
@media (min-width:640px){.wordmark .ast{width:.52em;height:.52em;transform:translateY(.04em)}}
@media (min-width:768px){.wordmark .ast{width:.56em;height:.56em;margin:0 -.008em;transform:translateY(.02em)}}
@media (min-width:1024px){
  .wordmark{font-size:clamp(28vw,33vw,40vw)}
  .wordmark .ast{width:.58em;height:.58em;margin:0 -.006em;transform:translateY(.006em)}
}

.explore-pill{
  position:fixed;right:1.25rem;top:1.75rem;z-index:130;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:#fff;color:#000;
  padding:.84rem 1.48rem;font-size:.96rem;font-weight:650;
  text-transform:uppercase;letter-spacing:-.018em;
  opacity:0;pointer-events:none;will-change:transform,opacity;
}
@media (min-width:640px){.explore-pill{right:2rem;top:2.25rem;padding:.92rem 1.62rem;font-size:1.02rem}}
@media (min-width:768px){.explore-pill{right:2.25rem;top:2.5rem;padding:1.1rem 1.98rem;font-size:1.12rem}}
@media (min-width:1024px){.explore-pill{right:2.5rem;top:2rem;padding:.86rem 1.55rem;font-size:.98rem}}

/* ===== ASISTENTE: burbuja chica que morfea =====
   Antes era una pastilla de 187px de ancho puesta abajo a la derecha, y en
   iPhone tapaba "SEE HOMES" ENTERO (123 de 123 px medidos) y tambien el
   selector de idioma. Ahora es un circulo de 56px, y en telefono sube por
   encima de la fila del hero para no tocar nada.
   Todo el ciclo anima solo transform y opacity: no repinta. */
.ava{position:fixed;right:1.25rem;bottom:1.25rem;z-index:140}
@media (max-width:1023px){
  /* la fila del hero (idioma + SEE HOMES) vive abajo del todo: la burbuja
     se sube para dejarla libre. */
  .ava{right:1rem;bottom:6rem}
}

.ava-bubble{
  position:relative;display:grid;place-items:center;
  width:56px;height:56px;padding:0;border-radius:50%;
  background:#0a0a0d;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 0 rgba(255,47,47,.45);
  transition:transform .35s var(--ease),box-shadow .45s ease,border-color .35s ease;
  cursor:pointer;
}
@media (max-width:1023px){.ava-bubble{width:52px;height:52px}}
.ava-bubble:hover{transform:scale(1.07);border-color:rgba(255,47,47,.55)}
.ava-bubble:active{transform:scale(.96)}
.ava-bubble:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* latido suave: avisa que esta vivo sin gritar */
@keyframes ava-halo{
  0%,72%,100%{box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 0 rgba(255,47,47,.45)}
  84%{box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 12px rgba(255,47,47,0)}
}
.ava-bubble{animation:ava-halo 6s var(--ease) infinite}

.ava-morph{position:relative;display:block;width:28px;height:28px}
.ava-morph svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ava-morph g{transform-origin:16px 16px}

/* 1. asterisco: gira siempre; entra y sale del ciclo */
.am-ast{animation:ava-spin 4.5s linear infinite}
@keyframes ava-spin{to{transform:rotate(1turn)}}
.ava-morph .g-ast{animation:ava-ast 6.5s var(--ease) infinite}
@keyframes ava-ast{
  0%,24%{opacity:1;transform:scale(1)}
  32%,90%{opacity:0;transform:scale(.35)}
  100%{opacity:1;transform:scale(1)}
}

/* 2. globo de chat */
.ava-morph .g-chat{opacity:0;animation:ava-chat 6.5s var(--ease) infinite}
@keyframes ava-chat{
  0%,26%{opacity:0;transform:scale(.35) rotate(-22deg)}
  35%,55%{opacity:1;transform:scale(1) rotate(0)}
  63%,100%{opacity:0;transform:scale(.4) rotate(16deg)}
}
.ava-morph .g-chat circle{animation:ava-dot 6.5s var(--ease) infinite}
.ava-morph .g-chat circle:nth-of-type(2){animation-delay:.11s}
.ava-morph .g-chat circle:nth-of-type(3){animation-delay:.22s}
@keyframes ava-dot{
  0%,35%,55%,100%{transform:translateY(0)}
  43%{transform:translateY(-2.6px)}
}

/* 3. carita */
.ava-morph .g-face{opacity:0;animation:ava-face 6.5s var(--ease) infinite}
@keyframes ava-face{
  0%,58%{opacity:0;transform:scale(.45)}
  68%,84%{opacity:1;transform:scale(1)}
  92%,100%{opacity:0;transform:scale(.5)}
}
.ava-morph .g-face path{animation:ava-wink 6.5s var(--ease) infinite}
@keyframes ava-wink{
  0%,68%,100%{transform:scaleX(1)}
  77%{transform:scaleX(1.18)}
}

@media (prefers-reduced-motion:reduce){
  .ava-bubble,.am-ast,.am-chat,.am-chat i,.am-face,.am-face s{animation:none}
  .am-ast{opacity:1}
  .am-chat,.am-face{opacity:0}
}
@media (min-width:1024px){.ava{right:2.5rem;bottom:2rem}}
/* la pastilla blanca vieja se elimino: pisaba la burbuja nueva */
.ava-panel{
  position:absolute;right:0;bottom:0;
  width:min(88vw,384px);height:min(70vh,520px);
  display:flex;flex-direction:column;
  border-radius:24px;overflow:hidden;
  background:rgba(9,9,11,.94);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  backdrop-filter:blur(20px);
  transform-origin:bottom right;
}
.ava-head{position:relative;padding:1.15rem 1.25rem .85rem;border-bottom:1px solid rgba(255,255,255,.08)}
.ava-title{display:block;font-size:1.35rem;font-weight:680;letter-spacing:-.04em;color:#f4f4f5}
.ava-sub{display:block;margin-top:.1rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.22em;color:#6f6f78}
.ava-close{position:absolute;right:.9rem;top:.9rem;font-size:1.5rem;line-height:1;color:#8a8a93}
.ava-log{flex:1;overflow-y:auto;padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.85rem}
.ava-msg{max-width:86%;font-size:.92rem;line-height:1.45;letter-spacing:-.01em;padding:.7rem .9rem;border-radius:16px}
.ava-msg.me{align-self:flex-end;background:#fff;color:#000;font-weight:520}
.ava-msg.it{align-self:flex-start;background:rgba(255,255,255,.07);color:#e4e4e8}
.ava-msg.typing{color:#7b7b83}
.ava-form{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-top:1px solid rgba(255,255,255,.08)}
.ava-input{flex:1;background:none;border:0;outline:none;color:#f4f4f5;font-size:.95rem;letter-spacing:-.015em}
.ava-input::placeholder{color:#55555d}
.ava-send{width:2.1rem;height:2.1rem;border-radius:999px;background:#fff;color:#000;font-weight:700;flex:0 0 auto}

.pd{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.25rem}
.pd-back{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(8px)}
.pd-panel{
  position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(94vw,940px);max-height:88vh;overflow:auto;
  border-radius:26px;background:#0b0b0d;border:1px solid rgba(255,255,255,.1);
}
@media (min-width:768px){.pd-panel{flex-direction:row}}
.pd-x{position:absolute;right:1rem;top:.85rem;z-index:2;font-size:1.8rem;line-height:1;color:#c9c9d0}
.pd-media{flex:1 1 55%;background:#111}
.pd-media img{width:100%;height:100%;object-fit:cover;min-height:240px}
.pd-info{flex:1 1 45%;padding:1.8rem 1.6rem 2rem;display:flex;flex-direction:column;gap:.55rem}
.pd-price{font-size:2rem;font-weight:680;letter-spacing:-.045em;color:#f4f4f5}
.pd-addr{font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:#7b7b83}
.pd-specs{margin-top:.4rem;font-size:.95rem;color:#c2c2ca;letter-spacing:-.01em}
.pd-desc{margin-top:.5rem;font-size:.9rem;line-height:1.55;color:#8f8f99}
.pd-cta{
  margin-top:1.2rem;align-self:flex-start;border-radius:999px;background:#fff;color:#000;
  padding:.85rem 1.6rem;font-size:.92rem;font-weight:650;text-transform:uppercase;letter-spacing:-.018em;
}
.menu{position:fixed;inset:0;z-index:1;background:#f1f0ea;overflow:hidden}
.menu-backdrop{position:absolute;inset:0;background:transparent;opacity:0;pointer-events:none}
.menu-panel{
  position:absolute;left:0;top:0;height:100%;
  width:min(92vw,34vw);min-width:min(92vw,320px);
  opacity:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.6rem,4.4vw,3.4rem);
}
.menu-body{display:flex;flex-direction:column;gap:clamp(1.4rem,4.2vh,2.8rem)}
.menu-cols{display:flex;flex-direction:column;gap:clamp(1.4rem,4.2vh,2.6rem)}
.menu-col{display:flex;flex-direction:column;gap:.05em}
.menu-cap{display:none}
.menu-link{
  font-family:var(--font-inter);
  font-size:clamp(1.6rem,3.1vw,2.9rem);
  font-weight:420;letter-spacing:-.035em;line-height:1.14;
  color:#0a0a0a;
  /* era width:max-content -> la palabra tomaba su ancho natural y se salia del
     panel. por eso "sell with me" y "get pre-approved" aparecian cortadas. */
  width:auto;max-width:100%;
  transition:color .26s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.menu-link.is-strong{font-weight:420}
.menu-link.is-small{font-size:clamp(.95rem,1.35vw,1.15rem);color:#6f6f68;letter-spacing:-.02em}
.menu-link.is-small:hover{color:#0a0a0a}
.menu-col-small{margin-top:clamp(.4rem,1.4vh,1rem)}
.menu-link:hover{color:var(--red);transform:translateX(10px)}
.menu-foot{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(.6rem,2vh,1.4rem);
}
.menu-tel{font-size:1.05rem;font-weight:650;letter-spacing:-.02em;color:var(--red)}
.menu-broker{font-size:.6rem;text-transform:uppercase;letter-spacing:.28em;color:#8b8b84}

/* MENU EN TELEFONO
   1) el bloque baja: antes centraba y las palabras grandes quedaban a media
      pantalla. ahora se apoyan abajo, que es donde llega el pulgar.
   2) el texto se achica lo justo para que "get pre-approved" entre entero. */
@media (max-width:1023px){
  .menu-panel{
    width:min(86vw,360px);min-width:0;
    justify-content:flex-end;
    padding:1.6rem 1.4rem calc(2.2rem + env(safe-area-inset-bottom,0px));
  }
  .menu-body{gap:1.6rem}
  .menu-cols{gap:1.5rem}
  .menu-link{
    font-size:clamp(1.15rem,5.6vw,1.55rem);
    line-height:1.2;letter-spacing:-.03em;
  }
  /* en telefono no hay hover: el desplazamiento solo movia texto fuera del panel */
  .menu-link:hover{transform:none}
  .menu-foot{margin-top:1.2rem;gap:.6rem}
  .menu-tel{font-size:1rem}
}
.menu-media{
  position:absolute;right:4%;bottom:6%;z-index:0;
  width:min(46%,300px);aspect-ratio:3/4;
  border-radius:16px;overflow:hidden;
  opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.menu-media.is-on{opacity:1}
.menu-media video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1023px){.menu-media{display:none}}

.menu-x{
  position:fixed;left:clamp(1.2rem,3.4vw,2.6rem);top:clamp(1.2rem,3.4vw,2.6rem);
  z-index:140;width:2.6rem;height:2.6rem;opacity:0;pointer-events:none;
}
.menu-x span{
  position:absolute;left:50%;top:50%;width:1.5rem;height:1.7px;background:#f4f4f4;
  transform-origin:center;
}
.menu-x span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.menu-x span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.menu-x.is-on{opacity:1;pointer-events:auto}

.page{position:relative;z-index:2;background:var(--background)}

.page-load-indicator{
  position:fixed;top:0;left:0;width:100%;height:3px;
  z-index:2147483647;pointer-events:none;
  opacity:0;transition:opacity .18s ease;
}
.page-load-indicator[data-visible=true]{opacity:1}
.page-load-indicator__bar{
  width:100%;height:100%;transform-origin:left center;
  background:linear-gradient(90deg,#d20000,#ff1d1d 58%,#ff5b5b);
  box-shadow:0 0 14px rgba(255,29,29,.72);
  transition:transform .2s ease-out;will-change:transform;
  transform:scaleX(0);
}

.preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;height:100%;width:100%;
  align-items:center;justify-content:center;
  background:#fff;will-change:transform;
}
.preloader.is-exit{
  transform:translate3d(0,-100vh,0);
  transition:transform 450ms cubic-bezier(0.76,0,0.24,1) 50ms;
}
.preloader-word{
  position:absolute;z-index:10;
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
  max-width:92vw;padding:0 4vw;
  font-family:var(--font-inter);
  font-size:clamp(1.75rem,6.6vw,3.75rem);
  font-weight:600;letter-spacing:-.05em;color:#000;
  line-height:1.02;text-align:center;text-wrap:balance;
}
.preloader-word[dir="rtl"]{letter-spacing:0}
.preloader-curve{position:absolute;top:0;height:calc(100% + 300px);width:100%}
.preloader-curve path{fill:#fff}

[hidden]{display:none!important}

.s06{position:relative;z-index:20;background:#000;color:#fff}
.s06-wrap{margin:0 auto;width:100%;max-width:1400px;padding:2rem 1.5rem 7rem}
@media (min-width:640px){.s06-wrap{padding:3rem 2.5rem 8rem}}
@media (min-width:1024px){.s06-wrap{padding:4rem 3rem 10rem}}
.s06-head{margin-bottom:3rem}
.s06-eyebrow{
  display:flex;align-items:baseline;gap:.85rem;margin-bottom:1.1rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.28em;color:#7b7b83;
}
.s06-no{
  font-size:1.05rem;font-weight:760;letter-spacing:-.03em;
  background:linear-gradient(180deg,#f3f5f7,#8d949c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.s06-grid{display:grid;gap:1.6rem}
@media (min-width:900px){.s06-grid{grid-template-columns:1fr 1fr;gap:1.4rem}}

.path{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:26px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(168deg,#0c0c0f 0%,#050506 62%);
  transition:border-color .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
  isolation:isolate;
}
.path::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 42% at 50% 32%,rgba(255,47,47,.13),transparent 70%);
  opacity:0;transition:opacity .6s ease;
}
.path[data-path="lock"]::before{background:radial-gradient(58% 42% at 50% 32%,rgba(56,120,235,.16),transparent 70%)}
.path:hover{border-color:rgba(255,255,255,.2);transform:translateY(-4px)}
.path:hover::before{opacity:1}

.path-stage{position:relative;z-index:1;aspect-ratio:5/4;width:100%}
@media (min-width:900px){.path-stage{aspect-ratio:1/1}}
.path-canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.path-fallback{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:radial-gradient(40% 34% at 50% 46%,rgba(255,255,255,.07),transparent 72%);
}
.path.is-live .path-fallback{display:none}

.path-meta{position:relative;z-index:1;padding:0 1.5rem 1.9rem;display:flex;flex-direction:column;gap:.6rem}
@media (min-width:900px){.path-meta{padding:0 2.2rem 2.4rem}}
.path-idx{
  font-family:var(--font-dm-serif);font-style:italic;
  font-size:.95rem;color:var(--red);letter-spacing:.02em;
}
.path[data-path="lock"] .path-idx{color:#5b8dfa}
.path-t{
  font-size:clamp(2rem,7vw,3rem);font-weight:680;letter-spacing:-.05em;
  line-height:.98;color:#f4f4f5;text-transform:lowercase;
}
@media (min-width:900px){.path-t{font-size:clamp(2.2rem,3.2vw,3.4rem)}}
.path-s{max-width:38ch;font-size:.95rem;line-height:1.5;letter-spacing:-.012em;color:#8f8f99}
.path-go{
  margin-top:.5rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:#c9c9d0;
}
.path-go::after{content:"";width:1.6rem;height:1px;background:currentColor;transition:width .45s cubic-bezier(.16,1,.3,1)}
.path:hover .path-go::after{width:2.8rem}

.s07{
  position:relative;z-index:20;background:#000;
  padding:0 .75rem 4rem;
}
@media (min-width:768px){.s07{padding:0 1.5rem 6rem}}
.s07-panel{
  position:relative;overflow:hidden;
  border-radius:34px;background:#F7F5F1;color:#141613;
  padding:3rem 0 2.6rem;
  clip-path:inset(0 round 34px);
}
@media (min-width:768px){.s07-panel{border-radius:44px;clip-path:inset(0 round 44px);padding:4.4rem 0 3.4rem}}
.s07-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 52% at 50% -8%,rgba(255,47,47,.07),transparent 62%);
}
.s07-head{position:relative;z-index:1;padding:0 1.6rem;margin-bottom:2.4rem}
@media (min-width:768px){.s07-head{padding:0 3.2rem}}
@media (min-width:1280px){.s07-head{padding:0 4.4rem}}
.s07-eyebrow{
  display:flex;align-items:baseline;gap:.85rem;margin-bottom:1.5rem;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.28em;color:#8a8d86;
}
.s07-no{
  font-size:1.05rem;font-weight:760;letter-spacing:-.03em;
  background:linear-gradient(180deg,#2a2d28,#9aa096);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.s07-score{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem 1rem}
.rv-num{
  font-size:clamp(3.6rem,14vw,7.4rem);font-weight:700;letter-spacing:-.065em;line-height:.82;
  color:#141613;font-variant-numeric:tabular-nums;
}
.rv-stars{display:inline-flex;gap:.22rem;transform:translateY(-.3em)}
.rv-stars svg{width:1.3rem;height:1.3rem;display:block;transform:scale(0);transform-origin:center}
.rv-count{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:#7d817a;
  flex-basis:100%;
}
@media (min-width:768px){.rv-count{flex-basis:auto;align-self:flex-end;padding-bottom:.35rem}}

.rv-rail-wrap{position:relative;z-index:1;overflow:hidden;padding:.4rem 0 1.6rem}
.rv-rail-wrap::before,.rv-rail-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:3.5rem;z-index:2;pointer-events:none;
}
.rv-rail-wrap::before{left:0;background:linear-gradient(90deg,#F7F5F1,rgba(247,245,241,0))}
.rv-rail-wrap::after{right:0;background:linear-gradient(270deg,#F7F5F1,rgba(247,245,241,0))}
.rv-rail{
  display:flex;gap:1rem;width:max-content;padding:0 1.6rem;
  will-change:transform;
}
@media (min-width:768px){.rv-rail{gap:1.2rem;padding:0 3.2rem}}
.rv-card{
  flex:0 0 min(80vw,23rem);
  display:flex;flex-direction:column;gap:.9rem;
  border-radius:22px;border:1px solid #E5E2DA;background:#fff;
  padding:1.5rem 1.4rem 1.5rem;
  box-shadow:0 1px 2px rgba(20,22,19,.04);
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease,border-color .4s ease;
}
.rv-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(20,22,19,.28);border-color:#D6D2C7}
.rv-top{display:flex;align-items:center;gap:.8rem}
.rv-ph{
  width:2.9rem;height:2.9rem;flex:0 0 auto;border-radius:999px;overflow:hidden;
  background:#EDEAE2;display:grid;place-items:center;
  font-size:1rem;font-weight:680;color:#5f635c;letter-spacing:-.02em;
}
.rv-ph img{width:100%;height:100%;object-fit:cover}
.rv-who{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.rv-name{font-size:.98rem;font-weight:640;letter-spacing:-.022em;color:#141613;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-when{font-size:.72rem;letter-spacing:.02em;color:#8a8d86}
.rv-cstars{display:flex;gap:.14rem}
.rv-cstars svg{width:.92rem;height:.92rem;display:block}
.rv-text{font-size:.94rem;line-height:1.6;letter-spacing:-.011em;color:#4a4e47}
.rv-text .rv-more{color:#141613;border-bottom:1px solid rgba(20,22,19,.3);white-space:nowrap}
.rv-g{
  margin-top:auto;padding-top:.5rem;display:flex;align-items:center;gap:.45rem;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:#9a9d96;
}
.rv-g svg{width:.9rem;height:.9rem;display:block}

.s07-foot{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  padding:1.4rem 1.6rem 0;
}
@media (min-width:768px){.s07-foot{padding:1.8rem 3.2rem 0}}
.rv-link,.rv-write{
  border-radius:999px;padding:.78rem 1.5rem;
  font-size:.82rem;font-weight:620;letter-spacing:-.015em;text-transform:lowercase;
  transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .3s ease;
}
.rv-link{border:1px solid #D9D5CB;color:#3c403a}
.rv-link:hover{border-color:#141613;transform:translateY(-2px)}
.rv-write{background:#141613;color:#F7F5F1}
.rv-write:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(20,22,19,.6)}

@media (prefers-reduced-motion:reduce){
  .rv-card,.rv-link,.rv-write{transition:none}
  .rv-rail{transform:none !important}
  .rv-stars svg{transform:scale(1)}
}


@media (prefers-reduced-motion:reduce){
  .path,.path::before,.path-go::after,.rv-card,.rv-link,.rv-write{transition:none}
}

.mkt-noimg{position:absolute;inset:0;background:linear-gradient(150deg,#141419,#08080a)}
.mkt-chips{position:absolute;left:.6rem;top:.6rem;display:flex;flex-wrap:wrap;gap:.32rem;max-width:calc(100% - 1.2rem)}
.mkt-chip{
  border-radius:999px;padding:.24rem .58rem;
  font-size:.6rem;font-weight:640;text-transform:uppercase;letter-spacing:.1em;
  background:rgba(6,6,8,.72);backdrop-filter:blur(6px);color:#dcdce2;
  border:1px solid rgba(255,255,255,.13);
}
.mkt-chip.is-new{background:rgba(255,47,47,.9);border-color:transparent;color:#fff}
.mkt-chip.is-cut{background:rgba(255,194,51,.92);border-color:transparent;color:#1a1400}
.mkt-chip.is-pend{background:rgba(255,255,255,.9);border-color:transparent;color:#000}
.mkt-chip.is-water{background:rgba(52,120,235,.9);border-color:transparent;color:#fff}
.mkt-more{
  display:block;margin:2.6rem auto 0;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);padding:.8rem 1.8rem;
  font-size:.82rem;font-weight:620;letter-spacing:-.015em;color:#c9c9d0;
  transition:border-color .25s ease,transform .25s ease;
}
.mkt-more:hover{border-color:rgba(255,255,255,.36);transform:translateY(-2px)}
.ai-state.is-busy{color:#c9c9d0}

.pd-panel{max-height:92vh}
.pd-body{overflow-y:auto;overscroll-behavior:contain;max-height:92vh;-webkit-overflow-scrolling:touch}
.pdx-load{display:grid;place-items:center;gap:1rem;min-height:44vh;padding:2rem;text-align:center}
.pdx-load img{width:min(100%,420px);border-radius:18px;opacity:.42}
.pdx-load p{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:#7b7b83}

.pdx-gal{position:relative;background:#000}
.pdx-main{position:relative;aspect-ratio:16/10;background:#0a0a0c;overflow:hidden}
.pdx-main img{width:100%;height:100%;object-fit:cover}
.pdx-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:2.6rem;height:2.6rem;border-radius:999px;display:grid;place-items:center;
  font-size:1.7rem;line-height:1;color:#fff;
  background:rgba(6,6,8,.62);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);
}
.pdx-nav.is-prev{left:.7rem}
.pdx-nav.is-next{right:.7rem}
.pdx-count{
  position:absolute;right:.8rem;bottom:.8rem;z-index:3;
  border-radius:999px;padding:.32rem .7rem;font-size:.7rem;letter-spacing:.1em;
  background:rgba(6,6,8,.7);backdrop-filter:blur(8px);color:#dcdce2;
}
.pdx-thumbs{display:flex;gap:.4rem;overflow-x:auto;padding:.5rem;scrollbar-width:none}
.pdx-thumbs::-webkit-scrollbar{display:none}
.pdx-th{flex:0 0 4.6rem;aspect-ratio:4/3;border-radius:10px;overflow:hidden;opacity:.42;transition:opacity .25s ease,outline-color .25s ease;outline:2px solid transparent}
.pdx-th img{width:100%;height:100%;object-fit:cover}
.pdx-th.is-on{opacity:1;outline-color:#fff}

.pdx-info{padding:1.6rem 1.4rem 2.2rem;display:flex;flex-direction:column;gap:1.4rem}
@media (min-width:768px){.pdx-info{padding:2rem 2.2rem 2.6rem}}
.pdx-head{display:flex;flex-direction:column;gap:.45rem}
.pdx-price{font-size:clamp(2rem,7vw,2.9rem);font-weight:700;letter-spacing:-.055em;color:#f4f4f5;line-height:1}
.pdx-addr{font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:#8a8a93}
.pdx-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.pdx-chip{
  border-radius:999px;padding:.3rem .68rem;font-size:.68rem;letter-spacing:-.005em;
  border:1px solid rgba(255,255,255,.13);color:#a6a6b0;text-transform:lowercase;
}

.pdx-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(5.2rem,1fr));gap:1px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;
}
.pdx-stat{background:#08080a;padding:.95rem .7rem;display:flex;flex-direction:column;gap:.24rem}
.pdx-v{font-size:1.32rem;font-weight:660;letter-spacing:-.04em;color:#f0f0f4;line-height:1}
.pdx-l{font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:#6f6f78}

.pdx-desc{font-size:.93rem;line-height:1.62;letter-spacing:-.011em;color:#9a9aa4;max-width:66ch}
.pdx-block{display:flex;flex-direction:column;gap:.7rem}
.pdx-block h4{font-size:.66rem;text-transform:uppercase;letter-spacing:.22em;color:#6f6f78;font-weight:600}
.pdx-big{font-size:1.9rem;font-weight:680;letter-spacing:-.045em;color:#f0f0f4}
.pdx-big small{font-size:.9rem;font-weight:500;color:#7b7b83;letter-spacing:0}
.pdx-note{font-size:.78rem;color:#7b7b83;letter-spacing:-.005em}

.pdx-rows{list-style:none;display:flex;flex-direction:column}
.pdx-rows li{
  display:grid;grid-template-columns:1fr auto auto;gap:.8rem;align-items:baseline;
  padding:.62rem 0;border-top:1px solid rgba(255,255,255,.07);
  font-size:.85rem;color:#8f8f99;letter-spacing:-.008em;
}
.pdx-rows li b{color:#e6e6ec;font-weight:620}
.pdx-rows li span:nth-child(2){font-size:.76rem;color:#63636c;text-align:right}

.pdx-schools{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.pdx-school{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center}
.pdx-sr{
  width:2rem;height:2rem;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  font-size:.86rem;font-weight:700;letter-spacing:-.03em;
  background:#1a1a1f;color:#8f8f99;border:1px solid rgba(255,255,255,.09);
}
.pdx-sr.is-hi{background:rgba(46,160,90,.18);color:#5fd48f;border-color:rgba(95,212,143,.32)}
.pdx-sr.is-mid{background:rgba(255,194,51,.14);color:#ffc233;border-color:rgba(255,194,51,.28)}
.pdx-sr.is-lo{background:rgba(255,47,47,.13);color:#ff7b7b;border-color:rgba(255,123,123,.26)}
.pdx-sn{font-size:.88rem;color:#dcdce2;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis}
.pdx-sd{font-size:.72rem;color:#63636c;white-space:nowrap}

.pdx-flood{display:flex;align-items:center;gap:.9rem}
.pdx-fs{font-size:1.7rem;font-weight:680;letter-spacing:-.045em;color:#f0f0f4}
.pdx-fs small{font-size:.8rem;color:#63636c;font-weight:500}
.pdx-meter{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.pdx-meter>span{display:block;height:100%;border-radius:999px}
.pdx-meter.is-ok>span{background:#5fd48f}
.pdx-meter.is-mid>span{background:#ffc233}
.pdx-meter.is-bad>span{background:#ff5a52}

.pdx-spark{width:100%;height:74px;display:block;overflow:visible}
.pdx-area{fill:rgba(255,47,47,.13)}
.pdx-line{fill:none;stroke:#ff4d4d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pdx-dots circle{fill:#ff8a8a}

.pdx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:.4rem}
.pd-tel{
  border-radius:999px;border:1px solid rgba(255,255,255,.16);
  padding:.8rem 1.4rem;font-size:.85rem;font-weight:620;color:#c9c9d0;
  transition:border-color .25s ease,transform .25s ease;
}
.pd-tel:hover{border-color:rgba(255,255,255,.36);transform:translateY(-2px)}

.ava-homes{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 .4rem;scrollbar-width:none}
.ava-homes::-webkit-scrollbar{display:none}
.ava-home{
  flex:0 0 9.6rem;text-align:left;display:flex;flex-direction:column;gap:.22rem;
  border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#0c0c10;
  padding:.45rem;transition:border-color .25s ease;
}
.ava-home:hover{border-color:rgba(255,255,255,.26)}
.ava-home img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;margin-bottom:.2rem}
.ava-home-p{font-size:.86rem;font-weight:660;letter-spacing:-.028em;color:#f0f0f4}
.ava-home-a{font-size:.66rem;color:#8a8a93;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ava-home-s{font-size:.64rem;color:#63636c}

.lf{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:1.25rem}
.lf-back{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(10px)}
.lf-panel{
  position:relative;width:min(100%,30rem);max-height:92vh;overflow-y:auto;
  border-radius:26px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(168deg,#0d0d11,#050506);
  padding:2.2rem 1.7rem 1.9rem;
}
@media (min-width:640px){.lf-panel{padding:2.6rem 2.2rem 2.2rem}}
.lf-x{position:absolute;right:1rem;top:.7rem;font-size:1.9rem;line-height:1;color:#8a8a93;transition:color .25s ease}
.lf-x:hover{color:#f4f4f5}
.lf-eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.28em;color:#7b7b83;margin-bottom:.9rem}
.lf-t{font-size:clamp(1.9rem,7vw,2.6rem);font-weight:680;letter-spacing:-.05em;line-height:1;color:#f4f4f5;text-transform:lowercase}
.lf-s{margin-top:.7rem;font-size:.85rem;color:#8f8f99;letter-spacing:-.01em}
.lf-form{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-in{
  width:100%;border:0;border-bottom:1px solid #26262b;background:none;outline:none;
  padding:.75rem .1rem;color:#f4f4f5;font-family:var(--font-inter);
  font-size:1rem;font-weight:520;letter-spacing:-.02em;transition:border-color .3s ease;
}
.lf-in::placeholder{color:#48484f}
.lf-in:focus{border-bottom-color:#f4f4f5}
.lf-in.is-bad{border-bottom-color:var(--red)}
.lf-ta{resize:vertical;min-height:3.4rem;line-height:1.5;font-size:.95rem}
.lf-go{
  margin-top:.8rem;border-radius:999px;background:#fff;color:#000;
  padding:.9rem 1.5rem;font-size:.94rem;font-weight:660;letter-spacing:-.018em;
  text-transform:lowercase;transition:transform .25s ease,opacity .25s ease;
}
.lf-go:hover{transform:translateY(-2px)}
.lf-go[disabled]{opacity:.5;transform:none;cursor:default}
.lf-note{min-height:1.2em;font-size:.82rem;color:#8f8f99;letter-spacing:-.01em}
.lf-note.is-ok{color:#5fd48f}
.lf-note.is-bad{color:#ff7b7b}
.lf-alt{margin-top:.5rem;font-size:.8rem;color:#6f6f78;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.lf-alt a{color:#c9c9d0;border-bottom:1px solid rgba(255,255,255,.22)}
.lf-alt a:hover{color:#fff}
.lf-dot{color:var(--red)}
.lf-done{display:flex;flex-direction:column;gap:.6rem;margin-top:1.6rem}
.lf-done b{font-size:1.15rem;font-weight:660;letter-spacing:-.03em;color:#f4f4f5}
.lf-done p{font-size:.9rem;color:#8f8f99;line-height:1.55}

.s08{position:relative;z-index:20;background:#000;color:#fff}
.s08-wrap{margin:0 auto;width:100%;max-width:1400px;padding:3rem 1.5rem 5rem}
@media (min-width:640px){.s08-wrap{padding:4rem 2.5rem 6rem}}
@media (min-width:1024px){.s08-wrap{padding:6rem 3rem 8rem}}

.s08-head{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:3.5rem}

.s08-label{
  flex:0 0 auto;padding-top:.7rem;
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:var(--red);
  white-space:nowrap;
}
.s08-label span:first-child{opacity:.55}

.s08-grid{display:flex;flex-direction:column-reverse;gap:2.5rem}
@media (min-width:1024px){
  .s08-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
}
@media (min-width:1280px){.s08-grid{grid-template-columns:1.08fr 1fr;gap:5rem}}

/* mecanica de good fella, valores sacados de su bundle (modulo 533920):
   power3InOut para los pasos, backInOutSubtle para el cuadradito, 0.8s los dos. */
:root{
  --pr-power3: cubic-bezier(.65,0,.35,1);
  --pr-back:   cubic-bezier(.68,-.25,.32,1.25);
}
.pr-list{list-style:none;display:flex;flex-direction:column;position:relative}

/* UN solo cuadradito que viaja por la lista, no uno por paso.
   el js le pone translateY(offset) rotate(90*n). */
.pr-cursor{
  position:absolute;top:2.62rem;left:0;z-index:10;
  width:.5rem;height:.5rem;background:var(--red);
  transition:transform .8s var(--pr-back);
  will-change:transform;
}
.pr-item{
  position:relative;display:grid;grid-template-columns:1.1rem 2.4rem 1fr;
  align-items:start;gap:.2rem;
  padding:2rem 0;
  /* activo: se corre 48px a la derecha y opacidad plena.
     inactivo: sin correr, al 40%. exactamente { opacity: l?1:.4, x: 48*!!l } */
  opacity:.4;transform:translateX(0);
  transition:opacity .8s var(--pr-power3),transform .8s var(--pr-power3);
}
.pr-item.is-on{opacity:1;transform:translateX(3rem)}

/* los cuadraditos por paso ya no van en escritorio: los reemplaza el que viaja */
.pr-mark{
  width:.5rem;height:.5rem;margin-top:.62em;background:var(--red);
  opacity:0;
}
.pr-no{
  font-size:.72rem;font-weight:600;letter-spacing:.06em;padding-top:.55em;
  color:#8a8a93;
}
.pr-body{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.pr-t{
  font-size:clamp(1.55rem,6vw,2.35rem);font-weight:660;letter-spacing:-.045em;line-height:1.02;
  color:#f4f4f5;text-transform:lowercase;
}
@media (min-width:1024px){.pr-t{font-size:clamp(1.7rem,2.6vw,2.5rem)}}
.pr-s{
  max-width:46ch;font-size:.93rem;line-height:1.55;letter-spacing:-.011em;
  color:#8f8f99;
}

.pr-stage{position:relative;width:100%}

.pr-frame{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border-radius:24px;background:#0b0b0e;
  border:1px solid rgba(255,255,255,.08);
}
@media (min-width:1024px){.pr-frame{aspect-ratio:4/5;border-radius:28px}}


.pr-media video{width:100%;height:100%;object-fit:cover;display:block;background:#0b0b0e}
.pr-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 26%,transparent 62%,rgba(0,0,0,.55) 100%);
}
.pr-step{
  position:absolute;right:.9rem;bottom:.85rem;z-index:2;
  font-size:.68rem;font-weight:600;letter-spacing:.18em;color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
  .pr-media,.pr-mark,.pr-t,.pr-s,.pr-no{transition:none}
}

.hero-mark{
  display:flex;flex-direction:column;
  font-family:var(--font-cal-sans);font-weight:200;
  letter-spacing:-.02em;line-height:.80;
  text-transform:lowercase;
  background:var(--no-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  pointer-events:none;user-select:none;
}
.hero-mark span{display:block}
.hero-mark .hm-2{display:flex;align-items:baseline}
.hero-mark .ast{
  width:.56em;height:.56em;margin:0 .02em;
  background-color:var(--red);
  align-self:center;
}
.drop-no.hero-mark{font-size:clamp(3.4rem,7vw,6.2rem)}
@media (min-width:1024px){.drop-no.hero-mark{font-size:clamp(3.8rem,5.6vw,6.8rem)}}
@media (min-width:1280px){.drop-no.hero-mark{font-size:clamp(4.2rem,5.4vw,7.6rem)}}
.hero-m-no.hero-mark{
  font-size:clamp(3.4rem,16vw,5.6rem);line-height:.82;
  top:clamp(-190px,-34vw,-128px);
}
/* En Safari de iOS, background-clip:text sobre un contenedor FLEX no pinta:
   el texto queda en color:transparent y la marca desaparece entera. En el
   telefono se veia solo el asterisco. Color solido, que se vea siempre. */
@media (max-width:1023px){
  .hero-m-no.hero-mark{
    background:none;-webkit-background-clip:border-box;background-clip:border-box;
    color:#d3d8de;
  }
}

/* BUSCADOR
   En telefono los filtros median 35px de alto (el minimo tapeable son 44) y
   la letra 13.12px — abajo de 16px iOS hace zoom solo al tocar el campo.
   Y no habia forma de escribir: solo desplegables. */
.mkt-find{
  position:relative;display:flex;align-items:center;margin-top:1.1rem;
}
.mkt-find-i{
  position:absolute;left:.9rem;width:1.05rem;height:1.05rem;
  color:#6c6c76;pointer-events:none;
}
.mkt-q{
  width:100%;min-height:48px;
  padding:.85rem 2.6rem .85rem 2.6rem;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  background:#0c0c10;color:var(--ink);
  font-family:var(--font-inter);font-size:16px;letter-spacing:-.01em;
  transition:border-color .25s ease,background .25s ease;
  -webkit-appearance:none;appearance:none;
}
.mkt-q::placeholder{color:#5f5f68}
.mkt-q:focus{outline:none;border-color:rgba(255,47,47,.5);background:#101015}
.mkt-q::-webkit-search-cancel-button{display:none}
.mkt-qx{
  position:absolute;right:.5rem;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  color:#8f8f99;font-size:1.3rem;line-height:1;
}
.mkt-qx:hover{color:var(--ink);background:rgba(255,255,255,.07)}

.mkt-selects{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.6rem}
@media (max-width:767px){
  /* 48px de alto y 16px de letra: se puede tocar y no dispara el zoom de iOS */
  .mkt-sel{min-height:48px;font-size:16px;padding:.8rem 2.1rem .8rem .9rem}
  .mkt-selects{gap:.5rem}
}
@media (min-width:768px){.mkt-selects{grid-template-columns:repeat(5,1fr);gap:.6rem}}
.mkt-sel{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;
  padding:.6rem 1.9rem .6rem 1rem;
  font-size:.82rem;font-weight:520;letter-spacing:-.01em;color:#c9c9d0;
  transition:border-color .25s ease,color .25s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:.72rem;
}
.mkt-sel:hover{border-color:rgba(255,255,255,.32);color:#e4e4e8}
.mkt-sel.is-set{background-color:var(--red);border-color:var(--red);color:#fff}
.mkt-sel option{background:#0b0b0e;color:#f4f4f5}
.mkt-clear{
  grid-column:1/-1;justify-self:start;margin-top:.15rem;
  font-size:.76rem;color:#7b7b83;border-bottom:1px solid rgba(255,255,255,.16);
}
@media (min-width:768px){.mkt-clear{grid-column:auto;justify-self:end;align-self:center;margin:0;border:0}}
.mkt-clear:hover{color:#f4f4f5}

.pr-frame::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%);
  transform:translateX(-110%);
}
.pr-frame.is-swap::before{
  animation:pr-sweep .6s var(--ease) forwards;
}
@keyframes pr-sweep{to{transform:translateX(110%)}}
.pr-step{transition:opacity .3s ease}
.pr-frame.is-swap .pr-step{opacity:.35}
@media (prefers-reduced-motion:reduce){
  .pr-frame.is-swap::before{animation:none}
  .pr-item{transition:none}
}

.pr-pin{width:100%}
/* los puntitos son solo de telefono. sin esto son un item de grid invisible
   que le roba la columna derecha al video y lo tira a la fila 2. */
.pr-dots{display:none}

/* ENTRADA DE LA SECCION
   la clase .pr-reveal la pone el js. si el js no corre, nada de esto aplica y
   la seccion se ve normal — nunca se queda invisible. */
.s08.pr-reveal .s08-head,
.s08.pr-reveal .pr-list,
.s08.pr-reveal .pr-frame{
  transition:opacity .9s var(--ease),transform 1.05s var(--ease);
}
.s08.pr-reveal:not(.is-live) .s08-head{opacity:0;transform:translateY(1.1rem)}
.s08.pr-reveal:not(.is-live) .pr-list{opacity:0;transform:translateY(1.7rem)}
.s08.pr-reveal:not(.is-live) .pr-frame{opacity:0;transform:translateY(2.4rem) scale(.94)}
.s08.pr-reveal.is-live .s08-head{transition-delay:.04s}
.s08.pr-reveal.is-live .pr-frame{transition-delay:.15s}
.s08.pr-reveal.is-live .pr-list{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  .s08.pr-reveal:not(.is-live) .s08-head,
  .s08.pr-reveal:not(.is-live) .pr-list,
  .s08.pr-reveal:not(.is-live) .pr-frame{opacity:1;transform:none}
}
@media (min-width:1024px){
  .s08{height:320vh;min-height:320svh}
  .s08-wrap{padding:0 3rem}
  .pr-pin{
    position:sticky;top:0;height:100vh;min-height:100svh;
    display:flex;align-items:center;overflow:hidden;
  }
  .s08-head{position:static;margin-bottom:3.2rem;padding:0;background:none}
  .s08-grid{align-items:center;gap:4.5rem}
  .pr-item{padding:1.5rem 0}
  .pr-item:first-child{padding-top:0}
  .pr-item:last-child{padding-bottom:0}
  .pr-stage{position:static}
  .pr-frame{aspect-ratio:auto;height:min(60vh,34rem)}
}

/* TIRA DE PELICULA — asi cambian las fotos en good fella.
   los 4 medios apilados en una columna dentro de un marco con overflow:hidden,
   y la columna entera se corre -100% por cada paso. no son paneles tapandose
   con z-index: es un rollo que corre, por eso el que sale y el que entra van
   acoplados. { y: `${-(100*Q)}%` }, duration .8, ease power3InOut */
.pr-reel{
  display:flex;flex-direction:column;
  height:100%;width:100%;
  transition:transform .8s var(--pr-power3);
  will-change:transform;
}
.pr-media{
  position:relative;
  height:100%;width:100%;flex:0 0 100%;
  overflow:hidden;
}
.pr-media video{transform:scale(1.01)}

@media (prefers-reduced-motion:reduce){
  .pr-reel{transition:none}
  .s08{height:auto}
  .pr-pin{position:static;height:auto}
}

@keyframes pr-in-right{from{opacity:0;transform:translateX(2.6rem)}to{opacity:1;transform:none}}
@keyframes pr-in-left{from{opacity:0;transform:translateX(-2.6rem)}to{opacity:1;transform:none}}

/* la entrada lateral del texto es SOLO de telefono (vos la pediste asi).
   en escritorio manda la mecanica de good fella: opacidad + 48px, sin slide. */
@media (max-width:1023px){
  .pr-item.is-on.from-down .pr-body{animation:pr-in-right .52s var(--ease) both}
  .pr-item.is-on.from-up   .pr-body{animation:pr-in-left  .52s var(--ease) both}
  .pr-item.is-on.from-down .pr-no{animation:pr-in-right .52s var(--ease) .04s both}
  .pr-item.is-on.from-up   .pr-no{animation:pr-in-left  .52s var(--ease) .04s both}
}

@media (max-width:1023px){
  .s08{height:420vh;min-height:420svh;padding:0}
  .pr-pin{
    position:sticky;top:0;height:100vh;min-height:100svh;
    display:flex;align-items:center;overflow:hidden;
  }
  .s08-wrap{padding:0 1.5rem;width:100%}
  .s08-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:1rem;margin-bottom:1.5rem;
  }
  .s08-head .display.sm{font-size:clamp(2.2rem,9vw,3.2rem)}
  .s08-label{padding-top:.4rem;font-size:.62rem}

  .s08-grid{display:flex;flex-direction:column;gap:1.4rem}
  .pr-stage{order:1}
  .pr-frame{aspect-ratio:auto;height:min(42svh,20rem);border-radius:20px}

  .pr-list{order:2;position:relative;min-height:9.5rem}
  /* en telefono NO va el corrimiento de 48px ni el cuadradito viajero: aca solo
     se ve un paso a la vez, asi que el activo tiene que quedar donde esta.
     good fella directamente no clava la seccion en telefono (lg:hidden) —
     nosotros si, porque lo pediste, pero sin heredar la mecanica de escritorio. */
  .pr-cursor{display:none}
  .pr-item{
    position:absolute;top:0;left:0;right:0;
    padding:0;
    opacity:0;transform:none;pointer-events:none;
    transition:opacity .45s var(--ease);
  }
  .pr-item.is-on{opacity:1;transform:none;pointer-events:auto}
  .pr-mark{margin-top:.5em}
  .pr-t{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  .pr-s{font-size:.9rem}
  .pr-item .pr-t{color:#f4f4f5}
  .pr-item .pr-s{color:#8f8f99}
  .pr-item .pr-no{color:#8a8a93}
  .pr-item .pr-mark{opacity:1;transform:scale(1)}

  .pr-dots{
    order:3;display:flex;gap:.4rem;justify-content:center;
    padding-top:.2rem;
  }
  .pr-dot{
    width:1.6rem;height:2px;border-radius:999px;background:#2a2a31;
    transition:background .4s ease;
  }
  .pr-dot.is-on{background:var(--red)}
}

@media (prefers-reduced-motion:reduce){
  .pr-item.is-on.from-down .pr-body,.pr-item.is-on.from-up .pr-body,
  .pr-item.is-on.from-down .pr-no,.pr-item.is-on.from-up .pr-no{animation:none}
  @media (max-width:1023px){
    .s08{height:auto}
    .pr-pin{position:static;height:auto}
    .pr-item{position:relative;opacity:1;pointer-events:auto;padding:1.5rem 0}
  }
}