/* =============================================================
   INTERPRINCE — Energia Solar e Segurança Eletrônica
   style.css — folha de estilo única do protótipo
   Versão 3 — logo oficial e paleta de acento derivada da marca

   Sumário
   01. Tokens (design system)
   02. Reset e base
   03. Tipografia
   04. Utilitários e layout
   05. Skip link
   06. Header, logo e navegação
   07. Botões
   08. Hero
   09. Breadcrumbs
   10. Barra de confiança
   11. Calculadora
   12. Cards
   13. Kits solares
   14. Tabela comparativa
   15. Processo em etapas
   16. Blocos de conteúdo
   17. Financiamento
   18. Regiões atendidas
   19. FAQ
   20. Formulários
   21. CTA final
   22. Rodapé
   23. Botão flutuante do WhatsApp
   24. Páginas de texto legal
   25. Movimento e impressão

   NOTA DE CONTRASTE
   O acento é o laranja #e07000 da logo oficial. Ele mede 3,24:1 sobre branco,
   suficiente para elementos gráficos, mas insuficiente para texto. Por isso
   existem três tokens:
     --laranja        → fundos, bordas, ícones e texto sobre azul-marinho (5,1:1)
     --laranja-claro  → hover de botão e texto sobre azul-marinho (6,5:1)
     --laranja-texto  → texto e ícones sobre fundos claros (5,76:1 sobre branco)
   ============================================================= */

/* -------------------------------------------------------------
   01. TOKENS
   ------------------------------------------------------------- */
:root {
  /* Cores institucionais */
  --azul-marinho: #0b1f3a;
  --azul-institucional: #10264a;
  --azul-profundo: #081729;
  --laranja: #e07000;       /* cor de acento da logo oficial */
  --laranja-claro: #f5851f; /* hover e texto sobre azul-marinho (6,5:1) */
  --laranja-texto: #a34e00; /* variante acessível para fundos claros (5,76:1) */
  --branco: #ffffff;
  --cinza-claro: #f3f5f7;
  --cinza-medio: #e8ecf1;
  --grafite: #252a31;
  --texto-secundario: #5b6470;
  --borda: #dde2e8;
  --borda-campo: #7d8b9e; /* 3,47:1 sobre branco — limite de UI do WCAG 1.4.11 */
  --sucesso: #2e7d32;
  --erro: #b3261e;
  --whatsapp: #0f7a35; /* escurecido para 5,45:1 com texto branco */
  --whatsapp-hover: #0c682c;

  /* Layout */
  --container: 1280px;
  --container-estreito: 820px;

  /* Altura do cabeçalho fixo. Usada em scroll-margin das âncoras. */
  --header-h: clamp(64px, 7.5vw, 92px);

  /* Bordas e sombras — discretas */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 8px 24px rgba(11, 31, 58, 0.08);
  --shadow-md: 0 18px 50px rgba(11, 31, 58, 0.14);

  /* Escala de espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Escala tipográfica */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;

  /* Movimento */
  --transicao: 180ms ease;

  /* Alvo mínimo de toque */
  --toque: 44px;
}

/* -------------------------------------------------------------
   02. RESET E BASE
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--grafite);
  background: var(--branco);
  font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* Rede de segurança, não correção. Toda largura fixa do projeto
     foi auditada e está contida: .tabela (min-width 640px) vive
     dentro de .tabela-wrapper com overflow-x auto, e todas as
     grades usam minmax(0, ...) para não estourar pelo min-content. */
  overflow-x: hidden;
}

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

img {
  height: auto;
}

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

a {
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: var(--space-6) 0;
}

/* Âncoras internas não ficam escondidas sob o cabeçalho fixo */
[id] {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Foco visível: contorno azul-marinho (16,5:1 sobre branco) com halo laranja.
   Combinação legível tanto em fundo claro quanto escuro. */
:focus-visible {
  outline: 3px solid var(--azul-marinho);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(224, 112, 0, 0.5);
  border-radius: 2px;
}

/* Em superfícies escuras o contorno inverte para branco */
.hero :focus-visible,
.secao--escura :focus-visible,
.cta-final :focus-visible,
.rodape :focus-visible,
.barra-confianca :focus-visible,
.kit--destaque :focus-visible,
.whatsapp-float:focus-visible {
  outline-color: var(--branco);
  box-shadow: 0 0 0 6px rgba(11, 31, 58, 0.7);
}

/* main recebe foco programático vindo do skip link */
main:focus {
  outline: none;
}

::selection {
  background: var(--azul-marinho);
  color: var(--branco);
}

/* -------------------------------------------------------------
   03. TIPOGRAFIA
   ------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  color: var(--azul-marinho);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.625rem, 3vw, 2.75rem);
}

h3 {
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  letter-spacing: -0.015em;
}

h4 {
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--space-4);
}

.body-copy,
.lead,
.secao__intro {
  max-width: 68ch;
}

.lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--texto-secundario);
  line-height: 1.65;
}

/* Rótulo de seção. Em fundo claro usa o laranja escuro (5,76:1). */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3);
  color: var(--laranja-texto);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Em fundo escuro usa o laranja da marca (5,1:1 sobre azul-marinho) */
.hero .eyebrow,
.secao--escura .eyebrow,
.cta-final .eyebrow {
  color: var(--laranja);
}

.texto-secundario {
  color: var(--texto-secundario);
}

.nota {
  font-size: var(--text-sm);
  color: var(--texto-secundario);
  line-height: 1.55;
  max-width: 72ch;
}

.destaque-numero {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--azul-marinho);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* -------------------------------------------------------------
   04. UTILITÁRIOS E LAYOUT
   ------------------------------------------------------------- */
.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.container--estreito {
  width: min(100% - 32px, var(--container-estreito));
  margin-inline: auto;
}

section {
  padding-block: clamp(56px, 7vw, 104px);
}

.secao--clara {
  background: var(--cinza-claro);
}

.secao--escura {
  background: var(--azul-marinho);
  color: #d8dee7;
}

.secao--escura h2,
.secao--escura h3,
.secao--escura h4 {
  color: var(--branco);
}

.secao--escura .lead,
.secao--escura .texto-secundario,
.secao--escura .nota {
  color: #aab6c6;
}

.secao__cabecalho {
  margin-bottom: clamp(32px, 4vw, 56px);
  max-width: 72ch;
}

.secao__cabecalho--centro {
  margin-inline: auto;
  text-align: center;
}

.secao__cabecalho p:last-child {
  margin-bottom: 0;
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.acoes--espacada {
  margin-top: var(--space-6);
}

.divisor {
  height: 1px;
  background: var(--borda);
  border: 0;
  margin: 0;
}

/* -------------------------------------------------------------
   05. SKIP LINK
   ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 1000;
  padding: 14px 22px;
  min-height: var(--toque);
  display: inline-flex;
  align-items: center;
  background: var(--azul-marinho);
  color: var(--branco);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top var(--transicao);
}

.skip-link:focus {
  top: 0;
}

/* -------------------------------------------------------------
   06. HEADER, LOGO E NAVEGAÇÃO
   ------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}

/* Sombra sutil apenas depois que a página rola, para o header
   permanecer legível sobre o conteúdo sem parecer pesado no topo. */
.header.is-rolado {
  box-shadow: 0 6px 20px rgba(11, 31, 58, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
  padding-block: 8px;
}

/* Logo institucional.
   A altura é controlada pela imagem (height fixo, width auto) para que o
   cabeçalho não mude de altura caso a proporção real do arquivo seja
   diferente da declarada. Isso protege o CLS. */
.site-logo,
.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
}

.site-logo img {
  height: clamp(40px, 5.2vw, 58px);
  width: auto;
  max-width: min(56vw, 320px); /* trava de segurança contra logos muito largas */
  object-fit: contain;
}

/* Texto exibido apenas se o arquivo da logo não carregar.
   Garante que o cabeçalho nunca fique vazio ou quebrado. */
.site-logo__fallback,
.footer-logo__fallback {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-logo__fallback[hidden],
.footer-logo__fallback[hidden] {
  display: none;
}

.logo__marca {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--azul-marinho);
  white-space: nowrap;
}

.logo__marca span {
  color: var(--laranja-texto);
}

.logo__descritivo {
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--texto-secundario);
  text-transform: uppercase;
  font-weight: 600;
}

/* Navegação desktop */
.nav {
  display: none;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding-inline: 2px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grafite);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}

.nav__link:hover {
  color: var(--azul-marinho);
  border-bottom-color: var(--laranja);
}

.nav__link[aria-current="page"] {
  color: var(--azul-marinho);
  font-weight: 700;
  border-bottom-color: var(--laranja);
}

.header__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.header__telefone,
.header__acoes .btn {
  display: none;
}

/* Botão hambúrguer */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toque);
  height: var(--toque);
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu-toggle:hover {
  border-color: var(--azul-marinho);
  background: var(--cinza-claro);
}

.menu-toggle__barras,
.menu-toggle__barras::before,
.menu-toggle__barras::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--azul-marinho);
  transition: transform var(--transicao), opacity var(--transicao);
}

.menu-toggle__barras {
  position: relative;
}

.menu-toggle__barras::before,
.menu-toggle__barras::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__barras::before {
  top: -6px;
}

.menu-toggle__barras::after {
  top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barras {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barras::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barras::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Menu mobile */
.menu-mobile {
  display: none;
  border-top: 1px solid var(--borda);
  background: var(--branco);
  padding-block: var(--space-4) var(--space-6);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

.menu-mobile.is-aberto {
  display: block;
}

.menu-mobile__lista {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.menu-mobile__link {
  display: flex;
  align-items: center;
  padding: 12px 4px;
  min-height: var(--toque);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--grafite);
  text-decoration: none;
  border-bottom: 1px solid var(--borda);
}

.menu-mobile__link[aria-current="page"] {
  color: var(--azul-marinho);
  font-weight: 700;
}

.menu-mobile .btn {
  width: 100%;
}

.menu-mobile__contato {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--texto-secundario);
}

.menu-mobile__contato a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  font-weight: 600;
  color: var(--azul-marinho);
}

/* A partir de 480px cabe o telefone ao lado do menu */
@media (min-width: 480px) {
  .header__telefone {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--azul-marinho);
    text-decoration: none;
    white-space: nowrap;
  }

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

/* A partir de 768px entra o CTA principal do cabeçalho */
@media (min-width: 768px) {
  .header__acoes .btn {
    display: inline-flex;
  }
}

@media (min-width: 1080px) {
  .nav {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  /* Sem !important: em desktop o menu mobile nunca é exibido */
  .menu-mobile,
  .menu-mobile.is-aberto {
    display: none;
  }

  .header__telefone {
    margin-right: var(--space-2);
  }
}

/* -------------------------------------------------------------
   07. BOTÕES
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.btn--primario {
  background: var(--laranja);
  color: var(--azul-marinho);
  border-color: var(--laranja);
}

.btn--primario:hover {
  background: var(--laranja-claro);
  border-color: var(--laranja-claro);
}

.btn--secundario {
  background: var(--azul-marinho);
  color: var(--branco);
  border-color: var(--azul-marinho);
}

.btn--secundario:hover {
  background: var(--azul-institucional);
  border-color: var(--azul-institucional);
}

.btn--contorno {
  background: transparent;
  color: var(--azul-marinho);
  border-color: #c3ccd8;
}

.btn--contorno:hover {
  border-color: var(--azul-marinho);
  background: var(--cinza-claro);
}

.btn--contorno-claro {
  background: transparent;
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn--contorno-claro:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--branco);
}

.btn--grande {
  min-height: 56px;
  padding: 16px 30px;
  font-size: var(--text-base);
}

.btn--bloco {
  width: 100%;
}

.btn__icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

/* Microcopy sob os CTAs */
.cta-microcopy {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--texto-secundario);
  max-width: 52ch;
}

.secao--escura .cta-microcopy,
.cta-final .cta-microcopy,
.hero .cta-microcopy {
  color: #c2ccd9;
}

/* Link com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--toque);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--azul-marinho);
  text-decoration: none;
}

.link-seta::after {
  content: "→";
  transition: transform var(--transicao);
}

.link-seta:hover {
  color: var(--laranja-texto);
  text-decoration: underline;
}

.link-seta:hover::after {
  transform: translateX(3px);
}

.link-seta[aria-disabled="true"] {
  color: var(--texto-secundario);
  cursor: default;
}

.link-seta[aria-disabled="true"]:hover {
  text-decoration: none;
}

.link-seta[aria-disabled="true"]:hover::after {
  transform: none;
}

/* -------------------------------------------------------------
   08. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--azul-marinho);
  color: var(--branco);
  isolation: isolate;
  overflow: hidden;
}

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

.hero__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* Overlay padrão (telas largas): escurece a esquerda, onde fica o texto */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      rgba(8, 23, 41, 0.95) 0%,
      rgba(8, 23, 41, 0.88) 40%,
      rgba(8, 23, 41, 0.5) 70%,
      rgba(8, 23, 41, 0.32) 100%
    ),
    linear-gradient(180deg, rgba(8, 23, 41, 0.6) 0%, rgba(8, 23, 41, 0.25) 45%);
}

/* Em telas estreitas o texto ocupa toda a largura: overlay uniforme e mais
   denso, para o contraste do título não depender do trecho da foto. */
@media (max-width: 899px) {
  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(8, 23, 41, 0.93) 0%,
      rgba(8, 23, 41, 0.9) 60%,
      rgba(8, 23, 41, 0.88) 100%
    );
  }
}

.hero__conteudo {
  position: relative;
  padding-block: clamp(48px, 8.5vw, 128px);
  max-width: 43rem;
}

.hero h1 {
  color: var(--branco);
  margin-bottom: var(--space-4);
}

.hero__proposta {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  font-weight: 700;
  color: var(--laranja-claro);
  margin-bottom: var(--space-4);
}

.hero__texto {
  color: #d9e0ea;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  max-width: 56ch;
}

.hero .acoes {
  margin-top: var(--space-6);
}

/* Selos abaixo do hero */
.hero__selos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: var(--space-7) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  list-style: none;
}

.hero__selo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: #dfe6ee;
}

.hero__selo svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--laranja);
}

@media (min-width: 640px) {
  .hero__selos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hero compacto — páginas internas.
   Mesma família visual do slider da Home, em tom mais contido. */
.hero--interno {
  border-bottom: 3px solid var(--laranja);
}

.hero--interno .hero__conteudo {
  padding-block: clamp(44px, 6.5vw, 92px);
  max-width: 44rem;
}

.hero--interno h1 {
  max-width: 20ch;
  font-size: clamp(1.875rem, 3.8vw, 3.125rem);
  margin-bottom: var(--space-4);
}

.hero--interno .hero__texto {
  max-width: 54ch;
}

.hero--interno .acoes {
  margin-top: var(--space-5);
}

/* Hero sem imagem — páginas utilitárias */
.hero--solido::after {
  background: radial-gradient(
    120% 120% at 85% 0%,
    rgba(224, 112, 0, 0.2) 0%,
    rgba(11, 31, 58, 0) 55%
  );
}

/* Ajustes pontuais de enquadramento por página */
.hero--foco-alto .hero__midia img {
  object-position: center 30%;
}

.hero--foco-baixo .hero__midia img {
  object-position: center 78%;
}

/* -------------------------------------------------------------
   09. BREADCRUMBS
   ------------------------------------------------------------- */
.breadcrumbs {
  background: var(--cinza-claro);
  border-bottom: 1px solid var(--borda);
  padding-block: 10px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--texto-secundario);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumbs li + li::before {
  content: "/";
  color: #7d8b9e;
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--texto-secundario);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumbs a:hover {
  color: var(--azul-marinho);
}

.breadcrumbs [aria-current="page"] {
  color: var(--azul-marinho);
  font-weight: 700;
}

/* -------------------------------------------------------------
   10. BARRA DE CONFIANÇA
   ------------------------------------------------------------- */
.barra-confianca {
  background: var(--azul-institucional);
  color: var(--branco);
  padding-block: var(--space-6);
}

.barra-confianca__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.barra-confianca__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.barra-confianca__item svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: var(--laranja);
  margin-top: 2px;
}

.barra-confianca__titulo {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--branco);
  margin-bottom: 2px;
}

.barra-confianca__texto {
  display: block;
  font-size: var(--text-sm);
  color: #b3bfcf;
  line-height: 1.45;
}

@media (min-width: 640px) {
  .barra-confianca__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .barra-confianca__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------
   11. CALCULADORA
   ------------------------------------------------------------- */
.calculadora {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 3vw, 36px);
}

.calculadora__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.calculadora__acoes {
  margin-top: var(--space-5);
}

.calculadora__resultado {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--cinza-claro);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--laranja);
  border-radius: var(--radius-sm);
}

.calculadora__resultado[hidden] {
  display: none;
}

.calculadora__resultado h3 {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.calculadora__metricas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}

.calculadora__metrica {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.calculadora__metrica dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-secundario);
  font-weight: 700;
  margin-bottom: 4px;
}

.calculadora__metrica dd {
  margin: 0;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--azul-marinho);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.calculadora__metrica dd small {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--texto-secundario);
  letter-spacing: 0;
}

@media (min-width: 640px) {
  .calculadora__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calculadora__metricas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Bloco de duas colunas: texto + calculadora */
.bloco-calculadora {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 1024px) {
  .bloco-calculadora {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

/* -------------------------------------------------------------
   12. CARDS
   ------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .cards--2,
  .cards--3,
  .cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

.card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transicao), transform var(--transicao),
    box-shadow var(--transicao);
}

.card:hover {
  border-color: #c3ccd8;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.card__midia {
  aspect-ratio: 16 / 10;
  background: var(--cinza-medio);
}

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

.card__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2.4vw, 28px);
}

.card__corpo h3 {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--borda);
}

.secao--escura .card__corpo h3 {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.card__corpo p {
  color: var(--texto-secundario);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.card__corpo .link-seta {
  margin-top: auto;
  padding-top: var(--space-3);
}

.card__icone {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 112, 0, 0.1);
  border-radius: var(--radius-sm);
}

.card__icone svg {
  width: 22px;
  height: 22px;
  fill: var(--laranja-texto);
}

.secao--escura .card__icone {
  background: rgba(224, 112, 0, 0.18);
}

.secao--escura .card__icone svg {
  fill: var(--laranja);
}

.card__lista {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.card__lista li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: var(--text-sm);
  color: var(--texto-secundario);
}

.card__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--laranja);
}

/* Cards em fundo escuro */
.secao--escura .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}

.secao--escura .card:hover {
  border-color: rgba(224, 112, 0, 0.5);
  box-shadow: none;
}

.secao--escura .card__corpo p,
.secao--escura .card__lista li {
  color: #b3bfcf;
}

/* Card de artigo */
.card--artigo .card__meta {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--laranja-texto);
  margin-bottom: var(--space-2);
}

/* Card de projeto */
.card--projeto .card__midia {
  aspect-ratio: 4 / 3;
}

.card--placeholder {
  border-style: dashed;
  background: var(--cinza-claro);
}

.card--placeholder:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--borda);
}

/* -------------------------------------------------------------
   13. KITS SOLARES
   ------------------------------------------------------------- */
.kits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 900px) {
  .kits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kit {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  padding: clamp(22px, 2.6vw, 32px);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.kit:hover {
  border-color: #c3ccd8;
  box-shadow: var(--shadow-sm);
}

.kit--destaque {
  background: var(--azul-marinho);
  border-color: var(--azul-marinho);
  color: #cfd7e2;
}

.kit--destaque:hover {
  border-color: var(--laranja);
  box-shadow: var(--shadow-md);
}

.kit--destaque h3 {
  color: var(--branco);
}

.kit__etiqueta {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(224, 112, 0, 0.12);
  color: var(--laranja-texto);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kit--destaque .kit__etiqueta {
  background: var(--laranja);
  color: var(--azul-marinho);
}

.kit__potencia {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--texto-secundario);
  margin-bottom: var(--space-4);
}

.kit--destaque .kit__potencia {
  color: #b3bfcf;
}

.kit__preco {
  margin-bottom: var(--space-2);
}

.kit__preco-rotulo {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--texto-secundario);
}

.kit--destaque .kit__preco-rotulo {
  color: #b3bfcf;
}

.kit__preco-valor {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--azul-marinho);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.kit--destaque .kit__preco-valor {
  color: var(--laranja-claro);
}

.kit__referencia {
  font-size: var(--text-sm);
  color: var(--texto-secundario);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--borda);
}

.kit--destaque .kit__referencia {
  color: #b3bfcf;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.kit__itens {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.kit__itens li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: var(--text-sm);
  color: var(--grafite);
  line-height: 1.5;
}

.kit--destaque .kit__itens li {
  color: #cfd7e2;
}

.kit__itens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--laranja);
  border-bottom: 2px solid var(--laranja);
  transform: rotate(-45deg);
}

.kit .btn {
  margin-top: auto;
  width: 100%;
}

.kit__aviso {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--texto-secundario);
  line-height: 1.5;
}

.kit--destaque .kit__aviso {
  color: #a2afc0;
}

/* Aviso geral sobre valores */
.aviso-valores {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--cinza-claro);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--laranja);
  line-height: 1.65;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--texto-secundario);
  max-width: 78ch;
}

.secao--escura .aviso-valores {
  background: rgba(255, 255, 255, 0.06);
  color: #b3bfcf;
}

/* -------------------------------------------------------------
   14. TABELA COMPARATIVA
   ------------------------------------------------------------- */
.tabela-wrapper {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  background: var(--branco);
  -webkit-overflow-scrolling: touch;
}

/* A região rolável recebe foco para permitir rolagem por teclado */
.tabela-wrapper:focus-visible {
  outline: 3px solid var(--azul-marinho);
  outline-offset: 2px;
}

.tabela {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.tabela caption {
  padding: var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--texto-secundario);
  border-bottom: 1px solid var(--borda);
}

.tabela th,
.tabela td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

.tabela thead th {
  background: var(--cinza-claro);
  color: var(--azul-marinho);
  font-weight: 700;
  white-space: nowrap;
}

.tabela tbody th {
  font-weight: 700;
  color: var(--azul-marinho);
  white-space: nowrap;
}

/* A coluna de rótulos acompanha a rolagem horizontal, para a linha
   nunca perder a referência em telas estreitas. */
@media (max-width: 719px) {
  .tabela thead th:first-child,
  .tabela tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--branco);
    box-shadow: 1px 0 0 var(--borda);
  }

  .tabela thead th:first-child {
    background: var(--cinza-claro);
  }
}

.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela td {
  color: var(--texto-secundario);
}

.tabela-dica {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--texto-secundario);
}

@media (min-width: 720px) {
  .tabela-dica {
    display: none;
  }
}

/* -------------------------------------------------------------
   15. PROCESSO EM ETAPAS
   ------------------------------------------------------------- */
.processo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .processo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .processo {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.processo__item {
  padding: var(--space-5);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--laranja);
  border-radius: var(--radius-sm);
}

.secao--clara .processo__item {
  background: var(--branco);
}

.secao--escura .processo__item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  border-top-color: var(--laranja);
}

.processo__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--azul-marinho);
  color: var(--branco);
  font-size: var(--text-sm);
  font-weight: 700;
}

.secao--escura .processo__numero {
  background: var(--laranja);
  color: var(--azul-marinho);
}

.processo__item h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.processo__item p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--texto-secundario);
  line-height: 1.55;
}

.secao--escura .processo__item p {
  color: #b3bfcf;
}

.processo__ilustracao {
  margin: clamp(28px, 4vw, 48px) 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--borda);
}

.secao--escura .processo__ilustracao {
  border-color: rgba(255, 255, 255, 0.16);
}

.processo__ilustracao img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------------
   16. BLOCOS DE CONTEÚDO (MÍDIA + TEXTO)
   ------------------------------------------------------------- */
.bloco-midia {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .bloco-midia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bloco-midia--invertido .bloco-midia__figura {
    order: 2;
  }
}

.bloco-midia__figura {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--borda);
  background: var(--cinza-medio);
}

.secao--escura .bloco-midia__figura {
  border-color: rgba(255, 255, 255, 0.16);
}

.bloco-midia__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.bloco-midia__texto > *:last-child {
  margin-bottom: 0;
}

/* Lista de verificação */
.lista-check {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.lista-check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.55;
}

.lista-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--laranja);
  border-bottom: 2px solid var(--laranja);
  transform: rotate(-45deg);
}

/* Lista numerada com o mesmo tratamento visual */
.lista-passos {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  counter-reset: passo;
}

.lista-passos li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  line-height: 1.55;
  counter-increment: passo;
}

.lista-passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--azul-marinho);
  color: var(--branco);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* Grade de dados técnicos */
.dados-tecnicos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
}

@media (min-width: 640px) {
  .dados-tecnicos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dados-tecnicos div {
  padding: var(--space-4);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--laranja);
  border-radius: var(--radius-sm);
}

.dados-tecnicos dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--texto-secundario);
  margin-bottom: 4px;
}

.dados-tecnicos dd {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--azul-marinho);
  letter-spacing: -0.02em;
}

/* Caixa de fórmula */
.caixa-formula {
  padding: var(--space-5);
  background: var(--azul-marinho);
  color: #cfd7e2;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.caixa-formula strong {
  color: var(--laranja-claro);
}

.caixa-formula code {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  color: var(--branco);
  overflow-x: auto;
}

/* Sumário da página pilar */
.sumario {
  padding: var(--space-5);
  background: var(--cinza-claro);
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.sumario h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.sumario ol {
  columns: 1;
  margin: 0;
  padding-left: 20px;
  font-size: var(--text-sm);
}

.sumario li {
  margin-bottom: 4px;
  break-inside: avoid;
}

.sumario a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--azul-marinho);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sumario a:hover {
  color: var(--laranja-texto);
}

@media (min-width: 700px) {
  .sumario ol {
    columns: 2;
    column-gap: var(--space-6);
  }
}

/* Artigo longo */
.artigo > section {
  padding-block: clamp(36px, 4.5vw, 60px);
  border-top: 1px solid var(--borda);
}

.artigo > section > h2 {
  position: relative;
  padding-top: var(--space-3);
}

.artigo > section > h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--laranja);
}

.artigo > section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.artigo h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
}

.artigo h3 {
  margin-top: var(--space-6);
}

.artigo p,
.artigo li {
  max-width: 72ch;
}

.artigo ul,
.artigo ol {
  margin: 0 0 var(--space-4);
  padding-left: 22px;
}

.artigo .lista-check,
.artigo .lista-passos {
  padding-left: 0;
}

.artigo li {
  margin-bottom: 8px;
}

/* -------------------------------------------------------------
   17. FINANCIAMENTO
   ------------------------------------------------------------- */
.financiamento {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .financiamento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

.financiamento__condicoes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.financiamento__condicoes li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: #b3bfcf;
}

.financiamento__condicoes li:first-child {
  padding-top: 0;
}

.financiamento__condicoes li:last-child {
  border-bottom: 0;
}

.financiamento__condicoes strong {
  display: block;
  color: var(--branco);
  font-size: var(--text-base);
  margin-bottom: 3px;
}

/* -------------------------------------------------------------
   18. REGIÕES ATENDIDAS
   ------------------------------------------------------------- */
.regioes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .regioes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .regioes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.regioes__grupo h3 {
  font-size: var(--text-base);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--laranja);
}

.regioes__grupo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--texto-secundario);
}

.regioes__grupo li {
  padding: 5px 0;
  line-height: 1.45;
}

/* -------------------------------------------------------------
   19. FAQ
   ------------------------------------------------------------- */
.faq {
  max-width: 900px;
  border-top: 1px solid var(--borda);
}

.faq__item {
  border-bottom: 1px solid var(--borda);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-5) 4px;
  border-radius: var(--radius-sm);
  min-height: var(--toque);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--azul-marinho);
  list-style: none;
}

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

.faq__item summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-right: 2px solid var(--laranja-texto);
  border-bottom: 2px solid var(--laranja-texto);
  transform: rotate(45deg);
  transition: transform var(--transicao);
}

.faq__item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 10px;
}

.faq__item summary:hover {
  color: var(--laranja-texto);
  background: var(--cinza-claro);
}

.faq__item[open] summary {
  color: var(--laranja-texto);
}

.faq__resposta {
  padding: 0 4px var(--space-5);
  max-width: 76ch;
}

.faq__resposta p {
  margin: 0;
  color: var(--texto-secundario);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* -------------------------------------------------------------
   20. FORMULÁRIOS
   ------------------------------------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo--largo {
  grid-column: 1 / -1;
}

.campo label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--azul-marinho);
}

.campo__dica {
  font-size: var(--text-xs);
  color: var(--texto-secundario);
  font-weight: 400;
  line-height: 1.5;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--branco);
  border: 1px solid var(--borda-campo);
  border-radius: var(--radius-sm);
  color: var(--grafite);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

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

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--azul-marinho);
}

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--erro);
  border-width: 2px;
}

/* O erro não é comunicado só pela cor: há ícone e texto descritivo */
.campo__erro {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--erro);
  line-height: 1.5;
}

.campo__erro:not(:empty) {
  padding-top: 2px;
}

.campo__erro:not(:empty)::before {
  content: "⚠ ";
}

.campo input[type="file"] {
  padding: 10px;
  background: var(--cinza-claro);
  cursor: pointer;
}

/* Consentimento */
.consentimento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  grid-column: 1 / -1;
}

.consentimento input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 10px 0 0;
  flex: none;
  accent-color: var(--azul-marinho);
  cursor: pointer;
}

.consentimento label {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--texto-secundario);
  line-height: 1.55;
  padding-block: 8px;
}

.consentimento a {
  color: var(--azul-marinho);
  font-weight: 700;
}

/* Formulário */
.formulario {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  padding: clamp(20px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
}

.formulario__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .formulario__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.formulario__rodape {
  margin-top: var(--space-6);
}

/* Em telas pequenas o botão flutuante do WhatsApp fica no canto inferior
   direito. Esta folga impede que ele cubra o botão de envio. */
@media (max-width: 639px) {
  .formulario__rodape {
    padding-bottom: 72px;
  }
}

/* Mensagens de feedback (aria-live) */
.mensagem {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.mensagem:empty {
  display: none;
  padding: 0;
  margin: 0;
}

.mensagem--sucesso {
  background: rgba(46, 125, 50, 0.09);
  border-left: 3px solid var(--sucesso);
  color: #1c5220;
}

.mensagem--erro {
  background: rgba(179, 38, 30, 0.08);
  border-left: 3px solid var(--erro);
  color: #8c1d17;
}

/* Aviso de protótipo */
.aviso-prototipo {
  padding: var(--space-4) var(--space-5);
  background: var(--cinza-claro);
  border: 1px dashed #b9c2cd;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--texto-secundario);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.aviso-prototipo strong {
  color: var(--grafite);
}

/* -------------------------------------------------------------
   21. CTA FINAL
   ------------------------------------------------------------- */
.cta-final {
  position: relative;
  background: var(--azul-marinho);
  color: #cfd7e2;
  isolation: isolate;
  overflow: hidden;
}

.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    100% 130% at 88% 10%,
    rgba(224, 112, 0, 0.22) 0%,
    rgba(11, 31, 58, 0) 58%
  );
}

.cta-final__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-final__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(32px, 5vw, 72px);
  }
}

.cta-final h2 {
  color: var(--branco);
  margin-bottom: var(--space-4);
}

.cta-final p {
  color: #c2ccd9;
  max-width: 58ch;
}

.cta-final .acoes {
  margin-top: var(--space-5);
}

.cta-final__contatos {
  list-style: none;
  margin: 0;
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.cta-final__contatos li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #c2ccd9;
}

.cta-final__contatos li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cta-final__contatos li:first-child {
  padding-top: 0;
}

.cta-final__contatos strong {
  display: block;
  color: #a8b5c6;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 3px;
}

.cta-final__contatos a {
  overflow-wrap: anywhere;
  color: var(--branco);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
}

.cta-final__contatos a:hover {
  color: var(--laranja-claro);
}

/* -------------------------------------------------------------
   22. RODAPÉ
   ------------------------------------------------------------- */
.rodape {
  background: var(--azul-profundo);
  color: #a5b2c3;
  font-size: var(--text-sm);
  padding-block: clamp(48px, 6vw, 80px) var(--space-6);
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
  .rodape__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rodape__grade {
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

.rodape__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* A logo tem elementos escuros. No rodapé escuro ela fica sobre uma placa
   clara, garantindo contraste independentemente das cores do arquivo. */
.footer-logo {
  background: var(--branco);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.footer-logo img {
  width: min(100%, 240px);
  height: auto;
  object-fit: contain;
}

.rodape__sobre {
  margin: 0 0 var(--space-2);
  max-width: 40ch;
  line-height: 1.6;
}

.rodape__assinatura {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--laranja-claro);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rodape h3 {
  color: var(--branco);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.rodape ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rodape li {
  margin-bottom: 2px;
  line-height: 1.5;
}

.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  color: #a5b2c3;
  text-decoration: none;
  transition: color var(--transicao);
}

.rodape a:hover {
  color: var(--laranja-claro);
  text-decoration: underline;
}

.rodape__contato li {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.rodape__aviso {
  padding-block: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-xs);
  line-height: 1.65;
  color: #8e9caf;
  max-width: 100ch;
}

.rodape__base {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  font-size: var(--text-xs);
  color: #8e9caf;
}

.rodape__base-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.rodape__base p {
  margin: 0;
}

@media (min-width: 700px) {
  .rodape__base {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* -------------------------------------------------------------
   23. BOTÃO FLUTUANTE DO WHATSAPP
   ------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-height: 52px;
  min-width: 52px;
  justify-content: center;
  background: var(--whatsapp);
  color: var(--branco);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--transicao), transform var(--transicao);
}

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

.whatsapp-float svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

.whatsapp-float__texto {
  display: none;
}

@media (min-width: 640px) {
  .whatsapp-float {
    right: 24px;
    bottom: 24px;
  }

  .whatsapp-float__texto {
    display: inline;
  }
}

/* -------------------------------------------------------------
   24. PÁGINAS DE TEXTO LEGAL
   ------------------------------------------------------------- */
.pagina-legal h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  margin-top: var(--space-7);
}

.pagina-legal h2:first-of-type {
  margin-top: 0;
}

.pagina-legal p,
.pagina-legal li {
  max-width: 72ch;
  color: var(--grafite);
}

.pagina-legal ul {
  padding-left: 22px;
  margin-bottom: var(--space-4);
}

.pagina-legal li {
  margin-bottom: 8px;
}

.pagina-legal a {
  color: var(--azul-marinho);
  font-weight: 600;
  text-underline-offset: 2px;
}

/* -------------------------------------------------------------
   25. MOVIMENTO E IMPRESSÃO
   ------------------------------------------------------------- */
/* -------------------------------------------------------------
   HERO SLIDER — leve, acessível e sem dependências
   ------------------------------------------------------------- */
.hero-slider {
  position: relative;
  padding: 0;
  min-height: clamp(540px, 72vh, 760px);
  overflow: hidden;
  background: var(--azul-profundo);
  color: var(--branco);
}

.hero-slider__viewport,
.hero-slide {
  min-height: inherit;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 23, 41, 0.96) 0%, rgba(11, 31, 58, 0.84) 48%, rgba(11, 31, 58, 0.28) 100%);
}

.hero-slide__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-slide__conteudo {
  position: relative;
  z-index: 2;
  padding-block: clamp(96px, 12vw, 150px) 130px;
}

.hero-slide__conteudo h1,
.hero-slide__conteudo h2 {
  max-width: 16ch;
  margin: 0 0 var(--space-5);
  color: var(--branco);
  font-size: clamp(2.35rem, 5.2vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero-slide__lead {
  max-width: 58ch;
  margin: 0 0 var(--space-6);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

/* ---------- Transição de entrada do conteúdo ----------
   O conteúdo entra escalonado, deslocado no sentido da navegação.
   Cada elemento anima em 300ms; o que escalona é o atraso de início,
   não a duração. A classe .js-pronto é adicionada pelo JavaScript
   depois que o primeiro slide já pintou: sem JS, ou antes dele
   rodar, todo o conteúdo permanece visível e imóvel. */
.hero-slider.js-pronto .hero-slide__conteudo > * {
  opacity: 0;
  transform: translate3d(var(--slide-entrada, 32px), 0, 0);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

/* Ao voltar, o conteúdo entra pelo lado oposto. */
.hero-slider.js-pronto[data-direcao="anterior"] .hero-slide__conteudo > * {
  --slide-entrada: -32px;
}

.hero-slider.js-pronto .hero-slide.is-active .hero-slide__conteudo > * {
  opacity: 1;
  transform: none;
}

/* Escalonamento: rótulo, título, texto, botões e microcopy. */
.hero-slider.js-pronto .hero-slide.is-active .hero-slide__conteudo > *:nth-child(1) { transition-delay: 40ms; }
.hero-slider.js-pronto .hero-slide.is-active .hero-slide__conteudo > *:nth-child(2) { transition-delay: 100ms; }
.hero-slider.js-pronto .hero-slide.is-active .hero-slide__conteudo > *:nth-child(3) { transition-delay: 160ms; }
.hero-slider.js-pronto .hero-slide.is-active .hero-slide__conteudo > *:nth-child(4) { transition-delay: 220ms; }
.hero-slider.js-pronto .hero-slide.is-active .hero-slide__conteudo > *:nth-child(5) { transition-delay: 270ms; }

/* Movimento reduzido: mantém apenas o esmaecimento, sem deslocamento
   nem escalonamento. */
@media (prefers-reduced-motion: reduce) {
  .hero-slider.js-pronto .hero-slide__conteudo > * {
    transform: none;
    transition: opacity 200ms linear;
  }

  .hero-slider.js-pronto .hero-slide.is-active .hero-slide__conteudo > * {
    transition-delay: 0ms;
  }
}

/* Em telas estreitas o deslocamento é menor, para não parecer solto. */
@media (max-width: 767px) {
  .hero-slider.js-pronto .hero-slide__conteudo > * {
    --slide-entrada: 20px;
  }

  .hero-slider.js-pronto[data-direcao="anterior"] .hero-slide__conteudo > * {
    --slide-entrada: -20px;
  }
}

/* ---------- Slide institucional com pessoa em quadro ----------
   A pessoa fica à direita e o texto à esquerda. O overlay é mais
   forte no lado do texto e alivia sobre o rosto, para não escurecer
   a pessoa. Usado pelo slide com a classe .hero-slide--equipe. */
.hero-slide--equipe .hero-slide__imagem {
  object-position: center center;
}

.hero-slide--equipe::after {
  background: linear-gradient(
    90deg,
    rgba(8, 23, 41, 0.96) 0%,
    rgba(11, 31, 58, 0.82) 42%,
    rgba(11, 31, 58, 0.18) 72%,
    rgba(11, 31, 58, 0.08) 100%
  );
}

/* Abaixo de 900px o texto ocupa a largura toda. O recorte desloca
   para 64%, mantendo rosto e tronco visíveis, e o escurecimento passa
   a ser vertical: leve no topo, onde fica o rosto, e forte na base,
   onde fica o texto. O limite é 899px para encontrar exatamente a
   regra de largura de texto que começa em 900px. */
@media (max-width: 899px) {
  .hero-slide--equipe .hero-slide__imagem {
    object-position: 64% center;
  }

  /* Curva com platô claro no topo. A versão linear de 0,25 a 0,72
     deixava o rosto com brilho médio de 81 (apagado). Segurando o
     escurecimento em 0,28 até 34% da altura, o rosto sobe para 109 e
     a faixa do texto mantém os mesmos 85% de opacidade média —
     contraste de 6,2:1 para o texto branco. */
  .hero-slide--equipe::after {
    background: linear-gradient(
      180deg,
      rgba(8, 23, 41, 0.12) 0%,
      rgba(8, 23, 41, 0.28) 34%,
      rgba(8, 23, 41, 0.8) 62%,
      rgba(8, 23, 41, 0.98) 100%
    );
  }

  /* O conteúdo desce para a base, deixando o rosto livre no topo. */
  .hero-slide--equipe .hero-slide__conteudo {
    align-self: end;
    padding-block: clamp(80px, 14vw, 120px) 128px;
  }
}

/* Largura do texto contida, para não avançar sobre a pessoa. */
@media (min-width: 900px) {
  .hero-slide--equipe .hero-slide__conteudo h1,
  .hero-slide--equipe .hero-slide__conteudo h2,
  .hero-slide--equipe .hero-slide__lead,
  .hero-slide--equipe .hero-slide__conteudo .cta-microcopy {
    max-width: 30ch;
  }

  .hero-slide--equipe .hero-slide__conteudo .acoes {
    max-width: 34rem;
  }
}

.hero-slider__controles {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 30px;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero-slider__seta,
.hero-slider__pausa {
  border: 1px solid rgba(255, 255, 255, 0.72);
  color: var(--branco);
  background: rgba(8, 23, 41, 0.78);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

.hero-slider__seta {
  width: var(--toque);
  height: var(--toque);
  border-radius: 50%;
  font-size: 1.25rem;
}

.hero-slider__dots {
  display: flex;
  align-items: center;
  gap: 0;
}

/* O ponto visível continua com 12px; a área de toque tem 44px.
   background-clip: content-box mantém o desenho pequeno dentro
   do alvo grande, sem caixa visível ao redor. */
.hero-slider__dot {
  width: var(--toque);
  height: var(--toque);
  padding: 16px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  background-clip: content-box;
  box-shadow: inset 0 0 0 16px transparent;
}

.hero-slider__dot:hover {
  background: rgba(255, 255, 255, 0.85);
  background-clip: content-box;
}

.hero-slider__dot.is-active,
.hero-slider__dot.is-active:hover {
  background: var(--laranja-claro);
  background-clip: content-box;
}

.hero-slider__pausa {
  min-height: var(--toque);
  margin-left: var(--space-2);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}

.hero-slider__seta:hover,
.hero-slider__pausa:hover {
  border-color: var(--branco);
  background: var(--azul-marinho);
}

@media (max-width: 767px) {
  .hero-slider { min-height: min(620px, 86vh); }
  .hero-slide::after { background: linear-gradient(180deg, rgba(8, 23, 41, 0.73), rgba(8, 23, 41, 0.98) 72%); }
  .hero-slide__imagem { object-position: 58% center; }
  .hero-slide__conteudo { align-self: end; padding-block: 110px 128px; }
  .hero-slide__conteudo h1,
  .hero-slide__conteudo h2 { font-size: clamp(2.1rem, 11vw, 3.25rem); }
  .hero-slide__conteudo .acoes { align-items: stretch; }
  .hero-slide__conteudo .btn { width: 100%; }
  /* O botão flutuante do WhatsApp ocupa o canto inferior direito
     (52px + 16px de margem). Sem esta folga, o botão de pausa fica
     embaixo dele e não pode ser tocado. */
  .hero-slider__controles { bottom: 22px; padding-right: 78px; }
  .hero-slider__pausa { margin-left: auto; font-size: 0; width: var(--toque); padding: 0; }
  .hero-slider__pausa::after { content: "II"; font-size: var(--text-sm); }
  .hero-slider__pausa[aria-pressed="true"]::after { content: "▶"; }
}

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

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

  .card:hover,
  .whatsapp-float:hover,
  .btn:active {
    transform: none;
  }
}

@media print {
  .header,
  .menu-mobile,
  .whatsapp-float,
  .cta-final,
  .skip-link,
  .breadcrumbs {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .hero::after,
  .hero__midia {
    display: none;
  }

  .hero {
    background: none;
    color: #000;
  }

  .hero h1,
  .hero__proposta,
  .hero__texto,
  .hero .eyebrow {
    color: #000;
  }

  .rodape {
    background: none;
    color: #000;
  }

  .faq__item[open] .faq__resposta,
  .faq__resposta {
    display: block;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
  }
}