[hidden]{display:none!important}
/* Layout: Apple-style product storytelling — big centered headlines, rounded media that expands on scroll, project tiles, word-by-word reveal, sticky film chapters with centered captions, bento grid, peek carousel, segmented floor picker. Arev palette: paper / ink / wood / deep sea. Single deliberate look; every color set explicitly. */
:root{
  color-scheme: light;
  --paper:#f5f2ec; --paper-2:#ebe5da; --card:#fbf9f5; --white:#ffffff;
  --ink:#111111; --ink-2:#1c1d20; --graphite:#2b2f36; --muted:#6b6f75;
  --wood:#c9a36b; --wood-deep:#7f6134; --wood-soft:#e8d9bf;
  --sea:#0f2a31; --sea-2:#163a43; --sea-3:#1e4b56;
  --on-dark:#f5f2ec; --on-dark-2:#f5f2ecad; --line:#1111141f; --line-dark:#f5f2ec26;
  --note:#1c1d20;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.47;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:880px;margin-inline:auto;padding-inline:var(--gutter)}
.center{text-align:center}
.eyebrow{font-family:var(--display);font-size:clamp(15px,1.4vw,19px);font-weight:600;letter-spacing:-.01em;color:var(--wood-deep)}
.dark .eyebrow,.sea .eyebrow,.v2co2x .eyebrow{color:var(--wood)}
.h-xl{font-size:clamp(44px,8.4vw,112px)}
.h-lg{font-size:clamp(36px,6vw,80px)}
.h-md{font-size:clamp(28px,4vw,48px)}
.lead{font-size:clamp(19px,1.8vw,24px);line-height:1.38;color:var(--graphite);letter-spacing:-.015em}
.dark .lead,.sea .lead{color:var(--on-dark-2)}
.tnum{font-variant-numeric:tabular-nums}
section{position:relative}
.dark{background:var(--ink);color:var(--on-dark)}
.sea{background:var(--sea);color:var(--on-dark)}

/* buttons: Apple pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;padding:0 22px;border-radius:999px;font:500 17px/1 var(--body);letter-spacing:-.01em;border:0;cursor:pointer;background:var(--wood);color:var(--ink);transition:background .25s,transform .25s var(--ease)}
.pill:hover{background:#d6b37f}
.pill:active{transform:scale(.97)}
.pill.ghost{background:transparent;color:var(--wood-deep);box-shadow:inset 0 0 0 1px var(--wood-deep)}
.dark .pill.ghost,.sea .pill.ghost{color:var(--wood);box-shadow:inset 0 0 0 1px var(--wood)}
.link{font-size:17px;color:var(--wood-deep);display:inline-flex;align-items:center;gap:.2em}
.link::after{content:"›";font-size:1.25em;line-height:1;transform:translateY(-.04em)}
.link:hover{text-decoration:underline}
.dark .link,.sea .link{color:var(--wood)}
.actions{display:flex;gap:16px 26px;align-items:center;justify-content:center;flex-wrap:wrap}
:focus-visible{outline:2px solid var(--wood);outline-offset:3px;border-radius:6px}

/* global nav */
.gnav{position:fixed;left:0;right:0;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);background:#f5f2ecd1;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.gnav .row{height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.gnav .logo{height:30px;width:auto}
.gnav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:13px;letter-spacing:0}
.gnav ul a{color:var(--graphite)}
.gnav ul a:hover{color:var(--ink)}
.gnav .right{display:flex;align-items:center;gap:12px}
.seg{display:inline-flex;background:#1111140f;border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;color:var(--graphite);font:500 12px/1 var(--body);padding:7px 10px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px #0000001f}
.gnav .pill{min-height:30px;padding:0 14px;font-size:13px}
@media (max-width:860px){.gnav ul,.gnav .navcta{display:none}}

/* notes (prototype) */
.nchip{position:absolute;z-index:40;top:16px;right:16px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--note);color:var(--on-dark);font:600 12px/1 var(--body);padding:8px 11px;cursor:pointer;box-shadow:0 4px 16px #00000033}
.nchip i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--wood);color:var(--ink);font-size:11px}
.npop{position:absolute;z-index:41;top:56px;right:16px;width:min(340px,calc(100vw - 32px));background:var(--note);color:var(--on-dark);font:400 13.5px/1.5 var(--body);padding:14px 16px;border-radius:14px;box-shadow:0 12px 32px #00000059}
.npop b{display:block;color:var(--wood);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
body.notes-off .nchip,body.notes-off .npop{display:none!important}
.ntoggle{position:fixed;z-index:70;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));border:0;border-radius:999px;background:var(--note);color:var(--on-dark);font:600 11.5px/1 var(--body);padding:8px 12px;cursor:pointer;box-shadow:0 4px 16px #00000033}

/* hero */
#hero{padding-top:calc(52px + clamp(48px,9vh,110px));padding-bottom:clamp(24px,4vw,48px);background:var(--paper);overflow:hidden}
#hero .eyebrow{margin-bottom:14px}
#hero h1 .w{display:inline-block;will-change:transform,opacity,filter}
#hero .lead{max-width:720px;margin:22px auto 30px}
.hero-media{margin:clamp(40px,6vw,72px) auto 0;width:100%;aspect-ratio:16/9;max-height:86vh;position:relative;overflow:hidden;clip-path:inset(0 4% 0 4% round 28px);background:var(--sea)}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.media-tag{position:absolute;left:clamp(20px,6%,72px);bottom:18px;font-size:12px;color:#ffffffc7;letter-spacing:.02em;z-index:2}
@media (max-width:700px){.hero-media{aspect-ratio:4/5;clip-path:inset(0 3% 0 3% round 22px)}}

/* project tiles (apple.com style) */
#tiles{padding:12px 12px 12px;background:var(--paper)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1500px;margin:0 auto}
.tile{position:relative;overflow:hidden;border-radius:var(--r-md);min-height:clamp(560px,52vw,720px);display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(40px,4.5vw,60px)}
.tile.t-amura{background:var(--sea);color:var(--on-dark)}
.tile.t-scala{background:var(--paper-2);color:var(--ink)}
.tile.t-amura .link{color:var(--wood)}
.tile h2{font-size:clamp(40px,4.4vw,56px)}
.tile .line{font-family:var(--display);font-size:clamp(19px,1.9vw,26px);font-weight:500;letter-spacing:-.015em;margin-top:6px}
.tile .sub{font-size:15px;margin-top:8px;max-width:30ch;opacity:.75}
.tile .price{font-weight:600;margin-top:12px;font-size:17px}
.tile .actions{margin-top:16px;position:relative;z-index:2}
.tile .img{position:absolute;left:0;right:0;bottom:0;height:56%;overflow:hidden}
.tile .img img{width:100%;height:118%;object-fit:cover;max-width:none}
.tile.t-amura .img::before{content:"";position:absolute;inset:0 0 auto;height:40%;background:linear-gradient(var(--sea),transparent);z-index:1}
.tile.t-scala .img::before{content:"";position:absolute;inset:0 0 auto;height:40%;background:linear-gradient(var(--paper-2),transparent);z-index:1}
@media (max-width:760px){.tiles{grid-template-columns:1fr}.tile{min-height:600px}}

/* word reveal */
#manifesto{padding-block:clamp(110px,16vw,220px)}
.reveal-text{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.6vw,60px);line-height:1.12;letter-spacing:-.03em;max-width:1040px}
.reveal-text .w{opacity:.18}
.no-gsap .reveal-text .w{opacity:1}

/* section heads */
.shead{padding-block:clamp(96px,12vw,160px) clamp(40px,5vw,64px)}
.shead .lead{max-width:760px;margin:20px auto 0}

/* film */
.film{position:relative}
.film.f-amura{height:1000vh}
.film.f-scala{height:640vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.frame{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.frame video{opacity:0;transition:opacity .6s}
.frame video.ready{opacity:1}
.frame::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 50%,#00000059,#00000000 70%),linear-gradient(180deg,#0000004d,#00000000 25%,#00000000 75%,#00000066);pointer-events:none}
.caps{position:absolute;z-index:3;left:0;right:0;top:50%;transform:translateY(-50%);height:0;display:grid;place-items:center}
.cap{position:absolute;width:min(880px,88vw);text-align:center;font-family:var(--display);font-weight:600;font-size:clamp(30px,5vw,64px);line-height:1.08;letter-spacing:-.03em;color:var(--white);text-shadow:0 2px 30px #00000066;opacity:0;transform:translateY(24px);filter:blur(10px);transition:opacity .6s var(--ease),transform .8s var(--ease),filter .6s var(--ease);text-wrap:balance}
.cap.on{opacity:1;transform:none;filter:blur(0)}
.film-tag{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));font-size:12px;color:#ffffffb3;white-space:nowrap}
.dots{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:calc(44px + env(safe-area-inset-bottom,0px));display:flex;gap:8px}
.dots span{width:8px;height:8px;border-radius:99px;background:#ffffff59;transition:width .4s var(--ease),background .4s}
.dots span.on{width:28px;background:var(--wood)}
/* "keep scrolling" hint on the films (CEO 12/10): text + a chevron that bounces down, above the progress dots */
.scroll-hint{position:absolute;z-index:3;left:50%;bottom:calc(64px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 18px 5px;border-radius:999px;background:#0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px #ffffff1f;color:#fff;font:600 12.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 10px #00000066;opacity:0;transform:translate(-50%,10px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.scroll-hint.on{opacity:1;transform:translate(-50%,0)}
.scroll-hint svg{filter:drop-shadow(0 1px 6px #00000080);animation:shbounce 1.5s ease-in-out infinite}
@keyframes shbounce{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
@media (max-width:760px){.film-tag{bottom:calc(84px + env(safe-area-inset-bottom,0px))}.dots{bottom:calc(108px + env(safe-area-inset-bottom,0px))}.scroll-hint{bottom:calc(126px + env(safe-area-inset-bottom,0px))}.cap{font-size:clamp(28px,8vw,40px)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:clamp(72px,9vw,120px)}
.stat .n{font-family:var(--display);font-weight:600;font-size:clamp(48px,6.4vw,88px);letter-spacing:-.04em;line-height:1;color:var(--white)}
.stat .n small{font-size:.45em;letter-spacing:-.02em;margin-left:.08em}
.stat .l{margin-top:10px;color:var(--on-dark-2);font-size:15px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}}

/* bento */
#bento{padding-block:0 clamp(96px,12vw,160px);position:relative}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.b{border-radius:var(--r-lg);background:var(--sea-2);color:var(--on-dark);overflow:hidden;position:relative;min-height:240px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end}
.b.photo{padding:0;justify-content:flex-end}
.b.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transform:scale(1.12)}
.b.photo .cap2{position:relative;z-index:2;padding:24px 28px;background:linear-gradient(transparent,#000000a6);font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1.15}
.b .big{font-family:var(--display);font-weight:700;font-size:clamp(72px,9vw,128px);line-height:.9;letter-spacing:-.05em;background:linear-gradient(135deg,var(--wood) 10%,#f1dfbf 55%,var(--wood-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.b .t{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em;line-height:1.2;margin-top:10px}
.b1{grid-column:span 4;min-height:420px}.b2{grid-column:span 2;min-height:420px}
.b3{grid-column:span 2}.b4{grid-column:span 2}.b5{grid-column:span 2}
.b6{grid-column:span 3;min-height:320px}.b7{grid-column:span 3;min-height:320px}
@media (max-width:860px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.b1,.b6,.b7{grid-column:span 2}.b2,.b3,.b4,.b5{grid-column:span 1}.b1{min-height:340px}.b2{min-height:260px}.b{min-height:220px;padding:20px}}

/* highlights carousel */
#highlights{background:var(--paper);padding-block:clamp(96px,12vw,150px) clamp(60px,8vw,100px)}
#highlights .head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:36px var(--gutter) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(80vw,1000px);scroll-snap-align:start;position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--paper-2)}
.slide img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1.2s var(--ease)}
.slide.is-active img{transform:scale(1.03)}
.slide p{position:absolute;left:0;right:0;top:0;padding:24px 26px;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;color:var(--white);background:linear-gradient(#00000080,transparent)}
.slide:last-child{margin-right:var(--gutter)}
.cnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.pips{display:flex;gap:10px;align-items:center;background:#1111140f;border-radius:999px;padding:12px 16px}
.pips button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:#11111459;cursor:pointer;position:relative;overflow:hidden;transition:width .4s var(--ease)}
.pips button.on{width:44px;background:#11111433}
.pips button.on::after{content:"";position:absolute;inset:0;width:0;background:var(--ink);border-radius:99px}
.pips.playing button.on::after{animation:pipfill 5s linear forwards}
.pips:not(.playing) button.on::after{width:100%}
@keyframes pipfill{to{width:100%}}
.cbtn{width:44px;height:44px;border-radius:50%;border:0;background:#1111140f;color:var(--ink);font-size:18px;cursor:pointer;display:grid;place-items:center}
.cbtn:hover{background:#1111141f}
.swipe{font-size:13px;color:var(--muted)}
@media (max-width:760px){.slide{flex-basis:84vw;aspect-ratio:4/5}.cbtn.arrow{display:none}}

/* floors */
#floors{padding-block:clamp(96px,12vw,150px)}
.facade{position:relative;margin-top:clamp(36px,5vw,56px);border-radius:var(--r-lg);overflow:hidden;background:#0b2026;aspect-ratio:3560/1700;box-shadow:0 30px 80px #00000059}
.facade svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.facade .hit{fill:transparent;cursor:pointer;outline:none}
.facade .hit:hover,.facade .hit:focus-visible{fill:#f5f2ec14}
.fchip{position:absolute;z-index:3;right:4%;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;background:#0f2a31cc;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #c9a36b80;color:var(--white);border-radius:999px;padding:8px 14px 8px 8px;font-size:14px;white-space:nowrap;pointer-events:none;transition:top .9s cubic-bezier(.76,0,.24,1),opacity .4s}
.fchip b{display:inline-grid;place-items:center;min-width:36px;height:36px;border-radius:999px;background:var(--wood);color:var(--ink);font-family:var(--display);font-size:16px;font-weight:700}
.fchip span{color:var(--on-dark)}
.fchip.hide{opacity:0}
.fctrl{display:flex;justify-content:center;margin-top:-34px;position:relative;z-index:4;padding-inline:12px}
.floorbar{position:relative;display:flex;gap:2px;background:#0f2a31d9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #f5f2ec26;border-radius:999px;padding:5px;box-shadow:0 10px 30px #0000004d}
.floorbar .thumb{position:absolute;top:5px;bottom:5px;left:5px;width:0;border-radius:999px;background:var(--wood);transition:transform .55s cubic-bezier(.34,1.4,.64,1),width .55s cubic-bezier(.34,1.4,.64,1);z-index:0}
.floorbar button{position:relative;z-index:1;min-width:58px;border:0;background:transparent;color:var(--on-dark);font:600 16px/1 var(--body);padding:13px 14px;border-radius:999px;cursor:pointer;transition:color .3s}
.floorbar button[aria-pressed="true"]{color:var(--ink)}
.fsum{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin:clamp(36px,4vw,52px) 0 18px}
.fsum .fn{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;line-height:1}
.fsum .ff{color:var(--on-dark-2);font-size:15px;margin-top:6px}
.fsum .fp{text-align:right}
.fsum .fp b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;color:var(--white);line-height:1}
.fsum .fp span{font-size:13px;color:var(--on-dark-2)}
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.unit{background:var(--sea-2);border-radius:var(--r-md);padding:18px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start}
.unit .u{font-weight:600;font-size:16px}
.unit .d{grid-column:1;font-size:13.5px;color:var(--on-dark-2)}
.unit .pr{grid-row:1/3;grid-column:2;text-align:right}
.unit .pr b{display:block;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.02em}
.unit .pr span{font-size:12px;color:var(--on-dark-2)}
.unit button{grid-column:1/-1;justify-self:start;margin-top:8px;border:0;background:transparent;color:var(--wood);font:500 15px/1 var(--body);padding:6px 0;cursor:pointer}
.unit button::after{content:" ›";font-size:1.2em}
.fnote{margin-top:16px;font-size:13px;color:var(--on-dark-2)}
@media (max-width:760px){
  .facade{aspect-ratio:1760/1640;border-radius:22px}
  .fchip{font-size:12px;padding:6px 10px 6px 6px;gap:8px}
  .fchip b{min-width:30px;height:30px;font-size:14px}
  .fctrl{margin-top:14px;padding-inline:0}
  .floorbar{width:100%;justify-content:space-between}
  .floorbar button{min-width:0;flex:1;padding:13px 0}
}

/* build */
#build{padding-block:clamp(96px,12vw,150px);background:var(--paper)}
.timeline{position:relative;margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.tl-fill{position:absolute;left:0;top:9px;height:2px;width:0;background:var(--wood-deep)}
.step{position:relative;padding-top:34px}
.step::before{content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px #11111440}
.step.done::before{background:var(--wood-deep);box-shadow:none}
.step.now::before{background:var(--wood);box-shadow:0 0 0 6px #c9a36b40}
.step .d{font-size:13px;color:var(--muted)}
.step .t{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.02em;line-height:1.2;margin-top:4px}
.step.now .d{color:var(--wood-deep);font-weight:600}
.build-photo{margin-top:clamp(40px,5vw,64px);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/2;position:relative;background:#e6dfd3}
.build-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;max-width:none;display:block}
.build-photo span{position:absolute;left:20px;bottom:16px;color:var(--white);font-size:13px;text-shadow:0 1px 8px #00000080}
@media (max-width:760px){.timeline{grid-template-columns:1fr;gap:0}.timeline::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}.tl-fill{display:none}.step{padding:0 0 22px 34px}.step::before{top:2px}.build-photo{aspect-ratio:4/3}}

/* scala zoom + houses */
#scala-zoom{height:220vh;background:var(--ink)}
#scala-zoom .stage{display:grid;place-items:center}
.zoom-media{position:absolute;inset:0;overflow:hidden;clip-path:inset(18% 16% 18% 16% round 28px)}
.zoom-media img{width:100%;height:100%;object-fit:cover;max-width:none}
.zoom-text{position:relative;z-index:2;text-align:center;color:var(--white);padding-inline:var(--gutter);text-shadow:0 2px 30px #00000080}
#houses{padding-block:clamp(80px,10vw,140px)}
.houses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(36px,5vw,56px)}
.house{background:var(--ink-2);border-radius:var(--r-lg);overflow:hidden}
.house .img{aspect-ratio:3/2;overflow:hidden}
.house .img img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1s var(--ease)}
.house:hover .img img{transform:scale(1.04)}
.house .body{padding:24px 26px 28px;display:grid;gap:14px}
.house .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.house h3{font-size:clamp(26px,2.6vw,34px)}
.badge{font-size:12px;font-weight:600;background:var(--wood);color:var(--ink);border-radius:999px;padding:5px 10px}
.house .p b{font-family:var(--display);font-weight:600;font-size:clamp(28px,2.8vw,36px);letter-spacing:-.03em}
.house .p span{font-size:14px;color:var(--on-dark-2);margin-left:6px}
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid var(--line-dark);padding-top:14px}
.specs b{display:block;font-size:17px}
.specs span{font-size:13px;color:var(--on-dark-2)}
.reserved{margin-top:18px;font-size:14px;color:var(--on-dark-2);text-align:center}
@media (max-width:760px){.houses{grid-template-columns:1fr}}

/* trust */
#trust{padding-block:clamp(96px,12vw,160px);background:var(--paper)}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(36px,5vw,56px)}
.quote{background:var(--card);border-radius:var(--r-md);padding:28px;display:grid;gap:14px;align-content:space-between;min-height:180px}
.quote p{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1.2}
.quote cite{font-style:normal;font-size:14px;color:var(--wood-deep);font-weight:600}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}

/* contact */
#contact{padding-block:clamp(96px,12vw,160px) clamp(80px,10vw,120px)}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(36px,5vw,56px)}
.way{background:var(--ink-2);border-radius:var(--r-lg);padding:28px;display:grid;gap:12px;align-content:start}
.way svg{width:36px;height:36px;stroke:var(--wood);fill:none;stroke-width:1.6}
.way h3{font-size:24px}
.way p{color:var(--on-dark-2);font-size:15px}
.way .link{margin-top:6px}
.formcard{margin-top:14px;background:var(--ink-2);border-radius:var(--r-lg);padding:clamp(22px,3vw,40px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,56px)}
form.lf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fld{position:relative;min-width:0}
.fld.full{grid-column:1/-1}
.fld input,.fld select{width:100%;min-width:0;height:56px;border-radius:var(--r-sm);border:1px solid #f5f2ec33;background:#ffffff0a;color:var(--white);font:400 17px/1 var(--body);padding:22px 14px 8px}
.fld select{padding-top:20px;appearance:none;-webkit-appearance:none}
.fld select option{color:var(--ink)}
.fld label{position:absolute;left:15px;top:9px;font-size:12px;color:var(--on-dark-2);pointer-events:none}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--wood);box-shadow:0 0 0 3px #c9a36b40}
.fld .cc{position:absolute;left:14px;bottom:10px;font-size:17px;color:var(--white)}
.fld.phone input{padding-left:52px}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--on-dark-2)}
.consent input{margin-top:3px;accent-color:var(--wood)}
.chip{grid-column:1/-1;background:var(--wood-soft);color:var(--ink);border-radius:var(--r-sm);padding:10px 14px;font-size:14px;font-weight:600}
.ok{grid-column:1/-1;color:var(--wood);font-weight:600}
.direct{display:grid;gap:14px;align-content:start}
.direct .num{font-family:var(--display);font-weight:600;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;user-select:all}
.direct p{color:var(--on-dark-2);font-size:14px}
@media (max-width:860px){.ways{grid-template-columns:1fr}.formcard{grid-template-columns:1fr}form.lf{grid-template-columns:1fr}}

/* footer */
footer{background:var(--paper);padding:28px 0 calc(40px + env(safe-area-inset-bottom,0px));font-size:12px;color:var(--muted)}
footer .wrap{display:grid;gap:12px}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
footer .legal{display:flex;gap:18px;flex-wrap:wrap}
footer .legal a:hover{text-decoration:underline}
.energy{display:inline-flex;gap:8px;align-items:center;color:var(--ink);font-weight:600}
.energy i{display:inline-grid;place-items:center;width:22px;height:20px;background:#2e8b3e;color:#fff;font-style:normal;font-weight:700;font-size:12px;clip-path:polygon(0 0,75% 0,100% 50%,75% 100%,0 100%)}

/* v2 (06/10): hero CTA, maps, HubSpot chat offset */
.pill.big{min-height:58px;padding:0 34px;font:600 19px/1 var(--body)}
#hero .hero-links{margin-top:16px}
.mapblock{padding-block:0 clamp(96px,12vw,150px)}
.maphead{display:flex;align-items:end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:22px}
.maphead .lead{max-width:640px;margin-top:12px;font-size:clamp(17px,1.5vw,20px)}
.map{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8;background:var(--sea-2);box-shadow:0 20px 60px #00000040}
.map iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:760px){.map{aspect-ratio:4/5}.mapblock{padding-block:0 clamp(72px,10vw,120px)}#hubspot-messages-iframe-container{bottom:72px!important}}

/* mobile action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:flex;position:fixed;z-index:65;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));border-radius:999px;background:#111111e0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:6px;gap:6px;box-shadow:0 8px 24px #00000040}
  .mbar a{flex:1;display:grid;place-items:center;height:44px;border-radius:999px;color:var(--on-dark);font:600 14px/1 var(--body)}
  .mbar a.hl{background:var(--wood);color:var(--ink)}
  body{padding-bottom:76px}
  .ntoggle{left:12px;bottom:auto;top:calc(62px + env(safe-area-inset-top,0px))}
}

@media (prefers-reduced-motion: reduce){
  .film.f-amura,.film.f-scala,#scala-zoom{height:auto}
  .scroll-hint{display:none}
  .stage{position:relative;height:auto;min-height:70vh}
  .frame video{display:none}
  .caps{position:relative;top:auto;transform:none;height:auto;display:grid;gap:12px;padding:40vh 0 40px}
  .cap{position:relative;opacity:1;transform:none;filter:none;font-size:clamp(22px,3vw,32px)}
  .zoom-media{clip-path:none}
  .reveal-text .w{opacity:1}
}

/* ---------- multi-page additions (06/10/2026) ---------- */
/* hero: project pages */
.hero-eyebrow{margin-bottom:14px}
#hero .hero-links{margin-top:16px}
.hero-media{position:relative}
.hero-media.portrait-desk video,.hero-media.portrait-desk img{object-position:center 45%}
.sndbtn{position:absolute;right:clamp(16px,5%,56px);bottom:18px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:#111111cc;color:#fff;font:600 13px/1 var(--body);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sndbtn::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--wood);box-shadow:inset 0 0 0 3px #111}
.sndbtn.on::before{background:#fff}
.sndbtn:hover{background:#111111e6}

/* shorts (Scala): vertical real-footage clips, play only in view */
#shorts{background:var(--paper);padding-block:clamp(96px,12vw,150px) clamp(60px,8vw,100px)}
#shorts .head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.track.shorts{gap:16px;padding-top:32px}
.short{flex:0 0 min(64vw,300px);scroll-snap-align:start;position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);margin:0}
.short video,.short img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.short p{position:absolute;left:0;right:0;bottom:0;margin:0;padding:48px 18px 18px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--white);background:linear-gradient(transparent,#000000a6)}
.short:last-child{margin-right:var(--gutter)}

/* tour (Scala): Apple-style "Ver el vídeo" — nothing loads until the click */
#tour{padding-block:clamp(96px,12vw,150px)}
#tour .head{display:flex;align-items:end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
#tour .head .lead{margin-top:12px;max-width:620px}
.link.play::after{content:"▶";font-size:.75em;transform:none;margin-left:.2em}
.tourposter{position:relative;width:min(400px,78vw);aspect-ratio:9/16;margin:clamp(28px,4vw,44px) auto 0;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;background:var(--ink-2);box-shadow:0 30px 80px #00000066}
.tourposter img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1.2s var(--ease)}
.tourposter:hover img{transform:scale(1.03)}
.tourposter .playbig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:#f5f2ecd9;color:var(--ink);display:grid;place-items:center;font-size:30px;padding-left:6px;box-shadow:0 12px 40px #00000059;transition:transform .3s var(--ease)}
.tourposter:hover .playbig{transform:translate(-50%,-50%) scale(1.06)}
.tourposter .dur{position:absolute;right:14px;bottom:14px;background:#111111cc;color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:6px 10px}
.tourposter .lbl{position:absolute;left:14px;bottom:14px;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 8px #00000080}
@media (min-width:861px){#tour .wrap.body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}#tour .wrap.body .tourposter{margin:0 auto}}
.modal{position:fixed;inset:0;z-index:100;background:#000000e8;display:grid;place-items:center;padding:16px}
.mbox{position:relative;height:min(92vh,1000px);aspect-ratio:9/16;max-width:94vw}
.mbox video{width:100%;height:100%;object-fit:contain;background:#000;border-radius:18px;display:block}
.mclose{position:absolute;top:8px;right:8px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:#111111cc;color:#fff;font-size:24px;line-height:1;cursor:pointer}
body.modal-open{overflow:hidden}

/* nosotros */
#about{padding-block:clamp(96px,12vw,160px) clamp(40px,5vw,64px)}
#about .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,56px);align-items:start}
#about .cols p{font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:var(--graphite)}
#about .photo{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3}
#about .photo img{width:100%;height:100%;object-fit:cover;max-width:none}
@media (max-width:860px){#about .cols{grid-template-columns:1fr}}

/* shorts: explicit play button (CEO 06/10: a clear control, not only autoplay-in-view) */
.short{cursor:pointer}
.short .pbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border:0;border-radius:50%;background:#f5f2ecd9;color:var(--ink);font-size:22px;padding-left:5px;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px #00000059;transition:opacity .3s,transform .3s var(--ease);z-index:2}
.short:hover .pbtn{transform:translate(-50%,-50%) scale(1.06)}
.short.playing .pbtn{opacity:0;pointer-events:none}
.short .fsbtn{position:absolute;right:12px;top:12px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:#111111b3;color:#fff;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,transform .2s var(--ease)}
.short .fsbtn:hover{background:#111111e6;transform:scale(1.06)}
.mbox.wide{aspect-ratio:auto;width:min(96vw,1400px);height:min(92vh,900px)}
.short.loading .pbtn{animation:pbpulse 1s ease-in-out infinite}
@keyframes pbpulse{50%{opacity:.45}}

/* press: real logos + links to the articles (as on www.arev.homes) */
.press{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:clamp(36px,5vw,56px)}
.pcard{background:var(--card);border-radius:var(--r-md);padding:26px 26px 22px;display:grid;gap:14px;align-content:start;min-height:200px}
.pcard .plogo{height:24px;width:auto;max-width:190px;object-fit:contain;object-position:left center;filter:grayscale(1);opacity:.9}
.pcard p{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1.22;margin:0}
.pcard .link{font-size:15px;align-self:end}

/* maps: Leaflet */
.maphead{align-items:flex-start}
.maphead .pill.ghost{margin-top:6px}
.lmap{position:relative;z-index:0;isolation:isolate;background:#efece6}
.lmap canvas{outline:none}
.pin{display:block;width:26px;height:26px;border-radius:50%;background:var(--wood);border:5px solid #fff;box-shadow:0 2px 14px #00000066;cursor:pointer}
.pin::after{content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);background:#c9a36b33;animation:pinpulse 2.4s ease-out infinite}
@keyframes pinpulse{0%{transform:translate(-50%,-50%) scale(.5);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
.maplibregl-popup-content{font:600 14px/1.3 var(--body);color:var(--ink);border-radius:12px;padding:10px 14px;box-shadow:0 8px 24px #00000033}
.maplibregl-ctrl-attrib{font-size:10px}
.maplibregl-ctrl-group{border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #0000002a}
.gm-label{font:600 14px/1.3 var(--body);color:var(--ink);padding:4px 2px}
.lmap .gm-style .gm-style-iw-c{border-radius:12px}

/* 3D model (Amura): poster + button; model-viewer is loaded only on click */
#model3d{padding-block:clamp(96px,12vw,150px)}
.m3box{position:relative;margin-top:clamp(36px,5vw,56px);border-radius:var(--r-lg);overflow:hidden;background:#0b2026;aspect-ratio:16/9;max-height:80vh;box-shadow:0 30px 80px #00000059}
.m3box .m3poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;opacity:.85;transition:opacity .6s}
.m3box.loading .m3poster{opacity:.35}
.m3box.ready .m3poster,.m3box.ready .m3cta{display:none}
.m3cta{position:absolute;left:0;right:0;bottom:0;display:grid;place-items:center;align-content:end;gap:10px;z-index:2;padding:72px 16px clamp(16px,2.6vw,28px);background:linear-gradient(#0b202600,#0b2026c7);pointer-events:none}
.m3cta>*{pointer-events:auto}
.m3note{font-size:13px;color:var(--on-dark-2);margin:0}
.m3box.loading .m3cta .pill{opacity:.6;pointer-events:none}
.m3box model-viewer{position:absolute;inset:0;width:100%;height:100%;background:#0b2026;--poster-color:transparent}
.m3hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;margin:0;font-size:12px;color:#ffffffb3;white-space:nowrap;pointer-events:none}
.m3prog{position:absolute;left:0;right:0;top:0;height:3px;background:var(--wood);transform-origin:left;transform:scaleX(0);z-index:4;transition:transform .2s}
@media (max-width:760px){.m3box{aspect-ratio:4/5}}
/* turntable (07/10): Cycles frames on a canvas over the poster (= frame 0001), both letterboxed; the 3D button sits at the bottom */
.m3tt{position:absolute;inset:0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none}
.m3tt.drag{cursor:grabbing}
.m3tt.none{cursor:default}
.m3tt:focus-visible{box-shadow:inset 0 0 0 3px var(--wood)}
.m3box .m3tt .m3poster{object-fit:contain;opacity:1;pointer-events:none;-webkit-user-drag:none}
.m3box.loading .m3tt .m3poster{opacity:.35}
.m3tt.on .m3poster{visibility:hidden}
.m3tt .m3canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s}
.m3tt.on .m3canvas{opacity:1}
.m3box.loading .m3tt .m3canvas{opacity:.35}
.m3ttbtn{position:absolute;left:14px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 16px 0 14px;border:0;border-radius:999px;background:#111111b3;color:#fff;font:600 13px/1 var(--body);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.m3ttbtn .ic{display:block;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.m3ttbtn[aria-pressed="true"] .ic{width:10px;height:12px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.m3ttbtn:focus-visible{outline:3px solid var(--wood);outline-offset:2px}
.m3under{display:grid;gap:4px;margin-top:14px;text-align:center}
.m3under p{margin:0}
.m3tthint{font-size:14px;color:var(--on-dark)}
.m3tthint.off{visibility:hidden}
.m3cap{font-size:12.5px;color:var(--on-dark-2)}

/* small helper */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* video modal: one layer, one close (CEO 06/10 — no browser fullscreen on top) */
.mclose{width:46px;height:46px;font-size:28px;background:#111111e6;top:10px;right:10px}
body.modal-open #hubspot-messages-iframe-container,body.modal-open .ntoggle,body.modal-open .mbar{display:none!important}
@media (max-width:760px){.modal{padding:0}.mbox{width:100vw;height:100vh;height:100dvh;max-width:none;aspect-ratio:auto}.mbox video{border-radius:0}.mclose{top:calc(12px + env(safe-area-inset-top,0px));right:12px}}

/* Leya: the site's own chat launcher. HubSpot's launcher stays hidden; its container shows only while the chat is open. */
#hubspot-messages-iframe-container{display:none!important}
body.hs-open #hubspot-messages-iframe-container{display:block!important}
body.hs-open .leyabtn,body.modal-open .leyabtn{display:none}
.leyabtn{position:fixed;right:18px;bottom:18px;z-index:95;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 20px 0 10px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 15px/1 var(--body);cursor:pointer;box-shadow:0 12px 32px #00000045;transition:transform .25s var(--ease),box-shadow .25s}
.leyabtn:hover{transform:translateY(-2px);box-shadow:0 16px 36px #00000055}
.leyabtn .lv{width:36px;height:36px;border-radius:50%;background:var(--wood);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:17px}
.leyabtn .ls{display:none}
.leyabtn .lb{position:absolute;top:-4px;right:-2px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#d64545;color:#fff;font-size:12px;line-height:20px;text-align:center}
.leyabtn.busy .lv{animation:pbpulse 1s ease-in-out infinite}
.leyafb{position:fixed;inset:0;z-index:120;background:#000000a6;display:grid;place-items:center;padding:16px}
.leyafb-box{position:relative;width:min(440px,100%);background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:32px 28px 28px;box-shadow:0 30px 80px #00000066;display:grid;gap:12px;justify-items:start}
.leyafb-box .mclose{top:10px;right:10px;background:#11111118;color:var(--ink)}
.leyafb-box .lv.big{width:52px;height:52px;font-size:24px;border-radius:50%;background:var(--wood);display:grid;place-items:center;font-family:var(--display);font-weight:700}
.leyafb-box h3{margin:4px 0 0;font-family:var(--display);font-size:24px;letter-spacing:-.02em}
.leyafb-box p{margin:0;color:var(--graphite);line-height:1.45}
.leyafb-box .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;align-items:center}
@media (max-width:600px){.leyabtn .lt{display:none}.leyabtn .ls{display:inline}.leyabtn{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}}

/* Amura floor plan under the floor picker + apartment sheet modal (commercial plans PDF) */
.fplan{margin:0 0 18px}
.fplan-box{position:relative;width:100%;background:#fff;border-radius:var(--r-md);overflow:hidden}
.fplan-box img,.fplan-box svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.fplan-box path{stroke-width:4;transition:fill .25s,stroke .25s}
.fplan-box path.av{fill:#c9a36b66;stroke:#a87532;stroke-width:6;cursor:pointer}
.fplan-box path.av:hover,.fplan-box path.av:focus,.fplan-box path.av.hot{fill:#c9a36bb3;stroke:#7a4f16;outline:none}
.fplan-box path.so{fill:#0f2a3166;stroke:none;pointer-events:none}
.fplan-leg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px;font-size:13px;color:var(--on-dark-2)}
.fplan-leg .lg{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:-8px}
.fplan-leg .lg.av{background:#c9a36b99;border:1px solid #b8894a}
.fplan-leg .lg.so{background:#8a99a0}
.fplan-hint{margin-left:auto}
.unit.hot{outline:2px solid var(--wood)}
.unit .ubtns{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 18px}
.unit .ubtns button{grid-column:auto}
.umodal{position:fixed;inset:0;z-index:110;background:#000000c7;display:grid;place-items:center;padding:16px}
.ubox{position:relative;width:min(1100px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:var(--r-lg);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);box-shadow:0 30px 80px #00000080}
.ubox .mclose{top:12px;right:12px;background:#11111118;color:var(--ink)}
.usheet{background:#fff;display:grid;place-items:center;padding:12px}
.usheet img{width:100%;height:auto;max-height:calc(100dvh - 60px);object-fit:contain}
.uinfo{padding:clamp(24px,3vw,40px);display:grid;align-content:center;gap:12px}
.uinfo h3{margin:0;font-family:var(--display);font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;line-height:1.1}
.uinfo .d{color:var(--graphite)}
.uinfo .pr b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(30px,3vw,40px);letter-spacing:-.03em}
.uinfo .pr span{font-size:13px;color:var(--graphite)}
.uinfo .actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:6px}
.uinfo .unote{font-size:12.5px;color:var(--graphite);margin:4px 0 0}
@media (max-width:760px){.umodal{padding:0}.ubox{grid-template-columns:1fr;max-height:100dvh;height:100dvh;border-radius:0}.usheet img{max-height:none}.fplan-hint{margin-left:0;width:100%}}
.m3chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.m3chips button{border:1px solid #ffffff33;background:#ffffff10;color:var(--white);font:600 14px/1 var(--body);padding:10px 14px;border-radius:999px;cursor:pointer}
.m3chips button[aria-pressed="true"]{background:var(--wood);color:var(--ink);border-color:var(--wood)}

/* phones: the action bar (WhatsApp · Llamar · Visita) owns the bottom edge — Leya becomes a round button above it,
   the prototype notes toggle moves next to it instead of covering the hero button (CEO screenshot 06/10 22:06) */
@media (max-width:760px){
  .leyabtn{right:14px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:56px;height:56px;min-height:0;padding:0;justify-content:center;gap:0}
  .leyabtn .lt,.leyabtn .ls{display:none}
  .leyabtn .lv{width:44px;height:44px;font-size:19px}
  .ntoggle{top:auto;left:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* phones/tablets: burger → full-width menu under the header (CEO 06/10 22:07) */
.burger{display:none}
.mnav{display:none}
@media (max-width:860px){
  .burger{display:grid;place-items:center;gap:5px;align-content:center;width:42px;height:42px;margin-right:-6px;border:0;background:transparent;cursor:pointer;padding:0}
  .burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease)}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .mnav:not([hidden]){display:grid;gap:4px;padding:14px 20px 22px;background:#f5f2ecf7;border-bottom:1px solid var(--line);box-shadow:0 18px 40px #00000026}
  .mnav a{font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-.02em;color:var(--ink);padding:10px 0}
  .mnav a.pill{justify-self:start;margin-top:10px;font-family:var(--body);font-size:16px;padding:0 22px}
}
/* Leya icon: chat bubble (CEO 06/10 22:38: «L» was unclear) */
.leyabtn .lv svg{display:block;width:22px;height:22px}
.leyafb-box .lv.big svg{width:28px;height:28px}

/* Amura: our Cycles renders vs. the architect's (/amura/compare/, 07/10) — before/after slider, left = architect, right = ours */
#cmp{padding-block:calc(52px + clamp(40px,7vh,90px)) clamp(80px,10vw,130px)}
.cmps{display:grid;gap:clamp(40px,5vw,64px);margin-top:clamp(36px,5vw,56px)}
.cmp{margin:0}
.cmp-box{--pos:50%;position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#0b2026;box-shadow:0 30px 80px #00000059;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cmp.solo .cmp-box{cursor:default}
.cmp-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;pointer-events:none;-webkit-user-drag:none}
.cmp-box img.ref{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-box img.miss{visibility:hidden}
.cmp-lbl{position:absolute;top:14px;z-index:2;padding:8px 12px;border-radius:999px;background:#111111b3;color:#fff;font:600 12.5px/1 var(--body);pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cmp-lbl.l{left:14px}
.cmp-lbl.r{right:14px}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:3;width:44px;margin-left:-22px;cursor:ew-resize;outline:none}
.cmp-handle::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 12px #00000066}
.cmp-handle::after{content:"";position:absolute;left:0;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 6px 20px #00000066}
.cmp-handle:focus-visible::after{box-shadow:0 0 0 3px var(--wood),0 6px 20px #00000066}
.cmp figcaption{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em}
.cmpfilm{margin-top:clamp(64px,8vw,110px)}
.cmpfilm h2{margin:0 0 clamp(20px,3vw,32px);text-align:center}
.cmpvid{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#0b2026;box-shadow:0 30px 80px #00000059}
.cmpvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cmpfilm p{margin:14px 0 0;font-size:13px;color:var(--on-dark-2);text-align:center}
@media (max-width:760px){.cmp-box,.cmpvid{border-radius:var(--r-md)}.cmp-lbl{top:10px;padding:7px 10px;font-size:11.5px}.cmp-lbl.l{left:10px}.cmp-lbl.r{right:10px}}

/* lead form: invalid fields, sending state; success / error pop-up (07/10) */
.fld.bad input,.fld.bad select{border-color:#e0795f;box-shadow:0 0 0 3px #e0795f33}
.consent.bad{color:#f0a48f}.consent.bad input{outline:2px solid #e0795f;outline-offset:2px}
.lf .ok.err{color:#f0a48f;font-weight:500}
.lf button[disabled]{opacity:.65;cursor:progress}
.donepop{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px;background:#0f2a31b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer}
.donepop[hidden]{display:none}
.donepop.on{animation:dpf .25s ease both}
.dp-card{position:relative;width:min(420px,100%);background:var(--paper);color:var(--ink);border-radius:28px;padding:44px 28px 34px;text-align:center;box-shadow:0 30px 80px #00000059}
.donepop.on .dp-card{animation:dpc .5s cubic-bezier(.2,.9,.3,1.25) both}
.dp-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:#0000000f;color:var(--ink);font:400 26px/1 var(--body);cursor:pointer;display:grid;place-items:center}
.dp-x:hover{background:#0000001f}
.dp-ic{width:78px;height:78px;margin:0 auto 18px;display:block}
.dp-c{fill:none;stroke:var(--wood);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:0}
.dp-k{fill:none;stroke:var(--sea);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:0}
.donepop.on .dp-c{stroke-dashoffset:151;animation:dpd .6s ease-out .15s forwards}
.donepop.on .dp-k{stroke-dashoffset:40;animation:dpd .35s ease-out .65s forwards}
.donepop.err .dp-c{stroke:#d9694f}.donepop.err .dp-k{stroke:#d9694f}
.dp-card h3{font-family:var(--display);font-size:clamp(26px,6vw,32px);font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.dp-card p{margin:0;color:var(--muted);font-size:16px;line-height:1.45}
@keyframes dpf{from{opacity:0}to{opacity:1}}
@keyframes dpc{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
@keyframes dpd{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.donepop.on,.donepop.on .dp-card{animation:none}.donepop.on .dp-c,.donepop.on .dp-k{animation:none;stroke-dashoffset:0}}
.dp-card .dp-why{margin-top:12px;font-size:12px;color:#9a9a9a}.dp-card .dp-why:empty{display:none}
.dp-card .dp-wa{margin-top:20px}.dp-card .dp-wa[hidden]{display:none}
.fld select:invalid{color:#f5f2ec8c}

/* Leya: HubSpot chat embedded inline in our panel (08/10) — no HubSpot expand/resize, our frame and × */
.leyapanel{position:fixed;right:18px;bottom:18px;z-index:120;width:400px;height:min(660px,calc(100vh - 100px));border-radius:22px;overflow:hidden;background:var(--paper);box-shadow:0 28px 80px #00000059,0 0 0 1px #0000000f;display:flex;flex-direction:column}
.leyapanel[hidden]{display:none}
.leyapanel .lp-chat{position:relative;flex:1;min-height:0}
/* "Conectando con Leya…" while HubSpot's chat loads (slow network): no "could not open" message before 25 s (CEO 12/10) */
.leyapanel .lp-wait{display:none}
.leyapanel.wait .lp-wait{position:absolute;inset:0;z-index:2;display:grid;place-items:center;margin:0;padding:24px;text-align:center;color:#3b3833;font:500 16px/1.4 var(--body);background:var(--paper);pointer-events:none}
.leyapanel.wait .lp-wait::after{content:"";display:block;width:34px;height:34px;margin:14px auto 0;border-radius:50%;border:3px solid #c9a36b40;border-top-color:var(--wood);animation:lpspin 1s linear infinite}
@keyframes lpspin{to{transform:rotate(360deg)}}
.leyapanel .lp-chat>div,.leyapanel .lp-chat iframe{width:100%!important;height:100%!important;border:0!important}
.lp-x{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:#ffffff1f;color:#fff;font:300 28px/1 var(--body);cursor:pointer;display:grid;place-items:center}
.lp-x:hover{background:#ffffff38}
body.modal-open .leyapanel{display:none}
@media (max-width:700px){.leyapanel{right:0;bottom:0;left:0;top:0;width:auto;height:auto;border-radius:0}}

/* ========== v2 layer (08/10/2026) — conversion layout on top of the v1 styles ==========
   First screen: facts + one main button over the video; every "book" opens the HubSpot Meetings sheet; the final #visita
   block carries the calendar inline; three-field form; mobile bar Visita · WhatsApp · Llamar (48 px buttons). */

/* ---------- hero ---------- */
#hero.v2hero{padding:0;background:var(--sea);color:var(--on-dark);overflow:hidden;position:relative}
.v2media{position:absolute;inset:0;background:var(--sea)}
.v2media img,.v2media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.v2media video{opacity:0;transition:opacity .8s var(--ease)}
.v2media video.on{opacity:1}
.v2hero-full{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
.v2hero-full::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0f2a3166 0%,#0f2a3100 20%,#0f2a3100 34%,#0f2a31bf 66%,#0f2a31f2 100%)}
.v2hero-body{position:relative;z-index:2;width:100%;padding-top:calc(52px + 48px);padding-bottom:clamp(28px,6vh,72px)}
.v2hero .eyebrow{color:var(--wood);margin-bottom:0}
.v2h1{font-family:var(--display);font-weight:600;font-size:clamp(42px,7.2vw,104px);letter-spacing:-.035em;line-height:1;margin:10px 0 0;max-width:15ch;text-wrap:balance}
#hero.v2hero .lead{color:#f5f2ece6;max-width:640px;margin:16px 0 0;font-size:clamp(17px,1.6vw,22px)}
.v2hero .actions{justify-content:flex-start;margin-top:22px;gap:12px}
.v2hero .pill.ghost{color:#fff;box-shadow:inset 0 0 0 1.5px #ffffffb3;background:#ffffff0f}
.v2hero .pill.ghost:hover{background:#ffffff26}
.micro{margin-top:12px;font-size:13.5px;color:#f5f2ecb3}
.v2hero .media-tag{left:auto;right:16px;top:calc(52px + 14px);bottom:auto;z-index:3;text-shadow:0 1px 6px #0006}
.v2hero .sndbtn{top:calc(52px + 40px);bottom:auto;right:16px}

/* facts: price from · left · handover · size */
.facts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{display:grid;gap:3px;padding:10px 14px;border-radius:14px;background:#0f2a3166;border:1px solid #ffffff2e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.facts b{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em;white-space:nowrap;line-height:1.1}
.facts span{font-size:12.5px;color:#f5f2ecbf;white-space:nowrap}
.facts.sm li{background:var(--paper-2);border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:9px 12px}
.facts.sm b{font-size:16px;color:var(--ink)}
.facts.sm span{color:var(--muted)}

/* home hero: text left, the vertical real video as a tall card on the right */
#hero.v2hero-home{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,64px);padding:calc(52px + 28px) max(var(--gutter),calc((100vw - 1180px)/2)) 32px}
.v2hero-home .v2media{position:relative;inset:auto;justify-self:center;width:min(100%,calc((100svh - 130px)*9/16));aspect-ratio:9/16;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px #00000066}
.v2hero-home .v2hero-body{order:-1;padding:0}
.v2hero-home .media-tag{top:auto;bottom:14px;left:16px;right:auto}
.v2hero-home .v2h1{font-size:clamp(48px,7.6vw,112px)}

/* ---------- project cards ---------- */
.v2cards{background:var(--paper);padding:clamp(20px,4vw,48px) 0 clamp(72px,9vw,120px)}
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pc{background:var(--card);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line),0 18px 40px #11111110}
.pc .img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.pc .img img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1s var(--ease)}
.pc:hover .img img{transform:scale(1.035)}
.pc .tag{position:absolute;left:14px;bottom:12px;font-size:12px;color:#fff;background:#00000052;padding:4px 9px;border-radius:999px}
.pc .body{padding:22px clamp(18px,2.4vw,28px) 26px;display:grid;gap:12px;align-content:start}
.pc h2.pname{font-size:clamp(44px,5.2vw,72px);letter-spacing:-.04em;line-height:1}
.pc .pline{font-family:var(--display);font-weight:600;font-size:clamp(21px,2vw,28px);letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin-top:-2px}
.pc p{color:var(--graphite)}
.pc .facts{margin:2px 0 0}
.pc .actions{justify-content:flex-start;margin-top:6px;gap:12px 22px}

/* ---------- We build better / Reduce CO2 emissions ---------- */
.v2co2{padding-block:clamp(88px,11vw,140px)}
.v2co2 .lead{margin-top:16px;max-width:680px}
.co2grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(32px,4vw,52px)}
.co2grid>div{background:var(--ink-2);border-radius:var(--r-lg);padding:26px 26px 28px}
.co2grid .n{display:block;font-family:var(--display);font-weight:600;font-size:clamp(46px,5vw,76px);letter-spacing:-.04em;color:var(--wood);line-height:1}
.co2grid p{margin-top:14px;color:var(--on-dark-2)}
.v2co2 .by{margin-top:30px;font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;color:var(--on-dark)}
.actions.left{justify-content:flex-start;margin-top:18px}
.v2co2.split .sgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px}
.ticks li{position:relative;padding-left:32px;color:var(--on-dark-2);font-size:clamp(16px,1.4vw,18px);line-height:1.45}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:14px;height:7px;border-left:2px solid var(--wood);border-bottom:2px solid var(--wood);transform:rotate(-45deg)}
.v2co2 figure{margin:0}
.v2co2 figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg)}
.v2co2 figcaption{font-size:13px;color:var(--on-dark-2);padding:12px 4px 0}
.v2co2.slim{padding-block:clamp(64px,8vw,100px)}
.v2co2.slim .srow{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap}
.v2co2.slim .lead{max-width:720px}

/* ---------- repeated CTA ---------- */
.ctastrip{background:var(--wood-soft);color:var(--ink);padding:20px 0}
.ctastrip .row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.ctastrip p{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}
.ctastrip .actions{justify-content:flex-start;gap:12px 22px}
/* contrast ≥ 4.5:1 (axe, audit 10/10 S1L-09): links on dark cards / the CO₂ block in the light wood, on the wood strip a deeper brown */
.v2co2x .link,.house .link{color:var(--wood)}
.ctastrip .link{color:#6e5229}

/* ---------- proof: works photo with date, who attends you, press ---------- */
.v2proof{background:var(--paper);padding-block:clamp(88px,11vw,140px)}
.pgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;margin-top:clamp(28px,4vw,44px)}
.obra{margin:0;background:var(--card);border-radius:var(--r-lg);overflow:hidden}
.obra img{width:100%;aspect-ratio:16/10;object-fit:cover}
.obra figcaption{padding:18px 22px 22px;display:grid;gap:6px;color:var(--graphite);font-size:15px}
.obra figcaption b{font-family:var(--display);font-size:20px;color:var(--ink);letter-spacing:-.02em}
.team{background:var(--sea);color:var(--on-dark);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);display:grid;gap:10px;align-content:start}
.team .eyebrow{color:var(--wood)}
.team h3{font-size:clamp(28px,3vw,38px)}
.team .role{color:var(--wood);font-weight:600}
.team p{color:var(--on-dark-2)}
.team .langs{font-size:14px}
.team .pill{justify-self:start;margin-top:8px}
.presshead{margin-top:clamp(56px,7vw,88px)}

/* ---------- #visita: inline calendar, form, direct contacts ---------- */
.v2visit{padding-block:clamp(88px,11vw,140px)}
.vhead{text-align:center;max-width:760px;margin:0 auto}
.vhead .lead{margin-top:16px}
.vgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:clamp(28px,4vw,48px);align-items:start}
.v2cal{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:18px 14px 6px;min-height:640px}
.v2cal .kseg,.bk-seg .kseg{margin-left:4px}
.kdesc{font-size:14px;color:var(--muted);margin:10px 4px 4px}
.cal-inline,.bk-cal,.cal-ok{position:relative}
.cal-inline iframe,.bk-cal iframe,.cal-ok iframe{display:block;width:100%;min-width:0;height:680px;border:0}
.cal-wait{display:flex;align-items:center;gap:10px;justify-content:center;height:120px;color:var(--muted);font-size:14px}
.cal-wait span{width:18px;height:18px;border-radius:50%;border:2px solid var(--wood);border-top-color:transparent;animation:v2spin .9s linear infinite}
@keyframes v2spin{to{transform:rotate(360deg)}}
.vside{display:grid;gap:16px}
.vside>div{background:var(--sea-2);border-radius:var(--r-lg);padding:clamp(20px,2.5vw,30px)}
.vside .direct .num{color:var(--on-dark)}
.vside .direct .actions{justify-content:flex-start;gap:12px 20px}
.sea .seg,.vside .seg{background:#ffffff17}
.sea .seg button,.vside .seg button{color:var(--on-dark-2)}
.sea .seg button[aria-pressed="true"],.vside .seg button[aria-pressed="true"]{background:var(--white);color:var(--ink)}
.v2cal .seg{background:#1111140f}
.v2cal .seg button{color:var(--graphite)}
.v2cal .seg button[aria-pressed="true"]{background:var(--white);color:var(--ink)}
.kseg button{font-size:14px;padding:9px 14px}
.vside .kdesc{color:var(--on-dark-2)}

/* lead form: the HubSpot fields (budget and home type as drop-downs, name + surname side by side, phone, e-mail, consent) */
.lf2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lf2>*{grid-column:1/-1}
.lf2>.half{grid-column:auto}
/* drop-downs show a chevron (budget, home type) */
.lf2 .fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23c9a36b%27 stroke-width=%271.6%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
/* phone: a hint that a foreign number goes with its country code; once typed with "+"/"00" the fixed "+34" steps aside */
.fld.phone input::placeholder{font-size:14px;color:var(--on-dark-2);opacity:.75}
.fld.phone.intl .cc{display:none}.fld.phone.intl input{padding-left:14px}
.fld label i{font-style:normal;color:var(--wood)}
.consent2{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--on-dark-2);line-height:1.3;cursor:pointer}
.consent2 input{margin:0;accent-color:var(--wood);width:16px;height:16px;flex:none}
.consent2.bad{color:#f0a48f}
/* legal texts (CEO 10/10, evening): one short line + «Más»; the full HubSpot texts open in place */
.lgl a,.lgl-full a{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px}
.lgl-more{position:relative;background:none;border:0;padding:0 2px;font:inherit;font-weight:600;color:var(--wood);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lgl-full{display:grid;gap:6px;margin-top:-4px}
.lgl-full[hidden]{display:none}
.lgl-full .fine{font-size:11.5px;line-height:1.4}
@media (max-width:359px){.lf2>.half{grid-column:1/-1}}
/* lead form (three fields) */
.lf2{display:grid;gap:12px;position:relative}
.lf2 h3{font-size:clamp(24px,2.4vw,30px)}
.lf2 .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.lf2 .pill{width:100%;margin-top:4px}
.lf2 .pill[disabled]{opacity:.65;cursor:progress}
.fine{font-size:12.5px;color:var(--on-dark-2);line-height:1.45}
.ferr{font-size:13px;color:#f0a48f;margin:6px 2px 0}
.lf2-unit{background:var(--wood-soft);color:var(--ink);border-radius:var(--r-sm);padding:9px 12px;font-size:14px;font-weight:600}
.lf2 input[type="tel"],.lf2 input[type="email"],.lf2 input[name="name"]{font-size:17px}
.lf2-ok{display:grid;gap:10px;justify-items:start}
.lf2-ok h3{font-size:clamp(24px,2.4vw,30px)}
.lf2-ok p{color:var(--on-dark-2)}
.okic{width:52px;height:52px}
.okic circle{fill:none;stroke:var(--wood);stroke-width:3}
.okic path{fill:none;stroke:var(--wood);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:v2tick .6s .2s var(--ease) forwards}
@keyframes v2tick{to{stroke-dashoffset:0}}
.lf2-ok .cal-ok{width:100%;background:transparent;border-radius:var(--r-md);overflow:hidden;margin-top:4px}

/* after a lead sent from #visita: one calendar (the pre-filled one), contacts beside it */
.vgrid.done{grid-template-columns:1fr}
.vgrid.done .v2cal{display:none}
.vgrid.done .vside{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
@media (max-width:860px){.vgrid.done .vside{grid-template-columns:1fr}}
/* HubSpot draws its card (~667 px; taller when the title wraps on a phone) on a transparent page, 400 px wide on wide frames, full width − 4 px on phones: our boxes stay transparent, so the space around the card is the dark panel, not white stripes (CEO 09/10) */
/* phones (device matrix 10/10, D7): HubSpot sends no height until a day is picked, and the month alone needs ~500–590 px
   (a wrapped title, a six-week month: up to ~640 px at 360 px) — a fixed 740 px left an empty blue block under the month. The frame starts at 640 px
   and grows to 740 px once the visitor taps into it (the times list scrolls inside); HubSpot's own height, when sent, wins. */
@media (max-width:700px){.cal-inline iframe,.bk-cal iframe,.cal-ok iframe{height:640px;transition:height .35s var(--ease)}.cal-inline iframe.grown,.bk-cal iframe.grown,.cal-ok iframe.grown{height:740px}}

/* ---------- booking sheet ---------- */
.bk{position:fixed;inset:0;z-index:115;background:#000000b8;display:grid;place-items:center;padding:16px}
.bk[hidden]{display:none}
.bk-box{position:relative;width:min(780px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:24px clamp(14px,3vw,28px) 20px;box-shadow:0 30px 80px #00000066}
.bk .mclose{background:#11111118;color:var(--ink)}
.bk-head{display:grid;gap:8px;padding-right:48px}
.bk-head h3{font-size:clamp(26px,3vw,34px)}
.bk-unit{background:var(--wood-soft);border-radius:var(--r-sm);padding:8px 12px;font-weight:600;font-size:14px;justify-self:start}
.bk-seg .kdesc{margin:8px 0 0}
.bk-cal{margin-top:10px;border-radius:var(--r-md);overflow:hidden;background:transparent;min-height:160px}
.bk-alt{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:14px;font-size:15px;color:var(--graphite)}
.bk-alt .link{font-size:15px}
.bk-form{margin-top:14px;background:var(--sea);color:var(--on-dark);border-radius:var(--r-lg);padding:clamp(18px,3vw,28px)}
.bk-form .lf2-ok p{color:var(--on-dark-2)}
@media (max-width:700px){.bk{padding:0}.bk-box{width:100%;height:100dvh;max-height:none;border-radius:0;padding-top:calc(16px + env(safe-area-inset-top,0px))}.bk .mclose{top:calc(10px + env(safe-area-inset-top,0px))}}

/* ---------- floors: unit buttons, reserved list ---------- */
.unit .ubtns{align-items:center;gap:8px 18px}
.unit .ubtns .ubook{background:var(--wood);color:var(--ink);padding:11px 16px;border-radius:999px;font-weight:600;font-size:15px}
.unit .ubtns .ubook::after{content:""}
.unit .ubtns .ubook:hover{background:#d6b37f}
.unit .uwa{color:var(--wood);font:500 15px/1 var(--body);margin-top:8px}
.unit .uwa::after{content:" ›";font-size:1.2em}
.ures{margin-top:14px;font-size:13.5px;color:var(--on-dark-2);display:flex;flex-wrap:wrap;gap:6px 14px}
.ures b{color:var(--on-dark);font-weight:600;width:100%}
.ubox .usub{margin-top:4px;justify-content:flex-start}
.ubox .actions{justify-content:flex-start}

/* ---------- Amura sections ---------- */
#highlights .vsub{margin-top:10px;max-width:560px}
.v2roof{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;color:var(--on-dark);background:var(--sea);overflow:hidden}
.v2roof .rmedia{position:absolute;inset:0}
.v2roof .rmedia img{width:100%;height:100%;object-fit:cover;max-width:none}
.v2roof::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0f2a3100 40%,#0f2a31e0 100%);pointer-events:none}
.v2roof .rbody{position:relative;z-index:2;padding-block:48px;width:100%}
.v2roof .rbody .lead{max-width:640px;margin-top:12px;color:#f5f2ece6}
.v2roof .media-tag{z-index:3;left:auto;right:16px;top:16px;bottom:auto}
#model3d{padding-bottom:28px}
.flightrow{background:var(--paper);padding:0 0 clamp(64px,8vw,110px)}
.flightrow.sea{background:var(--sea)}
.flightrow .wrap{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.flightrow span{font-size:13.5px;color:var(--muted)}
.flightrow.sea span{color:var(--on-dark-2)}
.v2loc{padding-top:clamp(80px,10vw,130px)}
.v2loc .mapblock{padding-bottom:16px}
.maphead{position:relative;z-index:2}
.dist{list-style:none;padding:0;margin:0 0 clamp(80px,10vw,130px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dist li{background:var(--sea-2);border-radius:var(--r-md);padding:16px 18px;display:grid;gap:4px}
.dist b{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;color:var(--wood)}
.dist span{font-size:14px;color:var(--on-dark-2)}
.v2faq{background:var(--paper);padding-block:clamp(88px,11vw,140px)}
.narrow2{max-width:860px}
.v2faq h2{margin-bottom:14px}
.v2faq details{border-bottom:1px solid var(--line);padding:18px 0}
.v2faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.8vw,22px);letter-spacing:-.015em;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.v2faq summary::-webkit-details-marker{display:none}
.v2faq summary::after{content:"+";color:var(--wood-deep);font-size:1.3em;line-height:1;transition:transform .3s var(--ease)}
.v2faq details[open] summary::after{transform:rotate(45deg)}
.v2faq details p{margin-top:12px;color:var(--graphite);max-width:720px}
.v2faq .actions{margin-top:28px;gap:12px 22px}

/* ---------- Scala ---------- */
.v2houses{background:var(--ink);color:var(--on-dark);padding-block:clamp(88px,11vw,140px)}
.v2houses .lead{color:var(--on-dark-2);margin-top:12px;max-width:640px}
.house .hx{font-size:14px;color:var(--on-dark-2)}
.house .actions{justify-content:flex-start;gap:12px 22px}
.badge.res{background:#ffffff26;color:var(--on-dark)}

/* ---------- Nosotros ---------- */
.v2princ{background:var(--paper);padding-block:clamp(88px,11vw,140px)}
.v2princ .lead{margin-top:14px;max-width:640px}
.prgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(32px,4vw,52px)}
.prgrid article{background:var(--card);border-radius:var(--r-lg);overflow:hidden;display:grid;align-content:start}
.prgrid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prgrid h3{font-size:24px;padding:20px 22px 0}
.prgrid p{padding:8px 22px 0;color:var(--graphite)}
.prgrid .proof{margin:14px 22px 22px;padding:12px 14px;background:var(--paper-2);border-radius:var(--r-sm);font-size:14px;color:var(--ink);font-weight:500}
.v2team{padding-block:clamp(88px,11vw,140px)}
.tgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.v2team .lead{margin-top:14px}
.v2team .team{background:var(--sea-2)}
.v2press{background:var(--paper);padding-block:clamp(88px,11vw,140px)}

/* ---------- returning visitor banner, Leya invitation ---------- */
.retbar{position:fixed;left:0;right:0;top:calc(52px + env(safe-area-inset-top,0px));z-index:55;background:var(--wood-soft);color:var(--ink);transform:translateY(-120%);transition:transform .45s var(--ease);box-shadow:0 8px 20px #0000001f}
.retbar.on{transform:none}
.retbar .row{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding-block:10px;flex-wrap:wrap}
.retbar p{font-weight:600}
.retbar .actions{gap:10px;flex-wrap:nowrap}
.retbar .pill{min-height:40px;padding:0 16px;font-size:15px}
.retbar .rx{width:36px;height:36px;border:0;border-radius:50%;background:#11111114;color:var(--ink);font-size:20px;cursor:pointer}
.leyainv{position:fixed;right:18px;bottom:86px;z-index:96;width:min(340px,calc(100vw - 32px));background:var(--paper);color:var(--ink);border-radius:20px;padding:18px 18px 16px;box-shadow:0 20px 60px #00000059;display:grid;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.leyainv.on{opacity:1;transform:none}
.leyainv .who{display:flex;align-items:center;gap:10px;font-family:var(--display)}
.leyainv .who img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.leyainv p{color:var(--graphite);line-height:1.4}
.leyainv .ix{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:#11111112;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.leyainv .actions{justify-content:flex-start;gap:10px 16px}
.leyainv .pill{min-height:42px;padding:0 18px;font-size:15px}
body.modal-open .leyainv,body.hs-open .leyainv{display:none}

/* ---------- mobile bar: 48 px buttons, Visita first ---------- */
@media (max-width:760px){
  .mbar a{height:48px;font-size:15px}
  /* the hero's button must stay above the bar (first screen: H1, facts and "Reservar visita" without scrolling) */
  .v2hero-full .v2hero-body,.v2hero-home .v2hero-body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .v2hero-full::after,.v2hero-home::after{background:linear-gradient(180deg,#0f2a3159 0%,#0f2a3100 16%,#0f2a3188 38%,#0f2a31e6 62%,#0f2a31f7 100%)!important}
  .leyainv{right:14px;bottom:calc(142px + env(safe-area-inset-bottom,0px))}
  /* tap targets on the booking path: at least 44 px (audit 10/10, S1resp-1 + S1resp verify M2); the header keeps its look —
     the language buttons and the logo get a bigger hit area instead of a bigger box */
  .link{min-height:44px}
  .floorbar button{min-height:44px}
  .unit .ubtns .ubook,.unit .ubtns .uplan{min-height:44px}
  .unit .uwa{display:inline-flex;align-items:center;min-height:44px}
  .seg.kseg button{min-height:44px}
  .consent2{min-height:36px}
  .lgl-more::after{content:"";position:absolute;inset:-12px -8px}
  .vside .direct .num{display:inline-flex;align-items:center;min-height:44px}
  .retbar .pill,.leyainv .pill{min-height:44px}
  .retbar .rx{width:44px;height:44px}
  .leyainv .ix{width:44px;height:44px;top:2px;right:2px}
  .sndbtn{min-height:44px}
  .burger{width:44px;height:44px}
  .gnav .seg button,.gnav a[data-nav="/"]{position:relative}
  .gnav .seg button{min-width:44px}
  .gnav .seg button::after{content:"";position:absolute;inset:-9px -1px}
  .gnav a[data-nav="/"]::after{content:"";position:absolute;inset:-7px -2px}
}

/* device matrix 10/10, D3: on short phones (360×640, 375×667) the hero text climbs into the unshaded top of the picture —
   the gold eyebrow sat on leaves and balconies. The shade starts at the top there, and the eyebrow gets a soft shadow. */
@media (max-width:760px) and (max-height:700px){
  .v2hero-full::after{background:linear-gradient(180deg,#0f2a3180 0%,#0f2a31a6 14%,#0f2a31d9 40%,#0f2a31f7 100%)!important}
  .v2hero .eyebrow{text-shadow:0 1px 8px #000a}
}
/* device matrix 10/10, D4: the floating Leya button (56 px, 14 px from the right edge) sits over the right edge of the screen —
   the lines that stop there keep it free: the hero's "Elige día y hora…", the unit buttons; the floor's "Desde … € + IVA"
   moves under the floor name, on the left */
@media (max-width:760px){
  .v2hero .micro{padding-right:60px}
  #panel .fsum{flex-direction:column;align-items:flex-start;gap:10px}
  #panel .fsum .fp{text-align:left;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;padding-right:60px}
  #panel .fsum .fp b{display:inline}
  .unit .ubtns{padding-right:40px}
}
/* flight captions on phones (device check 10/10, evening): the tag under a flight wraps instead of running off a 360–375 px
   screen, and stops short of the chat button on the right */
@media (max-width:760px){.film-tag{left:16px;right:84px;transform:none;white-space:normal;text-align:left;font-size:11.5px;line-height:1.35}}
/* lead form on phones (CEO 10/10, evening): 44 px fields with the label inside, tighter gaps — the form fits ~1 screen */
@media (max-width:760px){
  .lf2{gap:8px}
  .lf2 h3{font-size:24px;margin-bottom:2px}
  .lf2 .fld input,.lf2 .fld select{height:44px;padding:17px 12px 3px;font-size:16px}
  .lf2 .fld select{padding-right:34px}
  .lf2 .fld label{left:13px;top:5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 26px)}
  .lf2 .fld .cc{left:12px;bottom:7px;font-size:16px;line-height:1}
  .lf2 .fld.phone input{padding-left:46px}
  .lf2 .fld.phone.intl input{padding-left:12px}
  .lf2 .fld.phone input::placeholder{font-size:13px}
  .lf2 .ferr{margin-top:4px;font-size:12.5px}
  .lf2 .pill.big{min-height:48px;margin-top:2px}
  .lf2 .fine{font-size:12px;line-height:1.4}
  .vside>div{padding:18px 16px}
  .vside{gap:12px}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .cgrid,.pgrid,.vgrid,.prgrid,.tgrid,.v2co2.split .sgrid{grid-template-columns:1fr}
  .co2grid{grid-template-columns:1fr}
  .dist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2cal{min-height:0;padding-inline:8px}
}
@media (max-width:700px){
  .v2hero-full{min-height:calc(100svh - 0px)}
  .v2hero-body{padding-bottom:22px}
  .v2h1{font-size:clamp(36px,10.5vw,48px)}
  #hero.v2hero .lead{font-size:16.5px;margin-top:12px}
  .facts{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .facts li{padding:8px 11px}
  .facts b{font-size:16px}
  .facts span{font-size:12px;white-space:normal}
  .facts.sm{display:flex}
  .v2hero .actions{margin-top:16px}
  .v2hero .actions .pill.big{min-height:52px;padding:0 24px;font-size:17px}
  .v2hero .actions .pill.ghost{display:none}
  .micro{margin-top:10px;font-size:12.5px}
  /* home: the real video becomes the full-bleed background; the hero leaves the top of the first project card in view */
  #hero.v2hero-home{display:flex;align-items:flex-end;min-height:86svh;padding:0}
  .v2hero-home .v2media{position:absolute;inset:0;width:auto;aspect-ratio:auto;border-radius:0;box-shadow:none;justify-self:stretch;align-self:stretch}
  .v2hero-home::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0f2a3166 0%,#0f2a3100 22%,#0f2a3100 34%,#0f2a31c7 66%,#0f2a31f2 100%)}
  .v2hero-home .v2hero-body{padding:0 var(--gutter) 24px}
  .v2hero-home .v2h1{font-size:clamp(44px,13vw,56px)}
  .v2hero-home .media-tag{top:calc(52px + 14px);bottom:auto;right:16px;left:auto}
  .v2cards{padding-top:14px}
  .ctastrip p{font-size:19px}
  .dist{grid-template-columns:1fr 1fr}
}

/* ---------- round 4 (CEO 08/10) ---------- */
/* v1 tiles with the v2 facts */
.tile .sub{max-width:46ch;opacity:.85}
.tile .facts.tf{justify-content:center;margin-top:16px;position:relative;z-index:2;padding-inline:16px}
.tile.t-amura .facts.tf li{background:#ffffff14;border-color:#ffffff2b}
.tile.t-scala .facts.tf li{background:#ffffff8c;border:1px solid #1111141a;backdrop-filter:none;-webkit-backdrop-filter:none}
.tile.t-scala .facts.tf b{color:var(--ink)}
.tile.t-scala .facts.tf span{color:var(--muted)}
.tile .img{height:50%}
/* phones: the text keeps off the card's edges; a third fact sits centred under the first two (audit 10/10, S1visual-2) */
@media (max-width:760px){.tile{min-height:680px}.tile .line,.tile .sub{padding-inline:20px}
  .tile .facts.tf{display:flex;flex-wrap:wrap;justify-content:center}.tile .facts.tf li{padding:8px 11px;flex:0 1 calc(50% - 3px)}}
/* tablets (761–1100, device matrix 10/10, D5): two narrow columns — the text wrapped into the picture, so "Reservar visita"
   sat on the building and "Entrega 2028" on the top of the photo; the tile grows, the picture keeps to the bottom part,
   the text keeps off the edges */
@media (min-width:761px) and (max-width:1100px){.tile{min-height:780px}.tile .img{height:44%}.tile .line,.tile .sub{padding-inline:24px}}
/* #visita in the dark v1 style */
.v2visit.dark{background:var(--ink)}
.v2visit.dark .vside>div{background:var(--ink-2)}
.v2visit.dark .v2cal{background:var(--ink-2);color:var(--on-dark)}
.v2visit.dark .v2cal .seg{background:#ffffff17}
.v2visit.dark .v2cal .seg button{color:var(--on-dark-2)}
.v2visit.dark .v2cal .seg button[aria-pressed="true"]{background:var(--white);color:var(--ink)}
.v2visit.dark .kdesc{color:var(--on-dark-2)}
.v2visit.dark .cal-inline{border-radius:var(--r-md);overflow:hidden;background:transparent;margin-top:6px}
.v2visit.dark .cal-wait{color:var(--muted)}
.v2visit.dark .lf2-ok .cal-ok{background:transparent}
/* text-style buttons (button.link): no browser frame or background — "Hablar con Leya", "Te llamamos hoy", "Prefiero que me llaméis" */
button.link{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-size:17px;color:var(--wood-deep);cursor:pointer;line-height:1.3}
.dark button.link,.sea button.link,.vside button.link,.bk-form button.link,.tile.t-amura button.link{color:var(--wood)}
.leyainv button.link,.bk-alt button.link{font-size:15px}

/* ---------- CO₂ block v2x (CEO 08/10): v1 bento figures in gold, dark stage, motion ---------- */
.v2co2x{position:relative;overflow:hidden;background:#0c0d0f;color:var(--on-dark);padding-block:clamp(88px,11vw,150px)}
.co2-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.co2-bg i{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform}
.co2-bg i:nth-child(1){width:min(46vw,640px);height:min(46vw,640px);right:-8%;top:-14%;background:radial-gradient(circle,#c9a36b4d,transparent 66%);animation:co2drift1 22s ease-in-out infinite alternate}
.co2-bg i:nth-child(2){width:min(56vw,760px);height:min(56vw,760px);left:-16%;bottom:-26%;background:radial-gradient(circle,#1e4b5699,transparent 66%);animation:co2drift2 27s ease-in-out infinite alternate}
.co2-bg i:nth-child(3){width:min(30vw,420px);height:min(30vw,420px);left:42%;top:34%;background:radial-gradient(circle,#7f61342e,transparent 70%);animation:co2drift1 31s ease-in-out infinite alternate-reverse}
@keyframes co2drift1{to{transform:translate(-9%,11%) scale(1.15)}}
@keyframes co2drift2{to{transform:translate(11%,-8%) scale(1.1)}}
.v2co2x .wrap{position:relative;z-index:1}
.co2-head{max-width:860px}
.co2-head .lead{margin-top:16px;max-width:680px}
/* gold-tinted heading and figures (the v1 bento fill) with one light sweep when they appear */
.co2-title,.gnum{-webkit-background-clip:text;background-clip:text;color:transparent;background-repeat:no-repeat}
.co2-title{background-image:linear-gradient(100deg,transparent 42%,#fffaf0b3 50%,transparent 58%),linear-gradient(100deg,#f5f2ec 50%,#efd6a6 74%,#c9a36b 100%);background-size:300% 100%,100% 100%;background-position:120% 0,0 0}
.v2co2x.on .co2-title{animation:co2shine 2.6s .25s var(--ease) both}
@keyframes co2shine{from{background-position:120% 0,0 0}to{background-position:-20% 0,0 0}}
.gnum{display:block;font-family:var(--display);font-weight:700;font-size:clamp(64px,7vw,116px);line-height:.92;letter-spacing:-.05em;background-image:linear-gradient(100deg,transparent 40%,#fff6e6d9 50%,transparent 60%),linear-gradient(135deg,var(--wood) 10%,#f1dfbf 55%,var(--wood-deep) 100%);background-size:300% 100%,100% 100%;background-position:120% 0,0 0}
.gnum small{font-size:.42em;letter-spacing:-.02em}
.cx.on .gnum{animation:co2shine 2.2s .6s var(--ease) both}
/* bento: CO₂ large on the left, CLT and A stacked on the right */
.co2-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:clamp(36px,4.5vw,56px)}
.cx{position:relative;overflow:hidden;border-radius:var(--r-lg);background:linear-gradient(160deg,#1c1e22,#131417);border:1px solid #ffffff10;padding:clamp(22px,2.6vw,34px);opacity:0;transform:translateY(46px) scale(.98);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.cx.on{opacity:1;transform:none}
.cx::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,80%) var(--my,0%),#c9a36b22,transparent 45%)}
.cx>*{position:relative}
.cx-co2{grid-column:span 7;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.cx-clt,.cx-a{grid-column:span 5;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center;gap:22px}
.cx-clt .cx-vis,.cx-a .cx-vis{order:2}
/* 761–1100 px (phone in landscape, small tablets): A and CLT are too narrow for text + picture side by side — picture on top (device check 10/10) */
@media (min-width:761px) and (max-width:1100px){.cx-clt,.cx-a{grid-template-columns:minmax(0,1fr);align-content:start}.cx-clt .cx-vis,.cx-a .cx-vis{order:0}.cx-a .elabel{justify-self:start}.cx-clt .cltp{aspect-ratio:auto;height:200px;max-height:none}}
.cx-clt{transition-delay:.12s}.cx-co2{transition-delay:.24s}
/* order A · CLT · CO₂ (CEO 10/10, evening): on wide screens A and CLT stack on the left, the big CO₂ card stands on the right */
.cx-a{grid-column:1/span 5;grid-row:1}.cx-clt{grid-column:1/span 5;grid-row:2}.cx-co2{grid-column:6/span 7;grid-row:1/span 2}
@media (min-width:761px) and (max-width:1100px){.cx-a{grid-column:1/span 6;grid-row:1}.cx-clt{grid-column:7/span 6;grid-row:1}.cx-co2{grid-column:1/-1;grid-row:2}}
.cx-txt p{color:var(--on-dark-2);font-size:15.5px;line-height:1.5;margin-top:12px}
.cx-co2 .cx-txt p{font-size:17px;max-width:48ch}
.cx .legend{display:flex;align-items:center;gap:9px;font-size:13px;color:#f5f2ec8c}
.cx .legend i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--wood);box-shadow:0 0 8px #c9a36b88}
/* 530 dots (CO₂ card) — scoped to the card: unscoped, it stacked the films' progress dots in a column (fixed 12/10) */
.cx .dots{display:grid;grid-template-columns:repeat(auto-fill,8px);gap:6px;align-content:start}
.cx .dots i{width:8px;height:8px;border-radius:50%;background:#ffffff12;transform:scale(.55);transition:background-color .6s,transform .6s var(--ease),box-shadow .6s}
.cx.on .dots i{background:var(--wood);transform:scale(1);box-shadow:0 0 7px #c9a36b55}
.cx.on .dots i:nth-child(3n){background:#e6c993}
.cx.on .dots i:nth-child(7n){background:#a9824a}
/* CLT: five cross-laminated layers drop into place in 3D */
.clt{height:210px;perspective:900px;display:grid;place-items:center}
.clt .stack{position:relative;width:132px;height:132px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-40deg)}
.clt .ly{position:absolute;inset:0;border-radius:3px;opacity:0;transform:translateZ(calc(var(--i) * 13px + 90px));transition:transform .9s cubic-bezier(.2,.9,.25,1.15),opacity .5s;transition-delay:calc(var(--i) * 150ms + 250ms);box-shadow:0 0 0 1px #0000004d,0 14px 24px #0000008c}
.clt .ly.x{background:repeating-linear-gradient(90deg,transparent 0 21px,#00000038 21px 22px),repeating-linear-gradient(90deg,#ffffff10 0 3px,transparent 3px 9px),#d8ae74}
.clt .ly.y{background:repeating-linear-gradient(0deg,transparent 0 21px,#00000038 21px 22px),repeating-linear-gradient(0deg,#ffffff10 0 3px,transparent 3px 9px),#c49459}
.cx.on .clt .ly{opacity:1;transform:translateZ(calc(var(--i) * 13px))}
.cx.on .clt .stack{animation:cltfloat 6s 2s ease-in-out infinite alternate}
@keyframes cltfloat{to{transform:rotateX(58deg) rotateZ(-34deg) translateZ(6px)}}
/* energy label A–G */
.elabel{position:relative;display:grid;gap:5px;width:100%;max-width:200px;justify-self:end;padding-right:34px}
.elabel .bar{width:var(--w);height:17px;background:var(--c);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);display:flex;align-items:center;padding-left:7px;font:700 11px/1 var(--display);color:#fff;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);transition-delay:calc(var(--i) * 90ms + 250ms)}
.elabel .bar.dk{color:#222}
.cx.on .elabel .bar{transform:scaleX(1)}
.elabel .ptr{position:absolute;right:0;top:0;height:17px;padding:0 6px 0 12px;background:#f5f2ec;color:#111;font:800 12px/17px var(--display);clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);opacity:0;transform:translateX(26px);transition:opacity .5s 1.2s,transform .7s 1.2s var(--ease)}
.cx.on .elabel .ptr{opacity:1;transform:none}
.cx.on .elabel .bar:first-child{animation:apulse 1.4s 1.5s ease-in-out 2}
@keyframes apulse{50%{filter:brightness(1.35) drop-shadow(0 0 6px #00a651)}}
.co2-close{margin-top:30px;font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;color:var(--on-dark)}
.co2-pager{display:none}
/* phones: swipe carousel, visual first, pager dots */
@media (max-width:760px){
  .co2-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .co2-grid::-webkit-scrollbar{display:none}
  /* each card is as tall as its content (CEO 10/10, evening: the energy card had a big empty area under the ladder) */
  .co2-grid{align-items:flex-start;overflow-y:hidden;transition:height .45s var(--ease)}
  .cx{flex:0 0 82%;scroll-snap-align:center;min-height:0;display:flex!important;flex-direction:column;justify-content:flex-start;gap:16px;transition-delay:0s!important}
  .cx-clt .cx-vis,.cx-a .cx-vis{order:0}
  .cx .dots{grid-template-columns:repeat(auto-fill,6px);gap:4px}
  .cx .dots i{width:6px;height:6px}
  .gnum{font-size:64px}
  .cx-co2 .cx-txt p,.cx-txt p{font-size:15.5px}
  .clt{height:200px}
  .elabel{justify-self:start;max-width:180px;margin:2px 0 0;gap:4px;padding-right:30px}
  .elabel .bar{height:13px;font-size:9px;padding-left:5px}
  .elabel .ptr{height:13px;line-height:13px;font-size:10px}
  .cx-a .cx-txt p,.cx-clt .cx-txt p{margin-top:8px}
  .co2-pager{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .co2-pager i{width:7px;height:7px;border-radius:50%;background:#ffffff33;transition:background .3s,width .3s}
  .co2-pager i.on{background:var(--wood);width:20px;border-radius:4px}
  /* the next card peeks in from the right, dimmed until it is the current one — it used to stay invisible (opacity 0 until
     30 % in view), so the carousel read as a single card (CEO 09/10); v2.js marks the centred card .cur and auto-advances */
  .co2-grid .cx{opacity:.4;transform:none;transition:opacity .6s var(--ease)}
  .co2-grid .cx.cur{opacity:1}
}
@media (prefers-reduced-motion:reduce){.co2-bg i{animation:none}.cx,.clt .ly,.elabel .bar,.elabel .ptr,.dots i{transition:none!important}}

/* ---------- press marquee ---------- */
.press.pm{display:block;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);touch-action:pan-y;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.press.pm.drag{cursor:grabbing}
.pm-track{display:flex;gap:14px;width:max-content;will-change:transform;padding:4px 0 8px}
.pm .pcard{flex:0 0 clamp(250px,24vw,340px);min-height:200px;user-select:none;-webkit-user-select:none;transition:transform .35s var(--ease),box-shadow .35s}
.pm .pcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px #1111141f}
.pm .pcard img{pointer-events:none;-webkit-user-drag:none}
@media (max-width:760px){.pm .pcard{flex-basis:76vw;min-height:180px}}
.v2co2x .lead{color:var(--on-dark-2)}

/* ---------- CO₂ card: 1.710 m³ of CLT as a 12 m cube next to a 1,75 m person (CEO 08/10) ---------- */
.cube{position:relative;height:clamp(270px,27vw,360px)}
.cube svg{width:100%;height:100%;overflow:visible;display:block}
.cube .gsh{fill:#000;opacity:.45;filter:blur(8px)}
.cube .rf.a{fill:#d9b07a}.cube .rf.b{fill:#c99c60}
.cube .lf.a{fill:#ad8048}.cube .lf.b{fill:#9a6f3b}
.cube .rf,.cube .lf{stroke:#00000038;stroke-width:.6}
.cube .tf{fill:#e8c78f;stroke:#00000030;stroke-width:.6}
.cube .grain{stroke:#00000022;stroke-width:.8}
.cube .slab{transform-box:fill-box;transform-origin:center;opacity:0;transform:translateY(-80px);transition:transform .75s cubic-bezier(.2,.9,.28,1.12),opacity .35s;transition-delay:calc(var(--i) * 95ms + 250ms)}
.cx.on .cube .slab{opacity:1;transform:none}
.cube .topf{opacity:0;transform-box:fill-box;transform-origin:center;transform:translateY(-30px);transition:opacity .5s 1.45s,transform .6s 1.45s var(--ease)}
.cx.on .cube .topf{opacity:1;transform:none}
.cube .dim{stroke:#f5f2ec99;stroke-width:1.2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1s 1.7s var(--ease)}
.cube .tick{stroke:#f5f2ec99;stroke-width:1.2;opacity:0;transition:opacity .4s 2.4s}
.cx.on .cube .dim{stroke-dashoffset:0}
.cx.on .cube .tick{opacity:1}
.cube .lbl{fill:#f5f2ecd9;font:600 12px var(--display);opacity:0;transition:opacity .6s 2.2s}
.cx.on .cube .lbl{opacity:1}
.cube .person{fill:#f5f2ec;opacity:0;transition:opacity .7s 2s}
.cx.on .cube .person{opacity:1}
.cube-l{position:absolute;left:0;top:0;font:600 13px/1 var(--display);letter-spacing:-.01em;color:var(--ink);background:linear-gradient(135deg,var(--wood),#f1dfbf);padding:7px 11px;border-radius:999px;opacity:0;transform:translateY(-8px);transition:opacity .6s 1.6s,transform .6s 1.6s var(--ease)}
.cx.on .cube-l{opacity:1;transform:none}
@media (max-width:760px){.cube{height:250px}}
@media (prefers-reduced-motion:reduce){.cube *{transition:none!important}}

/* ---------- CLT card: a real cross-section assembling in strips from alternate sides, then a slow push-in ---------- */
.cltp{position:relative;aspect-ratio:1/1;max-height:240px;width:100%;justify-self:end;border-radius:var(--r-md);overflow:hidden;background:#1a1b1e}
.cltp .cp-in{position:absolute;inset:0}
.cltp span{position:absolute;inset:0;background:url(/img/clt-sample.webp) center/cover;clip-path:inset(calc(var(--i) * 20%) 0 calc(80% - var(--i) * 20%) 0);transform:translateX(-110%);transition:transform 1s cubic-bezier(.2,.85,.25,1);transition-delay:calc(var(--i) * 120ms + 250ms)}
.cltp span:nth-child(even){transform:translateX(110%)}
.cx.on .cltp span{transform:none}
.cx.on .cltp .cp-in{animation:cpzoom 9s 1.6s ease-in-out infinite alternate}
@keyframes cpzoom{to{transform:scale(1.12) translate(-2%,1%)}}
.cltp::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 -60px 60px -30px #00000066;border-radius:inherit;pointer-events:none}
/* ---------- prefab card (full width under the bento) ---------- */
.cx-pre{margin-top:14px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;overflow:hidden}
/* chapter order (CEO 12/10): the industrialised-construction card comes first and is the main one — its headline is the chapter title; the energy / CLT / CO₂ details follow under their own sub-heading */
.co2-head+.cx-pre{margin-top:clamp(28px,4vw,44px)}
.pre-l>p:first-child{margin-top:0;font-size:17px}
.co2-sub{margin-top:clamp(64px,8vw,110px);max-width:860px}
.co2-sub .lead{margin-top:14px;max-width:680px}
.co2-sub-t{margin-top:10px;color:var(--on-dark)}
.co2-sub+.co2-grid{margin-top:clamp(24px,3vw,36px)}
.pre-t{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,48px);line-height:1.02;letter-spacing:-.035em;margin-top:10px;-webkit-background-clip:text;background-clip:text;color:transparent;background-image:linear-gradient(100deg,transparent 40%,#fff6e6d9 50%,transparent 60%),linear-gradient(135deg,#f5f2ec 30%,#f1dfbf 70%,var(--wood) 100%);background-size:300% 100%,100% 100%;background-position:120% 0,0 0;background-repeat:no-repeat}
.cx-pre.on .pre-t{animation:co2shine 2.2s .5s var(--ease) both}
.pre-l p{color:var(--on-dark-2);font-size:16px;line-height:1.55;margin-top:14px;max-width:56ch}
.pre-l .pre-f{color:var(--wood);font-family:var(--display);font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.015em}
.pre-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pre-list li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-md);background:#ffffff08;border:1px solid #ffffff10;font-family:var(--display);font-weight:600;font-size:clamp(16px,1.4vw,19px);letter-spacing:-.015em;opacity:0;transform:translateX(30px);transition:opacity .6s,transform .7s var(--ease);transition-delay:calc(var(--i) * 110ms + 400ms)}
.cx-pre.on .pre-list li{opacity:1;transform:none}
.pre-list svg{flex:none;width:22px;height:22px;border-radius:50%;background:#c9a36b26;padding:3px}
.pre-list path{fill:none;stroke:var(--wood);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s;transition-delay:calc(var(--i) * 110ms + 800ms)}
.cx-pre.on .pre-list path{stroke-dashoffset:0}
/* a laser level sweeps the card once: precision */
.pre-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#e9cf9f 20%,#fff3dc 50%,#e9cf9f 80%,transparent);box-shadow:0 0 18px 2px #c9a36b88;opacity:0;pointer-events:none}
/* the laser passes behind the checklist (device matrix 10/10, D10): across a line of text it read as a strikethrough —
   the items sit above it on an opaque fill, so it shows only in the gaps between them; the text column sits above it too,
   and it passes there as a softer glow */
.pre-list li{position:relative;z-index:1;background:linear-gradient(#ffffff08,#ffffff08),#17181b}
.cx-pre .pre-l{position:relative;z-index:1}
.cx-pre.on .pre-scan{animation:prescan 2.4s .3s cubic-bezier(.5,0,.3,1) both}
@keyframes prescan{0%{opacity:0;transform:translateY(0)}10%{opacity:.6}85%{opacity:.6}100%{opacity:0;transform:translateY(var(--h,420px))}}
@media (max-width:760px){
  .cltp{max-height:none;height:220px;aspect-ratio:auto}
  .cx-pre{display:grid!important;grid-template-columns:1fr;min-height:0;margin-top:22px}
  .pre-list li{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){.cltp span,.pre-list li,.pre-list path{transition:none!important}.cltp .cp-in,.pre-scan{animation:none!important}}

/* ---------- CO₂ card v3: a translucent smoky CO₂ cube (≈110 m) filling up beside a football pitch (CEO 08/10) ---------- */
.cube .pitch{opacity:0;transition:opacity .8s .2s}
.cx.on .cube .pitch{opacity:1}
.cube .grass{fill:#1f5a3a}
.cube .stripe{fill:#246642}
.cube .pline{fill:none;stroke:#ffffffb3;stroke-width:.8}
.cube .ptl{fill:#f5f2ecb3;font:600 11px var(--display)}
.cube .cf{stroke:none}
.cube .cf.lf{fill:#9fb0bc33}
.cube .cf.rf{fill:#7d909e40}
.cube .cf.tf{fill:#dfe7ec2e}
.cube .edge{fill:none;stroke:#e9eef2a6;stroke-width:1;stroke-linejoin:round}
.cube .fog circle{animation:co2fog 9s ease-in-out infinite alternate}
.cube .fog circle:nth-child(2){animation-duration:12s;animation-direction:alternate-reverse}
.cube .fog circle:nth-child(3){animation-duration:15s}
@keyframes co2fog{to{transform:translate(30px,-26px) scale(1.2)}}
.cube .dim{stroke:#f5f2ec99;stroke-width:1.2;stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.cube .lbl{transition:opacity .6s 2.3s}
.cube-l{background:linear-gradient(135deg,#dfe7ec,#aebcc6);color:#111}
@media (max-width:760px){.cube{height:220px}}

/* ---------- vertical rhythm (CEO 09/10: even, organic gaps between blocks, golden ratio) ----------
   One section space --sec: 80 px on a phone → 128 px on a wide screen (80 × φ). Compact bands (the "¿Te lo enseñamos?"
   strip) get --sec ÷ φ²; a block that continues the same background after another one starts at --sec ÷ φ, so two
   neighbours on one colour are --sec × φ apart instead of double space. Full-bleed blocks (hero, flights, roof photo,
   tiles) keep their own edges. */
:root{--sec:clamp(80px,calc(4.5vw + 63px),128px);--sec-c:calc(var(--sec) * .618);--sec-s:calc(var(--sec) * .382)}
#co2,#trust,#visita,#faq,#houses,#principles,#team,#floors,#build,#shorts,#tour,#loc,.v2loc{padding-block:var(--sec)}
.ctastrip{padding-block:var(--sec-s)}
.v2loc .mapblock{padding-bottom:0}
.v2loc .dist{margin-bottom:0}
.v2loc .mapblock + .wrap .dist{margin-top:var(--sec-s)}
#co2 + .v2loc.dark,.v2loc.dark + #visita{padding-top:var(--sec-c)}

/* ========== Nosotros v3 (CEO 09/10/2026): Arev Homes at the centre — manifesto, five values, figures, "del lugar a la
   llave", deeds, the best architects of each place, team, press. "Arev" = sun in Armenian: the sun rises in the hero as the
   page scrolls, climbs the values rail chapter by chapter and travels down the process line. ========== */

/* ---------- hero: manifesto over the Scala photo, a warm sun behind the words ---------- */
.abh .abh-media{transform:translateY(calc(var(--hp,0) * 16%));will-change:transform}
.abh .abh-media img{animation:abhzoom 22s cubic-bezier(.2,.6,.2,1) both}
@keyframes abhzoom{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.abh.v2hero-full::after{background:linear-gradient(90deg,#0f2a31e6 0%,#0f2a31b8 34%,#0f2a3159 62%,#0f2a3100 86%),linear-gradient(180deg,#0f2a3159 0%,#0f2a3100 22%,#0f2a3100 50%,#0f2a31cc 100%)}
.abh-sun{position:absolute;z-index:2;right:clamp(-12%,-3vw,2%);top:-14%;width:min(58vw,760px);aspect-ratio:1;pointer-events:none;will-change:transform;transform:translateY(calc(var(--hp,0) * -26vh)) scale(calc(1 + var(--hp,0) * .25))}
.abh-sun i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff4dce6 0%,#f8dca6b3 9%,#efc07a4d 24%,#c9a36b1f 42%,transparent 64%)}
.abh-sun b{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#fffaf0f2 0%,#fff0cfb3 34%,#fff0cf40 56%,transparent 74%)}
.abh.rise .abh-sun{animation:abhrise 3.4s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes abhrise{from{opacity:0;translate:0 34vh}to{opacity:1;translate:0 0}}
.abh.rise .abh-sun b{animation:abhpulse 7s 3.4s ease-in-out infinite alternate}
@keyframes abhpulse{to{transform:scale(1.12);opacity:.85}}
.abh .v2hero-body{z-index:3}
.abh-key{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:clamp(14px,1.3vw,17px);color:var(--wood);letter-spacing:-.005em;margin:0}
.abh-key .sunic{width:22px;height:22px;flex:none;fill:none;stroke:var(--wood);stroke-width:1.6;stroke-linecap:round}
.abh-key .sunic circle{fill:#c9a36b40}
.abh.rise .abh-key .sunic{animation:abhspin 30s linear infinite}
@keyframes abhspin{to{transform:rotate(360deg)}}
.abh .abh-t{max-width:13ch}
.abh-slogan{margin-top:16px;font-family:var(--display);font-weight:600;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.01em;color:#f5f2ecd9;display:flex;align-items:center;gap:12px}
.abh-slogan::before{content:"";width:28px;height:1px;background:var(--wood)}
.abh-cue{position:absolute;z-index:3;right:max(var(--gutter),calc((100vw - 1180px) / 2 + var(--gutter)));bottom:clamp(28px,6vh,72px);display:flex;flex-direction:column;align-items:center;gap:12px;color:#f5f2ecb3;font:500 13px/1 var(--body);letter-spacing:.02em}
.abh-cue i{position:relative;width:1px;height:56px;background:#f5f2ec33;overflow:hidden}
.abh-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--wood);animation:abhcue 2.2s ease-in-out infinite}
@keyframes abhcue{to{top:100%}}
@media (max-width:760px){
  .abh-sun{right:-40%;top:-8%;width:120vw}
  .abh.v2hero-full::after{background:linear-gradient(180deg,#0f2a3166 0%,#0f2a3133 18%,#0f2a3199 40%,#0f2a31eb 64%,#0f2a31fa 100%)!important}
  .abh-cue{display:none}
  .abh-slogan{margin-top:12px;font-size:15px}
  .abh .actions .pill.big{max-width:calc(100% - 64px);padding-inline:20px}
  /* device matrix 10/10, D8 / D12: the CTA stays on one line on every phone (it wrapped at 360–390 and touched the chat
     button); the "Vídeo creado a partir de fotografías reales…" tag gets a dark pill — it was white on a bright sky */
  .abh .actions .pill.big{white-space:nowrap;font-size:min(17px,3.9vw);padding-inline:min(20px,4.2vw)}
  .abh .media-tag{color:#f5f2ec;background:#0f2a3180;padding:3px 9px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
}

/* ---------- values: five chapters on a pinned stage ---------- */
.abv{position:relative;background:#0c0d0f;color:var(--on-dark);padding-top:var(--sec);overflow:clip}
.abv-head{position:relative;z-index:1}
.abv-head .eyebrow{color:var(--wood)}
.abv-head h2{margin-top:8px;max-width:17ch}
.abv-track{position:relative;z-index:1;height:calc(var(--n) * 78svh + 100svh - 52px)}
.abv-stage{position:sticky;top:52px;height:calc(100svh - 52px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(10px,2vh,22px);padding:clamp(14px,2.6vh,30px) 0 clamp(16px,3vh,34px)}
.abv-rail{display:flex;align-items:center;gap:16px;width:100%}
.abv-arc{flex:none;width:96px;height:auto;overflow:visible}
.abv-arc .hz{stroke:#f5f2ec33;stroke-width:1}
.abv-arc .arc-bg{fill:none;stroke:#f5f2ec2e;stroke-width:1.2;stroke-dasharray:2 4}
.abv-arc .arc-fg{fill:none;stroke:var(--wood);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.abv-arc .sun{fill:#ffe7b8}
.abv-arc .halo{fill:#f1cf8f;opacity:calc(.18 + var(--vp,0) * .4)}
.abv-dots{display:flex;gap:6px;flex-wrap:nowrap;min-width:0}
.abv-dots button{appearance:none;-webkit-appearance:none;border:0;margin:0;background:#ffffff0d;color:#f5f2ec8c;border-radius:999px;padding:9px 13px;font:600 13px/1 var(--display);letter-spacing:-.005em;display:inline-flex;gap:8px;align-items:center;cursor:pointer;white-space:nowrap;transition:background .35s,color .35s}
.abv-dots button span{display:none}
.abv-dots button.done{color:var(--wood)}
.abv-dots button.on{background:var(--wood);color:var(--ink)}
.abv-dots button.on span{display:inline}
.abv-dots button:hover{color:var(--on-dark)}
.abv-dots button.on:hover{color:var(--ink)}
.abv-chs{position:relative;min-height:0;width:100%}
.abv-ch{position:absolute;top:0;bottom:0;left:var(--gutter);right:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.abv-ch.on{opacity:1;pointer-events:auto}
.abv-txt>*{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.abv-ch.past .abv-txt>*{transform:translateY(-28px)}
.abv-ch.on .abv-txt>*{opacity:1;transform:none}
.abv-ch.on .abv-txt>:nth-child(2){transition-delay:.08s}
.abv-ch.on .abv-txt>:nth-child(3){transition-delay:.16s}
.abv-ch.on .abv-txt>:nth-child(4){transition-delay:.26s}
.abv-n{display:block;font:700 clamp(56px,min(8vw,13vh),128px)/.9 var(--display);letter-spacing:-.05em;-webkit-background-clip:text;background-clip:text;color:transparent;background-image:linear-gradient(135deg,var(--wood) 10%,#f1dfbf 55%,var(--wood-deep) 100%)}
.abv-txt h3{font-size:clamp(30px,min(4vw,6.6vh),58px);letter-spacing:-.035em;margin-top:10px}
.abv-txt p{color:var(--on-dark-2);font-size:clamp(16px,1.35vw,19px);line-height:1.5;margin-top:16px;max-width:52ch}
.abv-txt .abv-f{color:var(--wood);font-family:var(--display);font-weight:600;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.015em;line-height:1.3}
.abv-vis{position:relative;height:min(100%,580px);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#1c1e22,#131417);border:1px solid #ffffff10;clip-path:inset(14% 0 0 0 round 28px);transform:scale(.96);opacity:0;transition:clip-path 1.1s var(--ease),transform 1.2s var(--ease),opacity .6s}
.abv-ch.on .abv-vis{clip-path:inset(0 0 0 0 round 28px);transform:translateY(calc((.5 - var(--lp,.5)) * 26px));opacity:1}
.abv-next{justify-self:start;margin:0 max(var(--gutter),calc((100vw - 1180px) / 2 + var(--gutter)));appearance:none;-webkit-appearance:none;background:none;border:0;color:var(--on-dark-2);display:inline-flex;align-items:center;gap:12px;cursor:pointer;padding:6px 0}
.abv-next .nx-l{color:#f5f2ec80;text-transform:uppercase;letter-spacing:.14em;font:600 11px/1 var(--body)}
.abv-next .nx-t{color:var(--on-dark);font:600 15px/1.2 var(--display);letter-spacing:-.01em}
.abv-next i{position:relative;width:26px;height:26px;border-radius:50%;border:1px solid #f5f2ec40;animation:abvnext 2s ease-in-out infinite}
.abv-next i::after{content:"";position:absolute;left:9px;top:7px;width:6px;height:6px;border-right:1.6px solid var(--wood);border-bottom:1.6px solid var(--wood);transform:rotate(45deg)}
.abv-next:hover .nx-t{color:var(--wood)}
@keyframes abvnext{50%{transform:translateY(4px)}}

/* 01 · precision: a blueprint draws itself, the corner squares to 90°, the plumb settles, the level centres, a laser sweeps */
.vis-pre{background-color:#101315;background-image:linear-gradient(#c9a36b12 1px,transparent 1px),linear-gradient(90deg,#c9a36b12 1px,transparent 1px);background-size:24px 24px}
.bp{position:absolute;left:6%;top:4%;width:88%;height:78%}
.bp-l{fill:none;stroke:#e6c993;stroke-width:2.6;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) var(--d,0s)}
.abv-ch.on .bp-l{stroke-dashoffset:0}
.bp-j{fill:none;stroke:#e6c99355;stroke-width:1;stroke-dasharray:4 5;opacity:0;transition:opacity .6s .9s}
.abv-ch.on .bp-j{opacity:1}
.bp-d{fill:none;stroke:#f5f2ec59;stroke-width:1}
.bp-t{fill:#f5f2ecb3;font:600 13px var(--display)}
.bp-90{fill:var(--wood);font-size:17px;opacity:0;transition:opacity .5s 1.5s}
.bp-a{fill:none;stroke:var(--wood);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s 1.1s}
.bp-sq{fill:none;stroke:var(--wood);stroke-width:1.4;opacity:0;transition:opacity .4s 1.4s}
.abv-ch.on .bp-a{stroke-dashoffset:0}
.abv-ch.on .bp-sq,.abv-ch.on .bp-90{opacity:1}
.bp-pl line{stroke:#f5f2ec80;stroke-width:1;stroke-dasharray:3 3}
.bp-pl path{fill:var(--wood)}
.bp-pl{transform-origin:304px 84px}
.abv-ch.on .bp-pl{animation:bpswing 2.6s .6s ease-out both}
@keyframes bpswing{0%{transform:rotate(7deg)}35%{transform:rotate(-4deg)}65%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}
.bp-lv rect{fill:#c9a36b1f;stroke:#e6c993;stroke-width:1.2}
.bp-lv circle{fill:#9fd4a0}
.bp-lv line{stroke:#e6c99399;stroke-width:1}
.abv-ch.on .bp-lv circle{animation:bplevel 2.2s 1s cubic-bezier(.3,1.4,.5,1) both}
@keyframes bplevel{from{transform:translateX(-16px)}to{transform:none}}
.bp-laser{opacity:0}
.bp-laser line{stroke:#ffeccb;stroke-width:1.6}
.bp-laser circle{fill:#fff3dc}
.abv-ch.on .bp-laser{animation:bplaser 3.8s 1.3s cubic-bezier(.45,0,.3,1) infinite}
@keyframes bplaser{0%{opacity:0;transform:translateY(84px)}10%{opacity:1}80%{opacity:1;transform:translateY(356px)}100%{opacity:0;transform:translateY(356px)}}
.bp-chk{position:absolute;left:6%;right:6%;bottom:5%;display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.bp-chk li{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 12px;border-radius:999px;background:#ffffff0a;border:1px solid #ffffff14;font:600 14px/1 var(--display);color:var(--on-dark);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(1.7s + var(--i) * .18s)}
.bp-chk li::before{content:"";width:12px;height:6px;border-left:2px solid var(--wood);border-bottom:2px solid var(--wood);transform:rotate(-45deg) translateY(-2px)}
.abv-ch.on .bp-chk li{opacity:1;transform:none}

/* 02 · light: the real Scala living room; warm light sweeps across the timber ceiling */
.vis-light{display:grid;place-items:center;background:radial-gradient(120% 80% at 70% 0%,#c9a36b30,transparent 60%),linear-gradient(160deg,#1c1e22,#131417)}
.vl-card{position:relative;height:92%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px #00000099;background:#222 url(/img/scala-short-salon-poster.jpg) center/cover}
.vl-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vl-sweep{position:absolute;top:-10%;bottom:-10%;left:-100%;width:300%;background:linear-gradient(105deg,transparent 40%,#fff2d466 47%,#fffaf0a6 50%,#fff2d466 53%,transparent 60%);mix-blend-mode:soft-light;transform:translateX(-34%);pointer-events:none}
.abv-ch.on .vl-sweep{animation:vlsweep 6s .5s ease-in-out infinite}
@keyframes vlsweep{0%{transform:translateX(-34%)}65%,100%{transform:translateX(34%)}}
.vl-warm{position:absolute;inset:0;background:linear-gradient(180deg,#f1cf8f59,transparent 46%);mix-blend-mode:soft-light;opacity:0;transition:opacity 1.6s .4s;pointer-events:none}
.abv-ch.on .vl-warm{opacity:1}
.vl-card .media-tag{left:12px;bottom:12px}

/* 03 · place: the Maresme coast draws itself, the sun rises over the sea, Amura and Scala light up */
.vis-map{background:#12161a}
.mp{position:absolute;inset:0;width:100%;height:100%}
.mp-sea{fill:url(#mpsea);opacity:0;transition:opacity 1s .2s}
.abv-ch.on .mp-sea{opacity:1}
.mp-coast{fill:none;stroke:#e6c993;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease) .3s}
.abv-ch.on .mp-coast{stroke-dashoffset:0}
.mp-waves path{fill:none;stroke:#f5f2ec26;stroke-width:1.2}
.abv-ch.on .mp-waves{animation:mpwave 5s ease-in-out infinite alternate}
@keyframes mpwave{to{transform:translateX(-10px)}}
.mp-sun{opacity:0;transform-box:fill-box;transform-origin:center;transform:translateY(46px) scale(.6);transition:opacity 1.2s 1.2s,transform 1.8s 1.2s var(--ease)}
.abv-ch.on .mp-sun{opacity:1;transform:none}
.mp-rays line{stroke:#f1cf8f;stroke-width:1.2;stroke-dasharray:3 6;opacity:0;transition:opacity .8s 2.4s}
.abv-ch.on .mp-rays line{opacity:.75;animation:mprays 1.6s linear infinite}
@keyframes mprays{to{stroke-dashoffset:-18}}
.mp-pt{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(1.1s + var(--i) * .35s)}
.abv-ch.on .mp-pt{opacity:1;transform:none}
.mp-pt circle{fill:var(--wood);stroke:#12161a;stroke-width:2}
.mp-pt.bcn circle{fill:#f5f2ec99}
.mp-pt .pulse{fill:none;stroke:var(--wood);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:mppulse 2.4s ease-out infinite}
@keyframes mppulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
.mp text{font:600 14px var(--display);fill:#f5f2ece6}
.mp .mp-sealbl{fill:#f5f2ec73;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.mp .mp-reg{fill:#c9a36ba6;font-size:12px;letter-spacing:.32em;text-transform:uppercase}

/* 04 · responsibility: the figures count up, the A–G label slides in */
.vis-num{display:grid;align-content:center;gap:clamp(14px,2.6vh,28px);padding:clamp(22px,3vw,42px)}
.vn{display:grid;gap:6px;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .8s var(--ease)}
.vn:nth-child(2){transition-delay:.15s}.vn:nth-child(3){transition-delay:.3s}.vn:nth-child(4){transition-delay:.45s}
.abv-ch.on .vn{opacity:1;transform:none}
.vn .gnum{font-size:clamp(50px,min(5.4vw,9vh),92px)}
.vn>span{color:var(--on-dark-2);font-size:15px;line-height:1.4;max-width:36ch}
.vn.va{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}
.vn.va .elabel{justify-self:start;width:170px;max-width:none;padding-right:34px}
.vn.va>div:last-child{display:grid;gap:6px}
.vn.va>div:last-child span{color:var(--on-dark-2);font-size:15px}
.abv-ch.on .elabel .bar{transform:scaleX(1)}
.abv-ch.on .elabel .ptr{opacity:1;transform:none}
.abv-ch.on .elabel .bar:first-child{animation:apulse 1.4s 1.5s ease-in-out 2}
.vn-chips{display:flex;gap:8px;flex-wrap:wrap}
.vn-chips span{padding:8px 12px;border-radius:999px;background:#ffffff0a;border:1px solid #ffffff14;font:600 13px/1 var(--display);color:var(--wood)}

/* 05 · transparency: Amura floor by floor, one square per home — the available ones light up, the figure counts */
.vis-av{display:grid;align-content:center;gap:16px;padding:clamp(22px,3vw,42px)}
.av-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.av-head .gnum{display:inline-block;font-size:clamp(64px,min(6.4vw,11vh),108px)}
.av-head span{color:var(--on-dark-2);font-size:16px;max-width:22ch;line-height:1.35}
.av-bld{display:grid;gap:6px;padding:14px;border-radius:var(--r-md);background:#ffffff06;border:1px solid #ffffff10}
.av-row{display:grid;grid-template-columns:20px repeat(8,minmax(0,1fr));gap:6px;align-items:center}
.av-fl{font:600 11px/1 var(--display);color:#f5f2ec59}
.av-row i{height:clamp(14px,2.6vh,26px);border-radius:4px;background:#ffffff0d;border:1px solid #ffffff1f;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s var(--ease),background-color .6s,box-shadow .6s;transition-delay:calc(var(--i) * 26ms + .3s)}
.abv-ch.on .av-row i{opacity:1;transform:none}
.av-row i.r{background:transparent;border-color:#ffffff26}
.abv-ch.on .av-row i.a{background:linear-gradient(135deg,#ecd3a2,var(--wood));border-color:transparent;box-shadow:0 0 12px #c9a36b4d;animation:avlive 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * 90ms + 1.4s)}
@keyframes avlive{50%{box-shadow:0 0 20px #e6c993a6}}
.av-leg{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--on-dark-2)}
.av-leg span{display:inline-flex;align-items:center;gap:8px}
.av-leg span::before{content:"";width:12px;height:12px;border-radius:3px}
.av-leg .la::before{background:var(--wood)}
.av-leg .lr::before{border:1px solid #ffffff4d}
.av-from{font-size:14px;color:var(--on-dark-2)}

/* phones: rail (sun + chapter numbers) on top, the picture, then the text; the mobile bar keeps its place */
@media (max-width:760px){
  .abv-track{height:calc(var(--n) * 72svh + 100svh - 52px)}
  .abv-stage{grid-template-rows:auto minmax(0,1fr);gap:10px;padding:10px 0 calc(80px + env(safe-area-inset-bottom,0px))}
  .abv-next{display:none}
  .abv-arc{width:62px}
  .abv-rail{gap:10px}
  .abv-dots{gap:5px}
  .abv-dots button{padding:8px 10px;font-size:12.5px}
  .abv-dots button.on span{display:none}
  .abv-ch{grid-template-columns:minmax(0,1fr);grid-template-rows:min(31svh,280px) auto;gap:16px;align-items:start;align-content:start}
  .abv-vis{grid-row:1;height:100%}
  .abv-txt{grid-row:2}
  .abv-txt{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:end}
  .abv-txt>p{grid-column:1/-1}
  .abv-n{font-size:46px}
  .abv-txt h3{font-size:25px;margin:0 0 3px}
  .abv-txt p{font-size:15px;line-height:1.45;margin-top:10px}
  .abv-txt .abv-f{font-size:15px;padding-right:56px}
  .bp-chk li{padding:7px 11px 7px 10px;font-size:12.5px}
  .vis-num{grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:14px 16px;padding:14px 16px}
  .vn .gnum{font-size:36px}
  .vn>span{font-size:12px;line-height:1.3}
  .vn.va{grid-column:1/-1;gap:16px}
  .vn.va .elabel{width:112px;padding-right:26px;gap:2px}
  .vn.va .elabel .bar{height:10px;font-size:8px;padding-left:4px}
  .vn.va .elabel .ptr{height:10px;line-height:10px;font-size:9px}
  .vn.va>div:last-child span{font-size:12px}
  .vn-chips{display:none}
  .vis-av{gap:10px;padding:14px 16px}
  .av-head .gnum{font-size:44px}
  .av-head span{font-size:13.5px}
  .av-bld{padding:10px;gap:4px}
  .av-row{gap:4px;grid-template-columns:14px repeat(8,minmax(0,1fr))}
  .av-row i{height:13px;border-radius:3px}
  .av-leg,.av-from{font-size:12px}
}
@media (max-width:760px) and (max-height:700px){
  /* short phones (360×640, 375×667): the chapter is pinned top:0/bottom:0, so the picture takes all the height the text
     leaves free (180–240 px) instead of a fixed 25svh (~150 px) that cut the figures of 04 and squashed the grid of 05 */
  .abv-ch{grid-template-rows:minmax(150px,1fr) auto;gap:12px}
  .abv-txt p{font-size:14px}
  .vis-num{gap:10px 14px;padding:12px 14px}
  .vn .gnum{font-size:30px}
  .vn.va .elabel{display:none}
  .vis-av{gap:8px;padding:12px 14px}
  .av-head .gnum{font-size:38px}
  .av-row i{height:12px}
  .av-leg{display:none}
}
/* reduced motion: a plain list of the five, every picture in its final state */
.abv.static .abv-track{height:auto}
.abv.static .abv-stage{position:static;height:auto;display:block;padding-bottom:var(--sec)}
.abv.static .abv-rail,.abv.static .abv-next{display:none}
.abv.static .abv-ch{position:relative;inset:auto;left:auto;right:auto;opacity:1;pointer-events:auto;margin-top:clamp(40px,6vw,72px)}
.abv.static .abv-vis{height:clamp(320px,46vw,520px)}
.abv.static *,.abv.static *::before,.abv.static *::after{transition:none!important;animation:none!important}
.abv.static .bp-laser{opacity:0}

/* ---------- figures ---------- */
.abn{position:relative;overflow:hidden;background:var(--paper);padding-block:var(--sec)}
.abn-glow{position:absolute;left:50%;top:100%;width:min(130vw,1500px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#f6d79f80 0%,#efd9b259 24%,#e8d9bf26 44%,transparent 64%);transform:translate(-50%,calc(-34% - var(--np,0) * 30%))}
.abn .wrap{position:relative}
.abn h2{margin-top:8px;max-width:20ch}
.abn-grid{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 60px #7f61341a}
.abn-grid li{background:#fbf9f5f2;padding:clamp(22px,3vw,40px);display:grid;gap:10px;align-content:start;opacity:0;transform:translateY(24px);transition:opacity .7s,transform .9s var(--ease);transition-delay:calc(var(--i) * 90ms)}
.abn-grid.on li{opacity:1;transform:none}
.abn-v{display:block;white-space:nowrap;font:700 clamp(46px,5vw,84px)/.92 var(--display);letter-spacing:-.05em;background:linear-gradient(135deg,#d2ab70 0%,#a8834e 55%,var(--wood-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.abn-v small{font-size:.4em;letter-spacing:-.02em}
.abn-grid li>span{color:var(--graphite);font-size:15.5px;line-height:1.4;max-width:28ch}
@media (max-width:760px){.abn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.abn-grid li{padding:20px 16px}.abn-v{font-size:clamp(28px,8.6vw,44px)}.abn-grid li>span{font-size:13.5px}}

/* ---------- del lugar a la llave ---------- */
.abp{padding-block:var(--sec);overflow:clip}
.abp-head{max-width:760px}
.abp-head h2{margin-top:8px}
.abp-head .lead{margin-top:16px}
.abp-wrap{position:relative;margin-top:clamp(40px,6vw,80px)}
.abp-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#f5f2ec1f}
.abp-fill{position:absolute;inset:0;background:linear-gradient(180deg,var(--wood),#f1dfbf);transform-origin:top;transform:scaleY(0);box-shadow:0 0 12px #c9a36b88}
.abp-sun{position:absolute;left:50%;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:radial-gradient(circle,#fff6e0 0 30%,#f1cf8f 56%,#c9a36b00 74%);box-shadow:0 0 26px 10px #f1cf8f59}
.abp-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,8vw,120px)}
.abp-step{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.abp-node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:700 15px/1 var(--display);color:#f5f2ec88;background:var(--sea);border:1.5px solid #f5f2ec33;transition:color .5s,background .5s,border-color .5s,box-shadow .5s}
.abp-step.on .abp-node{color:var(--ink);background:var(--wood);border-color:var(--wood);box-shadow:0 0 0 6px #c9a36b26,0 0 30px #c9a36b66}
.abp-body{grid-column:1;grid-row:1;text-align:right;opacity:.8;transform:translateY(20px);transition:opacity .7s,transform .8s var(--ease)}
.abp-step.on .abp-body{opacity:1;transform:none}
.abp-body h3{font-size:clamp(28px,3vw,42px)}
.abp-body p{margin:10px 0 0 auto;color:var(--on-dark-2);font-size:clamp(16px,1.3vw,18px);max-width:40ch}
.abp-media{grid-column:3;grid-row:1;margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--sea-2);clip-path:inset(0 0 100% 0 round 28px);transition:clip-path 1.1s var(--ease)}
.abp-step.on .abp-media{clip-path:inset(0 0 0 0 round 28px)}
.abp-media img,.abp-media video{width:100%;height:100%;object-fit:cover;max-width:none;transform:scale(1.14);transition:transform 1.8s var(--ease)}
.abp-step.on .abp-media img,.abp-step.on .abp-media video{transform:none}
.abp-media.plan{background:#f5f2ec}
.abp-media.plan img{object-position:50% 42%}
.abp-media.plan .media-tag{color:#111111b3}
.abp-media .media-tag{left:16px;bottom:14px;text-shadow:0 1px 6px #0006}
.abp-step:nth-child(even) .abp-body{grid-column:3;text-align:left}
.abp-step:nth-child(even) .abp-body p{margin-left:0}
.abp-step:nth-child(even) .abp-media{grid-column:1}
@media (max-width:760px){
  .abp-line{left:23px}
  .abp-step{grid-template-columns:46px minmax(0,1fr);gap:12px 14px;align-items:start}
  .abp-node{grid-column:1;grid-row:1;justify-self:start;width:46px;height:46px;font-size:14px}
  .abp-body,.abp-step:nth-child(even) .abp-body{grid-column:2;grid-row:1;text-align:left;padding-top:8px}
  .abp-body p{margin-left:0;font-size:15.5px}
  .abp-media,.abp-step:nth-child(even) .abp-media{grid-column:2;grid-row:2;aspect-ratio:16/10}
}
.abp.static .abp-fill{transform:none}
.abp.static .abp-sun{display:none}
.abp.static *{transition:none!important}

/* ---------- deeds: Scala finished, Amura under way ---------- */
.abd{background:var(--paper);padding-block:var(--sec)}
.abd h2{margin-top:8px;max-width:18ch}
.abd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,56px)}
.abd-card{background:var(--card);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line),0 18px 40px #11111110}
.abd-img{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:var(--paper-2)}
.abd-img img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1.2s var(--ease)}
.abd-card:hover .abd-img img{transform:scale(1.04)}
.abd-img .media-tag{left:16px;bottom:14px;text-shadow:0 1px 6px #0008}
.abd-body{padding:22px clamp(18px,2.4vw,30px) 28px;display:grid;gap:12px;align-content:start}
.abd-body .pname{font-size:clamp(40px,4.6vw,64px);letter-spacing:-.04em;line-height:1}
.abd-body p{color:var(--graphite)}
.abd-body .actions{justify-content:flex-start;gap:12px 22px;margin-top:6px}
.abd-badge{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font:600 13px/1 var(--display);background:var(--paper-2);color:var(--ink)}
.abd-badge i{width:8px;height:8px;border-radius:50%;background:#2f9e5b}
.abd-badge.live i{background:#e0892f;animation:abdlive 1.8s ease-out infinite}
@keyframes abdlive{from{box-shadow:0 0 0 0 #e0892f99}to{box-shadow:0 0 0 10px #e0892f00}}
@media (max-width:760px){.abd-grid{grid-template-columns:1fr}}

/* ---------- the best architects of each place (the one Vilalta block) ---------- */
.aba{background:var(--paper-2);padding-block:var(--sec-c)}
.aba-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.aba h2{margin-top:8px}
.aba .lead{margin-top:14px;font-size:clamp(17px,1.5vw,20px)}
.aba-facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aba-facts li{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:baseline;gap:14px;padding:14px 18px;border-radius:var(--r-md);background:var(--card)}
.aba-facts b{font:700 26px/1 var(--display);letter-spacing:-.03em;color:var(--wood-deep)}
.aba-facts span{color:var(--graphite);font-size:15px;line-height:1.35}
.aba-links{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px;color:#5d6167}
.aba-links a:not(.link){color:var(--graphite);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.aba-grid{grid-template-columns:1fr}}

/* ---------- team ---------- */
.abt h2{margin-top:8px}
.abt-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:clamp(28px,4vw,48px)}
.abt-card{background:var(--sea-2);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 22px;align-items:start}
.abt-av{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font:700 24px/1 var(--display);color:var(--ink);background:linear-gradient(135deg,#f1dfbf,var(--wood))}
.abt-ly{width:64px;height:64px;border-radius:50%;object-fit:cover}
.abt-card h3{font-size:clamp(26px,2.6vw,34px)}
.abt-card .role{color:var(--wood);font-weight:600;margin-top:4px}
.abt-card p{color:var(--on-dark-2);margin-top:8px}
.abt-card .langs{font-size:14px}
.abt-card .actions{justify-content:flex-start;gap:12px 20px;margin-top:18px}
@media (max-width:860px){.abt-grid{grid-template-columns:1fr}}
@media (max-width:480px){.abt-card{grid-template-columns:minmax(0,1fr)}}

/* ---------- press: Forbes first, with Arkadii's words ---------- */
.abpr{background:var(--paper)}
.abpr h2{margin-top:8px}
.abq{position:relative;overflow:hidden;margin:clamp(28px,4vw,48px) 0 clamp(24px,3vw,36px);padding:clamp(26px,4vw,52px);border-radius:var(--r-lg);background:var(--card);box-shadow:0 1px 0 var(--line),0 18px 40px #11111110;display:grid;gap:18px}
.abq::after{content:"";position:absolute;right:-8%;top:-40%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f1cf8f59,transparent 66%);pointer-events:none}
.abq .plogo{height:26px;width:auto;max-width:160px;object-fit:contain;object-position:left center}
.abq blockquote{position:relative;margin:0;font:600 clamp(28px,3.8vw,56px)/1.06 var(--display);letter-spacing:-.035em;color:var(--ink);max-width:20ch;text-wrap:balance}
.abq figcaption{position:relative;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;color:var(--muted);font-size:15px}
.abq figcaption .link{font-size:15px}

/* ---------- home: press ---------- */
.abhome{background:var(--paper)}
.abhome .presshead{margin-top:0}

/* gentle rise for cards as they come into view (opacity + a short lift; never next to a map or a button that would move) */
[data-rise]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
[data-rise].on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rise]{opacity:1;transform:none;transition:none}.abh-sun,.abh-sun b,.abh .abh-media img,.abh-key .sunic,.abh-cue i::after{animation:none!important}}

/* vertical rhythm for the new blocks (same tokens as the rest of v2) */
#cifras,#proceso,#hechos,#sobre{padding-block:var(--sec)}
#arquitectos{padding-block:var(--sec-c)}

/* ---------- Scala from the sky (real drone footage, 2024), scrubbed by the scroll like the flights ---------- */
.abf{padding-top:var(--sec-c)}
.abf-head{padding-bottom:clamp(28px,4vw,48px)}
.abf-head h2{margin-top:8px;max-width:18ch}
.film.f-obra{height:380vh}
.f-obra .cap{font-size:clamp(28px,4.4vw,58px)}
@media (max-width:760px){.film.f-obra{height:320vh}}
@media (prefers-reduced-motion:reduce){.film.f-obra{height:auto}}


/* phones, chapter 05: the Amura grid card must fit the fixed picture row — the number is smaller and the rows share the card's height (CEO 10/10: the top figure and the price line were cut off) */
@media (max-width:760px){
  .vis-av{align-content:stretch;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;padding:12px 14px}
  .av-head{gap:10px;flex-wrap:nowrap;align-items:baseline}
  .av-head .gnum{font-size:38px;line-height:1}
  .av-head span{font-size:13px;line-height:1.25;max-width:none}
  .av-bld{min-height:0;grid-auto-rows:minmax(0,1fr);gap:4px;padding:8px 10px}
  .av-row{gap:4px;grid-template-columns:16px repeat(8,minmax(0,1fr));height:100%}
  .av-row i{height:auto;min-height:8px;align-self:stretch}
  .av-fl{font-size:10px}
  .av-leg{font-size:12px;gap:4px 14px}
  .av-from{font-size:12px;line-height:1.25}
}
/* legal pages (audit 10/10, S1L-02): the saved texts of www.arev.homes, plain and readable */
.legalpg{padding:calc(var(--nav-h,64px) + 48px) 0 96px;background:var(--paper,#fff)}
.lg-wrap{max-width:820px}
.lg-note{font-size:14px;color:var(--muted);margin:0 0 20px;padding:10px 14px;border-left:3px solid var(--wood,#b08d57);background:rgba(0,0,0,.03)}
.lg-text{font-size:15px;line-height:1.65;color:var(--ink,#111)}
.lg-text h1{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 16px}
.lg-text h2{font-size:20px;margin:36px 0 10px}
.lg-text h3{font-size:16px;margin:24px 0 8px}
.lg-text p{margin:0 0 10px;overflow-wrap:anywhere}
.lg-text a{text-decoration:underline}
.lg-tbl{overflow-x:auto;margin:12px 0 20px}
.lg-tbl table{border-collapse:collapse;width:100%;font-size:13px;min-width:520px}
.lg-tbl th,.lg-tbl td{border:1px solid var(--line,#ddd);padding:8px 10px;text-align:left;vertical-align:top}
.lg-tbl th{background:rgba(0,0,0,.04);font-weight:600}
footer .legal .lg-cfg{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
footer .legal .lg-cfg:hover{text-decoration:underline}
/* cookie banner (audit 10/10, S1L-01) — bottom left on desktop (Leya's button stays free on the right), above the bottom bar on phones */
.ckbar{position:fixed;left:18px;bottom:18px;z-index:97;width:min(520px,calc(100vw - 36px));background:var(--ink);color:var(--on-dark,#f5f2ec);border-radius:18px;padding:16px 18px;box-shadow:0 18px 50px #00000059;display:grid;gap:12px;font-size:14px;line-height:1.45;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.ckbar.on{opacity:1;transform:none}
.ckbar p{margin:0}
.ckbar a{color:inherit;text-decoration:underline}
.ckbar .ck-act{display:flex;gap:10px;flex-wrap:wrap}
.ckbar .pill{min-height:44px;font-size:15px;padding:0 18px}
.ckbar .ck-nec{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px #ffffff66}
@media (max-width:760px){
  .ckbar{left:12px;right:12px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .ckbar .pill{flex:1}
  body.ck-on .leyabtn{bottom:calc(var(--ckh,150px) + 88px + env(safe-area-inset-bottom,0px))}
}
body.modal-open .ckbar{display:none}

/* touch screens: a horizontal track with mandatory snap re-snaps while the page scrolls vertically on iOS and jitters (CEO 11/10, Scala shorts) → proximity snap, no overscroll chaining */
@media (pointer:coarse){
  .track{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
}