/* ===== CORES E FONTES =====
   Mude as cores aqui e o site inteiro se atualiza. */
:root {
  --tinta: #4a0e0f;         /* vinho bem escuro: botões e fundos escuros */
  --vermelho: #8c0f10;      /* vermelho da logo */
  --vermelho-escuro: #6c0b0c;
  --dourado: #d9b16f;       /* dourado do logo (usado nos fundos escuros) */
  --jade: #1f6f5c;          /* verde: foco do teclado */
  --whatsapp: #25d366;      /* verde oficial do WhatsApp */
  --whatsapp-escuro: #1ebe5b;
  --papel: #fbf5ee;         /* fundo principal (bege bem claro) */
  --papel-escuro: #f1e2d5;  /* fundo das seções alternadas (nude) */
  --bege: #f5ece1;          /* fundo da entrada do site */
  --nude: #e9d4c4;          /* tom nude da entrada */
  --nude-escuro: #d6b29d;
  --fundo-cartao: rgba(244, 226, 213, 0.88); /* nude claro dos cartões (era branco) */
  --mar: #e4ebef;           /* cor do mar no mapa */
  --texto: #1c0d0a;         /* texto principal, quase preto */
  --texto-suave: #43291f;   /* texto secundário, marrom escuro */
  --linha: #dcc2b0;         /* linhas finas em nude */
  --branco: #ffffff;

  /* cores exatas da logo (usadas na janela de orçamento) */
  --logo-vermelho: #8c0f10;
  --logo-vermelho-escuro: #6c0b0c;
  --logo-dourado: #b78b4c;
  --logo-dourado-escuro: #8f6a35;
  --logo-preto: #141414;

  --fonte-titulo: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --fonte-texto: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --altura-topo: 72px;

  /* espaço para o selo "Powered by Netlify" (plano grátis) no canto de baixo; 0px se o selo sair */
  --folga-selo: 56px;

  /* ALINHAMENTO: o site usa só duas divisões de colunas, sempre com o mesmo espaço entre elas
     - seções de texto e listas: 5 partes à esquerda e 7 à direita (cabeçalhos, serviços, mapa, dúvidas)
     - seções com foto: 7 partes à esquerda e 5 à direita (início, quem somos, contato) */
  --gap-colunas: clamp(32px, 6vw, 96px);
  --raio: 6px;
}

/* ===== FONTES (arquivos na pasta "fontes") =====
   Ficam no próprio site porque o Google Fonts é bloqueado na China.
   Licença: SIL Open Font License (fontes/OFL-*.txt). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fontes/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fontes/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fontes/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fontes/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== BASE ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: var(--altura-topo); /* o topo fixo não cobre o título */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  color: var(--texto);
  line-height: 1.6;
  font-weight: 550; /* texto meio-negrito, mais fácil de ler */
  background: var(--bege);
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(140, 15, 16, 0.15);
}

/* marca d'água: o símbolo da logo fica parado no meio da tela, atrás de todo o site */
body::before {
  content: "";
  position: fixed;
  top: calc(50% + var(--altura-topo) / 2); /* centralizada na área abaixo do menu */
  left: 50%;
  z-index: -1; /* sempre atrás do conteúdo */
  /* cabe sempre inteira na tela: no máximo 820px, 90% da largura
     ou 75% da altura da tela (o que for menor) */
  width: min(820px, 90vw, calc((100vh - var(--altura-topo)) * 0.75 * 400 / 366));
  aspect-ratio: 400 / 366;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: url("imagens/logo-simbolo.png") center / contain no-repeat;
  opacity: 0.18; /* para deixar mais forte ou mais fraca, mude este número */
  pointer-events: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--vermelho);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance; /* evita uma palavra sozinha na última linha */
}

h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 800;
  font-stretch: 78%;
}

h3 {
  font-size: 1.25rem;
  font-weight: 800;
  font-stretch: 85%;
}

p {
  text-wrap: pretty;
}

strong, b {
  font-weight: 700;
  color: var(--vermelho-escuro);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--jade);
  outline-offset: 3px;
  border-radius: 4px;
}

/* seções que recebem o foco ao clicar nos links do menu: sem contorno */
[tabindex="-1"]:focus {
  outline: none;
}

/* Link "Pular para o conteúdo": só aparece ao usar a tecla Tab */
.pular {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--tinta);
  color: var(--branco);
  border-radius: var(--raio);
  font-weight: 600;
}

.pular:focus {
  top: 12px;
}

/* o nome "Dai Assessorias" nunca quebra no meio */
strong[translate="no"] {
  white-space: nowrap;
}

/* ===== BOTÕES ===== */
.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  border: 2px solid var(--tinta);
  background: var(--tinta);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.botao-whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--tinta);
}

.botao-whatsapp:hover {
  background: var(--whatsapp-escuro);
  border-color: var(--whatsapp-escuro);
}

.botao-contorno {
  background: transparent;
  color: var(--tinta);
}

.botao-contorno:hover {
  background: var(--tinta);
  color: var(--branco);
}

.icone-whatsapp {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ===== CABEÇALHO ===== */
.topo {
  position: sticky; /* fica preso no topo ao rolar */
  top: 0;
  z-index: 20;
  background: rgba(245, 236, 225, 0.95); /* bege, combinando com a entrada */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}

.topo-conteudo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--altura-topo);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-simbolo {
  width: 52px;
  height: auto;
  flex-shrink: 0;
}

.logo-texto {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-stretch: 85%;
  font-size: 1.2rem;
  line-height: 1.05;
  color: var(--tinta);
}

.logo-dai {
  color: var(--vermelho);
}

.logo-texto small {
  display: block;
  font-weight: 500;
  font-size: 0.8rem;
  font-stretch: 100%;
  color: var(--texto-suave);
}

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
}

.menu a {
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
}

.menu > a:hover {
  color: var(--vermelho);
}

.botao-menu {
  display: none;
}

/* ===== IDIOMAS (bandeiras) ===== */
.idiomas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 20px;
  border-left: 1px solid var(--linha);
}

.idiomas a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 2px;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.idiomas a:hover,
.idiomas a[aria-current="page"] {
  opacity: 1;
}

.idiomas img {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(22, 32, 46, 0.15);
}

/* no computador mostra só a bandeira; o nome aparece no menu do celular */
.idiomas span {
  display: none;
}

/* ===== SEÇÕES: padrão único =====
   Todas as seções usam o mesmo cabeçalho: título à esquerda, texto à direita. */
.secao {
  padding: clamp(72px, 10vw, 120px) 0;
}

.secao-clara {
  background: rgba(225, 196, 176, 0.55); /* nude mais forte, ainda deixa ver a marca d'água */
}

.secao-escura {
  background: rgba(124, 13, 14, 0.93); /* vermelho escuro, deixa a marca d'água aparecer de leve */
  color: rgba(255, 255, 255, 0.97);
}

/* títulos que eram brancos agora no bege/dourado da logo */
.secao-escura h2,
.secao-escura h3 {
  color: var(--dourado);
}

/* no fundo vermelho, o negrito fica branco para não sumir */
.secao-escura strong,
.rodape strong {
  color: var(--dourado);
}

/* cabeçalho das seções: título e texto centralizados, um embaixo do outro */
.cabecalho {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}

/* variação: título em cima (largura toda) e o texto embaixo, para títulos longos */
.cabecalho-empilhado {
  grid-template-columns: 1fr;
  gap: 20px;
}

.cabecalho-empilhado .citacao {
  max-width: 60ch;
}

.cabecalho > p {
  max-width: 52ch;
  font-size: 1.15rem;
  color: var(--texto-suave);
}

/* ===== INÍCIO ===== */
.destaque {
  padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 88px);
  /* bege em cima, nude embaixo, com um brilho vermelho bem suave no canto */
  background:
    radial-gradient(circle at 100% 0%, rgba(140, 15, 16, 0.10), transparent 45%),
    linear-gradient(160deg, rgba(245, 236, 225, 0.6) 0%, rgba(245, 236, 225, 0.6) 45%, rgba(233, 212, 196, 0.75) 100%);
  border-bottom: 6px solid var(--vermelho);
}

/* logo completa acima do título */
.destaque-logo {
  display: block;
  width: clamp(200px, 26vw, 300px);
  height: auto;
  margin-bottom: 20px;
  mix-blend-mode: multiply; /* some com qualquer fundo branco da imagem */
}

.destaque-grade {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap-colunas);
  align-items: center;
}

.destaque h1 {
  font-size: clamp(2.6rem, 5.8vw, 4.9rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.98;
  max-width: 16ch;
  color: var(--vermelho);
}


.subtitulo {
  margin-top: 24px;
  max-width: 48ch;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--texto-suave);
}

.destaque-foto {
  position: relative;
}

/* bloco vermelho atrás da foto, como uma moldura deslocada */
.destaque-foto::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  background: var(--vermelho);
  border-radius: var(--raio);
}

.destaque-foto > img {
  position: relative; /* fica por cima do bloco vermelho */
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raio);
  background: #e2ddd3;
}

/* cartão branco com o logo, por cima da foto */
.destaque-foto figcaption {
  position: absolute;
  left: -28px;
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 12px;
  z-index: 1;
  background: var(--bege);
  border: 1px solid var(--nude-escuro);
  border-radius: var(--raio);
  box-shadow: 0 12px 32px rgba(108, 11, 12, 0.18);
  font-size: 0.95rem;
  color: var(--texto-suave);
}

.destaque-foto figcaption img {
  width: 48px;
  height: auto;
}

.destaque-foto figcaption strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  color: var(--vermelho);
}

/* faixa de provas: compacta, com divisórias finas */
.provas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--nude-escuro);
}

.provas li {
  padding: 18px 20px 0;
  border-left: 1px solid var(--nude-escuro);
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--texto-suave);
  text-align: center;
}

.provas li:first-child {
  border-left: 0;
}

.provas strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--fonte-titulo);
  font-stretch: 85%;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--vermelho);
}


/* botão "Ver serviços" da entrada em vermelho */
.destaque .botao-contorno {
  border-color: var(--vermelho);
  color: var(--vermelho);
}

.destaque .botao-contorno:hover {
  background: var(--vermelho);
  color: var(--branco);
}

.destaque .subtitulo {
  color: var(--texto-suave);
  max-width: 52ch;
}

/* entrada centralizada: logo, título, textos e botões no meio da coluna */
.destaque-texto {
  text-align: center;
}

.destaque-logo,
.destaque h1,
.destaque .subtitulo {
  margin-left: auto;
  margin-right: auto;
}

.destaque .botoes {
  justify-content: center;
}

/* primeira frase da entrada, um pouco maior e mais escura */
.destaque .subtitulo-chamada {
  color: var(--texto);
  font-weight: 650;
}

.destaque .subtitulo-chamada + .subtitulo {
  margin-top: 12px;
}

/* assinatura "Dai Assessorias | Sua conexão estratégica com a China." */
.slogan {
  margin-top: 18px;
  font-style: italic;
  color: var(--texto-suave);
}

/* tracinho vermelho acima da assinatura */
.slogan::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto 14px;
  background: var(--vermelho);
  border-radius: 2px;
}

.slogan strong {
  font-style: normal;
  color: var(--vermelho);
}

/* ===== SERVIÇOS: tabela de preços (clique para ver o que inclui) ===== */
.servicos {
  border-top: 2px solid var(--tinta);
}

.servico {
  border-bottom: 1px solid var(--linha);
}

/* cada serviço é uma linha: nome (título com botão), resumo e o sinal de + */
.servico-linha {
  position: relative;
  display: grid;
  grid-template-columns: calc((100% - var(--gap-colunas)) * 5 / 12) var(--gap-colunas) 1fr 20px 28px;
  grid-template-areas: "titulo . resumo . sinal";
  column-gap: 0;
  align-items: center;
  padding: 26px 0;
  cursor: pointer;
}

/* o título guarda só o nome do serviço (é o que o Google e os leitores de tela leem) */
.servico-nome {
  grid-area: titulo;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--vermelho);
  text-wrap: balance;
  transition: color 0.2s;
}

.servico-botao {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* o botão "se estica" por cima da linha inteira: clicar no resumo também abre */
.servico-botao::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* contorno do teclado em volta da linha toda, e não só do nome */
.servico-botao:focus-visible {
  outline: none;
}

.servico-linha:has(.servico-botao:focus-visible) {
  outline: 3px solid var(--jade);
  outline-offset: 4px;
  border-radius: 4px;
}

.servico-linha:hover .servico-nome {
  color: var(--vermelho);
}

.servico-resumo {
  grid-area: resumo;
  color: var(--texto-suave);
}

/* sinal de + que vira − ao abrir */
.servico-linha::after {
  content: "+";
  grid-area: sinal;
  justify-self: end;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--vermelho);
}

.servico-linha:has(.servico-botao[aria-expanded="true"])::after {
  content: "−";
}

.servico-conteudo {
  padding-left: calc((100% - var(--gap-colunas)) * 5 / 12 + var(--gap-colunas));
}

.servico ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 32px;
  padding: 0 0 28px;
}

.servico li {
  position: relative;
  padding-left: 18px;
  line-height: 1.45;
}

.servico-nota {
  padding: 0 0 28px;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

.servico li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--vermelho);
  border-radius: 1px;
}


/* ===== COMO FUNCIONA ===== */
/* linha do tempo: quatro etapas ligadas por um fio dourado,
   no mesmo estilo (anel dourado fino, título vinho) das áreas de atuação */
.passos {
  list-style: none;
  counter-reset: passo;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.passos li {
  counter-increment: passo;
  position: relative;
  padding-top: 84px;
  color: var(--texto-suave);
  text-align: center;
  line-height: 1.5;
}

/* número dentro de um anel dourado */
.passos li::before {
  content: "0" counter(passo);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  border: 1px solid var(--logo-dourado);
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.95);
  box-shadow: 0 6px 16px rgba(108, 11, 12, 0.08);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--vermelho);
}

/* fio dourado ligando uma etapa à próxima */
.passos li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  left: calc(50% + 38px);
  width: calc(100% + 28px - 76px);
  height: 1px;
  background: var(--logo-dourado);
}

.passos strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--vermelho);
}

/* no tablet e no celular: etapas uma embaixo da outra, com o fio na vertical */
@media (max-width: 900px) {
  .passos {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 560px;
  }

  .passos li {
    min-height: 60px;
    padding: 14px 0 32px 84px;
    text-align: left;
  }

  .passos li::before {
    left: 0;
    margin-left: 0;
  }

  .passos li:not(:last-child)::after {
    top: 68px;
    bottom: 8px;
    left: 30px;
    width: 1px;
    height: auto;
  }
}

/* ===== ACOMPANHADO DE PERTO: posicionamento + quatro áreas ===== */
.cabecalho-empilhado > p {
  max-width: 62ch;
}

/* citação da Daiane entre dois fios dourados */
.citacao {
  padding: 20px 0;
  border-top: 1px solid var(--logo-dourado);
  border-bottom: 1px solid var(--logo-dourado);
}

.citacao p {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--vermelho-escuro);
}

.citacao footer {
  margin-top: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--logo-dourado-escuro);
}

.areas-intro {
  max-width: 760px;
  margin: 0 auto clamp(28px, 4vw, 40px);
  text-align: center;
}

.areas-intro h3 {
  margin-bottom: 10px;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.areas-intro p {
  font-size: 1.1rem;
  color: var(--texto-suave);
}

/* quatro blocos claros, 2 por linha */
.areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.area {
  padding: 30px clamp(22px, 3vw, 36px);
  background: rgba(255, 252, 248, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(183, 139, 76, 0.35);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(108, 11, 12, 0.07);
}

/* ícone fino, em vinho, dentro de um anel dourado */
.area-icone {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--logo-dourado);
  border-radius: 50%;
  fill: none;
  stroke: var(--vermelho);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area summary {
  list-style: none;
  cursor: default;
}

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

.areas h4 {
  margin-bottom: 14px;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--vermelho);
}

.area-numero {
  margin-right: 6px;
  padding-right: 10px;
  border-right: 1px solid var(--logo-dourado);
  color: var(--logo-dourado-escuro);
}

.areas ul {
  list-style: none;
}

/* itens com um losango dourado discreto, no lugar do check verde */
.areas ul li {
  position: relative;
  padding: 7px 0 7px 20px;
  color: var(--texto-suave);
  line-height: 1.45;
}

.areas ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.95em;
  width: 6px;
  height: 6px;
  background: var(--logo-dourado);
  transform: rotate(45deg);
}

/* no celular: só o título aparece; tocar abre a lista (sinal de + e −) */
@media (max-width: 640px) {
  .area {
    padding: 20px 20px;
  }

  .area summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 28px;
    cursor: pointer;
  }

  .area summary::after {
    content: "+";
    position: absolute;
    right: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--vermelho);
  }

  .area[open] summary::after {
    content: "−";
  }

  .area-icone {
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 10px;
  }

  .areas h4 {
    margin: 0;
    font-size: 1.1rem;
  }

  .area ul {
    margin-top: 14px;
  }
}

.areas-fecho {
  max-width: 760px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  text-align: center;
}

.areas-fecho > p:first-child {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 600;
  color: var(--texto);
}

.areas-marca {
  margin-top: 22px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermelho);
}

.areas-marca::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 auto 16px;
  background: var(--logo-dourado);
}

.areas-lema {
  margin-top: 6px;
  font-style: italic;
  color: var(--logo-dourado-escuro);
}

/* ===== TIPOS DE VIAGEM ===== */
/* Tipos de viagem: cartões modernos, 2 por linha */
.viagens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}

.viagem {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: subgrid; /* as 4 partes de cada cartão alinham com as dos vizinhos */
  grid-row: span 4;
  row-gap: 0;
  padding: 36px clamp(20px, 3vw, 40px) 30px;
  background: var(--fundo-cartao);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(214, 178, 157, 0.55);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(108, 11, 12, 0.08);
  container-type: inline-size; /* o título usa a largura do cartão para caber numa linha */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* faixa fina no topo, do vermelho ao dourado da logo */
.viagem::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--vermelho), #c9573a, var(--logo-dourado));
}

.viagem:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(108, 11, 12, 0.14);
}

/* subtítulo como uma etiqueta arredondada */
.viagem-local {
  justify-self: center;
  align-self: start;
  margin-bottom: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(233, 212, 196, 0.8);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vermelho-escuro);
}

/* título no meio e sempre numa linha só */
.viagem h3 {
  margin-bottom: 12px;
  text-align: center;
  white-space: nowrap;
  font-size: min(1.5rem, 9cqi);
}

/* texto dos cartões de missão */
.viagem p:not(.viagem-local) {
  color: var(--texto-suave);
  text-align: center; /* centralizado como o título; justificado abria buracos */
  hyphens: manual; /* nunca divide as palavras */
}

/* link como botão arredondado no fim do cartão */
.viagem-link {
  display: inline-flex;
  justify-self: center;
  align-self: end;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 20px;
  padding: 0 22px;
  border: 2px solid var(--vermelho);
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--vermelho);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.viagem-link::after {
  content: "→";
}

.viagem-link:hover {
  background: var(--vermelho);
  color: var(--branco);
}

/* ===== QUEM SOMOS ===== */
.quem-somos {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap-colunas);
  align-items: center;
}

.quem-somos-texto p {
  margin-top: 16px;
  font-size: 1.15rem; /* um pouco maior que o resto do site */
  line-height: 1.65;
  color: var(--texto-suave);
  text-align: justify;
  hyphens: manual; /* nunca divide as palavras */
}

.quem-somos-texto .abertura {
  margin-top: 24px;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--tinta);
}

/* frase da missão: destaque em vermelho com uma barra ao lado */
/* a missão começa na mesma linha dos parágrafos; a barra vermelha fica do lado de fora */
.quem-somos-texto .missao {
  position: relative;
  margin-top: 24px;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--vermelho);
  text-align: left; /* frase em destaque: justificada abriria buracos */
}

.quem-somos-texto .missao::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: -20px;
  width: 4px;
  border-radius: 2px;
  background: var(--vermelho);
}

/* no celular não há espaço do lado de fora: a barra entra no texto */
@media (max-width: 640px) {
  .quem-somos-texto .missao {
    padding-left: 16px;
  }

  .quem-somos-texto .missao::before {
    left: 0;
  }
}

.trajetoria {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 760px;
  margin: clamp(48px, 6vw, 72px) auto 0; /* no meio da página */
}

.trajetoria li {
  padding-top: 14px;
  border-top: 2px solid var(--linha);
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--texto-suave);
  text-align: center; /* ano e texto no meio de cada coluna */
}

.trajetoria li:last-child {
  border-top-color: var(--vermelho);
}

.trajetoria strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--fonte-titulo);
  font-stretch: 85%;
  font-size: 1.5rem;
  color: var(--vermelho);
}

.trajetoria li:last-child strong {
  color: var(--vermelho);
}

.quem-somos-foto {
  position: relative;
  margin: 0 20px 20px 0; /* espaço para o bloco vermelho */
}

/* bloco vermelho atrás da foto, igual ao da foto da equipe no início */
.quem-somos-foto::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  background: var(--vermelho);
  border-radius: var(--raio);
}

.quem-somos-foto img {
  position: relative; /* fica por cima do bloco vermelho */
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raio);
  background: #e2ddd3;
}

.quem-somos-foto figcaption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 14px 22px;
  background: var(--bege);
  border: 1px solid var(--nude-escuro);
  border-radius: var(--raio);
  box-shadow: 0 12px 32px rgba(108, 11, 12, 0.18);
  font-size: 1.1rem; /* "Fundadora" maior */
  color: var(--texto-suave);
}

.quem-somos-foto figcaption strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem; /* nome maior */
  line-height: 1.15;
  color: var(--vermelho);
}

/* ===== SETORES: áreas de atuação + fotos ===== */
.setores-intro {
  max-width: 820px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
}

.setores-intro h3 {
  margin-bottom: 14px;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.setores-intro p {
  color: var(--texto-suave);
  font-size: 1.1rem;
}

.setores-intro p + p {
  margin-top: 10px;
}

/* seis cartões, 3 por linha no computador */
.setores {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.setores li {
  overflow: hidden; /* a foto acompanha os cantos arredondados */
  padding: 0 24px 30px;
  background: var(--fundo-cartao);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(214, 178, 157, 0.55);
  border-top: 4px solid var(--vermelho);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(108, 11, 12, 0.08);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.setores li:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(108, 11, 12, 0.14);
}

/* foto real no topo do cartão, de ponta a ponta */
.setor-foto {
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 -24px;
  object-fit: cover;
}

/* desenho do setor dentro de um círculo nude, encaixado na borda da foto */
.setor-icone {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  margin: -36px auto 14px;
  border: 3px solid var(--bege);
  box-shadow: 0 6px 16px rgba(108, 11, 12, 0.18);
  padding: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bege), var(--nude));
  fill: none;
  stroke: var(--vermelho);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.setores h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
  line-height: 1.2;
}

.setores p {
  color: var(--texto-suave);
}

/* faixa vermelha: deixa claro que a Dai vende assessoria, não produtos */
.setores-aviso {
  max-width: 900px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 18px;
  background: linear-gradient(135deg, #b3161a, var(--vermelho-escuro));
  box-shadow: 0 14px 34px rgba(140, 15, 16, 0.25);
  color: var(--bege);
  text-align: center;
}

.setores-aviso .setores-polos {
  margin-bottom: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  color: var(--dourado);
}

.setores-aviso strong {
  color: var(--dourado);
}

/* galeria de fotos reais, centralizada embaixo dos setores */
.fotos-bloco {
  max-width: 900px;
  margin: clamp(48px, 6vw, 72px) auto 0;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(140px, 15vw, 190px);
  grid-auto-flow: dense; /* preenche os buracos da grade */
  gap: 16px;
  margin: 28px 8px 8px 0; /* espaço para a sombra vermelha */
}

.galeria figure {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #e2ddd3;
  box-shadow: 8px 8px 0 var(--vermelho); /* bloco vermelho por trás, deslocado */
}

/* fotos largas ocupam 2 colunas */
.galeria .foto-larga {
  grid-column: span 2;
}

/* foto da equipe: a primeira, maior, ocupando a largura toda */
.galeria .foto-destaque {
  grid-column: 1 / -1;
  grid-row: span 2;
}

.galeria .foto-destaque img {
  object-position: center 30%; /* mostra os rostos */
}

.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* a foto aproxima um pouco quando o mouse passa por cima */
.galeria figure:hover img {
  transform: scale(1.05);
}

.galeria figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(74, 14, 15, 0.82));
  color: var(--branco);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* "Ver mais fotos": álbum escondido que abre ao clicar */
.mais-fotos {
  margin-top: 28px;
}

.mais-fotos summary {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 auto;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--vermelho);
  box-shadow: 0 6px 16px rgba(140, 15, 16, 0.25);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--branco);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s;
}

.mais-fotos summary::-webkit-details-marker {
  display: none;
}

.mais-fotos summary::after {
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
}

.mais-fotos[open] summary::after {
  content: "−";
}

.mais-fotos summary:hover {
  background: var(--vermelho-escuro);
}

.mais-fotos-fechar,
.mais-fotos[open] .mais-fotos-abrir {
  display: none;
}

.mais-fotos[open] .mais-fotos-fechar {
  display: inline;
}

/* álbum: fotos do mesmo tamanho, 3 por linha */
.album {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.album figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: #e2ddd3;
  box-shadow: 0 8px 20px rgba(108, 11, 12, 0.12);
}

.album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.album figure:hover img {
  transform: scale(1.05);
}

.album figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(74, 14, 15, 0.82));
  color: var(--branco);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
}

.album-titulo {
  margin: 32px 0 0;
  text-align: center;
  font-size: 1.5rem;
}

/* vídeos: mesmo cartão das fotos, com os controles de tocar */
.album video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* mostra o vídeo inteiro, deitado ou em pé */
  background: #1c0d0a;
}

.album-videos figcaption {
  pointer-events: none; /* não atrapalha os botões do vídeo */
  top: 0;
  bottom: auto;
  padding: 10px 12px 28px;
  background: linear-gradient(rgba(74, 14, 15, 0.82), transparent);
}

@media (max-width: 640px) {
  .album {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* a última foto ocupa a linha toda, para não sobrar buraco */
  .album:not(.album-videos) figure:last-child {
    grid-column: span 2;
    aspect-ratio: 16 / 10;
  }

  .album-videos {
    grid-template-columns: 1fr;
  }

  .album figcaption {
    padding: 24px 8px 8px;
    font-size: 0.82rem;
  }
}

/* link do Instagram como botão arredondado, igual aos dos cartões */
.link-instagram {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 20px auto 0;
  padding: 0 22px;
  border: 2px solid var(--vermelho);
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--vermelho);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

/* a seta fica grudada no @dai_nachina, sem cair sozinha para a linha de baixo */
.link-instagram span {
  white-space: nowrap;
}

.link-instagram span::after {
  content: "\00a0→";
}

/* em telas estreitas o texto pode quebrar: fica centralizado dentro do botão */
@media (max-width: 640px) {
  .link-instagram {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 6px;
    padding: 8px 20px;
    text-align: center;
  }
}

.link-instagram:hover {
  background: var(--vermelho);
  color: var(--branco);
}

/* ===== DÚVIDAS ===== */
/* perguntas numa coluna só, no meio da página */
.duvidas {
  max-width: 860px;
}

.duvidas-cabecalho a {
  color: var(--vermelho);
  font-weight: 600;
  text-underline-offset: 3px;
}

.duvidas-lista {
  border-top: 2px solid var(--tinta);
}

.duvidas-lista details {
  border-bottom: 1px solid var(--linha);
}

.duvidas-lista summary {
  position: relative;
  padding: 22px 44px 22px 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--vermelho);
  cursor: pointer;
  list-style: none;
}

.duvidas-lista summary::-webkit-details-marker {
  display: none;
}

/* sinal de + que vira − ao abrir */
.duvidas-lista summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--vermelho);
}

.duvidas-lista details[open] summary::after {
  content: "−";
}

.duvidas-lista details p {
  padding: 0 44px 24px 0;
  color: var(--texto-suave);
  text-align: justify;
  hyphens: manual; /* nunca divide as palavras */
}

/* ===== CONTATO ===== */
.contato {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap-colunas);
  align-items: start;
}

.secao-escura .cabecalho > p {
  color: rgba(255, 255, 255, 0.95);
}

.contato > div > p {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 1.15rem;
}

.secao-escura .botao-contorno {
  color: var(--branco);
  border-color: var(--branco);
}

.secao-escura .botao-contorno:hover {
  background: var(--branco);
  color: var(--tinta);
}

.secao-escura a:focus-visible {
  outline-color: var(--whatsapp);
}

.contatos div {
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.contatos dt {
  font-size: 0.9rem;
  color: var(--dourado);
}

.contatos dd {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--branco);
  overflow-wrap: anywhere; /* o e-mail quebra a linha no celular, se precisar */
}

.contatos a {
  display: inline-block;
  padding: 8px 0; /* área de toque maior no celular */
  color: var(--branco);
  text-underline-offset: 4px;
}

.contatos a:hover {
  color: var(--whatsapp);
}

/* QR code do WeChat, com borda branca para a câmera conseguir ler */
.contatos .qrcode {
  width: 168px;
  height: auto;
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  background: var(--branco);
}

.qrcode-dica {
  display: block;
  margin-top: 8px;
  max-width: 30ch;
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

/* ===== RODAPÉ ===== */
.rodape {
  background: rgba(58, 9, 10, 0.95); /* vinho bem escuro */
  color: rgba(255, 255, 255, 0.85);
  padding: 28px 0 calc(136px + var(--folga-selo)); /* espaço para os botões flutuantes */
  font-size: 0.92rem;
}

.rodape-conteudo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.rodape-lema {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--dourado);
}

/* ===== BOTÕES FLUTUANTES ("Solicitar orçamento" em cima do WhatsApp) ===== */
.flutuantes {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--folga-selo) + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* os dois alinhados pela direita */
  gap: 8px;
}

.whatsapp-flutuante {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 12px;
  font-size: 0.95rem;
  border-radius: 999px;
  background: var(--whatsapp);
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(22, 32, 46, 0.22);
  transition: background-color 0.2s, transform 0.2s;
}

.whatsapp-flutuante .icone-whatsapp {
  width: 22px;
  height: 22px;
}

.whatsapp-flutuante:hover {
  background: var(--whatsapp-escuro);
  transform: translateY(-2px);
}

.whatsapp-flutuante:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

/* ===== SOLICITAR ORÇAMENTO ===== */

/* botão dentro de cada serviço */
.botao-orcamento {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 28px;
  padding: 0 20px;
  border: 2px solid var(--vermelho);
  border-radius: 999px;
  background: transparent;
  color: var(--vermelho);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.botao-orcamento:hover {
  background: var(--vermelho);
  color: var(--branco);
}

/* botão flutuante, em cima do WhatsApp */
.orcamento-flutuante {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--vermelho); /* mesmo vermelho dos títulos e botões do site */
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(140, 15, 16, 0.3);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

/* texto curto do botão só aparece no celular (ver @media max-width 640px) */
.orcamento-flutuante .texto-curto {
  display: none;
}

.orcamento-flutuante:hover {
  background: var(--vermelho-escuro);
  transform: translateY(-2px);
}

.orcamento-flutuante:focus-visible {
  border-radius: 999px;
}

.icone-orcamento {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* a janela: sobe no canto da tela, logo acima dos botões flutuantes */
.orcamento {
  position: fixed;
  inset: auto 20px calc(128px + var(--folga-selo) + env(safe-area-inset-bottom)) auto;
  z-index: 40;
  width: min(390px, calc(100% - 32px));
  max-height: calc(100dvh - 148px - var(--folga-selo));
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--branco);
  color: var(--texto);
  box-shadow:
    0 2px 6px rgba(22, 32, 46, 0.08),
    0 24px 56px rgba(22, 32, 46, 0.3);
  transform-origin: bottom right;
}

/* animação: sobe e aparece */
.orcamento[open] {
  animation: subir 0.22s ease-out;
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

.orcamento-form {
  padding: 0 18px 18px;
}

/* faixa do título: preto da logo com um fio dourado */
.orcamento-topo {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 -18px 4px;
  padding: 14px 12px 14px 18px;
  background: var(--logo-preto);
  border-bottom: 3px solid var(--logo-dourado);
}

.orcamento h2 {
  font-size: 1.3rem;
  color: var(--branco);
}

.orcamento-fechar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px; /* tamanho bom para o dedo */
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--branco);
  cursor: pointer;
  transition: background-color 0.2s;
}

.orcamento-fechar:hover {
  background: rgba(255, 255, 255, 0.2);
}

.orcamento-fechar:focus-visible {
  outline-color: var(--logo-dourado);
}

.orcamento-fechar svg {
  width: 20px;
  height: 20px;
}

/* campos do formulário */
.campo {
  margin-top: 12px;
}

.campo-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.campo-rotulo,
.campo label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--logo-preto);
}

.campo input:not([type="checkbox"]),
.campo textarea,
.seletor-botao {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d9d3c8;
  border-radius: 8px;
  background: #fbfaf7;
  color: var(--texto);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.campo textarea {
  resize: vertical;
  min-height: 76px;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: #7d625a;
}

.campo input:not([type="checkbox"]):hover,
.campo textarea:hover,
.seletor-botao:hover {
  border-color: #b9b1a3;
}

/* campo em uso: fundo branco e anel dourado */
.campo input:not([type="checkbox"]):focus-visible,
.campo textarea:focus-visible,
.seletor-botao:focus-visible {
  outline: none;
  border-color: var(--logo-dourado-escuro);
  background: var(--branco);
  box-shadow: 0 0 0 3px rgba(183, 139, 76, 0.35);
}

/* campo com problema: borda e fundo avermelhados */
.campo [aria-invalid="true"] {
  border-color: var(--logo-vermelho);
  background: #fdf4f3;
}

.campo-erro {
  margin-top: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--logo-vermelho);
}

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

/* ===== campo de serviços: lista suspensa ===== */
.seletor-botao {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.seletor-botao[aria-expanded="true"] {
  border-color: var(--logo-preto);
  background: var(--branco);
}

/* texto do campo: cinza enquanto vazio; corta com "…" se não couber */
.seletor-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #7d625a;
}

.seletor-botao.preenchido .seletor-texto {
  color: var(--texto);
}

/* quantidade de serviços marcados (aparece a partir de 2) */
.seletor-contador {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--logo-vermelho);
  color: var(--branco);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.seletor-seta {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--texto-suave);
  transition: transform 0.2s;
}

.seletor-botao[aria-expanded="true"] .seletor-seta {
  transform: rotate(180deg);
}

/* a lista abre logo abaixo do campo, empurrando o resto para baixo */
.seletor-lista {
  margin-top: 6px;
  max-height: min(300px, 45dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px solid #d9d3c8;
  border-radius: 8px;
  background: var(--branco);
  box-shadow: 0 8px 20px rgba(22, 32, 46, 0.08);
}

.seletor-lista[hidden] {
  display: none;
}

.campo .opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 6px;
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--texto);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s;
}

.campo .opcao:hover {
  background: var(--papel-escuro);
}

/* a caixinha de marcar fica escondida: clicar no nome já marca */
.opcao input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* ✓ vermelho à direita, só nos serviços escolhidos */
.opcao::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
}

.campo .opcao:has(input:checked) {
  background: rgba(140, 15, 16, 0.07);
  font-weight: 600;
  color: var(--logo-vermelho);
}

.opcao:has(input:checked)::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%238c0f10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.opcao:has(input:focus-visible) {
  outline: 3px solid var(--logo-dourado);
  outline-offset: -3px;
}

/* botão de envio: vermelho da logo */
.orcamento-enviar {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  border-color: var(--logo-vermelho);
  background: var(--logo-vermelho);
  color: var(--branco);
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(140, 15, 16, 0.25);
  cursor: pointer;
}

.orcamento-enviar:hover {
  border-color: var(--logo-vermelho-escuro);
  background: var(--logo-vermelho-escuro);
}

.orcamento-enviar:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* aviso de privacidade (LGPD), logo abaixo do botão de envio */
.orcamento-privacidade {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
  color: var(--texto-suave);
}

.orcamento-privacidade strong {
  color: var(--logo-preto);
}

.orcamento-form.enviado .orcamento-privacidade {
  display: none;
}

/* campo anti-spam: fica fora da tela */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

/* depois de enviar, some o formulário e fica só a confirmação */
.orcamento-form.enviado .campo,
.orcamento-form.enviado .campo-linha,
.orcamento-form.enviado .orcamento-enviar {
  display: none;
}

.orcamento-sucesso {
  margin-top: 14px;
  padding: 16px 16px 16px 52px;
  border: 1px solid #b9e4c8;
  border-radius: 10px;
  background: #eefaf2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2325d366'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2316202e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16px 18px / 24px no-repeat;
  color: var(--tinta);
  font-size: 0.95rem;
}

.orcamento-sucesso strong:first-child { /* só o título "Pedido enviado!" fica em linha própria */
  display: block;
  margin-bottom: 2px;
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
}

/* não deixa "e-mail" quebrar no hífen */
.sem-quebra {
  white-space: nowrap;
}

.orcamento-falha {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdf4f3;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--logo-vermelho);
}

.orcamento-falha a {
  color: inherit;
  text-underline-offset: 3px;
}

/* WhatsApp para quem quer falar na hora, separado por um fio */
.orcamento-alternativa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.orcamento-alternativa a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  font-weight: 600;
  color: var(--logo-preto);
  text-underline-offset: 3px;
}

.orcamento-alternativa .icone-whatsapp {
  width: 18px;
  height: 18px;
  color: #1aa851;
}

.orcamento-alternativa a:hover {
  color: var(--logo-vermelho);
}

/* telas bem estreitas: campos lado a lado viram um embaixo do outro */
@media (max-width: 420px) {
  .campo-linha {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ===== TELAS MÉDIAS ===== */
@media (max-width: 1100px) {
  .menu {
    gap: 18px;
  }

  .menu a {
    font-size: 0.95rem;
  }

  .servico-linha {
    grid-template-columns: 1fr 28px;
    grid-template-areas:
      "titulo sinal"
      "resumo sinal";
    column-gap: 20px;
    row-gap: 4px;
  }

  .servico-conteudo {
    padding-left: 0;
  }

  .servico ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .viagens {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Menu "hambúrguer": vale até 1020px, para caber o menu e as bandeiras */
@media (max-width: 1020px) {
  .botao-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    margin-right: -11px;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .botao-menu span {
    display: block;
    height: 2px;
    background: var(--tinta);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }

  .botao-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .botao-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .botao-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .menu {
    display: none;
    position: absolute;
    top: var(--altura-topo);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(16px, 4vw, 40px) 20px;
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
    box-shadow: 0 12px 24px rgba(22, 32, 46, 0.08);
    overscroll-behavior: contain;
  }

  .menu.aberto {
    display: flex;
  }

  .menu > a {
    padding: 14px 0;
    font-size: 1.1rem;
    text-align: center;
    border-bottom: 1px solid var(--linha);
  }

  .menu > a:last-of-type {
    border-bottom: 0;
  }

  /* bandeiras dentro do menu, com o nome do idioma */
  .idiomas {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 0 4px;
    border-left: 0;
    border-top: 1px solid var(--linha);
  }

  .idiomas a {
    padding: 8px 12px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    opacity: 1;
  }

  .idiomas a[aria-current="page"] {
    border-color: var(--tinta);
  }

  .idiomas span {
    display: inline;
  }
}

/* ===== TABLET ===== */
@media (max-width: 900px) {
  .destaque-grade,
  .quem-somos,
  .duvidas,
  .contato {
    grid-template-columns: 1fr;
  }

  .destaque-foto {
    max-width: 440px;
    margin: 0 20px 20px 0; /* espaço para o bloco vermelho não sair da tela */
  }

  .quem-somos-foto {
    max-width: 420px;
    order: -1; /* no tablet e no celular, a foto vem antes do texto */
  }


  .provas {
    grid-template-columns: repeat(2, 1fr);
  }

  .provas li:nth-child(3) {
    border-left: 0;
  }

  .provas li:nth-child(n + 3) {
    margin-top: 16px;
  }


  .setores {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== CELULAR ===== */
@media (max-width: 640px) {
  :root {
    --altura-topo: 64px;
  }

  /* no celular as linhas são curtas: texto alinhado à esquerda,
     porque justificado abriria buracos grandes entre as palavras */
  .viagem p:not(.viagem-local),
  .quem-somos-texto p,
  .duvidas-lista details p {
    text-align: left;
  }

  /* no celular, um cartão de viagem por linha (cabe o título inteiro) */
  .viagens {
    grid-template-columns: 1fr;
  }

  .logo-simbolo {
    width: 44px;
  }

  .cabecalho {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .botoes .botao {
    flex: 1 1 100%; /* botões ocupam a largura toda, mais fáceis de tocar */
  }

  .servico-linha {
    column-gap: 16px;
  }

  .provas strong {
    font-size: 1.3rem; /* "Desde 2017" cabe numa linha só */
  }

  .destaque-foto figcaption {
    left: 12px; /* cartão com o logo dentro da tela */
    bottom: 20px;
  }

  .servico ul,
  .areas,
  .viagens,
  .setores {
    grid-template-columns: 1fr;
  }

  .trajetoria {
    gap: 12px;
  }

  .trajetoria strong {
    font-size: 1.25rem;
  }

  .galeria {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 8px;
  }

  /* a última foto ocupa a linha toda, para não sobrar buraco */
  .galeria figure:last-child {
    grid-column: span 2;
  }

  .galeria figcaption {
    padding: 24px 8px 8px;
    font-size: 0.82rem;
  }

  /* no celular os dois botões ficam lado a lado, numa linha só, para cobrir menos o texto */
  .flutuantes {
    right: 16px;
    bottom: calc(16px + var(--folga-selo) + env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: center;
  }

  .orcamento-flutuante .texto-longo {
    display: none;
  }

  .orcamento-flutuante .texto-curto {
    display: inline;
  }

  /* no celular o botão do WhatsApp mostra só a logo */
  .whatsapp-flutuante {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .whatsapp-flutuante .icone-whatsapp {
    width: 24px;
    height: 24px;
  }

  .whatsapp-flutuante-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* a janela ocupa a largura toda, logo acima dos botões flutuantes */
  .orcamento {
    inset: auto 8px calc(72px + var(--folga-selo) + env(safe-area-inset-bottom)) 8px; /* logo acima da linha de botões */
    width: auto;
    max-height: calc(100dvh - 88px - var(--folga-selo));
  }
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  .viagem:hover,
  .setores li:hover,
  .galeria figure:hover img,
  .album figure:hover img {
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }

  .orcamento[open] {
    animation: none;
  }
}