/* =====================================================================
   VALENTEC — Página Serviços (pages/servicos.html)
   ---------------------------------------------------------------------
   Índice
     0. Tokens da página
     1. Hero                      (.sv-hero, .ph-bg, .sv-shade, .sv-pills)
     2. Como trabalhamos          (.wp-*)
     3. Browser Showcase          (.bs-*, .browser-*)
        3.1 Cabeçalho e filtros
        3.2 Janela do navegador
        3.3 Barra de informações e navegação
        3.4 Miniaturas + card "Todos os projetos"
        3.5 Animação de entrada
     4. Perguntas frequentes      (.qa)
     5. Seção .fx (ajustes)
     6. Responsivo (maior → menor)
        6.1 ≤ 1100px e ≥ 821px
        6.2 ≤ 1024px
        6.3 ≤ 820px
        6.4 ≤ 720px
        6.5 ≤ 380px

   Convenções
   - Base (desktop) primeiro; media queries ficam juntas no fim (seção 6),
     sempre da maior largura para a menor.
   - Cores/curvas repetidas viram tokens --sv-* (seção 0).
   - Depende do CSS global: --ease, --navy, --pad, --hh e dos keyframes
     phZoom e bsIn. Estilos base de .browser-window, .browser-toolbar,
     .browser-float, .bs-pill, .wp-line, .wp-dot, .wp-link etc. também
     vivem no global; aqui ficam apenas os complementos desta página.
   ===================================================================== */


/* =====================================================================
   0. TOKENS DA PÁGINA
   ===================================================================== */
:root{
  /* cores */
  --sv-ink:          #081226;   /* texto forte / fundo escuro de botões */
  --sv-accent:       #2878f0;   /* azul de ação, foco e item ativo */
  --sv-text-2:       #4b5870;   /* texto secundário */
  --sv-muted:        #64748b;   /* texto de apoio */
  --sv-icon-muted:   #94a0b4;   /* ícones discretos (cadeado da URL) */
  --sv-line:         #e5e7eb;   /* bordas padrão */
  --sv-line-strong:  #d8dee8;   /* bordas/scrollbar mais visíveis */
  --sv-line-hover:   #b9c9e4;   /* borda no hover das miniaturas */
  --sv-surface:      #f5f7fa;   /* fundo de cards/miniaturas */
  --sv-night:        2 10 26;   /* RGB do overlay do hero: rgb(var(--sv-night) / α) */

  /* movimento */
  --sv-ease-out:     cubic-bezier(.22,1,.36,1);
  --sv-stagger:      100ms;     /* atraso entre itens nas entradas */

  /* raio */
  --sv-radius:       10px;
}


/* =====================================================================
   1. HERO
   ===================================================================== */

/* Imagem de fundo (padrão .ph-bg, com zoom de entrada ao exibir a página) */
.ph-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ph-bg img{width:100%;height:100%;object-fit:cover}
[data-page]:not([hidden]) .ph-bg img{animation:phZoom 2.8s var(--ease) both}

.sv-hero .ph-bg img{object-position:58% 42%}

/* Overlay escuro: vinheta central + escurecimento no topo e na base */
.sv-shade{
  background:
    radial-gradient(58% 56% at 50% 50%,
      rgb(var(--sv-night) / .84) 0%,
      rgb(var(--sv-night) / .66) 60%,
      rgb(var(--sv-night) / .42) 100%),
    linear-gradient(0deg,   rgb(var(--sv-night) / .92) 0%, rgb(var(--sv-night) / 0) 32%),
    linear-gradient(180deg, rgb(var(--sv-night) / .72) 0%, rgb(var(--sv-night) / 0) 24%);
}

/* Conteúdo */
.sv-hero-in{display:flex;flex-direction:column;align-items:center}
.sv-hero h1{
  margin-top:0;
  max-width:12.5em;
  font-size:clamp(2.9rem,5.4vw,5.6rem);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.05em;
}

/* Atalhos (pills) */
.sv-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:44px}
.sv-pills a:hover{transform:none}   /* anula o "lift" global */


/* =====================================================================
   2. COMO TRABALHAMOS (.wp)
   ===================================================================== */

/* Cabeçalho */
.wp-head{max-width:760px}
.wp-title{
  margin-top:16px;
  font-size:clamp(40px,4.4vw,60px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
}

/* Trilha + linha de progresso */
.wp-track{position:relative;margin-top:80px}
.wp.is-in .wp-line i{transform:scaleX(1)}

/* Etapas */
.wp-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(20px,2.4vw,40px);
}
.wp-ic svg{width:22px;height:22px}
.wp-step h3{
  margin-top:22px;
  font-size:20px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.02em;
  transition:color .25s;
}

/* Destaque do conector ao passar o mouse / focar a etapa */
@media (hover:hover){
  .wp-step:hover .wp-link{transform:scaleX(1)}
}
.wp-step:focus-visible .wp-link{transform:scaleX(1)}

/* Entrada progressiva: título, etapas (stagger via --i) e fechamento.
   Ordem importa: .wp-close sobrescreve o atraso logo abaixo. */
.wp-anim .wp-head > *,
.wp-anim .wp-step,
.wp-anim .wp-close{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease,transform .6s var(--sv-ease-out);
  transition-delay:calc(var(--i,0) * var(--sv-stagger));
}
.wp-anim .wp-close{transition-delay:1s}

.wp-anim.is-in .wp-head > *,
.wp-anim.is-in .wp-step,
.wp-anim.is-in .wp-close{opacity:1;transform:none}
.wp-anim.is-in .wp-step{transition-property:opacity,transform}


/* =====================================================================
   3. BROWSER SHOWCASE (.bs)
   ===================================================================== */

/* ---------- 3.1 Cabeçalho e filtros ---------- */
.bs-wrap{max-width:calc(1240px + var(--pad) * 2)}
.bs-head{max-width:760px}
.bs-title{
  margin-top:16px;
  font-size:clamp(40px,4.4vw,60px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.bs-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}

/* ---------- 3.2 Janela do navegador ---------- */
.bs-stage{position:relative;margin-top:32px}
.bs-stage::before{   /* brilho azul suave atrás da janela */
  content:"";
  position:absolute;
  inset:-12% -8%;
  z-index:0;
  background:radial-gradient(closest-side,rgba(40,120,240,.08),transparent);
  pointer-events:none;
}

.browser-dots{display:flex;gap:7px}

.browser-url svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--sv-icon-muted);stroke-width:1.4}
.browser-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Variante: exibe o nome do projeto em vez da URL */
.browser-url.is-name{font-family:inherit;font-size:13px;font-weight:500}
.browser-url.is-name svg{display:none}

.browser-content img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transform-origin:50% 40%;
  transition:opacity .2s ease-out,transform .25s ease-out;
}
/* Estado de troca de projeto (fade-out antes de trocar a imagem) */
.browser-window.is-out .browser-content img{opacity:0;transform:scale(.98)}

/* [hidden] precisa vencer os display definidos no global */
.browser-float[hidden],
.browser-action[hidden],
.bs-link[hidden]{display:none !important}

@media (hover:hover) and (min-width:821px){
  .browser-window:hover{
    transform:translateY(-4px);
    box-shadow:0 34px 80px rgba(8,18,38,.14),0 2px 6px rgba(8,18,38,.04);
  }
  .browser-window:hover .browser-float{opacity:1;transform:none;pointer-events:auto}
}

/* ---------- 3.3 Barra de informações e navegação ---------- */
.bs-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin-top:36px}

.bs-info{min-width:0}
.bs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.bs-info.is-in > *{animation:bsIn .38s ease-out both}
.bs-info.is-in > *:nth-child(2){animation-delay:.05s}
.bs-info.is-in > *:nth-child(3){animation-delay:.1s}

.bs-nav{display:flex;align-items:center;gap:20px;flex:none}
.bs-arrows{display:flex;gap:8px}
.bs-arrow svg{width:18px;height:18px}
.bs-arrow.prev svg{transform:rotate(180deg)}
.bs-arrow:disabled{opacity:.4;cursor:default}

.bs-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  padding:0 18px;
  border-radius:var(--sv-radius);
  background:var(--sv-ink);
  color:#fff;
  font-size:15px;
  font-weight:600;
  transition:background .2s ease;
}
.bs-link span{transition:transform .2s ease-out}
.bs-link:hover{background:var(--sv-accent)}
.bs-link:hover span{transform:translateX(3px)}

/* ---------- 3.4 Miniaturas + card "Todos os projetos" ---------- */
.bs-thumbs{
  display:flex;
  gap:16px;
  margin-top:40px;
  margin-inline:-4px;
  padding:4px 4px 8px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--sv-line-strong) transparent;
}

/* 4 itens por linha no desktop (3 projetos + atalho) */
.bs-thumb,
.bs-all{flex:0 0 calc((100% - 48px) / 4);min-width:180px}

/* Miniatura de projeto */
.bs-thumb{text-align:left;scroll-snap-align:start;opacity:.62;transition:opacity .25s ease}
.bs-thumb-img{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--sv-line);
  border-radius:var(--sv-radius);
  background:var(--sv-surface);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.bs-thumb-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.bs-thumb-name{
  display:block;
  margin-top:10px;
  color:var(--sv-text-2);
  font-size:14px;
  font-weight:500;
  transition:color .25s ease;
}

.bs-thumb:hover{opacity:1}
.bs-thumb:hover .bs-thumb-img{border-color:var(--sv-line-hover)}

.bs-thumb[aria-current="true"]{opacity:1}
.bs-thumb[aria-current="true"] .bs-thumb-img{border-color:var(--sv-accent);box-shadow:0 0 0 1px var(--sv-accent)}
.bs-thumb[aria-current="true"] .bs-thumb-name{color:var(--sv-ink)}

.bs-thumb:focus-visible{outline:none}
.bs-thumb:focus-visible .bs-thumb-img{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sv-accent)}

/* Card "Todos os projetos" */
.bs-all{display:block;scroll-snap-align:start;color:var(--sv-ink)}
.bs-all .bs-thumb-name{color:var(--sv-muted)}

.bs-all-box{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  aspect-ratio:16/9;
  padding:16px 18px;
  border:1px solid var(--sv-line);
  border-radius:var(--sv-radius);
  background:var(--sv-surface);
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.bs-all-box b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.bs-all-box small{
  max-width:22ch;
  color:var(--sv-muted);
  font-size:13px;
  line-height:1.4;
  transition:color .25s ease;
}
.bs-all-box svg{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  padding:8px;
  border:1px solid var(--sv-line-strong);
  border-radius:9px;
  background:#fff;
  color:var(--sv-ink);
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease-out;
}

.bs-all:hover .bs-all-box{background:var(--sv-ink);border-color:var(--sv-ink);color:#fff}
.bs-all:hover .bs-all-box small{color:rgba(255,255,255,.7)}
.bs-all:hover .bs-all-box svg{background:var(--sv-accent);border-color:var(--sv-accent);color:#fff;transform:translateX(2px)}

.bs-all:focus-visible{outline:none}
.bs-all:focus-visible .bs-all-box{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sv-accent)}

/* ---------- 3.5 Animação de entrada ---------- */
.bs-anim .bs-a{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease-out,transform .6s var(--sv-ease-out);
  transition-delay:calc(var(--i,0) * var(--sv-stagger));
}
.bs-anim.is-in .bs-a{opacity:1;transform:none}


/* =====================================================================
   4. PERGUNTAS FREQUENTES (.qa)
   Layout: título fixo (sticky) à esquerda, perguntas à direita.
   ===================================================================== */
.qa .wrap{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2vw,32px);
  align-items:start;
}
.qa h2{
  grid-column:1 / span 4;
  position:sticky;
  top:calc(var(--hh) + 32px);
  margin-bottom:0;
  font-size:clamp(34px,3.6vw,58px);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.04em;
}
.qa-grid{grid-column:6 / -1;max-width:none}

/* Pergunta */
.qa summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:24px 0;
  list-style:none;
  cursor:pointer;
  font-size:clamp(17px,1.4vw,20px);
  font-weight:500;
  letter-spacing:-.015em;
}
.qa summary::-webkit-details-marker{display:none}

/* Ícone +/− (duas barras; a vertical gira para formar o "−") */
.qa summary i::before,
.qa summary i::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1.5px;
  background:#fff;
  transform:translate(-50%,-50%);
}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease)}
.qa details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}

/* Resposta */
.qa details[open]{box-shadow:none}
.qa details p{max-width:62ch;padding:0 56px 26px 0}


/* =====================================================================
   5. SEÇÃO .fx
   (o brilho decorativo .fx::before foi removido: estava desativado
    com display:none. Apenas o respiro mobile está na seção 6.4.)
   ===================================================================== */


/* =====================================================================
   6. RESPONSIVO (da maior largura para a menor)
   ===================================================================== */

/* ---------- 6.1 Tablet largo: ≤ 1100px e ≥ 821px ---------- */
@media (max-width:1100px) and (min-width:821px){
  .wp-step h3{font-size:18px}
  .wp-step p{font-size:14.5px}
}

/* ---------- 6.2 ≤ 1024px ---------- */
@media (max-width:1024px){
  /* FAQ: título deixa de ser sticky e empilha sobre as perguntas */
  .qa h2,
  .qa-grid{grid-column:1 / -1;position:static}
  .qa h2{margin-bottom:32px}
}

/* ---------- 6.3 Mobile/tablet: ≤ 820px ---------- */
@media (max-width:820px){

  /* Hero */
  .sv-hero .ph-bg img{object-position:52% 50%}
  .sv-shade{
    background:linear-gradient(180deg,
      rgb(var(--sv-night) / .74) 0%,
      rgb(var(--sv-night) / .8) 45%,
      rgb(var(--sv-night) / .92) 100%);
  }

  /* Como trabalhamos: linha do tempo vertical */
  .wp{padding:80px 0 90px}
  .wp-title{font-size:clamp(34px,9.4vw,42px)}
  .wp-lead{font-size:16px}
  .wp-track{margin-top:52px}
  .wp-line{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
  .wp-line i{transform-origin:top;transform:scaleY(0)}
  .wp.is-in .wp-line i{transform:scaleY(1)}
  .wp-steps{grid-template-columns:1fr;gap:44px}
  .wp-step{padding-left:40px}
  .wp-n{height:auto;font-size:44px}
  .wp-dot{left:0;top:14px}
  .wp-link{display:none}
  .wp-ic{margin-top:14px;width:44px;height:44px}
  .wp-step h3{margin-top:16px;font-size:20px}
  .wp-step p{max-width:none;font-size:16px}
  .wp-close{margin-top:52px;text-align:left;justify-content:flex-start;align-items:flex-start;font-size:15.5px}
  .wp-close svg{margin-top:4px}

  /* Showcase: seção e cabeçalho */
  .bs{padding:80px 0 90px}
  .bs-title{font-size:clamp(34px,9.4vw,42px)}
  .bs-lead{font-size:16px}

  /* Showcase: filtros em faixa rolável de ponta a ponta */
  .bs-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    margin-top:28px;
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
  }
  .bs-filters::-webkit-scrollbar{display:none}
  .bs-pill{flex:none;height:38px;font-size:14px}

  /* Showcase: janela do navegador compacta */
  .bs-stage{margin-top:24px}
  .browser-window{border-radius:var(--sv-radius);box-shadow:0 16px 40px rgba(8,18,38,.10)}
  .browser-toolbar{grid-template-columns:auto minmax(0,1fr) auto;height:38px;padding:0 8px 0 12px;gap:10px}
  .browser-dots{gap:5px}
  .browser-dots i{width:7px;height:7px}
  .browser-url{height:24px;max-width:none;padding:0 10px;border-radius:6px;font-size:11px}
  .browser-url svg{display:none}
  .browser-action{width:28px;height:28px;font-size:14px}
  .browser-float{display:none}

  /* Showcase: informações empilhadas */
  .bs-bar{flex-direction:column;gap:20px;margin-top:24px}
  .bs-name{font-size:28px}
  .bs-meta{font-size:15px}
  .bs-meta #bsSeg,
  .bs-sep{display:none}
  .bs-tags{margin-top:12px}
  .bs-nav{width:100%;gap:12px}
  .bs-count{min-width:0;margin-right:auto;text-align:left}
  .bs-link{padding:0 16px}

  /* Showcase: miniaturas em carrossel de ponta a ponta */
  .bs-thumbs{
    gap:12px;
    margin-top:28px;
    margin-inline:calc(var(--pad) * -1);
    padding:4px var(--pad) 8px;
    scroll-padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .bs-thumbs::-webkit-scrollbar{display:none}
  .bs-thumb,
  .bs-all{flex:0 0 58%;min-width:0}
  .bs-thumb-name{font-size:13.5px}
}

/* ---------- 6.4 Mobile: ≤ 720px ---------- */
@media (max-width:720px){
  /* Hero */
  .sv-hero{min-height:0;padding-bottom:64px}
  .sv-hero h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .sv-pills{gap:8px}
  .sv-pills a{height:44px;padding:0 16px 0 14px;font-size:14px}

  /* FAQ e .fx */
  .qa{padding-block:72px}
  .qa h2{font-size:clamp(30px,8.6vw,38px)}
  .fx{padding-block:80px}
}

/* ---------- 6.5 Telas estreitas: ≤ 380px ---------- */
@media (max-width:380px){
  .bs-link{padding:0 12px;font-size:14px}
}