/* ================================================================
   ARQUIVO: css/portfolio.css
   USO:     Incluído APENAS em portfolio.html
   CONTÉM:  Estilos da página de portfólio e da galeria de projetos

   NOTA: os estilos do LIVRINHO estão no final deste arquivo,
   na seção marcada como LIVRINHO. Separamos em seções claras
   para facilitar a manutenção.
================================================================ */


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

#pf-hero {
  position: relative;
  padding: clamp(130px, 18vh, 180px) var(--px) clamp(60px, 8vh, 90px);
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

.pf-hero-glow {
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 80vw; height: 55vw;
  background: radial-gradient(ellipse, rgba(5,37,232,.22), transparent 60%);
  pointer-events: none;
  animation: pulsar 8s ease-in-out infinite;
}
/* Reutiliza a animação definida em home.css ou global.css */
@keyframes pulsar {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;  transform: translateX(-50%) scale(1.06); }
}

/* Badge superior */
.pf-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(5,37,232,.15);
  border: 1px solid rgba(56,200,255,.22);
  border-radius: 100px;
  padding: 7px 18px;
  margin-bottom: 24px;
  animation: subir .9s ease both;
}
.pf-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bn);
  box-shadow: 0 0 10px var(--bn);
  animation: piscar 1.6s ease-in-out infinite;
}
@keyframes piscar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .2; transform: scale(.5); }
}
.pf-badge span {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--bl);
}
@keyframes subir {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* H1 da página */
.pf-titulo {
  font-family: var(--T);
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: .88;
  letter-spacing: 2px;
  margin-bottom: 20px;
  animation: subir .9s .08s ease both;
}
.pf-titulo .a { color: var(--bl); }

.pf-sub {
  font-size: clamp(.88rem, 2vw, .96rem);
  color: var(--gr);
  max-width: 520px;
  margin: 0 auto 44px;
  line-height: 1.85;
  animation: subir .9s .16s ease both;
}

/* ---- ABAS de categoria (Sites / Design) ---- */
.pf-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(56,200,255,.1);
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  gap: 4px;
  animation: subir .9s .24s ease both;
}

.pf-tab {
  background: transparent;
  border: none;
  color: var(--gr);
  font-family: var(--B);
  font-size: clamp(.7rem, 2vw, .78rem);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 16px clamp(18px, 4vw, 40px);
  cursor: none;
  position: relative;
  transition: color .35s;
  display: flex;
  align-items: center;
  gap: 7px;
  /* Tamanho mínimo para touch */
  min-height: 44px;
}

/* Linha inferior da aba ativa */
.pf-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bd), var(--bn));
  transform: scaleX(0);
  transition: transform .4s var(--ease);
}
.pf-tab:hover       { color: #fff; }
.pf-tab.ativa       { color: #fff; }
.pf-tab.ativa::after{ transform: scaleX(1); }


/* ================================================================
   SEÇÕES DE CONTEÚDO DO PORTFÓLIO
================================================================ */

/* Cada seção é uma aba (sites ou design) */
.pf-secao {
  padding: clamp(56px, 8vw, 80px) var(--px);
  display: none; /* Oculta por padrão; JS mostra a ativa */
  position: relative;
  z-index: 1;
}
.pf-secao.ativa { display: block; }

/* Cabeçalho da seção (título + filtros) */
.pf-sec-head { margin-bottom: 44px; }

.pf-sec-tag {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--bl);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pf-sec-linha { width: 26px; height: 1px; background: var(--bl); flex-shrink: 0; }

.pf-sec-titulo {
  font-family: var(--T);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: .94;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.pf-sec-titulo .a { color: var(--bl); }

.pf-sec-sub {
  font-size: clamp(.82rem, 2vw, .88rem);
  color: var(--gr);
  line-height: 1.8;
  max-width: 440px;
  margin-top: 12px;
}

/* Filtros por subcategoria */
.pf-filtros {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.filtro-btn {
  background: transparent;
  border: 1px solid rgba(56,200,255,.16);
  color: var(--gr);
  padding: 7px 18px;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: none;
  font-family: var(--B);
  transition: all .35s;
  min-height: 38px;
}
.filtro-btn.ativo,
.filtro-btn:hover {
  background: var(--bd);
  border-color: var(--bd);
  color: #fff;
  box-shadow: 0 0 20px rgba(5,37,232,.45);
}


/* ================================================================
   GALERIA DE PROJETOS (grid de cards)
================================================================ */

.galeria-projetos {
  display: grid;
  /* ★ COMO MUDAR O NÚMERO DE COLUNAS:
     Troque o 300px pelo tamanho mínimo que cada card deve ter.
     - 300px = 3 colunas no desktop
     - 400px = 2 colunas no desktop
     Colunas ajustam automaticamente conforme a tela. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

/* Card de projeto */
.card-projeto {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--dk);
  border: 1px solid rgba(56,200,255,.08);
  cursor: none;
  /* Proporção fixa para todos os cards
     ★ COMO MUDAR A PROPORÇÃO DOS CARDS:
       - 4/3 → mais quadrado
       - 16/9 → mais largo (paisagem)
       - 1/1 → quadrado perfeito */
  aspect-ratio: 4 / 3;
  transition: transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
.card-projeto:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 28px 60px rgba(5,37,232,.32), 0 0 0 1px rgba(56,200,255,.2);
  border-color: rgba(56,200,255,.22);
}

/* Badge da categoria (sempre visível no canto) */
.card-badge {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(5,37,232,.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(56,200,255,.25);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bl);
  z-index: 2;
}

/* ★ IMAGEM DO CARD
   object-fit: cover → preenche o espaço sem distorcer
   ★ COMO MUDAR O TAMANHO DAS IMAGENS DE CAPA:
     Salve em img/portfolio/ com proporção 4:3
     Tamanho recomendado: 800×600px (JPG) */
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .65s var(--ease), filter .5s;
}
.card-projeto:hover .card-img {
  transform: scale(1.08);
  filter: brightness(.7);
}

/* Overlay com informações (aparece no hover) */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(2,6,16,.97) 0%,
    rgba(5,37,232,.25) 55%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity .4s;
}
.card-projeto:hover .card-overlay { opacity: 1; }

.card-cat  { font-size:.62rem;color:var(--bl);letter-spacing:3px;text-transform:uppercase;font-weight:700;margin-bottom:5px; }
.card-nome { font-family:var(--T);font-size:1.35rem;letter-spacing:1.5px;margin-bottom:7px;color:#fff; }
.card-desc { font-size:.76rem;color:rgba(200,215,235,.85);line-height:1.5;margin-bottom:12px; }

/* Botão "abrir projeto" no overlay */
.card-btn-abrir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bn);
  border: 1px solid rgba(0,242,255,.3);
  padding: 7px 14px;
  border-radius: 3px;
  transition: background .3s;
  white-space: nowrap;
}
.card-projeto:hover .card-btn-abrir { background: rgba(0,242,255,.08); }

/* Placeholder quando não há imagem */
.card-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gr);
  font-size: .74rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--dk), var(--card));
}
.card-placeholder svg { opacity: .3; }

/* Estado vazio (sem projetos na categoria) */
.galeria-vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
  border: 1px dashed rgba(56,200,255,.15);
  border-radius: 16px;
  color: var(--gr);
}
.galeria-vazio strong {
  display: block;
  color: #fff;
  font-family: var(--T);
  font-size: 1.4rem;
  letter-spacing: 1px;
  margin-top: 14px;
  margin-bottom: 10px;
}
.galeria-vazio p { font-size: .85rem; line-height: 1.9; }
.galeria-vazio code {
  background: rgba(56,200,255,.08);
  border: 1px solid rgba(56,200,255,.15);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .8rem;
  color: var(--bl);
}


/* ================================================================
   CTA FINAL DO PORTFÓLIO
================================================================ */

.pf-cta-section {
  text-align: center;
  padding: clamp(56px, 8vw, 90px) var(--px);
  background: var(--nv);
  border-top: 1px solid rgba(5,37,232,.12);
  position: relative;
  z-index: 1;
}
.pf-cta-section h2 {
  font-family: var(--T);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.pf-cta-section h2 .a { color: var(--bl); }
.pf-cta-section p {
  font-size: clamp(.86rem, 2vw, .92rem);
  color: var(--gr);
  line-height: 1.8;
  max-width: 460px;
  margin: 0 auto 32px;
}


/* ================================================================
   ════════════════════════════════════════════════════════════════
   LIVRINHO (FLIP BOOK)
   Estilos da animação de folhear páginas.
   ════════════════════════════════════════════════════════════════

   ★ COMO CONFIGURAR O TAMANHO DO LIVRINHO:
     --livro-larg → largura máxima do livro aberto (duas páginas)
     --livro-alt  → altura das páginas
     --livro-vel  → velocidade da animação em segundos

   ★ TAMANHO IDEAL DAS IMAGENS DAS PÁGINAS:
     Largura:  1200 px
     Altura:    800 px
     Proporção: 3:2
     Formato:   JPG ou PNG
     Pasta:     img/portfolio/

     Em mm para telas (72 dpi): 423 × 282 mm
     Em mm para impressão (300 dpi): 101 × 67 mm
================================================================ */

:root {
  --livro-larg: 920px;  /* Largura máxima do livro aberto */
  --livro-alt:  520px;  /* Altura das páginas */
  --livro-vel:  0.72s;  /* ★ Velocidade do flip — reduza para mais rápido */
}


/* ---- OVERLAY (fundo escurecido do livrinho) ---- */

#livro-overlay {
  position: fixed;
  inset: 0;
  z-index: 98000;
  background: rgba(2, 6, 16, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Oculto por padrão */
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  backdrop-filter: blur(16px);
  /* Padding para o livrinho não encostar na borda no mobile */
  padding: 16px;
}
/* Classe adicionada pelo JS para abrir */
#livro-overlay.aberto {
  opacity: 1;
  pointer-events: all;
}


/* ---- CONTAINER principal do livrinho ---- */

#livro-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: var(--livro-larg);
}


/* ---- CABEÇALHO do livrinho ---- */

#livro-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 0 2px;
  flex-wrap: wrap;
  gap: 12px;
}
#livro-subtitulo {
  font-size: .63rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bl);
  margin-bottom: 5px;
  font-weight: 700;
}
#livro-titulo {
  font-family: var(--T);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: 2px;
  color: var(--wh);
  line-height: 1;
}
/* Botão fechar */
#livro-fechar {
  width: 40px; height: 40px;
  background: rgba(56,200,255,.08);
  border: 1px solid rgba(56,200,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  color: var(--gr);
  transition: background .3s, color .3s, transform .3s;
  flex-shrink: 0;
}
#livro-fechar:hover {
  background: rgba(56,200,255,.18);
  color: var(--wh);
  transform: rotate(90deg);
}


/* ---- PALCO (perspectiva 3D) ---- */

#livro-palco {
  position: relative;
  width: 100%;
  perspective: 2000px;
}
/* Sombra projetada abaixo do livro */
#livro-sombra {
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 28px;
  background: radial-gradient(ellipse, rgba(5,37,232,.5), transparent 70%);
  filter: blur(10px);
}


/* ---- O LIVRO (duas páginas lado a lado) ---- */

#livro {
  display: flex;
  width: 100%;
  /* ★ COMO MUDAR A ALTURA DO LIVRINHO:
     Edite a variável --livro-alt no :root acima.
     clamp(mín, preferido, máx) garante responsividade. */
  height: clamp(180px, 44vw, var(--livro-alt));
  position: relative;
  transform-style: preserve-3d;
  /* Bordas arredondadas na capa do livro */
  border-radius: 4px;
  box-shadow: 0 16px 56px rgba(0,0,0,.6), 0 0 0 1px rgba(56,200,255,.06);
}

/* Todas as "páginas" são posicionadas absolutas dentro do livro */
.pagina-livro {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%; /* Cada página ocupa metade do livro */
  overflow: hidden;
}

/* Página ESQUERDA (verso) */
.pagina-esq {
  left: 0;
  background: var(--dk);
  border-radius: 4px 0 0 4px;
  border-right: 1px solid rgba(56,200,255,.06);
}
/* Página DIREITA (frente) */
.pagina-dir {
  right: 0;
  background: var(--card);
  border-radius: 0 4px 4px 0;
}

/* Container interno de cada página */
.pagina-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ★ IMAGEM DENTRO DA PÁGINA
   object-fit: cover → preenche sem distorcer, nunca quebra o layout
   ★ COMO MUDAR O TAMANHO DAS IMAGENS:
     Edite --livro-larg e --livro-alt acima.
     As imagens são redimensionadas automaticamente pelo CSS.
     Salve sempre em: img/portfolio/nome.jpg
     Tamanho ideal: 1200×800px (proporção 3:2) */
.pagina-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Preenche todo o espaço sem distorcer */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Sombra da lombada (esquerda) */
.lombada-esq {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.22));
  pointer-events: none;
}
/* Sombra da lombada (direita) */
.lombada-dir {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(270deg, transparent, rgba(0,0,0,.22));
  pointer-events: none;
}

/* Placeholder quando não há imagem */
.pagina-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gr);
  font-size: .72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--dk), var(--card));
}
.pagina-placeholder svg { opacity: .28; }


/* ---- PÁGINA DE FLIP (a que anima) ---- */

#pagina-flip {
  left: 50%;
  width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  /* ★ COMO MUDAR A VELOCIDADE DO FLIP:
     Edite a variável --livro-vel no :root acima.
     0.4s = rápido | 0.7s = padrão | 1.2s = dramático */
  transition: transform var(--livro-vel) cubic-bezier(.645, .045, .355, 1);
  z-index: 10;
  background: transparent;
}

/* Frente da página animada */
.flip-frente,
.flip-verso {
  position: absolute;
  inset: 0;
  /* backface-visibility: hidden oculta o verso durante a rotação */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-frente { background: var(--card); }
.flip-verso  {
  background: var(--dk);
  /* Rotacionado para que apareça "do outro lado" */
  transform: rotateY(180deg);
}


/* ---- NAVEGAÇÃO do livrinho ---- */

#livro-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.livro-btn {
  width: 44px; height: 44px;
  background: rgba(5,37,232,.12);
  border: 1px solid rgba(56,200,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  color: var(--bl);
  transition: background .3s, transform .3s, opacity .3s;
}
.livro-btn:hover:not(:disabled) {
  background: rgba(5,37,232,.28);
  transform: scale(1.1);
}
.livro-btn:disabled { opacity: .25; pointer-events: none; }

/* Contador de páginas */
#livro-paginacao {
  font-family: var(--T);
  font-size: 1.25rem;
  letter-spacing: 2px;
  color: var(--wh);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 76px;
  justify-content: center;
}
#livro-paginacao .sep { color: var(--gr); }


/* ---- DOTS de progresso ---- */

#livro-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.livro-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(56,200,255,.2);
  cursor: none;
  transition: background .3s, transform .3s, width .3s;
}
.livro-dot.ativo {
  background: var(--bl);
  transform: scale(1.3);
  width: 20px;
  border-radius: 3px;
}


/* ================================================================
   RESPONSIVIDADE — PORTFÓLIO
================================================================ */

/* Mobile: sem cursor personalizado nos botões do livrinho */
@media (hover: none) and (pointer: coarse) {
  .livro-btn, .filtro-btn, .pf-tab { cursor: pointer; }
}

@media (max-width: 767px) {
  /* Galeria em coluna única no mobile */
  .galeria-projetos { grid-template-columns: 1fr; }
  /* Abas com fonte menor */
  .pf-tab { padding: 14px 16px; font-size: .68rem; }
  /* Livrinho menor */
  #livro { height: clamp(160px, 52vw, 280px); }
  #livro-container { gap: 14px; }
  #livro-titulo { font-size: clamp(1.3rem, 5vw, 1.8rem); }
}

@media (max-width: 480px) {
  .pf-titulo { font-size: clamp(2.8rem, 11vw, 3.5rem); }
  /* Galeria em coluna única */
  .galeria-projetos { gap: 16px; }
  /* Botões flutuantes não cobrem o livrinho */
  #livro-overlay { padding: 10px; }
}


/* ================================================================
   VIEWER DE SITES — iframe overlay
   Abre ao clicar num card de sites no portfólio.
================================================================ */
#klk-viewer-sites {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; flex-direction: column;
  background: rgba(2,5,16,.97); backdrop-filter: blur(24px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.16,1,.3,1);
}
#klk-viewer-sites.aberto { opacity:1; pointer-events:all; }

.kvs-barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px clamp(16px,3vw,28px);
  background: rgba(4,8,20,.98);
  border-bottom: 1px solid rgba(56,200,255,.1);
  flex-shrink: 0; gap: 12px;
}
.kvs-info { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.kvs-dots { display:flex; gap:6px; flex-shrink:0; }
.kvs-dots span { width:10px; height:10px; border-radius:50%; }
.kvs-dots span:nth-child(1){ background:#ff5f57; }
.kvs-dots span:nth-child(2){ background:#ffbd2e; }
.kvs-dots span:nth-child(3){ background:#28c840; }
.kvs-url {
  flex:1; height:22px; background:rgba(56,200,255,.05);
  border:1px solid rgba(56,200,255,.1); border-radius:5px;
  display:flex; align-items:center; padding:0 12px;
  font-size:.62rem; color:var(--gr); font-family:var(--B);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kvs-acoes { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.kvs-btn {
  display:flex; align-items:center; gap:6px;
  background:rgba(56,200,255,.06); border:1px solid rgba(56,200,255,.18);
  border-radius:100px; padding:6px 14px;
  color:var(--bl); font-family:var(--B); font-size:.64rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; cursor:none;
  transition:background .3s; text-decoration:none; white-space:nowrap;
}
.kvs-btn:hover { background:rgba(56,200,255,.14); color:#fff; }
.kvs-close {
  width:34px; height:34px; background:rgba(56,200,255,.06);
  border:1px solid rgba(56,200,255,.14); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:none; color:var(--gr);
  transition:background .3s, color .3s, transform .3s;
}
.kvs-close:hover { background:rgba(255,60,60,.15); color:#fff; transform:rotate(90deg); }

#kvs-iframe { flex:1; width:100%; border:none; background:#fff; }

.kvs-loading {
  position:absolute; inset:54px 0 0 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; background:var(--bk); color:var(--gr);
  font-size:.7rem; letter-spacing:3px; text-transform:uppercase; font-weight:700;
  pointer-events:none; transition:opacity .3s;
}
.kvs-loading.oculto { opacity:0; pointer-events:none; }
.kvs-spin {
  width:36px; height:36px;
  border:2px solid rgba(56,200,255,.12); border-top-color:var(--bl);
  border-radius:50%; animation:kvsGirar .8s linear infinite;
}
@keyframes kvsGirar { to{ transform:rotate(360deg); } }

@media (max-width:600px) { .kvs-barra{padding:8px 12px} .kvs-btn span{display:none} }


/* ================================================================
   GALERIA LIGHTBOX DE DESIGN
   Abre ao clicar num card de design.
   Mostra as fotos em tela cheia com navegação lateral + thumbnails.
================================================================ */
#klk-galeria-design {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; flex-direction: column;
  background: rgba(1,3,10,.97); backdrop-filter: blur(30px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.16,1,.3,1);
}
#klk-galeria-design.aberto { opacity:1; pointer-events:all; }

.kgd-overlay-bg { position:absolute; inset:0; z-index:0; cursor:none; }

.kgd-fechar {
  position:absolute; top:16px; right:20px; z-index:10;
  width:38px; height:38px;
  background:rgba(56,200,255,.06); border:1px solid rgba(56,200,255,.15);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:none; color:var(--gr);
  transition:background .3s, color .3s, transform .3s, border-color .3s;
}
.kgd-fechar:hover { background:rgba(255,60,60,.15); border-color:rgba(255,100,100,.3); color:#fff; transform:rotate(90deg); }

.kgd-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 60px 16px clamp(20px,4vw,40px);
  flex-shrink:0; position:relative; z-index:1;
}
.kgd-titulo {
  font-family:var(--T); font-size:clamp(1.1rem,2.5vw,1.7rem);
  line-height:.88; letter-spacing:2px; color:var(--wh);
}
.kgd-contador {
  font-size:.7rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--gr); background:rgba(56,200,255,.06);
  border:1px solid rgba(56,200,255,.12); border-radius:100px; padding:4px 14px;
}

/* Palco central da imagem */
.kgd-palco {
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:16px; padding:0 clamp(12px,3vw,32px); min-height:0; position:relative; z-index:1;
}
.kgd-img-wrap {
  flex:1; max-width:900px; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.kgd-img {
  max-width:100%; max-height:calc(100vh - 220px);
  object-fit:contain; border-radius:var(--r2);
  box-shadow:0 24px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(56,200,255,.1);
  transition:opacity .3s;
}
.kgd-loading {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,5,16,.6);
}
.kgd-spin {
  width:36px; height:36px;
  border:2px solid rgba(56,200,255,.12); border-top-color:var(--bl);
  border-radius:50%; animation:kvsGirar .8s linear infinite;
}

/* Botões de navegação */
.kgd-nav {
  width:48px; height:48px; flex-shrink:0;
  background:rgba(56,200,255,.06); border:1px solid rgba(56,200,255,.14);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:none; color:var(--wh);
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.kgd-nav:hover:not(:disabled) { background:var(--bd); border-color:var(--bd); transform:scale(1.1); }
.kgd-nav:disabled { opacity:.2; }

/* Dots de paginação */
.kgd-dots {
  display:flex; justify-content:center; align-items:center; gap:7px;
  padding:10px 0; flex-shrink:0; position:relative; z-index:1;
}
.kgd-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(56,200,255,.18); border:none; cursor:none;
  transition:background .3s, width .3s;
}
.kgd-dot.ativo { background:var(--bl); width:18px; border-radius:4px; box-shadow:0 0 8px var(--bl); }

/* Thumbnails na base */
.kgd-thumbs {
  display:flex; gap:8px; padding:12px clamp(16px,4vw,40px) 16px;
  overflow-x:auto; flex-shrink:0;
  scrollbar-width:thin; scrollbar-color:rgba(56,200,255,.2) transparent;
  position:relative; z-index:1;
}
.kgd-thumb {
  width:72px; height:52px; flex-shrink:0; border-radius:8px; overflow:hidden;
  border:2px solid transparent; cursor:none;
  transition:border-color .3s, transform .3s var(--ease), opacity .3s;
  opacity:.45;
}
.kgd-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.kgd-thumb.ativa { border-color:var(--bl); opacity:1; transform:scale(1.06); }
.kgd-thumb:hover { opacity:.8; }

@media (max-width:600px) {
  .kgd-nav  { width:38px; height:38px; }
  .kgd-thumbs { display:none; }
}


/* ================================================================
   OVERLAY BASE — usado pelo viewer de sites e pelo viewer de PDF
================================================================ */
.klk-overlay {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; flex-direction: column;
  background: rgba(2,4,13,.97);
  backdrop-filter: blur(22px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s cubic-bezier(.16,1,.3,1);
}
.klk-overlay.aberto { opacity:1; pointer-events:all; }

/* Barra de topo — igual ao browser */
.klk-barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px clamp(14px,3vw,28px);
  background: rgba(3,6,18,.99);
  border-bottom: 1px solid rgba(56,200,255,.1);
  flex-shrink: 0; gap: 10px;
  height: 50px;
}
.klk-barra-esq {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.klk-dots { display:flex; gap:5px; flex-shrink:0; }
.klk-dots span {
  width: 11px; height: 11px; border-radius: 50%; display: block;
}
.klk-dots span:nth-child(1) { background: #ff5f57; }
.klk-dots span:nth-child(2) { background: #ffbd2e; }
.klk-dots span:nth-child(3) { background: #28c840; }

/* Barra de URL com nome do site/PDF */
.klk-url {
  flex: 1; height: 22px;
  background: rgba(56,200,255,.05);
  border: 1px solid rgba(56,200,255,.09);
  border-radius: 5px;
  padding: 0 12px;
  font-family: var(--B); font-size: .62rem; color: var(--gr);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.klk-cat {
  background: rgba(5,37,232,.5); color: var(--bl);
  font-size: .55rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 1px 7px; border-radius: 100px;
  white-space: nowrap;
}
.klk-pdf-ico { color: var(--bl); flex-shrink: 0; }

.klk-barra-dir { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.klk-btn-aba {
  display: flex; align-items: center; gap: 6px;
  background: rgba(56,200,255,.06); border: 1px solid rgba(56,200,255,.16);
  border-radius: 100px; padding: 5px 14px;
  font-family: var(--B); font-size: .62rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--bl); cursor: none; transition: background .3s, color .3s;
  text-decoration: none; white-space: nowrap;
}
.klk-btn-aba:hover { background: rgba(56,200,255,.14); color: #fff; }

.klk-fechar-btn {
  width: 32px; height: 32px;
  background: rgba(56,200,255,.05); border: 1px solid rgba(56,200,255,.13);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: none; color: var(--gr); flex-shrink: 0;
  transition: background .3s, color .3s, transform .3s;
}
.klk-fechar-btn:hover {
  background: rgba(255,55,55,.14); border-color: rgba(255,90,90,.3);
  color: #fff; transform: rotate(90deg);
}

/* Loading spinner */
.klk-loading {
  position: absolute; inset: 50px 0 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: var(--bk); color: var(--gr);
  font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700;
  pointer-events: none;
}
.klk-spin {
  width: 34px; height: 34px;
  border: 2px solid rgba(56,200,255,.12); border-top-color: var(--bl);
  border-radius: 50%; animation: klkGirar .8s linear infinite;
}
@keyframes klkGirar { to { transform: rotate(360deg); } }


/* ================================================================
   VIEWER DE SITES — iframe
   O site fica dentro do overlay, 100% navegável
================================================================ */
/* iframe fica embaixo da barra — flex:1 preenche o resto */


/* ================================================================
   VIEWER DE PDF — apresentação rolável
   O PDF ocupa toda a área com scroll vertical.
   Proporção: o embed adapta ao conteúdo do PDF.
================================================================ */
.klk-pdf-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: #1a1a1a;  /* fundo de "apresentação" */
}
.klk-pdf-area embed {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

@media (max-width:600px) {
  .klk-barra { padding: 8px 12px; height: 46px; }
  .klk-btn-aba span { display: none; }
  .klk-dots { display: none; }
}