/* ========== FRENTES B: três frentes com prova real ========== */
.pv{padding:90px 0 40px}
.pv h2{max-width:20ch}
.pv-l{display:grid;gap:34px;margin-top:60px}
.pv-i{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(22px,4vw,56px);align-items:center;padding:30px;border:1px solid var(--linha);border-radius:28px;background:var(--carvao)}
.pv-i:nth-child(even){grid-template-columns:1.25fr 1fr}.pv-i:nth-child(even) .pv-v{order:-1}
.pv-n{font-family:var(--mono);color:var(--roxo);font-weight:700;font-size:14px}
.pv-i h3{font-size:clamp(34px,5vw,60px);margin:14px 0 10px}
.pv-i p{color:var(--texto-suave);max-width:38ch}
.pv-i ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 22px}
.pv-i li{padding:6px 14px;border:1px solid var(--linha);border-radius:999px;font-size:14px;color:var(--texto-suave)}
.pv-v{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:#000}
.pv-v img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pv-i:hover .pv-v img{transform:scale(1.05)}
.pv-v em{position:absolute;left:14px;bottom:14px;font-style:normal;font-family:var(--mono);font-size:12px;background:rgba(10,10,11,.8);backdrop-filter:blur(8px);padding:7px 12px;border-radius:999px;border:1px solid var(--linha)}
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}.rv.ok{opacity:1;transform:none}
@media(max-width:820px){.pv-i,.pv-i:nth-child(even){grid-template-columns:1fr;padding:20px}.pv-i:nth-child(even) .pv-v{order:0}}

/* ========== FRENTES C: antes e depois ========== */
.ad{padding:90px 0}
.ad-w{margin-top:48px;display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.ad-box{position:relative;aspect-ratio:720/500;border-radius:26px;overflow:hidden;border:1px solid var(--linha);user-select:none;-webkit-user-select:none;background:#121214}
.ad-box>div{position:absolute;inset:0;background-image:url(img/cases/horizon-cell/03-antes-e-depois.webp);background-size:250% auto;background-repeat:no-repeat}
.ad-a{background-position:12.3% 65%}
.ad-d{background-position:87.6% 65%;clip-path:inset(0 0 0 calc(var(--p,50) * 1%))}
.ad-box b{position:absolute;top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;padding:6px 12px;border-radius:999px;background:rgba(10,10,11,.75);border:1px solid var(--linha)}
.ad-box b.a{left:16px}.ad-box b.d{right:16px;color:#FB923C;border-color:#FB923C}
.ad-box .al{position:absolute;top:0;bottom:0;left:calc(var(--p,50) * 1%);width:2px;margin-left:-1px;background:var(--branco);pointer-events:none}
.ad-box .al::after{content:"↔";position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--branco);color:#0A0A0B;display:grid;place-items:center;font-size:20px;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.ad-box input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ad-box:has(input:focus-visible){outline:2px solid var(--roxo);outline-offset:3px}
.ad-t h3{font-size:clamp(26px,3.4vw,40px);margin:12px 0 12px}
.ad-t p{color:var(--texto-suave)}
.ad-t .btn{margin-top:22px}
@media(max-width:820px){.ad-w{grid-template-columns:1fr}}

/* ========== PORTFÓLIO 1: cases em tela cheia ========== */
.pf1{position:relative}
.pf1 .pn{position:sticky;top:68px;height:calc(100vh - 68px);min-height:520px;display:grid;grid-template-columns:1.25fr 1fr;overflow:hidden;background:var(--bg,#111);color:var(--fg,#fff);border-top-left-radius:28px;border-top-right-radius:28px;box-shadow:0 -24px 60px rgba(0,0,0,.45)}
.pf1 .pn-i{position:relative;overflow:hidden}
.pf1 .pn-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.12);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.pf1 .pn.vis .pn-i img{transform:scale(1)}
.pf1 .pn-t{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(24px,5vw,64px)}
.pf1 .pn-t .tag{color:var(--ac,#8B5CF6)}
.pf1 .pn-t h3{font-size:clamp(38px,6vw,84px);line-height:.95;text-transform:uppercase;letter-spacing:-.035em}
.pf1 .pn-t p{opacity:.8;max-width:36ch}
.pf1 .pn-t ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pf1 .pn-t li{padding:6px 14px;border:1px solid currentColor;border-radius:999px;font-size:14px;opacity:.75}
.pf1 .pn-t .btn{align-self:flex-start;background:var(--fg,#fff);color:var(--bg,#111)}
.pf1 .pn-n{position:absolute;right:24px;top:20px;font-family:var(--mono);font-size:13px;opacity:.7;z-index:2}
.pf1 .pn-t>*{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.pf1 .pn.vis .pn-t>*{opacity:1;transform:none}
.pf1 .pn.vis .pn-t>*:nth-child(2){transition-delay:.08s}.pf1 .pn.vis .pn-t>*:nth-child(3){transition-delay:.16s}.pf1 .pn.vis .pn-t>*:nth-child(4){transition-delay:.24s}.pf1 .pn.vis .pn-t>*:nth-child(5){transition-delay:.32s}
.pf1-cab{padding:90px 0 50px}
@media(max-width:820px){.pf1 .pn{grid-template-columns:1fr;grid-template-rows:38% 1fr;min-height:0}.pf1 .pn-t{padding:20px;gap:10px;justify-content:flex-start}.pf1 .pn-t h3{font-size:clamp(30px,10vw,44px)}.pf1 .pn-t p{font-size:15px}}

/* Portfólio v2: Cuberto + editorial + cases em tela cheia */
.v2-int{padding:80px 0 70px}
.v2-int .tag{display:block;margin-bottom:22px}
.v2-int h2{font-size:clamp(44px,8.4vw,128px);font-weight:700;line-height:.95;letter-spacing:-.04em;max-width:13ch}
.v2-int h2 em{font-style:normal;color:var(--roxo)}
.v2-num{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(50px,8vw,110px);border-top:1px solid var(--linha);padding-top:34px}
.v2-num b{display:block;font-size:clamp(64px,13vw,190px);line-height:.9;letter-spacing:-.05em;font-weight:500}
.v2-num span{display:block;margin-top:14px;color:var(--texto-suave);font-size:clamp(14px,1.6vw,18px)}
.v2-dest{padding:0 0 0}
.v2-dest-t{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:26px}
.v2-dest-t h2{font-size:clamp(28px,4vw,48px)}

/* seção clara */
.v2-claro{position:relative;z-index:5;background:#F1F0EC;color:#0A0A0B;border-top-left-radius:clamp(28px,6vw,72px);border-top-right-radius:clamp(28px,6vw,72px);margin-top:-1px;padding:clamp(70px,10vw,140px) 0 clamp(70px,9vw,120px)}
.v2-claro .tag{color:#5B21B6;display:block;margin-bottom:20px}
.v2-claro h2{font-size:clamp(40px,7.6vw,112px);line-height:.95;letter-spacing:-.04em;font-weight:700;max-width:12ch}
.v2-fil{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(34px,5vw,64px) 0 clamp(34px,5vw,56px)}
.v2-fil button{padding:12px 24px;border-radius:999px;border:1.5px solid rgba(10,10,11,.18);background:transparent;font-weight:700;font-size:16px;cursor:pointer;color:#0A0A0B;transition:background .25s,color .25s,border-color .25s}
.v2-fil button:hover{border-color:#0A0A0B}
.v2-fil button[aria-pressed=true]{background:#0A0A0B;color:#fff;border-color:#0A0A0B}
.v2-fil button i{font-style:normal;font-family:var(--mono);font-size:12px;opacity:.55;margin-left:8px}
.v2-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,80px) clamp(24px,4vw,56px);align-items:start}
.v2-c{display:block;position:relative}
.v2-c.b{margin-top:clamp(40px,8vw,120px);margin-bottom:calc(clamp(40px,8vw,120px) * -1)}
.v2-m{position:relative;aspect-ratio:1.3/1;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}
.v2-m img{will-change:transform;transition:scale .9s cubic-bezier(.2,.8,.2,1)}
.v2-m img.fl{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;transform:translateY(var(--py,0px))}
.v2-m img.lg{position:relative;max-width:56%;max-height:46%;object-fit:contain}
.v2-c:hover .v2-m img{scale:1.05}
.v2-seta{position:absolute;right:16px;bottom:16px;width:54px;height:54px;border-radius:50%;background:#fff;color:#0A0A0B;display:grid;place-items:center;font-size:22px;transform:scale(0) rotate(-45deg);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:2;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.v2-c:hover .v2-seta,.v2-c:focus-visible .v2-seta{transform:none}
.v2-leg{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-top:18px}
.v2-leg b{font-size:clamp(20px,2.2vw,28px);line-height:1.1;letter-spacing:-.02em;font-weight:700}
.v2-leg p{font-size:clamp(14px,1.4vw,17px);color:rgba(10,10,11,.62);margin-top:6px;max-width:38ch;line-height:1.4}
.v2-leg small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(10,10,11,.5);white-space:nowrap;padding-top:6px}
.v2-in{opacity:0;transform:translateY(46px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}.v2-in.ok{opacity:1;transform:none}
.v2-fim{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(70px,9vw,130px);padding-top:clamp(40px,6vw,80px);border-top:1px solid rgba(10,10,11,.14)}
.v2-fim h3{font-size:clamp(32px,5.6vw,76px);line-height:1;letter-spacing:-.04em;max-width:14ch}
.v2-fim a{margin-top:30px;padding:20px 38px;border-radius:999px;background:#0A0A0B;color:#fff;font-weight:700;font-size:18px;transition:transform .25s,background .25s}
.v2-fim a:hover{transform:translateY(-3px);background:#5B21B6}
@media(max-width:700px){.v2-g{grid-template-columns:1fr}.v2-c.b{margin:0}.v2-leg small{display:none}.v2-num{gap:10px}}
@media(prefers-reduced-motion:reduce){.v2-in{opacity:1;transform:none}.v2-m img.fl{transform:none}}

.pv h2,.ad h2{font-size:clamp(30px,5vw,52px)}
.v2-claro{border-bottom-left-radius:clamp(28px,6vw,72px);border-bottom-right-radius:clamp(28px,6vw,72px)}
.pf1 .pn{top:68px}
.pv h2,.ad h2,.v2-int h2,.v2-claro h2{text-wrap:balance}

/* ===== portfólio: fundo preto com aurora animada (substitui o fundo claro) ===== */
.v2-claro{background:#0A0A0B;color:var(--branco);border-top:1px solid var(--linha);overflow:hidden;isolation:isolate}
.v2-claro>.wrap{position:relative;z-index:1}
.v2-claro .tag{color:var(--roxo)}
.v2-fil button{border-color:var(--linha);color:var(--branco)}
.v2-fil button:hover{border-color:var(--roxo)}
.v2-fil button[aria-pressed=true]{background:var(--branco);color:#0A0A0B;border-color:var(--branco)}
.v2-leg p{color:var(--texto-suave)}
.v2-leg small{color:var(--texto-suave)}
.v2-fim{border-top-color:var(--linha)}
.v2-fim a{background:var(--branco);color:#0A0A0B}
.v2-fim a:hover{background:var(--roxo);color:#fff}
.v2-m{box-shadow:0 0 0 1px rgba(250,250,250,.08)}
.v2-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.v2-bg i{position:absolute;width:min(70vw,820px);aspect-ratio:1;border-radius:50%;will-change:transform;opacity:.55}
.v2-bg i:nth-child(1){left:-18%;top:2%;background:radial-gradient(closest-side,rgba(139,92,246,.55),rgba(139,92,246,0) 70%);animation:v2a 22s ease-in-out infinite alternate}
.v2-bg i:nth-child(2){right:-22%;top:30%;background:radial-gradient(closest-side,rgba(91,33,182,.6),rgba(91,33,182,0) 70%);animation:v2b 27s ease-in-out infinite alternate}
.v2-bg i:nth-child(3){left:6%;top:62%;background:radial-gradient(closest-side,rgba(167,139,250,.38),rgba(167,139,250,0) 70%);animation:v2c 31s ease-in-out infinite alternate}
.v2-bg i:nth-child(4){right:-10%;top:90%;background:radial-gradient(closest-side,rgba(139,92,246,.5),rgba(139,92,246,0) 70%);animation:v2a 25s ease-in-out infinite alternate-reverse}
@keyframes v2a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(18vw,120px,0) scale(1.25)}}
@keyframes v2b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-20vw,-140px,0) scale(.85)}}
@keyframes v2c{from{transform:translate3d(0,0,0) scale(.9)}to{transform:translate3d(16vw,-100px,0) scale(1.2)}}
@media(max-width:700px){.v2-bg i{width:120vw;opacity:.45}}
@media(prefers-reduced-motion:reduce){.v2-bg i{animation:none}}
.v2-bg i{width:min(85vw,1000px);opacity:1}
.v2-bg i:nth-child(1){background:radial-gradient(closest-side,rgba(139,92,246,.75),rgba(139,92,246,0) 72%)}
.v2-bg i:nth-child(2){background:radial-gradient(closest-side,rgba(109,40,217,.8),rgba(109,40,217,0) 72%)}
.v2-bg i:nth-child(3){background:radial-gradient(closest-side,rgba(167,139,250,.55),rgba(167,139,250,0) 72%)}
.v2-bg i:nth-child(4){background:radial-gradient(closest-side,rgba(139,92,246,.7),rgba(139,92,246,0) 72%)}

/* ===== galeria 3D (túnel de projetos) ===== */
.tun{position:relative;height:520vh;padding:0;background:#0A0A0B}
.tun[hidden]{display:none}
.tun-p{position:sticky;top:0;height:100vh;overflow:hidden}
.tun canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.tun-p::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.92),rgba(10,10,11,0) 46%);pointer-events:none}
.tun-top{position:absolute;z-index:2;left:max(20px,calc((100% - 1120px)/2));right:max(20px,calc((100% - 1120px)/2));top:96px;display:flex;align-items:center;gap:18px;pointer-events:none}
.tun-b{flex:1;max-width:220px;height:2px;background:var(--linha);position:relative}
.tun-b::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--roxo);transition:width .5s}
.tun-txt{position:absolute;z-index:2;left:max(20px,calc((100% - 1120px)/2));bottom:clamp(26px,7vh,72px);max-width:min(560px,calc(100% - 40px));pointer-events:none}
.tun-txt>*{animation:tun-in .55s cubic-bezier(.2,.8,.2,1) both}
.tun-txt>.troca{animation:none}
.tun-n{display:block;font-family:var(--mono);font-size:13px;color:var(--roxo);letter-spacing:.08em;margin-bottom:10px}
.tun-t{font-size:clamp(38px,6.4vw,92px);line-height:.95;text-transform:uppercase;letter-spacing:-.035em}
.tun-s{color:var(--texto-suave);margin:12px 0 20px}
.tun-a{pointer-events:auto;background:var(--branco);color:#0A0A0B}
.tun-a:hover{background:var(--roxo);color:#fff}
.tun-dica{position:absolute;z-index:2;right:max(20px,calc((100% - 1120px)/2));bottom:clamp(26px,7vh,72px);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--texto-suave);transition:opacity .5s;pointer-events:none}
@keyframes tun-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:860px){.tun{height:460vh}.tun-top{top:84px}.tun-dica{display:none}}

/* ===== NFC: funcionalidades interativas + celular que "toca" o chaveiro ===== */
.nfc-f li{padding:0;display:block;position:relative}
.nfc-f li button{width:100%;background:none;border:0;text-align:left;cursor:pointer;display:flex;gap:16px;padding:14px 0;color:var(--texto-suave);font-size:16px;font-family:inherit;line-height:1.45;transition:color .3s}
.nfc-f li button span{font-family:var(--mono);color:var(--roxo);font-weight:700;font-size:14px;padding-top:2px}
.nfc-f li b{color:var(--texto-suave);font-weight:500;transition:color .3s}
.nfc-f .d{font-style:normal;display:none}
.nfc-f li.on b{color:var(--branco)}
.nfc-f li.on .d{display:inline;color:var(--texto-suave)}
.nfc-f li button:hover b{color:var(--branco)}
.nfc-f li::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--roxo)}
.nfc-f.auto li.on::after{animation:nfc-prog 4.8s linear forwards}
.nfc-f:not(.auto) li.on::after{width:100%}
@keyframes nfc-prog{to{width:100%}}
.nfc .cena{position:relative}
.nfc-ph{container-type:inline-size;position:absolute;right:-2%;bottom:-4%;width:clamp(96px,31%,150px);aspect-ratio:9/18.5;border-radius:18px;background:#0b0b0d;border:3px solid #34343b;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(250,250,250,.06);transform:rotate(8deg);overflow:hidden;z-index:3}
.nfc-ph.toque{animation:nfc-toque .8s cubic-bezier(.2,.8,.2,1)}
@keyframes nfc-toque{0%{transform:rotate(8deg) translate(0,0)}35%{transform:rotate(3deg) translate(-16px,-12px) scale(1.05)}60%{transform:rotate(4deg) translate(-12px,-9px) scale(1.04)}100%{transform:rotate(8deg) translate(0,0)}}
.ph-tela{position:absolute;inset:0;padding:12cqw 7cqw 7cqw;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;font-size:6.4cqw;line-height:1.25;color:#fff;background:#111}
.ph-tela.on{opacity:1;transform:none}
.ph-tela .av{display:block;width:13cqw;height:13cqw;border-radius:50%;background:linear-gradient(135deg,#8B5CF6,#5B21B6,#FB923C)}
.ph-top,.ph-wh{display:flex;align-items:center;gap:3cqw}
.ph-top b,.ph-wh b{font-size:6cqw}
.ph-btn{margin-top:4cqw;padding:2.6cqw 0;border-radius:2cqw;background:#5B21B6;text-align:center;font-weight:700;font-size:5.6cqw}
.ph-gr{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;margin-top:5cqw}
.ph-gr i{aspect-ratio:1;background:#2a2a33;border-radius:1cqw}.ph-gr i:nth-child(2n){background:#3b2a66}.ph-gr i:nth-child(3n){background:#26323f}
.ph-wa{margin:-12cqw -7cqw -7cqw;height:calc(100% + 19cqw);background:#0f1a15;padding:8cqw 5cqw 5cqw}
.ph-wh{background:#12372a;margin:0 -5cqw 5cqw;padding:5cqw 5cqw 3cqw}
.ph-wa p{max-width:78%;padding:2.6cqw 3.4cqw;border-radius:3cqw;margin-top:3cqw;font-size:5.4cqw}
.ph-wa .in{background:#1f2c27}.ph-wa .out{background:#128C4E;margin-left:auto}
.ph-bar{background:#26262c;border-radius:2cqw;padding:2cqw 3cqw;font-size:4.8cqw;color:#aaa;margin-bottom:5cqw;font-family:var(--mono)}
.ph-h{display:block;font-size:8cqw;line-height:1.1;margin-bottom:3cqw}
.ph-l{display:block;height:2cqw;border-radius:1cqw;background:#2d2d35;margin-top:2cqw;width:90%}.ph-l.c{width:62%}
.ph-img{display:block;margin-top:5cqw;height:22cqw;border-radius:2.4cqw;background:linear-gradient(135deg,#8B5CF6,#FB923C)}
.ph-gg{text-align:center;padding-top:8cqw}
.ph-st{font-size:10cqw;color:#FBBF24;letter-spacing:1cqw;margin-bottom:3cqw}
.ph-gg b{display:block;font-size:7cqw;line-height:1.15;margin-bottom:4cqw}
.ph-gg .ph-l{margin-inline:auto}
@media(max-width:860px){
  .nfc-expande .cena{overflow:visible}
  .nfc-ph{width:84px;right:-26px;bottom:-14px}
  .nfc-f li button{padding:9px 0;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.nfc-f.auto li.on::after{animation:none;width:100%}.nfc-ph.toque{animation:none}}
.tun-txt{display:flex;flex-direction:column;align-items:flex-start}
.nfc-ph{width:clamp(110px,37%,185px);right:-4%}
@media(max-width:860px){.nfc-ph{width:70px;right:-34px;bottom:-6px;border-width:2px;border-radius:14px}}

/* botão "Ver portfólio completo" na galeria 3D */
.tun-acoes{display:flex;flex-wrap:wrap;gap:10px;pointer-events:auto}
.tun-todos{background:rgba(10,10,11,.55);backdrop-filter:blur(8px);color:#fff;border-color:rgba(255,255,255,.38)}
.tun-todos:hover{background:var(--roxo-fundo);border-color:var(--roxo-fundo);color:#fff}
