/* ============ TOKENS ============ */
:root{
  --ink:#0a0a09; --graphite:#171512; --charcoal:#28241f;
  --stone:#6b6963; --mist:#a8a6a0; --linen:#f4f0ea; --offwhite:#faf8f4;

  --pau:#a8422f;        /* pau-brasil red — signature accent */
  --pau-light:#d97a5f;
  --pau-dark:#742c1e;
  --pau-glow:rgba(168,66,47,0.35);

  --bg:var(--offwhite); --bg-raised:#ffffff; --bg-sunken:var(--linen);
  --text:var(--ink); --text-muted:var(--stone); --text-faint:var(--mist);
  --border:#e6ded2; --border-strong:#d6c9b4;
  --dark-bg:var(--ink); --dark-text:var(--offwhite);

  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--serif); font-weight:400; text-wrap:balance; color:var(--text);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1040px; margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:640px;}
.center{text-align:center;}

/* film grain overlay */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress-bar{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--pau); z-index:10000; transition:width 0.1s linear;
}

.brand-intro{
  position:fixed; inset:0; z-index:10001; background:var(--ink);
  display:flex; align-items:center; justify-content:center; opacity:0;
}
.brand-intro-text{display:flex; flex-direction:column; align-items:center; gap:12px;}
.brand-name{font-family:var(--serif); font-style:italic; font-size:clamp(26px,4vw,42px); color:var(--offwhite);}
.brand-presents{font-family:var(--sans); font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:var(--pau-light);}

.label{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:0.18em;
  font-size:12px; font-weight:600; color:var(--pau-light);
}
.label.gold{color:var(--pau-light);}

/* ============ NAV ============ */
nav.toc{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:rgba(10,10,9,0.0); backdrop-filter:blur(0px);
  transition:background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
  border-bottom:1px solid transparent;
}
nav.toc.scrolled{
  background:rgba(10,10,9,0.72); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.toc-row{display:flex; align-items:center; justify-content:space-between; padding:20px 32px;}
.toc-mark{
  font-family:var(--serif); font-size:20px; color:var(--offwhite);
  letter-spacing:0.05em; border:1px solid rgba(255,255,255,0.3);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.toc-links{display:flex; gap:32px;}
.toc-links a{font-size:13px; color:rgba(250,248,244,0.75); font-weight:500; transition:color 0.2s;}
.toc-links a:hover{color:var(--pau-light);}
.toc-cta{
  font-size:13px; font-weight:600; color:var(--ink); background:var(--pau-light);
  padding:9px 18px; border-radius:30px; transition:transform 0.2s, background 0.2s;
}
.toc-cta:hover{background:var(--offwhite); transform:translateY(-1px);}
@media (max-width:760px){ .toc-links{display:none;} }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:var(--ink); overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg-fallback{
  position:absolute; inset:-10%;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(168,66,47,0.28), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(168,66,47,0.14), transparent 65%),
    linear-gradient(160deg, #0a0a09 0%, #171512 55%, #0a0a09 100%);
}
.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity:0; transition:opacity 1.1s ease;
}
.hero-canvas.is-ready{opacity:1;}
.hero-vignette{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(10,10,9,0.95) 0%, rgba(10,10,9,0.35) 45%, rgba(10,10,9,0.15) 100%);
}
.hero-content{position:relative; z-index:2; padding-bottom:100px; padding-top:180px;}
.hero .label{color:var(--pau-light); margin-bottom:22px; display:block;}
.hero-title{font-size:clamp(52px,9vw,128px); line-height:0.94; color:var(--offwhite);}
.hero-title .line{display:block; overflow:hidden;}
.hero-title .accent-word{
  font-style:italic; color:var(--pau-light);
  background:linear-gradient(100deg, var(--pau-light), #f0b79c 60%, var(--pau-light));
  -webkit-background-clip:text; background-clip:text;
}
.hero-sub{
  margin-top:32px; max-width:44ch; font-size:19px; color:rgba(250,248,244,0.72);
  line-height:1.55;
}
.badges{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px;}
.badge{
  font-size:13px; color:rgba(250,248,244,0.85); border:1px solid rgba(255,255,255,0.18);
  padding:8px 16px; border-radius:30px; background:rgba(255,255,255,0.04);
}
.badge strong{color:var(--offwhite); font-weight:600;}

.cta-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:44px;}
.cta-row.center{justify-content:center;}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  padding:16px 30px; border-radius:4px; transition:transform 0.25s cubic-bezier(.16,1,.3,1), box-shadow 0.25s;
}
.btn-solid{background:var(--pau); color:var(--offwhite); box-shadow:0 8px 30px -8px var(--pau-glow);}
.btn-solid:hover{transform:translateY(-3px); box-shadow:0 14px 36px -8px var(--pau-glow);}
.btn-ghost{border:1px solid rgba(255,255,255,0.35); color:var(--offwhite);}
.btn-ghost:hover{background:rgba(255,255,255,0.08); transform:translateY(-3px);}
.btn-block{width:100%; justify-content:center; margin-top:28px;}

.scroll-cue{
  position:absolute; bottom:36px; right:32px; z-index:2; display:flex;
  flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue span{
  width:1px; height:44px; background:linear-gradient(to bottom, var(--pau-light), transparent);
  animation:scrollpulse 1.8s ease-in-out infinite;
}
.scroll-cue p{font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:rgba(250,248,244,0.5); writing-mode:vertical-rl;}
@keyframes scrollpulse{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }
@media (max-width:700px){ .scroll-cue{display:none;} }

/* ============ INTRO STRIP ============ */
.intro-strip{padding:120px 0; background:var(--ink);}
.intro-line{
  font-family:var(--serif); font-size:clamp(26px,4vw,44px); line-height:1.35;
  color:rgba(250,248,244,0.4); max-width:16ch; margin:0 auto; text-align:center;
}
.intro-line .word-in{color:var(--offwhite);}

/* ============ FACHADA STRIP ============ */
.fachada-strip{padding:0; background:var(--ink);}
.fachada-photo{
  position:relative; width:100%; aspect-ratio:16/7; overflow:hidden;
  background:linear-gradient(135deg, var(--charcoal), var(--ink));
  display:flex; align-items:center; justify-content:center;
}
.fachada-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.fachada-caption{
  text-align:center; padding:16px 0; font-size:13px; color:var(--text-faint);
  background:var(--ink); color:rgba(250,248,244,0.5);
}
@media (max-width:700px){ .fachada-photo{aspect-ratio:4/5;} }

/* ============ SECTIONS ============ */
.section{padding:120px 0; border-bottom:1px solid var(--border);}
.section.sunken{background:var(--bg-sunken);}
.sec-head{display:flex; align-items:baseline; gap:18px; margin-bottom:20px;}
.sec-num{font-family:var(--serif); font-size:16px; color:var(--pau);}
.sec-head h2{font-size:clamp(30px,4vw,46px);}
.lede{max-width:60ch; color:var(--text-muted); font-size:18px; margin-bottom:16px;}
.body{max-width:60ch; color:var(--text-muted); font-size:16px; margin-top:20px;}

/* reveal animation base state (set by JS via GSAP; CSS just avoids FOUC) */
[data-reveal]{opacity:0; }

/* ============ TIPOLOGIAS ============ */
.typ-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:56px;}
.typ-grid-3{grid-template-columns:repeat(3,1fr);}
.typ-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:6px;
  overflow:hidden; transition:transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s;
}
.typ-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -20px rgba(10,10,9,0.18);}
.typ-highlight{border-color:var(--pau); box-shadow:0 20px 50px -20px var(--pau-glow);}
.typ-photo{
  aspect-ratio:4/3; background:linear-gradient(135deg, var(--charcoal), var(--ink));
  display:flex; align-items:center; justify-content:center; position:relative;
}
.ph-label{
  font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:rgba(250,248,244,0.35);
  border:1px dashed rgba(250,248,244,0.25); padding:8px 16px; border-radius:30px;
}
.typ-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.photo-tag{
  position:absolute; left:14px; bottom:14px; z-index:1;
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(250,248,244,0.85);
  background:rgba(10,10,9,0.55); backdrop-filter:blur(4px);
  padding:6px 12px; border-radius:30px;
}
.typ-body{padding:32px;}
.typ-count{font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-faint); margin-bottom:8px;}
.typ-body h3{font-size:32px; margin-bottom:14px;}
.typ-price{font-family:var(--serif); font-size:28px; color:var(--pau-dark); margin-bottom:6px;}
.typ-meta{font-size:14px; color:var(--text-faint); margin-bottom:16px; font-variant-numeric:tabular-nums;}
.typ-desc{font-size:15px; color:var(--text-muted); line-height:1.6;}
@media (max-width:760px){ .typ-grid{grid-template-columns:1fr;} }

/* ============ CONDICOES ============ */
.banks-block{margin:32px 0;}
.banks-strip{display:flex; flex-wrap:wrap; align-items:center; gap:22px;}
.bank-chip{
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:0.02em;
  color:var(--text-faint); opacity:0.7; transition:opacity 0.2s, color 0.2s;
}
.bank-chip:last-child{font-weight:400; font-style:italic; opacity:0.5;}
.bank-chip:hover{opacity:1; color:var(--text-muted);}

.notice{background:var(--pau); color:var(--offwhite); padding:18px 24px; border-radius:6px; margin-bottom:16px;}
.notice p{font-size:15px;}
.notice-soft{background:var(--bg-raised); border:1px solid var(--border); color:var(--text-muted); font-size:13.5px;}
.tbd{font-style:italic; color:var(--text-faint);}

/* ============ TIMELINE ============ */
.timeline{display:flex; gap:0; margin:48px 0 32px; position:relative;}
.timeline-item{flex:1; position:relative; padding-top:28px;}
.timeline-item::before{
  content:''; position:absolute; top:6px; left:0; right:0; height:2px; background:var(--border-strong);
}
.timeline-item.done::before, .timeline-item.active::before{background:var(--pau);}
.t-dot{
  position:absolute; top:-2px; left:0; width:12px; height:12px; border-radius:50%;
  background:var(--border-strong); border:2px solid var(--bg-sunken);
}
.timeline-item.done .t-dot, .timeline-item.active .t-dot{background:var(--pau);}
.t-label{font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); margin-top:14px;}
.t-status{font-family:var(--serif); font-size:20px; margin-top:6px;}
@media (max-width:700px){ .timeline{flex-direction:column; gap:24px;} .timeline-item::before{display:none;} }

/* ============ FAQ ============ */
.faq-list{border-top:1px solid var(--border); margin-top:40px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{
  cursor:pointer; padding:24px 0; font-size:18px; font-family:var(--serif);
  display:flex; justify-content:space-between; align-items:center; list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-icon{font-size:22px; color:var(--pau); transition:transform 0.3s;}
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-item p{padding-bottom:24px; color:var(--text-muted); max-width:65ch; font-size:15px;}

/* ============ FINAL CTA ============ */
.final-cta h2{margin:14px 0 32px;}
.or{margin:36px 0 18px; color:var(--text-faint); font-size:14px;}
.waitlist-form{display:flex; gap:10px; max-width:420px; margin:0 auto;}
.waitlist-form input{
  flex:1; padding:14px 18px; border:1px solid var(--border-strong); border-radius:4px;
  font-family:var(--sans); font-size:15px; background:var(--bg-raised);
}
.waitlist-form input:focus{outline:2px solid var(--pau); outline-offset:1px;}
.waitlist-form button{
  padding:14px 22px; background:var(--ink); color:var(--offwhite); border-radius:4px;
  font-weight:600; font-size:14px; white-space:nowrap; transition:background 0.2s;
}
.waitlist-form button:hover{background:var(--pau);}
.waitlist-message{margin-top:14px; font-size:13.5px; color:var(--text-muted); min-height:18px;}

/* ============ FOOTER ============ */
footer{padding:56px 0; background:var(--ink); color:rgba(250,248,244,0.6);}
.footer-brand{font-family:var(--serif); font-size:20px; color:var(--offwhite); letter-spacing:0.04em;}
.footer-meta{font-size:13px; margin-top:10px;}
.footer-legal{font-size:11.5px; margin-top:18px; max-width:60ch; margin-left:auto; margin-right:auto; opacity:0.6; line-height:1.6;}

.studio-credit{border-top:1px solid rgba(255,255,255,0.08); padding:28px 0;}
.studio-credit-text{font-size:12.5px; color:rgba(250,248,244,0.45); margin-bottom:14px;}
.studio-credit-text a{color:rgba(250,248,244,0.7); text-decoration:underline; text-underline-offset:2px;}
.studio-credit-text a:hover{color:var(--pau-light);}
.btn-small{padding:10px 20px; font-size:13px;}

::selection{background:var(--pau-light); color:var(--ink);}