/* ==========================================================================
   MooveSync — estilos
   Mobile-first: o estilo base é para celular; os @media (min-width) ajustam
   para telas maiores. Valores tirados de referencias/especificacoes.md.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Variáveis (tokens do Figma)
   -------------------------------------------------------------------------- */
:root {
  /* Cores — nomes derivados das variáveis do Figma */
  --cor-azul: #1E2749;               /* Visual/Blue */
  --cor-azul-acinzentado: #414865;   /* Visual/Grey Blue */
  --cor-azul-claro: #C1C7E0;         /* Visual/Grey Blue Light */
  --cor-azul-muito-claro: #EDEFF7;   /* Visual/Grey Blue Very Light */
  --cor-agua: #6BC0AC;               /* Visual/Aqcua */
  --cor-verde: #54B047;              /* Visual/Gree */
  --cor-verde-escuro: #399A44;       /* Dark Green */
  --cor-branco: #FFFFFF;             /* White */
  --cor-cinza-20: #333333;           /* Wire/Gray 20 */
  --cor-erro: #B42318;               /* fora do Figma: mensagens de erro dos formulários */

  /* Tipografia — família única */
  --fonte: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso-light: 300;
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-bold: 700;

  /* Tamanhos de fonte */
  --texto-12: 0.75rem;
  --texto-14: 0.875rem;
  --texto-16: 1rem;
  --texto-18: 1.125rem;
  --texto-20: 1.25rem;
  --texto-24: 1.5rem;
  --texto-32: 2rem;
  --texto-36: 2.25rem;
  --texto-40: 2.5rem;
  --texto-48: 3rem;
  --texto-60: 3.75rem;

  /* Alturas de linha */
  --linha-justa: 1;        /* 100% */
  --linha-titulo: 1.2;     /* 120% */
  --linha-media: 1.4;      /* 140% */
  --linha-texto: 1.6;      /* 160% */
  --linha-28: 28px;        /* variável "line height/28" do Figma */

  /* Espaçamento entre letras dos títulos */
  --letra-titulo: -0.02em; /* -2% */

  /* Espaçamentos (escala usada no auto layout do Figma) */
  --espaco-5: 5px;
  --espaco-8: 8px;
  --espaco-10: 10px;
  --espaco-16: 16px;
  --espaco-24: 24px;
  --espaco-32: 32px;
  --espaco-48: 48px;
  --espaco-64: 64px;
  --espaco-80: 80px;
  --espaco-120: 120px;

  /* Respiro das seções: 80px em cima/embaixo; laterais 20px no celular, 30px no desktop */
  --secao-vertical: var(--espaco-80);
  --secao-lateral: 20px;

  /* Larguras de conteúdo */
  --largura-container: 1380px;  /* área útil: 1440 - 2 × 30 */
  --largura-cabecalho: 1280px;
  --largura-larga: 1024px;
  --largura-media: 896px;
  --largura-estreita: 768px;

  /* Raios */
  --raio-16: 16px;
  --raio-28: 28px;
  --raio-32: 32px;
  --raio-50: 50px;
  --raio-55: 55px;
  --raio-redondo: 100px;

  /* Sombra — "Sombra menu" */
  --sombra-menu: 0 0 30px rgba(39, 47, 80, 0.2);

  /* Bordas */
  --borda-verde: 1.5px solid var(--cor-verde);
  --borda-agua: 1px solid var(--cor-agua);
  --borda-azul-claro: 1px solid var(--cor-azul-claro);

  /* Transição padrão (hover, menu) */
  --transicao: 0.2s ease;
}

/* Laterais maiores a partir do tablet */
@media (min-width: 768px) {
  :root {
    --secao-lateral: 30px;
  }
}


/* --------------------------------------------------------------------------
   2. Reset leve
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Quem pede menos movimento no sistema não recebe rolagem animada */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

img,
svg,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   3. Tipografia base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--fonte);
  font-weight: var(--peso-regular);
  font-size: var(--texto-16);
  line-height: var(--linha-28);
  color: var(--cor-azul-acinzentado);
  background-color: var(--cor-branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* segurança extra contra rolagem horizontal */
}

h1,
h2,
h3,
h4 {
  color: var(--cor-azul);
  font-weight: var(--peso-light);
  line-height: var(--linha-titulo);
  letter-spacing: var(--letra-titulo);
}

/* Foco visível para quem navega pelo teclado */
:focus-visible {
  outline: 2px solid var(--cor-verde);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

/* Espaçamento padrão de toda seção */
.secao {
  padding: var(--secao-vertical) var(--secao-lateral);
}

/* No Figma toda seção (menos o hero) tem 96% de opacidade sobre o branco,
   o que suaviza um pouco as cores */
.secao,
.rodape {
  opacity: 0.96;
}

/* Texto só para leitores de tela (some da tela, mas continua acessível) */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   5. Componentes reutilizáveis (botões, rótulos, cards)
   -------------------------------------------------------------------------- */

/* Botão em pílula. Padrão: verde-escuro (o mesmo do desktop do Figma em todas as larguras) */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-10) 30px;
  border-radius: var(--raio-55);
  background-color: var(--cor-verde-escuro);
  color: var(--cor-branco);
  font-size: var(--texto-16);
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.botao:hover {
  background-color: var(--cor-verde);
}

/* Botão pequeno (menu) */
.botao--pequeno {
  padding: var(--espaco-10) 20px;
  font-size: var(--texto-14);
  line-height: var(--linha-media);
}

/* Rótulo da seção: traço água em cima + texto pequeno ("Como fazemos") */
.rotulo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--cor-azul);
  font-size: var(--texto-16);
  line-height: 20px;
}

.rotulo::before {
  content: "";
  width: 48px;
  height: 3px;
  border-bottom-right-radius: 3px;
  background-color: var(--cor-agua);
}

/* Variante com traço branco (sobre fundo água) */
.rotulo--claro::before {
  background-color: var(--cor-branco);
}

/* Título padrão das seções (h2): 40px no celular, 48px no desktop */
.titulo-secao {
  max-width: var(--largura-estreita);
  font-size: var(--texto-40);
  line-height: var(--linha-justa);
}

/* Texto de apoio das seções: parágrafos separados por uma linha em branco */
.texto-secao {
  font-size: var(--texto-16);
  line-height: var(--linha-texto);
}

.texto-secao p + p {
  margin-top: 1.6em;
}

@media (min-width: 768px) {
  .titulo-secao {
    font-size: var(--texto-48);
  }

  .texto-secao {
    font-size: var(--texto-18);
  }
}

/* Cartão branco com borda azul-clara (formulários da newsletter e do contato) */
.cartao {
  padding: var(--espaco-32);
  border: var(--borda-azul-claro);
  border-radius: var(--raio-32);
  background-color: var(--cor-branco);
}

/* Campo de formulário em pílula (fundo cinza-azulado) */
.campo {
  width: 100%;
  height: 48px;
  padding: var(--espaco-10) var(--espaco-24);
  border: 1px solid transparent;
  border-radius: var(--raio-50);
  background-color: var(--cor-azul-muito-claro);
  color: var(--cor-azul);
  font-size: var(--texto-14);
  line-height: var(--linha-28);
  transition: border-color var(--transicao);
}

.campo::placeholder {
  color: var(--cor-azul-acinzentado);
  opacity: 1;
}

.campo:focus {
  border-color: var(--cor-agua);
  outline: none;
}

.campo:focus-visible {
  outline: 2px solid var(--cor-verde);
  outline-offset: 2px;
}

/* Campo com erro (o JS marca aria-invalid="true") */
.campo[aria-invalid="true"] {
  border-color: var(--cor-erro);
}

/* Mensagens dos formulários: somem enquanto estão vazias */
.campo-erro,
.formulario__status {
  font-size: var(--texto-14);
  line-height: var(--linha-media);
}

.campo-erro {
  padding-left: var(--espaco-24);
  color: var(--cor-erro);
}

.formulario__status {
  color: var(--cor-azul); /* o verde da marca não tem contraste suficiente em texto de 14px */
  font-weight: var(--peso-medium);
  text-align: center;
}

.campo-erro:empty,
.formulario__status:empty {
  display: none;
}

/* Conteúdo expansível (cards de "Como fazemos" e da equipe)
   Fechado: 1º parágrafo com "..." no fim. Aberto: ponto final e o restante do texto.
   O JS (js/script.js) coloca a classe .esta-aberto no bloco .expansivel */
.expansivel__ponto,
.expansivel.esta-aberto .expansivel__reticencias {
  display: none;
}

.expansivel.esta-aberto .expansivel__ponto {
  display: inline;
}

/* Texto extra: a linha da grade vai de 0 à altura do conteúdo (anima a abertura) */
.expansivel__extra {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden; /* fechado, também some para leitores de tela */
  transition: grid-template-rows 0.3s ease, visibility 0.3s;
}

.expansivel__extra > div {
  overflow: hidden;
}

.expansivel__extra p {
  padding-top: 1lh; /* uma linha em branco entre os parágrafos */
}

.expansivel.esta-aberto .expansivel__extra {
  grid-template-rows: 1fr;
  visibility: visible;
}

/* Botão +/− (a cor vem de cada contexto via color) */
.expansivel__botao {
  align-self: flex-start;
  border-radius: 50%;
  transition: opacity var(--transicao);
}

.expansivel__botao:hover {
  opacity: 0.7;
}

.expansivel__botao svg {
  display: block;
}

/* Aberto: some o traço vertical e o "+" vira "−" */
.expansivel.esta-aberto .expansivel__vertical {
  display: none;
}

/* Botão água preenchido (rodapé) */
.botao--agua,
.botao--contorno-agua {
  padding: 5px 24px; /* 6px 25px do Figma menos 1px da borda */
  border: 1px solid var(--cor-agua);
  font-size: var(--texto-16);
  line-height: var(--linha-28);
}

.botao--agua {
  background-color: var(--cor-agua);
  color: var(--cor-cinza-20);
}

.botao--agua:hover {
  background-color: transparent;
  color: var(--cor-agua);
}

/* Botão água só com contorno (rodapé) */
.botao--contorno-agua {
  background-color: transparent;
  color: var(--cor-agua);
}

.botao--contorno-agua:hover {
  background-color: var(--cor-agua);
  color: var(--cor-cinza-20);
}


/* --------------------------------------------------------------------------
   6. Seções (na ordem da página)
   -------------------------------------------------------------------------- */

/* ---------- 1. Cabeçalho + Hero ---------- */

/* Celular/tablet: fundo em degradê vertical (recorte central da imagem do Figma) */
.cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
  padding: 20px 20px 0;
  overflow: hidden; /* o grafismo da foto passa das bordas */
  background: var(--cor-azul) url("../assets/img/hero-fundo-mobile.jpg") center top / cover no-repeat;
}

/* Espaço reservado para a pílula do menu (que fica fixa no topo da tela) */
.cabecalho__barra {
  flex-shrink: 0;
  height: 60px;
}

/* Pílula branca do menu: fixa, acompanha a rolagem */
.navegacao {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 40px, var(--largura-cabecalho));
  padding: var(--espaco-10);
  transform: translateX(-50%);
  border-radius: var(--raio-redondo);
  background-color: var(--cor-branco);
  box-shadow: 0 0 15px rgba(39, 47, 80, 0.2);
}

/* Ao clicar num link do menu, a seção não fica escondida atrás da pílula */
html {
  scroll-padding-top: 100px;
}

.navegacao__logo {
  padding: var(--espaco-5) 20px 0;
}

.navegacao__logo img {
  width: 150px;
  height: auto;
}

/* Botão redondo azul do menu (celular) */
.navegacao__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-55);
  background-color: var(--cor-azul);
}

.navegacao__botao:hover {
  background-color: var(--cor-azul-acinzentado);
}

/* Troca do ícone ☰ pelo X quando o menu está aberto */
.navegacao__icone--fechar,
.navegacao__botao[aria-expanded="true"] .navegacao__icone--abrir {
  display: none;
}

.navegacao__botao[aria-expanded="true"] .navegacao__icone--fechar {
  display: block;
}

/* Celular: painel branco que aparece abaixo da pílula */
.navegacao__menu {
  position: absolute; /* sobreposição (dropdown), fora do fluxo da página */
  top: calc(100% + var(--espaco-8));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco-24);
  padding: var(--espaco-24);
  border-radius: var(--raio-32);
  background-color: var(--cor-branco);
  box-shadow: var(--sombra-menu);
  /* Fechado: recortado até a borda de cima (altura zero visível) e invisível.
     O "visibility" espera a animação terminar antes de esconder de vez. */
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: clip-path 0.35s ease, opacity 0.25s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

/* Aberto: o recorte se abre de cima para baixo (o -40px deixa a sombra aparecer) */
.navegacao__menu.esta-aberto {
  clip-path: inset(-40px);
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: clip-path 0.35s ease, opacity 0.25s ease, transform 0.35s ease, visibility 0s;
}

.navegacao__lista {
  display: flex;
  flex-direction: column;
}

.navegacao__link {
  display: block;
  padding: var(--espaco-10) var(--espaco-16);
  color: var(--cor-azul);
  font-size: var(--texto-16);
  line-height: 24px;
  transition: color var(--transicao);
}

.navegacao__link:hover {
  color: var(--cor-verde-escuro);
}

/* Conteúdo do hero: centralizado no celular */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-48);
}

.hero__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: var(--largura-media);
  text-align: center;
}

/* Rostos sobrepostos: círculos de 50px a cada 40px (210px no total) */
.hero__pessoas {
  display: flex;
}

.hero__pessoa {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* Do 2º em diante: margem negativa + "mordida" em meia-lua onde o anterior encosta
   (círculo do vizinho com 2px de folga, centro 15px à esquerda) */
.hero__pessoa + .hero__pessoa {
  margin-left: -10px;
  -webkit-mask: radial-gradient(circle 27px at -15px 50%, transparent 98%, #000 100%);
  mask: radial-gradient(circle 27px at -15px 50%, transparent 98%, #000 100%);
}

.hero__titulo {
  color: var(--cor-branco);
  font-weight: var(--peso-light); /* Rubik Light fica mais próxima da Nunito Regular do Figma */
  /* 36px a partir de 390px de tela; diminui até 32px em telas de 320px */
  font-size: clamp(2rem, 6vw + 0.8rem, 2.25rem);
  line-height: 1.11;
}

.hero__texto {
  max-width: var(--largura-estreita);
  color: var(--cor-branco);
  font-weight: var(--peso-light);
  font-size: var(--texto-16);
  line-height: 24px;
}

/* Foto do celular com o grafismo verde atrás */
.hero__foto-mobile {
  position: relative; /* referência para o grafismo decorativo */
  width: 250px;
}

.hero__foto-mobile::before {
  content: "";
  position: absolute; /* decoração, não faz parte do fluxo */
  top: 29px;
  left: 50%;
  /* 390px no celular; em telas maiores cresce junto com a tela para as bordas não aparecerem */
  width: max(390px, 100vw);
  aspect-ratio: 390 / 281;
  transform: translateX(-50%);
  background: url("../assets/img/hero-grafismo-mobile.png") center / contain no-repeat;
}

.hero__foto-mobile img {
  position: relative; /* fica por cima do grafismo */
  width: 250px;
}

/* Desktop: menu completo e foto dentro da imagem de fundo */
@media (min-width: 1024px) {
  .cabecalho {
    gap: 0;
    min-height: 860px;
    padding: 28px 32px 0;
    background-image: url("../assets/img/hero-fundo.jpg");
    background-position: center;
  }

  .cabecalho__barra {
    height: 60px;
  }

  .navegacao {
    top: 28px;
    width: min(100% - 64px, var(--largura-cabecalho));
  }

  .navegacao__logo img {
    width: 180px;
  }

  .navegacao__botao,
  .hero__foto-mobile {
    display: none;
  }

  /* Desktop: o "painel" some e seus itens passam a fazer parte da barra */
  .navegacao__menu,
  .navegacao__menu.esta-aberto {
    display: contents;
    visibility: visible; /* desfaz o "fechado" do celular (seria herdado pelos links) */
    transition: none;
  }

  .navegacao__lista {
    flex-direction: row;
    gap: var(--espaco-24);
  }

  .navegacao__link {
    padding: 0;
    font-size: var(--texto-14);
    line-height: 20px;
  }

  /* O hero ocupa o resto da altura e centraliza o texto na vertical */
  .hero {
    flex: 1;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 1152px;
    margin-inline: auto;
    padding-block: var(--espaco-80);
  }

  .hero__conteudo {
    align-items: flex-start;
    gap: var(--espaco-32);
    max-width: 672px;
    text-align: left;
  }

  .hero__titulo {
    font-weight: var(--peso-light);
    font-size: var(--texto-60);
    line-height: var(--linha-justa);
  }

  .hero__texto {
    font-weight: var(--peso-light);
    font-size: var(--texto-20);
    line-height: var(--linha-texto);
  }

  .hero__cta {
    font-size: var(--texto-20);
    line-height: var(--linha-28);
  }
}

/* ---------- 2. Como fazemos ---------- */

/* No Figma mobile a seção não tem respiro embaixo (a próxima já começa com 80px) */
.como-fazemos {
  padding-bottom: 0;
}

.como-fazemos__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-80);
}

.como-fazemos__intro,
.como-fazemos__conexao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  width: 100%;
  max-width: var(--largura-media);
}

/* Cards dos dois pilares: empilhados no celular */
.como-fazemos__pilares {
  display: grid;
  gap: var(--espaco-16);
}

.pilar {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* o ícone "+" fica sempre no pé do card */
  gap: var(--espaco-32);
  padding: var(--espaco-32);
  border-radius: var(--raio-32);
}

.pilar--agua {
  background-color: var(--cor-agua);
  color: var(--cor-azul);
}

.pilar--azul {
  background-color: var(--cor-azul);
  color: var(--cor-branco);
}

.pilar__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
}

.pilar__imagem {
  align-self: flex-start; /* não estica na largura do card */
  height: 180px;
  width: auto;
  margin-bottom: var(--espaco-8); /* 32px até o título, somando o gap de 24px */
}

.pilar__titulo {
  color: inherit;
  font-size: 1.875rem; /* 30px */
  line-height: 1.1;
  letter-spacing: 0;
}

.pilar__texto {
  font-size: var(--texto-16);
  line-height: var(--linha-texto);
}

/* Cor do botão +/− nos pilares: azul no card água, água no card azul */
.pilar .expansivel__botao {
  color: var(--cor-azul);
}

.pilar--azul .expansivel__botao {
  color: var(--cor-agua);
}

.como-fazemos__ilustracao {
  width: 100%;
  max-width: 368px;
}

.como-fazemos__conexao-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  line-height: var(--linha-texto);
}

.como-fazemos__subtitulo {
  font-size: 1.75rem; /* 28px */
}

/* Tablet: cards lado a lado e respiro normal embaixo */
@media (min-width: 768px) {
  .como-fazemos {
    padding-bottom: var(--secao-vertical);
  }

  .como-fazemos__pilares {
    grid-template-columns: 1fr 1fr;
  }

  .pilar__imagem {
    height: 200px;
  }

  .pilar__titulo {
    font-size: var(--texto-36);
    line-height: 40px;
  }

  .pilar__texto {
    line-height: 24px;
  }

  .como-fazemos__conexao-texto {
    font-size: var(--texto-18);
  }

  .como-fazemos__subtitulo {
    font-size: var(--texto-32);
  }
}

/* Desktop: ilustração ao lado do texto */
@media (min-width: 1024px) {
  .como-fazemos__conexao {
    flex-direction: row;
    align-items: center;
    gap: var(--espaco-48);
  }

  .como-fazemos__ilustracao {
    flex-shrink: 0;
  }
}

/* ---------- 3. Como atuamos na prática ---------- */

/* Celular: sem respiro embaixo, como no Figma */
.como-atuamos {
  padding-bottom: 0;
}

.como-atuamos__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-32);
}

.como-atuamos__intro {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  max-width: var(--largura-estreita);
  text-align: center;
}

/* Título menor no celular (30px) */
.como-atuamos .titulo-secao {
  font-size: 1.875rem;
  line-height: var(--linha-titulo);
}

.como-atuamos__infografico {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-16);
  width: 100%;
  max-width: var(--largura-larga);
  padding-top: var(--espaco-16);
}

.como-atuamos__infinito {
  width: 330px;
}

/* Lista das 6 etapas: empilhada e centralizada no celular */
.etapas {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
}

.etapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-16);
  text-align: center;
}

.etapa__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
  max-width: 480px; /* evita linhas compridas demais no tablet */
}

.etapa__numero {
  color: var(--cor-agua);
  font-size: 1.875rem; /* 30px */
  line-height: var(--linha-justa);
}

.etapa__titulo {
  color: var(--cor-azul);
  font-weight: var(--peso-bold);
  font-size: var(--texto-16);
  line-height: var(--linha-titulo);
  letter-spacing: 0;
}

.etapa__texto {
  font-size: var(--texto-14);
  line-height: var(--linha-media);
}

/* No celular a seta aponta para baixo */
.etapa__seta {
  transform: rotate(90deg);
}

@media (min-width: 768px) {
  .como-atuamos .titulo-secao {
    font-size: var(--texto-48);
    line-height: var(--linha-justa);
  }
}

/* Desktop: grade 3 × 2 por cima do infinito */
@media (min-width: 1024px) {
  .como-atuamos {
    padding-bottom: var(--secao-vertical);
  }

  /* Imagem e lista ocupam a mesma célula da grade, uma sobre a outra */
  .como-atuamos__infografico {
    display: grid;
    max-width: var(--largura-media);
    padding-top: 0;
  }

  .como-atuamos__infografico > * {
    grid-area: 1 / 1;
  }

  .como-atuamos__infinito {
    width: 896px;
    height: 507px;
  }

  .etapas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--espaco-10);
  }

  .etapa {
    flex-direction: row;
    justify-content: center;
    gap: var(--espaco-32);
    padding-left: var(--espaco-32);
    text-align: left;
  }

  /* A 6ª etapa não tem seta e fica alinhada pelo topo */
  .etapa--ultima {
    align-self: start;
    padding-right: 52px;
  }

  .etapa__conteudo {
    width: 208px;
  }

  .etapa__numero {
    font-size: var(--texto-36);
  }

  .etapa__seta {
    transform: none;
  }
}

/* ---------- 4. Observatório ---------- */

.observatorio {
  padding-inline: 30px; /* no Figma esta seção usa 30px de lateral também no celular */
}

.observatorio__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-32);
  max-width: var(--largura-media);
  margin-inline: auto;
}

/* Celular: título alinhado à esquerda, 30px, sem quebra forçada */
.observatorio__titulo {
  width: 100%;
  font-size: 1.875rem;
}

.observatorio__titulo br {
  display: none;
}

/* Foto com cantos arredondados; no celular é recortada em 330 × 300 */
.observatorio__imagem {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--raio-32);
}

.observatorio__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  width: 100%;
}

.observatorio__texto {
  color: var(--cor-azul);
  font-size: var(--texto-16);
  line-height: var(--linha-texto);
}

/* Lista com ícones: 1 coluna no celular, 2 no tablet, 4 no desktop */
.observatorio__lista {
  display: grid;
  gap: var(--espaco-32);
}

.observatorio__item {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
  padding-block: var(--espaco-8);
  font-size: var(--texto-16);
  line-height: var(--linha-texto);
}

@media (min-width: 768px) {
  .observatorio__lista {
    grid-template-columns: repeat(2, 1fr);
  }

  .observatorio__imagem {
    height: auto;
    aspect-ratio: 896 / 504;
  }
}

@media (min-width: 1024px) {
  .observatorio__container {
    gap: var(--espaco-64);
  }

  /* Desktop: centralizado, 40px, cinza escuro e quebra de linha do Figma */
  .observatorio__titulo {
    color: var(--cor-cinza-20);
    font-size: var(--texto-40);
    line-height: 48px;
    text-align: center;
  }

  .observatorio__titulo br {
    display: inline;
  }

  .observatorio__texto {
    font-size: var(--texto-20);
    text-align: center;
  }

  .observatorio__lista {
    grid-template-columns: repeat(4, 1fr);
  }

  .observatorio__item {
    font-size: var(--texto-14);
  }
}

/* ---------- 5. Newsletter ---------- */

.newsletter {
  padding-inline: 30px;
  background-color: var(--cor-azul-muito-claro);
}

.newsletter__container {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  max-width: var(--largura-estreita);
  margin-inline: auto;
}

.newsletter__titulo {
  font-size: 1.875rem; /* 30px */
  text-align: center;
}

.newsletter__card {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
}

.newsletter__texto {
  line-height: var(--linha-texto);
}

/* Celular: campo e botão empilhados */
.newsletter__campos {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.newsletter__botao {
  padding: var(--espaco-10) 28px;
  line-height: var(--linha-28);
}

/* Desktop: campo e botão na mesma linha */
@media (min-width: 768px) {
  .newsletter__titulo {
    font-size: var(--texto-40);
    line-height: 48px;
  }

  .newsletter__campos {
    flex-direction: row;
  }

  .newsletter__botao {
    flex-shrink: 0;
  }
}

/* ---------- 6. Soluções ---------- */

/* A lateral fica por conta de cada bloco: o carrossel vai até a borda da tela */
.solucoes {
  --solucoes-margem: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  padding-inline: 0;
  background-color: var(--cor-agua);
}

.solucoes__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  padding-inline: var(--solucoes-margem);
}

.solucoes__titulo {
  font-size: 1.875rem; /* 30px */
}

/* Trilho do carrossel: rola na horizontal e "encaixa" em cada card */
.solucoes__lista {
  display: flex;
  gap: var(--espaco-16);
  padding-inline: var(--solucoes-margem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--solucoes-margem);
  scrollbar-width: none; /* esconde a barra (Firefox) */
}

.solucoes__lista::-webkit-scrollbar {
  display: none; /* esconde a barra (Chrome, Safari, Edge) */
}

.solucao {
  display: flex;
  flex: 0 0 330px;
  flex-direction: column;
  gap: var(--espaco-16);
  padding: var(--espaco-16) var(--espaco-16) var(--espaco-32);
  border-radius: var(--raio-32);
  background-color: var(--cor-branco);
  scroll-snap-align: start;
}

.solucao__imagem {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio-16);
}

.solucao__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
  padding-inline: var(--espaco-16);
}

.solucao__titulo {
  font-weight: var(--peso-medium);
  font-size: var(--texto-18);
  line-height: 1.1;
  letter-spacing: 0;
}

.solucao__texto {
  font-size: var(--texto-14);
  line-height: var(--linha-media);
}

/* Quando todos os cards cabem na tela (o JS marca a seção com esta classe):
   cards centralizados e sem setas */
.solucoes--sem-rolagem .solucoes__lista {
  justify-content: center;
}

.solucoes--sem-rolagem .solucoes__controles {
  display: none;
}

/* Setas do carrossel (não existem no Figma; seguem as cores da marca) */
.solucoes__controles {
  display: flex;
  justify-content: center;
  gap: var(--espaco-16);
  margin-top: calc(var(--espaco-16) - var(--espaco-32)); /* 16px abaixo dos cards */
}

.seta-carrossel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--cor-branco);
  color: var(--cor-azul);
  transition: background-color var(--transicao), color var(--transicao), opacity var(--transicao);
}

.seta-carrossel:hover:not(:disabled) {
  background-color: var(--cor-azul);
  color: var(--cor-branco);
}

.seta-carrossel:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (min-width: 768px) {
  .solucoes {
    --solucoes-margem: 30px;
  }
}

/* Desktop: cabeçalho centralizado; com rolagem, o carrossel começa na margem esquerda da tela */
@media (min-width: 1024px) {
  .solucoes {
    gap: var(--espaco-64);
  }

  .solucoes__cabecalho {
    align-items: center;
    text-align: center;
  }

  .solucoes .rotulo {
    align-items: center;
  }

  .solucoes .rotulo::before {
    border-bottom-left-radius: 3px;
  }

  .solucoes__titulo {
    font-size: var(--texto-48);
    line-height: var(--linha-justa);
  }

  .solucoes__controles {
    margin-top: calc(var(--espaco-16) - var(--espaco-64));
  }

  /* Largura do card no desktop: 1/3 da coluna de 1024px (medida do Figma) */
  .solucao {
    flex-basis: calc((var(--largura-larga) - 2 * var(--espaco-16)) / 3);
  }
}

/* ---------- 7. Clientes ---------- */

/* Celular: sem respiro embaixo (a faixa de logos já tem 32px) */
.clientes {
  --clientes-espaco: 52px; /* distância entre logos */
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  padding-bottom: 0;
}

.clientes__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
}

.clientes__titulo {
  color: var(--cor-cinza-20);
  font-size: 1.875rem; /* 30px */
  line-height: 36px;
}

/* Janela da faixa: corta o que passa da borda */
.clientes__faixa {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-block: var(--espaco-32);
  overflow: hidden;
}

/* As duas listas lado a lado andam juntas; ao chegar em -50% o loop recomeça igual */
.clientes__trilho {
  display: flex;
  width: max-content;
  /* 24 logos de 40px de altura (~4900px): 98s mantém a velocidade original (~50px/s) */
  animation: clientes-rolagem 98s linear infinite;
}

.clientes__faixa:hover .clientes__trilho {
  animation-play-state: paused;
}

.clientes__logos {
  display: flex;
  align-items: center;
  gap: var(--clientes-espaco);
  padding-right: var(--clientes-espaco); /* mesmo espaço na emenda entre as listas */
}

/* Todos os logos com a mesma altura; a largura acompanha o formato de cada marca */
.clientes__logos img {
  width: auto;
  height: 40px;
  max-width: none;
}

@keyframes clientes-rolagem {
  to {
    transform: translateX(-50%);
  }
}

/* Sem animação para quem pede menos movimento: logos parados, quebrando linha */
@media (prefers-reduced-motion: reduce) {
  .clientes__trilho {
    width: auto;
    animation: none;
  }

  .clientes__logos {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--espaco-32);
    padding-right: 0;
  }

  .clientes__logos--copia {
    display: none;
  }
}

@media (min-width: 768px) {
  .clientes {
    padding-bottom: var(--secao-vertical);
  }
}

/* Desktop: cabeçalho centralizado e logos mais espaçados */
@media (min-width: 1024px) {
  .clientes {
    --clientes-espaco: 84px;
  }

  .clientes__cabecalho {
    align-items: center;
    text-align: center;
  }

  .clientes .rotulo {
    align-items: center;
  }

  .clientes .rotulo::before {
    border-bottom-left-radius: 3px;
  }

  .clientes__titulo {
    color: var(--cor-azul);
    font-size: var(--texto-40);
    line-height: 48px;
  }

  .clientes__faixa {
    padding-left: var(--espaco-32);
  }
}

/* ---------- 8. Visão de negócio ---------- */

/* Celular: sem respiro embaixo (a equipe vem logo depois com 80px em cima) */
.visao {
  padding-bottom: 0;
}

.visao__container {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  max-width: var(--largura-estreita);
  margin-inline: auto;
}

.visao__titulo {
  font-size: 1.875rem; /* 30px */
  line-height: 48px;
}

.visao__citacao {
  line-height: 1.8;
}

/* Nome da autora em negrito, sem o itálico padrão do <cite> */
.visao__autora {
  color: var(--cor-azul);
  font-style: normal;
  font-weight: var(--peso-bold);
}

@media (min-width: 768px) {
  .visao {
    padding-bottom: var(--secao-vertical);
  }

  .visao__container {
    text-align: center;
  }

  .visao__titulo {
    font-size: var(--texto-48);
  }
}

/* ---------- 9. Equipe ---------- */

/* Celular: sem respiro embaixo (a próxima seção começa com 80px) */
.equipe {
  padding-bottom: 0;
}

/* Celular: um membro por linha, 80px entre eles */
.equipe__lista {
  display: grid;
  gap: var(--espaco-80);
  max-width: var(--largura-larga);
  margin-inline: auto;
}

.membro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-16);
}

/* Bloco colorido de 250px; a foto (mais alta) "salta" pela borda de cima */
.membro__foto {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 250px;
  border-radius: var(--raio-32);
}

.membro__foto img {
  flex-shrink: 0;
  max-width: none;
}

.membro__foto--agua {
  background-color: var(--cor-agua);
}

.membro__foto--azul {
  background-color: var(--cor-azul);
}

/* Nome + cargo (cargo na linha de baixo, mais leve) */
.membro__nome {
  font-weight: var(--peso-medium);
  font-size: var(--texto-20);
  line-height: var(--linha-media);
  letter-spacing: 0;
}

.membro__cargo {
  display: block;
  color: var(--cor-azul-acinzentado);
  font-weight: var(--peso-light);
  font-size: var(--texto-16);
}

.membro__bio {
  color: var(--cor-azul);
  font-size: var(--texto-14);
  line-height: var(--linha-texto);
}

/* Botão +/− da equipe: verde (como no Figma) */
.membro .expansivel__botao {
  color: var(--cor-verde);
}

/* Tablet/desktop: duas colunas */
@media (min-width: 768px) {
  .equipe {
    padding-bottom: var(--secao-vertical);
  }

  .equipe__lista {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(483px, auto); /* altura das linhas no Figma */
    column-gap: var(--espaco-32);
  }

  .membro__nome {
    font-size: var(--texto-24);
  }
}

/* ---------- 10. Nossa história ---------- */

.historia__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-32);
  max-width: var(--largura-larga);
  margin-inline: auto;
}

/* Celular: título à esquerda, 30px */
.historia__titulo {
  width: 100%;
  max-width: var(--largura-estreita);
  font-size: 1.875rem;
  line-height: 36px;
}

.historia__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-32);
  width: 100%;
}

.historia__imagem {
  width: 100%;
  max-width: 424px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio-32);
}

/* Parágrafos separados por uma linha em branco */
.historia__texto {
  color: var(--cor-cinza-20);
  line-height: 24px;
}

.historia__texto p + p {
  margin-top: 24px;
}

/* Desktop: foto ao lado do texto, título centralizado e 120px embaixo */
@media (min-width: 1024px) {
  .historia {
    padding-bottom: var(--espaco-120);
  }

  .historia__container {
    gap: var(--espaco-64);
  }

  .historia__titulo {
    color: var(--cor-cinza-20);
    font-size: var(--texto-48);
    line-height: 48px;
    text-align: center;
  }

  .historia__conteudo {
    flex-direction: row;
    gap: var(--espaco-48);
  }

  .historia__imagem {
    flex-shrink: 0;
    width: 424px;
  }
}

/* ---------- 11. Contato ---------- */

.contato {
  padding-inline: 30px;
  background-color: var(--cor-azul-muito-claro);
}

.contato__container {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  max-width: var(--largura-estreita);
  margin-inline: auto;
}

/* Título + subtítulo na linha de baixo */
.contato__titulo {
  font-size: 1.875rem; /* 30px */
  text-align: center;
}

.contato__subtitulo {
  display: block;
  color: var(--cor-azul-acinzentado);
  font-size: var(--texto-18);
  line-height: var(--linha-media);
}

.contato__formulario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.contato__campos {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.contato__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
}

.contato__rotulo {
  color: var(--cor-azul);
  font-weight: var(--peso-medium);
  font-size: var(--texto-12);
  line-height: var(--linha-justa);
}

.contato__botao {
  padding: var(--espaco-10) 45px;
  line-height: var(--linha-28);
}

@media (min-width: 768px) {
  .contato__titulo {
    font-size: var(--texto-40);
    line-height: var(--linha-texto);
  }

  .contato__subtitulo {
    font-weight: var(--peso-regular);
    font-size: var(--texto-20);
    line-height: 23px; /* o bloco título + subtítulo tem 87px no Figma */
    letter-spacing: 0;
  }
}

/* ---------- 12. Rodapé ---------- */

.rodape {
  padding: var(--espaco-120) 30px;
  background-color: var(--cor-azul);
  color: var(--cor-azul-claro);
  line-height: 24px;
  letter-spacing: -0.02em;
}

/* Celular: colunas empilhadas */
.rodape__container {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-64);
  width: 100%;
  max-width: var(--largura-larga);
  margin-inline: auto;
}

.rodape__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
}

.rodape__coluna--marca {
  gap: var(--espaco-48);
}

.rodape__marca {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
}

.rodape__slogan,
.rodape__texto {
  max-width: 480px;
}

.rodape__contatos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
}

.rodape__contato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-branco);
  /* Fonte encolhe um pouco em telas estreitas para o e-mail caber numa linha;
     se ainda não couber, o <wbr> deixa quebrar logo depois do "@" */
  font-size: clamp(0.875rem, 3vw + 0.25rem, 1rem);
  transition: color var(--transicao);
}

.rodape__contato img {
  flex-shrink: 0;
}

.rodape__contato:hover {
  color: var(--cor-agua);
}

/* "Continue aprendendo…" + subtítulo menor na linha de baixo */
.rodape__titulo {
  color: var(--cor-branco);
  font-size: var(--texto-24);
  line-height: 32px;
}

.rodape__subtitulo {
  display: block;
  color: var(--cor-azul-claro);
  font-size: var(--texto-18);
  line-height: var(--linha-28);
}

.rodape__conteudos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-16);
}

.rodape__redes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
}

.rodape__redes-lista {
  display: flex;
  gap: var(--espaco-32);
}

.rodape__rede {
  display: block;
  border-radius: 50%;
  transition: opacity var(--transicao);
}

.rodape__rede:hover {
  opacity: 0.8;
}

/* Desktop: duas colunas lado a lado */
@media (min-width: 768px) {
  .rodape__container {
    flex-direction: row;
  }

  .rodape__coluna {
    flex: 1;
    justify-content: center;
  }

  .rodape__coluna--marca {
    justify-content: flex-start;
    gap: var(--espaco-64);
  }
}