/* ==========================================================================
   WALLY CONSULTORIA — site institucional (10-2026)
   Norma: Manual de Marca Wally v2, perfil Tela.
   Só entram valores definidos na norma: seis cores institucionais, #F4F6F8,
   #9FB4C6 para apoio em fundo escuro, escala 32/24/18/16/13, base 4px,
   raios 6/10/16.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --azul: #2e7db8;
  --profundo: #0b3a5c;
  --grafite: #4a4a4c;
  --claro: #8a8d91;
  --preto: #231f20;
  --branco: #ffffff;
  --superficie: #f4f6f8;
  --apoio-escuro: #9fb4c6;

  --fonte: "Poppins", "Century Gothic", sans-serif;

  /* papéis — invertidos em contexto escuro, os filhos usam os mesmos nomes */
  --fundo: var(--branco);
  --fundo-alt: var(--superficie);
  --texto: var(--preto);
  --texto-apoio: var(--grafite);
  --link: var(--profundo);
  --titulo-destaque: var(--azul);
  --linha: var(--claro);
  --borda-campo: var(--claro);
  --foco: var(--profundo);
  --botao-fundo: var(--profundo);
  --botao-texto: var(--branco);

  color-scheme: light;
}

[data-theme="dark"],
[data-tone="dark"] {
  --fundo: var(--profundo);
  --fundo-alt: var(--profundo);
  --texto: var(--branco);
  --texto-apoio: var(--apoio-escuro);
  --link: var(--branco);
  --titulo-destaque: var(--apoio-escuro);
  --linha: var(--azul);
  --borda-campo: var(--apoio-escuro);
  --foco: var(--branco);
  --botao-fundo: var(--branco);
  --botao-texto: var(--profundo);
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.65 var(--fonte);
}

[data-tone="dark"] {
  background: var(--fundo);
  color: var(--texto);
}

img {
  max-width: 100%;
  height: auto;
}

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

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

button,
summary {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
}

h1 {
  font-size: 32px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  line-height: 1.3;
}

h3 {
  font-size: 18px;
  line-height: 1.4;
}

h4 {
  font-size: 16px;
  line-height: 1.5;
}

p,
dd {
  color: var(--texto-apoio);
}

p + p {
  margin-top: 16px;
}

.lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--texto);
}

.legenda {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--texto-apoio);
}

.num {
  font-variant-numeric: tabular-nums;
}

.wrap {
  width: min(1120px, 100% - 48px);
  margin-inline: auto;
}

.secao {
  padding: 96px 0;
}

.secao--alt {
  background: var(--fundo-alt);
}

/* Rótulo de seção: barra geométrica em Azul Corporativo + legenda */
.rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.rotulo::before {
  content: "";
  width: 24px;
  height: 4px;
  background: var(--azul);
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.link:hover {
  text-decoration-thickness: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font-weight: 500;
  transition: box-shadow 0.15s;
}

.btn:hover {
  box-shadow: 0 0 0 4px var(--azul);
}

.pular {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 99;
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--botao-fundo);
  color: var(--botao-texto);
}

.pular:focus {
  top: 8px;
}

/* Marca "+" dos blocos expansíveis: duas barras, sem ícone */
.marca-mais {
  position: relative;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.marca-mais::before,
.marca-mais::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.marca-mais::before {
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
}

.marca-mais::after {
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
}

details[open] > summary .marca-mais::after {
  display: none;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Cabeçalho
   -------------------------------------------------------------------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}

.topo__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 72px;
}

.marca {
  flex-shrink: 0;
  width: 158px;
  padding: 8px 0;
}

.marca img {
  display: block;
  width: 158px;
}

.marca .logo-escuro,
[data-theme="dark"] .marca .logo-claro {
  display: none;
}

[data-theme="dark"] .marca .logo-escuro {
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  font-weight: 500;
}

.nav > a,
.nav__botao {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
}

.nav > a:hover,
.nav__botao:hover,
.nav > a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--azul);
  text-underline-offset: 8px;
}

.caret {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top: 5px solid currentColor;
  border-bottom: 0;
}

.temdrop {
  position: relative;
}

.drop {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  width: 360px;
  padding: 8px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 10px;
}

.temdrop[data-aberto="sim"] .drop {
  display: block;
}

.drop a {
  display: block;
  padding: 12px;
  border-radius: 6px;
  line-height: 1.4;
}

.drop a:hover,
.drop a[aria-current] {
  background: var(--fundo-alt);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.drop span {
  display: block;
  margin-top: 4px;
  color: var(--texto-apoio);
  font-size: 13px;
  font-weight: 400;
}

.acoes {
  display: flex;
  gap: 8px;
}

.tema,
.hamburguer {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* A troca de tema é função secundária: texto de apoio, sem moldura */
.tema {
  padding: 0 8px;
  border: 0;
  color: var(--texto-apoio);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tema:hover {
  color: var(--texto);
}

.hamburguer:hover {
  border-color: var(--texto);
}

.hamburguer {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Abertura
   -------------------------------------------------------------------------- */
.hero {
  padding-top: 64px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero h1 span {
  color: var(--titulo-destaque);
}

.hero .lead {
  max-width: 440px;
  margin-top: 24px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 32px;
}

/* Índice das frentes: o painel da abertura leva direto ao conteúdo */
.indice {
  padding: 24px 32px 8px;
  border-radius: 16px;
}

.indice li {
  border-top: 1px solid var(--linha);
}

.indice h2 {
  padding-bottom: 16px;
}

.indice a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 8px;
  align-items: baseline;
  padding: 12px 0;
}

.indice .num {
  grid-row: span 2;
  color: var(--texto-apoio);
  font-size: 13px;
}

.indice__nome {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.indice__desc {
  color: var(--texto-apoio);
  font-size: 13px;
  line-height: 1.5;
}

.indice a:hover .indice__nome {
  text-decoration: underline;
  text-underline-offset: 4px;
}

[data-theme="dark"] .indice {
  border: 1px solid var(--linha);
}

/* Fatos verificáveis logo abaixo da abertura */
.fatos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 32px;
  margin-top: 64px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--linha);
}

.fatos dt {
  color: var(--texto-apoio);
  font-size: 13px;
}

.fatos dd {
  color: var(--texto);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. Blocos de seção
   -------------------------------------------------------------------------- */
.duas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 64px;
}

.cabecalho {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 64px;
  align-items: end;
  margin-bottom: 48px;
}

.cabecalho h2 {
  max-width: 440px;
}

/* Quem somos */
.triade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 64px 0 24px;
}

.triade li {
  padding-top: 16px;
  border-top: 4px solid var(--azul);
}

.triade p {
  margin-top: 4px;
}

/* Serviços */
/* Sem filetes: o número grande e o espaço separam uma frente da outra */
.servico {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 16px 64px;
  scroll-margin-top: 96px;
}

.servico__corpo > p {
  max-width: 640px;
}

.servico + .servico {
  margin-top: 64px;
}

.servico__nome .num {
  display: block;
  color: var(--titulo-destaque);
  font-size: 24px;
  line-height: 1.3;
}

.servico__nome h3 {
  margin-top: 4px;
}

.servico__chamada {
  color: var(--texto);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.servico__chamada + p {
  margin-top: 8px;
}

.servico__rotulo {
  margin-top: 24px;
}

.entregas-nomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  margin-top: 8px;
}

.entregas-nomes li {
  position: relative;
  padding-left: 20px;
  font-weight: 500;
}

.entregas-nomes li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--azul);
}

/* Com o detalhamento aberto, a lista de nomes daria a mesma informação duas vezes */
.servico__corpo:has(details[open]) .servico__rotulo,
.servico__corpo:has(details[open]) .entregas-nomes {
  display: none;
}

.servico__detalhes {
  margin-top: 16px;
}

.servico__detalhes > summary,
.privacidade summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--link);
  font-weight: 500;
}

.servico__detalhes > summary:hover,
.privacidade summary:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.entregas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  padding: 16px 0 24px;
}

.entrega p {
  margin-top: 4px;
}

/* Compromissos */
.cartoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cartoes li {
  padding: 24px;
  background: var(--fundo);
  border-radius: 10px;
}

/* No tema escuro cartão e fundo têm a mesma cor: aí a moldura é necessária */
[data-theme="dark"] .cartoes li,
[data-theme="dark"] .painel {
  border: 1px solid var(--linha);
}

.cartoes p {
  margin-top: 8px;
}

/* Condução do trabalho */
.etapas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
}

/* O verbo da etapa é o marcador; a numeração fica só nos serviços */
.etapas .rotulo {
  margin-bottom: 8px;
}

.etapas h3 {
  margin-bottom: 8px;
}

[data-theme="dark"] .metodo,
[data-theme="dark"] .rodape,
[data-theme="dark"] .secao--alt {
  border-top: 1px solid var(--linha);
}

[data-theme="dark"] .secao--alt + .secao:not(.metodo) {
  border-top: 1px solid var(--linha);
}

/* Interlocução */
.titulo-secao {
  margin-bottom: 48px;
}

.publicos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 64px;
}

.publicos dt {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.publicos dd {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   6. Contato
   -------------------------------------------------------------------------- */
.contato {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
}

.contato .lead {
  max-width: 440px;
  margin: 24px 0 16px;
}

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

.telefone .link {
  align-self: flex-start;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.nota {
  max-width: 440px;
  margin-top: 32px;
}

.nota h3 {
  margin-bottom: 8px;
}

.painel {
  padding: 32px;
  background: var(--fundo);
  border-radius: 10px;
}

.painel > .legenda {
  margin-bottom: 24px;
}

.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.campo:nth-child(n + 5),
.formulario > .btn,
.formulario > .apoio {
  grid-column: 1 / -1;
}

label {
  font-size: 13px;
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 8px 12px;
  background: var(--fundo);
  border: 1px solid var(--borda-campo);
  border-radius: 6px;
  line-height: 1.5;
}

textarea {
  resize: vertical;
}

.campo--consentimento {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.campo--consentimento input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 2px 0;
  accent-color: var(--botao-fundo);
}

.campo--consentimento label,
.formulario .apoio {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.campo--consentimento a,
.apoio a,
.prosa a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.camuflagem {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. Política de privacidade e rodapé
   -------------------------------------------------------------------------- */
.privacidade {
  padding: 24px 0;
  scroll-margin-top: 96px;
}

.prosa {
  max-width: 720px;
  padding: 16px 0 32px;
}

.prosa h3 {
  margin: 32px 0 8px;
}

.prosa a {
  overflow-wrap: anywhere;
}

.rodape {
  padding-top: 64px;
}

.rodape__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 32px;
}

.rodape img {
  width: 158px;
}

.rodape p {
  max-width: 280px;
  margin-top: 16px;
  font-size: 13px;
}

.rodape h2 {
  margin-bottom: 8px;
  color: var(--texto-apoio);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.rodape li a,
.rodape__base a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.rodape a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding: 16px 0;
  border-top: 1px solid var(--linha);
  color: var(--texto-apoio);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rodape__base a {
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   8. Larguras menores
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero__grid,
  .duas,
  .cabecalho,
  .contato {
    gap: 32px;
  }

  .servico,
  .etapas,
  .publicos {
    gap: 16px 32px;
  }

  .etapas {
    row-gap: 32px;
  }

  .rodape__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .hamburguer {
    display: block;
  }

  .acoes {
    margin-left: auto;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 72px);
    overflow: auto;
    padding: 8px 24px 24px;
    background: var(--fundo);
    border-bottom: 1px solid var(--linha);
  }

  .nav[data-aberto="sim"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__botao {
    width: 100%;
    justify-content: space-between;
  }

  .drop {
    position: static;
    width: 100%;
  }

  .hero__grid,
  .contato {
    grid-template-columns: 1fr;
  }

  /* O índice repetiria o menu e a seção de serviços, que vem logo abaixo */
  .indice {
    display: none;
  }
}

@media (max-width: 700px) {
  .secao {
    padding: 48px 0;
  }

  .hero {
    padding-top: 48px;
  }

  .marca,
  .marca img {
    width: 132px;
  }

  .topo__inner {
    gap: 16px;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .fatos {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 48px;
  }

  .duas,
  .cabecalho,
  .triade,
  .servico,
  .entregas,
  .cartoes,
  .etapas,
  .publicos,
  .formulario {
    grid-template-columns: 1fr;
  }

  .servico {
    gap: 12px;
  }

  .servico + .servico {
    margin-top: 48px;
  }

  .servico__nome {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  /* Um nome de entrega por linha: inteiros, quase nenhum par cabe na largura do celular */
  .entregas-nomes {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .servico__rotulo {
    margin-top: 16px;
  }

  .titulo-secao {
    margin-bottom: 32px;
  }

  .rodape li a,
  .rodape__base a {
    min-height: 44px;
  }

  .formulario > * {
    grid-column: 1;
  }

  .cabecalho {
    margin-bottom: 32px;
  }

  .triade {
    gap: 24px;
    margin-top: 48px;
  }

  .painel {
    padding: 24px 16px;
  }

  .rodape__grid > div:first-child,
  .rodape__grid > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}