/* =====================================================================
   PORTFOLIO PREMIUM — extensões sobre o design system NEON VOID
   (carregar depois de style.css)
   ===================================================================== */

/* ----------------------- HERO: mockups flutuantes ------------------ */
.hero-stack{position:relative;aspect-ratio:5/5;width:100%}
.float{position:absolute;border-radius:14px;overflow:hidden;border:1px solid var(--border-strong);
  background:var(--bg-3);box-shadow:0 40px 90px -40px rgba(124,58,237,.7);
  animation:floaty 7s ease-in-out infinite}
.float.f1{inset:4% 14% 30% 0;z-index:3;animation-delay:0s}
.float.f2{inset:30% 0 6% 26%;z-index:2;animation-delay:-2.2s}
.float.f3{width:120px;height:120px;right:6%;top:2%;z-index:4;border-radius:18px;display:grid;place-items:center;
  background:var(--grad-neon);box-shadow:var(--glow-violet);animation-delay:-1s}
.float.f3 svg{width:54px;height:54px;color:#fff}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-.4deg)}}
@media(max-width:899px){.hero-stack{aspect-ratio:16/12;max-width:520px;margin-inline:auto}}

/* ----------------------- BROWSER MOCKUP ---------------------------- */
.browser{display:flex;flex-direction:column;height:100%;background:var(--bg-3)}
.browser .bar{height:34px;flex:none;display:flex;align-items:center;gap:.7rem;padding:0 .8rem;
  border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 60%,transparent)}
.browser .bar .dots{display:flex;gap:.4rem}
.browser .bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--text-mute);opacity:.6}
.browser .bar .dots i:nth-child(1){background:#ec4899}.browser .bar .dots i:nth-child(2){background:#f59e0b}.browser .bar .dots i:nth-child(3){background:#10b981}
.browser .bar .url{flex:1;height:18px;border-radius:6px;background:var(--surface-2);display:flex;align-items:center;padding:0 .6rem;
  font-family:var(--ff-ui);font-size:.6rem;letter-spacing:.06em;color:var(--text-mute);overflow:hidden;white-space:nowrap}
.browser .screen{flex:1;position:relative;overflow:hidden;background:
  radial-gradient(120% 100% at 80% 0%,color-mix(in srgb,var(--c,#7C3AED) 26%,transparent),transparent 60%),var(--bg-2)}
/* stylized site preview */
.mini{position:absolute;inset:0;padding:10% 9%;display:flex;flex-direction:column;gap:7%}
.mini .topnav{display:flex;align-items:center;justify-content:space-between}
.mini .topnav .logo{width:26%;height:8px;border-radius:4px;background:var(--c,#7C3AED)}
.mini .topnav .links{display:flex;gap:6px}
.mini .topnav .links i{width:14px;height:5px;border-radius:3px;background:var(--text-mute);opacity:.5}
.mini .hblock{height:30%;border-radius:8px;background:linear-gradient(120deg,color-mix(in srgb,var(--c,#7C3AED) 55%,transparent),color-mix(in srgb,var(--c2,#06B6D4) 40%,transparent));position:relative;overflow:hidden}
.mini .hblock::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.18),transparent 50%)}
.mini .row{display:flex;gap:6%}
.mini .row .col{flex:1;height:34px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border)}
.mini .lines{display:flex;flex-direction:column;gap:5px}
.mini .lines i{height:5px;border-radius:3px;background:var(--text-mute);opacity:.45}
.mini .lines i:nth-child(1){width:80%}.mini .lines i:nth-child(2){width:55%}.mini .lines i:nth-child(3){width:68%}

/* ------------------------- WORK / PORTFÓLIO ------------------------ */
.work-grid{display:grid;gap:1.6rem}
/* mobile: coluna única abaixo de 900px */
@media(min-width:900px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.work-grid{grid-template-columns:repeat(3,1fr)}}

/* --- scroll horizontal pinado (classe adicionada por premium.js, só desktop) --- */
#portfolio.hscroll{overflow:hidden;padding-block:clamp(3rem,7vh,4.5rem)}
#portfolio.hscroll .section-head{margin-bottom:1.4rem}
#portfolio.hscroll .work-grid{display:flex;flex-wrap:nowrap;gap:clamp(1.4rem,2vw,2rem);width:max-content;will-change:transform}
#portfolio.hscroll .work{width:clamp(360px,34vw,470px);flex:none}
/* telas baixas: cards menores para caber título + card no viewport pinado */
@media(max-height:760px){#portfolio.hscroll .work{width:clamp(310px,28vw,390px)}}
#portfolio.hscroll .h-progress{
  height:2px;background:var(--border);border-radius:2px;overflow:hidden;
  margin:0 0 2rem;max-width:340px
}
#portfolio.hscroll .h-progress i{
  display:block;height:100%;width:100%;background:var(--grad-neon);
  transform:scaleX(0);transform-origin:0 50%;box-shadow:var(--glow-cyan)
}
.work{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-3);
  isolation:isolate;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.work:hover{transform:translateY(-8px);border-color:transparent;box-shadow:var(--glow-violet),0 30px 60px -30px rgba(0,0,0,.8)}
.work .thumb{aspect-ratio:16/11;position:relative;overflow:hidden;border-bottom:1px solid var(--border);cursor:pointer}
.work .thumb .browser{transition:transform .8s var(--ease)}
.work:hover .thumb .browser{transform:scale(1.04)}
.work .cat{position:absolute;top:.9rem;left:.9rem;z-index:4;font-family:var(--ff-ui);font-weight:600;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.35rem .75rem;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 60%,transparent);border:1px solid var(--border);backdrop-filter:blur(6px);color:var(--accent)}
.work .status{position:absolute;top:.9rem;right:.9rem;z-index:4;font-family:var(--ff-ui);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--bg) 60%,transparent);
  border:1px solid var(--border);color:var(--text-mute);backdrop-filter:blur(6px);display:flex;align-items:center;gap:.4rem}
.work .status .d{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981}
.work .status.soon .d{background:#f59e0b;box-shadow:0 0 8px #f59e0b}
.work .meta{padding:1.3rem}
.work .meta h3{font-size:1.25rem;letter-spacing:0}
.work .meta p{font-size:.88rem;color:var(--text-dim);margin:.5rem 0 1rem}
.work .meta .go{font-family:var(--ff-ui);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;
  display:inline-flex;align-items:center;gap:.5rem;color:var(--text);transition:gap .3s,color .3s}
.work .meta .go:hover{gap:.9rem;color:var(--accent)}
.work .glow-edge{position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:var(--grad-neon);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s;z-index:5;pointer-events:none}
.work:hover .glow-edge{opacity:1}

/* --------------------------- SERVIÇOS ------------------------------ */
.svc-grid{display:grid;gap:1.4rem}
@media(min-width:620px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:1.7rem;background:var(--surface);
  backdrop-filter:blur(12px);overflow:hidden;transition:transform .5s var(--ease),border-color .5s;display:flex;flex-direction:column;gap:1rem}
.svc:hover{transform:translateY(-6px);border-color:var(--border-strong)}
.svc::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:opacity .5s;z-index:-1}
.svc:hover::before{opacity:.6}
.svc .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--border);color:var(--accent);transition:background .5s,color .5s,box-shadow .5s}
.svc:hover .ic{background:var(--grad-neon);color:#fff;box-shadow:var(--glow-violet)}
.svc .ic svg{width:24px;height:24px}
.svc h3{font-size:1.15rem;letter-spacing:0}
.svc p{font-size:.9rem;color:var(--text-dim);flex:1}
.svc .go{font-family:var(--ff-ui);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;
  display:inline-flex;align-items:center;gap:.45rem;color:var(--text-mute);transition:gap .3s,color .3s}
.svc:hover .go{color:var(--accent)}
.svc .num{position:absolute;top:1.2rem;right:1.4rem;font-family:var(--ff-impact);font-size:1.6rem;color:var(--text-mute);opacity:.4}

/* --------------------------- PROCESSO ------------------------------ */
.flow{display:grid;gap:1.2rem;counter-reset:step}
@media(min-width:760px){.flow{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.flow{grid-template-columns:repeat(6,1fr)}}
.step{position:relative;border:1px solid var(--border);border-radius:16px;padding:1.4rem;background:var(--surface);
  transition:transform .5s var(--ease),border-color .5s}
.step:hover{transform:translateY(-6px);border-color:var(--border-strong)}
.step .n{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;
  background:var(--surface-2);border:1px solid var(--border);color:var(--accent);margin-bottom:1rem;transition:.5s}
.step:hover .n{background:var(--grad-neon);color:#fff;box-shadow:var(--glow-violet)}
.step h4{font-family:var(--ff-display);font-size:1rem;letter-spacing:0;margin-bottom:.35rem}
.step p{font-size:.84rem;color:var(--text-dim)}
@media(min-width:1100px){
  .step:not(:last-child)::after{content:"";position:absolute;top:2.5rem;right:-.85rem;width:1.2rem;height:1px;
    background:linear-gradient(90deg,var(--accent),transparent);z-index:2}
}

/* --------------------------- STAT BAND ----------------------------- */
.stat-band{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
@media(min-width:760px){.stat-band{grid-template-columns:repeat(4,1fr)}}
.stat-band .cell{background:var(--bg-2);padding:1.8rem 1.4rem;text-align:center}
.stat-band .cell b{font-family:var(--ff-impact);font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;display:block;letter-spacing:.02em}
.stat-band .cell span{font-family:var(--ff-ui);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--text-mute)}

/* --------------------------- SOBRE/AVATAR -------------------------- */
.avatar{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-strong);position:relative;
  background:radial-gradient(120% 120% at 30% 10%,#15152c,transparent 60%),var(--bg-3);
  box-shadow:0 40px 80px -40px rgba(124,58,237,.6);
  /* grayscale por padrão → colorido no hover */
  filter:grayscale(1) brightness(.88);
  transition:filter .65s cubic-bezier(.4,0,.2,1),box-shadow .65s ease}
.avatar:hover{
  filter:grayscale(0) brightness(1);
  box-shadow:0 40px 90px -30px rgba(124,58,237,.75),0 0 0 1px rgba(124,58,237,.3)}
[data-theme="light"] .avatar{background:radial-gradient(120% 120% at 30% 10%,#e3e8f7,transparent 60%),var(--bg-3)}

/* --- foto real --- */
.avatar img.photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;display:block;
  /* fundo de escritório já é escuro — só leve grading cinematográfico */
  filter:brightness(.96) contrast(1.06) saturate(.9);
  z-index:0
}
/* overlay: toque neon na identidade visual, vignette suave nas bordas */
.avatar .photo-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    /* violeta no topo — acento de marca sobre o céu da janela */
    radial-gradient(ellipse 110% 35% at 50% 0%,rgba(124,58,237,.38) 0%,transparent 60%),
    /* ciano no canto inferior-direito */
    radial-gradient(ellipse 50% 30% at 100% 100%,rgba(6,182,212,.25) 0%,transparent 55%),
    /* vignette suave nas laterais — sem agressividade, fundo já escuro */
    radial-gradient(ellipse 65% 100% at 0% 50%,rgba(3,3,3,.30) 0%,transparent 60%),
    radial-gradient(ellipse 65% 100% at 100% 50%,rgba(3,3,3,.30) 0%,transparent 60%),
    /* gradiente inferior médio — funde com o fundo do site */
    linear-gradient(180deg,transparent 55%,rgba(3,3,3,.90) 100%)
}
/* light mode */
[data-theme="light"] .avatar .photo-overlay{
  background:
    radial-gradient(ellipse 110% 35% at 50% 0%,rgba(124,58,237,.28) 0%,transparent 60%),
    radial-gradient(ellipse 50% 30% at 100% 100%,rgba(6,182,212,.18) 0%,transparent 55%),
    radial-gradient(ellipse 65% 100% at 0% 50%,rgba(15,23,42,.20) 0%,transparent 60%),
    radial-gradient(ellipse 65% 100% at 100% 50%,rgba(15,23,42,.20) 0%,transparent 60%),
    linear-gradient(180deg,transparent 58%,rgba(15,23,42,.80) 100%)
}

.avatar .tagchip{position:absolute;bottom:1rem;left:1rem;right:1rem;display:flex;gap:.5rem;flex-wrap:wrap;z-index:3}
.avatar .tagchip span{font-family:var(--ff-ui);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .7rem;
  border-radius:999px;background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--border);backdrop-filter:blur(8px);color:var(--text-dim)}
.avatar .corner{position:absolute;width:24px;height:24px;border:2px solid var(--accent);z-index:4;opacity:.9}
.avatar .corner.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.avatar .corner.tr{top:10px;right:10px;border-left:0;border-bottom:0}

/* multi-button hero cta wrap allows 3 buttons */
.hero-cta.tri{gap:.8rem}

/* ----------------------- HERO: VIDEO BACKGROUND -------------------- */
.hero--video{position:relative;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
/* violet tint + dark radial vignette */
.hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 72% 66% at 50% 48%,transparent 18%,rgba(4,2,16,.90) 100%),
    rgba(72,10,138,.44)
}
/* actual blur applied only at the edges via masked backdrop-filter */
.hero-blur-ring{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  -webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 50%,transparent 50%,#000 82%);
  mask-image:radial-gradient(ellipse 65% 60% at 50% 50%,transparent 50%,#000 82%)
}
/* content above all overlay layers */
.hero--video .wrap{position:relative;z-index:3}
.hero--video .scroll-hint{position:relative;z-index:3}
/* brighter gradient for hero headline against dark video */
.hero--video h1 .gradient-text{
  background:linear-gradient(115deg,#b06bff 0%,#6ab0ff 38%,#22d3ee 68%,#f472b6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(180,100,255,.75)) drop-shadow(0 0 38px rgba(34,211,238,.45))
}

/* =====================================================================
   MOBILE — melhorias de visibilidade
   ===================================================================== */
/* ---- CTA "Ver Portfólio Completo" (main page) ---- */
.portfolio-more{
  margin-top:clamp(2.4rem,5vh,3.6rem);
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  text-align:center
}
.portfolio-more-count{
  font-family:var(--ff-ui);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-mute)
}

/* ---- PÁGINA DE PORTFÓLIO COMPLETO (portfolio.html) ---- */
.page-hero{padding:clamp(7.5rem,14vh,11rem) 0 clamp(2rem,4vh,3rem)}
.back-link{
  display:inline-flex;align-items:center;gap:.45rem;margin-bottom:2rem;
  font-family:var(--ff-ui);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-mute);transition:color .3s,gap .3s
}
.back-link:hover{color:var(--accent);gap:.8rem}
.portfolio-page-cta{
  padding:clamp(4rem,10vh,7rem) 0;text-align:center
}
.portfolio-page-cta h2{margin-bottom:2rem}
.portfolio-page-cta p{color:var(--text-dim);max-width:52ch;margin:0 auto 2rem}

/* ---- ACTIVE NAV LINK ---- */
.nav-links a.active{color:var(--accent)}

@media(max-width:899px){
  /* portfólio: forçar coluna única (breakpoint de 2col começa em 900px) */
  .work-grid{grid-template-columns:1fr!important}

  /* Sobre: avatar visível e bem dimensionado */
  .avatar{
    max-width:420px;
    margin-inline:auto;
    width:min(100%,70vw);
    transform:none!important;
    /* sem hover em touch — manter sempre colorida no mobile */
    filter:grayscale(0) brightness(1)!important
  }

  /* garantir que a seção Sobre empilhe corretamente */
  #sobre .split{grid-template-columns:1fr}
  #sobre .split>*:first-child{order:0}
  #sobre .split>*:last-child{order:1}
}