/* Fontes servidas pelo proprio site (subconjunto latino, fontes variaveis: um
   arquivo cobre os pesos 400 a 700). Sem Google Fonts, sem duas conexoes a mais. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/dm-sans-latin.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2')}
/* FRAN MAKE STUDIO. Shared design system and responsive composition. */
:root{--ink:#59343e;--paper:#fff9f6;--muted:#80606a;--rose:#975266;--line:rgba(151,82,102,.22);--serif:'DM Sans',Arial,sans-serif;--sans:'Manrope',Arial,sans-serif;--nav:82px;--ease:cubic-bezier(.2,.7,.2,1)}
*,*::before,*::after{box-sizing:border-box}
html{font-synthesis:none;text-rendering:optimizeLegibility}
html{scroll-padding-top:calc(var(--nav) + 20px)}
body{margin:0;background:var(--paper);color:var(--ink);font:500 15px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img,video{display:block;max-width:100%;height:auto}svg{width:22px;height:22px;flex-shrink:0}button,a{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}ul{list-style:none;margin:0;padding:0}button:disabled{cursor:default}em{font-weight:inherit;font-style:normal;color:var(--rose)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--rose);outline-offset:6px}
::selection{background:#dab4a8;color:#201b1b}
.container{width:min(1240px,100% - 112px);margin-inline:auto}
section{padding:112px 0;scroll-margin-top:var(--nav)}
.s-dark{background:#fff9f6}.s-dark2{background:#f4e6e5}
.skip-link{position:fixed;left:20px;top:12px;z-index:100;transform:translateY(-160%);padding:10px 20px;background:var(--paper);color:var(--ink)}.skip-link:focus{transform:none}
#navbar{position:fixed;inset:0 0 auto;z-index:30;background:#fff9f6;border-bottom:1px solid var(--line)}
.nb-inner{height:var(--nav);width:min(1360px,100% - 80px);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand-name{font:700 16px/1 var(--serif);display:block;white-space:nowrap}.brand-name>span{display:block;font:500 8px/1 var(--sans);letter-spacing:5px;margin-top:7px;text-align:center}
.nb-links{display:flex;gap:28px}.nb-links a{font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;padding:16px 0;color:#75515d}.nb-links a:hover,.nb-links a[aria-current]{color:var(--rose)}
.nb-cta{padding:9px 23px;border:1px solid var(--line);font-size:11px;letter-spacing:1px}.nb-cta:hover{border-color:var(--rose)}
.nb-ham{display:none;width:44px;height:44px;background:none;border:0;padding:10px;flex-direction:column;justify-content:center;gap:5px}.nb-ham span{width:24px;height:1px;background:var(--ink)}
.nb-mob{position:fixed;inset:var(--nav) 0 0;background:#fff9f6;overflow:auto;padding:40px 28px;flex-direction:column;align-items:center;justify-content:center;gap:32px}.nb-mob.on{display:flex}.nb-mob ul{text-align:center;display:grid;gap:15px}.nb-ml{font:600 30px/1.3 var(--serif)}
.btn-pk{display:inline-flex;gap:18px;align-items:center;justify-content:center;padding:14px 22px;min-height:48px;font:600 12px/1.5 var(--sans);letter-spacing:.9px;border:1px solid var(--rose);transition:background .25s,color .25s}
.btn-pk{background:var(--rose);color:#fff9f6}.btn-pk:hover{background:#824357;border-color:#824357}/* The sticky stage is real document content; scroll is never captured. */
#hero{padding:var(--nav) 0 0;position:relative;background:#fcf3ef}
.hero-stage{position:relative;min-height:690px;height:calc(100svh - var(--nav));isolation:isolate;overflow:hidden}
/* 400svh: 100 do palco fixo + 300 de curso. A fase do pincel ocupa a faixa
   central dessa rolagem, entre a assinatura e a entrada da Franciana. */
.cinematic #hero{padding-top:0;height:460svh}.cinematic .hero-stage{position:sticky;top:0;height:100svh;min-height:690px}.cinematic .hero-layout{padding-top:calc(var(--nav) + 32px)}
.hero-halo{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at 73% 58%,#e2b4ba 0%,#f3dfdc 38%,#fcf3ef 72%);opacity:.8;pointer-events:none}

.intro-title{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;text-align:center;pointer-events:none;padding:40px 20px 110px}
html:not(.cinematic) .intro-title{width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#intro-kicker{font:700 15px/1.5 var(--sans);letter-spacing:.28em;color:var(--rose);margin-bottom:26px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.intro-mark{position:relative;display:block;width:min(74vw,520px);--draw:0}
.intro-mark-draw,.intro-mark-draw img{display:block;width:100%;height:auto}
.intro-signature{font:500 16px/1.6 var(--serif);color:var(--muted);margin-top:32px}
.hero-layout{height:100%;display:grid;grid-template-columns:56% 44%;align-items:center;padding-block:38px 98px;gap:0}
/* Credito do hero: nome, fio e funcao em tres niveis. Antes era uma unica
   linha em caixa alta, que lia como um bloco so depois que o separador saiu. */
.hero-credit{display:flex;align-items:center;gap:13px;margin-bottom:24px;flex-wrap:wrap}
.hc-nome{font:500 clamp(15px,1.3vw,18px)/1 var(--serif);letter-spacing:.03em;color:var(--rose)}
.hc-papel{font:500 9px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.hero-content{position:relative;z-index:2;padding-right:46px}.hero-content .slabel{margin-bottom:18px;font-size:9px}.hero-logo{width:clamp(190px,19vw,260px);height:auto;margin-bottom:25px;border:0}
.hero-content h2{font:700 clamp(34px,3.8vw,54px)/1.06 var(--serif);letter-spacing:-.02em;margin-bottom:30px}.hero-content h2 em{color:#975266}.hero-photo{position:relative;z-index:1;width:100%;max-width:480px;justify-self:end}.hero-photo img{width:100%;height:auto;object-fit:contain;object-position:bottom right}
/* Sections use restrained editorial rhythm rather than effect-heavy cards. */
.sh{max-width:760px;margin:0 auto 52px;text-align:center}.slabel{display:block;font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--rose);margin-bottom:17px}.stitle{font:700 clamp(34px,4.4vw,60px)/1.1 var(--serif);letter-spacing:-.025em;margin-bottom:23px}.ssub{font-size:14px;line-height:1.9;color:var(--muted);max-width:530px;margin:auto}
#sobre{background:var(--paper);color:var(--ink)}#sobre .slabel{color:#975266}#sobre em{color:#975266}#sobre .ssub{color:#80606a}
.portfolio{min-width:0}.photo-caption{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;gap:12px;padding:40px 20px 18px;background:linear-gradient(transparent,rgba(20,13,12,.8));color:#fff;font-size:11px;pointer-events:none}.photo-caption>span:last-child{font-size:20px}.makes-prices{display:grid;grid-template-columns:repeat(3,1fr);margin-top:65px;border-block:1px solid var(--line)}.mp-card{padding:36px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}.mp-card+.mp-card{border-left:1px solid var(--line)}.mp-card p{color:var(--muted);font-size:12px}.mp-featured{background:rgba(195,134,153,.09)}
.map-box{border:1px solid var(--line);overflow:hidden}.ctc-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:980px;margin:auto}.ctc-card{border-top:1px solid var(--line);padding:34px 20px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}.ctc-ico{color:var(--rose)}.ctc-card h3{font:700 32px/1.2 var(--serif)}.ctc-card p{font-size:13px;color:var(--muted);max-width:390px;flex:1}
#footer{padding:65px 0 28px;border-top:1px solid var(--line)}.ft-top{display:flex;justify-content:space-between;gap:40px;padding-bottom:45px}.ft-logo{width:82px;height:82px;object-fit:contain;margin-bottom:20px}.ft-brand p{font:500 20px var(--serif);color:var(--muted)}.ft-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 35px;align-content:start;font-size:11px;color:var(--muted)}.ft-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}
.motion-ready .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.motion-ready .rv.show{opacity:1;transform:none}
#lightbox{border:1px solid var(--line);background:#fff9f6;color:var(--ink);padding:16px;max-width:94vw;max-height:94svh;overflow:auto}#lightbox::backdrop{background:rgba(12,9,9,.93)}#lb-img{max-height:76svh;max-width:85vw;object-fit:contain;margin:auto}#lb-close{position:sticky;top:0;display:block;margin:0 0 10px auto;width:44px;height:44px;border:1px solid var(--line);background:#fff9f6;font-size:28px}#lb-caption{text-align:center;font-size:12px;margin-top:12px}
.micro-spark{position:fixed;width:9px;height:9px;background:#a65770;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);pointer-events:none;z-index:80;animation:spark .32s ease-out forwards}@keyframes spark{0%{opacity:0;transform:scale(.4)}35%{opacity:.9}100%{opacity:0;transform:translateY(-4px) scale(.6)}}
@media(min-width:1600px){.hero-layout{width:min(1320px,100% - 160px)}}
@media(max-width:1100px){.container{width:calc(100% - 72px)}.nb-links{gap:18px}.nb-inner{width:calc(100% - 56px)}.hero-content{padding-right:30px}.hero-logo{width:160px}.hero-content h2{font-size:36px}.hero-photo figcaption{font-size:8px;letter-spacing:1px}.mp-card{padding:30px 20px}}
@media(max-width:850px){:root{--nav:72px}.nb-links,.nb-cta{display:none}.nb-ham{display:flex}.container{width:calc(100% - 48px)}section{padding:82px 0}.hero-content h2{font-size:32px}.hero-logo{width:145px}.makes-prices{gap:0}.mp-card{padding:28px 16px}.hero-stage{min-height:640px}.hero-layout{padding-bottom:80px}}
@media(max-width:600px){:root{--nav:68px}.nb-inner{width:calc(100% - 40px)}.brand-name{font-size:24px}.container{width:calc(100% - 40px)}section{padding:70px 0}.sh{margin-bottom:36px}.stitle{font-size:36px}.ssub{font-size:13px}.slabel{font-size:9px;letter-spacing:2.5px}
.hero-stage{height:770px;min-height:0}.cinematic #hero{height:calc(770px + 62svh + var(--nav))}.hero-layout{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:25px;padding:30px 0 80px;text-align:center}.hero-content{padding:0}.hero-content .slabel{font-size:8px;margin-bottom:12px}.hero-logo{width:106px;margin:0 auto 15px}.hero-content h2{font-size:29px;margin-bottom:17px}.hero-photo{width:260px;max-width:82%;justify-self:center}.hero-photo figcaption{margin-top:10px;letter-spacing:1px;font-size:8px}.intro-title{padding-bottom:170px}.intro-title h1{font-size:clamp(33px,8.5vw,50px)}#intro-kicker{font-size:13px;letter-spacing:.22em}.intro-signature{font-size:14px;max-width:245px}.photo-caption{font-size:10px;padding:36px 15px 15px}.makes-prices{grid-template-columns:1fr;margin-top:40px}.mp-card{padding:27px 12px;gap:14px}.mp-card+.mp-card{border-left:0;border-top:1px solid var(--line)}.mp-card p{max-width:330px}.ctc-grid{grid-template-columns:1fr;gap:32px}.ctc-card{padding:28px 0 0}.ctc-card h3{font-size:30px}.ft-top{flex-wrap:wrap;gap:30px}.ft-brand{width:100%}.ft-nav{flex:1}.ft-bottom{flex-direction:column;gap:6px}.ft-brand p{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv,.motion-ready .rv{opacity:1;transform:none;transition:none}.btn-pk{transition:none}.micro-spark{display:none}}

/* Editorial imagery and light grain. Text never inherits the card tilt. */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.032;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
body.no-noise::after{display:none}
.nb-logo{display:flex;gap:13px;align-items:center}.nb-logo img{width:61px;height:61px;object-fit:contain}.brand-name>span{font-weight:600;letter-spacing:3px;margin-top:7px;text-align:left}.nb-cta{font-weight:600;font-size:12px}
.hero-description{max-width:440px;color:var(--muted);font-size:14px;line-height:1.75;margin:-10px 0 26px}.hero-photo{max-width:520px}.hero-logo{margin-bottom:18px}.hero-content h2{margin-bottom:25px}.hero-content .slabel{font-size:11px;font-weight:700;letter-spacing:1.3px}.hero-photo figcaption{font-weight:600}
.slabel{font-weight:700;letter-spacing:1.8px;font-size:11px}.stitle .word{vertical-align:top}.stitle{overflow-wrap:normal}.ssub{font-size:15px;font-weight:400}.intro-title h1{font-weight:700}.intro-signature{font-weight:500}.photo-caption small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1.7px;opacity:.8;margin-bottom:5px}.photo-caption{font-weight:600;font-size:13px}.ft-brand p{font-size:14px;line-height:1.7}
.mp-card p{font-size:13px;font-weight:400}#servicos .makes-prices{margin-top:25px}@media(max-width:1100px){.nb-links{gap:16px}.nb-links a{font-size:11px}.brand-name{font-size:14px}.nb-logo img{width:52px;height:52px}.hero-logo{width:205px}.hero-description{font-size:13px}}
@media(max-width:850px){.hero-logo{width:180px}}
@media(max-width:600px){.brand-name{font-size:14px}.nb-logo img{width:49px;height:49px}.nb-logo{gap:10px}.hero-stage{height:880px}.cinematic #hero{height:calc(880px + 62svh + var(--nav))}.hero-logo{width:158px;margin-bottom:14px}.hero-layout{gap:22px;padding-top:24px}.hero-content h2{font-size:32px;margin-bottom:18px}.hero-description{font-size:12px;max-width:315px;margin:0 auto 20px}.hero-content .slabel{font-size:9px;letter-spacing:1px}.hero-photo{width:300px;max-width:90%}.hero-photo figcaption{font-size:9px}.stitle{font-size:34px;line-height:1.13}.slabel{font-size:10px;letter-spacing:1.5px}.ssub{font-size:14px}.photo-caption{font-size:12px}.ft-logo{width:112px;height:112px}.ctc-card h3{font-size:25px}}
@media(max-width:380px){.hero-content h2{font-size:29px}.hero-stage{height:890px}.cinematic #hero{height:calc(890px + 62svh + var(--nav))}.stitle{font-size:31px}}
#navbar{transition:opacity .25s ease,transform .25s ease}
.intro-pending #navbar{opacity:0;visibility:hidden;transform:translateY(-100%);pointer-events:none}
.intro-media{position:absolute;inset:0;z-index:-2;pointer-events:none;background:#615e56 url('images/intro-poster.webp') center/cover no-repeat}
.intro-media video{width:100%;height:100%;object-fit:cover;object-position:center;filter:none}
.intro-media.poster-only video{visibility:hidden}
.intro-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,15,18,.8),rgba(20,15,18,.1) 62%,transparent)}
html:not(.cinematic) .intro-media{display:none}
.cinematic .intro-title{align-items:flex-start;justify-content:flex-end;text-align:left;padding:40px max(7vw,28px) 115px;height:min(100%,100svh);color:#fff9f6}
.cinematic .intro-mark{width:min(58vw,600px)}
/* Revela a arte real ao longo da direcao da escrita: o traco nasce a esquerda
   e avanca para a direita conforme --draw, em vez de surgir por fade. */
.cinematic .intro-mark-draw{
  -webkit-mask-image:linear-gradient(97deg,#000 0 40%,rgba(0,0,0,.5) 41.5%,transparent 43%);
  mask-image:linear-gradient(97deg,#000 0 40%,rgba(0,0,0,.5) 41.5%,transparent 43%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:calc(100% - var(--draw) * 100%) 0;
  mask-position:calc(100% - var(--draw) * 100%) 0;
}
.cinematic .intro-mark::after{
  content:'';position:absolute;top:50%;left:calc(var(--draw) * 100%);
  width:clamp(38px,6vw,68px);aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(circle,rgba(239,163,173,.45),transparent 68%);
  opacity:calc(var(--draw) * (1 - var(--draw)) * 3.4);
  pointer-events:none;
}
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .cinematic .intro-mark-draw{opacity:calc(.15 + var(--draw) * .85)}
  .cinematic .intro-mark::after{display:none}
}
.cinematic #intro-kicker,.cinematic .intro-signature{color:#fff9f6}
.cinematic .intro-signature{margin-top:22px;font-size:14px}
.intro-pending .hero-content,.intro-pending .hero-photo{will-change:opacity,transform}
.cinematic .hero-content,.cinematic .hero-photo{opacity:0;visibility:hidden}
@media(max-width:600px){
  .cinematic #hero{height:calc(950px + 150svh)}
  .cinematic .hero-stage{height:950px;min-height:0}
  .cinematic .hero-layout{padding-top:calc(var(--nav) + 24px)}
  .intro-media{height:100svh}
  .intro-media video{object-position:50% 25%}
  .cinematic .intro-title{height:100svh;padding:28px 24px 110px;align-items:center;text-align:center}
  .cinematic .intro-mark{width:min(82vw,360px)}
  .cinematic .intro-signature{font-size:13px;max-width:290px}
    }
@media(prefers-reduced-motion:reduce){#navbar{transition:none}}

/* Touch devices use native document flow: no oversized pinned stages. */
.intro-play{position:absolute;right:24px;top:24px;z-index:5;min-height:44px;padding:10px 16px;background:#fff9f6;color:#59343e;border:1px solid #975266;pointer-events:auto;font-size:12px;font-weight:600}
/* O palco tambem fica fixo no celular: a fase do pincel precisa de curso
   proprio entre a assinatura e a entrada da Franciana. A rolagem segue
   nativa, sem captura de gesto. */
.mobile-layout.cinematic #hero{height:450svh;padding:0}
.mobile-layout.cinematic .hero-stage{position:sticky;top:0;height:100svh;min-height:0;overflow:hidden}
.mobile-layout.cinematic .intro-media{height:100svh;min-height:420px;max-height:none}
.mobile-layout.cinematic .intro-title{height:100svh;min-height:420px;max-height:none;padding:30px 24px 60px;align-items:center;text-align:center}
.mobile-layout.cinematic .intro-mark{width:min(84vw,380px)}
/* Com o palco fixo, o conteudo ocupa a propria tela em vez de ser empurrado
   para baixo da midia da intro, como acontecia no fluxo antigo. */
.mobile-layout.cinematic .hero-layout{height:100%;padding:calc(var(--nav) + 20px) 0 46px;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:18px;text-align:center}
.mobile-layout .hero-content{padding:0}
.mobile-layout .hero-logo{width:150px;margin:0 auto 18px}
.mobile-layout .hero-content h2{font-size:32px}
.mobile-layout .hero-description{max-width:370px;margin:0 auto 22px;font-size:14px;line-height:1.7}
.mobile-layout .hero-photo{width:320px;max-width:90%;justify-self:center}
.mobile-layout .motion-ready .rv{transform:none}
.mobile-layout.motion-ready .rv{opacity:1;transform:none;transition:none}
.mobile-layout body::after{display:none}
@media(prefers-reduced-motion:reduce){.mobile-layout .intro-play{display:none}.mobile-layout .hero-layout{padding-top:30px}}

.btn-pk,.nb-cta,.intro-play{border-radius:999px;letter-spacing:.25px;padding-inline:22px}
.service-name{font:600 24px/1.2 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.location-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.location-actions button{background:transparent;color:var(--muted);border:0;border-bottom:1px solid var(--line);cursor:pointer;min-height:44px}
@media(max-width:600px){.mp-card{padding:24px 0}.nb-cta{padding-inline:15px}}
.mobile-layout.cinematic .intro-media{overflow:hidden}
.mobile-layout.cinematic .intro-media::after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(180deg,transparent,var(--paper));pointer-events:none}
.mobile-layout.motion-ready .mobile-reveal{opacity:0;transform:translate3d(0,14px,0);transition:opacity .65s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.mobile-layout.motion-ready .mobile-reveal.is-visible,.mobile-layout.motion-ready .mobile-reveal:focus-within{opacity:1;transform:none}
.mobile-layout .mp-card:nth-child(2){transition-delay:60ms}
.mobile-layout .mp-card:nth-child(3){transition-delay:100ms}
@media(prefers-reduced-motion:reduce){.mobile-layout .mobile-reveal{opacity:1;transform:none;transition:none}.mobile-layout .intro-media::after{display:none}}
.nb-cta{background:var(--rose);border-color:var(--rose);color:var(--paper);font-weight:700;white-space:nowrap}
.nb-cta:hover{filter:brightness(1.08)}
@media(max-width:850px){
  .nb-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;font-size:11px;letter-spacing:.3px;margin-left:auto}
  .nb-inner{gap:10px}
  .nb-logo{gap:8px}
  .nb-logo img{width:40px;height:40px}
  .brand-name{font-size:12px}
  .brand-name>span{font-size:7px;letter-spacing:2px}
  .nb-ham{flex-shrink:0}
}

/* ---- Liquid glass nos CTAs principais ------------------------------------
   So Agendar, Ver portfolio e acoes de contato. Controles de carrossel e
   filtros continuam planos, senao o efeito perde o sentido.
   O preenchimento segue quase opaco de proposito: o vidro vem do blur atras,
   do brilho especular nas bordas e do reflexo que atravessa no hover, nunca
   as custas do contraste do texto. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn-pk,.nb-cta{
    position:relative;overflow:hidden;
    -webkit-backdrop-filter:blur(14px) saturate(1.45);
    backdrop-filter:blur(14px) saturate(1.45);
    box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 -1px 0 rgba(0,0,0,.16) inset,0 6px 18px -9px rgba(0,0,0,.5);
    transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .16s var(--ease)
  }
  .btn-pk::after,.nb-cta::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 47%,transparent 64%);
    translate:-130% 0;transition:translate .7s var(--ease)
  }
  .btn-pk:hover::after,.nb-cta:hover::after{translate:130% 0}
  .btn-pk:active,.nb-cta:active{transform:translateY(1px) scale(.988)}
}
@media(prefers-reduced-motion:reduce){
  .btn-pk::after,.nb-cta::after{display:none}
  .btn-pk,.nb-cta{transition:none}
  .btn-pk:active,.nb-cta:active{transform:none}
}

/* ---- Corredor de imagens: porta de entrada do portfolio ------------------
   Dois trilhos de cartoes vem do fundo na direcao de quem olha. A perspectiva
   faz sozinha o que parece duas animacoes: conforme o z cresce o cartao
   aumenta e o x na tela se abre, porque a projecao escala posicao e tamanho
   pelo mesmo fator. Tudo em cqw, porcentagem da largura do container, entao a
   proporcao se mantem em qualquer tamanho.
   O laco existe para mostrar trabalho real em rotacao, nao como enfeite: ele
   para fora da tela e para com reducao de movimento. */
/* Sem este escurecimento o texto cai em cima dos cartoes e some. */
@media(max-width:850px){
  /* Trilhos de 44cqw jogam os cartoes para fora num viewport estreito, mas
     fecha-los demais empilha tudo atras do texto. 38cqw e o meio termo. */
}
/* ---- Cena do pincel ------------------------------------------------------
   Base = versao estatica (reducao de movimento / sem JS): secao curta com o
   poster. A altura alta e o sticky so entram com .motion-ready, para que
   ninguem fique preso rolando uma cena longa sem animacao.
   Enquanto esta em cena o pincel nao recebe scale nem rotacao: o video ja
   traz o movimento. So a saida o transforma. */
.brush-scene{position:absolute;inset:0;z-index:0;pointer-events:none;background:#000;opacity:var(--brush-in,0)}
.brush-inner{position:absolute;inset:0;display:grid;place-items:center}
.brush-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.brush-edge{position:absolute;inset:0;background:radial-gradient(ellipse 82% 72% at 50% 50%,transparent 54%,#000 100%)}
.brush-word{position:absolute;top:50%;margin:0;white-space:nowrap;color:#fff9f6;
  font:600 clamp(24px,4.2vw,62px)/1 var(--serif);letter-spacing:.015em}
/* Entram pelas laterais conforme o scroll, sem competir com o pincel. */
.brush-left{left:max(6vw,22px);opacity:var(--word-a,0);translate:calc(-52px + var(--word-a,0) * 52px) -50%}
.brush-right{right:max(6vw,22px);opacity:var(--word-b,0);translate:calc(52px - var(--word-b,0) * 52px) -50%}
html:not(.cinematic) .brush-scene{display:none}
@media(max-width:850px){
  /* Na altura do aro o pincel e largo e as palavras se espremem; descidas
     para a faixa do cabo, cada uma tem a largura da tela. O percurso de
     entrada tambem encurta, senao o palco recorta Sofisticacao. */
  .brush-word{font-size:clamp(16px,4.7vw,25px)}
  .brush-left{top:63%;left:max(4vw,14px);translate:calc(-22px + var(--word-a,0) * 22px) -50%}
  .brush-right{top:82%;right:max(4vw,14px);translate:calc(22px - var(--word-b,0) * 22px) -50%}
  .brush-edge{background:radial-gradient(ellipse 94% 64% at 50% 50%,transparent 58%,#000 100%)}
}
@media(max-width:600px){
        .hero-credit{justify-content:center;gap:10px}
  .hc-nome{font-size:15px}
    .hc-papel{font-size:8px;letter-spacing:.2em}
    }
@media(max-width:850px){
  /* O conteudo do hero excedia a area util do palco fixo e o centramento
     empurrava a primeira linha para tras da navbar. Compactado para caber. */
  .mobile-layout.cinematic .hero-logo{width:clamp(92px,26vw,118px);margin-bottom:14px}
  .mobile-layout.cinematic .hero-content h2{margin-bottom:16px}
  .mobile-layout.cinematic .hero-description{font-size:13px;line-height:1.68}
  .mobile-layout.cinematic .hero-credit{margin-bottom:14px}
}
@media(max-width:850px){
  /* Centrar ignora o padding quando o conteudo transborda, e a primeira linha
     sobe para tras da navbar. Ancorado no topo, o padding sempre vale. */
  .mobile-layout.cinematic .hero-layout{align-content:start}
}
/* Cantos. O raio acompanha o tamanho do elemento em vez de ser um valor unico
   em tudo: cartao grande parado pede curva maior que lasca em movimento. */
.ctc-card{border-radius:14px;overflow:hidden}
/* Retratos com deriva lenta. No toque nao existe hover, entao sem isto os
   cartoes ficam parados; a defasagem evita que pulsem em uniforme. O hover usa
   a propriedade scale, que compoe com o transform da animacao em vez de
   sobrescrever. */
@keyframes retrato-deriva{
  0%  {transform:scale(1.04) translate3d(-.8%,.6%,0)}
  50% {transform:scale(1.09) translate3d(.9%,-.7%,0)}
  100%{transform:scale(1.04) translate3d(-.8%,.6%,0)}
}
/* Carrossel de painel aberto. Um painel toma a sala, os seguintes estreitam e
   o resto vira ripa. As larguras saem do JS, porque a fatia de cada coluna
   muda com o ponteiro e seria uma combinatoria de regras aqui. */
.squeeze{background:#000;padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,84px)}
.squeeze .container{container-type:inline-size}
.sq-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(18px,2.4vw,30px)}
.sq-head h2{font:700 clamp(26px,3.6vw,48px)/1.1 var(--serif);margin:0}
.sq-arrows{display:flex;gap:8px;flex:0 0 auto}
.sq-arrow{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:9px;
  background:var(--rose);color:#2a1016;cursor:pointer;transition:opacity .25s var(--ease)}
.sq-arrow:hover{opacity:.85}
.sq-arrow:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

.sq-viewport{overflow:hidden;height:var(--sq-h,clamp(200px,32cqi,340px))}
.sq-strip{display:flex;height:100%;width:max-content}
.sq-panel{position:relative;flex:0 0 auto;height:100%;padding:0;border:0;overflow:hidden;
  background:#171114;cursor:pointer;border-radius:6px}
.sq-panel:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
/* A foto e desenhada sempre no mesmo bloco 16:9 e centrada, nunca na largura
   do painel. Deixar o object-fit decidir faz a escala trocar no meio do
   movimento, e a imagem e reamostrada a cada quadro. */
.sq-panel img{position:absolute;inset:0 auto;top:0;left:50%;translate:-50% 0;height:100%;
  width:var(--sq-hero);min-width:100%;max-width:none;object-fit:cover;object-position:50% 28%}

.sq-copy{display:grid;margin-top:clamp(22px,2.6vw,32px)}
.sq-slide{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .9s var(--ease),visibility .9s}
.sq-slide[data-aberto]{opacity:1;visibility:visible;pointer-events:auto}
.sq-slide p{margin:0;max-width:62ch;font-size:clamp(15px,1.2vw,17px);line-height:1.62}
.sq-t{color:var(--ink)}
.sq-d{color:var(--muted)}
@media(min-width:900px){
  .sq-slide{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:40px}
  .sq-slide .btn-pk{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){
  .sq-slide{transition-duration:1ms}
}
html.salto-ancora #hero{visibility:hidden}
/* Abertura em bloco: CONHECA, a assinatura e a legenda centradas no terco de
   baixo. No canto esquerdo o texto caia sobre a mao e o cabelo, e o vao entre as
   legendas denunciava que o nome no meio ainda nao existia. */
.cinematic .intro-title{align-items:center;justify-content:flex-end;text-align:center;
  padding:40px 24px clamp(72px,12vh,128px)}
.cinematic .intro-mark{width:min(48vw,540px)}
.cinematic #intro-kicker{margin-bottom:14px;opacity:0}
.cinematic .intro-signature{margin-top:16px;opacity:0}
.intro-shade{background:linear-gradient(0deg,rgba(12,9,11,.88),rgba(12,9,11,.3) 42%,transparent 72%)}
@media(max-width:850px){
  .cinematic .intro-title{padding:28px 24px 96px}
  .cinematic .intro-mark{width:min(82vw,360px)}
}
.mobile-layout.cinematic .intro-title{padding:30px 24px 88px}
/* Saida do pincel: sobe e inclina a partir da ponta do cabo. O valor chega ao
   quadrado, entao o movimento comeca lento e acelera para fora de quadro. */
.brush-inner{transform:translate3d(0,calc(var(--brush-out,0) * -58%),0) rotate(calc(var(--brush-out,0) * -7deg));
  transform-origin:50% 82%;will-change:transform}
/* Palavras da cena na fonte dos titulos, sem serifa. Escalonadas: Beleza le
   primeiro, acima. */
.brush-word{font:500 clamp(38px,5vw,78px)/1 var(--serif);letter-spacing:-.02em}
.brush-left{top:45%}
.brush-right{top:57%}
@media(max-width:850px){
  /* Ao lado do cabo, onde o pincel e estreito; Sofisticacao sai da borda de
     baixo, onde ficava colada, e as duas se escalonam em vez de se espalhar.
     Sem serifa a palavra alarga: no tamanho antigo ela encostava no cabo. */
  .brush-word{font-size:clamp(20px,6vw,27px);letter-spacing:-.01em}
  .brush-left{top:55%;left:max(5vw,18px)}
  .brush-right{top:68%;right:max(5vw,18px)}
}
@media(prefers-reduced-motion:reduce){.brush-inner{transform:none}}
/* Logo do hero sem o slogan e sem os fios ao lado de STUDIO, apagados na
   propria imagem, sem perda. */
.hero-marca{display:inline-grid;justify-items:center;margin-bottom:25px}
.hero-marca .hero-logo,.mobile-layout.cinematic .hero-marca .hero-logo{margin:0}
@media(max-width:850px){
  .hero-marca{margin:0 auto 14px}
}
.mobile-layout.cinematic .hero-marca{margin:0 auto 14px}
/* CTA do carrossel centrado e com mais ar acima, em vez de colado a legenda.
   As legendas dividem a mesma celula, que tem a altura da maior; o botao fica
   no pe dela, entao nao sobe nem desce quando a legenda muda de tamanho. */
.sq-slide{align-items:stretch;gap:0}
.sq-slide p{margin-bottom:clamp(26px,3.2vw,38px)}
.sq-slide .btn-pk{align-self:center;margin-top:auto}
@media(min-width:900px){
  .sq-slide{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0}
}

/* Botoes com brilho, a partir do glow-button que o cliente mandou. O prompt
   trazia o componente e o icone Sparkles, mas nao o CSS da classe: o visual e
   desenhado aqui, no rose do logo. html[data-theme] vence as regras do dark.css,
   que carrega depois deste arquivo. */
html[data-theme] .glow-btn{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  border-radius:999px;border:1px solid rgba(255,212,218,.6);
  background:linear-gradient(180deg,#f4b6be,#e4909b);color:#2a1016;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -1px 0 rgba(120,30,45,.22) inset,
    0 10px 30px -12px rgba(239,163,173,.8);
  transition:transform .2s var(--ease),box-shadow .35s var(--ease)}
/* a luz que atravessa o botao no hover */
html[data-theme] .glow-btn::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.55) 49%,transparent 66%);
  transform:translateX(-125%);transition:transform .75s var(--ease)}
/* Sparkles do lucide, na cor do texto */
html[data-theme] .glow-btn::after{content:'';display:block;position:static;inset:auto;translate:none;transition:none;pointer-events:none;
  flex:0 0 auto;width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%27%2F%3E%3Cpath%20d%3D%27M20%203v4%27%2F%3E%3Cpath%20d%3D%27M22%205h-4%27%2F%3E%3Cpath%20d%3D%27M4%2017v2%27%2F%3E%3Cpath%20d%3D%27M5%2018H3%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%27%2F%3E%3Cpath%20d%3D%27M20%203v4%27%2F%3E%3Cpath%20d%3D%27M22%205h-4%27%2F%3E%3Cpath%20d%3D%27M4%2017v2%27%2F%3E%3Cpath%20d%3D%27M5%2018H3%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
html[data-theme] .glow-btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(120,30,45,.22) inset,
    0 14px 38px -12px rgba(239,163,173,.95),0 0 26px 1px rgba(239,163,173,.32)}
html[data-theme] .glow-btn:hover::before{transform:translateX(125%)}
html[data-theme] .glow-btn:hover::after{translate:none;animation:faisca .8s var(--ease)}
html[data-theme] .glow-btn:active,html[data-theme] .glow-btn[data-state="clicked"]{transform:scale(.96);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 4px rgba(239,163,173,.28),0 8px 28px -10px rgba(239,163,173,1)}
html[data-theme] .glow-btn:focus-visible{outline:2px solid #f4b6be;outline-offset:3px}
@keyframes faisca{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.28) rotate(20deg)}}
/* setas do carrossel: brilho e clique, sem o Sparkles, que brigaria com a seta */
html[data-theme] .glow-icone{border-radius:10px;gap:0}
html[data-theme] .glow-icone::after{display:none}
@media(prefers-reduced-motion:reduce){
  html[data-theme] .glow-btn,html[data-theme] .glow-btn::before{transition:none}
  html[data-theme] .glow-btn:hover::after{animation:none}
}
/* Beleza e Sofisticacao: a palavra sobe de leve e as letras acendem em
   sequencia, da esquerda para a direita; na saida, a ordem se inverte. So
   opacidade e transform. Substitui o deslize pelas laterais. */
.brush-left,.brush-right{opacity:1}
.brush-left{--w:var(--word-a,0)}
.brush-right{--w:var(--word-b,0)}
.brush-left,.brush-right{translate:0 calc(-50% + (1 - var(--w)) * .34em)}
.brush-word .letra{opacity:clamp(0,calc(var(--w) * 3.3 - var(--i) / (var(--n) - 1)),1)}

/* Localizacao: o mapa no lugar do cartao, e so o botao embaixo. Carrega sob
   demanda (loading=lazy), porque o Google Maps e pesado para o topo da pagina.
   No tema escuro um filtro escurece o mapa, senao ele vira um retangulo branco. */
#mapa .map-box{border:0;border-radius:0;background:none;overflow:visible}
#mapa .mapa-quadro{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  border:1px solid rgba(239,163,173,.22);background:#0d0a0b}
#mapa .mapa-quadro iframe{display:block;width:100%;height:100%;border:0}
[data-theme="dark"] #mapa .mapa-quadro iframe{filter:invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.92)}
#mapa .location-actions{margin-top:20px}
/* No desktop: titulo em cima, mapa largo no meio e o botao centrado embaixo. */
@media(min-width:900px){
  #mapa .mapa-quadro{aspect-ratio:21/9}
  #mapa .location-actions{align-items:center;margin-top:28px}
}
@media(max-width:899px){
  #mapa .map-box{margin-top:26px}
  #mapa .location-actions,#mapa .location-actions .btn-pk{width:100%}
}

/* Idioma na navbar. No celular o botao mora dentro do menu, porque a barra ja
   leva o logo, o Agendar e o menu. */
.nb-acoes{display:flex;align-items:center;gap:14px}
.nb-prefs{display:flex;align-items:center;gap:8px}
.pref-btn{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;
  font:600 11px/1 var(--sans);letter-spacing:.12em;transition:border-color .25s var(--ease)}
.pref-btn:hover{border-color:var(--rose)}
.pref-btn:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.nb-prefs-mob{justify-content:center}
@media(max-width:850px){.nb-acoes>.nb-prefs{display:none}}
.mobile-layout .nb-acoes>.nb-prefs{display:none}
@media(min-width:851px){html:not(.mobile-layout) .nb-prefs-mob{display:none}}


/* Ingles salvo: esconde a pagina ate o dicionario chegar (no maximo 1,5s). */
html.carrega-idioma body{visibility:hidden}

/* Retrato inteiro na tela, centrado na altura do texto. O corte reto da
   cintura, que e da propria foto, se desfaz no preto em vez de aparecer. */
html:not(.mobile-layout) .hero-layout{grid-template-columns:46% 54%;padding-bottom:60px}
html:not(.mobile-layout) .hero-photo{align-self:center;max-width:none;
  width:min(780px,calc(100% + 60px),calc(100vh - var(--nav) - 100px));
  width:min(780px,calc(100% + 60px),calc(100svh - var(--nav) - 100px))}
.hero-photo img{-webkit-mask-image:linear-gradient(#000 76%,transparent 99%);mask-image:linear-gradient(#000 76%,transparent 99%)}
/* No celular a foto passa da coluna; as laterais da imagem sao transparentes,
   entao o que sai da tela e so o vazio em volta dela. */
.mobile-layout .hero-photo{width:min(104%,380px);max-width:none}
.mobile-layout.cinematic .hero-layout{grid-template-rows:auto 1fr;padding-bottom:0;row-gap:4px}
.mobile-layout.cinematic .hero-photo{align-self:end}

/* Texto do hero: mais leve e com mais ar entre as linhas. */
.hero-description{font-weight:400;font-size:15px;line-height:1.85;letter-spacing:.005em;max-width:480px;text-wrap:pretty}
.mobile-layout .hero-description,.mobile-layout.cinematic .hero-description{font-size:14px;line-height:1.75;max-width:370px;margin-bottom:8px}

/* Contato em cartoes, no mesmo desenho dos servicos, com os botoes alinhados na base. */
#contato .ctc-grid{max-width:none;gap:20px}
#contato .ctc-card{padding:36px 34px;gap:18px;border:1px solid rgba(239,163,173,.22);border-radius:18px;
  background:linear-gradient(145deg,rgba(239,163,173,.075),transparent 62%)}
#contato .ctc-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(239,163,173,.3);background:rgba(239,163,173,.06)}
#contato .ctc-ico svg{width:20px;height:20px}
#contato .ctc-card p{flex:1;text-wrap:pretty}
@media(max-width:850px){#contato .ctc-grid{gap:16px}#contato .ctc-card{padding:28px 24px}}

/* Carrossel: rosto centrado nas fotos em que o corte padrao pegava a testa e
   deixava o queixo de fora. */
.sq-panel .foco-flores{object-position:55% 45%}
.sq-panel .foco-joia{object-position:50% 56%}
.sq-panel .foco-cachos{object-position:50% 42%}

/* Contorno de luz (acenderLuz, no script.js): canvas atras da foto, 10% maior
   em cada lado. */
.hero-photo img{display:block}
.hero-flare{position:absolute;left:-10%;top:-10%;width:120%;height:120%;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 68%,transparent 88%);mask-image:linear-gradient(#000 68%,transparent 88%)}

/* Precos e WhatsApp nos tres servicos, empurrados para o pe do cartao. */
#servicos .mp-card .service-preco{margin:auto 0 0;font:700 clamp(26px,2.3vw,32px)/1.1 var(--serif);
  letter-spacing:-.01em;color:var(--rose);max-width:none}
#servicos .mp-card .service-orcamento{font-size:clamp(20px,1.7vw,24px)}
#servicos .mp-card .btn-pk{align-self:flex-start}

/* Lenis 1.3.26 (MIT), o CSS da biblioteca, embutido para nao bloquear a pintura
   com mais uma requisicao. */
html.lenis,html.lenis body{height:auto;}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip;}.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain;}.lenis.lenis-smooth iframe{pointer-events:none;}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete;}