/* =========================
   Tema (variáveis)
   ========================= */
:root { /* Paleta e tokens */
  --bg:#0b1020;    /* fundo base */
  --panel:#0f1530; /* painéis escuros */
  --muted:#94a3b8; /* texto secundário */
  --txt:#e5e7eb;   /* texto principal */
  --brand:#22d3ee; /* gradiente A */
  --brand2:#38bdf8;/* gradiente B */
  --ok:#22c55e;    /* verde ok */
  --warn:#f59e0b;  /* amarelo aviso */
  --card:#111732;  /* fundo cards */
  --line:#1f2a44;  /* linhas/bordas */
}

/* =========================
   Base e reset
   ========================= */
* { box-sizing: border-box; } /* inclui borda no cálculo do box */

html, body { height: 100%; } /* altura total para efeitos */

body { /* base visual */
  margin: 0; /* remove margem padrão */
  font-family: Inter, system-ui, Arial, Helvetica, sans-serif; /* pilha de fontes */
  color: var(--txt); /* cor do texto padrão */
  background: radial-gradient(1200px 800px at 80% -10%, #1b2560 0%, #0b1020 55%); /* fundo */
}

a { color: inherit; text-decoration: none; } /* links sem sublinhado */

/* =========================
   Layout global
   ========================= */
.wrap { /* container centralizador */
  max-width: 1100px; /* largura máxima */
  margin: 0 auto; /* centraliza */
  padding: 0 20px; /* respiro lateral */
}

/* =========================
   Header e navegação
   ========================= */
header { /* topo fixo com blur */
  position: sticky; /* fixa no topo ao rolar */
  top: 0; /* ancorado no topo */
  z-index: 40; /* acima do conteúdo */
  background: rgba(11,16,32,.7); /* semi-transparente */
  backdrop-filter: blur(8px); /* vidro fosco */
  border-bottom: 1px solid #141b34; /* linha inferior */
}

.nav { /* barra de navegação */
  display: flex; /* layout flexível */
  align-items: center; /* alinha verticalmente */
  justify-content: space-between; /* separa logo e menu */
  height: 64px; /* altura da barra */
}

.brand { /* marca */
  display: flex; /* alinha ícone e nome */
  align-items: center; /* vertical */
  gap: 10px; /* espaçamento entre itens */
  font-weight: 800; /* peso forte */
  letter-spacing: .3px; /* leve tracking */
}

.brand .dot { /* ponto colorido da marca */
  width: 10px; height: 10px; /* tamanho */
  border-radius: 50%; /* círculo */
  background: linear-gradient(135deg, var(--brand), var(--brand2)); /* gradiente */
}

.menu { /* lista de links */
  display: flex; /* horizontal */
  gap: 18px; /* espaçamento */
  font-weight: 600; /* destaque leve */
}

/* =========================
   Botões
   ========================= */
.btn { /* base de botão */
  display: inline-flex; /* alinha conteúdo */
  align-items: center; justify-content: center; /* centraliza */
  gap: 8px; /* espaço entre ícone/texto */
  padding: 12px 18px; /* área clicável */
  border-radius: 12px; /* cantos */
  font-weight: 700; /* peso */
  border: 1px solid transparent; /* base para hover */
  transition: .2s; /* animação suave */
}

.btn.primary { /* botão primário */
  background: linear-gradient(135deg, var(--brand), var(--brand2)); /* gradiente */
  color: #001020; /* contraste no texto */
  
}

.btn.primary:hover { filter: brightness(1.05); } /* leve brilho no hover */

.btn.ghost { /* botão fantasma */
  background: #0e152f; /* fundo discreto */
  border-color: #263255; /* borda sutil */
}

.btn.ghost:hover { border-color: #31406b; } /* realce no hover */

/* =========================
   Seção Hero
   ========================= */
.hero { padding: 72px 0 40px; } /* respiro superior/inferior */

.hero h1 { /* título principal */
  font-size: clamp(28px, 3.6vw, 52px); /* responsivo */
  line-height: 1.05; /* altura de linha curta */
  margin: 0 0 12px; /* espaçamento inferior */
  font-weight: 800; /* peso forte */
}

.hero p { /* subtítulo */
  color: var(--muted); /* tom secundário */
  font-size: clamp(14px, 1.6vw, 18px); /* responsivo */
  margin: 0 0 24px; /* espaçamento */
}

.hero .cta { /* área dos CTAs */
  display: flex; /* horizontal */
  gap: 12px; /* espaço entre botões */
  flex-wrap: wrap; /* quebra no mobile */
}

/* =========================
   Grid e Cards
   ========================= */
.grid { display: grid; gap: 18px; } /* grid genérico */

.cards { /* grade dos cards de planos */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* responsivo */
}

.card { /* cartão base */
  background: linear-gradient(180deg, #131a3a 0%, #0e1530 100%); /* fundo */
  border: 1px solid var(--line); /* borda sutil */
  border-radius: 16px; /* cantos */
  padding: 18px; /* respiro interno */
}

.card h3 { margin: 0 0 8px; font-size: 18px; } /* título do card */

/* nota miúda abaixo do preço */
.price-note{
  font-size:11px;
  color:var(--muted);
  margin-left: 160px;

}

.price { /* preço em destaque */
  font-weight: 800; /* forte */
  font-size: 26px; /* grande */
  margin: 8px 0; /* espaçamento */
}

.badge { /* selo pequeno */
  display: inline-block; /* inline com caixa */
  font-size: 12px; /* pequeno */
  color: #0b1020; /* contraste no gradiente */
  background: linear-gradient(135deg, var(--ok), #a7f3d0); /* verde claro */
  padding: 4px 10px; /* respiro */
  border-radius: 999px; /* pílula */
  font-weight: 800; /* forte */
}

/* =========================
   Seções e colunas
   ========================= */
section { padding: 48px 0; } /* respiro vertical padrão */

.cols { /* colunas responsivas */
  display: grid; /* grid */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* responsivo */
  gap: 18px; /* espaçamento */
}

/* =========================
   FAQ
   ========================= */
.faq details { /* item de FAQ */
  background: #0f1430; /* fundo */
  border: 1px solid var(--line); /* borda */
  border-radius: 12px; /* cantos */
  padding: 14px 16px; /* respiro */
}

.faq summary { cursor: pointer; font-weight: 700; } /* cabeçalho clicável */

/* =========================
   Rodapé
   ========================= */
.footer { /* área do footer */
  border-top: 1px solid #141b34; /* divisor superior */
  padding: 28px 0 60px; /* respiro */
  color: #9fb0c7; /* tom suave */
}

/* =========================
   Tags e chips
   ========================= */
.tag { /* pequeno rótulo */
  font-size: 12px; /* tamanho */
  color: #90a0bb; /* texto */
  border: 1px dashed #2a375f; /* borda tracejada */
  padding: 4px 8px; /* respiro */
  border-radius: 999px; /* pílula */
}

.nums { /* grupo de cápsulas do herói */
  display: flex; /* linha */
  gap: 14px; /* espaçamento */
  flex-wrap: wrap; /* quebra no mobile */
}

.pill { /* cápsula informativa */
  padding: 10px 14px; /* respiro */
  border: 1px solid #253463; /* borda */
  border-radius: 12px; /* cantos */
  background: #0f1632; /* fundo */
  color: #c8d3e8; /* texto */
  font-weight: 700; /* peso */
}

/* =========================
   Formulários
   ========================= */
form input,
form select { /* campos base */
  width: 100%; /* preencher coluna */
  padding: 12px 14px; /* respiro */
  border-radius: 12px; /* cantos */
  background: #0c132b; /* fundo */
  border: 1px solid #1c2647; /* borda */
  color: var(--txt); /* texto */
  outline: none; /* remove contorno padrão */
}

form .row { /* linha responsiva de inputs */
  display: grid; /* grid */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* responsivo */
  gap: 12px; /* espaçamento */
}

/* =========================
   Utilitários
   ========================= */
.center { text-align: center; } /* centraliza texto */

.shadow { box-shadow: 0 20px 60px rgba(0,0,0,.35); } /* sombra suave */

.hr { /* linha decorativa */
  height: 1px; /* espessura */
  background: linear-gradient(90deg, transparent, #243158, transparent); /* gradiente */
  margin: 28px 0; /* espaçamento */
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 640px) {              /* ativa regras em telas ≤ 640px */
  .menu { display: none; }               /* oculta o menu horizontal no mobile
                                            (use um ícone/overlay se quiser navegação) */
}

/* =========================
   Mapa (visual de card)
   ========================= */
#map {                                    /* contêiner do mapa (Leaflet/iframe) */
  height: 340px;                          /* altura visível do mapa */
  border-radius: 16px;                    /* cantos arredondados como os cards */
  border: 1px solid var(--line);          /* borda sutil com o token do tema */
  overflow: hidden;                       /* corta tiles que ultrapassam os cantos */
}

.map-actions {                            /* faixa de ações abaixo do mapa */
  display: flex;                          /* itens lado a lado */
  gap: 8px;                               /* espaçamento uniforme entre botões */
  margin: 10px 0 0;                       /* respiro acima da faixa */
  flex-wrap: wrap;                        /* quebra para a linha de baixo no mobile */
}

/* ==== Logos dentro dos cards ==== */
/* Container das logos dentro de cada .card de plano */
.card .plan-logos{
  display: flex;           /* coloca as logos lado a lado em linha */
  align-items: center;     /* alinha verticalmente as logos no centro da linha */
  gap: 10px;               /* espaço uniforme entre as logos */
  margin-top: 12px;        /* respiro acima do bloco de logos dentro do card */
  flex-wrap: wrap;        /* quebra para baixo quando precisar */
}

/* Regras aplicadas a cada imagem de logo dentro do container acima */
.card .plan-logos img{
  flex-wrap: wrap;        /* quebra para baixo quando precisar */  
  display: block;                /* remove “buracos” de inline-img e respeita height/width */
  height: 22px;                   /* ALTURA FIXA das logos (8px é bem pequeno) */
  max-width: auto;               /* impede que uma logo muito larga estoure o layout */
  object-fit: contain;           /* garante que a imagem inteira caiba dentro da caixa sem cortar */
  opacity: .9;                   /* leve atenuação para ficar mais discreto no estado normal */
  transition: .2s;               /* anima suavemente mudanças de filtro/opacity no hover */
}

/* Opcional: ajusta o espaçamento das listas dentro do card (bullets dos benefícios) */
.card ul{
  margin: 0 0 10px;              /* remove margem superior e mantém 10px abaixo */
  padding-left: 18px;            /* recuo para os bullets ficarem alinhados */
}

/* Mapa (Leaflet ou iframe) com estilo de card */
#map{
  height: 240px;                 /* altura visível do mapa */
  border-radius: 16px;           /* cantos arredondados para combinar com os cards */
  border: 1px solid var(--line); /* mesma borda sutil usada nos cards */
  overflow: hidden;              /* esconde qualquer tile que passe do raio dos cantos */
}