/* =====================================================================
   QUEM SOMOS — estilos exclusivos de quem-somos.html
   Carregado DEPOIS de css/styles.css: aqui entra só o que não existe lá.
   Nada de :root novo — cor, raio, sombra e easing vêm sempre dos tokens.
   A página reaproveita os blocos da home (.mission, .pillar, .about,
   .check-list, .build-shot, .step, .duvida); o que é só daqui é a versão
   escura da missão, a faixa de sustentabilidade e o cartão de pessoa
   (.team-card) da seção "Conheça nossos profissionais".
   Ritmo de fundo: hero (branco) → missão (escura) → valores (alt) →
   por que (branco) → equipe (alt) → como trabalhamos (branco) → dúvida (alt).
   ===================================================================== */

/* ---------- Item ativo do menu ---------- */
/* Em subpágina o scrollspy do main.js não marca nada (os links são .html),
   então o destaque vem do aria-current="page" do próprio link. */
.nav__link[aria-current="page"] { color: var(--blue-500); background: var(--gray-100); }

/* ---------- Hero de Quem somos ---------- */
/* Hero curto: mesma moldura da home (glow), sem selo, sem a coluna visual da
   direita e com um pouco menos de respiro vertical. */
.qs-hero { padding: clamp(52px, 7vw, 88px) 0 clamp(56px, 7vw, 92px); }
.qs-hero .hero__content { max-width: 760px; }
.qs-hero .hero__text { max-width: 660px; }
/* O styles.css limita .hero__actions e .hero__highlights a 600px e só centraliza
   o CONTEÚDO dessa caixa; com o parágrafo em 660px o botão e os checks sairiam
   30px do eixo do texto. Mesma largura, mesmo eixo (como o hub.css faz). */
.qs-hero .hero__actions,
.qs-hero .hero__highlights { max-width: 660px; }

/* ---------- Missão: seção escura, centralizada ---------- */
/* Mesma receita do .builds da home: fundo --grad-navy, glow radial ciano→azul
   atrás do conteúdo, eyebrow ciano, título branco, texto claro. A seção leva
   .section (padding normal); o .container fica position: relative para pintar
   por cima do ::before. O texto vem centralizado (o styles.css justifica o
   .mission__lead; aqui a especificidade maior devolve o centro, como o dono pediu). */
.qs-mission { background: var(--grad-navy); position: relative; overflow: hidden; }
.qs-mission::before {
  content: "";
  position: absolute;
  inset: -25% auto auto -12%;
  width: 62vw;
  height: 62vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--cyan) 20%, transparent),
    color-mix(in srgb, var(--blue-500) 10%, transparent),
    transparent 70%);
  pointer-events: none;
}
.qs-mission .container { position: relative; }
.qs-mission .eyebrow { color: var(--cyan); }
.qs-mission .section__title { color: var(--white); }
.qs-mission .mission__lead {
  color: color-mix(in srgb, var(--gray-50) 82%, transparent);
  text-align: center;
}
.qs-mission .mission__lead + .mission__lead { margin-top: 14px; }
.qs-mission .mission__lead strong { color: var(--white); }
/* O outline de foco padrão é azul e some no navy (styles.css só cobre .cta,
   .pillar3, .footer...). */
.qs-mission :focus-visible { outline-color: var(--cyan); }

/* Três palavras-chave da missão em pílulas (raio 999px, como .badge e .btn),
   desenhadas para fundo escuro: vidro branco a 8% com hairline ciano. O <ul>
   já vem sem marcador pelo reset do styles.css. */
.qs-mission__keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.qs-mission__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
  color: var(--white);
  background: color-mix(in srgb, var(--white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
}

/* ---------- Valores: mesma família dos pilares ---------- */
/* Os quatro valores usam o cartão .pillar da missão da home dentro de .grid--4.
   O .pillar vem pronto do styles.css (fundo, borda, raio, ícone, hover);
   aqui só se garante que o cartão preenche a célula da grade, para os
   quatro ficarem com a mesma altura mesmo com textos de tamanhos diferentes. */
.qs-values .pillar { height: 100%; }

/* ---------- Por que a Bluhertz: foto no lugar dos contadores ---------- */
/* A coluna .about__media da home trazia os contadores (que saíram do site).
   Aqui ela recebe uma foto real da bancada na moldura .build-shot do styles.css
   (fundo navy, hairline, sombra, legenda em degradê). Solta na coluna, a figura
   ocuparia os ~540px inteiros e, em 3:4, passaria de 700px de altura — muito
   mais do que o texto ao lado. O max-width segura isso; o margin centraliza. */
.qs-about__shot { max-width: 440px; margin-inline: auto; }

/* Link de texto abaixo da foto, no mesmo desenho do .soft-card__cta
   (peso 700, azul-600, "→" no texto). Centralizado como a figura. */
.qs-about__link {
  display: block;
  width: fit-content;
  margin: 16px auto 0;
  font-weight: 700;
  font-size: .95rem;
  color: var(--blue-600);
  transition: color .2s;
}
.qs-about__link:hover { color: var(--blue-500); }

/* Faixa de sustentabilidade, abaixo da grade .about: mesma moldura clara das
   faixas do site (fundo --gray-50, borda --gray-200, raio --radius, sombra
   --shadow-soft) com um filete vertical em degradê na borda esquerda e o
   ícone em caixa de 58px (mesmo desenho do .card__icon, com o tom ciano). */
.qs-sustent {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(40px, 6vw, 56px);
  padding: 26px clamp(22px, 4vw, 34px);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.qs-sustent::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad);
}
.qs-sustent__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  font-size: 1.6rem;
  background: color-mix(in srgb, var(--cyan) 16%, transparent);
}
.qs-sustent h3 { font-size: 1.2rem; margin-bottom: 6px; }
.qs-sustent p { color: var(--muted); font-size: .98rem; }

/* ---------- Equipe: cartões de pessoa ---------- */
/* Grade de 3 → 2 (≤980) → 1 (≤600). minmax(0, 1fr) em vez de 1fr para a
   coluna poder encolher abaixo do min-content do cartão: com body
   { overflow-x: hidden } o terceiro cartão seria cortado, não rolado.
   A regra de 3 colunas tem a mesma especificidade do .grid--3 do styles.css
   e vem depois, então vence — inclusive o "@media (max-width: 560px)
   .grid--3 { 1fr }" de lá. Por isso as quebras de 2 e 1 coluna estão
   redeclaradas no bloco Responsivo, no fim do arquivo. */
.qs-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Mesma moldura do .card / .soft-card do styles.css: fundo branco, borda
   --gray-200, raio --radius, padding 30px (24px em ≤600), hover sobe 6px com
   --shadow e apaga a borda. Coluna flex para o botão do LinkedIn grudar no
   rodapé do cartão (margin-top: auto), como o .soft-card__cta faz. */
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  /* Mesma especificidade do [data-reveal] do styles.css e carregado depois: se a
     transição não incluir opacity, o cartão aparece de repente em vez de fazer o
     fade de .7s que .card e .pillar fazem. transform também em .7s, como lá. */
  transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .3s, border-color .3s;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }

/* Um único profissional: cartão centralizado, ocupando a linha inteira da grade
   e limitado à largura de um cartão e meio. Ao entrar o segundo, basta tirar
   a classe do HTML. */
.team-card--solo { grid-column: 1 / -1; max-width: 440px; margin-inline: auto; width: 100%; }

/* Linha do topo: a foto (mesmo desenho do .soft-card__top). */
.team-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 8px;
  margin-bottom: 18px;
}

/* A foto é sempre um círculo de 96px: width/height 600 no HTML viram 96px aqui
   (CSS vence o atributo) e o object-fit: cover recorta a foto quadrada sem
   distorcer. O fundo navy aparece só enquanto a imagem carrega. */
.team-card__photo {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grad-navy);
  box-shadow: var(--shadow-soft);
}

.team-card__name { font-size: 1.15rem; margin-bottom: 4px; }
/* Cargo no mesmo azul e peso do .soft-card__price / .soft-card__cta. */
.team-card__role {
  color: var(--blue-600);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 12px;
}
.team-card__bio { color: var(--muted); font-size: .95rem; }

/* Rodapé do cartão: botão do LinkedIn. margin-top: auto empurra a linha para
   o fim do cartão, então os botões ficam alinhados mesmo com resumos de
   tamanhos diferentes. */
.team-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}
/* Padding menor que o .btn padrão (14px 26px): em 3 colunas logo acima de
   980px o cartão tem ~240px úteis. */
.team-card__btn { padding: 10px 18px; font-size: .95rem; }

/* ---------- Como trabalhamos: passos em linha ---------- */
/* Os quatro cartões .step já ficam em linha pelo styles.css (4 colunas, 2 em
   ≤980px, 1 em ≤560px). Aqui entra só o traço que atravessa o vão de 24px entre
   um cartão e o próximo, na altura do número, para a fileira ler como sequência.
   O .step já é position: relative; o ::after nasce do lado de fora do cartão,
   com a largura exata do gap da grade .steps. */
.qs-steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 51px;           /* centro do .step__num: 32px de padding + metade da linha de 1.6rem */
  right: -24px;        /* gap da grade .steps */
  width: 24px;
  height: 2px;
  background: var(--grad);
  opacity: .55;
  pointer-events: none;
}

/* ---------- Responsivo ---------- */
/* 980px: a home centraliza o hero nesta largura (e o styles.css já centraliza
   botões e destaques). Repetimos para o texto não ficar à esquerda sozinho.
   O .hero__text precisa da regra própria: o styles.css o deixa justificado, e em
   bloco centralizado e estreito isso abre "rios" de espaço entre as palavras.
   .about, .grid--4 e .steps já quebram sozinhos no styles.css; a grade da equipe
   precisa das quebras próprias (ver comentário em .qs-team).
   O traço entre os passos some aqui: em 2 colunas o traço do 2º cartão apontaria
   para o vazio, e em 1 coluna não há vão lateral. */
@media (max-width: 980px) {
  .qs-hero .hero__content { text-align: center; margin-inline: auto; }
  .qs-hero .hero__text { text-align: center; }
  /* O styles.css centraliza o .hero__text (margin auto) mas não as caixas de
     660px do botão e dos destaques: sem isto elas colam à esquerda do
     .hero__content e o botão sai de baixo do título e do parágrafo. */
  .qs-hero .hero__actions,
  .qs-hero .hero__highlights { margin-inline: auto; }
  .qs-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qs-steps .step::after { display: none; }
}

/* 640px: a faixa de sustentabilidade vira coluna centralizada (mesma quebra das
   faixas .soft-help e .hub-channels do site). */
@media (max-width: 640px) {
  .qs-sustent { flex-direction: column; text-align: center; }
}

/* 600px: o styles.css leva .card/.pillar/.step para 24px de padding; o cartão de
   pessoa acompanha. A grade da equipe vira 1 coluna aqui (e não em 560, como o
   .grid--3 genérico) porque o cartão tem foto + botão e, em 2 colunas de ~270px,
   o rodapé do cartão já quebra em duas linhas. */
@media (max-width: 600px) {
  .qs-team { grid-template-columns: 1fr; }
  .team-card { padding: 24px; }
}

/* Cartão único: foto e botão centralizados (texto continua alinhado à esquerda) */
.team-card--solo .team-card__top { justify-content: center; }
.team-card--solo .team-card__photo { margin-inline: auto; }
.team-card--solo .team-card__actions { justify-content: center; }