/* =========================================================
   L&L · BASE
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 40px)}
body,h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,video,svg,canvas{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:16.5px;
  font-weight:400;
  line-height:1.62;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grão fixo: dá matéria ao preto sem custo de repaint. */
body::after{
  content:"";
  position:fixed;inset:0;z-index:var(--z-grain);
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- tipografia ---------- */
.dp{
  font-family:var(--f-display);
  font-weight:600;                 /* semibold em todo display */
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.dp-xl{font-size:clamp(2.7rem,6.6vw,5.4rem)}
/* Palavra longa não pode mandar na largura da página:
   "empreendimentos." estourava 320px de tela estreita. */
.dp{overflow-wrap:break-word}
@media (max-width:400px){ .dp-xl{font-size:clamp(2.1rem,9.4vw,2.7rem)} }
.dp-lg{font-size:clamp(2.1rem,4.6vw,3.7rem)}
.dp-md{font-size:clamp(1.6rem,2.9vw,2.4rem)}
.dp-sm{font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.025em;line-height:1.14}

.eyebrow{
  display:inline-flex;align-items:center;
  padding:6px 14px;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  /* --ac-text, não --ac-2: este vira escuro nas seções de papel.
     Com --ac-2 o texto ficava em 1,5:1 sobre o branco. */
  color:var(--ac-text);
}

.lead{
  font-size:clamp(1.02rem,1.35vw,1.2rem);
  line-height:1.58;
  color:var(--fg-2);
  max-width:46ch;
}
.body{color:var(--fg-2);max-width:62ch}
.body + .body{margin-top:1.05em}
.body strong{color:var(--fg);font-weight:600}

.num{
  font-family:var(--f-display);font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:clamp(72px,10vw,150px)}
.sec--tight{padding-block:clamp(56px,7vw,104px)}

/* ---------- acessibilidade ---------- */
:focus-visible{outline:2px solid var(--ac-text);outline-offset:3px;border-radius:var(--r-sm)}
.skip{
  position:fixed;left:16px;top:-120px;z-index:100;
  background:var(--ac);color:var(--on-ac);
  padding:12px 20px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;
  transition:top var(--t-fast);
}
.skip:focus{top:16px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- transição entre páginas ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .3s var(--e) both}
::view-transition-new(root){animation:vtIn .45s var(--e) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

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

/* =========================================================
   ÍCONES
   Sprite embutido no HTML: zero pedido externo. Dimensionado
   em 1em, então as regras de font-size existentes continuam
   controlando o tamanho, como faziam com a fonte de ícone.
   ========================================================= */
.ic{
  width:1em;height:1em;
  fill:currentColor;
  flex:none;
  display:inline-block;
  vertical-align:-.135em;
}