/* ==========================================================================
   CEDO EQUIPAMENTOS DE SEGURANÇA — site.css
   Layout das seções do site. Depende de css/base.css (tokens e componentes).
   Mobile primeiro. Nenhum estilo aqui repete o que já existe na base.
   ========================================================================== */

/* ==========================================================================
   1. CABEÇALHO
   ========================================================================== */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--cor-branco);
  box-shadow: 0 1px 0 var(--cor-tinta-100);
  transition: box-shadow var(--t-medio) var(--ease-saida);
}

.cabecalho[data-fixo="true"] { box-shadow: var(--sombra-2); }

/* --- Barra de contato do topo ------------------------------------------ */

.barra-topo {
  background-color: var(--cor-tinta-900);
  color: var(--cor-tinta-300);
  font-size: var(--fs-mini);
}

.barra-topo__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2) var(--esp-5);
  padding-block: var(--esp-2);
  text-align: center;
}

.barra-topo a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--cor-branco);
  font-weight: 600;
  text-decoration: none;
}

.barra-topo a:hover { color: var(--cor-laranja); }
.barra-topo svg { color: var(--cor-laranja); }

.barra-topo__horario {
  display: none;
  align-items: center;
  gap: var(--esp-2);
}

@media (min-width: 62rem) {
  .barra-topo__interno { justify-content: space-between; text-align: left; }
  .barra-topo__horario { display: inline-flex; }
}

/* --- Navegação ---------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-3);
}

.nav__marca { flex: 0 0 auto; }

.nav__marca img {
  width: auto;
  height: 3.25rem;
}

.nav__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--borda);
  border-radius: var(--raio-1);
  color: var(--cor-tinta-900);
  cursor: pointer;
  transition: border-color var(--t-rapido) var(--ease-saida),
              background-color var(--t-rapido) var(--ease-saida);
}

.nav__toggle:hover {
  border-color: var(--cor-laranja-600);
  background-color: var(--cor-laranja-100);
}

.nav__toggle .icone-fechar { display: none; }
.nav__toggle[aria-expanded="true"] .icone-abrir { display: none; }
.nav__toggle[aria-expanded="true"] .icone-fechar { display: block; }

/* --- Menu: painel no celular, linha no desktop -------------------------- */

.nav__menu {
  display: none;
  flex-direction: column;
  gap: var(--esp-1);
  padding-block: var(--esp-4) var(--esp-6);
  border-top: 1px solid var(--cor-tinta-100);
}

.nav__menu[data-aberto="true"] { display: flex; }

.nav__link {
  display: block;
  padding: var(--esp-3) 0;
  color: var(--cor-tinta-900);
  font-size: var(--fs-h5);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--cor-tinta-100);
  transition: color var(--t-rapido) var(--ease-saida);
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--cor-laranja-600); }

.nav__menu .btn { margin-top: var(--esp-4); }

@media (min-width: 62rem) {
  .nav { padding-block: var(--esp-4); }

  .nav__toggle { display: none; }
  .nav__cta { display: inline-flex; }

  .nav__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--esp-6);
    padding: 0;
    border: 0;
    margin-left: auto;
    margin-right: var(--esp-6);
  }

  .nav__link {
    padding: var(--esp-2) 0;
    border: 0;
    font-size: var(--fs-corpo-p);
    font-weight: 700;
    letter-spacing: 0.01em;
    position: relative;
  }

  /* Sublinhado que cresce a partir da esquerda */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--cor-laranja);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-medio) var(--ease-saida);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  .nav__menu .btn { display: none; }
}

/* ==========================================================================
   2. HERÓI
   ========================================================================== */

.heroi {
  position: relative;
  display: grid;
  isolation: isolate;
  background-color: var(--cor-tinta-900);
  color: var(--cor-tinta-300);
  overflow: hidden;
}

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

.heroi__midia img,
.heroi__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Deslocamento horizontal do vídeo.
   O vídeo é 16:9 e no desktop o banner é mais largo que isso, então o corte
   do object-fit acontece na vertical e o object-position horizontal fica sem
   folga para atuar. Para empurrar o homem do vídeo para a direita, ampliamos
   um pouco e transladamos: a ampliação cria a sobra que a translação consome,
   sem abrir borda vazia de nenhum lado.
   Ajuste só o --video-empurrar. Ele não pode passar de metade da ampliação
   (com scale 1.2, o limite é 8,3%). */
.heroi__video {
  --video-empurrar: 6%;
  transform: scale(1.2) translateX(var(--video-empurrar));
  transform-origin: center center;
}

/* Quem pede menos movimento não recebe o vídeo: o poster vira o fundo fixo.
   Resolvido só em CSS, então vale mesmo com o JavaScript desligado. */
@media (prefers-reduced-motion: reduce) {
  .heroi__video { display: none; }

  .heroi__midia {
    background-image: url("../images/heroi-poster.webp");
    background-size: cover;
    background-position: center 35%;
  }
}

/* Véu em duas camadas: escurece o suficiente para o texto passar em AAA e
   ainda deixa a foto legível. */
.heroi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(28, 26, 27) 0%, rgba(28, 26, 27, 0.91) 55%, rgba(28, 26, 27, 0.32) 100%), linear-gradient(105deg, rgba(28, 26, 27, 0.15) 0%, rgba(28, 26, 27, 0) 70%)
}

/* Nunca colocar max-width num elemento que também carrega .envolucro: o
   margin-inline auto do envólucro centraliza o bloco e o texto descola da
   margem do logo. O limite de largura vai sempre no filho. */
.heroi__conteudo {
  padding-block: var(--esp-8) var(--esp-7);
}

.heroi h1 {
  color: var(--cor-branco);
  max-width: 15ch;
}

.heroi h1 em {
  font-style: normal;
  color: var(--cor-laranja);
}

.heroi__linha-fina {
  margin-top: var(--esp-5);
  max-width: 52ch;
  font-size: var(--fs-corpo);
  color: var(--cor-tinta-300);
}

.heroi__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
}

/* --- Faixa de prova, colada na base do herói ---------------------------- */

.heroi__provas {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(28, 26, 27, 0.55);
  backdrop-filter: blur(2px);
}

.heroi__provas ul {
  display: grid;
  gap: var(--esp-4);
  padding-block: var(--esp-5);
}

.heroi__provas li {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--fs-corpo-p);
  color: var(--cor-branco);
}

.heroi__provas svg {
  flex: 0 0 auto;
  color: var(--cor-laranja);
}

@media (min-width: 48rem) {
  .heroi__conteudo { padding-block: var(--esp-9) var(--esp-8); }
  .heroi__provas ul { grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); }
}

/* ==========================================================================
   3. FAIXA DE NÚMEROS
   ========================================================================== */

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

.numeros__grade {
  display: grid;
  gap: var(--esp-6);
  padding-block: var(--esp-7);
}

@media (min-width: 48rem) {
  .numeros__grade {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-7);
  }

  .numeros__grade .selo + .selo {
    border-left: 1px solid var(--cor-tinta-100);
    padding-left: var(--esp-7);
  }
}

/* ==========================================================================
   4. SOBRE
   ========================================================================== */

.sobre__grade {
  display: grid;
  gap: var(--esp-7);
  align-items: start;
}

.sobre__texto p + p { margin-top: var(--esp-4); }

.sobre__midia {
  position: relative;
  border-radius: var(--raio-4);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}

.sobre__midia img { width: 100%; }

/* Bloco laranja que morde o canto da foto */
.sobre__marca {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--esp-4) var(--esp-5);
  background-color: var(--cor-laranja);
  color: var(--cor-tinta-900);
  border-top-right-radius: var(--raio-3);
}

.sobre__marca strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: 2.25rem;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--cor-tinta-900);
}

.sobre__marca span {
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--tracking-mini);
  text-transform: uppercase;
}

@media (min-width: 62rem) {
  .sobre__grade { grid-template-columns: 1.05fr 0.95fr; gap: var(--esp-9); }
}

/* ==========================================================================
   5. SERVIÇOS
   ========================================================================== */

.servicos__cabeca {
  display: grid;
  gap: var(--esp-5);
  margin-bottom: var(--esp-7);
}

@media (min-width: 62rem) {
  .servicos__cabeca {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--esp-8);
  }
  .servicos__cabeca .subtitulo { margin-top: 0; }
}

/* ==========================================================================
   6. POR QUE A CEDO (superfície escura)
   ========================================================================== */

.porque__grade {
  display: grid;
  gap: var(--esp-6);
  margin-top: var(--esp-7);
}

.porque__item {
  padding-top: var(--esp-5);
  border-top: 3px solid var(--cor-laranja);
}

.porque__item h3 {
  font-size: var(--fs-h4);
  font-family: var(--fonte-corpo);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--esp-2);
}

.porque__item p {
  color: var(--cor-tinta-300);
  font-size: var(--fs-corpo-p);
}

@media (min-width: 48rem) {
  .porque__grade { grid-template-columns: repeat(2, 1fr); gap: var(--esp-7); }
}

@media (min-width: 62rem) {
  .porque__grade { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   7. MISSÃO, VISÃO E VALORES
   ========================================================================== */

.pilares {
  display: grid;
  gap: var(--esp-5);
  margin-top: var(--esp-7);
}

.pilar {
  padding: var(--esp-6);
  border-radius: var(--raio-3);
  background-color: var(--cor-branco);
  border: 1px solid var(--borda);
}

.pilar h3 {
  font-family: var(--fonte-display);
  font-size: var(--fs-h3);
  color: var(--cor-laranja-700);
  margin-bottom: var(--esp-3);
}

.pilar p { color: var(--texto-suave); font-size: var(--fs-corpo-p); }

/* Esta lista não tem atributo class, então o reset `ul[class]` da base não
   a alcança e os marcadores continuariam aparecendo. Zerado aqui. */
.pilar--valores ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pilar--valores li {
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-1);
  background-color: var(--cor-tinta-050);
  border: 1px solid var(--borda);
  font-size: var(--fs-mini);
  font-weight: 600;
}

@media (min-width: 62rem) {
  .pilares { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   8. PERGUNTAS FREQUENTES
   ========================================================================== */

.faq__grade {
  display: grid;
  gap: var(--esp-6);
  margin-top: var(--esp-7);
  align-items: start;
}

.faq__foto {
  border-radius: var(--raio-4);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--sombra-2);
}

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

@media (min-width: 62rem) {
  .faq__grade { grid-template-columns: 0.8fr 1.2fr; gap: var(--esp-8); }
  .faq__foto { aspect-ratio: 3 / 4; }
}

.faq__item {
  border-bottom: 1px solid var(--borda);
  transition: border-color var(--t-medio) var(--ease-saida);
}

/* A linha de baixo acende em laranja no item aberto: é ela que diz onde o
   leitor está na lista. */
.faq__item[open] { border-bottom-color: var(--cor-laranja); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  padding-block: var(--esp-5);
  font-family: var(--fonte-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cor-tinta-900);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-rapido) var(--ease-saida);
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--cor-laranja-600); }

.faq__sinal {
  position: relative;
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--raio-1);
  background-color: var(--cor-tinta-100);
  transition: background-color var(--t-medio) var(--ease-saida);
}

.faq__sinal::before,
.faq__sinal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.8125rem;
  height: 2px;
  background-color: var(--cor-tinta-900);
  transform: translate(-50%, -50%);
  transition: transform var(--t-medio) var(--ease-firme),
              background-color var(--t-rapido) var(--ease-saida);
}

/* Traço vertical: some ao abrir, virando o mais em menos. */
.faq__sinal::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__item summary:hover .faq__sinal { background-color: var(--cor-laranja-100); }

.faq__item summary:hover .faq__sinal::before,
.faq__item summary:hover .faq__sinal::after { background-color: var(--cor-laranja-700); }

.faq__item[open] .faq__sinal::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__resposta {
  padding-bottom: var(--esp-6);
  padding-right: var(--esp-8);
  color: var(--texto-suave);
  font-size: var(--fs-corpo-p);
}

.faq__resposta p { max-width: 62ch; }
.faq__resposta p + p { margin-top: var(--esp-3); }

/* ==========================================================================
   9. FAIXA DE CHAMADA FINAL
   ========================================================================== */

.chamada__interno {
  display: grid;
  gap: var(--esp-6);
  padding-block: var(--esp-8);
  align-items: center;
}

.chamada h2 { max-width: 25ch; }

.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
}

@media (min-width: 62rem) {
  .chamada__interno {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--esp-8);
  }
  .chamada__acoes { justify-content: flex-end; }
}

/* ==========================================================================
   10. RODAPÉ
   ========================================================================== */

.rodape {
  background-color: var(--cor-tinta-900);
  color: var(--cor-tinta-300);
}

.rodape__grade {
  display: grid;
  gap: var(--esp-7);
  padding-block: var(--esp-8) var(--esp-7);
}

.rodape__marca img {
  width: auto;
  height: 3.5rem;
  margin-bottom: var(--esp-4);
}

.rodape__marca p { font-size: var(--fs-corpo-p); max-width: 34ch; }

.rodape h2 {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo-p);
  font-weight: 700;
  letter-spacing: var(--tracking-mini);
  text-transform: uppercase;
  color: var(--cor-branco);
  margin-bottom: var(--esp-4);
}

.rodape__lista li + li { margin-top: var(--esp-3); }

.rodape__lista a,
.rodape__contato a {
  color: var(--cor-tinta-300);
  text-decoration: none;
  transition: color var(--t-rapido) var(--ease-saida);
}

.rodape__lista a:hover,
.rodape__contato a:hover { color: var(--cor-laranja); }

.rodape__contato li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
}

.rodape__contato li + li { margin-top: var(--esp-4); }
.rodape__contato svg { flex: 0 0 auto; margin-top: 0.2em; color: var(--cor-laranja); }
.rodape__contato strong { display: block; color: var(--cor-branco); font-size: var(--fs-corpo-p); }

.rodape__sociais {
  display: flex;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.rodape__sociais a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-1);
  color: var(--cor-branco);
  transition: background-color var(--t-rapido) var(--ease-saida),
              border-color var(--t-rapido) var(--ease-saida),
              transform var(--t-rapido) var(--ease-saida);
}

.rodape__sociais a:hover {
  background-color: var(--cor-laranja-600);
  border-color: var(--cor-laranja-600);
  transform: translateY(-2px);
}

@media (min-width: 48rem) {
  .rodape__grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62rem) {
  .rodape__grade {
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: var(--esp-8);
  }
}

/* --- Assinatura ---------------------------------------------------------- */

.rodape__pe {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--esp-6);
  text-align: center;
  font-size: var(--fs-mini);
}

.rodape__pe p { max-width: none; margin-inline: auto; }

.rodape__pe a { color: var(--cor-tinta-300); }

.rodape__creditos {
  display: block;
  margin-top: var(--esp-4);
}

.rodape__creditos img {
  display: inline-block;
  width: auto;
  height: 2.25rem;
}

/* ==========================================================================
   11. BOTÃO FLUTUANTE DE WHATSAPP
   ========================================================================== */

/* Mesma pele do btn-shiny-wa, em círculo. */
.zap-flutuante {
  --wa-luz: #34D399;
  --wa-aro: #04443D;
  --shiny-dur: 3s;
  --shiny-t: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 90;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid transparent;
  border-radius: 50%;
  color: var(--cor-branco);
  background:
    linear-gradient(135deg, var(--cor-zap-de), var(--cor-zap-para)) padding-box,
    conic-gradient(
      from calc(var(--shiny-angle) - var(--shiny-angle-offset)),
      transparent,
      var(--wa-luz) var(--shiny-percent),
      var(--shiny-shine) calc(var(--shiny-percent) * 2),
      var(--wa-luz) calc(var(--shiny-percent) * 3),
      transparent calc(var(--shiny-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--wa-aro), 0 8px 22px rgba(7, 94, 84, 0.42);
  animation: shiny-angle var(--shiny-dur) linear infinite;
  transition:
    --shiny-angle-offset var(--shiny-t),
    --shiny-percent var(--shiny-t),
    box-shadow var(--shiny-t),
    transform var(--shiny-t);
}

.zap-flutuante:is(:hover, :focus-visible) {
  --shiny-percent: 20%;
  --shiny-angle-offset: 95deg;
  color: var(--cor-branco);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--wa-aro), 0 14px 32px rgba(7, 94, 84, 0.52);
}

@media (min-width: 48rem) {
  .zap-flutuante {
    right: var(--esp-6);
    bottom: var(--esp-6);
    width: 4rem;
    height: 4rem;
  }
}

/* ==========================================================================
   12. AVISO DE COOKIES
   ========================================================================== */

.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  padding: var(--esp-5) 0;
  background-color: var(--cor-tinta-900);
  color: var(--cor-tinta-300);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(110%);
  transition: transform var(--t-lento) var(--ease-saida);
}

.cookies[data-visivel="true"] { transform: translateY(0); }

.cookies__interno {
  display: grid;
  gap: var(--esp-4);
  align-items: center;
}

.cookies p { font-size: var(--fs-corpo-p); max-width: 70ch; }
.cookies a { color: var(--cor-laranja); }

.cookies__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

@media (min-width: 62rem) {
  .cookies__interno { grid-template-columns: 1fr auto; gap: var(--esp-7); }
}

/* ==========================================================================
   13. PÁGINAS INTERNAS
   ========================================================================== */

.capa-interna {
  position: relative;
  isolation: isolate;
  background-color: var(--cor-tinta-900);
  color: var(--cor-tinta-300);
  overflow: hidden;
}

.capa-interna__midia { position: absolute; inset: 0; z-index: -2; }

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

.capa-interna::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(28, 26, 27, 0.95) 15%, rgba(28, 26, 27, 0.6) 100%);
}

.capa-interna__conteudo { padding-block: var(--esp-8); }

.capa-interna h1 {
  color: var(--cor-branco);
  max-width: 31ch;
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
}

.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
  font-size: var(--fs-mini);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.trilha a { color: var(--cor-tinta-300); text-decoration: none; }
.trilha a:hover { color: var(--cor-laranja); }
.trilha [aria-current="page"] { color: var(--cor-laranja); }
.trilha svg { color: rgba(255, 255, 255, 0.4); }

/* --- Corpo de texto das páginas internas -------------------------------- */

.conteudo-interno { display: grid; gap: var(--esp-8); }

.prosa h2 { margin-top: var(--esp-7); margin-bottom: var(--esp-4); }
.prosa h2:first-child { margin-top: 0; }

.prosa h3 {
  font-family: var(--fonte-corpo);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-h4);
  margin-top: var(--esp-6);
  margin-bottom: var(--esp-3);
}

.prosa p + p { margin-top: var(--esp-4); }

.prosa figure { margin: var(--esp-6) 0; }

.prosa figure img { border-radius: var(--raio-3); width: 100%; }

.lista-verificada { margin-top: var(--esp-4); }

.lista-verificada li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  font-size: var(--fs-corpo-p);
}

.lista-verificada li + li { margin-top: var(--esp-3); }

.lista-verificada svg {
  flex: 0 0 auto;
  margin-top: 0.2em;
  color: var(--cor-laranja-600);
}

/* Barra lateral fixa de contato nas internas */
.aparte {
  position: relative;
  align-self: start;
  padding: var(--esp-6);
  border-radius: var(--raio-3);
  background-color: var(--cor-tinta-050);
  border: 1px solid var(--borda);
}

.aparte h2 {
  font-family: var(--fonte-display);
  font-size: var(--fs-h3);
  margin-bottom: var(--esp-3);
}

.aparte p { font-size: var(--fs-corpo-p); color: var(--texto-suave); }
.aparte .btn { margin-top: var(--esp-5); }

@media (min-width: 62rem) {
  .conteudo-interno { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--esp-9); }
  .aparte { position: sticky; top: 7.5rem; }
}

/* ==========================================================================
   14. CONTATO
   ========================================================================== */

.contato__grade { display: grid; gap: var(--esp-8); align-items: start; }

.contato__canais li + li { margin-top: var(--esp-5); }

.contato__canal {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  padding: var(--esp-5);
  border-radius: var(--raio-3);
  border: 1px solid var(--borda);
  background-color: var(--cor-branco);
  transition: border-color var(--t-medio) var(--ease-saida),
              box-shadow var(--t-medio) var(--ease-saida);
}

.contato__canal:hover { border-color: var(--cor-laranja); box-shadow: var(--sombra-1); }

.contato__canal svg { flex: 0 0 auto; margin-top: 0.15em; color: var(--cor-laranja-600); }
.contato__canal strong { display: block; }
.contato__canal a { font-size: var(--fs-h5); font-weight: 700; text-decoration: none; }

@media (min-width: 62rem) {
  .contato__grade { grid-template-columns: 1.1fr 0.9fr; gap: var(--esp-9); }
}

/* ==========================================================================
   15. PÁGINAS DE SISTEMA (obrigado, 404)
   ========================================================================== */

.aviso-pagina {
  display: grid;
  align-content: center;
  min-height: 70vh;
  padding-block: var(--esp-9);
}

.aviso-pagina__interno { max-width: 40rem; }

.aviso-pagina h1 { margin-bottom: var(--esp-4); }

.aviso-pagina .linha { margin-top: var(--esp-6); }

.aviso-pagina__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin-bottom: var(--esp-5);
  border-radius: 50%;
  background-color: var(--cor-laranja-100);
  color: var(--cor-laranja-600);
}

.aviso-pagina__codigo {
  font-family: var(--fonte-display);
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: 0.8;
  letter-spacing: var(--tracking-display);
  color: var(--cor-laranja);
  margin-bottom: var(--esp-4);
}

/* ==========================================================================
   16. FUNDO DA SEÇÃO DE DOCUMENTAÇÃO
   ========================================================================== */

/* A foto entra por baixo do bloco escuro, discreta o bastante para o texto
   continuar legível.

   O teto de 18% não é chute: medido contra o percentil 99 de luminosidade
   da própria imagem, é a opacidade máxima em que o texto de apoio
   (--cor-tinta-300) ainda entrega 5.00:1, ou seja, passa em AA. A 22% cai
   para 4.37:1 e reprova. Ajuste --fundo-forca por sua conta e risco. */
.documentacao {
  --fundo-forca: 0.05;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Sem véu por cima: os 18% já são o limite da legibilidade, e qualquer
   camada extra só tiraria a presença da foto sem ganhar contraste. */
.documentacao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/fundo-documentacao.webp");
  background-size: cover;
  background-position: center 40%;
  opacity: var(--fundo-forca);
}

/* ==========================================================================
   17. FORMULÁRIO DE CONTATO
   ========================================================================== */

.formulario { margin-top: var(--esp-6); }

.formulario .g-recaptcha { max-width: 100%; overflow-x: auto; }

.formulario__aviso {
  margin-top: var(--esp-4);
  font-size: var(--fs-mini);
  color: var(--texto-suave);
}

.formulario [data-form-erro] { margin-bottom: var(--esp-4); }

/* Durante o envio: campos travados e sem apagar o que a pessoa escreveu. */
.formulario[data-enviando="true"] .campo__controle {
  pointer-events: none;
  opacity: 0.6;
}

/* ==========================================================================
   18. ENTRADA DOS TÍTULOS

   Reproduz o split-words-scale da referência sem GSAP nem SplitText.
   O título é dividido em palavras pelo js/site.js e cada palavra entra
   alternando: as de índice par crescem da escala 0, as ímpares encolhem da
   escala 2, todas convergindo para 1 com 30ms de atraso entre elas.
   A curva é a mesma do tema de referência: cubic-bezier(.77, 0, .175, 1),
   que já existe aqui como --ease-firme.
   ========================================================================== */

.titulo-anima .palavra {
  display: inline-block;
  opacity: 0;
  transform: scale(var(--palavra-escala, 0));
  transition: opacity 500ms var(--ease-firme),
              transform 500ms var(--ease-firme);
  transition-delay: var(--palavra-atraso, 0ms);
}

.titulo-anima.esta-visivel .palavra {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .titulo-anima .palavra {
    opacity: 1;
    transform: none;
    transition: none;
  }
}