/* ==========================================================================
   home.css — seccoes exclusivas da Home
   Ponto Certo Brindes · implementa specs/site.md §6.1
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — foto em largura total, texto navy direto sobre a parede
   Hero v3 (16/10/2026): a foto nova traz a parede creme limpa a esquerda (computador)
   e em cima (celular). O texto fica sobre ela, sem a camada em degrade de design.md §8
   (pedido de Catarina, registrado em memoria.md). O contraste vem da propria parede
   (~#F0E0D0): navy #09213F = 13:1; apoio #273C56 = 9:1; sobretitulo #46586F = 5,6:1.
   -------------------------------------------------------------------------- */

.hero {
  --hero-parede: #F2E2D2;   /* tom medido na foto: o fundo continua a parede onde a foto acaba */
  position: relative;
  display: flex;
  align-items: center;
  /* Teto de 50rem (era 42): em 1920 px o kit (68% da altura da foto) so cabe inteiro,
     sem cortar a mochila em cima nem o caderno embaixo, com ~800 px. */
  min-height: clamp(30rem, 44vw, 50rem);
  padding-block: var(--e-14);
  overflow: hidden;
  background-color: var(--hero-parede);   /* fallback enquanto a foto nao carrega */
  color: var(--azul-700);
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* A foto e 16:9 e o bloco e mais largo: o corte e so em cima e embaixo. Ancorar em 80%
   preserva a mesa e o caderno (a base do kit) e sacrifica so a parede de cima. */
.hero__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 80%;
}

.hero__interno { position: relative; z-index: 2; }

/* O kit da foto comeca em ~51% da largura; a coluna de texto para antes disso (52vw menos
   as margens) e nunca passa de 40rem. Abaixo de 1200 px ela encolhe junto com a tela. */
.hero__texto { max-width: min(40rem, 52vw - 2.5rem); }

/* Sobretitulo: traco amarelo + tres frases separadas por pontos.
   O traco ecoa o grifo do titulo e o amarelo da polo e da caneta da foto. */
.hero__sobre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: var(--e-6);
}

.hero__sobre::before {
  content: '';
  flex: none;
  width: 36px;
  height: 4px;
  margin-right: 8px;
  border-radius: 4px;
  background-color: var(--amarelo-500);
}

.hero__sobre span[aria-hidden] { opacity: .45; }

.hero__titulo {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--azul-700);
  margin: 0;
  text-wrap: balance; /* design.md 3.2: linhas equilibradas em larguras intermediarias */
}

/* Grifo: o amarelo so e texto sobre navy (design.md §2.2). Aqui o fundo e claro, entao
   vira marca-texto atras da palavra, com a letra em navy — o amarelo como bloco de cor,
   com texto neutro-900 por cima, que a §2.2 permite. */
.hero__titulo .grifo {
  color: inherit;
  background-image: linear-gradient(transparent 40%, var(--amarelo-500) 40%,
                                    var(--amarelo-500) 92%, transparent 92%);
  padding-inline: .1em;
  margin-inline: -.1em;
  border-radius: .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Apoio em dois tons: "Ha mais de 15 anos" na voz de destaque do manual v2 (Fraunces
   italico, frase curta e >= 22 px) e o resto em DM Sans. O texto e o mesmo. */
.hero__apoio {
  margin-top: var(--e-6);
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.0455rem + 0.3977vw, 1.3125rem);
  line-height: 1.5;
  color: var(--azul-600);
  text-wrap: balance;   /* sem "marcas." sozinha na ultima linha */
}

.hero__apoio-destaque {
  display: block;
  margin-bottom: .15em;
  font-family: var(--fonte-destaque);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.3125rem + 0.9375vw, 1.9375rem);
  line-height: 1.2;
  color: var(--azul-700);
}

@media (min-width: 900px) {
  /* a coluna e mais estreita que o titulo de 60 px em telas de 900 a 1200 px */
  .hero__titulo { font-size: clamp(2.5rem, 4.6vw, 3.75rem); }
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

.hero__acoes .btn {
  min-height: 56px;
  padding-inline: var(--e-8);
  font-size: 1.0625rem;
}

.hero__acoes .btn--whatsapp { box-shadow: var(--sombra-md); }
.hero__acoes .btn--whatsapp:hover { box-shadow: var(--sombra-lg); }

/* Secundario: branco translucido, como a garrafa da foto, com contorno navy */
.hero__acoes .btn--secundario { background-color: rgba(255, 255, 255, .7); }

.hero__acoes .btn--secundario:hover {
  background-color: var(--branco);
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}

.hero__acoes .btn--secundario:active { transform: none; box-shadow: none; }

.hero__acoes .btn--secundario svg { transition: transform var(--mov-rapido); }
.hero__acoes .btn--secundario:hover svg { transform: translateX(3px); }

/* Reforcos: filete fino separa dos botoes; o check amarelo vira um ponto (o "ponto" da
   marca) com o V em navy, que le bem sobre a parede creme (amarelo solto nao leria). */
.hero__reforco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) 1.25rem;
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  /* filete que some para a direita, antes de chegar a polo da foto */
  background: linear-gradient(90deg, rgba(9, 33, 63, .2), rgba(9, 33, 63, 0) 100%) top / 100% 1px no-repeat;
  font-size: .875rem;
  font-weight: 500;
  color: var(--azul-600);
}

.hero__reforco li { display: flex; align-items: center; gap: var(--e-2); }

.hero__reforco svg {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 50%;
  background-color: var(--amarelo-500);
  color: var(--azul-700);
  stroke-width: 3;
}

@media (max-width: 899px) {
  /* Celular: texto centralizado no alto, sobre a parede; a foto fica ancorada na base e
     o bloco reserva embaixo a altura dos produtos (~66% da largura: a mochila comeca a
     56% da altura de uma foto 2:3). O topo da foto some no fundo da mesma cor, sem emenda. */
  .hero {
    min-height: 0;
    padding-block: var(--e-8) 68vw;
  }

  .hero__fundo img {
    position: absolute;
    inset: auto 0 0 0;
    height: auto;
    aspect-ratio: 2 / 3;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%);
    mask-image: linear-gradient(180deg, transparent 0, #000 20%);
  }

  .hero__texto { max-width: 30rem; margin-inline: auto; text-align: center; }
  .hero__sobre { justify-content: center; margin-bottom: var(--e-4); }
  /* o traco amarelo vira uma linha propria acima do texto, centralizado */
  .hero__sobre::before {
    flex: 0 0 100%;
    height: 4px;
    margin: 0 0 var(--e-1);
    border-radius: 0;
    background: linear-gradient(var(--amarelo-500), var(--amarelo-500)) center / 36px 4px no-repeat;
  }
  .hero__apoio { margin-top: var(--e-4); margin-inline: auto; }
  .hero__acoes { flex-direction: column; margin-top: var(--e-6); }
  /* padding menor: o rotulo do WhatsApp cabe em uma linha em 360 px */
  .hero__acoes .btn { width: 100%; min-height: 52px; padding-inline: var(--e-4); font-size: 1rem; }
  /* lista num bloco centralizado, itens alinhados a esquerda entre si */
  .hero__reforco {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: fit-content;
    margin: var(--e-6) auto 0;
    padding-top: 0;
    background: none;
  }
}

/* Telas de 320 px: o rotulo do WhatsApp perde o respiro lateral para ficar em uma linha */
@media (max-width: 359px) {
  .hero__acoes .btn { gap: 8px; padding-inline: var(--e-3); font-size: .9375rem; }
}

/* Entre 900 e 1100 px a coluna e estreita: os dois botoes empilham, cada um na largura toda */
@media (min-width: 900px) and (max-width: 1099px) {
  .hero__acoes .btn { flex: 1 1 100%; }
}

/* Em tela estreita o sobretitulo quebra em duas linhas. O segundo ponto vira a propria
   quebra ("Desde 2010 · Belo Horizonte" / "Entrega em todo o Brasil"): ocupa a linha
   inteira, sem altura e invisivel, em vez de sobrar no fim da primeira linha. */
@media (max-width: 599px), (min-width: 900px) and (max-width: 1149px) {
  .hero__sobre span[aria-hidden]:last-of-type {
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   2. Barra de garantias
   -------------------------------------------------------------------------- */

/* Desde 14/10/2026 fica depois da prova social, como faixa navy: branca, ela colaria
   nas categorias (tambem brancas) e as duas pareceriam uma secao so (design.md §4). */
.barra-garantias {
  padding-block: var(--e-10);
  background-color: var(--azul-700);
  color: var(--branco);
}

.barra-garantias .garantia__icone  { color: var(--amarelo-500); }
.barra-garantias .garantia__titulo { color: var(--branco); }
.barra-garantias .garantia__texto,
.barra-garantias .garantias__nota  { color: var(--azul-200); }   /* 10,9:1 sobre --azul-700 */
.barra-garantias .garantias__nota  { border-top-color: var(--azul-600); }

/* --------------------------------------------------------------------------
   3. Como funciona em 5 passos (4 ate 15/09/2026)
   Cards sem foto. Grade de 6 colunas com cada passo ocupando 2: 3 + 2
   centralizados no desktop, 2 + 2 + 1 no tablet, 1 coluna no celular.
   -------------------------------------------------------------------------- */

.passos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--e-6);
}

.passo {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-lg);
  background-color: var(--branco);
  height: 100%;
}

.passo:nth-child(4) { grid-column: 2 / span 2; }

.passo__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-6);
}

.passo__numero {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--amarelo-700);
}

.passo__titulo { margin: 0; }

.passo__texto {
  font-size: var(--t-pequeno);
  /* --neutro-500 dava 3,88:1 sobre branco; os textos novos sao longos */
  color: var(--neutro-700);
  margin: 0;
}

/* Observacao sobre amostra, abaixo dos passos */
.passos__nota {
  margin: var(--e-8) auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: var(--t-pequeno);
  color: var(--neutro-700);
}

@media (max-width: 899px) {
  .passos { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
  .passo:nth-child(4) { grid-column: span 2; }
  .passo:nth-child(5) { grid-column: 2 / span 2; }
}

/* Celular (17/10/2026): carrossel de arraste, como a galeria. A trilha vai ate a borda
   da tela e cada card ocupa 75% da largura, entao o proximo aparece cortado a direita,
   mostrando que ha mais para rolar; o indicador de posicao fica embaixo (carrossel.js).
   Textos compactos, no padrao do mosaico do catalogo (titulo 16 px, texto 13 px). */
@media (max-width: 599px) {
  .passos {
    display: flex;
    gap: var(--e-3);
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .passos::-webkit-scrollbar { display: none; }

  .passo { flex: 0 0 75%; height: auto; scroll-snap-align: start; }  /* auto: todos com a altura do maior */

  .passo__corpo { gap: var(--e-1); padding: var(--e-4); }
  .passo__numero { font-size: 1.5rem; }
  .passo__titulo { font-size: 1rem; line-height: 1.3; }
  .passo__texto { font-size: .8125rem; line-height: 1.5; }
  .passos__nota { margin-top: var(--e-6); }
}

/* --------------------------------------------------------------------------
   4. Tipos de personalizacao
   Secao fora da Home desde 15/09/2026, guardada em arquivo/secao-tipos-de-personalizacao.html.
   O CSS fica aqui para ela voltar sem retrabalho.
   -------------------------------------------------------------------------- */

.tecnicas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-6);
}

.tecnica {
  display: flex;
  flex-direction: column;
  border-radius: var(--raio-lg);
  background-color: var(--branco);
  border: 1px solid var(--neutro-200);
  overflow: hidden;
  transition: transform var(--mov-medio), box-shadow var(--mov-medio),
              border-color var(--mov-medio);
}

.tecnica:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-md);
  border-color: var(--azul-200);
}

.tecnica__foto { aspect-ratio: 4 / 3; background-color: var(--neutro-100); overflow: hidden; }

.tecnica__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--mov-medio);
}

.tecnica:hover .tecnica__foto img { transform: scale(1.03); }

.tecnica__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  flex: 1;
  padding: var(--e-6);
}

.tecnica__titulo { margin: 0; }

.tecnica__texto {
  font-size: var(--t-pequeno);
  color: var(--neutro-700);
  margin: 0;
}

@media (max-width: 899px) {
  .tecnicas { grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
}

@media (max-width: 479px) {
  .tecnicas { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. Prova social
   -------------------------------------------------------------------------- */

/* Dois depoimentos: grade de 2 colunas centralizada sob o cabecalho, que tambem
   e centralizado. Com 3 colunas o terceiro espaco ficaria vazio. */
.depoimentos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-6);
  max-width: 48rem;
  margin-inline: auto;
}

/* Tablet: 2 colunas, como no desktop (ate 16/10 eram empilhados abaixo de 900 px).
   Celular (17/10/2026): carrossel de arraste, como galeria, "Por necessidade" e "Como
   funciona": cards de 80% da largura, o segundo aparecendo na borda direita, encaixe
   card a card e indicador de posicao embaixo (carrossel.js). */
@media (max-width: 599px) {
  .depoimentos {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    max-width: none;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .depoimentos::-webkit-scrollbar { display: none; }

  .depoimentos > .card-depoimento {
    flex: 0 0 80%;
    gap: var(--e-3);
    padding: var(--e-6);
    scroll-snap-align: start;
  }

  /* 17/10/2026: menos espaco morto em volta das aspas (36 px, ainda >= 22 px do
     Fraunces) e texto do depoimento um pouco menor */
  .card-depoimento__aspas { font-size: 2.25rem; line-height: .5; margin-bottom: -.25rem; }
  .card-depoimento__texto { font-size: .9375rem; line-height: 1.55; }
}

/* A faixa de logos vem logo abaixo do titulo e antes dos depoimentos: o filete
   fica embaixo dela, separando as logos dos cards. */
.logos-clientes {
  margin-bottom: var(--e-14);
  padding-bottom: var(--e-10);
  border-bottom: 1px solid var(--neutro-200);
}

/* Faixa de logos em movimento continuo.
   design.md §9 proibe animacao em loop. A excecao vale so aqui, com tres
   travas: pausa no hover, pausa no foco de teclado e desligamento completo
   em prefers-reduced-motion, que a §12 exige. */
.faixa-logos {
  --logos-gap: var(--e-14);
  display: flex;
  gap: var(--logos-gap);
  overflow: hidden;
  /* esfuma as pontas para a logo nao aparecer cortada na borda */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.faixa-logos__trilha {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--logos-gap);
  animation: desliza-logos 50s linear infinite;
}

@keyframes desliza-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--logos-gap))); }
}

.faixa-logos:hover .faixa-logos__trilha,
.faixa-logos:focus-within .faixa-logos__trilha { animation-play-state: paused; }

/* Cada logo ja vem do script no seu tamanho otico, com a margem transparente
   recortada. O tamanho vem dos atributos width/height do <img>, entao o CSS
   nao pode forcar altura: forcar altura igual e o que fazia logo quadrada
   parecer menor que logo deitada. */
.logo-cliente {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-cliente img {
  display: block;
  max-width: 100%;
  height: auto;
}

.logo-cliente--vazio {
  width: 9.5rem;
  border: 1px dashed var(--neutro-300);
  border-radius: var(--raio-md);
  background-color: var(--branco);
  padding: var(--e-2);
  font-size: var(--t-legenda);
  color: var(--neutro-700);
  text-align: center;
}

/* Celular (17/10/2026): duas linhas de logos andando juntas, com as logos a 70%
   do tamanho, para caberem mais marcas na tela. A trilha vira uma grade de 2
   linhas preenchida por coluna; o loop continua igual (a copia aria-hidden segue
   a mesma grade). zoom reduz a caixa da imagem de verdade, sem mexer nos
   width/height de cada logo. No desktop nada muda. */
@media (max-width: 599px) {
  .faixa-logos { --logos-gap: var(--e-10); }
  .faixa-logos__trilha {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    row-gap: var(--e-6);
    animation-duration: 32s;
  }
  .logo-cliente img { zoom: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .faixa-logos { overflow-x: auto; }
  .faixa-logos__trilha { animation: none; }
}

/* --------------------------------------------------------------------------
   6. Sobre em resumo — texto + foto
   -------------------------------------------------------------------------- */

.sobre-resumo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 5vw, 4.5rem);
}

.sobre-resumo__figura {
  margin: 0;
  border-radius: var(--raio-xl);
  overflow: hidden;
  box-shadow: var(--sombra-md);
}

/* Foto do escritorio (14/10/2026) em 5:4, a proporcao original, no celular e no
   desktop: o recorte 3:2 de antes cortava o topo da placa com a logo na parede. */
.sobre-resumo__figura img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }


.sobre-resumo__texto {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-top: var(--e-4);
}

.sobre-resumo__texto p { margin: 0; font-size: var(--t-corpo); }

/* 4 numeros em grade 2 x 2 (eram 2 lado a lado ate 15/09/2026) */
.estatisticas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6) var(--e-8);
  margin-top: var(--e-8);
}

.estatistica__numero {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--azul-700);
}

.estatistica__rotulo {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--t-legenda);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* --neutro-500 dava 3,88:1 sobre branco e reprovava o AA */
  color: var(--neutro-700);
}

@media (max-width: 899px) {
  .sobre-resumo { grid-template-columns: 1fr; }
  .sobre-resumo__figura { order: -1; }
}

/* --------------------------------------------------------------------------
   7. FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: var(--container-estreito); margin-inline: auto; }

/* Lista das tecnicas dentro da resposta (16/10/2026, item 66) */
.faq__lista {
  display: grid;
  gap: var(--e-2);
  margin: var(--e-3) 0 0;
  padding-left: 1.1rem;
  list-style: disc;
}

#faq-personalizacao { scroll-margin-top: 6rem; }

.faq__rodape {
  margin-top: var(--e-8);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Galeria de trabalhos e Equipe
   Enquanto nao houver foto real, a moldura fica vazia com marcacao visivel.
   Nunca preencher com imagem gerada: a galeria afirma "trabalho real feito".
   -------------------------------------------------------------------------- */

/* Moldura sem foto, compartilhada pelas duas secoes */
.foto-pendente {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--e-4);
  background-color: var(--neutro-100);
}

.foto-pendente::after {
  content: '';
  width: 55%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(9, 33, 63, .16), rgba(9, 33, 63, 0) 72%);
}

/* Galeria — cards em carrossel, mesma trilha dos destaques (design.md §9) */
.galeria__item {
  border-radius: var(--raio-lg);
  border: 1px solid var(--neutro-200);
  background-color: var(--branco);
  overflow: hidden;
  transition: transform var(--mov-medio), box-shadow var(--mov-medio),
              border-color var(--mov-medio);
}

.galeria__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-md);
  border-color: var(--azul-200);
}

.galeria__figura { margin: 0; }

.galeria__moldura { aspect-ratio: 4 / 5; overflow: hidden; }

.galeria__moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mov-medio);
}

.galeria__item:hover .galeria__moldura img { transform: scale(1.03); }

/* Legenda em duas partes: a peca em Rubik, a tecnica no mesmo chip do card de
   produto (design.md 7.1 item 5). Liga a galeria a linguagem do catalogo e
   troca o cinza --neutro-500, que reprovava contraste, por --neutro-900. */
.galeria__legenda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-6) var(--e-6);
  border-top: 1px solid var(--neutro-200);
}

.galeria__peca {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--neutro-900);
}

/* Equipe */
.equipe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-6);
}

.pessoa {
  display: flex;
  flex-direction: column;
  border-radius: var(--raio-lg);
  border: 1px solid var(--neutro-200);
  background-color: var(--branco);
  overflow: hidden;
}

.pessoa__foto { aspect-ratio: 4 / 5; overflow: hidden; }

.pessoa__foto img { width: 100%; height: 100%; object-fit: cover; }

.pessoa__corpo { padding: var(--e-6); }

.pessoa__nome { margin-bottom: var(--e-1); }

.pessoa__funcao {
  display: block;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--azul-500);
}


@media (max-width: 899px) {
  .equipe  { grid-template-columns: repeat(2, 1fr); }
  .equipe  { gap: var(--e-4); }
}

/* Equipe dentro da secao Sobre (16/10/2026, item 17a): filete separa os dois blocos.
   No celular os retratos ficam em 2 x 2 (eram 1 por tela, cerca de 3 telas). */
.equipe-bloco {
  margin-top: var(--e-14);
  padding-top: var(--e-14);
  border-top: 1px solid var(--neutro-200);
  scroll-margin-top: 5rem;
}

@media (max-width: 479px) {
  .equipe { gap: var(--e-3); }
  .pessoa__corpo { padding: var(--e-3) var(--e-4) var(--e-4); }
  .pessoa__funcao { font-size: var(--t-legenda); }
}

/* Espaco da foto real do Sobre (item 20), enquanto ela nao chega */
.foto-pendente--sobre { aspect-ratio: 5 / 4; box-shadow: none; border: 1px dashed var(--neutro-300); }
.foto-pendente--sobre::after { display: none; }

/* Sem a foto (versao publicada enquanto ela nao chega; o gerar-pacote.ps1 tira o
   quadro pendente): texto numa coluna estreita e centralizada, numeros em 4 colunas */
.sobre-resumo:not(:has(.sobre-resumo__figura)) {
  grid-template-columns: 1fr;
  max-width: var(--container-estreito);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .sobre-resumo:not(:has(.sobre-resumo__figura)) .estatisticas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* No celular a foto real vem antes do texto (order: -1); o espaco vazio, nao */
@media (max-width: 899px) {
  .sobre-resumo__figura.foto-pendente--sobre { order: 0; }
}

.foto-pendente__rotulo {
  padding: var(--e-6);
  text-align: center;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--neutro-700);
}

/* Solucoes por necessidade — bloco azul escuro entre equipe e como funciona.
   5 cards: grade de 6 colunas com cada card ocupando 2, e os dois ultimos
   centralizados na segunda linha, para nao sobrar buraco a direita. */
.solucoes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--e-6);
}

.solucao {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6);
  border: 1px solid var(--azul-600);
  border-radius: var(--raio-lg);
  background-color: var(--azul-700);
}

.solucao:nth-child(4) { grid-column: 2 / span 2; }

.solucao__icone {
  width: 28px;
  height: 28px;
  color: var(--amarelo-500);
}

.solucao__titulo { margin: 0; }

.solucao__texto {
  margin: 0;
  font-size: var(--t-pequeno);
  color: var(--azul-200);
}

@media (max-width: 899px) {
  .solucoes { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
  .solucao:nth-child(4) { grid-column: span 2; }
  .solucao:nth-child(5) { grid-column: 2 / span 2; }
}

/* Celular (17/10/2026): carrossel de arraste, igual ao de "Como funciona" (ver la).
   Fica aqui, depois da grade base de .solucoes, para vencer o display: grid. */
@media (max-width: 599px) {
  .solucoes {
    display: flex;
    gap: var(--e-3);
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .solucoes::-webkit-scrollbar { display: none; }

  .solucao { flex: 0 0 75%; scroll-snap-align: start; gap: var(--e-2); padding: var(--e-4); }
  .solucao__icone { width: 22px; height: 22px; }
  .solucao__titulo { font-size: 1rem; line-height: 1.3; }
  .solucao__texto { font-size: .8125rem; line-height: 1.5; }
}