/* ==================================================================
   GBX MARKETING — portfolio.css
   Estilos EXCLUSIVOS da página de portfólio.

   IMPORTANTE:
   Este arquivo é carregado DEPOIS de style.css e responsive.css.
   Ou seja: toda a identidade visual (cores, fontes, botões, header,
   footer, loader, cursor) já vem pronta de lá. Aqui só entram os
   componentes novos desta página, todos com o prefixo ".pf-"
   (pf = portfólio) para nunca colidir com as classes da Home.

   ÍNDICE:
   01. Ajustes globais da página
   02. Variações extras de Scroll Reveal
   03. Hero do portfólio
   04. Seção de introdução
   05. Barra de filtros (sticky)
   06. Seções do portfólio (wrapper comum)
   07. Galeria de vídeos + player personalizado
   08. Galeria de sites (masonry)
   09. Estatísticas animadas
   10. CTA final
   11. Lightbox
   12. Estados de carregamento / vazio
   13. Responsividade desta página
   ================================================================== */


/* ==================================================================
   01. AJUSTES GLOBAIS DA PÁGINA
   ================================================================== */

/* overflow-x: clip corta o excesso horizontal SEM criar um container
   de rolagem — é o que permite a barra de filtros ficar sticky.
   (o style.css usa overflow-x: hidden, que quebraria o sticky) */
body {
  overflow-x: clip;
}

/* Link de acessibilidade "pular para o conteúdo":
   fica escondido acima da tela e só aparece ao navegar com TAB */
.pf-skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 9999;
  background: var(--color-orange);
  color: #17110A;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  transition: top 0.3s var(--ease);
}
.pf-skip-link:focus-visible { top: 20px; }

/* Item de menu da página atual: fica laranja e com sublinhado fixo */
.nav__link.is-active { color: var(--color-orange); }
.nav__link.is-active::after { width: 100%; }
.mobile-nav__link.is-active { color: var(--color-orange); }


/* ==================================================================
   02. VARIAÇÕES EXTRAS DE SCROLL REVEAL
   O style.css já traz o [data-reveal] padrão (fade + subir).
   Aqui adicionamos zoom, esquerda, direita e fade puro.
   Como este arquivo carrega depois, estas regras vencem.
   ================================================================== */

/* Zoom: o elemento cresce enquanto aparece */
[data-reveal="zoom"] {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="zoom"].is-visible { opacity: 1; transform: scale(1); }

/* Slide vindo da esquerda */
[data-reveal="left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="left"].is-visible { opacity: 1; transform: translateX(0); }

/* Slide vindo da direita */
[data-reveal="right"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="right"].is-visible { opacity: 1; transform: translateX(0); }

/* Fade puro (sem deslocamento) */
[data-reveal="fade"] {
  opacity: 0;
  transform: none;
  transition: opacity 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="fade"].is-visible { opacity: 1; }


/* ==================================================================
   03. HERO DO PORTFÓLIO
   ================================================================== */

.pf-hero {
  position: relative;
  padding: 190px 0 120px;      /* espaço extra no topo por causa do header fixo */
  text-align: center;
  overflow: hidden;            /* segura os brilhos e elementos flutuantes */
  isolation: isolate;          /* cria contexto próprio de empilhamento */
}

/* Camada de fundo do hero */
.pf-hero__bg { position: absolute; inset: 0; z-index: -1; }

/* Brilhos laranja desfocados (o "glow" da marca) */
.pf-hero__glow { position: absolute; border-radius: 50%; filter: blur(120px); }
.pf-hero__glow--1 { width: 560px; height: 560px; background: var(--color-orange);      top: -200px; right: -140px; opacity: 0.30; }
.pf-hero__glow--2 { width: 460px; height: 460px; background: var(--color-orange-dark); bottom: -220px; left: -120px; opacity: 0.22; }
/* Centralizado por "calc" (e não por translateX) porque a propriedade
   transform deste elemento é usada pelo parallax do mouse no JavaScript */
.pf-hero__glow--3 { width: 620px; height: 320px; background: var(--color-orange-light); top: 30%; left: calc(50% - 310px); opacity: 0.10; }

/* Feixe de luz diagonal que atravessa o hero lentamente */
.pf-hero__beam {
  position: absolute; top: -40%; left: -30%;
  width: 60%; height: 180%;
  background: linear-gradient(105deg, transparent 0%, rgba(243,147,31,0.10) 45%, rgba(255,178,89,0.16) 50%, rgba(243,147,31,0.10) 55%, transparent 100%);
  filter: blur(30px);
  animation: pfBeam 9s ease-in-out infinite;
}
@keyframes pfBeam {
  0%, 100% { transform: translateX(0) rotate(8deg); opacity: 0.6; }
  50%      { transform: translateX(120%) rotate(8deg); opacity: 1; }
}

/* --- Elementos flutuantes (cards de vidro boiando no fundo) --- */

/* Registra --px e --py como propriedades do tipo "comprimento".
   Sem esse registro o navegador não consegue INTERPOLAR o valor, e o
   parallax do mouse ficaria "duro" em vez de suave. Navegadores antigos
   simplesmente ignoram este bloco e o efeito continua funcionando. */
@property --px { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --py { syntax: '<length>'; inherits: false; initial-value: 0px; }

.pf-floats { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pf-float {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  padding: 9px 16px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-elev);
  white-space: nowrap;
  /* animação de flutuação suave (cada card tem delay/duração diferente) */
  animation: pfFloat 7s ease-in-out infinite;
  will-change: transform;

  /* --px e --py são escritos pelo JavaScript no efeito de parallax.
     Usamos variáveis (e não a propriedade transform direto) porque o
     transform já está ocupado pela animação de flutuação acima —
     assim os dois efeitos convivem sem um cancelar o outro. */
  --px: 0px;
  --py: 0px;
  transition: --px 0.6s var(--ease), --py 0.6s var(--ease);
}
.pf-float i { color: var(--color-orange); font-size: 1rem; }

/* Posicionamento de cada elemento flutuante */
.pf-float--1 { top: 20%;  left: 6%;   animation-delay: 0s;    }
.pf-float--2 { top: 32%;  right: 5%;  animation-delay: -1.6s; }
.pf-float--3 { bottom: 26%; left: 10%; animation-delay: -3.2s; }
.pf-float--4 { bottom: 18%; right: 9%; animation-delay: -4.8s; }
.pf-float--5 { top: 62%;  left: 48%;  animation-delay: -2.4s; }

/* A flutuação soma o deslocamento do parallax (--px / --py) ao movimento
   vertical do loop. Como as variáveis são lidas a cada quadro, o mouse
   move o card em tempo real enquanto ele continua flutuando. */
@keyframes pfFloat {
  0%, 100% { transform: translate(var(--px), calc(var(--py) + 0px))    rotate(0deg);    }
  50%      { transform: translate(var(--px), calc(var(--py) - 16px))   rotate(-1.5deg); }
}

/* --- Conteúdo central do hero --- */
.pf-hero__inner { position: relative; z-index: 2; }

.pf-hero__eyebrow { margin-bottom: 26px; }

/* Título gigante da página */
.pf-hero__title {
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 1.02;
  margin-bottom: 24px;
  letter-spacing: -0.035em;
}

/* Brilho pulsante no texto em gradiente do título */
.pf-hero__title .text-gradient {
  position: relative;
  filter: drop-shadow(0 0 26px rgba(243, 147, 31, 0.35));
  animation: pfGlowText 4s ease-in-out infinite;
}
@keyframes pfGlowText {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(243,147,31,0.28)); }
  50%      { filter: drop-shadow(0 0 40px rgba(243,147,31,0.55)); }
}

.pf-hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--color-text-dim);
  max-width: 62ch;
  margin: 0 auto 40px;
}

/* Botões do hero centralizados */
.pf-hero__actions {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center;
  margin-bottom: 44px;
}

/* Lista de mini-indicadores abaixo dos botões */
.pf-hero__tags {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--color-text-faint);
}
.pf-hero__tags li { display: inline-flex; align-items: center; gap: 8px; }
.pf-hero__tags i { color: var(--color-orange); font-size: 1.05rem; }

/* --- Indicador "role a página" --- */
.pf-scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 2;
}
.pf-scroll-hint__line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, transparent, var(--color-orange));
  position: relative; overflow: hidden;
}
/* pontinho que desce dentro da linha, em loop */
.pf-scroll-hint__line::after {
  content: ''; position: absolute; left: -1px; top: 0;
  width: 3px; height: 12px; border-radius: 3px;
  background: var(--color-orange);
  animation: pfScrollDot 2s ease-in-out infinite;
}
@keyframes pfScrollDot {
  0%   { transform: translateY(-14px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(46px);  opacity: 0; }
}
.pf-scroll-hint__text {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-faint);
}


/* ==================================================================
   04. SEÇÃO DE INTRODUÇÃO
   ================================================================== */

.pf-intro { background: var(--color-bg-alt); }

.pf-intro__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}

.pf-intro__text {
  color: var(--color-text-dim);
  margin-bottom: 18px;
  max-width: 58ch;
}

/* Bloco de citação com a copy forte */
.pf-quote {
  position: relative;
  margin-top: 34px;
  padding: 32px 34px 32px 62px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-orange);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elev);
  overflow: hidden;
}
/* Brilho laranja no canto do bloco de citação */
.pf-quote::after {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: var(--color-orange); opacity: 0.10; filter: blur(40px);
}
.pf-quote__icon {
  position: absolute; top: 26px; left: 24px;
  font-size: 1.5rem; color: var(--color-orange); opacity: 0.55;
}
.pf-quote p {
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 600; line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 14px;
}
.pf-quote cite {
  font-family: var(--font-mono);
  font-size: 0.76rem; font-style: normal;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-faint);
}

/* --- Cards de formatos de produção --- */
.pf-intro__formats { display: flex; flex-direction: column; gap: 16px; }

.pf-format {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* Hover: o card sobe e ganha borda laranja */
.pf-format:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--color-orange) 50%, var(--color-border));
  box-shadow: var(--shadow-elev);
}
.pf-format__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-orange) 14%, transparent);
  color: var(--color-orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  transition: background var(--transition), transform var(--transition);
}
.pf-format:hover .pf-format__icon { background: var(--color-orange); color: #17110A; transform: scale(1.06); }
.pf-format h3 { font-size: 1.02rem; margin-bottom: 5px; }
.pf-format p  { font-size: 0.88rem; color: var(--color-text-dim); }


/* ==================================================================
   05. BARRA DE FILTROS (STICKY)
   Fica grudada logo abaixo do header enquanto o usuário rola
   ================================================================== */

.pf-filterbar {
  position: sticky;
  top: 74px;                 /* altura aproximada do header já reduzido */
  z-index: 300;              /* abaixo do header (500), acima do conteúdo */
  padding: 14px 0;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
/* Classe adicionada pelo JS quando a barra "cola" no topo */
.pf-filterbar.is-stuck {
  border-bottom-color: var(--color-border);
  box-shadow: 0 12px 30px -22px rgba(0,0,0,0.8);
}

.pf-filterbar__inner {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}

/* Botão de filtro — mesma linguagem visual do .filter-btn da Home */
.pf-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-glass);
  font-size: 0.86rem; font-weight: 600;
  color: var(--color-text-dim);
  transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pf-filter i { font-size: 1.05rem; }
.pf-filter:hover { color: var(--color-text); border-color: var(--color-orange); transform: translateY(-2px); }
/* Estado ativo: fundo laranja da marca */
.pf-filter.is-active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #17110A;
  box-shadow: var(--shadow-orange);
}


/* ==================================================================
   06. SEÇÕES DO PORTFÓLIO (wrapper comum)
   ================================================================== */

.pf-section { position: relative; }

/* Alterna o fundo entre as seções para dar ritmo visual à página */
.pf-section--drone { background: var(--color-bg-alt); }

/* --- Animação de filtro ---
   Quando um filtro esconde a seção, ela some suavemente e só depois
   recebe display:none (aplicado pelo JS após a transição) */
.pf-section.is-filtering-out {
  opacity: 0;
  transform: scale(0.98) translateY(10px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
  pointer-events: none;
}
.pf-section.is-filtered-hidden { display: none; }
/* Reaparecimento suave */
.pf-section.is-filtering-in {
  animation: pfFilterIn 0.5s var(--ease) both;
}
@keyframes pfFilterIn {
  from { opacity: 0; transform: scale(0.98) translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Faixa de diferenciais (usada na sessão de drone) --- */
.pf-highlights {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-bottom: 52px;
}
.pf-highlight {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 24px;
  transition: border-color var(--transition), transform var(--transition);
}
.pf-highlight:hover { border-color: color-mix(in srgb, var(--color-orange) 45%, var(--color-border)); transform: translateY(-4px); }
.pf-highlight > i { font-size: 1.6rem; color: var(--color-orange); flex-shrink: 0; margin-top: 2px; }
.pf-highlight h3 { font-size: 1rem; margin-bottom: 6px; }
.pf-highlight p  { font-size: 0.86rem; color: var(--color-text-dim); }


/* ==================================================================
   07. GALERIA DE VÍDEOS + PLAYER PERSONALIZADO
   Todos os vídeos são VERTICAIS (proporção 9:16)
   ================================================================== */

/* Grid da galeria de vídeos: 4 colunas no desktop */
.pf-video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* --- Card do vídeo --- */
.pf-video-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: 0 18px 40px -26px rgba(0,0,0,0.7);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* HOVER ELEGANTE: o card cresce levemente, a borda acende e ganha brilho */
.pf-video-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: color-mix(in srgb, var(--color-orange) 55%, var(--color-border));
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.75), 0 0 0 1px rgba(243,147,31,0.25), 0 0 42px -6px rgba(243,147,31,0.35);
}

/* Moldura que segura o vídeo — é ela que garante o formato 9:16 */
.pf-video-card__frame {
  position: relative;
  aspect-ratio: 9 / 16;            /* VERTICAL */
  background: linear-gradient(160deg, #1c1c22, #0e0e12);
  overflow: hidden;
  cursor: pointer;
}

/* O elemento <video> ocupa toda a moldura */
.pf-video {
  width: 100%; height: 100%;
  object-fit: cover;               /* preenche sem distorcer */
  display: block;
  background: #0b0b0f;
}

/* Brilho diagonal que passa pelo card no hover (efeito "shine") */
.pf-video-card__shine {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
  transition: transform 0.9s var(--ease);
}
.pf-video-card:hover .pf-video-card__shine { transform: translateX(120%); }

/* Véu escuro sobre o vídeo enquanto ele está pausado (dá contraste ao play) */
.pf-video-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
  transition: opacity var(--transition);
}
/* Enquanto toca, o véu quase some para não atrapalhar a imagem */
.pf-video-card.is-playing .pf-video-card__veil { opacity: 0.35; }

/* --- Botão grande de play no centro --- */
.pf-video__bigplay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #17110A;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  box-shadow: var(--shadow-orange);
  transition: transform var(--transition), opacity var(--transition);
  z-index: 3;
}
/* Anel pulsante ao redor do play (chama a atenção) */
.pf-video__bigplay::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--color-orange);
  animation: pfPulseRing 2.4s ease-out infinite;
}
@keyframes pfPulseRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0;   }
}
.pf-video-card:hover .pf-video__bigplay { transform: translate(-50%, -50%) scale(1.1); }
/* Quando o vídeo está tocando, o botão central desaparece */
.pf-video-card.is-playing .pf-video__bigplay {
  opacity: 0; transform: translate(-50%, -50%) scale(0.6); pointer-events: none;
}

/* --- Spinner de carregamento do vídeo --- */
.pf-video__spinner {
  position: absolute; top: 50%; left: 50%;
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: var(--color-orange);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;   /* keyframe "spin" vem do style.css */
  z-index: 4;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.pf-video-card.is-buffering .pf-video__spinner { opacity: 1; }

/* --- Etiqueta de duração (canto superior direito) --- */
.pf-video__badge {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 0.68rem;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  z-index: 3;
  border: 1px solid rgba(255,255,255,0.12);
}

/* --- Etiqueta de categoria (canto superior esquerdo) --- */
.pf-video__chip {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-mono); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--color-orange); color: #17110A;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  z-index: 3;
}

/* ------------------------------------------------------------------
   CONFIGURAÇÃO DA BARRA DE CONTROLES DO PLAYER
   Fica no rodapé do card, aparece no hover e some ao sair
   ------------------------------------------------------------------ */
.pf-video__controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 12px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 15%, rgba(0,0,0,0.45) 60%, transparent 100%);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition);
}
/* A barra aparece no hover, no foco por teclado ou enquanto o vídeo toca */
.pf-video-card:hover .pf-video__controls,
.pf-video-card:focus-within .pf-video__controls,
.pf-video-card.is-playing .pf-video__controls { opacity: 1; transform: translateY(0); }

/* Linha de botões */
.pf-video__row { display: flex; align-items: center; gap: 6px; }

/* Botão individual dos controles (play, mudo, tela cheia) */
.pf-vc-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background var(--transition), color var(--transition), transform 0.25s var(--ease);
}
.pf-vc-btn:hover { background: var(--color-orange); color: #17110A; transform: scale(1.12); }
.pf-vc-btn i { pointer-events: none; }   /* o clique sempre cai no botão, não no ícone */

/* Relógio do vídeo (tempo atual / duração) */
.pf-video__time {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(255,255,255,0.85);
  margin-left: auto;                     /* empurra para a direita */
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* --- Barra de progresso --- */
.pf-video__progress {
  position: relative;
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.20);
  cursor: pointer;
  touch-action: none;                    /* permite arrastar no celular sem rolar a página */
  transition: height 0.2s var(--ease);
}
.pf-video__progress:hover,
.pf-video__progress:focus-visible { height: 8px; }

/* Trecho já baixado (buffer) */
.pf-video__buffered {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: rgba(255,255,255,0.28);
  border-radius: inherit;
  transition: width 0.25s linear;
}
/* Trecho já assistido (laranja da marca) */
.pf-video__played {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--gradient-brand);
  border-radius: inherit;
}
/* Bolinha na ponta da barra de progresso */
.pf-video__thumb {
  position: absolute; right: -6px; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%) scale(0);
  box-shadow: 0 0 10px rgba(243,147,31,0.8);
  transition: transform 0.2s var(--ease);
}
.pf-video__progress:hover .pf-video__thumb,
.pf-video__progress:focus-visible .pf-video__thumb,
.pf-video__progress.is-dragging .pf-video__thumb { transform: translateY(-50%) scale(1); }

/* --- Rodapé de informação do card (fora da moldura do vídeo) --- */
.pf-video-card__info { padding: 18px 20px 20px; }
.pf-video-card__info h3 {
  font-size: 0.98rem;
  margin-bottom: 6px;
  /* corta o título em no máximo 2 linhas */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-video-card__info p {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  display: flex; align-items: center; gap: 6px;
}
.pf-video-card__info p i { color: var(--color-orange); font-size: 0.95rem; }

/* --- Card em TELA CHEIA ---
   Quando o navegador coloca a moldura em fullscreen, o vídeo passa a
   caber inteiro na tela (contain) em vez de ser cortado (cover) */
.pf-video-card__frame:fullscreen { background: #000; aspect-ratio: auto; }
.pf-video-card__frame:fullscreen .pf-video { object-fit: contain; }
.pf-video-card__frame:-webkit-full-screen { background: #000; }
.pf-video-card__frame:-webkit-full-screen .pf-video { object-fit: contain; }
/* Em tela cheia os controles ficam sempre visíveis e um pouco maiores */
.pf-video-card__frame:fullscreen .pf-video__controls { opacity: 1; transform: none; padding: 26px 32px; gap: 12px; }
.pf-video-card__frame:fullscreen .pf-vc-btn { width: 42px; height: 42px; font-size: 1.25rem; }
.pf-video-card__frame:fullscreen .pf-video__time { font-size: 0.85rem; }


/* ==================================================================
   08. GALERIA DE SITES (estilo masonry)
   ================================================================== */

/* Grid denso: itens altos ocupam 2 linhas e o navegador preenche os buracos */
.pf-sites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 210px;             /* altura base de cada linha */
  grid-auto-flow: dense;             /* evita espaços vazios no masonry */
  gap: 22px;
}

/* Card do projeto de site */
.pf-site-card {
  position: relative;
  grid-row: span 2;                  /* padrão: 2 linhas de altura */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* Variações de tamanho — definidas pelo campo "tamanho" no portfolio.js */
.pf-site-card--alto  { grid-row: span 3; }   /* card mais alto */
.pf-site-card--largo { grid-column: span 2; } /* card mais largo */

/* Hover: sobe, acende a borda e ganha brilho laranja */
.pf-site-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--color-orange) 55%, var(--color-border));
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8), 0 0 34px -8px rgba(243,147,31,0.32);
}

/* Área da imagem */
.pf-site-card__media { position: absolute; inset: 0; overflow: hidden; }
.pf-site-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;       /* mostra o topo do site (onde está o cabeçalho) */
  transition: transform 0.8s var(--ease), filter var(--transition);
}
/* ZOOM SUAVE na imagem ao passar o mouse */
.pf-site-card:hover .pf-site-card__img { transform: scale(1.08); }

/* Fallback usado quando o print ainda não existe na pasta:
   um fundo em degradê com a inicial do projeto */
.pf-site-card__fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(150deg, #2a2019, #17171d 60%);
  color: rgba(255,255,255,0.9);
}
.pf-site-card__fallback i { font-size: 2.6rem; color: var(--color-orange); }
.pf-site-card__fallback span {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* OVERLAY ESCURO com as informações do projeto */
.pf-site-card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(0deg, rgba(6,6,8,0.94) 8%, rgba(6,6,8,0.55) 45%, rgba(6,6,8,0.15) 100%);
  opacity: 0;                        /* escondido até o hover */
  transition: opacity var(--transition);
}
.pf-site-card:hover .pf-site-card__overlay,
.pf-site-card:focus-within .pf-site-card__overlay { opacity: 1; }

/* Cada elemento do overlay sobe em sequência (efeito escalonado) */
.pf-site-card__overlay > * {
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.pf-site-card:hover .pf-site-card__overlay > *,
.pf-site-card:focus-within .pf-site-card__overlay > * { transform: translateY(0); opacity: 1; }
/* Atrasos crescentes = animação em cascata */
.pf-site-card__overlay > *:nth-child(1) { transition-delay: 0.05s; }
.pf-site-card__overlay > *:nth-child(2) { transition-delay: 0.11s; }
.pf-site-card__overlay > *:nth-child(3) { transition-delay: 0.17s; }
.pf-site-card__overlay > *:nth-child(4) { transition-delay: 0.23s; }

/* Etiqueta de categoria */
.pf-site-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--color-orange); color: #17110A;
  padding: 4px 12px; border-radius: var(--radius-full);
  margin-bottom: 12px;
}
.pf-site-card__title { color: #fff; font-size: 1.16rem; margin-bottom: 6px; }
.pf-site-card__desc  { color: rgba(255,255,255,0.72); font-size: 0.85rem; margin-bottom: 18px; max-width: 40ch; }

/* Botão "Visualizar Projeto" dentro do overlay */
.pf-site-card__btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.82rem; font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: #17110A;
  transition: gap var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pf-site-card__btn:hover { gap: 14px; transform: translateY(-2px); box-shadow: var(--shadow-orange); }
.pf-site-card__btn i { font-size: 1.05rem; }

/* Ícone de lupa no canto superior — indica que a imagem abre no lightbox */
.pf-site-card__zoom {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 1.05rem;
  opacity: 0; transform: scale(0.7);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
  z-index: 2;
}
.pf-site-card:hover .pf-site-card__zoom { opacity: 1; transform: scale(1); }
.pf-site-card__zoom:hover { background: var(--color-orange); color: #17110A; }


/* ==================================================================
   09. ESTATÍSTICAS ANIMADAS
   ================================================================== */

.pf-stats { position: relative; overflow: hidden; }
.pf-stats__bg { position: absolute; inset: 0; opacity: 0.55; pointer-events: none; }

.pf-stats__grid {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pf-stat {
  background: var(--color-bg);
  padding: 46px 26px;
  text-align: center;
  transition: background var(--transition);
}
.pf-stat:hover { background: var(--color-surface); }

/* Número grande em fonte mono, com o gradiente da marca */
.pf-stat__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 12px;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pf-stat__label {
  font-size: 0.88rem;
  color: var(--color-text-dim);
}


/* ==================================================================
   10. CTA FINAL
   ================================================================== */

.pf-cta {
  position: relative;
  background: #0E0B08;               /* mesma base escura do CTA da Home */
  overflow: hidden;
  text-align: center;
}
[data-theme="light"] .pf-cta { background: #141110; }

.pf-cta__bg { position: absolute; inset: 0; opacity: 0.6; }
.pf-cta__glow { position: absolute; border-radius: 50%; filter: blur(130px); }
.pf-cta__glow--1 { width: 520px; height: 520px; background: var(--color-orange);      top: -220px; left: -120px; opacity: 0.28; }
.pf-cta__glow--2 { width: 480px; height: 480px; background: var(--color-orange-dark); bottom: -240px; right: -120px; opacity: 0.24; }

.pf-cta__inner { position: relative; z-index: 2; }
.pf-cta__title {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.1rem);
  max-width: 20ch;
  margin: 0 auto 20px;
}
.pf-cta__text {
  color: rgba(255,255,255,0.68);
  max-width: 62ch;
  margin: 0 auto 40px;
}
.pf-cta__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 28px; }
/* No CTA o botão fantasma precisa ser claro (o fundo é sempre escuro) */
.pf-cta__whats { color: #fff; border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
.pf-cta__whats:hover { border-color: #25D366; color: #25D366; }
.pf-cta__note {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
}
.pf-cta__note i { color: var(--color-orange); }


/* ==================================================================
   11. LIGHTBOX (visualizador de imagens)
   ================================================================== */

.pf-lightbox {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.pf-lightbox.is-open { opacity: 1; visibility: visible; }

/* Fundo escuro desfocado */
.pf-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 4, 6, 0.92);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
}

/* Palco central: imagem + legenda */
.pf-lightbox__stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  transform: scale(0.92) translateY(18px);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.pf-lightbox.is-open .pf-lightbox__stage { transform: scale(1) translateY(0); opacity: 1; }

.pf-lightbox__img {
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9);
  object-fit: contain;
  background: #101014;
  /* Transição usada pelo JS ao trocar de imagem (fade suave entre projetos) */
  transition: opacity 0.3s ease;
}

/* Legenda do lightbox */
.pf-lightbox__caption { text-align: center; max-width: 60ch; }
.pf-lightbox__tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--color-orange); color: #17110A;
  padding: 4px 12px; border-radius: var(--radius-full);
  margin-bottom: 12px;
}
.pf-lightbox__caption h3 { color: #fff; font-size: 1.3rem; margin-bottom: 8px; }
.pf-lightbox__caption p  { color: rgba(255,255,255,0.66); font-size: 0.9rem; margin-bottom: 18px; }

/* Botões de navegação e fechar */
.pf-lightbox__btn {
  position: absolute; z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.pf-lightbox__btn:hover { background: var(--color-orange); color: #17110A; transform: scale(1.1); }
.pf-lightbox__btn--close { top: 26px; right: 26px; }
.pf-lightbox__btn--prev  { left: 26px;  top: 50%; transform: translateY(-50%); }
.pf-lightbox__btn--next  { right: 26px; top: 50%; transform: translateY(-50%); }
.pf-lightbox__btn--prev:hover { transform: translateY(-50%) scale(1.1); }
.pf-lightbox__btn--next:hover { transform: translateY(-50%) scale(1.1); }

/* Contador "2 / 6" no rodapé do lightbox */
.pf-lightbox__counter {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
  z-index: 3;
}


/* ==================================================================
   12. ESTADOS DE CARREGAMENTO E DE GALERIA VAZIA
   ================================================================== */

/* Mensagem "Carregando..." exibida antes do JS montar a galeria */
.pf-loading {
  grid-column: 1 / -1;                /* ocupa a largura inteira do grid */
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 60px 20px;
  color: var(--color-text-faint);
  font-family: var(--font-mono); font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.pf-loading__spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-orange);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

/* Card exibido quando ainda não há vídeos na pasta.
   Mantém o mesmo formato 9:16 para o layout não quebrar. */
.pf-empty-card {
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border);
  background: var(--color-surface-glass);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 26px; text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.pf-empty-card:hover { border-color: color-mix(in srgb, var(--color-orange) 45%, var(--color-border)); }
.pf-empty-card i { font-size: 2rem; color: var(--color-orange); opacity: 0.8; }
.pf-empty-card strong { font-family: var(--font-display); font-size: 0.95rem; }
.pf-empty-card span { font-size: 0.78rem; color: var(--color-text-faint); }
/* Caminho da pasta em fonte mono, como um trecho de código */
.pf-empty-card code {
  font-family: var(--font-mono); font-size: 0.7rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-orange);
  padding: 6px 10px; border-radius: var(--radius-sm);
  word-break: break-all;
}

/* Aviso informativo abaixo de uma galeria vazia */
.pf-hint {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 8px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-orange) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-orange) 26%, transparent);
  font-size: 0.85rem;
  color: var(--color-text-dim);
}
.pf-hint i { color: var(--color-orange); font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.pf-hint code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-orange); }


/* ==================================================================
   13. RESPONSIVIDADE DESTA PÁGINA
   Estratégia desktop-first, igual ao responsive.css do site
   ================================================================== */

/* ------------------------------------------------------------------
   NOTEBOOK / TELAS MÉDIAS (até 1180px)
   ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .pf-hero { padding: 170px 0 100px; }

  .pf-intro__grid { grid-template-columns: 1fr; gap: 44px; }

  .pf-video-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .pf-sites-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .pf-site-card--largo { grid-column: span 1; }   /* evita card ocupando a linha toda */

  .pf-highlights { grid-template-columns: 1fr; }

  .pf-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------
   TABLET (até 900px)
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .pf-hero { padding: 145px 0 90px; }
  .pf-hero__title { font-size: clamp(2.4rem, 9vw, 3.6rem); }

  /* Alguns elementos flutuantes saem para não poluir a tela */
  .pf-float--4, .pf-float--5 { display: none; }
  .pf-float { font-size: 0.64rem; padding: 7px 13px; }

  /* A barra de filtros sobe um pouco (header mobile é mais baixo) */
  .pf-filterbar { top: 64px; padding: 12px 0; }
  .pf-filterbar__inner { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .pf-filterbar__inner::-webkit-scrollbar { display: none; }

  .pf-video-grid { grid-template-columns: repeat(2, 1fr); }

  .pf-quote { padding: 26px 26px 26px 54px; }

  /* Lightbox: botões menores e mais próximos das bordas */
  .pf-lightbox__btn { width: 44px; height: 44px; font-size: 1.2rem; }
  .pf-lightbox__btn--close { top: 16px; right: 16px; }
  .pf-lightbox__btn--prev  { left: 12px; }
  .pf-lightbox__btn--next  { right: 12px; }
  .pf-lightbox__img { max-height: 52vh; }
}

/* ------------------------------------------------------------------
   CELULAR (até 600px)
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .pf-hero { padding: 125px 0 76px; }
  .pf-hero__actions { flex-direction: column; align-items: stretch; }
  .pf-hero__actions .btn { width: 100%; }
  .pf-hero__tags { gap: 10px 18px; font-size: 0.78rem; }
  .pf-floats { display: none; }               /* sem elementos flutuantes no celular */
  .pf-scroll-hint { display: none; }

  /* Uma coluna: os vídeos verticais ficam grandes e bonitos */
  .pf-video-grid { grid-template-columns: 1fr; gap: 22px; }
  /* Limita a largura para o vídeo 9:16 não ficar altíssimo demais */
  .pf-video-card { max-width: 360px; margin: 0 auto; width: 100%; }

  .pf-sites-grid { grid-template-columns: 1fr; grid-auto-rows: 170px; }
  .pf-site-card--alto { grid-row: span 2; }

  .pf-stats__grid { grid-template-columns: 1fr; }
  .pf-stat { padding: 34px 20px; }

  .pf-cta__actions { flex-direction: column; align-items: stretch; }
  .pf-cta__actions .btn { width: 100%; }

  .pf-lightbox { padding: 20px 12px; }
  .pf-lightbox__caption h3 { font-size: 1.08rem; }
  .pf-lightbox__stage { gap: 16px; }

  /* Em telas de toque a barra de controles fica sempre visível */
  .pf-video__controls { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   TELAS MUITO PEQUENAS (até 380px)
   ------------------------------------------------------------------ */
@media (max-width: 380px) {
  .pf-hero__title { font-size: 2.1rem; }
  .pf-vc-btn { width: 29px; height: 29px; font-size: 0.9rem; }
  .pf-video__time { font-size: 0.62rem; }
}

/* ------------------------------------------------------------------
   DISPOSITIVOS DE TOQUE (sem mouse)
   Sem hover, então os controles e overlays ficam sempre visíveis
   ------------------------------------------------------------------ */
@media (hover: none) {
  .pf-video__controls { opacity: 1; transform: none; }
  .pf-site-card__overlay { opacity: 1; }
  .pf-site-card__overlay > * { transform: none; opacity: 1; }
  .pf-site-card__zoom { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------
   PREFERÊNCIA POR MENOS ANIMAÇÃO
   Desliga os loops decorativos para quem ativou essa opção no sistema
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pf-float,
  .pf-hero__beam,
  .pf-hero__title .text-gradient,
  .pf-video__bigplay::before,
  .pf-scroll-hint__line::after { animation: none !important; }
}

/* ------------------------------------------------------------------
   IMPRESSÃO
   Esconde elementos interativos ao imprimir a página
   ------------------------------------------------------------------ */
@media print {
  .header, .pf-filterbar, .whatsapp-float, .back-to-top,
  .pf-lightbox, .loader, .cursor-dot, .cursor-ring,
  .pf-video__controls, .pf-video__bigplay { display: none !important; }
  .pf-section, .pf-hero { page-break-inside: avoid; }
}