/* ============================================
   LOP — Live On Point
   ============================================ */

:root{
  --preto:#0a0a0a;
  --grafite:#1a1a1a;
  --cinza:#6b6b6b;
  --cinza-claro:#d8d6d2;
  --areia:#f4f2ee;
  --branco:#ffffff;
  --max:1280px;
  --gut:clamp(20px, 5vw, 72px);
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--preto);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

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

/* ---------- utilitários ---------- */

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gut);
}
.wrap--center{text-align:center}

.section{padding:clamp(80px,12vw,160px) 0}

.eyebrow{
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--cinza);
  margin:0 0 24px;
}
.eyebrow--light{color:rgba(255,255,255,.75)}

.display{
  font-size:clamp(38px,6.4vw,82px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
  margin:0 0 32px;
}
.display--sm{font-size:clamp(30px,4.4vw,56px)}
.display--light{color:var(--branco)}

.lead{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.65;
  color:#3a3a3a;
  max-width:62ch;
  margin:0;
  font-weight:300;
}
.lead--light{color:rgba(255,255,255,.85)}
.wrap--center .lead{margin-left:auto;margin-right:auto}

/* ---------- nav ---------- */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px var(--gut);
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav--solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
  padding-top:14px;
  padding-bottom:14px;
}

.nav__logo{height:26px;width:auto}
.nav__logo--dark{display:none}
.nav--solid .nav__logo--light{display:none}
.nav--solid .nav__logo--dark{display:block}

.nav__links{display:flex;gap:clamp(18px,2.4vw,40px)}
.nav__links a{
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--branco);
  opacity:.85;
  transition:opacity .25s;
}
.nav__links a:hover{opacity:1}
.nav--solid .nav__links a{color:var(--preto);opacity:.6}
.nav--solid .nav__links a:hover{opacity:1}

@media (max-width:640px){
  .nav__links{display:none}
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.hero__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 36%, rgba(0,0,0,.40) 100%);
}
.hero__content{
  position:relative;
  text-align:center;
  padding:0 var(--gut);
  animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.hero__logo{
  width:min(420px,62vw);
  margin:0 auto 26px;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.35));
}
.hero__tagline{
  margin:0;
  color:var(--branco);
  font-size:clamp(14px,1.5vw,19px);
  font-weight:300;
  letter-spacing:.42em;
  text-transform:uppercase;
  text-indent:.42em;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}

.hero__scroll{
  position:absolute;
  bottom:36px;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:56px;
  background:rgba(255,255,255,.35);
  overflow:hidden;
}
.hero__scroll span{
  position:absolute;
  top:-56px;
  left:0;
  width:1px;
  height:56px;
  background:var(--branco);
  animation:drip 2.4s ease-in-out infinite;
}

@keyframes drip{
  0%{transform:translateY(0)}
  100%{transform:translateY(112px)}
}
@keyframes rise{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}

/* ---------- marca ---------- */

.marca{background:var(--branco)}

.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(32px,4vw,64px);
  margin-top:clamp(56px,8vw,104px);
  padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--cinza-claro);
}
.pillar__letter{
  display:block;
  font-size:52px;
  font-weight:700;
  letter-spacing:-.05em;
  line-height:1;
  color:var(--cinza-claro);
  margin-bottom:18px;
}
.pillar h2{
  font-size:21px;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 12px;
}
.pillar p{
  margin:0;
  font-size:15.5px;
  line-height:1.72;
  color:var(--cinza);
  font-weight:300;
}

/* ---------- linhas ---------- */

.linhas{
  padding:clamp(80px,12vw,160px) 0 clamp(40px,6vw,80px);
  background:var(--areia);
}
.linhas > .wrap{margin-bottom:clamp(48px,6vw,88px)}

.linha{
  max-width:var(--max);
  margin:0 auto clamp(72px,10vw,140px);
  padding:0 var(--gut);
  display:grid;
  grid-template-columns:1.25fr .85fr;
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.linha--rev .linha__media{order:2}
.linha--rev .linha__text{order:1}

.linha__media{position:relative}
.linha__media > img:first-child{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.linha__detail{
  position:absolute;
  right:-6%;
  bottom:-8%;
  width:46%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:8px solid var(--areia);
  box-shadow:0 18px 50px rgba(0,0,0,.14);
}

.linha__num{
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--cinza);
  margin-bottom:18px;
}
.linha__text h3{
  font-size:clamp(28px,3.4vw,44px);
  font-weight:600;
  letter-spacing:-.03em;
  margin:0 0 20px;
}
.linha__text p{
  font-size:16.5px;
  line-height:1.72;
  color:#3a3a3a;
  font-weight:300;
  margin:0 0 28px;
}

.specs{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--cinza-claro);
}
.specs li{
  padding:13px 0;
  border-bottom:1px solid var(--cinza-claro);
  font-size:14px;
  letter-spacing:.04em;
  color:var(--grafite);
}

@media (max-width:860px){
  .linha{grid-template-columns:1fr;gap:40px}
  .linha--rev .linha__media{order:0}
  .linha--rev .linha__text{order:0}
  .linha__detail{
    position:static;
    width:100%;
    aspect-ratio:16/9;
    border:0;
    box-shadow:none;
    margin-top:14px;
  }
}

/* ---------- galeria ---------- */

.galeria > .wrap:first-child{margin-bottom:clamp(40px,5vw,72px)}

.grid{
  column-count:3;
  column-gap:10px;
  padding:0 10px;
}
.grid__item{
  margin:0 0 10px;
  overflow:hidden;
  background:var(--areia);
  break-inside:avoid;
  page-break-inside:avoid;
  display:block;
}
.grid__item img{
  width:100%;
  height:auto;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.grid__item:hover img{transform:scale(1.045)}

@media (min-width:1400px){
  .grid{column-count:4}
}
@media (max-width:760px){
  .grid{column-count:2}
}
@media (max-width:460px){
  .grid{column-count:1}
}

/* ---------- em breve ---------- */

.embreve{
  position:relative;
  min-height:min(82vh,760px);
  display:flex;
  align-items:center;
  overflow:hidden;
  margin-top:clamp(80px,12vw,160px);
}
.embreve__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.embreve__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.18) 100%);
}
.embreve__content{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(72px,10vw,120px) var(--gut);
  width:100%;
}

/* ---------- contato ---------- */

.contato{background:var(--branco)}

.mail{
  display:inline-block;
  margin-top:36px;
  font-size:clamp(18px,2.4vw,30px);
  font-weight:500;
  letter-spacing:-.02em;
  padding-bottom:6px;
  border-bottom:2px solid var(--preto);
  transition:opacity .25s;
}
.mail:hover{opacity:.55}

/* ---------- footer ---------- */

.footer{
  background:var(--preto);
  padding:clamp(56px,7vw,88px) 0;
  text-align:center;
}
.footer__logo{width:132px;margin:0 auto 20px;opacity:.95}
.footer__tag{
  margin:0 0 28px;
  color:rgba(255,255,255,.6);
  font-size:11.5px;
  letter-spacing:.42em;
  text-transform:uppercase;
  text-indent:.42em;
}
.footer__legal{
  margin:0;
  color:rgba(255,255,255,.4);
  font-size:12.5px;
  letter-spacing:.03em;
}

/* ---------- reveal ---------- */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in{opacity:1;transform:none}

.hero .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__content{animation:none}
  .hero__scroll span{animation:none}
  .grid__item img{transition:none}
}