/* WebVision360 — direção editorial, outubro de 2026 */
:root{--radius:4px;--gutter:clamp(22px,4vw,80px);--muted:#aaa49f}
body{background:#070707}
.grain-wrap{opacity:.035}
.nav{align-items:flex-start;padding-top:28px;background:linear-gradient(#07070799,transparent)}
.logo{font-size:21px;letter-spacing:-1px}.logo i{border-radius:0;transform:rotate(45deg);width:11px;height:11px}
.nav__links{margin-left:auto;margin-right:64px;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:5px 30px;border:0;border-radius:0;background:none;backdrop-filter:none}
.nav__links a{height:auto;padding:0;font-size:11px;line-height:1.6;text-transform:uppercase;letter-spacing:.08em;border-radius:0}
.nav__links a:hover{background:none;color:var(--accent)}
.nav__links a span{text-shadow:none;transition:color .2s}.nav__links a:hover span{transform:none}
.btn{border-radius:2px;padding:15px 22px;font-size:12px;letter-spacing:.02em}.btn::before{border-radius:0}
.nav>.btn{background:transparent;color:var(--text);border:1px solid #ffffff55;padding:12px 17px}
.nav>.btn:hover{color:var(--on-accent)}
.hero{height:max(800px,100svh);min-height:0;display:block;padding:0;isolation:isolate;background:radial-gradient(ellipse at 65% 36%,#a83c0c 0%,#451806 34%,#070707 73%)}
#blob{opacity:.55}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#070707 0%,transparent 55%)}
.hero__top{display:contents}
.hero__copy{position:absolute;left:var(--gutter);bottom:130px;width:30%;max-width:390px;z-index:5}
.hero__h1{font-family:Inter,"Inter Fallback",sans-serif;font-size:clamp(27px,2.7vw,44px);font-weight:500;line-height:1.1;letter-spacing:-.055em;margin-bottom:18px;max-width:none}
.hero__h1 em{color:var(--accent)}
.hero__intro{font-size:13px;line-height:1.65;max-width:310px;color:#c7beb8}
.hero__ctas{gap:20px;margin-top:25px}.hero__ctas .link-arrow{font-size:12px}
.status{font-size:9px;letter-spacing:.12em;color:#e3d9d2;margin-bottom:22px}.status i{width:6px;height:6px}
.hero__kicker{position:absolute;top:110px;left:var(--gutter);z-index:4;max-width:195px;font-size:11px;line-height:1.6;text-transform:uppercase;letter-spacing:.08em;color:#c7beb8}
.hero__kicker span{display:block;color:var(--accent);margin-bottom:10px}
.portrait{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);width:clamp(360px,43vw,650px);height:calc(100% - 155px);max-height:820px;aspect-ratio:auto;border:0;border-radius:0;z-index:3;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 65%,transparent 99%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 65%,transparent 99%)}
.portrait img{height:100%;width:100%;object-fit:cover;object-position:50% 25%;mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}
.portrait::after{background:linear-gradient(0deg,#070707 0%,transparent 55%);mix-blend-mode:multiply}
.hero__title{position:absolute;left:var(--gutter);right:var(--gutter);top:20%;z-index:2;font-family:Inter,"Inter Fallback",sans-serif;font-size:15.3vw;font-weight:500;line-height:1;letter-spacing:-.085em;pointer-events:none}
#heroTitle{justify-content:space-between;gap:0}.hero__title .line-mask{overflow:visible}
.hero__meta{position:absolute;right:var(--gutter);bottom:150px;z-index:4;gap:7px;max-width:190px}
.chip{display:block;padding:0;border:0;border-radius:0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:none;backdrop-filter:none}.chip b{margin-right:6px}
.hero__signature{color:#c4b9b1;font-size:11px;line-height:1.5;text-align:right;max-width:180px;margin-top:30px}
.hero__signature strong{display:block;color:var(--text);font-size:16px;font-weight:500}
.hero__bottom{position:absolute;bottom:0;left:var(--gutter);right:var(--gutter);z-index:5;margin:0;padding:22px 0;border-top:1px solid #ffffff26;font-size:9px;letter-spacing:.12em;color:#c4b9b1}
.scroll-ind i{height:20px}.hero__bottom>span:first-child::before{content:"+";color:var(--accent);font-size:20px;margin-right:14px}
.marquee{transform:none;margin:0;padding:24px 0;background:#070707;border-color:#ffffff26}.marquee__track{font-family:Inter,"Inter Fallback",sans-serif;font-size:clamp(24px,3.2vw,48px);font-weight:400;letter-spacing:-.05em}.marquee__track span::after{content:"↗"}
.eyebrow{font-size:10px;letter-spacing:.15em;margin-bottom:32px}.eyebrow::before{width:22px}
.h2{font-family:Inter,"Inter Fallback",sans-serif;font-weight:500;font-size:clamp(48px,8.4vw,138px);letter-spacing:-.075em;line-height:.96}
.about{padding-block:110px 90px;display:grid;grid-template-columns:1fr 3fr;column-gap:5vw}.about>.eyebrow{align-self:start;padding-top:10px}
.reveal-text{font-family:Inter,"Inter Fallback",sans-serif;font-weight:400;font-size:clamp(28px,3.4vw,56px);line-height:1.18;letter-spacing:-.045em}
.bento{grid-column:2;margin-top:45px;grid-template-columns:1fr 1fr;gap:30px}
.bento .card{grid-column:auto;background:none;border:0;border-top:1px solid var(--line);padding:22px 0;min-height:0;gap:24px;border-radius:0;color:var(--text)}
.bento .card::before{display:none}.bento .c-a h3,.bento .card h3{color:var(--muted);font-size:10px}.bento .card ul{font-family:Inter,"Inter Fallback",sans-serif;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0}.bento .c-b{grid-column:1/-1}
.tools{gap:10px 20px}.tools span{padding:0;background:none;border:0;font-size:12px;color:var(--muted)}
.work{padding-block:75px 100px;background:#101010;border-block:1px solid var(--line)}
.work__head{margin-bottom:55px;align-items:end}.work__head p{font-size:13px;max-width:260px}
.htrack{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:5vw;align-items:center}.project{width:100%;min-width:0}.project__media{aspect-ratio:16/10;border-radius:3px;border-color:#ffffff18}
.project__info{display:block;padding-top:22px}.project__info h3{font-family:Inter,"Inter Fallback",sans-serif;font-weight:500;font-size:clamp(24px,2.4vw,37px);letter-spacing:-.05em;margin-bottom:10px}.project__info>span{font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.project--end{display:block}.project--end a{width:auto;aspect-ratio:auto;padding:22px 0;border-radius:0;border:0;border-top:1px solid var(--line);font-family:Inter,"Inter Fallback",sans-serif;font-size:23px;line-height:1.2;text-align:left;display:block}.project--end a:hover{background:none;color:var(--accent)}
.case-note{font-size:13px;line-height:1.75;color:var(--muted);margin-bottom:32px}.case-note b{font-weight:500;color:var(--text);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:10px}.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:35px}.case-tags span{font-size:10px;padding:7px 9px;border:1px solid var(--line)}
.services{padding-block:110px 70px}.services__grid{display:block;margin-top:55px;border-top:1px solid var(--line)}
.service,.service--ai{display:grid;grid-template-columns:60px 1.2fr 1fr auto;gap:32px;align-items:start;min-height:0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:35px 0;color:var(--text);transition:padding .3s,background .3s}
.service:hover{padding-inline:16px;background:#111}.service::before{display:none}.service h3,.service--ai h3{font-family:Inter,"Inter Fallback",sans-serif;font-size:clamp(24px,2.6vw,40px);font-weight:500;line-height:1.08;letter-spacing:-.05em;text-transform:none}
.service p,.card.accent.service p{font-size:13px;color:#bdb8b4;line-height:1.75}.service .n{font-family:Inter,"Inter Fallback",sans-serif;font-size:12px;padding-top:5px;color:var(--accent)}.service .link-arrow{font-size:11px;white-space:nowrap;margin-top:6px}
.service--ai{grid-template-columns:60px 1.2fr 1fr auto}.service--ai>div,.service--ai .ai-copy{display:contents}.service--ai .badge-ai{grid-column:2;font-size:9px;color:var(--accent);background:none;padding:0;border:0;letter-spacing:.1em;position:relative;margin-bottom:-12px}.badge-ai::before{background:var(--accent)}
.service--ai h3{grid-column:2;margin-top:0!important}.service--ai p{grid-column:3;grid-row:1/3}.service--ai .link-arrow{grid-column:4;grid-row:1/3}.card.accent.service h3{color:var(--text)}.card.accent.service .link-arrow{color:var(--text);border-color:var(--line)}
.service--ai::after{content:"01";grid-column:1;grid-row:1/3;color:var(--accent);font-size:12px}
.process{padding-block:80px 90px}.steps{margin-top:55px}.step{grid-template-columns:100px 1fr 1fr;padding-block:36px;gap:32px}.step b{font-family:Inter,"Inter Fallback",sans-serif;font-size:clamp(35px,5vw,70px);font-weight:400;line-height:1}.step h3{font-family:Inter,"Inter Fallback",sans-serif;font-weight:400;font-size:clamp(26px,3.6vw,52px);letter-spacing:-.055em}.step p{font-size:13px}
.cta-band{border-radius:0;margin-top:0;background:var(--accent);color:var(--on-accent);border:0;padding-block:40px}.cta-band p{font-family:Inter,"Inter Fallback",sans-serif;font-weight:500;letter-spacing:-.05em}.cta-band .btn{background:#070707;color:var(--text)}
.faq{padding-block:100px 30px}.faq summary{font-family:Inter,"Inter Fallback",sans-serif;font-size:clamp(18px,2vw,28px);font-weight:400;letter-spacing:-.03em}.faq details p{font-size:14px}
.contact{padding-top:100px;background:radial-gradient(ellipse at 80% 100%,#7a2b0b55,transparent 60%)}.contact__big{font-family:Inter,"Inter Fallback",sans-serif;font-weight:500;letter-spacing:-.08em;font-size:clamp(56px,12.5vw,210px);line-height:1}.contact__big .o{color:var(--accent);-webkit-text-stroke:0}.contact__row p{font-size:14px}.magnet{box-shadow:none;border:1px solid var(--accent);font-size:13px}.contact__links{padding-bottom:70px}.footer-mark{font-family:Inter,"Inter Fallback",sans-serif;font-weight:500;font-size:16vw;letter-spacing:-.08em;color:var(--accent);-webkit-text-stroke:0;line-height:1;padding:20px var(--gutter) 0}
.wa-float{background:#151515;border:1px solid #ffffff30;color:var(--text);border-radius:3px;box-shadow:0 12px 35px #0005;font-size:12px}.wa-float svg{color:var(--accent)}
@media(min-width:1600px){.hero__copy{bottom:155px}.hero__meta{bottom:175px}}
@media(max-width:1100px){.nav__links{margin-right:30px}.hero__copy{width:33%}.hero__h1{font-size:30px}.hero__ctas{gap:14px}.hero__ctas .btn{padding:13px}.htrack{grid-template-columns:minmax(0,1fr) 210px}.service,.service--ai{grid-template-columns:35px 1fr 1fr;gap:22px}.service>.link-arrow,.service--ai .link-arrow{grid-column:3;grid-row:auto}.service--ai p{grid-row:1/3}.service--ai::after{grid-row:1/3}}
@media(max-width:860px){.nav{padding-top:20px}.nav__links{display:none}.menu-btn{border-radius:2px;background:var(--accent)}.hero{height:auto;min-height:980px}.portrait{width:500px;height:660px;top:85px;bottom:auto;left:57%}.hero__title{top:265px;font-size:15.2vw}.hero__kicker{top:125px;font-size:9px;max-width:130px}.hero__copy{bottom:100px;max-width:460px;width:70%}.hero__h1{font-size:36px}.hero__intro{max-width:360px}.hero__meta{bottom:130px;max-width:140px;display:flex;flex-direction:column;align-items:flex-end;right:var(--gutter)}.hero__signature{display:none}.chip{font-size:9px}.hero__bottom{font-size:8px}.about{grid-template-columns:1fr;padding-block:75px}.bento{grid-column:1}.work{padding-block:65px}.htrack{grid-template-columns:1fr}.project--end{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:start}.project--end a{grid-column:2;grid-row:1/3;width:100%;margin:0}.case-tags{margin-bottom:0}.services{padding-block:75px 40px}.service,.service--ai{grid-template-columns:35px 1fr 1fr}.service h3{font-size:28px}.process{padding-block:60px}.step{grid-template-columns:60px 1fr}.step p{grid-column:2}.step b{grid-row:1/3}.step h3{font-size:32px}.contact__links{padding-bottom:45px}}
@media(max-width:600px){.hero{min-height:1010px}.logo{font-size:18px}.portrait{width:390px;height:590px;left:53%;top:90px}.hero__title{top:280px;font-size:15.2vw}#heroTitle{flex-direction:row}#heroTitle .wd:last-child{align-self:auto}.hero__kicker{top:104px;max-width:115px;font-size:8px}.hero__copy{bottom:100px;width:calc(100% - 2 * var(--gutter));max-width:none}.hero__h1{font-size:34px;max-width:350px}.hero__intro{font-size:12px;max-width:340px}.hero__meta{top:470px;bottom:auto;left:var(--gutter);right:auto;max-width:none;flex-direction:row;flex-wrap:wrap;gap:10px}.chip{font-size:8px}.hero__meta .chip:last-of-type{display:none}.status{font-size:8px;margin-bottom:15px}.hero__ctas{margin-top:22px}.hero__bottom>span:first-child{max-width:125px}.hero__bottom>span:last-child{font-size:8px}.marquee{padding:19px 0}.marquee__track{font-size:27px}.eyebrow{margin-bottom:25px}.reveal-text{font-size:29px}.bento{grid-template-columns:1fr;gap:5px;margin-top:30px}.bento .c-b{grid-column:1}.bento .card{gap:18px}.bento .card ul{font-size:15px}.work__head{margin-bottom:30px}.work__head p{max-width:280px}.project__media{aspect-ratio:1.15}.project__bar{font-size:8px;padding-inline:10px}.project__bar em{margin-left:4px}.project__hint{font-size:10px;right:10px;bottom:10px;padding:8px}.project__info h3{font-size:25px}.project--end{grid-template-columns:1fr}.project--end a{grid-column:1;grid-row:auto;font-size:23px;margin-top:25px}.case-note{margin-bottom:20px}.services__grid{margin-top:35px}.service,.service--ai{grid-template-columns:25px 1fr;gap:16px;padding-block:27px}.service h3,.service--ai h3{grid-column:2;font-size:29px}.service p,.service--ai p{grid-column:2;grid-row:auto}.service>.link-arrow,.service--ai .link-arrow{grid-column:2;grid-row:auto}.service--ai .badge-ai{margin-bottom:0;font-size:8px}.service--ai::after{grid-row:1/3}.service .n{grid-column:1;grid-row:1/3}.service:hover{padding-inline:0}.step{grid-template-columns:45px 1fr;gap:15px;padding-inline:0}.step:hover{padding-inline:8px}.step b{font-size:38px}.step h3{font-size:29px}.step p{font-size:12px}.cta-band{margin-inline:var(--gutter);padding:28px 22px}.cta-band p{font-size:27px}.faq{padding-top:70px}.faq summary{gap:15px;padding-block:22px}.faq summary i{width:30px;height:30px}.contact{padding-top:75px}.contact__big{font-size:13vw}.contact__row{margin-top:30px;gap:30px}.contact__links{grid-template-columns:1fr;gap:28px}.contact__row p{font-size:13px}.magnet{width:150px}.footer-mark{padding-top:5px}footer{font-size:10px;padding-bottom:20px}.wa-float{padding:12px}}
.menu-open{overflow:hidden}.mobile-menu{gap:18px}.mobile-menu a{font-family:Inter,"Inter Fallback",sans-serif;font-weight:500;font-size:clamp(38px,10vw,70px);letter-spacing:-.06em}
@media(max-width:600px){.hero{min-height:870px}.portrait{top:70px;height:450px;width:340px}.hero__title{top:230px}.hero__meta{top:413px}.hero__h1{font-size:31px}.hero__copy{bottom:90px}.hero__bottom{padding-block:18px}.hero__bottom>span:first-child::before{margin-right:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero__title .ch{transform:none!important}.status,.hero__meta .chip,.hero__bottom>*{opacity:1!important}.reveal-text .w{opacity:1!important}}

/* Portfólio: vitrines sincronizadas à rolagem da página. */
.portfolio-story{height:280svh;overflow:visible}
.portfolio-story .htrack{position:sticky;top:110px;align-items:center}
.portfolio-preview{height:clamp(280px,61svh,620px);aspect-ratio:auto;border:1px solid #ffffff24;background:#1b231f}
.portfolio-preview .project__bar{height:34px;background:#171c1a;color:#c8c5b9}
.portfolio-preview .project__bar>span{margin-left:auto;font-size:15px;color:#c9a66b}
.project__viewport{position:absolute;inset:34px 0 3px;overflow:hidden}
.portfolio-preview .project__viewport img,.project:hover .portfolio-preview .project__viewport img{position:absolute;inset:0 auto auto 0;width:100%;height:auto;max-width:none;object-fit:initial;object-position:initial;transform:translate3d(0,var(--preview-shift,0px),0);transition:none;will-change:transform}
.portfolio-preview .project__hint,.project:hover .portfolio-preview .project__hint{display:block;opacity:1;font-size:10px;border-radius:2px;background:#111d;pointer-events:none;transition:opacity .25s}
.portfolio-story.is-scrolling .project__hint{opacity:0!important}
.project__scroll-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff10}
.project__scroll-progress>span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;will-change:transform}
.case-scroll-note{font-size:11px;line-height:1.8;color:var(--muted);margin:0 0 25px}
.portfolio-story .project__info h3{font-size:clamp(22px,2.1vw,34px);line-height:1.15}
@media(max-width:860px){.portfolio-story{height:260svh}.portfolio-story .htrack{top:90px;gap:25px}.portfolio-preview{height:48svh;min-height:250px}.portfolio-story .project--end{display:block}.portfolio-story .project--end>.case-note{margin:0;font-size:12px;line-height:1.6}.portfolio-story .case-tags{margin-top:15px}.portfolio-story .case-scroll-note,.portfolio-story .project--end>a{display:none}.portfolio-story .project__info{padding-top:15px}.portfolio-story .project__info>span{font-size:9px}.portfolio-story .project__info h3{font-size:25px}.portfolio-story .project__bar em{font-size:10px}}
@media(max-width:600px){.portfolio-story{height:245svh}.portfolio-story .htrack{top:90px;gap:18px}.portfolio-preview{height:43svh;min-height:240px}.portfolio-story .project__info h3{font-size:23px}.portfolio-story .case-tags span{font-size:9px;padding:5px 7px}.portfolio-preview .project__hint{font-size:9px}}
@media(prefers-reduced-motion:reduce){.portfolio-story{height:auto}.portfolio-story .htrack{position:relative;top:auto}.portfolio-preview .project__hint{display:none}.portfolio-preview .project__viewport img{will-change:auto}.project__scroll-progress{display:none}}
@media(max-height:650px) and (max-width:860px){.portfolio-story .htrack{top:24px}.portfolio-story .project--end{display:none}.portfolio-preview{height:52svh;min-height:180px}.portfolio-story .project__info h3{font-size:20px}}

.portfolio-story + .portfolio-story{margin-top:100px;border-top:1px solid var(--line)}

/* Mimora executa a página original em uma janela isolada, dimensionada à moldura. */
[data-project-live] .project__viewport{background:#fff8ee}
[data-preview-channel="webvision-lumiere-preview-v1"] .project__viewport{background:#161b1a}
.project__live-frame{position:absolute;top:0;left:0;border:0;max-width:none;transform-origin:top left;pointer-events:none;opacity:0;transition:opacity .25s}
.is-preview-ready .project__live-frame{opacity:1}
.project__live-status{display:none;position:absolute;right:12px;bottom:12px;z-index:3;padding:10px 14px;background:#fff8eef2;border:1px solid #77344733;color:#773447;font-size:11px;line-height:1.6}
.is-preview-fallback .project__live-status{display:block}
.is-preview-ready .project__live-status{display:none}
.portfolio-preview .project__viewport .project__poster,.project:hover .portfolio-preview .project__viewport .project__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transform:none;transition:opacity .2s;pointer-events:none}
.is-preview-ready .project__poster{opacity:0}
@media(prefers-reduced-motion:reduce){.project__live-frame{transition:none}}