/* ===================== AltaVista — site imersivo ===================== */
:root{
  --noite:#0B1B2B; --noite2:#0e2336; --noite3:#13314a;
  --ouro:#C8A86B; --ouro2:#E7D4AE; --ouro-d:#9a7b3c;
  --papel:#FBF9F5; --branco:#F4EFE6;
  --cinza:#9fb0c0; --linha:rgba(200,168,107,.22);
  --maxw:1180px;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Jost', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --tint:0; /* 0=dia ... 1=noite, atualizado pelo JS */
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--branco); background:var(--noite);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.6;
}
body::before{ /* atmosfera cinematográfica contínua (profundidade + textura de luz) */
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(150% 58% at 50% -6%, rgba(200,168,107,.14), transparent 50%),
    radial-gradient(85% 65% at 84% 26%, rgba(34,68,104,.34), transparent 60%),
    radial-gradient(85% 70% at 6% 66%, rgba(22,48,78,.32), transparent 58%),
    radial-gradient(70% 55% at 60% 88%, rgba(40,30,60,.22), transparent 60%),
    radial-gradient(135% 100% at 50% 50%, transparent 50%, rgba(3,7,13,.62) 100%),
    linear-gradient(180deg, #0e2338 0%, #0b1c2e 32%, #08131f 66%, #050c16 100%);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.muted{color:var(--cinza)}
em{font-style:italic; color:var(--ouro2)}

/* ---------- tipografia ---------- */
.kicker{font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ouro); margin-bottom:18px}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:.005em}
h2{font-size:clamp(2.1rem, 5vw, 3.6rem); color:#fff}
.big{font-size:clamp(2.6rem, 7vw, 5rem); font-weight:500}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem); color:#d9e2ea; max-width:60ch; margin-top:18px; font-weight:300}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,56px); transition:.4s ease;
}
.site-header.scrolled{ padding:13px clamp(20px,5vw,56px); background:rgba(8,18,30,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--linha) }
.wordmark{font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:.22em; color:#fff}
.wordmark span{color:var(--ouro)}
.wordmark.sm{font-size:1.25rem}
.nav{display:flex; align-items:center; gap:30px; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase}
.nav a{color:#cdd8e2; transition:.25s} .nav a:hover{color:var(--ouro)}
.nav-cta{border:1px solid var(--ouro); color:var(--ouro)!important; padding:9px 18px; border-radius:40px}
.nav-cta:hover{background:var(--ouro); color:var(--noite)!important}
@media(max-width:760px){ .nav a:not(.nav-cta){display:none} }

/* ---------- HERO ---------- */
.hero-stage{position:relative; height:900vh}
.hero{position:sticky; top:0; height:100svh; min-height:620px; display:flex; align-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--noite)}
.hero-scene{position:absolute; inset:0; opacity:0; transform:scale(1.05); transition:none; will-change:opacity; backface-visibility:hidden}
.hero-scene:first-child{opacity:1}
.scene-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,12,22,.5) 0%, rgba(5,12,22,.14) 24%, rgba(5,12,22,.28) 58%, rgba(5,12,22,.78) 100%),
    linear-gradient(90deg, rgba(5,12,22,.42) 0%, rgba(5,12,22,.1) 45%, transparent 70%)}
.hero-content{position:relative; z-index:3; max-width:var(--maxw); width:100%; margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.eyebrow{font-family:var(--sans); font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ouro2); margin-bottom:22px; opacity:.92}
.hero-title{font-family:var(--serif); font-weight:600; font-size:clamp(3.4rem,12vw,9rem); line-height:.9; letter-spacing:.04em; color:#fff; text-shadow:0 8px 60px rgba(0,0,0,.45)}
.hero-title span{color:var(--ouro)}
.hero-tagline{font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,3vw,2.1rem); color:var(--ouro2); margin-top:6px}
.hero-sub{max-width:48ch; margin-top:18px; color:#dbe4ec; font-weight:300; font-size:clamp(1rem,1.4vw,1.15rem)}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:34px}

.btn{font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; padding:15px 30px; border-radius:44px; transition:.3s ease; display:inline-block; cursor:pointer; border:1px solid transparent}
.btn-gold{background:linear-gradient(120deg,var(--ouro),var(--ouro2)); color:var(--noite); font-weight:500}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(200,168,107,.32)}
.btn-ghost{border-color:rgba(231,212,174,.5); color:var(--ouro2)}
.btn-ghost:hover{border-color:var(--ouro); background:rgba(200,168,107,.08)}

/* indicador de hora do dia */
.tod{position:absolute; z-index:3; right:clamp(20px,5vw,56px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px; align-items:flex-end; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:#9fb0c0}
.tod span{transition:.3s; opacity:.45}
.tod span.on{color:var(--ouro); opacity:1}
.tod-bar{position:relative; width:2px; height:120px; background:rgba(255,255,255,.14); border-radius:2px; margin-top:4px}
.tod-bar b{position:absolute; left:0; top:0; width:100%; background:linear-gradient(var(--ouro),var(--ouro2)); border-radius:2px; height:0%}
@media(max-width:760px){ .tod{display:none} }

/* dica do drone */
.drone-hint{position:absolute; z-index:5; left:50%; bottom:118px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; background:rgba(8,18,30,.6); backdrop-filter:blur(8px);
  border:1px solid var(--linha); color:var(--ouro2); padding:9px 16px; border-radius:40px;
  font-size:.74rem; letter-spacing:.08em; cursor:pointer; transition:.4s; opacity:0}
.drone-hint.show{opacity:1}
.drone-hint:hover{border-color:var(--ouro); color:#fff}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--ouro); box-shadow:0 0 0 0 rgba(200,168,107,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,168,107,.6)}70%{box-shadow:0 0 0 12px rgba(200,168,107,0)}100%{box-shadow:0 0 0 0 rgba(200,168,107,0)}}

.scroll-cue{position:absolute; z-index:3; left:50%; bottom:34px; transform:translateX(-50%); color:#cbd6e0; font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px}
.scroll-cue span{width:1px; height:42px; background:linear-gradient(var(--ouro),transparent); animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4); opacity:.4}50%{transform:scaleY(1); opacity:1}}

/* legenda da jornada */
.journey-cap{position:absolute; z-index:3; left:0; right:0; bottom:104px; height:2.6em; pointer-events:none}
.journey-cap span{position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:90%; text-align:center; font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,2.8vw,2.4rem); color:#fff; opacity:0; transition:opacity .6s ease; text-shadow:0 4px 34px rgba(0,0,0,.65)}

/* seletor de etapas (chooser) */
.chooser{position:absolute; z-index:4; right:clamp(18px,4vw,48px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:13px; align-items:flex-end}
.chooser-item{display:flex; flex-direction:row-reverse; align-items:center; gap:12px; background:none; border:0; cursor:pointer; color:#9fb0c0; font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:2px 0; transition:.3s}
.chooser-item i{width:8px; height:8px; border-radius:50%; border:1px solid rgba(200,168,107,.55); transition:.3s; flex:0 0 auto}
.chooser-item span{opacity:.5; transition:.3s; white-space:nowrap}
.chooser-item:hover span{opacity:1; color:var(--ouro2)}
.chooser-item.on i{background:var(--ouro); border-color:var(--ouro); box-shadow:0 0 0 4px rgba(200,168,107,.18)}
.chooser-item.on span{opacity:1; color:var(--ouro)}
@media(max-width:860px){ .chooser-item span{display:none} }

/* painel da etapa (abre explicando a experiência) */
.stage-panel{position:absolute; z-index:4; left:clamp(20px,5vw,56px); bottom:104px; pointer-events:none}
.stage-panel article{position:absolute; left:0; bottom:0; width:min(460px,84vw); opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.stage-panel article.on{opacity:1; transform:none}
.stage-panel .pnum{font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ouro)}
.stage-panel h3{font-family:var(--serif); font-size:clamp(1.7rem,3.4vw,2.7rem); color:#fff; margin:9px 0 9px; line-height:1.05}
.stage-panel p{color:#e9eff5; font-weight:300; font-size:1.02rem; max-width:44ch; line-height:1.55; text-shadow:0 2px 22px rgba(0,0,0,.55)}
@media(max-width:560px){ .stage-panel{bottom:128px} }

/* ---------- POV do drone ---------- */
.drone-pov{position:fixed; inset:0; z-index:90; background:#04070d; opacity:0; visibility:hidden; transition:opacity .5s ease}
.drone-pov.on{opacity:1; visibility:visible}
.pov-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pov-grade{position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(125% 105% at 50% 45%, transparent 40%, rgba(2,6,12,.5))}
.hud{position:absolute; inset:0; pointer-events:none; font-family:var(--sans); color:rgba(231,212,174,.92); letter-spacing:.16em; font-size:.72rem; text-transform:uppercase}
.hud-corner{position:absolute; width:42px; height:42px; border:2px solid rgba(231,212,174,.7)}
.hud-corner.tl{top:26px; left:26px; border-right:0; border-bottom:0}
.hud-corner.tr{top:26px; right:26px; border-left:0; border-bottom:0}
.hud-corner.bl{bottom:26px; left:26px; border-right:0; border-top:0}
.hud-corner.br{bottom:26px; right:26px; border-left:0; border-top:0}
.hud-top{position:absolute; top:38px; left:64px; right:64px; display:flex; justify-content:space-between}
.rec{display:flex; align-items:center; gap:9px}
.rec i{width:11px; height:11px; border-radius:50%; background:#e2433b; animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.hud-bottom{position:absolute; bottom:40px; left:64px; right:64px; display:flex; justify-content:space-between; align-items:center}
.hud-mid{font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.02em; font-size:1.05rem; color:var(--ouro2)}
.hud-reticle{position:absolute; left:50%; top:50%; width:120px; height:120px; transform:translate(-50%,-50%); border:1px solid rgba(231,212,174,.25); border-radius:50%}
.hud-reticle::before,.hud-reticle::after{content:""; position:absolute; background:rgba(231,212,174,.4)}
.hud-reticle::before{left:50%; top:-14px; width:1px; height:28px; transform:translateX(-50%)}
.hud-reticle::after{top:50%; left:-14px; height:1px; width:28px; transform:translateY(-50%)}
.pov-exit{position:absolute; z-index:95; top:30px; right:64px; pointer-events:auto; cursor:pointer;
  background:rgba(8,18,30,.6); border:1px solid var(--linha); color:var(--ouro2); padding:10px 18px; border-radius:40px; font-family:var(--sans); font-size:.74rem; letter-spacing:.1em; transition:.25s}
.pov-exit:hover{border-color:var(--ouro); color:#fff}
@media(max-width:760px){ .hud-top,.hud-bottom{left:54px; right:54px} .pov-exit{right:20px} }

/* ---------- seções ---------- */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vh,150px) clamp(20px,5vw,56px)}
.section-head{margin-bottom:54px; max-width:30ch}
.manifesto{text-align:left; max-width:980px}
.manifesto .big{margin:6px 0}
.servicos .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:14px; overflow:hidden}
@media(max-width:900px){ .servicos .cards{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .servicos .cards{grid-template-columns:1fr} }
.card{background:linear-gradient(180deg,var(--noite2),var(--noite)); padding:34px 30px 38px; transition:.4s; position:relative}
.card:hover{background:linear-gradient(180deg,#16324b,var(--noite2))}
.card .num{font-family:var(--serif); font-size:.9rem; color:var(--ouro); letter-spacing:.2em}
.card h3{font-size:1.7rem; margin:14px 0 10px; color:#fff}
.card p{color:#c4d0db; font-weight:300; font-size:.98rem}

/* jornada / experiência */
.journey{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:620px){ .journey{grid-template-columns:1fr} }
.moment{padding:40px 36px; border-radius:20px; border:1px solid rgba(200,168,107,.13); min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; transition:transform .5s ease, box-shadow .5s ease; background-size:cover; background-position:center; box-shadow:0 28px 70px rgba(0,0,0,.42)}
.moment::after{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(6,12,22,.06) 0%, rgba(6,12,22,.32) 48%, rgba(6,12,22,.84) 100%)}
.moment > *{position:relative; z-index:1}
.moment:hover{transform:translateY(-6px); box-shadow:0 26px 64px rgba(0,0,0,.45)}
.moment-time{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro2)}
.moment h3{font-size:2rem; color:#fff; margin:10px 0 6px}
.moment p{color:rgba(245,239,230,.92); font-weight:300; font-size:.98rem; max-width:42ch}

/* portfólio */
.folio{display:grid; grid-template-columns:1.4fr 1fr; gap:22px}
@media(max-width:720px){ .folio{grid-template-columns:1fr} }
.folio-card{border:1px solid rgba(200,168,107,.13); border-radius:20px; padding:44px 38px; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:0 24px 64px rgba(0,0,0,.36)}
.folio-card.upcoming{background:radial-gradient(120% 120% at 80% 0%, rgba(200,168,107,.16), transparent 55%), linear-gradient(180deg,var(--noite2),#0a1726)}
.folio-card.soon{background:var(--noite2); border-style:dashed}
.folio-card.photo{background-image:linear-gradient(180deg,rgba(8,18,30,.28) 0%, rgba(6,12,22,.55) 55%, rgba(4,9,16,.9) 100%), url('assets/exp-exterior.webp'); background-size:cover; background-position:center; border-color:rgba(200,168,107,.4)}
.folio-card .tag{align-self:flex-start; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--noite); background:var(--ouro); padding:5px 12px; border-radius:30px; margin-bottom:auto; font-weight:500}
.folio-card.soon .tag{background:transparent; color:var(--ouro); border:1px solid var(--ouro)}
.folio-card h3{font-size:2rem; color:#fff; margin:18px 0 8px}
.folio-card p{color:#c4d0db; font-weight:300}

/* contato */
.contato{text-align:center}
.contato-inner{max-width:780px; margin:0 auto}
.contato .hero-actions{justify-content:center}
.contato .lead{margin-left:auto; margin-right:auto}

/* footer */
.site-footer{text-align:center; padding:60px 20px 50px; border-top:1px solid var(--linha); background:#081320}
.site-footer .wordmark{display:inline-block; margin-bottom:14px}
.site-footer p{color:#9fb0c0; font-size:.86rem}
.site-footer .muted{font-family:var(--serif); font-style:italic; color:var(--ouro2); margin-top:8px; font-size:1rem}

/* ===== REVEAL cinematográfico — entrada em GAUSSIAN BLUR ===== */
.reveal{opacity:0; transform:translateY(40px); filter:blur(9px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter .95s ease}
.reveal.in{opacity:1; transform:none; filter:blur(0)}
.cards .reveal{transition-delay:calc(var(--i,0)*70ms)}

/* mídias revelam do desfoque COM zoom-out + máscara (imagem dominando) */
.feature .feature-media{clip-path:inset(0 round 20px);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1), filter 1.1s ease, clip-path 1.2s cubic-bezier(.76,0,.24,1)}
.feature:not(.in) .feature-media{transform:scale(1.13); filter:blur(8px); clip-path:inset(0 0 22% 0 round 20px)}
.niche .niche-vid, .niche .px-img{transition:transform 1.4s cubic-bezier(.16,1,.3,1), filter 1.1s ease}
.niche:not(.in) .niche-vid, .niche:not(.in) .px-img{transform:scale(1.18); filter:blur(5px)}
.folio-card.photo{transition:transform 1.5s cubic-bezier(.16,1,.3,1), filter 1.1s ease}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; filter:none; transition:none}
  .feature:not(.in) .feature-media, .niche:not(.in) .niche-vid, .niche:not(.in) .px-img{transform:none; filter:none; clip-path:none}
  .scroll-cue span,.pulse,.rec i,.pov-photo,.hero-layer{animation:none}
}

/* ===================== POPUP DE CAPTAÇÃO ===================== */
.modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease}
.modal.open{opacity:1; visibility:visible}
.modal-backdrop{position:absolute; inset:0; background:rgba(4,9,18,.72); backdrop-filter:blur(7px) saturate(115%); -webkit-backdrop-filter:blur(7px) saturate(115%)}
.modal-card{position:relative; z-index:1; width:100%; max-width:560px; max-height:92svh; overflow:auto;
  background:linear-gradient(180deg, rgba(18,38,58,.96), rgba(9,20,33,.97));
  border:1px solid rgba(200,168,107,.34); border-radius:20px;
  box-shadow:0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  padding:clamp(24px,4.5vw,40px); transform:translateY(18px) scale(.985); transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.modal.open .modal-card{transform:none}
.modal-x{position:absolute; top:14px; right:16px; width:38px; height:38px; border-radius:50%;
  background:rgba(251,249,245,.06); border:1px solid rgba(251,249,245,.16); color:var(--branco);
  font-size:15px; cursor:pointer; transition:.25s; line-height:1}
.modal-x:hover{background:rgba(200,168,107,.18); border-color:var(--ouro)}

.modal-head{margin-bottom:22px; padding-right:30px}
.modal-head h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,4.5vw,2.3rem); line-height:1.05; color:#fff; margin:6px 0 8px}
.modal-sub{color:var(--cinza); font-weight:300; font-size:.96rem; line-height:1.55}

.modal-form .field{margin-bottom:16px}
.modal-form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.modal-form .field-sm{max-width:100%}
@media(max-width:480px){ .modal-form .row{grid-template-columns:1fr} }
.modal-form label{display:block; font-family:var(--sans); font-size:.82rem; letter-spacing:.04em; color:var(--ouro2); margin-bottom:9px}
.modal-form label .opt{color:var(--cinza); font-size:.76rem; letter-spacing:0}
.modal-form input, .modal-form textarea{width:100%; font-family:var(--sans); font-size:.96rem; color:#fff;
  background:rgba(5,12,22,.55); border:1px solid rgba(200,168,107,.22); border-radius:11px; padding:13px 15px; transition:.25s}
.modal-form input::placeholder{color:rgba(159,176,192,.6)}
.modal-form input:focus, .modal-form textarea:focus{outline:none; border-color:var(--ouro); background:rgba(5,12,22,.8); box-shadow:0 0 0 3px rgba(200,168,107,.14)}

.chips{display:flex; flex-wrap:wrap; gap:9px}
.chips button{font-family:var(--sans); font-size:.85rem; letter-spacing:.01em; color:var(--branco);
  background:rgba(251,249,245,.05); border:1px solid rgba(251,249,245,.16); border-radius:40px; padding:9px 16px; cursor:pointer;
  transition:transform .2s, background .25s, border-color .25s, color .25s}
.chips button:hover{border-color:rgba(200,168,107,.55); transform:translateY(-1px)}
.chips button.on{background:linear-gradient(120deg, rgba(200,168,107,.95), rgba(231,212,174,.9)); border-color:var(--ouro); color:#1a1207; font-weight:500}

.modal-error{color:#f1b8a8; font-size:.86rem; margin:2px 0 12px; padding:10px 13px; background:rgba(190,80,60,.12); border:1px solid rgba(190,80,60,.34); border-radius:9px}
.modal-actions{margin-top:20px}
.modal-actions.col{display:flex; flex-direction:column; gap:12px}
.modal-actions .btn{width:100%; text-align:center}
.modal-fine{margin-top:14px; text-align:center; color:var(--cinza); font-size:.78rem; letter-spacing:.02em}

/* sucesso */
.modal-done{text-align:center; padding:8px 0}
.done-mark{width:66px; height:66px; border-radius:50%; margin:6px auto 18px; display:grid; place-items:center;
  font-size:30px; color:#1a1207; background:linear-gradient(120deg, var(--ouro), var(--ouro2));
  box-shadow:0 14px 40px rgba(200,168,107,.4)}
.modal-done h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,5vw,2.2rem); color:#fff; margin-bottom:8px}
.modal-done .modal-sub{max-width:42ch; margin:0 auto 6px}
.modal-textlink{display:block; margin:16px auto 0; background:none; border:none; color:var(--cinza); font-family:var(--sans); font-size:.84rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:.25s}
.modal-textlink:hover{color:var(--ouro)}

.modal-card:focus{outline:none}
body.modal-lock{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .modal, .modal-card{transition:none}
}

/* ===================== PARALLAX ===================== */
.px-wrap{position:relative; overflow:hidden}
.px-img{position:absolute; left:0; right:0; top:-12%; height:124%;
  background-size:cover; background-position:center; will-change:transform; transform:translate3d(0,0,0)}

/* ===================== NICHOS ===================== */
.nichos .section-head{max-width:46ch}
.niche-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.niche-grid > .niche:nth-child(1){grid-column:span 7}
.niche-grid > .niche:nth-child(2){grid-column:span 5}
.niche-grid > .niche:nth-child(3){grid-column:span 5}
.niche-grid > .niche:nth-child(4){grid-column:span 7}
.niche-grid > .niche:nth-child(5){grid-column:span 6}
.niche-grid > .niche:nth-child(6){grid-column:span 6}
@media(max-width:760px){ .niche-grid{grid-template-columns:1fr} .niche-grid > .niche{grid-column:span 1 !important} }
.niche{position:relative; height:clamp(380px,52vh,600px); border-radius:20px; overflow:hidden; border:1px solid rgba(200,168,107,.13); box-shadow:0 34px 80px rgba(0,0,0,.44)}
.niche::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(6,12,22,.10) 0%, rgba(6,12,22,.34) 50%, rgba(4,9,16,.9) 100%)}
.niche .px-img{transition:transform .9s ease}
.niche:hover .px-img{transform:scale(1.05)}
.niche-cap{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:30px 32px}
.niche-cap span{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro2)}
.niche-cap h3{font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2rem); color:#fff; margin-top:6px; line-height:1.1}

/* ===================== SERVIÇOS = IMERSÕES ===================== */
.servicos .section-head{max-width:46ch}
.features{display:flex; flex-direction:column; gap:clamp(46px,8vh,96px)}
.feature{display:grid; grid-template-columns:1.36fr .64fr; gap:clamp(30px,4vw,68px); align-items:center}
.feature.reverse .feature-media{order:2}
@media(max-width:820px){ .feature, .feature.reverse{grid-template-columns:1fr} .feature.reverse .feature-media{order:0} }
.feature-media{position:relative; height:clamp(440px,74vh,760px); border-radius:20px; overflow:hidden; border:1px solid rgba(200,168,107,.14); box-shadow:0 44px 100px rgba(0,0,0,.55)}
.feature-media .feat-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.feature-media::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(6,12,22,.32),transparent 55%)}
.feature-media.vertical{max-width:336px; height:clamp(440px,66vh,600px); margin:0 auto}
.feature-tag{position:absolute; z-index:3; top:18px; left:18px; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--noite); background:var(--ouro); padding:6px 13px; border-radius:30px; font-weight:600}
.feature-num{font-family:var(--serif); font-size:1rem; letter-spacing:.2em; color:var(--ouro)}
.feature-body h3{font-family:var(--serif); font-size:clamp(2rem,4.4vw,3rem); color:#fff; margin:8px 0 16px; line-height:1.02}
.feature-body p{color:#c8d3dd; font-weight:300; font-size:1.05rem; max-width:44ch}
.feature-note{margin-top:14px; font-size:1rem; color:var(--ouro2); font-style:italic; font-family:var(--serif)}

/* moldura "site" (web-experiência) */
.site-frame .browser-bar{position:absolute; z-index:3; top:0; left:0; right:0; height:34px; display:flex; align-items:center; gap:7px; padding:0 14px; background:rgba(8,16,26,.92); border-bottom:1px solid rgba(255,255,255,.08)}
.site-frame .browser-bar i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22)}
.site-frame .browser-bar em{margin-left:10px; font-style:normal; font-size:.72rem; color:rgba(255,255,255,.55); letter-spacing:.04em}

/* ===================== MÉTODO ===================== */
.metodo .section-head{max-width:40ch}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--linha)}
@media(max-width:820px){ .steps{grid-template-columns:1fr 1fr; row-gap:0} }
@media(max-width:480px){ .steps{grid-template-columns:1fr} }
.step{background:none; padding:40px 36px 30px 0; position:relative}
.step + .step{padding-left:36px; border-left:1px solid var(--linha)}
.step::before{content:""; position:absolute; top:-1px; left:0; width:48px; height:2px; background:var(--ouro)}
.step + .step::before{left:36px}
.step-n{font-family:var(--serif); font-size:3rem; color:var(--ouro); opacity:.34; display:block; line-height:1}
.step h3{font-size:1.42rem; color:#fff; margin:16px 0 12px}
.step p{color:#b8c6d2; font-weight:300; font-size:.94rem}
@media(max-width:820px){ .step:nth-child(3){border-left:0} .step:nth-child(3)::before{left:0} }
@media(max-width:480px){ .step + .step{border-left:0; padding-left:0} .step + .step::before{left:0} }

/* CTA do portfólio */
.folio-cta{display:inline-block; margin-top:18px; color:var(--ouro); font-family:var(--sans); font-size:.85rem; letter-spacing:.06em; border-bottom:1px solid var(--ouro); padding-bottom:2px; transition:.3s}
.folio-cta:hover{color:var(--ouro2); border-color:var(--ouro2)}

@media (prefers-reduced-motion: reduce){
  .px-img{transform:none!important}
}

/* ===================== NICHOS: vídeo one-shot por tipo ===================== */
.niche-hint{font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ouro2); margin:-34px 0 22px}
.niche-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform 1s ease}
.niche:hover .niche-vid{transform:scale(1.04)}
.niche-tag{position:absolute; z-index:2; top:16px; left:16px; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--noite); background:var(--ouro); padding:5px 12px; border-radius:30px; font-weight:600}
@media(max-width:760px){ .niche-hint{margin-top:-18px} }

/* ===================== NICHOS: GALERIA FULL-BLEED (parallax + fade degradê + título em máscara) ===================== */
.niche-gallery{width:100vw; margin-left:calc(50% - 50vw); margin-top:26px; display:flex; flex-direction:column; gap:clamp(20px,4vh,60px)}
.niche-scene{position:relative; height:clamp(460px,76vh,840px); overflow:hidden}
.ns-media{position:absolute; inset:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%)}
.ns-vid{position:absolute; left:0; right:0; top:-14%; height:128%; width:100%; object-fit:cover; will-change:transform}
.ns-media::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(4,9,16,.84) 0%, rgba(4,9,16,.34) 38%, transparent 64%),
             linear-gradient(180deg, transparent 52%, rgba(4,9,16,.5) 100%)}
.niche-scene.right .ns-media::after{background:linear-gradient(270deg, rgba(4,9,16,.84) 0%, rgba(4,9,16,.34) 38%, transparent 64%), linear-gradient(180deg, transparent 52%, rgba(4,9,16,.5) 100%)}
.ns-copy{position:absolute; z-index:2; bottom:15%; left:0; max-width:min(640px,82vw); padding:0 clamp(24px,7vw,120px)}
.niche-scene.right .ns-copy{left:auto; right:0; text-align:right}
.ns-tag{display:inline-block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--noite); background:var(--ouro); padding:6px 14px; border-radius:30px; font-weight:600}
.ns-label{display:block; font-family:var(--sans); font-size:.82rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ouro2); margin:20px 0 10px}
.ns-title{font-family:var(--serif); font-weight:600; font-size:clamp(2.3rem,6.4vw,5.6rem); line-height:1; color:#fff; text-shadow:0 8px 60px rgba(0,0,0,.55)}
.ns-title{overflow:hidden}
.ns-title > span{display:block; transform:translateY(118%); transition:transform 1.2s cubic-bezier(.76,0,.24,1); transition-delay:.1s}
.niche-scene.in .ns-title > span{transform:none}
@media(max-width:640px){ .niche-scene{height:66vh} .niche-scene.right .ns-copy{text-align:left} }
@media (prefers-reduced-motion: reduce){ .ns-title > span{transform:none} }

/* ===================== FAIXA DRAMÁTICA full-bleed ===================== */
.band{position:relative; width:100%; min-height:clamp(440px,70vh,660px); display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha)}
.band .band-img{z-index:0}
.band::after{content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(120% 100% at 50% 45%, rgba(4,9,18,.40), rgba(4,9,18,.78))}
.band-inner{position:relative; z-index:2; padding:48px 22px; max-width:780px}
.band-eyebrow{font-family:var(--sans); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ouro2); margin-bottom:20px}
.band-title{font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,7.4vw,5.4rem); line-height:.98; color:#fff; text-shadow:0 8px 60px rgba(0,0,0,.55); margin-bottom:30px}
.band-title em{font-style:italic; color:var(--ouro)}

/* ===================== MARCA (ícone drone) ===================== */
.wordmark{display:inline-flex; align-items:center}
.wm-mark{width:1.15em; height:1.15em; color:var(--ouro); margin-right:.5em; flex:0 0 auto}
.hero-mark{width:58px; height:58px; color:var(--ouro); display:block; margin:0 0 22px; filter:drop-shadow(0 6px 26px rgba(200,168,107,.4))}
.hero-content{text-align:left}

/* ===================== /UAU — ABERTURA ===================== */
.loader{position:fixed; inset:0; z-index:10000; background:var(--noite); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
.loader.done{transform:translateY(-101%)}
.loader-mark{width:74px; height:74px; color:var(--ouro); animation:spin 3.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-word{font-family:var(--serif); font-weight:600; font-size:1.7rem; letter-spacing:.16em; color:#fff}
.loader-word i{font-style:normal; color:var(--ouro)}
.lbar{width:180px; height:2px; background:rgba(200,168,107,.18); overflow:hidden}
.lbar i{display:block; height:100%; width:0; background:var(--ouro); animation:ld 1.35s cubic-bezier(.6,0,.2,1) forwards}
@keyframes ld{to{width:100%}}

/* ===================== /UAU — PROGRESSO DE SCROLL ===================== */
.scroll-prog{position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--ouro-d),var(--ouro) 60%,var(--ouro2)); z-index:9000; box-shadow:0 0 12px rgba(200,168,107,.6)}

/* ===================== /UAU — GRÃO DE FILME ===================== */
.grain{position:fixed; inset:0; z-index:8000; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ===================== /UAU — CURSOR ===================== */
.cursor{position:fixed; top:0; left:0; width:32px; height:32px; border:1px solid rgba(200,168,107,.65); border-radius:50%; pointer-events:none; z-index:9500; transition:width .25s ease, height .25s ease, background .25s ease, border-color .25s ease; will-change:transform}
.cursor.grow{width:62px; height:62px; background:rgba(200,168,107,.12); border-color:var(--ouro)}
@media (pointer:coarse){ .cursor{display:none} }

/* ===================== /UAU — ENTRADA DA HERO ===================== */
.hero-content > *{opacity:0; transform:translateY(26px); transition:opacity .95s cubic-bezier(.76,0,.24,1), transform 1.1s cubic-bezier(.76,0,.24,1)}
body.ready .hero-content > *{opacity:1; transform:none}
body.ready .hero-content > *:nth-child(2){transition-delay:.06s}
body.ready .hero-content > *:nth-child(3){transition-delay:.12s}
body.ready .hero-content > *:nth-child(4){transition-delay:.18s}
body.ready .hero-content > *:nth-child(5){transition-delay:.24s}
body.ready .hero-content > *:nth-child(6){transition-delay:.30s}

@media (prefers-reduced-motion: reduce){
  .loader{display:none!important}
  .loader-mark{animation:none}
  .hero-content > *{opacity:1!important; transform:none!important}
  .cursor{display:none}
  .scroll-prog{display:none}
}


/* ==================================================================
   DOBRAS CINEMATOGRAFICAS (workflow 4 diretores de arte)
   ================================================================== */

/* ---- FOLD: servicos ---- */
/* ===== 02 · SERVIÇOS — split-bleed cinematográfico ===== */
#servicos.servicos{max-width:none; padding-left:0; padding-right:0}
#servicos .section-head{max-width:46ch; margin-left:auto; margin-right:auto; padding:0 clamp(20px,5vw,56px)}

#servicos .sv-reel{display:flex; flex-direction:column; gap:clamp(46px,9vh,120px); margin-top:clamp(48px,8vh,96px)}

/* --- cada cena: mídia sangra numa borda, texto ocupa o vazio nobre --- */
#servicos .sv-scene{position:relative; width:100vw; margin-left:calc(50% - 50vw);
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); align-items:center;
  gap:clamp(28px,4vw,72px)}
#servicos .sv-scene.right{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
#servicos .sv-scene.right .sv-media{order:2}
#servicos .sv-scene.right .sv-copy{order:1}

/* número-fantasma colossal atrás do título */
#servicos .sv-ghost{position:absolute; z-index:0; top:50%; transform:translateY(-54%);
  font-family:var(--serif); font-weight:600; line-height:.8;
  font-size:clamp(11rem,26vw,30rem); color:transparent;
  -webkit-text-stroke:1px rgba(200,168,107,.14); pointer-events:none; user-select:none;
  letter-spacing:-.02em; opacity:0; transition:opacity 1.4s ease .25s, transform 1.6s cubic-bezier(.16,1,.3,1)}
#servicos .sv-scene .sv-ghost{left:clamp(2vw,5vw,7vw); transform:translateY(-40%)}
#servicos .sv-scene.right .sv-ghost{left:auto; right:clamp(2vw,5vw,7vw)}
#servicos .sv-scene.in .sv-ghost{opacity:1; transform:translateY(-54%)}
#servicos .sv-scene.right.in .sv-ghost{transform:translateY(-54%)}

/* --- MÍDIA: sangra até a borda da tela do lado da cena --- */
#servicos .sv-media{position:relative; z-index:1; align-self:stretch;
  min-height:clamp(360px,62vh,640px); overflow:hidden;
  clip-path:inset(0 0 0 0);
  mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 100%)}
#servicos .sv-scene.right .sv-media{
  mask-image:linear-gradient(90deg,#000 0%,#000 91%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 91%,transparent 100%)}

/* WIPE LATERAL na revelação (alterna direção) — diferente do fade vertical da galeria */
#servicos .sv-media{transition:clip-path 1.25s cubic-bezier(.76,0,.24,1)}
#servicos .sv-scene:not(.in) .sv-media{clip-path:inset(0 82% 0 0)}
#servicos .sv-scene.right:not(.in) .sv-media{clip-path:inset(0 0 0 82%)}

/* imagem/vídeo de fundo p/ parallax (filho de wrapper overflow:hidden) */
#servicos .sv-px{position:absolute; left:0; right:0; top:-14%; height:128%;
  background-size:cover; background-position:center; object-fit:cover;
  transition:transform 1.5s cubic-bezier(.16,1,.3,1), filter 1.1s ease}
#servicos .sv-scene:not(.in) .sv-px{transform:scale(1.12); filter:blur(6px)}
#servicos video.sv-feat{position:absolute; left:0; right:0; top:-14%; width:100%; height:128%; object-fit:cover; display:block}
#servicos .sv-vid .sv-px{overflow:hidden}

/* scrim lateral p/ legibilidade do texto sobre a foto */
#servicos .sv-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent 30%,rgba(4,9,16,.5) 82%,rgba(4,9,16,.82) 100%)}
#servicos .sv-scene.right .sv-scrim{background:linear-gradient(90deg,rgba(4,9,16,.82) 0%,rgba(4,9,16,.5) 18%,transparent 70%)}
#servicos .sv-dark .sv-scrim{background:linear-gradient(90deg,transparent 24%,rgba(4,9,16,.6) 78%,rgba(4,9,16,.9) 100%)}
#servicos .sv-dark.right .sv-scrim{background:linear-gradient(90deg,rgba(4,9,16,.9) 0%,rgba(4,9,16,.6) 22%,transparent 76%)}

/* etiqueta */
#servicos .sv-tag{position:absolute; z-index:3; top:22px; left:22px;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--noite); background:var(--ouro); padding:7px 14px; border-radius:30px; font-weight:600}
#servicos .sv-scene.right .sv-tag{left:auto; right:22px}

/* barra de navegador (item 05) */
#servicos .sv-site{border-top:1px solid var(--linha)}
#servicos .sv-bar{position:absolute; z-index:3; top:0; left:0; right:0; height:38px;
  display:flex; align-items:center; gap:8px; padding:0 16px;
  background:linear-gradient(180deg,rgba(9,20,33,.92),rgba(9,20,33,.55)); backdrop-filter:blur(4px)}
#servicos .sv-bar i{width:9px; height:9px; border-radius:50%; background:rgba(231,212,174,.42)}
#servicos .sv-bar em{margin-left:10px; font-style:normal; font-family:var(--sans);
  font-size:.66rem; letter-spacing:.06em; color:var(--ouro2); opacity:.85}

/* --- COPY no vazio nobre --- */
#servicos .sv-copy{position:relative; z-index:2; padding:clamp(6px,2vw,20px) clamp(24px,6vw,84px)}
#servicos .sv-scene.right .sv-copy{padding-left:clamp(20px,5vw,56px)}
#servicos .sv-idx{display:inline-block; font-family:var(--sans); font-weight:500;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ouro); margin-bottom:16px}
#servicos .sv-idx::before{content:""; display:inline-block; width:26px; height:1px;
  background:var(--ouro); vertical-align:middle; margin-right:12px; opacity:.6}

/* título revela em MÁSCARA */
#servicos .sv-title{overflow:hidden; margin:0 0 16px;
  font-size:clamp(2rem,3.6vw,3.1rem); color:#fff; line-height:1.02}
#servicos .sv-title>span{display:inline-block; transform:translateY(118%);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1) .12s}
#servicos .sv-scene.in .sv-title>span{transform:none}

#servicos .sv-lead{font-family:var(--sans); font-weight:300; color:#d9e2ea;
  font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.6; max-width:44ch; margin:0 0 18px}
#servicos .sv-note{position:relative; font-family:var(--sans); font-weight:300;
  font-size:.86rem; line-height:1.55; color:var(--cinza); max-width:42ch;
  padding-left:16px; margin:0 0 24px; border-left:1px solid var(--linha)}

/* CTA discreto → abre popup */
#servicos .sv-cta{display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; color:var(--ouro2); transition:gap .35s ease, color .3s ease}
#servicos .sv-cta i{position:relative; width:34px; height:1px; background:var(--ouro); display:inline-block; transition:width .35s ease}
#servicos .sv-cta i::after{content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid var(--ouro); border-right:1px solid var(--ouro); transform:rotate(45deg)}
#servicos .sv-cta:hover{color:var(--ouro); gap:18px}
#servicos .sv-cta:hover i{width:48px}

/* --- item 06: formato TELEFONE 9:16 --- */
#servicos .sv-phone .sv-media{background:transparent; min-height:clamp(420px,68vh,660px);
  display:flex; align-items:center; justify-content:center; overflow:visible;
  mask-image:none; -webkit-mask-image:none}
#servicos .sv-phone:not(.in) .sv-media{clip-path:none}
#servicos .sv-device{position:relative; width:clamp(220px,20vw,286px); aspect-ratio:9/16;
  border-radius:34px; overflow:hidden; background:var(--noite2);
  border:1px solid rgba(231,212,174,.28);
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 8px rgba(9,20,33,.9);
  clip-path:inset(0 round 34px); transition:clip-path 1.25s cubic-bezier(.76,0,.24,1), transform 1.2s cubic-bezier(.16,1,.3,1)}
#servicos .sv-phone:not(.in) .sv-device{clip-path:inset(0 0 82% 0 round 34px); transform:translateY(30px)}
#servicos .sv-device .sv-px{top:-8%; height:116%; border-radius:0}
#servicos .sv-notch{position:absolute; z-index:4; top:12px; left:50%; transform:translateX(-50%);
  width:78px; height:6px; border-radius:6px; background:rgba(4,9,16,.7)}
#servicos .sv-play{position:absolute; z-index:4; inset:0; margin:auto; width:58px; height:58px;
  border-radius:50%; background:rgba(9,20,33,.42); border:1px solid rgba(231,212,174,.5);
  backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center}
#servicos .sv-play b{display:block; width:0; height:0; margin-left:3px;
  border-left:14px solid var(--ouro2); border-top:9px solid transparent; border-bottom:9px solid transparent}

/* ===== MOBILE — empilha e continua lindo ===== */
@media (max-width:760px){
  #servicos .sv-reel{gap:clamp(40px,7vh,64px); margin-top:44px}
  #servicos .sv-scene, #servicos .sv-scene.right{grid-template-columns:1fr; gap:0}
  #servicos .sv-scene.right .sv-media, #servicos .sv-scene.right .sv-copy{order:initial}
  #servicos .sv-media{min-height:56vh;
    mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
  #servicos .sv-scene.right .sv-media{
    mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
  #servicos .sv-scene:not(.in) .sv-media{clip-path:inset(0 0 60% 0)}
  #servicos .sv-scene.right:not(.in) .sv-media{clip-path:inset(0 0 60% 0)}
  #servicos .sv-scrim,
  #servicos .sv-scene.right .sv-scrim,
  #servicos .sv-dark .sv-scrim,
  #servicos .sv-dark.right .sv-scrim{background:linear-gradient(180deg,transparent 40%,rgba(4,9,16,.5) 100%)}
  #servicos .sv-ghost, #servicos .sv-scene.right .sv-ghost{font-size:34vw; left:16px; right:auto; top:-6px; transform:none}
  #servicos .sv-scene.in .sv-ghost, #servicos .sv-scene.right.in .sv-ghost{transform:none}
  #servicos .sv-copy, #servicos .sv-scene.right .sv-copy{padding:26px clamp(20px,6vw,28px) 0}
  #servicos .sv-title{font-size:clamp(1.8rem,8vw,2.4rem)}
  #servicos .sv-phone .sv-media{min-height:70vh}
  #servicos .sv-device{width:min(66vw,260px)}
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion:reduce){
  #servicos .sv-scene .sv-media,
  #servicos .sv-scene.right .sv-media{clip-path:none; transition:none;
    mask-image:none; -webkit-mask-image:none}
  #servicos .sv-scene:not(.in) .sv-media,
  #servicos .sv-scene.right:not(.in) .sv-media{clip-path:none}
  #servicos .sv-px, #servicos .sv-scene:not(.in) .sv-px{transform:none; filter:none; transition:none}
  #servicos .sv-ghost, #servicos .sv-scene.in .sv-ghost{opacity:1; transform:translateY(-54%); transition:none}
  #servicos .sv-title>span, #servicos .sv-scene.in .sv-title>span{transform:none; transition:none}
  #servicos .sv-device, #servicos .sv-phone:not(.in) .sv-device{clip-path:inset(0 round 34px); transform:none; transition:none}
  #servicos .sv-cta, #servicos .sv-cta i{transition:none}
}

/* ---- FOLD: experiencia ---- */
/* ===== 04 — A EXPERIÊNCIA · Filmstrip do arco do dia ===== */
#experiencia{position:relative; padding-top:clamp(70px,10vh,120px); padding-bottom:clamp(40px,7vh,90px); overflow:visible}
#experiencia .section-head{margin-bottom:clamp(30px,5vh,64px)}

/* trilho contínuo full-bleed que rompe a margem da .section */
#experiencia .filmstrip{
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw);
  display:flex; flex-direction:column;
}

/* espinha da linha do tempo (nervura dourada à esquerda) */
#experiencia .strip-spine{position:absolute; top:0; bottom:0; left:clamp(26px,7vw,120px); width:1px; z-index:4; pointer-events:none}
#experiencia .spine-line{position:absolute; inset:0; width:1px;
  background:linear-gradient(180deg, transparent 0%, var(--ouro-d) 8%, var(--ouro) 50%, var(--ouro-d) 92%, transparent 100%);
  opacity:.4; transform:scaleY(0); transform-origin:top; transition:transform 2.2s cubic-bezier(.16,1,.3,1) .2s, opacity 1s ease}
#experiencia .film.in .spine-line{transform:scaleY(1)}
#experiencia .filmstrip:hover .spine-line{transform:scaleY(1)}

/* cada cena: full-bleed, sobreposta à seguinte p/ FUNDIR uma na outra */
#experiencia .film{position:relative; min-height:clamp(560px,92vh,1020px); display:flex; align-items:center; isolation:isolate}
#experiencia .film + .film{margin-top:clamp(-90px,-9vh,-40px)}   /* sobreposição = filmstrip contínuo */

/* moldura da mídia com FADE EM DEGRADÊ dissolvendo no fundo escuro (topo e base) */
#experiencia .film-media{position:absolute; inset:0; z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 84%,transparent 100%)}
#experiencia .film:first-child .film-media{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%)}
#experiencia .film:last-child .film-media{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 100%)}

#experiencia .film-img{position:absolute; left:0; right:0; top:-14%; height:128%; width:100%;
  background-size:cover; background-position:center; will-change:transform}

/* SCRIM/atmosfera muda de cor por horário (legibilidade + temperatura da hora) */
#experiencia .film-scrim{position:absolute; inset:0; z-index:1; pointer-events:none}
#experiencia .phase-dawn   .film-scrim{background:
  linear-gradient(90deg, rgba(4,9,16,.9) 0%, rgba(10,7,4,.5) 34%, rgba(120,60,44,.14) 62%, transparent 78%),
  linear-gradient(180deg, rgba(60,26,30,.28) 0%, transparent 34%, rgba(4,9,16,.42) 100%),
  radial-gradient(120% 80% at 78% 22%, rgba(214,138,96,.20), transparent 60%)}
#experiencia .phase-golden .film-scrim{background:
  linear-gradient(90deg, rgba(4,9,16,.9) 0%, rgba(14,9,3,.5) 34%, rgba(150,104,40,.16) 60%, transparent 78%),
  linear-gradient(180deg, rgba(70,44,12,.22) 0%, transparent 32%, rgba(4,9,16,.44) 100%),
  radial-gradient(120% 80% at 80% 30%, rgba(231,203,131,.22), transparent 58%)}
#experiencia .phase-blue   .film-scrim{background:
  linear-gradient(90deg, rgba(4,9,16,.92) 0%, rgba(6,14,28,.52) 34%, rgba(24,52,96,.2) 60%, transparent 80%),
  linear-gradient(180deg, rgba(14,32,62,.3) 0%, transparent 34%, rgba(4,9,16,.5) 100%),
  radial-gradient(120% 82% at 80% 34%, rgba(60,104,176,.26), transparent 58%)}
#experiencia .phase-night  .film-scrim{background:
  linear-gradient(90deg, rgba(3,6,12,.94) 0%, rgba(4,9,18,.62) 36%, rgba(8,16,32,.28) 62%, rgba(4,9,16,.14) 100%),
  linear-gradient(180deg, rgba(4,8,16,.5) 0%, transparent 40%, rgba(3,6,12,.62) 100%),
  radial-gradient(120% 80% at 78% 26%, rgba(200,168,107,.14), transparent 56%)}

/* bloco de texto, ancorado à espinha */
#experiencia .film-copy{position:relative; z-index:3;
  max-width:min(620px,86vw);
  margin-left:calc(clamp(26px,7vw,120px) + clamp(28px,4vw,64px));
  padding:clamp(20px,4vh,48px) clamp(20px,4vw,40px) clamp(20px,4vh,48px) 0}

/* nó da linha do tempo alinhado à hora */
#experiencia .film-node{position:absolute; left:calc((clamp(26px,7vw,120px) + clamp(28px,4vw,64px)) * -1); top:.55em;
  width:11px; height:11px; margin-left:-5px; border-radius:50%;
  background:var(--noite); border:1px solid var(--ouro);
  box-shadow:0 0 0 4px rgba(11,27,43,.9), 0 0 26px rgba(200,168,107,0); transition:box-shadow 1s ease .3s}
#experiencia .film.in .film-node{box-shadow:0 0 0 4px rgba(11,27,43,.9), 0 0 26px rgba(200,168,107,.55)}
#experiencia .film-node::after{content:""; position:absolute; inset:2px; border-radius:50%; background:var(--ouro); transform:scale(0); transition:transform .8s cubic-bezier(.76,0,.24,1) .35s}
#experiencia .film.in .film-node::after{transform:scale(1)}

/* HORA — numeral grande, tabular, tracking largo (feel MONO) */
#experiencia .film-hour{display:flex; align-items:baseline; gap:.02em; margin-bottom:14px;
  font-family:var(--sans); font-weight:300; line-height:.9;
  font-size:clamp(3.4rem,9vw,7rem); letter-spacing:.02em; color:#fff;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  text-shadow:0 10px 60px rgba(0,0,0,.6)}
#experiencia .film-hour b{font-weight:300}
#experiencia .film-hour s{text-decoration:none; color:var(--ouro); font-weight:300; margin:0 .02em;
  opacity:.9; animation:expBlink 3.4s steps(1) infinite}
@keyframes expBlink{0%,62%{opacity:.9}63%,100%{opacity:.28}}
#experiencia .phase-dawn  .film-hour s,
#experiencia .phase-night .film-hour s{color:var(--ouro2)}

/* selo de fase */
#experiencia .film-phase{display:inline-block; font-family:var(--sans); font-weight:500;
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ouro2);
  padding-bottom:12px; border-bottom:1px solid var(--linha); margin-bottom:18px}

/* TÍTULO revela em MÁSCARA */
#experiencia .film-title{overflow:hidden; font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem,7vw,5.4rem); line-height:1; color:#fff; margin-bottom:16px;
  text-shadow:0 8px 60px rgba(0,0,0,.55)}
#experiencia .film-title > span{display:block; transform:translateY(118%);
  transition:transform 1.2s cubic-bezier(.76,0,.24,1) .12s}
#experiencia .film.in .film-title > span{transform:none}

#experiencia .film-text{max-width:44ch; color:rgba(245,239,230,.94); font-weight:300;
  font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.62; text-shadow:0 3px 24px rgba(0,0,0,.5)}

/* zoom-out + desfoque na imagem na entrada (ancorado no reveal do site) */
#experiencia .film-img{transition:transform 1.6s cubic-bezier(.16,1,.3,1), filter 1.2s ease}
#experiencia .film:not(.in) .film-img{transform:scale(1.16); filter:blur(6px)}

/* fecho da seção */
#experiencia .film-close{position:relative; z-index:3; text-align:center;
  max-width:640px; margin:clamp(24px,5vh,70px) auto 0; padding:0 clamp(20px,5vw,40px)}
#experiencia .film-close-line{font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.4rem); color:#fff; line-height:1.2; margin-bottom:26px}
#experiencia .film-close .btn{margin-top:4px}

/* ---- mobile: empilha e continua lindo ---- */
@media(max-width:760px){
  #experiencia .strip-spine{left:20px}
  #experiencia .film{min-height:76vh}
  #experiencia .film + .film{margin-top:-40px}
  #experiencia .film-copy{margin-left:calc(20px + 26px); padding-right:20px; max-width:none}
  #experiencia .film-node{left:calc((20px + 26px) * -1)}
  #experiencia .film-hour{font-size:clamp(3rem,17vw,5rem)}
  #experiencia .film-title{font-size:clamp(2.3rem,11vw,3.4rem)}
}

/* ---- reduz movimento ---- */
@media (prefers-reduced-motion: reduce){
  #experiencia .film + .film{margin-top:0}
  #experiencia .film-media,
  #experiencia .film:first-child .film-media,
  #experiencia .film:last-child .film-media{-webkit-mask-image:none; mask-image:none}
  #experiencia .film-img{transform:none!important; filter:none!important}
  #experiencia .film-title > span{transform:none}
  #experiencia .spine-line{transform:scaleY(1)}
  #experiencia .film-node::after{transform:scale(1)}
  #experiencia .film-hour s{animation:none; opacity:.9}
}

/* ---- FOLD: metodo ---- */
/* ===== 03 · MÉTODO — timeline editorial sobre céu azul ===== */
#metodo{position:relative; overflow:hidden; isolation:isolate;
  padding-top:clamp(96px,13vh,180px); padding-bottom:clamp(96px,13vh,180px)}

/* fundo full-bleed: céu escurecido + desfocado, com parallax */
#metodo .metodo-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  width:100vw; margin-left:calc(50% - 50vw)}
#metodo .metodo-sky{position:absolute; left:0; right:0; top:-14%; height:128%; width:100%;
  object-fit:cover; filter:blur(10px) saturate(.72) brightness(.42);
  transform:translate3d(0,0,0); will-change:transform;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%)}
#metodo .metodo-scrim{position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(11,27,43,.30) 0%, rgba(11,27,43,.72) 60%, rgba(11,27,43,.94) 100%),
    linear-gradient(180deg, var(--noite) 0%, rgba(11,27,43,.35) 22%, rgba(11,27,43,.35) 78%, var(--noite) 100%)}

#metodo .metodo-inner{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding-left:26px; padding-right:26px}
#metodo .section-head{margin-bottom:clamp(56px,8vh,96px)}

/* ---- a timeline vertical ---- */
#metodo .metodo-timeline{list-style:none; margin:0; padding:0; position:relative;
  max-width:820px}
/* o fio dourado que conecta os passos */
#metodo .metodo-timeline::before{content:""; position:absolute; z-index:0;
  left:calc(clamp(3.6rem,9vw,6.6rem) + 22px); top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, transparent 0%, var(--ouro-d) 8%, var(--ouro) 50%, var(--ouro-d) 92%, transparent 100%);
  transform:scaleY(0); transform-origin:top center;
  transition:transform 1.6s cubic-bezier(.76,0,.24,1) .1s; opacity:.9}
/* o fio "desenha" quando o cabeçalho entra (primeiro reveal da seção) */
#metodo .section-head.in ~ .metodo-timeline::before{transform:scaleY(1)}

#metodo .mstep{position:relative; display:grid;
  grid-template-columns:clamp(3.6rem,9vw,6.6rem) 1fr;
  gap:clamp(20px,4vw,48px); align-items:start;
  padding:clamp(26px,4.4vh,54px) 0}
#metodo .mstep + .mstep{border-top:1px solid var(--linha)}

/* stagger em cascata por passo (além do reveal base) */
#metodo .mstep.reveal{transition-delay:calc(var(--d,0) * 110ms)}

/* nó dourado no fio, alinhado ao numeral */
#metodo .mstep-node{position:absolute; z-index:2; top:calc(clamp(26px,4.4vh,54px) + .55em);
  left:calc(clamp(3.6rem,9vw,6.6rem) + 22px); width:11px; height:11px; margin-left:-5px; margin-top:-5px;
  border-radius:50%; background:var(--ouro);
  box-shadow:0 0 0 4px rgba(11,27,43,.9), 0 0 18px rgba(200,168,107,.55);
  transform:scale(0); transition:transform .8s cubic-bezier(.76,0,.24,1) calc(.18s + var(--d,0)*110ms)}
#metodo .mstep.in .mstep-node{transform:scale(1)}

/* numeral colossal serif */
#metodo .mstep-num{grid-column:1; font-family:var(--serif); font-weight:500; line-height:.82;
  font-size:clamp(3.2rem,9vw,6rem);
  color:transparent; -webkit-text-stroke:1px rgba(231,212,174,.42);
  letter-spacing:-.01em; user-select:none; transition:-webkit-text-stroke-color .9s ease, color .9s ease}
#metodo .mstep.in .mstep-num{-webkit-text-stroke-color:rgba(231,212,174,.62);
  color:rgba(200,168,107,.06)}

#metodo .mstep-body{grid-column:2; padding-top:.15em}

/* título em MÁSCARA (revela com <span> deslizando) */
#metodo .mstep-title{overflow:hidden; margin:0 0 .5em;
  font-family:var(--serif); font-weight:500; letter-spacing:.005em;
  font-size:clamp(1.85rem,4.4vw,2.9rem); line-height:1.02; color:var(--branco)}
#metodo .mstep-title > span{display:block; transform:translateY(118%);
  transition:transform 1.2s cubic-bezier(.76,0,.24,1) calc(.1s + var(--d,0)*110ms)}
#metodo .mstep.in .mstep-title > span{transform:none}

#metodo .mstep-txt{margin:0; max-width:52ch; color:var(--cinza);
  font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.72; font-weight:300}

/* CTA de fechamento */
#metodo .metodo-cta{margin-top:clamp(48px,7vh,84px); display:flex; flex-wrap:wrap;
  align-items:center; gap:22px 30px}
#metodo .metodo-cta-note{margin:0; color:var(--ouro2); opacity:.82;
  font-family:var(--serif); font-style:italic; font-size:1.06rem; letter-spacing:.01em}

/* ---- mobile: empilha e mantém elegância ---- */
@media (max-width:760px){
  #metodo .metodo-inner{padding-left:20px; padding-right:20px}
  #metodo .metodo-timeline{max-width:none}
  #metodo .metodo-timeline::before{left:11px; top:2px; bottom:2px}
  #metodo .mstep{grid-template-columns:1fr; gap:8px;
    padding-left:38px; padding-top:clamp(24px,4vh,38px); padding-bottom:clamp(24px,4vh,38px)}
  #metodo .mstep-node{left:11px; top:calc(clamp(24px,4vh,38px) + .5em)}
  #metodo .mstep-num{font-size:clamp(2.6rem,15vw,3.6rem); color:rgba(200,168,107,.08)}
  #metodo .mstep-title{font-size:clamp(1.55rem,7vw,2rem); margin-top:2px}
  #metodo .metodo-cta{gap:16px}
  #metodo .metodo-sky{filter:blur(8px) saturate(.72) brightness(.4)}
}

/* ---- respeita reduced-motion ---- */
@media (prefers-reduced-motion:reduce){
  #metodo .metodo-sky{transform:none; filter:blur(8px) saturate(.7) brightness(.42)}
  #metodo .metodo-timeline::before{transform:scaleY(1); transition:none}
  #metodo .mstep.reveal{transition-delay:0s}
  #metodo .mstep-node{transform:scale(1); transition:none}
  #metodo .mstep-title{overflow:visible}
  #metodo .mstep-title > span{transform:none; transition:none}
  #metodo .mstep-num{color:rgba(200,168,107,.06); -webkit-text-stroke-color:rgba(231,212,174,.5)}
}

/* ---- FOLD: portfolio ---- */
/* ===== 05 — PORTFÓLIO: primeiro capítulo (cena) + convite (vazio nobre) ===== */
#portfolio{position:relative}

/* --- CAPÍTULO I: cena full-bleed que sangra a margem --- */
#portfolio .folio-scene{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  min-height:clamp(520px,86vh,900px); display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
}
#portfolio .fs-media{position:absolute; inset:0; z-index:0; overflow:hidden}
/* imagem em parallax (filho direto do wrapper overflow:hidden) */
#portfolio .fs-img{
  position:absolute; left:0; right:0; top:-14%; height:128%;
  background-size:cover; background-position:center 42%; will-change:transform;
  /* dissolve no fundo escuro: degrade em cima e embaixo */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 82%,transparent 100%);
  transform:scale(1.16); filter:blur(6px);
  transition:transform 1.6s cubic-bezier(.16,1,.3,1), filter 1.2s ease;
}
#portfolio .folio-scene.in .fs-img{transform:scale(1); filter:blur(0)}
/* scrim lateral p/ legibilidade do texto sobre a foto + selagem no rodapé */
#portfolio .fs-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,9,16,.86) 0%, rgba(4,9,16,.42) 40%, transparent 66%),
    linear-gradient(180deg, transparent 40%, rgba(4,9,16,.55) 78%, var(--noite) 100%);
}
#portfolio .fs-copy{
  position:relative; z-index:2;
  padding:0 clamp(24px,7vw,120px) clamp(52px,9vh,104px);
  max-width:min(720px,88vw);
}
#portfolio .fs-chapter{
  display:block; font-family:var(--sans); font-weight:400; font-size:.7rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--ouro2); opacity:.82;
  margin-bottom:16px;
}
#portfolio .fs-seal{
  display:inline-block; font-family:var(--sans); font-size:.64rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--noite);
  background:var(--ouro); padding:7px 15px; border-radius:30px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
#portfolio .fs-title{
  overflow:hidden;
  font-family:var(--serif); font-weight:600; line-height:1;
  font-size:clamp(2.6rem,7.4vw,6rem); color:#fff;
  text-shadow:0 8px 60px rgba(0,0,0,.6); margin:22px 0 18px;
}
#portfolio .fs-title > span{
  display:block; transform:translateY(118%);
  transition:transform 1.2s cubic-bezier(.76,0,.24,1); transition-delay:.12s;
}
#portfolio .folio-scene.in .fs-title > span{transform:none}
#portfolio .fs-loc{
  font-family:var(--sans); font-size:.9rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ouro2); margin-bottom:14px;
}
#portfolio .fs-desc{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.2rem,2.3vw,1.75rem); line-height:1.4; color:#e6edf3;
  max-width:36ch;
}

/* --- CAPÍTULO II: convite no vazio nobre --- */
#portfolio .folio-invite{
  position:relative; margin-top:clamp(48px,8vh,88px);
  border:1px dashed rgba(200,168,107,.4); border-radius:22px;
  padding:clamp(48px,7vw,88px) clamp(30px,6vw,80px);
  background:
    radial-gradient(130% 120% at 12% 0%, rgba(200,168,107,.10), transparent 55%),
    var(--noite2);
  overflow:hidden;
}
#portfolio .fi-ghost{
  position:absolute; top:-.32em; right:.06em; z-index:0; pointer-events:none;
  font-family:var(--serif); font-weight:600; line-height:1;
  font-size:clamp(9rem,26vw,20rem); color:rgba(200,168,107,.07);
  letter-spacing:-.02em; user-select:none;
}
#portfolio .fi-body{position:relative; z-index:2; max-width:44ch}
#portfolio .fi-seal{
  display:inline-block; font-family:var(--sans); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro);
  border:1px solid var(--ouro); padding:6px 14px; border-radius:30px;
}
#portfolio .fi-title{
  overflow:hidden;
  font-family:var(--serif); font-weight:600; line-height:1.02;
  font-size:clamp(2.1rem,5.4vw,3.6rem); color:#fff; margin:22px 0 14px;
}
#portfolio .fi-title > span{
  display:block; transform:translateY(118%);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1); transition-delay:.14s;
}
#portfolio .folio-invite.in .fi-title > span{transform:none}
#portfolio .fi-desc{color:#cdd8e2; font-weight:300; font-size:1.05rem; line-height:1.66; max-width:40ch}
#portfolio .fi-cta{
  display:inline-block; margin-top:26px;
  font-family:var(--sans); font-size:.88rem; letter-spacing:.06em; color:var(--ouro);
  border-bottom:1px solid var(--ouro); padding-bottom:3px; transition:.3s;
}
#portfolio .fi-cta:hover{color:var(--ouro2); border-color:var(--ouro2)}
#portfolio .fi-mark{
  position:absolute; z-index:1; right:clamp(30px,6vw,80px); bottom:clamp(34px,6vw,64px);
  width:clamp(46px,7vw,74px); height:clamp(46px,7vw,74px);
  color:var(--ouro); opacity:.34;
  transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1);
  transform:translateY(14px);
}
#portfolio .folio-invite.in .fi-mark{opacity:.5; transform:none}

/* --- mobile: empilha e mantém a elegância --- */
@media(max-width:760px){
  #portfolio .folio-scene{min-height:74vh}
  #portfolio .fs-scrim{
    background:
      linear-gradient(90deg, rgba(4,9,16,.7) 0%, rgba(4,9,16,.3) 55%, transparent 88%),
      linear-gradient(180deg, transparent 30%, rgba(4,9,16,.6) 72%, var(--noite) 100%);
  }
  #portfolio .fs-desc{max-width:100%}
  #portfolio .fi-mark{display:none}
  #portfolio .fi-body{max-width:100%}
}

/* --- respeita quem pediu menos movimento --- */
@media (prefers-reduced-motion: reduce){
  #portfolio .fs-img{transform:none; filter:none; will-change:auto;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 82%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 82%,transparent 100%);}
  #portfolio .fs-title > span,
  #portfolio .fi-title > span{transform:none; transition:none}
  #portfolio .fi-mark{transform:none; transition:none}
}

/* ---- fixes de integracao ---- */
#experiencia .section-head.in ~ .filmstrip .spine-line{transform:scaleY(1)}
#metodo{max-width:none; padding-left:0; padding-right:0}