/* ===================================================================== */
/* TOKENS GLOBAIS: cores, tipografia, espaçamento e radius reutilizáveis */
:root {
  /* Cores principais da marca (deep tech) */
  --color-brand-green: #005030;
  --color-brand-yellow: #FFD700;
  --color-brand-blue: #1565C0;
  --color-white: #FFFFFF;
  --color-black: #0F1B14;

  /* Tema padrão (dark green) */
  --color-bg: #005030;
  --color-surface: #0F5B3B;
  --color-text: #FFFFFF;
  --color-muted: rgba(255, 255, 255, 0.72);
  --color-on-accent: #0F1B14;

  /* Header e footer */
  --color-header-bg: var(--color-brand-green);
  --color-footer-bg: var(--color-brand-green);
  --color-header-border: rgba(255, 255, 255, 0.16);
  --color-footer-border: rgba(255, 255, 255, 0.16);

  /* Links e interações */
  --color-link: #FFFFFF;
  --color-link-hover: var(--color-brand-yellow);
  --color-link-hover-bg: rgba(255, 215, 0, 0.15);
  --color-footer-link: rgba(255, 255, 255, 0.82);
  --color-footer-link-hover: var(--color-brand-yellow);

  /* Botoes principais */
  --color-primary-bg: var(--color-brand-yellow);
  --color-primary-text: var(--color-black);
  --color-primary-bg-hover: #F5C800;

  /* Borda e controles */
  --color-border: rgba(255, 255, 255, 0.16);
  --color-toggle-border: rgba(255, 255, 255, 0.35);

  /* Tipografia base: Zilla Slab para títulos, Inter para corpo */
  --font-base: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
  --font-heading: 'Zilla Slab', 'Roboto Slab', 'Rockwell', serif;

  /* Escala tipográfica (ajuste fino por página se necessário) */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  /* Espacamentos base */
  --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;

  /* Radius e sombras */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);

  /* Limites de layout */
  --container-max: 1200px;
  /* Espaço lateral padrão do layout (5% em telas pequenas, até 48px em telas grandes) */
  /* Garante margem confortável em mobile para conteúdo não colar nas bordas */
  --page-gutter: clamp(16px, 5vw, 48px);
}

/* ===================================================================== */
/* TEMA CLARO: aplicado apenas quando o usuário escolher */
[data-theme="light"] {
  /* Cores de fundo e texto: verde claro sutil para identidade da marca */
  --color-bg: #FFFFFF;
  --color-surface: #F0F7F4;
  --color-text: #0F1B14;
  --color-muted: #5C6B63;
  --color-on-accent: #FFFFFF;

  /* Header e footer: verde clarinho para conexão com a marca */
  --color-header-bg: #E8F5E9;
  --color-footer-bg: #E8F5E9;
  --color-header-border: rgba(0, 80, 48, 0.08);
  --color-footer-border: rgba(0, 80, 48, 0.08);

  /* Links e interações */
  --color-link: #0F1B14;
  --color-link-hover: var(--color-brand-blue);
  --color-link-hover-bg: rgba(21, 101, 192, 0.08);
  --color-footer-link: #5C6B63;
  --color-footer-link-hover: var(--color-brand-blue);

  /* Botoes primarios: azul para destaque visual */
  --color-primary-bg: var(--color-brand-blue);
  --color-primary-text: #FFFFFF;
  --color-primary-bg-hover: #0D47A1;

  /* Botoes secundarios: verde da marca */
  --color-secondary-bg: transparent;
  --color-secondary-text: var(--color-brand-green);
  --color-secondary-border: var(--color-brand-green);
  --color-secondary-bg-hover: rgba(0, 80, 48, 0.08);

  /* Borda e controles */
  --color-border: rgba(0, 0, 0, 0.08);
  --color-toggle-border: rgba(0, 0, 0, 0.2);
}

/* ===================================================================== */
/* RESET LEVE: padroniza box model e remove margens padrão */
html {
  /* Ativa scroll suave para toda a página */
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  /* Aplica box-sizing consistente em todos os elementos */
  box-sizing: border-box;
}

/* ===================================================================== */
/* BASE GLOBAL: tipografia, cores e comportamento geral da página */
body {
  /* Remove margem padrão do navegador */
  margin: 0;
  /* Define cor de fundo padrão */
  background: var(--color-bg);
  /* Define cor de texto padrão */
  color: var(--color-text);
  /* Define fonte base do site */
  font-family: var(--font-base);
  /* Define altura de linha para leitura confortavel */
  line-height: 1.6;
  /* Suaviza transição de cores entre temas */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ===================================================================== */
/* TIPOGRAFIA: tamanhos base para textos e títulos */
h1,
h2,
h3,
h4,
h5,
h6 {
  /* Usa fonte serifada para títulos */
  font-family: var(--font-heading);
}

h1 {
  /* Define tamanho de título principal */
  font-size: var(--font-size-2xl);
  /* Ajusta espaçamento inferior */
  margin: 0 0 var(--space-4) 0;
}

h2 {
  /* Define tamanho de subtítulo */
  font-size: var(--font-size-xl);
  /* Ajusta espaçamento inferior */
  margin: 0 0 var(--space-3) 0;
}

p {
  /* Remove margem superior padrão */
  margin: 0 0 var(--space-3) 0;
}

/* ===================================================================== */
/* LINKS E FOCO: acessibilidade com destaque visível */
a {
  /* Mantem cor herdada para links simples */
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  /* Aplica contorno acessível com cor de destaque */
  outline: 3px solid var(--color-brand-yellow);
  /* Afasta o contorno do elemento */
  outline-offset: 2px;
}

/* ===================================================================== */
/* UTILITÁRIOS DE ACESSIBILIDADE: link de pulo e texto oculto */
.skip-link {
  /* Posiciona o link fora da tela por padrão */
  position: absolute;
  /* Mantem o link fora do fluxo visual */
  left: -999px;
  /* Define cor de fundo para contraste */
  background: var(--color-brand-yellow);
  /* Define cor do texto */
  color: var(--color-on-accent);
  /* Define padding do link */
  padding: var(--space-2) var(--space-3);
  /* Define radius para leitura */
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  /* Traz o link para a tela quando focado */
  left: var(--space-4);
  /* Posiciona no topo para acesso rápido */
  top: var(--space-4);
}

.sr-only {
  /* Esconde visualmente mantendo acessibilidade */
  position: absolute;
  /* Reduz dimensões para não ocupar espaço */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ===================================================================== */
/* CONTAINER: largura máxima e padding lateral consistente */
/* IMPORTANTE: Usa !important para garantir margens em todas as resoluções */
/* Issue #68: Conteúdo não pode ficar colado nas bordas da tela */
.container {
  /* Define largura máxima */
  max-width: var(--container-max);
  /* Centraliza o conteúdo */
  margin: 0 auto;
  /* Define padding lateral forçado (5% mínimo para margens seguras) */
  padding-left: max(16px, 5vw) !important;
  padding-right: max(16px, 5vw) !important;
  /* Garante que o padding seja incluído na largura */
  box-sizing: border-box;
}

/* ===================================================================== */
/* MAIN: espaço padrão para conteúdo principal */
.site-main {
  /* Define espaçamento vertical (não zera padding lateral do container) */
  padding-block: var(--space-7);
}

/* ===================================================================== */
/* UTILITÁRIOS: alinhamento e espaçamento básicos */
.text-center {
  /* Centraliza o texto */
  text-align: center;
}

.mt-4 {
  /* Margem superior media */
  margin-top: var(--space-4);
}

.mb-4 {
  /* Margem inferior media */
  margin-bottom: var(--space-4);
}

.py-6 {
  /* Padding vertical maior (não zera padding lateral do container) */
  padding-block: var(--space-6);
}

/* ===================================================================== */
/* HEADER E FOOTER: base institucional compartilhada */
.site-header {
  /* Define fundo do header conforme tema */
  background: var(--color-header-bg);
  /* Define cor de texto padrão no header */
  color: var(--color-text);
  /* Adiciona linha sutil na base */
  border-bottom: 1px solid var(--color-header-border);
}

.header-inner {
  /* Alinha itens em linha */
  display: flex;
  /* Centraliza verticalmente */
  align-items: center;
  /* Distribui brand e switcher */
  justify-content: space-between;
  /* Define altura mínima do cabeçalho */
  min-height: 72px;
  /* Define padding vertical (não zera padding lateral do container) */
  padding-block: var(--space-3);
}

.brand {
  /* Remove sublinhado padrão */
  text-decoration: none;
  /* Garante alinhamento com logo */
  display: inline-flex;
  /* Alinha o logo ao centro */
  align-items: center;
  /* Define espaço entre logo e texto se houver */
  gap: var(--space-2);
}

.brand-logo {
  /* Define altura padrão do logo */
  height: 44px;
  /* Mantem proporcao correta */
  width: 44px;
  /* Garante proporcao sem distorcer */
  object-fit: contain;
  /* Aplica halo branco no tema escuro */
  background: var(--color-white);
  /* Define formato circular */
  border-radius: 50%;
  /* Cria respiro ao redor da logo */
  padding: 4px;
  /* Garante alinhamento adequado */
  display: inline-block;
}

[data-theme="light"] .brand-logo {
  /* Remove halo no tema claro */
  background: transparent;
  /* Remove padding para alinhar ao fundo claro */
  padding: 0;
}

.switcher {
  /* Alinha links em linha */
  display: flex;
  /* Define espaçamento entre links */
  gap: var(--space-4);
  /* Permite quebra de linha em telas menores */
  flex-wrap: wrap;
  /* Remove padding padrão de nav */
  padding: 0;
  /* Remove margem padrão de nav */
  margin: 0;
}

.header-actions {
  /* Alinha switcher e toggle em linha */
  display: flex;
  /* Centraliza verticalmente */
  align-items: center;
  /* Define espaçamento entre elementos */
  gap: var(--space-3);
}

.theme-toggle {
  /* Define estilo simples para botão de tema */
  background: transparent;
  /* Define borda sutil */
  border: 1px solid var(--color-toggle-border);
  /* Define cor do texto */
  color: inherit;
  /* Define padding para área clicável */
  padding: var(--space-1) var(--space-3);
  /* Define radius para o botão */
  border-radius: 999px;
  /* Define fonte e tamanho */
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  /* Define cursor interativo */
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  /* Destaca o botão com cor da marca */
  color: var(--color-link-hover);
  /* Adiciona fundo sutil */
  background: var(--color-link-hover-bg);
  /* Ajusta borda para reforcar foco */
  border-color: var(--color-link-hover);
}

.theme-icon {
  /* Define tamanho dos ícones */
  width: 18px;
  height: 18px;
  /* Usa a cor atual do texto */
  fill: currentColor;
  /* Esconde por padrão */
  display: none;
}

.theme-icon-moon {
  /* Exibe o ícone de lua no tema escuro */
  display: inline-block;
}

[data-theme="light"] .theme-icon-moon {
  /* Esconde a lua no tema claro */
  display: none;
}

[data-theme="light"] .theme-icon-sun {
  /* Exibe o sol no tema claro */
  display: inline-block;
}

.switcher-link {
  /* Remove sublinhado do link */
  text-decoration: none;
  /* Define cor base do link */
  color: var(--color-link);
  /* Define peso de fonte para destaque */
  font-weight: 600;
  /* Define padding para área clicável maior */
  padding: var(--space-1) var(--space-2);
  /* Define radius para hover */
  border-radius: var(--radius-sm);
}

.switcher-link:hover,
.switcher-link:focus-visible {
  /* Destaca o link com cor da marca */
  color: var(--color-link-hover);
  /* Adiciona fundo sutil no hover */
  background: var(--color-link-hover-bg);
}

/* ===================================================================== */
/* SUBMENU LOCAL: navegação interna da página de internet */
.page-subnav {
  /* Usa fundo sutil para diferenciar do header */
  background: rgba(0, 0, 0, 0.18);
  /* Adiciona linha inferior para separar do conteúdo */
  border-bottom: 1px solid var(--color-header-border);
}

.subnav-inner {
  /* Alinha links em linha */
  display: flex;
  /* Centraliza verticalmente */
  align-items: center;
  /* Mantém links alinhados à esquerda */
  justify-content: flex-start;
  /* Define espaçamento interno */
  gap: var(--space-2);
  /* Define padding vertical (não zera padding lateral do container) */
  padding-block: var(--space-2);
}

.subnav-links {
  /* Alinha links em linha */
  display: flex;
  /* Define espaçamento entre itens */
  gap: var(--space-2);
  /* Mantém em uma linha */
  flex-wrap: nowrap;
  /* Permite rolagem horizontal no mobile */
  overflow-x: auto;
  /* Evita adicionar altura extra */
  padding-bottom: 0;
}

.subnav-link {
  /* Remove sublinhado */
  text-decoration: none;
  /* Define cor do link */
  color: var(--color-link);
  /* Ajusta tamanho de fonte */
  font-size: var(--font-size-sm);
  /* Define peso para destaque */
  font-weight: 600;
  /* Define área clicável */
  padding: var(--space-1) var(--space-3);
  /* Define radius para efeito de chip */
  border-radius: 999px;
  /* Adiciona borda sutil */
  border: 1px solid var(--color-border);
  /* Usa fundo leve */
  background: rgba(255, 255, 255, 0.06);
  /* Evita quebra do texto */
  white-space: nowrap;
}

.subnav-link:hover,
.subnav-link:focus-visible {
  /* Destaca link no hover/foco */
  color: var(--color-link-hover);
  /* Aplica fundo sutil */
  background: var(--color-link-hover-bg);
  /* Usa borda de destaque */
  border-color: var(--color-link-hover);
}

.site-footer {
  /* Define fundo do rodapé conforme tema */
  background: var(--color-footer-bg);
  /* Define cor de texto para contraste */
  color: var(--color-text);
  /* Adiciona linha sutil no topo */
  border-top: 1px solid var(--color-footer-border);
  /* Define padding vertical (não zera padding lateral do container) */
  padding-block: var(--space-6);
  /* Define margem superior para separar do conteúdo */
  margin-top: var(--space-7);
  /* Define tamanho de texto menor no rodapé */
  font-size: var(--font-size-sm);
}

.footer-inner {
  /* Alinha itens em coluna por padrão */
  display: flex;
  /* Define espaçamento entre itens */
  gap: var(--space-3);
  /* Centraliza o texto */
  text-align: center;
}

.footer-links {
  /* Remove estilo padrão de lista */
  list-style: none;
  /* Remove padding padrão */
  padding: 0;
  /* Remove margem padrão */
  margin: 0;
  /* Centraliza links em linha */
  display: flex;
  /* Define espaçamento entre links */
  gap: var(--space-4);
  /* Alinha ao centro */
  justify-content: center;
}

.social-links {
  /* Remove estilo padrão de lista */
  list-style: none;
  /* Remove padding padrão */
  padding: 0;
  /* Remove margem padrão */
  margin: 0;
  /* Centraliza ícones em linha */
  display: flex;
  /* Define espaçamento entre ícones */
  gap: var(--space-4);
  /* Permite quebra no mobile */
  flex-wrap: wrap;
  /* Centraliza os itens */
  justify-content: center;
}

.social-link {
  /* Remove sublinhado */
  text-decoration: none;
  /* Define cor base do ícone */
  color: var(--color-footer-link);
  /* Define tamanho do ícone */
  display: inline-flex;
}

.social-link svg {
  /* Define tamanho do SVG */
  width: 18px;
  height: 18px;
  /* Usa a cor atual */
  fill: currentColor;
}

.social-link:hover,
.social-link:focus-visible {
  /* Destaca no hover com amarelo eletrico */
  color: var(--color-brand-yellow);
}

.footer-link {
  /* Remove sublinhado */
  text-decoration: none;
  /* Define cor mais suave no rodapé */
  color: var(--color-footer-link);
}

.footer-link:hover,
.footer-link:focus-visible {
  /* Destaca com amarelo da marca */
  color: var(--color-footer-link-hover);
}

/* ===================================================================== */
/* COMPONENTES BASE: cards e botões reutilizáveis */
.card {
  /* Define fundo do card */
  background: var(--color-surface);
  /* Define borda sutil */
  border: 1px solid var(--color-border);
  /* Define radius */
  border-radius: var(--radius-md);
  /* Aplica sombra leve */
  box-shadow: var(--shadow-sm);
  /* Define padding interno */
  padding: var(--space-5);
  /* Define transição suave */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ===================================================================== */
/* INTERNET: seções base, hero e planos */
.section {
  /* Define espaçamento vertical das seções */
  padding: var(--space-6) 0;
}

.hero {
  /* Ajusta espaçamento do hero */
  padding: var(--space-6) 0;
}

.hero-grid {
  /* Alinha conteúdo e visual no centro */
  align-items: center;
  /* Mantém proporção simétrica entre texto e logo */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-content {
  /* Mantém o bloco de texto alinhado ao centro do hero */
  align-self: center;
}

.hero-content p {
  /* Usa cor suave para o subtítulo */
  color: var(--color-muted);
  /* Limita largura para leitura */
  max-width: 540px;
}

.hero-note {
  /* Usa tamanho menor para reforço adicional */
  font-size: var(--font-size-sm);
  /* Mantém cor suave */
  color: var(--color-muted);
  /* Ajusta margem para aproximar do texto acima */
  margin-top: calc(var(--space-2) * -1);
}

.hero-bullets {
  /* Define espaçamento acima/abaixo */
  margin: var(--space-4) 0;
  /* Ajusta recuo da lista */
  padding-left: var(--space-4);
  /* Usa cor suave */
  color: var(--color-muted);
}

.hero-cta {
  /* Alinha botões em linha */
  display: flex;
  /* Permite quebra no mobile */
  flex-wrap: wrap;
  /* Define espaçamento entre botões */
  gap: var(--space-3);
}

.hero-visual {
  /* Centraliza a coluna visual */
  display: flex;
  /* Organiza itens em coluna */
  flex-direction: column;
  /* Centraliza horizontalmente */
  align-items: center;
  /* Centraliza verticalmente o conteúdo */
  justify-content: center;
  /* Mantém o bloco visual centralizado na coluna */
  justify-self: center;
  /* Define espaçamento */
  gap: var(--space-4);
}

.hero-logo-halo {
  /* Define halo branco ao redor da logo */
  background: var(--color-white);
  /* Aplica borda para reforçar o halo */
  border: 8px solid var(--color-white);
  /* Mantém formato circular */
  border-radius: 999px;
  /* Cria respiro ao redor */
  padding: 8px;
  /* Aplica sombra sutil */
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.55), var(--shadow-md);
  /* Centraliza a logo dentro do halo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-theme="light"] .hero-logo-halo {
  /* Ajusta halo no tema claro */
  background: #F6F8F6;
  border-color: #E6EAE6;
}

.hero-logo {
  /* Define tamanho grande para a logo */
  width: 280px;
  height: 280px;
  /* Mantém proporção correta */
  object-fit: contain;
  /* Evita estourar a coluna */
  max-width: 100%;
}

.hero-media {
  /* Oculta o placeholder enquanto não há imagem */
  display: none;
}

.plan-grid {
  /* Usa grid para os planos */
  display: grid;
  /* Define colunas responsivas */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* Define espaçamento entre cards */
  gap: var(--space-4);
}

.plan-card {
  /* Organiza conteúdo do plano em coluna */
  display: flex;
  flex-direction: column;
  /* Define espaçamento interno */
  gap: var(--space-3);
}

.plan-card-header {
  /* Organiza título e meta do plano */
  display: flex;
  flex-direction: column;
  /* Define espaçamento entre elementos */
  gap: var(--space-1);
}

.plan-card-top {
  /* Alinha ícone e selo na mesma linha */
  display: flex;
  align-items: center;
  /* Define espaçamento entre ícone e selo */
  gap: var(--space-2);
  /* Permite centralizar o selo no card */
  width: 100%;
  /* Cria contexto para centralizar o selo */
  position: relative;
}

.plan-icon-wrapper {
  /* Define área circular para o ícone */
  width: 34px;
  height: 34px;
  /* Centraliza o ícone */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Usa halo discreto */
  background: rgba(255, 255, 255, 0.08);
  /* Aplica borda sutil */
  border: 1px solid var(--color-border);
  /* Mantém formato circular */
  border-radius: 50%;
  /* Aplica halo suave */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  /* Usa cor neutra */
  color: var(--color-muted);
}

.plan-icon {
  /* Define tamanho do SVG */
  width: 16px;
  height: 16px;
  /* Usa traço para ícones outline */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-card:hover .plan-icon-wrapper,
.plan-card:focus-within .plan-icon-wrapper {
  /* Destaca o ícone no hover/foco */
  color: var(--color-brand-yellow);
  /* Ajusta borda */
  border-color: var(--color-brand-yellow);
  /* Suaviza o fundo */
  background: rgba(255, 215, 0, 0.12);
}

.plan-card-featured {
  /* Destaca o plano recomendado */
  border-color: var(--color-brand-yellow);
  /* Reforça a sombra */
  box-shadow: 0 0 0 1px var(--color-brand-yellow), var(--shadow-md);
}

.plan-badge {
  /* Usa fundo amarelo para destaque */
  background: var(--color-brand-yellow);
  /* Define cor do texto */
  color: var(--color-black);
  /* Ajusta tamanho da fonte */
  font-size: var(--font-size-xs);
  /* Define padding */
  padding: var(--space-1) var(--space-2);
  /* Define radius */
  border-radius: 999px;
  /* Mantém o selo em linha */
  white-space: nowrap;
  /* Centraliza o selo no card */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Mantém o selo acima do ícone */
  z-index: 1;
}

.plan-speed {
  /* Destaca a velocidade */
  font-weight: 700;
}

.plan-price {
  /* Reforça o preço */
  font-weight: 700;
}

.plan-tag {
  /* Usa cor suave para o texto de apoio */
  color: var(--color-muted);
}

.plan-media {
  /* Oculta placeholder de mídia até as imagens finais */
  display: none;
}

.plan-benefits {
  /* Ajusta margem da lista */
  margin: 0;
  /* Define recuo da lista */
  padding-left: var(--space-4);
}

.plan-card .btn,
.coverage-form .btn {
  /* Faz o botão ocupar a largura do card */
  width: 100%;
  /* Centraliza o conteúdo do botão */
  justify-content: center;
  /* Garante alinhamento consistente */
  align-self: stretch;
  /* Centraliza o texto */
  text-align: center;
}

.coverage-grid {
  /* Usa grid para formulário e mapa */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* Define espaçamento */
  gap: var(--space-4);
}

.coverage-card {
  /* Garante cartões com altura consistente */
  height: 100%;
}

.coverage-form {
  /* Organiza campos em coluna */
  display: flex;
  flex-direction: column;
  /* Define espaçamento */
  gap: var(--space-3);
}

.form-field {
  /* Organiza label e input */
  display: flex;
  flex-direction: column;
  /* Define espaçamento */
  gap: var(--space-1);
}

.form-field input {
  /* Define padding do input */
  padding: var(--space-2);
  /* Define cor do texto */
  color: var(--color-text);
  /* Usa fundo conforme tema */
  background: transparent;
  /* Define borda */
  border: 1px solid var(--color-border);
  /* Define radius */
  border-radius: var(--radius-sm);
}

.form-field input::placeholder {
  /* Usa cor suave para placeholder */
  color: var(--color-muted);
}

.form-check {
  /* Alinha checkbox e texto */
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.form-note {
  /* Usa cor suave para observação */
  color: var(--color-muted);
  /* Ajusta tamanho da fonte */
  font-size: var(--font-size-sm);
}

.steps-list {
  /* Ajusta recuo da lista numerada */
  padding-left: var(--space-4);
  /* Define espaçamento entre itens */
  display: grid;
  gap: var(--space-2);
}

.client-links,
.cta-actions {
  /* Alinha botões em linha */
  display: flex;
  /* Permite quebra no mobile */
  flex-wrap: wrap;
  /* Define espaçamento */
  gap: var(--space-3);
}

.whatsapp-float {
  /* Posiciona o CTA flutuante */
  position: fixed;
  /* Distância da borda inferior */
  bottom: var(--space-5);
  /* Distância da borda direita */
  right: var(--space-5);
  /* Usa fundo de destaque */
  background: var(--color-brand-yellow);
  /* Define cor do texto */
  color: var(--color-black);
  /* Define padding */
  padding: var(--space-2) var(--space-3);
  /* Define radius */
  border-radius: 999px;
  /* Remove sublinhado */
  text-decoration: none;
  /* Alinha ícone e texto */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* Aplica sombra */
  box-shadow: var(--shadow-md);
  /* Garante sobreposição */
  z-index: 20;
  /* Mantém transparência leve para não cobrir conteúdo */
  opacity: 0.6;
  /* Suaviza transição de opacidade */
  transition: opacity 0.2s ease, background 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  /* Escurece levemente o fundo no hover */
  background: var(--color-primary-bg-hover);
  /* Garante visibilidade total no hover */
  opacity: 1;
}

/* ===================================================================== */
/* 404: layout centralizado para página de erro */
.page-error {
  /* Garante altura mínima da tela */
  min-height: 100vh;
  /* Organiza o conteúdo em coluna */
  display: flex;
  /* Permite que o main ocupe o centro */
  flex-direction: column;
}

.error-main {
  /* Centraliza o conteúdo principal */
  display: flex;
  /* Alinha verticalmente */
  align-items: center;
  /* Alinha horizontalmente */
  justify-content: center;
  /* Define padding vertical */
  padding: var(--space-6) 0;
  /* Garante crescimento do main */
  flex: 1;
  /* Centraliza o texto */
  text-align: center;
}

.error-content {
  /* Limita a largura do bloco */
  max-width: 720px;
  /* Centraliza itens */
  display: flex;
  /* Empilha elementos */
  flex-direction: column;
  /* Centraliza o alinhamento */
  align-items: center;
  /* Define espaçamento entre blocos */
  gap: var(--space-4);
}

.error-title {
  /* Destaca o título com amarelo */
  color: var(--color-brand-yellow);
  /* Ajusta o tamanho do título */
  font-size: 2.5rem;
  /* Reforca o peso do título */
  font-weight: 700;
  /* Remove margem extra */
  margin: 0;
}

.error-subtitle {
  /* Ajusta tamanho do subtítulo */
  font-size: var(--font-size-lg);
  /* Usa cor de texto secundário */
  color: var(--color-muted);
  /* Remove margem extra */
  margin: 0;
}

.error-actions {
  /* Alinha botões em linha */
  display: flex;
  /* Adiciona espaçamento */
  gap: var(--space-4);
  /* Permite quebra no mobile */
  flex-wrap: wrap;
  /* Centraliza botões */
  justify-content: center;
}

.error-links {
  /* Alinha links em linha */
  display: flex;
  /* Define espaçamento */
  gap: var(--space-4);
  /* Permite quebra no mobile */
  flex-wrap: wrap;
  /* Centraliza links */
  justify-content: center;
}

.error-links .btn {
  /* Remove sublinhado dos botões */
  text-decoration: none;
  /* Ajusta o tamanho do texto */
  font-size: var(--font-size-sm);
}

/* ===================================================================== */
/* HOME BASE: bloco simples para o conteúdo inicial */
.page-intro {
  /* Centraliza o conteúdo inicial */
  display: flex;
  /* Empilha elementos */
  flex-direction: column;
  /* Centraliza horizontalmente */
  align-items: center;
  /* Define espaçamento entre elementos */
  gap: var(--space-4);
}

.intro-logo {
  /* Aumenta o logo no conteúdo inicial */
  width: 120px;
  height: 120px;
  /* Mantem o halo proporcional */
  padding: 8px;
}

[data-theme="light"] .intro-logo {
  /* Remove padding no tema claro */
  padding: 0;
}

.card:hover {
  /* Destaca a borda com a cor de acento */
  border-color: var(--color-brand-yellow);
  /* Eleva o card ao passar o mouse */
  transform: translateY(-2px);
  /* Intensifica a sombra */
  box-shadow: var(--shadow-md);
}

/* ===================================================================== */
/* GATEWAY: cards clicáveis e atalho para última área */
.card-link {
  /* Remove sublinhado do link */
  text-decoration: none;
  /* Mantem a cor herdada do card */
  color: inherit;
  /* Organiza o conteúdo em coluna */
  display: flex;
  /* Empilha os elementos verticalmente */
  flex-direction: column;
  /* Define espaçamento interno entre blocos */
  gap: var(--space-3);
  /* Faz o card ocupar a altura total */
  height: 100%;
}

.icon-wrapper {
  /* Define o tamanho do circulo do ícone */
  width: 52px;
  height: 52px;
  /* Centraliza o ícone dentro do circulo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Usa o halo discreto no tema escuro */
  background: rgba(255, 255, 255, 0.08);
  /* Define borda sutil */
  border: 1px solid var(--color-border);
  /* Mantem a forma circular */
  border-radius: 50%;
  /* Usa cor neutra para o ícone */
  color: var(--color-muted);
  /* Suaviza a transição do destaque */
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

[data-theme="light"] .icon-wrapper {
  /* Ajusta o halo no tema claro */
  background: rgba(0, 80, 48, 0.06);
  /* Usa cor neutra escura */
  color: var(--color-muted);
}

.card-icon {
  /* Define tamanho do SVG */
  width: 26px;
  height: 26px;
  /* Usa linha e sem preenchimento */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-title {
  /* Reforca o peso do título do card */
  font-weight: 700;
}

.card-description {
  /* Usa cor secundária para facilitar leitura */
  color: var(--color-muted);
}

.card-link:focus-visible {
  /* Destaca a borda no foco visível */
  border-color: var(--color-brand-yellow);
}

.card-link:hover .icon-wrapper,
.card-link:focus-visible .icon-wrapper {
  /* Destaca o ícone no hover/foco */
  color: var(--color-brand-yellow);
  /* Usa borda amarela */
  border-color: var(--color-brand-yellow);
  /* Aplica brilho sutil */
  background: rgba(255, 215, 0, 0.12);
  /* Eleva levemente o ícone */
  transform: translateY(-1px);
}

.card-cta {
  /* Mantem o CTA alinhado ao inicio */
  align-self: flex-start;
}

.btn {
  /* Remove borda padrão */
  border: none;
  /* Permite alinhar ícone e texto */
  display: inline-flex;
  /* Centraliza o conteúdo verticalmente */
  align-items: center;
  /* Define espaçamento entre ícone e texto */
  gap: var(--space-2);
  /* Remove sublinhado de links */
  text-decoration: none;
  /* Define padding base */
  padding: var(--space-2) var(--space-4);
  /* Define radius para botão */
  border-radius: var(--radius-sm);
  /* Define fonte e peso */
  font-family: var(--font-base);
  font-weight: 600;
  /* Define cursor interativo */
  cursor: pointer;
}

.btn-icon {
  /* Define tamanho padrão do ícone */
  width: 14px;
  height: 14px;
  /* Usa cor atual do texto */
  fill: currentColor;
  /* Evita encolher o ícone */
  flex-shrink: 0;
  /* Mantém alinhamento consistente */
  display: inline-block;
}

.btn-primary {
  /* Define fundo do botão principal */
  background: var(--color-primary-bg);
  /* Define cor do texto */
  color: var(--color-primary-text);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  /* Realca o botão no hover */
  background: var(--color-primary-bg-hover);
  /* Mantem contraste do texto */
  color: var(--color-primary-text);
}

.btn-secondary {
  /* Define fundo claro */
  background: var(--color-surface);
  /* Define cor do texto */
  color: var(--color-text);
  /* Define borda sutil */
  border: 1px solid var(--color-border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  /* Escurece levemente o fundo */
  background: rgba(0, 0, 0, 0.04);
}

/* Estilo secundario especifico para tema claro: borda verde */
[data-theme="light"] .btn-secondary {
  /* Fundo transparente para contraste */
  background: var(--color-secondary-bg);
  /* Texto verde da marca */
  color: var(--color-secondary-text);
  /* Borda verde para destaque */
  border: 1px solid var(--color-secondary-border);
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-secondary:focus-visible {
  /* Fundo sutil no hover */
  background: var(--color-secondary-bg-hover);
}

/* ===================================================================== */
/* GRID BASE: utilitário simples para layouts responsivos */
.grid {
  /* Ativa grid CSS */
  display: grid;
  /* Define gap padrão */
  gap: var(--space-5);
}

.grid-2x2 {
  /* Define duas colunas no desktop */
  grid-template-columns: repeat(2, 1fr);
}

/* ===================================================================== */
/* RESPONSIVIDADE: ajustes para telas menores */
@media (max-width: 768px) {

  /* Ajusta header para empilhar elementos */
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Ajusta a área de ações do header no mobile */
  .header-actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  /* ------------------------------------------------------------------- */
  /* EXCEÇÃO DE MODULARIZAÇÃO: Submenu e Planos (Internet)               */
  /* ------------------------------------------------------------------- */
  /* CONTEXTO: Estas regras deveriam estar em internet.css, porém as     */
  /* definições base de .subnav-links (nowrap, overflow-x:auto) e        */
  /* .plan-grid (scroll-snap, min-width) são definidas AQUI no main.css. */
  /* Como o internet.css é carregado DEPOIS, tentamos usar !important lá,*/
  /* mas não foi suficiente para sobrescrever todas as propriedades.     */
  /*                                                                     */
  /* SOLUÇÃO: Corrigir na FONTE (main.css) para garantir que o mobile    */
  /* tenha o comportamento correto: flex-wrap:wrap para o submenu e      */
  /* flex-direction:column para os planos.                               */
  /*                                                                     */
  /* REFS: Issue #65, PR #67                                             */
  /* DATA: 2026-01-01                                                    */
  /* ------------------------------------------------------------------- */

  /* Ajusta o submenu local no mobile para WRAP (quebra de linha) */
  /* Permite que os links (Início, Sobre, etc.) formem múltiplas linhas */
  .subnav-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
  }

  /* FORÇA WRAP nos links - remove scroll horizontal (carrossel) */
  /* Garante que todos os itens do submenu fiquem visíveis no mobile */
  .subnav-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    overflow-x: visible;
    overflow-y: visible;
  }

  /* Reduz a logo no hero */
  .hero-logo {
    width: 140px;
    height: 140px;
  }

  /* Ajusta o botão flutuante no mobile */
  .whatsapp-float {
    bottom: var(--space-3);
    right: var(--space-3);
  }

  /* Ajusta grid para uma coluna no mobile */
  .grid-2x2 {
    grid-template-columns: 1fr;
  }

  /* Ajusta links do footer em coluna */
  .footer-links {
    flex-direction: column;
    align-items: center;
  }

  /* PLANOS: força coluna única no mobile (empilhamento vertical) */
  /* Remove comportamento de carrossel horizontal dos cards */
  .plan-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-x: visible;
  }

  /* Garante que cada card ocupe 100% da largura no mobile */
  .plan-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* ===================================================================== */
/* REDUCED MOTION: respeita preferência do usuário */
@media (prefers-reduced-motion: reduce) {

  /* Remove animações e transições */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}