@font-face{font-family:MacedoSans;src:url('/fonts/lato-light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:MacedoSans;src:url('/fonts/lato-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:MacedoSans;src:url('/fonts/lato-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--paper:#f0f2ee;--paper-deep:#d6dbd3;--leaf:#687363;--ink:#303a2d;--muted:#586154;--warm:#fbfcfa;--line:rgba(48,58,45,.2);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:MacedoSans,"Helvetica Neue",sans-serif;line-height:1.5;min-width:300px}
::selection{background:var(--ink);color:var(--warm)}
a{color:inherit}
.skip-link{position:fixed;z-index:20;top:10px;left:10px;transform:translateY(-140%);padding:10px 14px;background:var(--ink);color:var(--warm);border-radius:9px}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid rgba(64,88,60,.48);outline-offset:4px}
.portal{min-height:100svh;display:grid;grid-template-columns:minmax(620px,58%) 1fr}
.plan{height:100svh;min-height:720px;padding:0 clamp(34px,5vw,82px);display:grid;grid-template-rows:82px minmax(0,1fr) 278px 56px;position:relative;overflow:hidden}
.plan:after{content:"";position:absolute;left:clamp(34px,5vw,82px);right:0;top:82px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;animation:draw-rule 900ms var(--ease) 160ms forwards}
.brand-bar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand-bar img{width:210px;height:58px;object-fit:contain;object-position:left center}
.brand-bar span,footer{color:var(--muted);font-size:.82rem}
.intro{align-self:stretch;padding:clamp(28px,4.6vh,48px) 0 26px;display:grid;grid-template-columns:minmax(330px,1.32fr) minmax(210px,.68fr);align-items:end;gap:clamp(26px,4vw,58px)}
h1{font-size:clamp(3.25rem,4.8vw,4.85rem);font-weight:300;letter-spacing:-.035em;line-height:.94;margin:0;text-wrap:balance}
.intro p{max-width:39ch;margin:0 0 5px;color:var(--muted);font-size:1.02rem}
.access-plan{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(235px,.8fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);min-height:250px}
.room{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:22px;text-decoration:none;padding:26px clamp(22px,3vw,42px) 28px 0;overflow:hidden;background:transparent;transition:background-color 260ms var(--ease),color 260ms var(--ease)}
.room+.room{border-left:1px solid var(--ink);padding-left:clamp(22px,3vw,42px)}
.room-index{grid-column:1/-1;color:var(--muted);font-size:.78rem;font-weight:600}
.room-copy{align-self:end;max-width:35ch}
.room strong{display:block;font-size:clamp(1.45rem,2.1vw,2.25rem);font-weight:300;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.room small{display:block;margin-top:12px;color:var(--muted);font-size:.9rem;line-height:1.5}
.room svg{width:30px;height:30px;align-self:end;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform 280ms var(--ease)}
.room:before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform 380ms var(--ease);z-index:-1}
.room:hover,.room:focus-visible{color:var(--warm)}
.room:hover:before,.room:focus-visible:before{transform:none}
.room:hover .room-index,.room:hover small,.room:focus-visible .room-index,.room:focus-visible small{color:rgba(251,252,250,.76)}
.room:hover svg,.room:focus-visible svg{transform:translateX(5px)}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px}
.material{min-height:100svh;position:relative;background:linear-gradient(rgba(31,41,35,.1),rgba(31,41,35,.28)),url('/assets/hero-concreto.jpg') center/cover no-repeat;overflow:hidden;color:var(--warm)}
.material:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(48,58,45,.12),transparent 46%);pointer-events:none}
.material-caption{position:absolute;z-index:2;left:clamp(28px,4vw,60px);right:clamp(28px,4vw,60px);bottom:42px;padding-top:17px;border-top:1px solid rgba(255,255,255,.66);display:flex;justify-content:space-between;gap:26px;font-size:.8rem}
.material-caption span:last-child{text-align:right;max-width:24ch}
.drawing-line{position:absolute;z-index:1;left:13%;right:0;top:26%;height:42%;border-top:1px solid rgba(255,255,255,.7);border-left:1px solid rgba(255,255,255,.7);transform:scale(.02);transform-origin:top left;animation:draw-plan 1100ms var(--ease) 420ms forwards}
.drawing-line i{position:absolute;left:34%;top:0;height:100%;width:1px;background:rgba(255,255,255,.55)}
.drawing-line b{position:absolute;left:0;top:58%;height:1px;width:100%;background:rgba(255,255,255,.5)}
@keyframes draw-rule{to{transform:scaleX(1)}}
@keyframes draw-plan{to{transform:scale(1)}}
@media(max-width:1050px){.portal{grid-template-columns:minmax(560px,64%) 1fr}.plan{padding-inline:36px}.intro{grid-template-columns:1fr;gap:24px}.intro p{max-width:56ch}.access-plan{grid-template-columns:1fr}.room{min-height:146px}.room+.room{border-left:0;border-top:1px solid var(--ink);padding-left:0}.material-caption{display:block}.material-caption span{display:block}.material-caption span:last-child{text-align:left;margin-top:6px}}
@media(max-width:760px){.portal{display:flex;flex-direction:column}.material{order:-1;min-height:20svh}.material-caption{display:none}.drawing-line{top:18%;height:62%}.plan{height:auto;min-height:80svh;padding:0 20px;grid-template-rows:70px auto auto 48px;overflow:visible}.plan:after{left:20px;top:70px}.brand-bar img{width:166px;height:46px}.brand-bar span{font-size:.75rem}.intro{padding:22px 0 20px;display:block}.intro p{margin-top:14px;font-size:.9rem;line-height:1.44}.access-plan{display:block}.room{min-height:125px;padding:16px 14px 16px 0}.room+.room{padding-left:0}.room strong{font-size:1.38rem}.room small{font-size:.8rem;margin-top:6px}.room svg{width:25px;height:25px}footer{font-size:.7rem}h1{font-size:clamp(2.65rem,12.4vw,3.6rem)}}
@media(max-width:390px){.intro p{font-size:.86rem}.room small{max-width:31ch}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.plan:after,.drawing-line{animation:none;transform:none}.room,.room:before,.room svg{transition:none}}
