/* =====================================================
   Portfólio: apps, vídeos e motion
   Usado só em portfolio/index.html
===================================================== */

/* ── barra de progresso de rolagem ── */
.scroll-bar { position:fixed; top:0; left:0; height:3px; width:100%; z-index:1200; background:linear-gradient(90deg,var(--gold),var(--gold-h)); transform:scaleX(0); transform-origin:left; pointer-events:none; }

/* ── HERO ── */
.ph { background:var(--navy); position:relative; overflow:hidden; padding:calc(var(--nav-h) + 64px) 0 96px; }
.ph::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:64px 64px; animation:gridDrift 24s linear infinite; }
@keyframes gridDrift { to { background-position:64px 64px; } }
.ph__orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none; }
.ph__orb--1 { width:420px; height:420px; background:rgba(200,154,56,.35); top:-120px; right:8%; animation:orb 14s ease-in-out infinite; }
.ph__orb--2 { width:360px; height:360px; background:rgba(40,90,200,.35); bottom:-140px; left:-60px; animation:orb 18s ease-in-out infinite reverse; }
@keyframes orb { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(30px,-24px) scale(1.12); } }
.ph .container { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; }
.ph__label { display:inline-flex; align-items:center; gap:8px; background:rgba(200,154,56,.12); border:1px solid rgba(200,154,56,.28); color:var(--gold); font-size:.76rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; padding:6px 16px; border-radius:100px; margin-bottom:22px; }
.ph__label i { width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(200,154,56,.6); } 50% { box-shadow:0 0 0 8px rgba(200,154,56,0); } }
.ph h1 { color:#fff; font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.12; margin-bottom:20px; }
.ph h1 em { font-style:normal; background:linear-gradient(100deg,var(--gold) 20%,#f1d58a 50%,var(--gold) 80%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 5s linear infinite; }
@keyframes shine { to { background-position:-220% 0; } }
.ph__lead { color:rgba(255,255,255,.68); font-size:1.05rem; max-width:520px; margin-bottom:30px; }
.ph__actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:38px; }
.ph__stats { display:flex; gap:34px; flex-wrap:wrap; }
.ph__stat strong { display:block; color:#fff; font-size:2rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.ph__stat span { color:rgba(255,255,255,.5); font-size:.74rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; }

.ph__stage { position:relative; height:520px; perspective:1200px; }
.ph__phone { position:absolute; width:210px; will-change:transform; }
.ph__phone .phone { animation:floaty 7s ease-in-out infinite; }
.ph__phone--a { left:2%; top:70px; z-index:2; }
.ph__phone--b { left:34%; top:0; z-index:3; }
.ph__phone--b .phone { animation-delay:-2.3s; }
.ph__phone--c { right:0; top:96px; z-index:1; }
.ph__phone--c .phone { animation-delay:-4.6s; }
@keyframes floaty { 0%,100% { transform:translateY(0) rotate(var(--r,0deg)); } 50% { transform:translateY(-16px) rotate(var(--r,0deg)); } }
.ph__phone--a .phone { --r:-6deg; }
.ph__phone--c .phone { --r:6deg; }

/* ── MOLDURAS DE CELULAR / NAVEGADOR ── */
.phone { position:relative; background:#0a0f1d; border-radius:34px; padding:9px; box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1.5px rgba(255,255,255,.12) inset,0 0 0 1px rgba(0,0,0,.6); }
.phone::before { content:''; position:absolute; top:14px; left:50%; width:62px; height:16px; margin-left:-31px; background:#0a0f1d; border-radius:20px; z-index:3; }
.phone__screen { position:relative; border-radius:26px; overflow:hidden; background:#fff; aspect-ratio:390/844; }
.phone__screen img, .phone__screen video { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.phone__glare { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,transparent 38%); z-index:2; }

.browser { background:#0a0f1d; border-radius:14px; box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1); overflow:hidden; }
.browser__bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#141c33; }
.browser__bar i { width:10px; height:10px; border-radius:50%; background:#3a4466; }
.browser__bar i:nth-child(1) { background:#ff5f57; } .browser__bar i:nth-child(2) { background:#febc2e; } .browser__bar i:nth-child(3) { background:#28c840; }
.browser__bar span { margin-left:12px; flex:1; max-width:340px; background:#0a0f1d; color:rgba(255,255,255,.4); font-size:.7rem; padding:4px 12px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.browser__screen { position:relative; background:#fff; aspect-ratio:16/10; overflow:hidden; }
.browser__screen img, .browser__screen video { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

/* ── VÍDEOS ── */
.pv { background:var(--dark-bg); padding:100px 0; position:relative; overflow:hidden; }
.pv::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(200,154,56,.14),transparent 70%); }
.pv .container { position:relative; z-index:2; }
.sec-head { text-align:center; margin-bottom:44px; }
.sec-head__tag { display:inline-flex; background:rgba(200,154,56,.12); border:1px solid rgba(200,154,56,.28); color:var(--gold); font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:100px; margin-bottom:16px; }
.sec-head h2 { margin-bottom:12px; }
.sec-head p { max-width:560px; margin:0 auto; font-size:.97rem; color:var(--gray); }
.pv .sec-head h2 { color:#fff; } .pv .sec-head p { color:rgba(255,255,255,.6); }

.pv__tabs { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.pv__tab { font-family:inherit; cursor:pointer; padding:10px 20px; border-radius:100px; border:1.5px solid rgba(255,255,255,.18); background:transparent; color:rgba(255,255,255,.72); font-size:.84rem; font-weight:600; transition:all .25s; position:relative; overflow:hidden; }
.pv__tab:hover { border-color:var(--gold); color:#fff; }
.pv__tab[aria-selected="true"] { background:var(--gold); border-color:var(--gold); color:var(--navy); }
.pv__tab .prog { position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--navy); opacity:.5; }

.pv__panel { display:none; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.pv__panel.is-active { display:grid; animation:panelIn .6s var(--ease) both; }
@keyframes panelIn { from { opacity:0; transform:translateY(24px) scale(.98); } to { opacity:1; transform:none; } }
.pv__panel--mobile { grid-template-columns:1fr 300px; }
.pv__copy h3 { color:#fff; font-size:1.55rem; margin-bottom:12px; }
.pv__copy p { color:rgba(255,255,255,.65); font-size:.95rem; line-height:1.75; margin-bottom:20px; }
.pv__copy ul { list-style:none; display:grid; gap:10px; margin-bottom:26px; }
.pv__copy li { color:rgba(255,255,255,.82); font-size:.88rem; display:flex; gap:10px; align-items:flex-start; }
.pv__copy li::before { content:''; flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%; background:rgba(200,154,56,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C89A38' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.pv__chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.chip { font-size:.68rem; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; padding:4px 11px; border-radius:6px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }
.chip--live { background:rgba(40,200,120,.14); color:#4fe0a0; }
.chip--demo { background:rgba(200,154,56,.16); color:var(--gold-h); }
.pv__stage { position:relative; justify-self:center; width:100%; }
.pv__panel--mobile .pv__stage { max-width:300px; }
.pv__stage::after { content:''; position:absolute; inset:auto 8% -26px; height:30px; background:radial-gradient(ellipse,rgba(200,154,56,.28),transparent 70%); filter:blur(8px); }
.vid-ctrl { position:absolute; right:12px; bottom:12px; z-index:4; display:flex; gap:8px; }
.vid-btn { width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; background:rgba(13,27,62,.78); backdrop-filter:blur(6px); color:#fff; display:grid; place-items:center; transition:transform .2s,background .2s; }
.vid-btn:hover { background:var(--gold); color:var(--navy); transform:scale(1.08); }
.vid-btn svg { width:15px; height:15px; fill:currentColor; }
.vid-badge { position:absolute; left:12px; top:12px; z-index:4; display:flex; align-items:center; gap:6px; background:rgba(13,27,62,.78); backdrop-filter:blur(6px); color:#fff; font-size:.64rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; padding:5px 10px; border-radius:100px; }
.vid-badge i { width:6px; height:6px; border-radius:50%; background:#ff4d4d; animation:pulse 1.6s infinite; }
.phone .vid-badge { top:22px; left:50%; transform:translateX(-50%); }

/* ── GALERIA DE TELAS ── */
.pg { padding:100px 0 90px; overflow:hidden; background:var(--white-warm); }
.pg__filters { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.pg__rail { position:relative; }
.pg__rail::before, .pg__rail::after { content:''; position:absolute; top:0; bottom:0; width:90px; z-index:3; pointer-events:none; }
.pg__rail::before { left:0; background:linear-gradient(90deg,var(--white-warm),transparent); }
.pg__rail::after { right:0; background:linear-gradient(-90deg,var(--white-warm),transparent); }
.pg__track { display:flex; gap:32px; width:max-content; padding:20px 40px 36px; animation:marquee 100s linear infinite; }
.pg__rail:hover .pg__track, .pg__rail.is-paused .pg__track { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }
.shot { flex:none; width:236px; cursor:zoom-in; text-align:center; transition:transform .35s var(--ease),opacity .35s,filter .35s; }
.shot.is-hidden { display:none; }
.shot .phone { box-shadow:0 18px 40px rgba(13,27,62,.22),0 0 0 1.5px rgba(255,255,255,.1) inset; transition:box-shadow .35s; transform-style:preserve-3d; }
.shot:hover { transform:translateY(-10px); }
.shot:hover .phone { box-shadow:0 30px 60px rgba(13,27,62,.34),0 0 0 1.5px rgba(255,255,255,.14) inset; }
.shot--wide { width:480px; }
.shot--wide .browser { box-shadow:0 18px 40px rgba(13,27,62,.22),0 0 0 1px rgba(255,255,255,.1); }
.shot__cap { margin-top:16px; }
.shot__cap strong { display:block; color:var(--navy); font-size:.86rem; }
.shot__cap span { color:var(--gold); font-size:.68rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.pg__hint { text-align:center; color:var(--gray); font-size:.78rem; margin-top:4px; }

/* ── LIGHTBOX ── */
.lb { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; background:rgba(5,10,28,.88); backdrop-filter:blur(8px); padding:24px; }
.lb.is-open { display:flex; animation:fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.lb__box { max-width:min(92vw,1100px); max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:14px; animation:zoomIn .35s var(--ease) both; }
@keyframes zoomIn { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:none; } }
.lb__box img { max-height:80vh; width:auto; max-width:100%; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb__cap { color:#fff; font-size:.9rem; font-weight:600; text-align:center; }
.lb__x { position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; cursor:pointer; transition:background .2s; }
.lb__x:hover { background:var(--gold); color:var(--navy); }

/* ── NOVO CABEÇALHO DO PORTFÓLIO DE CASES ── */
section.port-filters { padding-top:90px; }
.port-filters .sec-head { margin-bottom:28px; }

/* ── CARDS DOS CASES: tilt e brilho ── */
.port-card { position:relative; transform-style:preserve-3d; will-change:transform; }
.port-card .port-card__img::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%); transform:translateX(-120%); transition:transform .8s var(--ease); pointer-events:none; }
.port-card:hover .port-card__img::after { transform:translateX(120%); }
.port-card.is-out { display:none; }
.fade-up.stagger { transition-delay:calc(var(--i,0) * 60ms); }

/* ── RESPONSIVO ── */
@media (max-width:1024px) {
  .ph .container { grid-template-columns:1fr; gap:36px; }
  .ph__stage { height:440px; max-width:560px; margin:0 auto; width:100%; }
  .pv__panel, .pv__panel--mobile { grid-template-columns:1fr; gap:36px; }
  .pv__panel--mobile .pv__stage { order:-1; }
  .pv__panel.is-active .pv__copy { text-align:center; }
  .pv__copy li { text-align:left; }
  .pv__chips { justify-content:center; }
}
@media (max-width:640px) {
  .ph { padding-bottom:64px; }
  .ph__stage { height:380px; }
  .ph__phone { width:150px; }
  .ph__phone--b { left:32%; }
  .ph__stats { gap:24px; }
  .pv, .pg { padding:70px 0; }
  .shot { width:200px; } .shot--wide { width:300px; }
  .pg__rail::before, .pg__rail::after { width:36px; }
  .pv__tab { padding:9px 15px; font-size:.78rem; }
}

/* ── MOVIMENTO REDUZIDO ── */
@media (prefers-reduced-motion:reduce) {
  .ph::before, .ph__orb, .ph__phone .phone, .ph h1 em, .ph__label i, .pg__track, .vid-badge i { animation:none !important; }
  .pg__track { overflow-x:auto; width:auto; }
  .pg__rail { overflow-x:auto; }
  .pv__panel.is-active, .lb.is-open, .lb__box { animation:none; }
  .port-card, .shot, .fade-up { transition:none; }
}

/* ── novos formatos de vídeo e galeria filtrada ── */
.browser__screen--169 { aspect-ratio:16/9; }
.phone__screen video { object-position:center; }
.film { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:#000; box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1); }
.film video { width:100%; height:100%; object-fit:cover; display:block; }
.pg__rail.is-filtered::before, .pg__rail.is-filtered::after { display:none; }
.pg__rail.is-filtered .pg__track { animation:none; transform:none; width:auto; flex-wrap:wrap; justify-content:center; max-width:1240px; margin:0 auto; row-gap:40px; }
.pg__rail.is-filtered .shot[aria-hidden="true"] { display:none; }
.pg__rail.is-filtered ~ .pg__hint { visibility:hidden; }