/* ================================================================
   Página Portfólio · browser mockup interativo com cursor animado
   ================================================================ */

.portfolio-page {
  --pf-bg0:        #050508;
  --pf-bg1:        #0d0f14;
  --pf-text:       rgba(248, 250, 252, 0.94);
  --pf-muted:      rgba(226, 232, 240, 0.55);
  --pf-line:       rgba(148, 163, 184, 0.12);
  --pf-accent:     #34d399;
  --pf-accent-dim: rgba(52, 211, 153, 0.15);
  --pf-chip:       rgba(15, 23, 42, 0.75);
  --pf-shadow:     0 24px 80px rgba(0, 0, 0, 0.45);
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(52, 211, 153, 0.08), transparent),
    radial-gradient(900px 500px at 90% 0%,    rgba(99, 102, 241, 0.10), transparent),
    linear-gradient(180deg, var(--pf-bg0) 0%, var(--pf-bg1) 45%, var(--pf-bg0) 100%);
  color: var(--pf-text);
  overflow-x: hidden;
}
.portfolio-page a { color: var(--pf-accent); }
.portfolio-page a:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; border-radius: 4px; }

/* ── Hero ──────────────────────────────────────────────────────── */
.pf-hero {
  position: relative;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 2rem) clamp(3rem, 6vw, 5rem);
  text-align: center; isolation: isolate;
}
.pf-hero::before, .pf-hero::after {
  content: ""; position: absolute; inset: auto; pointer-events: none;
  border-radius: 50%; filter: blur(80px); opacity: 0.55; z-index: 0;
}
.pf-hero::before { width: clamp(260px,40vw,420px); height: clamp(260px,40vw,420px); background: rgba(52,211,153,0.35); top:-12%; left:8%; }
.pf-hero::after  { width: clamp(220px,35vw,380px); height: clamp(220px,35vw,380px); background: rgba(99,102,241,0.40); top:-8%; right:10%; }
.pf-hero-inner { position: relative; z-index: 1; max-width: 52rem; margin: 0 auto; }
.pf-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--pf-accent-dim); color: var(--pf-accent);
  border: 1px solid rgba(52,211,153,0.25);
}
.pf-hero h1 { margin: 1.25rem 0 1rem; font-size: clamp(2rem,5vw,3.25rem); font-weight: 800; line-height: 1.07; letter-spacing: -.03em; }
.pf-hero-lead { margin: 0 auto; max-width: 36rem; font-size: clamp(1rem,2.2vw,1.2rem); color: var(--pf-muted); line-height: 1.65; }

/* Stats */
.pf-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,3vw,1.75rem); max-width: 44rem; margin: clamp(2.25rem,5vw,3.25rem) auto 0; }
@media (min-width: 640px) { .pf-stats { grid-template-columns: repeat(4,1fr); } }
.pf-stat { background: rgba(15,23,42,0.5); border: 1px solid var(--pf-line); border-radius: 1rem; padding: 1rem 1.1rem; backdrop-filter: blur(10px); }
.pf-stat strong { display:block; font-size:clamp(1.5rem,3.5vw,2rem); font-weight:800; letter-spacing:-.03em; }
.pf-stat span   { display:block; margin-top:.2rem; font-size:.76rem; color:var(--pf-muted); line-height:1.35; }

/* Marquee */
.pf-marquee-wrap { margin-top:clamp(2.75rem,6vw,4rem); padding:0 clamp(1rem,4vw,2rem); overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.pf-marquee { display:flex; gap:3rem; width:max-content; animation:pf-marquee 52s linear infinite; }
@keyframes pf-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce) { .pf-marquee{animation:none;justify-content:center;flex-wrap:wrap;width:auto;gap:.85rem} }
.pf-marquee span { flex-shrink:0; padding:.55rem 1.05rem; border-radius:999px; font-size:.8125rem; font-weight:600; color:var(--pf-muted); background:rgba(15,23,42,0.45); border:1px solid var(--pf-line); }

/* ── Wrap / Toolbar ─────────────────────────────────────────────── */
.pf-wrap { max-width:76rem; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) clamp(4rem,8vw,6rem); }
.pf-toolbar { display:flex; flex-direction:column; gap:1rem; margin-bottom:clamp(1.5rem,3vw,2rem); }
@media(min-width:768px){.pf-toolbar{flex-direction:row;align-items:center;justify-content:space-between}}
.pf-toolbar h2 { margin:0; font-size:clamp(1.25rem,2.8vw,1.65rem); font-weight:700; }
.pf-filters { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.pf-filter-btn { min-height:44px; padding:0 1rem; border-radius:999px; font-size:.8125rem; font-weight:600; border:1px solid var(--pf-line); background:var(--pf-chip); color:var(--pf-muted); cursor:pointer; transition:border-color .2s,color .2s,background .2s,transform .15s; }
.pf-filter-btn[aria-pressed="true"],.pf-filter-btn.is-active { border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.12); color:var(--pf-text); }
.pf-filter-btn:focus-visible { outline:2px solid var(--pf-accent); outline-offset:2px; }

/* ── Grid ──────────────────────────────────────────────────────── */
.pf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:clamp(1.25rem,3vw,1.75rem); }
@media(min-width:1200px){.pf-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Card ──────────────────────────────────────────────────────── */
.pf-card { position:relative; border-radius:1.25rem; background:rgba(17,20,28,0.88); border:1px solid var(--pf-line); box-shadow:var(--pf-shadow); overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s,box-shadow .25s,transform .25s ease; }
.pf-card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,rgba(52,211,153,.35),rgba(99,102,241,.12),transparent 55%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.85; z-index:1; }
.pf-card[hidden],.pf-card.is-hidden-pf { display:none; }
@media(prefers-reduced-motion:no-preference){.pf-card:hover{border-color:rgba(52,211,153,.25);transform:translateY(-4px);box-shadow:0 40px 110px rgba(0,0,0,.55)}}

/* ── Browser chrome ────────────────────────────────────────────── */
.pf-browser { position:relative; background:#0a0c10; border-bottom:1px solid var(--pf-line); flex-shrink:0; }
.pf-browser-bar { display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; background:#111318; border-bottom:1px solid rgba(255,255,255,.06); }
.pf-dots { display:flex; gap:5px; flex-shrink:0; }
.pf-dots i { display:block; width:9px; height:9px; border-radius:50%; }
.pf-dots i:nth-child(1){background:#f87171}
.pf-dots i:nth-child(2){background:#fbbf24}
.pf-dots i:nth-child(3){background:#34d399}
.pf-url-bar { flex:1; min-width:0; padding:.22rem .6rem; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-size:.68rem; color:rgba(148,163,184,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace,monospace; transition:color .3s; }

/* Loading spinner in chrome bar */
.pf-loader { width:10px; height:10px; border-radius:50%; border:2px solid rgba(52,211,153,.2); border-top-color:#34d399; flex-shrink:0; opacity:0; transition:opacity .2s; }
.pf-loader.is-loading { opacity:1; animation:pf-spin .7s linear infinite; }
@keyframes pf-spin { to{transform:rotate(360deg)} }

/* ── VP Wrap (fake-nav + slides + cursor) ──────────────────────── */
.pf-vp-wrap { position:relative; }

/* ── Fake nav overlay ──────────────────────────────────────────── */
.pf-fake-nav {
  position:relative; z-index:5;
  display:flex; align-items:center; gap:2px;
  padding:0 10px; height:34px;
  background:rgba(8,10,18,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pf-nav-btn {
  padding:4px 11px; border:none; border-radius:7px;
  background:transparent; color:rgba(203,213,225,.45);
  font-size:11px; font-weight:600; cursor:default;
  transition:background .2s, color .2s;
  user-select:none; pointer-events:none; /* decorativo */
}
.pf-nav-btn.is-active  { background:rgba(52,211,153,.15); color:#34d399; }
.pf-nav-btn.is-highlight { background:rgba(52,211,153,.1); color:rgba(52,211,153,.8); }

/* ── Slides ────────────────────────────────────────────────────── */
.pf-slides { position:relative; height:230px; overflow:hidden; background:#0d0f14; }

/* Placeholder (sempre visível atrás do slide enquanto screenshot carrega) */
.pf-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; z-index:0; overflow:hidden; }
.pf-ph-avatar {
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:800; letter-spacing:.04em;
  border:1.5px solid; flex-shrink:0; opacity:.7;
}
.pf-ph-scan { position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,rgba(52,211,153,.05) 50%,transparent 100%); animation:pf-scan 2.8s ease-in-out infinite; }
@keyframes pf-scan { 0%{background-position:0 -100%} 100%{background-position:0 300%} }

/* Cada slide */
.pf-slide {
  position:absolute; inset:0; z-index:1;
  opacity:0; transform:translateX(20px);
  transition:opacity .4s ease, transform .4s ease;
  overflow:hidden;
}
.pf-slide.is-active  { opacity:1; transform:translateX(0); z-index:2; }
.pf-slide.is-exit    { opacity:0; transform:translateX(-20px); z-index:1; }
.pf-slide.has-error  { display:none; }

/* Screenshot inside slide — largura extra para permitir pan horizontal */
.pf-screenshot { display:block; width:110%; height:auto; object-fit:fill; object-position:top left; transform-origin:top left; }

/* ── Hero wipe (simula slide do carrossel) ─────────────────────── */
/* Fica em .pf-slides (z-index:8) — NÃO dentro de .pf-slide (evita overflow:hidden clipar) */
.pf-hero-wipe {
  position:absolute; inset:0; z-index:8; pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.04) 15%,
    rgba(255,255,255,.28) 38%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.28) 62%,
    rgba(255,255,255,.04) 85%,
    transparent 100%
  );
  transform:translateX(120%);
  opacity:0;
}
.pf-hero-wipe.is-wiping {
  animation:pf-wipe .65s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes pf-wipe {
  0%   { transform:translateX(120%); opacity:1; }
  40%  { transform:translateX(0%);   opacity:1; }
  100% { transform:translateX(-120%); opacity:0; }
}

/* ── Slide dots (indicador de carrossel) ───────────────────────── */
.pf-slide-dots {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:9; pointer-events:none;
}
.pf-slide-dots i {
  display:block; width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.3);
  transition:background .3s, width .3s;
}
.pf-slide-dots i.is-active { background:rgba(255,255,255,.92); width:14px; border-radius:4px; }

/* ── Hero arrow (alvo de click simulado) ───────────────────────── */
.pf-hero-arrow {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:rgba(255,255,255,.85);
  z-index:9; pointer-events:none;
  border:1px solid rgba(255,255,255,.2);
}

/* ── Lightbox (galeria) ────────────────────────────────────────── */
.pf-lightbox {
  position:absolute; inset:0; z-index:22; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.pf-lightbox.is-open { opacity:1; }
.pf-lightbox-bg {
  position:absolute; inset:0;
  background:rgba(2,4,12,.88); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.pf-lightbox-frame {
  position:relative; z-index:1;
  width:74%; max-height:78%; aspect-ratio:4/3;
  background:#0d0f18; border-radius:6px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  overflow:hidden;
  transform:scale(.82); transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.pf-lightbox.is-open .pf-lightbox-frame { transform:scale(1); }
.pf-lightbox-close {
  position:absolute; top:6px; right:7px; z-index:2;
  width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:rgba(255,255,255,.8); line-height:1;
  transition:background .2s;
}
.pf-lightbox-close:hover { background:rgba(255,255,255,.25); }
/* Zoom/crop na screenshot: div com background para garantir crop preciso */
.pf-lightbox-img {
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-size:var(--pf-lb-scale, 280%);
  background-position:var(--pf-lb-pos, 28% 45%);
  filter:brightness(1.06) contrast(1.05) saturate(1.12);
  transition:background-position .4s ease, background-size .4s ease;
}

/* ── Cursor layer ──────────────────────────────────────────────── */
.pf-cursor-layer { position:absolute; inset:0; z-index:25; pointer-events:none; }

.pf-cursor {
  position:absolute; left:50%; top:40%;
  width:14px; height:14px;
  background:rgba(255,255,255,.92);
  border:1.5px solid rgba(0,0,0,.28);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg) scale(1);
  box-shadow:0 2px 8px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.12);
  transition:left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1), opacity .3s, transform .15s;
  opacity:0; pointer-events:none;
  will-change:left,top;
}

.pf-ripple {
  position:absolute; width:24px; height:24px;
  border-radius:50%; border:2px solid rgba(52,211,153,.7);
  transform:translate(-50%,-50%) scale(0);
  opacity:0; pointer-events:none;
  transition:none;
}
.pf-ripple.is-active { animation:pf-ripple .5s ease-out forwards; }
@keyframes pf-ripple { to{transform:translate(-50%,-50%) scale(3.5);opacity:0} }

/* No-URL fallback */
.pf-browser-no-url { display:flex; align-items:center; justify-content:center; height:150px; }
.pf-browser-no-url .pf-ph-avatar { opacity:.5; }

/* ── Card body ─────────────────────────────────────────────────── */
.pf-card-body { padding:clamp(1rem,3vw,1.25rem); display:flex; flex-direction:column; gap:.65rem; flex:1; }
.pf-card-head { display:flex; align-items:center; gap:.875rem; }
.pf-avatar { width:44px; height:44px; border-radius:.8rem; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; letter-spacing:.04em; color:rgba(248,250,252,.95); border:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.pf-card-head h3 { margin:0; font-size:1.0rem; font-weight:700; line-height:1.25; }
.pf-sector { display:inline-block; margin-top:.15rem; font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:rgba(52,211,153,.9); }
.pf-card-desc { margin:0; font-size:.85rem; line-height:1.52; color:rgba(226,232,240,.65); }
.pf-visit-link { display:inline-flex; align-items:center; gap:.45rem; margin-top:auto; padding-top:.25rem; font-size:.8125rem; font-weight:600; color:var(--pf-accent); text-decoration:none; transition:opacity .2s,gap .2s; }
.pf-visit-link:hover { opacity:.8; gap:.6rem; }
.pf-visit-link:focus-visible { outline:2px solid var(--pf-accent); outline-offset:2px; border-radius:4px; }

/* ── Empty states ──────────────────────────────────────────────── */
.pf-empty { text-align:center; padding:3rem 1.5rem; color:var(--pf-muted); border-radius:1rem; border:1px dashed var(--pf-line); background:rgba(15,23,42,0.25); }
.pf-empty-state-full { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:clamp(3rem,8vw,5rem) 1.5rem; text-align:center; color:var(--pf-muted); }
.pf-empty-state-full svg { opacity:.35; }
.pf-empty-state-full h3 { margin:0; font-size:1.35rem; font-weight:700; color:var(--pf-text); }
.pf-empty-state-full p  { margin:0; max-width:30rem; line-height:1.65; font-size:.95rem; }

/* ── CTA ───────────────────────────────────────────────────────── */
.pf-cta { margin-top:clamp(3rem,6vw,4.5rem); padding:clamp(2rem,4vw,2.75rem); text-align:center; border-radius:1.25rem; background:radial-gradient(circle at 30% -20%,rgba(52,211,153,.18),transparent 55%),rgba(15,23,42,.72); border:1px solid var(--pf-line); box-shadow:var(--pf-shadow); }
.pf-cta h3 { margin:0 0 .5rem; font-size:clamp(1.25rem,3vw,1.85rem); font-weight:800; }
.pf-cta p  { margin:0 0 1.25rem; color:var(--pf-muted); max-width:30rem; margin-left:auto; margin-right:auto; line-height:1.6; }
.btn-pf-primary { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 1.5rem; border-radius:999px; font-weight:700; font-size:.95rem; text-decoration:none; color:#042f2e; background:linear-gradient(135deg,#34d399,#22c55e); border:none; box-shadow:0 8px 32px rgba(52,211,153,.25); transition:opacity .2s,transform .15s; }
.btn-pf-primary:hover { opacity:.9; transform:translateY(-1px); }
.btn-pf-primary:focus-visible { outline:3px solid rgba(52,211,153,.7); outline-offset:3px; }

/* ── TV ────────────────────────────────────────────────────────── */
@media(min-width:1440px){.pf-card-head h3{font-size:1.1rem}}

/* ── Mobile ────────────────────────────────────────────────────── */
@media(max-width:480px){.pf-slides{height:190px}}