/* ==================================================================
   MÍDIA KIT — BIANCA MARQUES RODRIGUES
   Estilos em português. Mobile-first (celular primeiro).
   ================================================================== */

/* ------------------------------------------------------------------
   1. CORES E MEDIDAS  —  altere aqui para mudar o visual do site todo
   ------------------------------------------------------------------ */
:root {
  /* ---- TEMA ESCURO ----
     Para voltar ao claro: --cor-fundo/-branco claros e --cor-preto/-texto escuros. */

  /* Cores da marca (acentos sobre o fundo escuro) */
  --cor-coral:            #FD9E8A;
  --cor-coral-suave:      rgba(253, 158, 138, 0.16);   /* fundo translúcido de etiquetas/botões */
  --cor-laranja:          #E54D2E;   /* botões, barras, ícones de título */
  --cor-laranja-claro:    #EF6144;
  --cor-laranja-escuro:   #D83F1F;
  --cor-vermelho-texto:   #FF9068;   /* números em destaque (claro p/ brilhar no escuro) */
  --cor-vermelho-escuro:  #F0764E;   /* local, etiquetas, hover */

  /* Neutros — no tema escuro os papéis se invertem: */
  --cor-preto:            #F2EDEB;   /* AGORA é o TEXTO claro (títulos, valores) */
  --cor-branco:           #211B19;   /* AGORA é a SUPERFÍCIE dos cards */
  --cor-clara:            #FFFFFF;    /* branco de verdade (texto sobre laranja) */
  --cor-fundo:            #141110;    /* fundo da página, mais escuro que o card */
  --cor-texto:            #F2EDEB;
  --cor-texto-suave:      #B4A9A4;    /* textos secundários */
  --cor-cinza-claro:      #6E6560;    /* textos bem discretos */
  --cor-borda:            rgba(255, 255, 255, 0.08);

  /* Cores dos gráficos (fatias de gênero, na ordem) */
  --cor-grafico-1:        #E54D2E;
  --cor-grafico-2:        #FD9E8A;
  --cor-grafico-3:        #6E524B;   /* "Outros" — tom quente discreto no escuro */

  /* Tipografia */
  --fonte-principal: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Espaçamentos e formas */
  --raio-pequeno:  8px;
  --raio-medio:    14px;
  --raio-grande:   24px;
  --espaco:        16px;
  --largura-maxima: 1080px;
  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.40);
}

/* ------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte-principal);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a { color: var(--cor-vermelho-texto); }

/* Acessibilidade: foco sempre visível ao navegar pelo teclado */
:focus-visible {
  outline: 3px solid var(--cor-laranja);
  outline-offset: 3px;
  border-radius: var(--raio-pequeno);
}

.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------------------
   3. CABEÇALHO
   ------------------------------------------------------------------ */
.cabecalho {
  padding-bottom: 8px;
}

/* Banner: foto em cor natural, largura total. A altura mostra a parte de
   cima da foto; o card de perfil sobe por cima da parte de baixo.
   background-image (diferente de mask-image) carrega normal via file://. */
.banner {
  height: 200px;
  background-color: var(--cor-coral);           /* fallback se a foto faltar */
  background-image: url('../imagens/_extras/foto-moto-paisagem.webp');
  background-size: cover;
  background-position: center 48%;   /* centraliza o piloto/moto no banner */
  background-repeat: no-repeat;
}

/* Card do perfil sobrepondo o banner */
.cartao-perfil {
  position: relative;
  z-index: 1;
  margin-top: -64px;                            /* sobe por cima do banner */
  background-color: var(--cor-branco);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-cartao);
  padding: 24px;
}

.perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.perfil__foto {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--cor-branco);
  box-shadow: var(--sombra-cartao);
  background-color: var(--cor-branco);
}

/* Mostrada enquanto não existir imagens/perfil.jpg — vira um avatar cinza.
   O font-size:0 esconde o texto alternativo e o ícone de imagem quebrada. */
.perfil__foto--vazia {
  background: var(--cor-branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FD9E8A'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5z'/%3E%3C/svg%3E") center/60% no-repeat;
  font-size: 0;
  color: transparent;
}

.perfil__nome {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--cor-preto);
  letter-spacing: -0.02em;
}

.perfil__local {
  font-size: 0.95rem;
  color: var(--cor-vermelho-escuro);
  font-weight: 600;
  margin-top: 4px;
}

.perfil__redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.botao-rede {
  background-color: var(--cor-coral-suave);   /* visível sobre o card branco */
  color: var(--cor-preto);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.botao-rede:hover { background-color: rgba(253, 158, 138, 0.32); }

/* Cartões de número no topo */
.destaques {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 28px;
}

.cartao-destaque {
  background-color: var(--cor-branco);
  border-radius: var(--raio-medio);
  padding: 16px 10px;
  text-align: center;
  box-shadow: var(--sombra-cartao);
}

.cartao-destaque__valor {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cor-vermelho-texto);
  letter-spacing: -0.02em;
}

.cartao-destaque__rotulo {
  display: block;
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  font-weight: 600;
  margin-top: 4px;
}
.cartao-destaque__rotulo small {
  display: block;
  font-weight: 500;
  color: var(--cor-cinza-claro);
  font-size: 0.66rem;
}

/* ------------------------------------------------------------------
   4. SEÇÕES E CARTÕES
   ------------------------------------------------------------------ */
.secao { margin-top: 40px; }

.secao__titulo {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.cartao {
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: 20px;
  box-shadow: var(--sombra-cartao);
}

.cartao__titulo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  font-weight: 700;
  margin-bottom: 16px;
}

/* ------------------------------------------------------------------
   5. SOBRE
   ------------------------------------------------------------------ */
.lista-nichos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.etiqueta-nicho {
  background-color: var(--cor-coral-suave);
  color: var(--cor-vermelho-escuro);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 999px;
}

.sobre__texto { color: var(--cor-texto-suave); }

.sobre__contato {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-borda);
}

.sobre__rotulo-contato {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-cinza-claro);
  font-weight: 700;
}

.sobre__email {
  font-weight: 700;
  color: var(--cor-vermelho-texto);
  text-decoration: none;
  word-break: break-all;
}
.sobre__email:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   6. DESEMPENHO — abas, filtro e métricas
   ------------------------------------------------------------------ */
.abas-redes {
  display: flex;
  gap: 6px;
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 12px;
}

.aba {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
  padding: 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.aba:hover { color: var(--cor-preto); }

.aba--ativa {
  background-color: var(--cor-laranja);
  color: var(--cor-clara);
}
.aba--ativa:hover { color: var(--cor-clara); }

.filtro-periodo {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.botao-periodo {
  border: 1px solid var(--cor-borda);
  background-color: var(--cor-branco);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.botao-periodo:hover { border-color: var(--cor-coral); }

.botao-periodo--ativo {
  background-color: var(--cor-coral-suave);
  border-color: var(--cor-coral);
  color: var(--cor-vermelho-escuro);
}

.grade-metricas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.cartao-metrica {
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: 16px;
}

.cartao-metrica__rotulo {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  font-weight: 700;
}

.cartao-metrica__valor {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cor-preto);
  margin-top: 6px;
  letter-spacing: -0.02em;
}

.cartao-metrica__periodo {
  display: block;
  font-size: 0.68rem;
  color: var(--cor-cinza-claro);
  margin-top: 2px;
}

.aviso-atualizacao {
  font-size: 0.72rem;
  color: var(--cor-cinza-claro);
  margin-top: 12px;
  text-align: right;
}

/* ------------------------------------------------------------------
   7. PÚBLICO
   ------------------------------------------------------------------ */
.grade-publico {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Gráfico de rosca feito só com CSS (sem biblioteca externa) */
.grafico-genero {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.rosca {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  flex-shrink: 0;
  /* O conic-gradient é montado pelo JavaScript */
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
          mask: radial-gradient(circle, transparent 56%, #000 57%);
}

.legenda-genero { display: grid; gap: 10px; flex: 1; min-width: 150px; }

.item-legenda {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}

.item-legenda__cor {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}

.item-legenda__rotulo { color: var(--cor-texto-suave); }

.item-legenda__valor {
  margin-left: auto;
  font-weight: 800;
  color: var(--cor-preto);
}

/* Barras de faixa etária */
.lista-faixas { display: grid; gap: 12px; }

.faixa-etaria {
  display: grid;
  grid-template-columns: 52px 1fr 48px;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.faixa-etaria__rotulo { color: var(--cor-texto-suave); font-weight: 600; }

.barra {
  background-color: var(--cor-borda);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.barra__preenchimento {
  height: 100%;
  background: linear-gradient(90deg, var(--cor-laranja) 0%, var(--cor-coral) 100%);
  border-radius: 999px;
  transition: width 0.5s ease;
}

.faixa-etaria__valor { font-weight: 800; text-align: right; }

/* Tabela de localidade */
/* min-width:0 impede que a tabela larga estique o cartão no celular:
   sem isso, um item de grid nunca encolhe abaixo do conteúdo. */
.cartao-publico { min-width: 0; }

.rolagem-tabela {
  overflow-x: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.tabela-localidade {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 460px;
}

.tabela-localidade th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-cinza-claro);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cor-borda);
  white-space: nowrap;
}

.tabela-localidade td {
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
}

.tabela-localidade tr:last-child td { border-bottom: none; }

.tabela-localidade .celula-cidade { color: var(--cor-preto); font-weight: 700; }
.tabela-localidade .celula-percentual { color: var(--cor-vermelho-texto); font-weight: 800; }

/* ------------------------------------------------------------------
   8. CONTEÚDOS EM ALTA
   ------------------------------------------------------------------ */
.grade-conteudos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.cartao-conteudo {
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: 16px;
  box-shadow: var(--sombra-cartao);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.cartao-conteudo:hover {
  transform: translateY(-2px);
  border-color: var(--cor-coral);
}

.cartao-conteudo__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cartao-conteudo__formato {
  background-color: var(--cor-laranja);
  color: var(--cor-clara);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: var(--raio-pequeno);
}

.cartao-conteudo__usuario {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
}

.cartao-conteudo__data {
  font-size: 0.72rem;
  color: var(--cor-cinza-claro);
  margin-left: auto;
}

.cartao-conteudo__capa {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
  margin-bottom: 14px;
}

.cartao-conteudo__metricas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 10px;
}

.metrica-conteudo__rotulo {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-cinza-claro);
  font-weight: 700;
}

.metrica-conteudo__valor {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--cor-preto);
}

/* Métrica principal do card (views) ocupa a linha inteira */
.metrica-conteudo--destaque { grid-column: 1 / -1; }
.metrica-conteudo--destaque .metrica-conteudo__valor {
  font-size: 1.5rem;
  color: var(--cor-vermelho-texto);
}

/* ------------------------------------------------------------------
   9. CHAMADA FINAL E RODAPÉ
   ------------------------------------------------------------------ */
.chamada-final {
  background: linear-gradient(160deg, var(--cor-laranja) 0%, var(--cor-laranja-claro) 100%);
  color: var(--cor-clara);
  border-radius: var(--raio-grande);
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 40px;
}

.chamada-final__titulo { font-size: 1.4rem; font-weight: 800; }

.chamada-final__texto {
  margin-top: 10px;
  opacity: 0.92;
  font-size: 0.95rem;
  max-width: 480px;
  margin-inline: auto;
}

.chamada-final__acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.botao-principal,
.botao-secundario {
  display: inline-block;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.botao-principal {
  background-color: var(--cor-clara);        /* botão branco sobre a faixa laranja */
  color: var(--cor-laranja-escuro);          /* texto escuro p/ contraste no branco */
}
.botao-principal:hover { background-color: #FFF3F0; }

.botao-secundario {
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: var(--cor-clara);
}
.botao-secundario:hover { background-color: rgba(255, 255, 255, 0.15); }

.rodape {
  background-color: #0F0C0B;                  /* rodapé bem escuro */
  color: var(--cor-clara);
  padding: 28px 0;
  text-align: center;
  font-size: 0.85rem;
}

.rodape__miudo {
  color: var(--cor-cinza-claro);
  font-size: 0.72rem;
  margin-top: 6px;
}

.aviso-sem-conteudo {
  grid-column: 1 / -1;
  background-color: var(--cor-branco);
  border: 1px dashed var(--cor-cinza-claro);
  border-radius: var(--raio-medio);
  padding: 24px;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
}
.aviso-sem-conteudo code {
  background-color: var(--cor-coral-suave);
  color: var(--cor-vermelho-escuro);
  padding: 2px 6px;
  border-radius: var(--raio-pequeno);
  font-size: 0.82rem;
}

/* ------------------------------------------------------------------
   SISTEMA DE ÍCONES
   Os arquivos em imagens/icones/ são webp monocromáticos com fundo
   transparente. A cor NÃO vem do arquivo: é pintada aqui via CSS
   (mask + currentColor), então trocar a cor da marca no :root muda
   todos os ícones de uma vez, e o mesmo ícone serve em contextos de
   cores diferentes (ex.: branco na aba ativa, vermelho no rótulo).
   ------------------------------------------------------------------ */
.icone {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;          /* a cor vem do texto ao redor */
  vertical-align: -0.125em;
  flex-shrink: 0;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}

/* As máscaras de cada ícone (.icone-<nome>) ficam em css/icones.css,
   embutidas como data URI. Isso é obrigatório para funcionar quando a
   página é aberta direto do disco (file://) no Chrome — ver icones.css. */

/* --- Ícone dentro do botão de rede (topo) --- */
.botao-rede { display: inline-flex; align-items: center; gap: 7px; }
.botao-rede .icone { width: 15px; height: 15px; }

/* --- Ícone dentro das abas Instagram/TikTok --- */
.aba { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.aba .icone { width: 16px; height: 16px; }

/* --- Ícone no título da seção (Performance, Público, Conteúdos) --- */
.secao__titulo { display: flex; align-items: center; gap: 10px; }
.secao__titulo .icone { width: 1em; height: 1em; color: var(--cor-laranja); }

/* --- Ícone no rótulo de cada métrica de Performance --- */
.cartao-metrica__rotulo { display: inline-flex; align-items: center; gap: 6px; }
.cartao-metrica__rotulo .icone { width: 13px; height: 13px; color: var(--cor-vermelho-texto); }

/* --- Ícone no rótulo das métricas dos cards de conteúdo --- */
.metrica-conteudo__rotulo { display: inline-flex; align-items: center; gap: 5px; }
.metrica-conteudo__rotulo .icone { width: 12px; height: 12px; color: var(--cor-vermelho-texto); }

/* --- Ícone de envelope junto ao e-mail --- */
.sobre__email { display: inline-flex; align-items: center; gap: 7px; }
.sobre__email .icone { width: 14px; height: 14px; color: var(--cor-vermelho-texto); }

/* ------------------------------------------------------------------
   MODAL DE PROPOSTA (formulário -> mailto)
   ------------------------------------------------------------------ */
.modal-proposta {
  width: min(92vw, 460px);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  background-color: var(--cor-branco);        /* superfície do card (escura no tema) */
  color: var(--cor-texto);
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* Fundo escurecido atrás do modal */
.modal-proposta::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.formulario { padding: 22px; display: grid; gap: 14px; }

.formulario__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.formulario__titulo { font-size: 1.25rem; font-weight: 800; }

.formulario__fechar {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--raio-pequeno);
}
.formulario__fechar:hover { color: var(--cor-texto); }

.formulario__ajuda {
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
  margin-top: -4px;
}

.campo { display: grid; gap: 6px; }
.campo__rotulo {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
}
.campo__rotulo em { color: var(--cor-vermelho-texto); font-style: normal; }

.campo__entrada {
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);          /* mais escuro que o card */
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: 11px 12px;
  width: 100%;
  resize: vertical;
}
.campo__entrada::placeholder { color: var(--cor-cinza-claro); }
.campo__entrada:focus {
  outline: none;
  border-color: var(--cor-laranja);
  box-shadow: 0 0 0 3px var(--cor-coral-suave);
}
/* seta do select visível no fundo escuro */
select.campo__entrada { appearance: none; cursor: pointer; }

.formulario__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.botao-cancelar,
.botao-enviar {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
}
.botao-cancelar {
  background: transparent;
  color: var(--cor-texto-suave);
  border-color: var(--cor-borda);
}
.botao-cancelar:hover { color: var(--cor-texto); }
.botao-enviar {
  background-color: var(--cor-laranja);
  color: var(--cor-clara);
}
.botao-enviar:hover { background-color: var(--cor-laranja-escuro); }

/* Usada pelo JS para esconder a seção Público na aba TikTok */
.oculto { display: none !important; }

/* ------------------------------------------------------------------
   10. TELAS MAIORES
   ------------------------------------------------------------------ */
@media (min-width: 620px) {
  .grade-metricas   { grid-template-columns: repeat(3, 1fr); }
  .grade-conteudos  { grid-template-columns: repeat(2, 1fr); }
  .chamada-final__acoes { flex-direction: row; justify-content: center; }
  .perfil__nome { font-size: 2.1rem; }
}

@media (min-width: 900px) {
  .cabecalho { padding-bottom: 12px; }

  .banner { height: 300px; background-position: center 46%; }

  .cartao-perfil { margin-top: -80px; padding: 28px 32px; }

  .perfil {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 28px;
  }

  .perfil__foto { width: 132px; height: 132px; }
  .perfil__redes { justify-content: flex-start; }

  .destaques { gap: 16px; }
  .cartao-destaque { padding: 22px 16px; }
  .cartao-destaque__valor { font-size: 1.9rem; }
  .cartao-destaque__rotulo { font-size: 0.8rem; }

  .grade-publico { grid-template-columns: 1fr 1fr; }
  .cartao-publico--largo { grid-column: 1 / -1; }

  .grade-conteudos { grid-template-columns: repeat(3, 1fr); }

  .secao__titulo { font-size: 1.5rem; }
}

/* Impressão / salvar em PDF — força um tema CLARO (o escuro gastaria tinta e
   ficaria ilegível no papel), reprogramando as variáveis só na impressão. */
@media print {
  :root {
    --cor-preto:          #1C1C1C;   /* volta a ser texto escuro */
    --cor-branco:         #FFFFFF;   /* volta a ser superfície clara */
    --cor-fundo:          #FFFFFF;
    --cor-texto:          #1C1C1C;
    --cor-texto-suave:    #555555;
    --cor-cinza-claro:    #999999;
    --cor-borda:          #E5E5E5;
    --cor-vermelho-texto: #CB3314;
    --cor-vermelho-escuro:#AF2B10;
    --cor-grafico-3:      #F5D0C6;
  }
  body { background: #FFFFFF; }
  .banner { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .abas-redes, .filtro-periodo, .chamada-final__acoes { display: none; }
  .cartao, .cartao-metrica, .cartao-conteudo { box-shadow: none; break-inside: avoid; }
}