/* ============================================================================
   SIDE — Layout & sections · V2 (cinematic / photographic)
   ========================================================================== */

.dot-live { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-right:0.6em; vertical-align:middle; box-shadow:0 0 0 0 var(--gold-glow); animation:pulse 2.4s var(--ease-soft) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(239,176,30,0.5);} 70%{box-shadow:0 0 0 7px rgba(239,176,30,0);} 100%{box-shadow:0 0 0 0 rgba(239,176,30,0);} }

/* ============================================================================
   BRAND LOGO (official SVG wordmark)
   ========================================================================== */
.logo-img { height: clamp(40px, 4.6vw, 50px); width: auto; display: block; }
.nav__brand .logo-img { height: clamp(40px, 4.4vw, 50px); }
.preloader__mark .logo-img { height: clamp(70px, 13vw, 104px); margin-inline: auto; }
.footer__top .logo-img, .logo-img--footer { height: 52px; }

/* ============================================================================
   BRAND LOGO LOCKUP (legacy css fallback)
   ========================================================================== */
.logo { display:inline-flex; align-items:stretch; gap:0.42em; line-height:1; }
.logo__bar { width:0.075em; flex:0 0 auto; align-self:stretch; border-radius:2px; background:linear-gradient(var(--gold-bright), var(--gold) 55%, var(--gold-deep)); box-shadow:0 0 14px var(--gold-glow); }
.logo__lock { display:flex; flex-direction:column; justify-content:center; gap:0.3em; }
.logo__word { font-family:var(--font-logo); font-weight:600; font-size:1em; letter-spacing:0.14em; color:var(--ivory); text-transform:uppercase; white-space:nowrap; position:relative; }
.logo__e { position:relative; }
.logo__e::after { content:""; position:absolute; top:-0.34em; right:-0.04em; width:0.3em; height:0.13em; transform:skewX(-24deg); background:linear-gradient(120deg, var(--gold-bright), var(--gold)); box-shadow:0 0 10px var(--gold-glow); }
.logo__sub { font-family:var(--font-logo); font-weight:500; font-size:0.292em; letter-spacing:0.455em; color:var(--gold); white-space:nowrap; padding-left:0.05em; }

/* ============================================================================
   NAV
   ========================================================================== */
.nav { position:fixed; inset:0 0 auto 0; z-index:var(--z-nav); display:flex; align-items:center; justify-content:space-between; padding:clamp(1rem,2.2vh,1.7rem) var(--gutter); transition:background var(--t-med) var(--ease-out), backdrop-filter var(--t-med), padding var(--t-med); }
.nav.is-scrolled { background:linear-gradient(180deg, rgba(11,13,17,0.82), rgba(11,13,17,0)); backdrop-filter:blur(12px); padding-block:clamp(0.7rem,1.6vh,1.1rem); }
.nav__brand { display:inline-flex; align-items:center; }
.nav__brand .logo { font-size:clamp(1.35rem,2.1vw,1.8rem); }
.nav__links { display:flex; gap:clamp(1.2rem,2.4vw,2.6rem); }
.nav__links a { font-size:var(--fs-caption); color:var(--text-soft); position:relative; padding:0.4em 0; transition:color var(--t-fast); }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--gold); transition:width var(--t-med) var(--ease-out); }
.nav__links a:hover { color:var(--ivory); } .nav__links a:hover::after { width:100%; }
.nav__cta { --pad-y:0.8em; --pad-x:1.5em; }
.nav__menu { display:none; flex-direction:column; gap:5px; padding:8px; }
.nav__menu span { width:26px; height:1.5px; background:var(--ivory); }

/* ============================================================================
   HERO
   ========================================================================== */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media { position:absolute; inset:0; z-index:0; }
.hero__media img { width:100%; height:100%; object-fit:cover; }
.hero__scrim { position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg, rgba(7,8,9,0.95) 0%, rgba(7,8,9,0.74) 24%, rgba(7,8,9,0.34) 50%, transparent 76%),
    linear-gradient(180deg, rgba(7,8,9,0.55), transparent 20%);
}
.hero__content { position:relative; z-index:2; padding-bottom:clamp(6rem,13vh,8.5rem); display:flex; flex-direction:column; gap:1.4rem; max-width:1100px; }
.hero__title { font-size:clamp(3rem,9vw,9.5rem); margin:0.1em 0; }
.hero__title em { color:var(--gold-bright); }
.hero__title .line-mask { line-height:0.98; }
.hero__lead { max-width:48ch; color:var(--stone); }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.6rem; }

.hero__stats { position:absolute; z-index:2; right:var(--gutter); bottom:clamp(2rem,5vh,3.5rem); display:flex; gap:0; border:1px solid var(--glass-border); border-radius:var(--r-md); overflow:hidden; backdrop-filter:blur(var(--glass-blur)); background:rgba(11,13,17,0.4); }
.hero__stat { padding:1.1rem 1.5rem; border-left:1px solid var(--glass-border); }
.hero__stat:first-child { border-left:0; }
.hero__stat-val { font-family:var(--font-display); font-size:clamp(1.5rem,2.4vw,2.1rem); color:var(--ivory); display:flex; align-items:baseline; gap:0.22em; font-variant-numeric:tabular-nums; line-height:1; }
.hero__stat-val em { font-family:var(--font-grotesk); font-style:normal; font-size:0.48em; color:var(--gold); }
.hero__stat-lbl { font-size:0.64rem; color:var(--text-soft); margin-top:0.5em; display:block; letter-spacing:0.04em; }

.hero__scroll { position:absolute; z-index:2; left:var(--gutter); bottom:clamp(2rem,5vh,3.5rem); display:flex; align-items:center; gap:0.9rem; font-size:0.6rem; letter-spacing:0.3em; color:var(--text-soft); }
.hero__scroll-line { width:54px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll-line::after { content:""; position:absolute; inset:0; background:var(--gold); animation:scrollPulse 2.2s var(--ease-in-out) infinite; }
@keyframes scrollPulse { 0%{transform:translateX(-100%);} 60%,100%{transform:translateX(100%);} }

/* ============================================================================
   STATEMENT (Visão) — full-bleed
   ========================================================================== */
.statement { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.statement__media { position:absolute; inset:0; z-index:0; }
.statement__scrim { position:absolute; inset:0; z-index:1; }
.statement__content { position:relative; z-index:2; max-width:760px; display:flex; flex-direction:column; gap:1.6rem; padding-block:var(--section-pad); }
.statement__quote { font-size:clamp(2.2rem,5.5vw,4.6rem); line-height:1.02; }

/* ============================================================================
   AUTHORITY — metrics over city
   ========================================================================== */
.authority { position:relative; overflow:hidden; }
.authority__bg { position:absolute; inset:0; z-index:0; }
.authority__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,13,17,0.92), rgba(11,13,17,0.7) 40%, rgba(11,13,17,0.9)); }
.authority__inner { position:relative; z-index:2; display:flex; flex-direction:column; gap:clamp(2.5rem,5vw,4.5rem); }
.authority__head { max-width:780px; display:flex; flex-direction:column; gap:1.2rem; }
.authority__head h2 em { color:var(--gold-bright); }
.metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:0; border-top:1px solid var(--line); }
.metric { padding:clamp(1.6rem,2.4vw,2.4rem) clamp(1.2rem,2vw,2rem) clamp(1.6rem,2.4vw,2.4rem) 0; border-bottom:1px solid var(--line); }
.metric__val { font-family:var(--font-display); font-size:clamp(2.6rem,4.5vw,4rem); color:var(--ivory); display:flex; align-items:baseline; gap:0.16em; font-variant-numeric:tabular-nums; line-height:1; }
.metric__val em { font-family:var(--font-grotesk); font-style:normal; font-size:0.32em; color:var(--gold); }
.metric__lbl { font-size:0.8rem; color:var(--text-soft); margin-top:0.7rem; display:block; max-width:22ch; }

/* ============================================================================
   PORTFOLIO — cinematic landmark blocks
   ========================================================================== */
.portfolio__head { max-width:760px; margin-bottom:clamp(3rem,6vw,5rem); display:flex; flex-direction:column; gap:1rem; }
.portfolio__head h2 { font-size:clamp(3rem,8vw,7rem); }

.landmark { position:relative; min-height:84vh; display:flex; align-items:flex-end; overflow:hidden; margin-bottom:clamp(1rem,2vw,2rem); }
.landmark__media { position:absolute; inset:0; z-index:0; }
.landmark::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(60deg, rgba(7,8,9,0.85) 0%, rgba(7,8,9,0.35) 42%, transparent 72%); }
.landmark--alt::after { background:linear-gradient(300deg, rgba(7,8,9,0.85) 0%, rgba(7,8,9,0.35) 42%, transparent 72%); }
.landmark__panel { position:relative; z-index:2; margin:var(--gutter); margin-bottom:clamp(2.5rem,5vw,4.5rem); max-width:min(520px,84vw); padding:clamp(1.8rem,2.8vw,2.8rem); display:flex; flex-direction:column; gap:0.7rem; }
.landmark--alt { justify-content:flex-end; }
.landmark__status { font-size:0.62rem; letter-spacing:0.14em; color:var(--gold); }
.landmark__status--done { color:var(--text-soft); }
.landmark__name { font-size:clamp(2.2rem,3.6vw,3rem); line-height:0.96; color:var(--ivory); display:flex; flex-direction:column; }
.landmark__name span { font-family:var(--font-grotesk); font-size:0.3em; font-weight:400; letter-spacing:0.22em; text-transform:uppercase; color:var(--stone-soft); margin-top:0.6em; }
.landmark__loc { font-size:0.66rem; color:var(--text-dim); letter-spacing:0.08em; }
.landmark__panel .body-soft { font-size:0.9rem; }
.landmark__metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:0.8rem 1.2rem; margin-top:1rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.landmark__metrics span { display:flex; flex-direction:column; font-size:0.64rem; color:var(--text-dim); letter-spacing:0.06em; }
.landmark__metrics b { font-family:var(--font-display); font-weight:500; font-size:1.45rem; color:var(--gold-bright); margin-bottom:0.1em; letter-spacing:0; }

/* ============================================================================
   PROCESS
   ========================================================================== */
.process { background:var(--abyss); }
.process__title { margin:0.4rem 0 clamp(2.5rem,5vw,4rem); font-size:clamp(2.2rem,5vw,4rem); }
.process__list { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.process__step { padding:clamp(1.8rem,2.6vw,2.6rem); background:var(--abyss); display:flex; flex-direction:column; gap:0.6rem; }
.process__phase { font-size:0.8rem; color:var(--gold); letter-spacing:0.3em; }
.process__step h3 { color:var(--ivory); margin-top:0.4rem; }

/* ============================================================================
   LEGACY — closing full-bleed
   ========================================================================== */
.legacy { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.legacy__media { position:absolute; inset:0; z-index:0; }
.legacy__scrim { position:absolute; inset:0; z-index:1; background:radial-gradient(60% 42% at 50% 48%, rgba(7,8,9,0.62), transparent 72%), radial-gradient(120% 100% at 50% 60%, transparent 35%, rgba(7,8,9,0.6) 100%), linear-gradient(0deg, rgba(7,8,9,0.85), transparent 50%, rgba(7,8,9,0.5)); }
.legacy__content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1.5rem; max-width:1000px; }
.legacy__title { font-size:clamp(2.8rem,8vw,8rem); line-height:1.0; }
.legacy__title em { color:var(--gold-bright); }
.legacy__lead { max-width:54ch; text-align:center; }
.legacy__sig { font-size:0.72rem; letter-spacing:0.5em; color:var(--gold); padding-left:0.5em; }

/* ============================================================================
   CONTACT + FOOTER
   ========================================================================== */
.contact { background:var(--void); }
.contact__grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
.contact__intro { display:flex; flex-direction:column; gap:1.3rem; }
.contact__intro h2 em { color:var(--gold-bright); }
.contact__meta { display:flex; flex-direction:column; gap:0.6rem; font-size:0.74rem; color:var(--text-soft); letter-spacing:0.08em; margin-top:0.6rem; }
.contact__form { padding:clamp(1.8rem,3vw,2.8rem); display:flex; flex-direction:column; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:0.5rem; }
.field span { font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-dim); }
.field input, .field select { background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:var(--r-sm); padding:0.95em 1.1em; color:var(--ivory); font-family:var(--font-grotesk); font-size:0.95rem; transition:border-color var(--t-fast), background var(--t-fast); }
.field input::placeholder { color:var(--text-dim); }
.field input:focus, .field select:focus { outline:none; border-color:var(--gold); background:rgba(255,255,255,0.07); }
.field select { cursor:pointer; appearance:none; }
.contact__form .btn { justify-content:center; margin-top:0.4rem; }
.contact__note { font-size:0.6rem; letter-spacing:0.2em; color:var(--text-dim); text-align:center; }
.contact__note.is-sent { color:var(--gold); }

.footer { display:flex; flex-direction:column; gap:3rem; padding-top:clamp(4rem,8vw,7rem); margin-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--line); }
.footer__top { display:flex; justify-content:space-between; gap:3rem; flex-wrap:wrap; }
.footer__top .logo { font-size:1.5rem; }
.footer__cols { display:flex; gap:clamp(2rem,4vw,4rem); flex-wrap:wrap; }
.footer__col { display:flex; flex-direction:column; gap:0.7rem; }
.footer__ct { font-size:0.62rem; letter-spacing:0.26em; color:var(--gold); margin-bottom:0.4rem; }
.footer__col a { font-size:0.86rem; color:var(--text-soft); transition:color var(--t-fast); width:fit-content; }
.footer__col a:hover { color:var(--gold); }
.footer__base { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:2rem; border-top:1px solid var(--line); font-size:0.66rem; color:var(--text-dim); letter-spacing:0.1em; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px) {
  .nav__links { display:none; }
  .nav__links.is-open { display:flex; flex-direction:column; position:fixed; top:4.6rem; right:1.2rem; gap:1.1rem; background:rgba(11,13,17,0.96); backdrop-filter:blur(20px); padding:1.4rem 1.9rem; border-radius:14px; border:1px solid var(--glass-border); box-shadow:var(--shadow-deep); }
  .nav__cta { display:none; }
  .nav__menu { display:flex; }
  .hero__stats { display:none; }
  .contact__grid { grid-template-columns:1fr; }
  .landmark__panel { max-width:none; margin-inline:1.2rem; }
}
@media (max-width:560px) {
  .landmark__metrics { grid-template-columns:1fr 1fr; }
  .footer__top { flex-direction:column; }
}

/* ===== CAMADAS — interstício cinematográfico (lâminas de vidro) ===== */
.layers{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(1.8rem,4.5vh,3.4rem); text-align:center; padding-block:var(--section-pad); overflow:hidden; }
.layers::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(44% 48% at 50% 54%, rgba(247,181,0,0.08), transparent 70%); }
.layers__head{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1.1rem; max-width:900px; padding-inline:var(--gutter); }
.layers__title{ font-size:clamp(2rem,5vw,4.4rem); line-height:1.04; }
.layers__title em{ color:var(--gold-bright); font-style:italic; }
.layers__stage{ position:relative; z-index:1; width:min(90vw,700px); aspect-ratio:1/1; perspective:1300px; }
.layers__plane{ position:relative; width:100%; height:100%; transform-style:preserve-3d; will-change:transform; background:var(--void); }
/* Vídeo nativo no fundo do site:
   1) mix-blend lighten — o preto do vídeo vira a cor exata do site (--void);
   2) feather nas 4 bordas (mask) — dissolve o retângulo do vídeo, sem borda reta. */
.layers__img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:lighten;
  --fth:13%;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fth), #000 calc(100% - var(--fth)), transparent), linear-gradient(to bottom, transparent, #000 var(--fth), #000 calc(100% - var(--fth)), transparent);
          mask-image:linear-gradient(to right, transparent, #000 var(--fth), #000 calc(100% - var(--fth)), transparent), linear-gradient(to bottom, transparent, #000 var(--fth), #000 calc(100% - var(--fth)), transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.layers__sub{ position:relative; z-index:2; font-size:0.72rem; letter-spacing:0.42em; color:var(--gold); padding-left:0.42em; }
@media (max-width:720px){ .layers__stage{ width:min(94vw,440px);} .layers__sub{ letter-spacing:0.3em;} }