/* ==========================================================================
   Reforma Tributária · Contrato Consultoria
   Folha de estilo única. Sem Tailwind, sem build: editar aqui e subir.

   Índice
   1. Variáveis (paleta, tipografia, sombras)
   2. Reset e base
   3. Utilitários mínimos
   4. Cabeçalho e menu
   5. Hero
   6. Cursos
   7. Calculadoras
   8. DataDealer
   9. Rodapé
   10. Modal
   11. Responsivo
   ========================================================================== */

/* 1. VARIÁVEIS ============================================================ */
:root {
  /* Paleta da marca: grafite/bege. Trocar aqui muda o site inteiro. */
  --marca-50:  #faf8f5;
  --marca-100: #f0ebe5;
  --marca-200: #dcd6ce;
  --marca-300: #c3beb8;
  --marca-500: #8f8f91;
  --marca-600: #707072;
  --marca-700: #555557;
  --marca-900: #29292b;
  --marca-950: #1b1b1c;

  /* Texto e linhas */
  --texto:        #0f172a;
  --texto-medio:  #475569;
  --texto-claro:  #64748b;
  --texto-suave:  #94a3b8;
  --linha:        #f1f5f9;
  --linha-forte:  #e2e8f0;
  --fundo-suave:  #f8fafc;

  /* Cores de apoio (usadas nas calculadoras) */
  --positivo:       #059669;
  --positivo-fundo: #ecfdf5;
  --negativo:       #dc2626;
  --negativo-fundo: #fef2f2;

  /* Tipografia */
  --fonte-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Sombras */
  --sombra-card:  0 1px 3px rgba(0, 0, 0, .08);
  --sombra-media: 0 10px 30px -10px rgba(41, 41, 43, .3);
  --sombra-alta:  0 20px 45px -15px rgba(0, 0, 0, .35);

  /* Medidas */
  --largura-max: 1280px;
  --raio:        16px;
  --raio-pequeno: 10px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* O atributo hidden precisa vencer qualquer display definido nas classes
   abaixo, sem isto, elementos com display:flex continuam aparecendo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  color: var(--texto);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.02em;
}

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--marca-900);
  outline-offset: 2px;
}

/* 3. UTILITÁRIOS MÍNIMOS ================================================== */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 20px;
}

.secao { padding: 64px 0; }

/* Fundo pontilhado usado no hero, nas calculadoras e no DataDealer */
.pontilhado {
  background-image: radial-gradient(rgba(41, 41, 43, .08) 1px, transparent 1.5px);
  background-size: 18px 18px;
}

/* Cabeçalho padrão de seção (etiqueta + título + descrição) */
.secao-cabecalho {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.etiqueta {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--marca-100);
  color: var(--marca-900);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.etiqueta--clara {
  background: rgba(255, 255, 255, .1);
  color: var(--marca-200);
}

.secao-cabecalho h2 {
  margin-top: 16px;
  font-size: 30px;
  font-weight: 800;
}

.secao-cabecalho p {
  margin-top: 12px;
  color: var(--texto-medio);
}

/* Botões */
.botao {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .15s, color .15s, border-color .15s;
}

.botao--primario {
  background: var(--marca-900);
  color: #fff;
  box-shadow: var(--sombra-media);
}
.botao--primario:hover { background: var(--marca-600); }

.botao--contorno {
  border: 2px solid var(--marca-900);
  color: var(--marca-900);
}
.botao--contorno:hover { background: var(--marca-50); }

/* Grupo de abas (calculadoras e DataDealer) */
.abas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 900px;
  margin: 0 auto 24px;
  padding: 6px;
  border-radius: var(--raio);
  background: var(--marca-100);
}

.abas__botao {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-medio);
  text-align: center;
  transition: background-color .15s, color .15s;
}

.abas__botao:hover { color: var(--marca-900); }

.abas__botao[aria-selected="true"] {
  background: var(--marca-900);
  color: #fff;
  box-shadow: var(--sombra-media);
}

/* 4. CABEÇALHO ============================================================ */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: .75rem;
  padding-bottom: .75rem;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  transition: box-shadow .2s, background-color .2s;
}

/* .rolado é adicionado pelo JS assim que a página desce */
.cabecalho.rolado {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* O respiro vertical fica no .cabecalho. Aqui ele não funcionava: a regra
     ".container { padding: 0 32px }" da media query de 768px zera o vertical,
     e no desktop a logo encostava nas bordas do cabeçalho. */
}

.cabecalho__logo img { height: 34px; width: auto; }

.menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.menu__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-medio);
  transition: color .15s;
}
.menu__link:hover { color: var(--marca-900); }

.menu__cta {
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--marca-900);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sombra-media);
  transition: background-color .15s;
}
.menu__cta:hover { background: var(--marca-600); }

.menu-botao {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-pequeno);
  color: var(--marca-900);
}

.menu-mobile {
  display: none;
  padding: 8px 20px 16px;
  border-top: 1px solid var(--linha);
  background: #fff;
}

.menu-mobile.aberto {
  display: block;
  /* A gaveta mora dentro do cabeçalho fixo: mais alta que a tela, o fim
     ficava inalcançável (rolar a página não adianta, o cabeçalho acompanha).
     Altura máxima da tela e rolagem por dentro; dvh desconta a barra de
     endereço do celular. */
  max-height: calc(100vh - var(--altura-cabecalho, 68px));
  max-height: calc(100dvh - var(--altura-cabecalho, 68px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
/* com a gaveta aberta, a página de trás não rola junto */
html.gaveta-aberta, html.gaveta-aberta body { overflow: hidden; }

.menu-mobile a {
  display: block;
  padding: 12px;
  border-radius: var(--raio-pequeno);
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}
.menu-mobile a:hover { background: var(--marca-50); color: var(--marca-900); }

/* 5. HERO ================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--marca-50), #fff 60%);
}

.hero__grade {
  position: relative;
  display: grid;
  gap: 48px;
  align-items: center;
  /* só o vertical: este elemento também é .container, e "64px 0" zerava o
     recuo lateral dele (o texto encostava nas bordas no celular) */
  padding-top: 64px;
  padding-bottom: 64px;
}

.hero h1 {
  margin-top: 20px;
  /* cresce com a tela e nunca passa da borda: 30px no celular pequeno,
     46px no desktop */
  font-size: clamp(30px, 7.2vw, 46px);
  overflow-wrap: break-word;
  font-weight: 800;
  line-height: 1.1;
}

.hero h1 .destaque { color: var(--marca-600); }

.hero__texto {
  margin-top: 20px;
  max-width: 580px;
  color: var(--texto-medio);
  font-size: 16px;
  line-height: 1.65;
}

.hero__texto strong { color: #1e293b; }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__cards { display: grid; gap: 16px; }

.card-impacto {
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(4px);
  box-shadow: var(--sombra-card);
  transition: transform .2s;
}
.card-impacto:hover { transform: translateY(-2px); }

.card-impacto__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.card-impacto__sigla {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-pequeno);
  background: var(--marca-900);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 14px;
  font-weight: 800;
}

.card-impacto h3 { font-size: 18px; font-weight: 700; }

.card-impacto p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-medio);
}

/* 6. CURSOS =============================================================== */
.cursos { background: var(--marca-950); }

.cursos .secao-cabecalho h2 { color: #fff; }
.cursos .secao-cabecalho p  { color: #cbd5e1; }

.cursos__palco { max-width: 900px; margin: 0 auto; position: relative; }

.video-moldura {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: var(--raio);
  background: #000;
  box-shadow: var(--sombra-alta);
}

.video-moldura iframe,
.video-capa { width: 100%; height: 100%; border: 0; }

.video-capa { position: relative; display: block; }

.video-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  transition: opacity .2s;
}
.video-capa:hover img { opacity: .7; }

.video-capa__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-capa__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: rgba(112, 112, 114, .95);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
  transition: transform .2s;
}
.video-capa:hover .video-capa__play span { transform: scale(1.1); }

.seta {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #fff;
  color: var(--marca-900);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  transition: background-color .15s;
}
.seta:hover { background: var(--marca-100); }
.seta--anterior { left: -16px; }
.seta--proximo  { right: -16px; }

.cursos__info { margin-top: 20px; text-align: center; }

.cursos__info h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.cursos__meta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--texto-suave);
}

.cursos__material {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--marca-300);
  transition: color .15s;
}
.cursos__material:hover { color: var(--marca-100); }

.pontos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 20px;
}

.pontos button {
  /* O ponto continua com 10px; a área que responde ao toque é a borda
     transparente de 17px em volta (44px no total). O background-clip impede
     que o fundo pinte a borda. Só background-color aqui: o atalho "background"
     resetaria o clip para border-box e o ponto viraria uma pílula de 44px. */
  width: 10px;
  height: 10px;
  padding: 0;
  box-sizing: content-box;
  border: 17px solid transparent;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .25);
  background-clip: padding-box;
  transition: width .2s, background-color .2s;
}
.pontos button:hover { background-color: rgba(255, 255, 255, .4); }
.pontos button[aria-current="true"] {
  width: 28px;
  background-color: var(--marca-500);
}

.cursos__impactos {
  display: grid;
  gap: 16px;
  margin-top: 56px;
}

.cursos__impactos .card-impacto {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
}
.cursos__impactos .card-impacto h3 { color: #fff; }
.cursos__impactos .card-impacto p  { color: #cbd5e1; }

/* 7. CALCULADORAS ========================================================= */
.calculadoras { background: #fff; }

/* Catálogo ao lado do simulador: o bloco é um pouco mais largo que o
   antigo (1024px) para a lista caber sem apertar o simulador. */
.calculadoras .container { max-width: 1280px; }

.catalogo {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.catalogo__nav {
  position: sticky;
  top: 88px;                       /* abaixo do cabeçalho fixo */
}
.catalogo__caixa {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 110px);
  padding: 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--marca-50);
}
.catalogo__busca {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--texto);
}
.catalogo__busca:focus { outline: 2px solid var(--marca-900); outline-offset: 1px; }
.catalogo__lista {
  margin-top: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.catalogo__grupo + .catalogo__grupo { margin-top: 14px; }
.catalogo__grupo-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 0 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-claro);
}
.catalogo__conta {
  font-size: 11px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}
.catalogo__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: var(--texto);
  transition: background-color .12s;
}
.catalogo__item:hover { background: #fff; }
.catalogo__item:focus-visible { outline: 2px solid var(--marca-900); outline-offset: -2px; }
.catalogo__item[aria-current="true"] {
  background: var(--marca-900);
  border-left-color: var(--marca-300);
  color: #fff;
  font-weight: 600;
}
.catalogo__vazio { padding: 12px 10px; font-size: 13px; color: var(--texto-claro); }

/* Imposto Seletivo: seção própria, logo depois das calculadoras */
.imposto-seletivo { background: var(--marca-50); }
.imposto-seletivo .container { max-width: 1280px; }
@media (max-width: 600px) { #is-painel { padding: 14px 12px; } }

/* O título do simulador usa a mesma classe dos itens do menu (.painel__titulo,
   14px, definida mais abaixo); aqui ele volta ao tamanho de título. */
#calc-painel > .painel__titulo { margin-top: 4px; font-size: 22px; font-weight: 800; line-height: 1.25; }
@media (max-width: 600px) {
  #calc-painel { padding: 14px 12px; }
  #calc-painel > .painel__titulo { font-size: 19px; }
  #calc-painel .simulador-frame { border-radius: 10px; }
}

/* no computador o botão "Trocar" não existe: a lista está sempre à vista */
.catalogo__alternar { display: none; }

@media (max-width: 959px) {
  .catalogo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .catalogo__nav { position: static; }
  .catalogo__alternar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--marca-50);
    text-align: left;
  }
  .catalogo__alternar-texto { display: grid; gap: 2px; min-width: 0; }
  .catalogo__alternar-rotulo {
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-claro);
  }
  .catalogo__alternar-atual { font-size: 15px; font-weight: 700; color: var(--texto); line-height: 1.3; }
  .catalogo__alternar-acao {
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--marca-900);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
  }
  .catalogo__alternar[aria-expanded="true"] .catalogo__alternar-acao { background: var(--marca-600); }
  .catalogo__caixa { display: none; margin-top: 8px; max-height: 70vh; }
  .catalogo__caixa.aberta { display: flex; }
  .catalogo__item { padding: 11px 10px; font-size: 14.5px; }
}

.painel {
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-card);
}

.painel__etiqueta {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--texto-claro);
}

.painel__titulo {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 800;
}

.painel__descricao {
  margin-top: 4px;
  font-size: 14px;
  color: var(--texto-claro);
}

.painel__corpo { margin-top: 20px; }

/* Campos das calculadoras */
.campos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.campo { flex: 1 1 160px; min-width: 150px; }

.campo label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-claro);
}

.campo input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: var(--raio-pequeno);
  background: var(--fundo-suave);
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  outline: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.campo input:focus {
  border-color: var(--marca-500);
  background: #fff;
  box-shadow: 0 0 0 3px var(--marca-200);
}

/* Cartões de resultado */
.resultados {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
}

.resultado {
  padding: 16px;
  border-radius: 12px;
  background: var(--marca-50);
}

.resultado--positivo { background: var(--positivo-fundo); }

.resultado--errado {
  border-left: 4px solid var(--negativo);
  background: var(--negativo-fundo);
}

.resultado--correto {
  border-left: 4px solid var(--positivo);
  background: var(--positivo-fundo);
}

.resultado__rotulo {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-claro);
}

.resultado--errado  .resultado__rotulo { color: var(--negativo); }
.resultado--correto .resultado__rotulo { color: var(--positivo); }

.resultado__valor {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 800;
}

.resultado__nota {
  margin-top: 2px;
  font-size: 11px;
  color: var(--texto-claro);
}

.resultado__legenda {
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--texto-claro);
}

/* Tabelinha dentro dos cartões de resultado */
.tabela-resultado { width: 100%; border-collapse: collapse; }

.tabela-resultado td {
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--texto-medio);
}

.tabela-resultado td:last-child {
  text-align: right;
  font-weight: 600;
  color: #334155;
  font-variant-numeric: tabular-nums;
}

.tabela-resultado tr.destaque td {
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, .1);
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 800;
  color: var(--texto);
}

.tabela-resultado tr.liquido td {
  padding-top: 6px;
  font-weight: 700;
  color: var(--marca-700);
}
.resultado--errado  .tabela-resultado tr.liquido td { color: var(--negativo); }
.resultado--correto .tabela-resultado tr.liquido td { color: var(--positivo); }

.aviso {
  padding: 12px;
  border-radius: var(--raio-pequeno);
  background: var(--linha);
  text-align: center;
  font-size: 14px;
  color: #334155;
}

.aviso--marca { margin-top: 10px; background: var(--marca-50); }
.aviso .sobe  { font-weight: 800; color: var(--negativo); }
.aviso .desce { font-weight: 800; color: var(--positivo); }

.rodape-nota {
  margin-top: 16px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--texto-suave);
}

/* Iframe dos simuladores: a altura é ajustada pelo JS conforme o conteúdo,
   por isso não há barra de rolagem interna. */
.simulador-frame {
  display: block;
  width: 100%;
  height: 1200px;
  border: 1px solid var(--linha);
  border-radius: 12px;
}

/* 8. DATADEALER =========================================================== */
.datadealer { background: var(--marca-50); }

.painel--bi { padding: 12px; }

/* Os relatórios do Power BI têm tela 16:9; manter a proporção evita
   faixas vazias e corte do conteúdo. */
.bi-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  background: var(--marca-50);
}

/* 9. RODAPÉ =============================================================== */
.rodape {
  padding: 56px 0 0;
  background: var(--marca-950);
  color: #cbd5e1;
}

.rodape__grade { display: grid; gap: 40px; }

.rodape__logo { height: 40px; width: auto; margin-bottom: 16px; }

.rodape__sobre {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--texto-suave);
}

.rodape h3 {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
}

.rodape__lista li + li { margin-top: 10px; }

.rodape__lista a,
.rodape__lista span.valor {
  font-size: 14px;
  color: var(--texto-suave);
  transition: color .15s;
}
.rodape__lista a:hover { color: #fff; }

.rodape__rotulo {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
}

.rodape__base {
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  font-size: 12px;
  color: #64748b;
}

/* 10. MODAL (material da aula) ============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, .7);
}

.modal__caixa {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  overflow: hidden;
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-alta);
}

.modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--linha);
}

.modal__topo h3 {
  font-size: 15px;
  font-weight: 700;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 16px;
}

.modal__fechar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--texto-claro);
  transition: background-color .15s, color .15s;
}
.modal__fechar:hover { background: var(--linha); color: var(--texto); }

.modal__corpo { flex: 1; }
.modal__corpo iframe { width: 100%; height: 100%; border: 0; }

/* 11. RESPONSIVO ========================================================== */
@media (min-width: 640px) {
  .secao-cabecalho h2 { font-size: 36px; }
  .abas { display: flex; border-radius: 999px; }
  .abas__botao { flex: 1; }
  .resultados--duas { grid-template-columns: repeat(2, 1fr); }
  .painel { padding: 28px; }
  .painel--bi { padding: 12px; }
  .modal { padding: 24px; }
  .modal__caixa { height: 92vh; }
}

@media (min-width: 768px) {
  .container { padding: 0 32px; }
  .secao { padding: 96px 0; }
  .hero__grade { padding-top: 96px; padding-bottom: 96px; }
  .cabecalho__logo img { height: 38px; }
  .menu-botao { display: none; }
}

@media (min-width: 1024px) {
  .hero__grade { grid-template-columns: repeat(2, 1fr); }
  .cursos__impactos { grid-template-columns: repeat(3, 1fr); }
  .resultados--tres { grid-template-columns: repeat(3, 1fr); }
  .rodape__grade { grid-template-columns: 2fr 1fr 1.4fr; }
}

/* Abaixo de 768px o menu vira botão e o painel encolhe */
@media (max-width: 767px) {
  .menu { display: none; }
  .menu-botao { display: flex; }
  .seta--anterior { left: 4px; }
  .seta--proximo  { right: 4px; }
  .bi-frame { min-height: 300px; }
}

/* 12. DATADEALER EM DESTAQUE ============================================== */
/* A seção subiu para logo depois do topo e ganhou fundo escuro: é o que
   diferencia a plataforma, e antes ficava escondida no rodapé da página. */
.datadealer {
  background: var(--marca-950);
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px);
  background-size: 18px 18px;
}

.datadealer .secao-cabecalho { max-width: 720px; }
.datadealer .secao-cabecalho h2 { color: #fff; font-size: 32px; }
.datadealer .secao-cabecalho p  { color: #cbd5e1; font-size: 17px; }

.dd-cartoes {
  display: grid;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 32px;
}

.dd-cartao {
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .04);
}

.dd-cartao h3 {
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.dd-cartao p {
  font-size: 14px;
  line-height: 1.6;
  color: #cbd5e1;
}

/* faixa de abas sobre fundo escuro */
.abas--claras { background: rgba(255, 255, 255, .08); }
.abas--claras .abas__botao { color: #cbd5e1; }
.abas--claras .abas__botao:hover { color: #fff; }
.abas--claras .abas__botao[aria-selected="true"] {
  background: #fff;
  color: var(--marca-900);
}

.datadealer .painel--bi {
  max-width: 1280px;
  margin: 0 auto;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
}

/* destaque discreto do item no menu */
.menu__link--destaque { color: var(--marca-900); font-weight: 700; }
.menu__link--destaque::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 2px;
  border-radius: 2px;
  background: var(--marca-900);
}

/* 13. CHECKLIST OPERACIONAL =============================================== */
.checklist { background: var(--marca-50); }
.checklist .container { max-width: 1024px; }

.checklist-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 20px;
}

.checklist-progresso {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.checklist-progresso__trilho {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--marca-200);
}

.checklist-progresso__feito {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--marca-900);
  transition: width .25s;
}

.checklist-progresso__texto {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-medio);
  white-space: nowrap;
}

.botao--pequeno { padding: 8px 18px; font-size: 13px; }

.abas__conta {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  opacity: .65;
}

.abas__botao--completo .abas__conta { opacity: 1; color: var(--positivo); }
.abas__botao[aria-selected="true"].abas__botao--completo .abas__conta { color: #6ee7b7; }

/* itens marcáveis */
.lista-check { display: grid; gap: 10px; }

.check-item {
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s, background-color .15s;
}

.check-item:hover { border-color: var(--marca-300); }

.check-item--feito {
  border-color: #a7f3d0;
  background: var(--positivo-fundo);
}

.check-item label {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.check-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--marca-900);
  cursor: pointer;
}

.check-item__corpo { display: block; }

.check-item__titulo {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
}

.check-item--feito .check-item__titulo { color: #065f46; }

.check-item__texto {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texto-medio);
}

.check-item__base {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--marca-100);
  font-size: 11px;
  font-weight: 700;
  color: var(--marca-700);
}

/* blocos de apoio dentro de um tema */
.aviso-bloco {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid #f59e0b;
  border-radius: 0 10px 10px 0;
  background: #fffbeb;
}

.aviso-bloco strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #b45309;
}

.aviso-bloco p { font-size: 13.5px; line-height: 1.6; color: #78350f; }

.exemplo-bloco {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--marca-50);
}

.exemplo-bloco h4 {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-claro);
}

.exemplo-bloco dl { display: grid; gap: 8px; }
.exemplo-bloco dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}
.exemplo-bloco dt { color: var(--texto-medio); }
.exemplo-bloco dd {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--texto);
  white-space: nowrap;
}

/* mini simulador dentro do tema 4 */
.mini-sim {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--marca-200);
  border-radius: 12px;
  background: var(--marca-50);
}

.mini-sim h4 {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 800;
  color: var(--texto);
}

.mini-sim__intro {
  margin: 6px 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texto-medio);
}

.mini-sim .campo input { background: #fff; }

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

/* 14. MATERIAL DAS AULAS =================================================== */
.cursos__acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.cursos__acoes .cursos__material { margin-top: 0; }
.cursos__pdf { text-decoration: none; }

.materiais {
  max-width: 1024px;
  margin: 48px auto 0;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .04);
}

.materiais__titulo {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.materiais__sub { margin: 4px 0 18px; font-size: 14px; color: #cbd5e1; }
.materiais .abas { margin-bottom: 18px; }

.materiais__lista { display: grid; gap: 12px; align-items: stretch; }

.material {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* altura igual na linha, em qualquer navegador; os botões ficam no rodapé */
  height: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}

.material__dia {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--marca-300);
}

.material__titulo { font-size: 15px; font-weight: 700; line-height: 1.4; color: #fff; }
.material__descricao { margin: 0; font-size: 13px; line-height: 1.5; color: #cbd5e1; }
.material--documento { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
.material--documento .material__dia { color: #fff; }

.material__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.material__ver,
.material__pdf {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.material__ver {
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: #fff;
}
.material__ver:hover { border-color: #fff; }

.material__pdf { border: 1px solid #fff; background: #fff; color: var(--marca-900); }
.material__pdf:hover { background: var(--marca-100); }

.material__sem-pdf { align-self: center; font-size: 12px; color: #94a3b8; }

@media (min-width: 700px) {
  .materiais__lista { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .materiais__lista { grid-template-columns: repeat(3, 1fr); }
}

/* TELAS DE TOQUE ============================================================
   Dedo é menos preciso que mouse: todo controle tem pelo menos 44px, a medida
   recomendada pela Apple e pelo Google. */
@media (pointer: coarse) {
  .botao, .menu-botao, .seta, .abas__botao, .cursos__material, .menu__cta,
  .material__ver, .material__pdf, .checklist__item label, button[type=submit] {
    min-height: 44px;
  }
  .menu-botao, .seta { min-width: 44px; }
  .busca-gatilho, .conta-gatilho { min-height: 44px; min-width: 44px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; }
}

/* CHECKLIST: BLOCOS DO TEMA DE CONTRATOS ================================== */
.ligacao-bloco,
.documento-bloco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--marca-50);
}
.ligacao-bloco p, .documento-bloco p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-medio); }
.documento-bloco strong { display: block; margin-bottom: 4px; font-size: 14px; }
.ligacao-bloco .botao, .documento-bloco .botao { flex-shrink: 0; }

.formulario-bloco {
  margin-top: 22px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.formulario-bloco__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--linha);
  background: var(--marca-50);
}
.formulario-bloco__cabecalho h4 { margin: 0 0 4px; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 800; }
.formulario-bloco__cabecalho p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--texto-medio); }
.formulario-bloco__cabecalho .botao { flex-shrink: 0; }
.formulario-bloco__texto {
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--texto);
}
.formulario-bloco__texto p { margin: 0 0 12px; }
.formulario-bloco__assunto { color: var(--texto-medio); }
.formulario-bloco__texto ol { margin: 0 0 14px; padding-left: 22px; }
.formulario-bloco__texto li { margin-bottom: 10px; }
.formulario-bloco__uso {
  padding: 14px 22px 18px;
  border-top: 1px dashed var(--linha-forte);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-medio);
}
.formulario-bloco__uso strong { display: block; margin-bottom: 4px; color: var(--texto); }
.botao--pequeno { padding: 9px 16px; font-size: 13.5px; }

@media (max-width: 640px) {
  .ligacao-bloco, .documento-bloco, .formulario-bloco__cabecalho { flex-direction: column; align-items: stretch; }
  .formulario-bloco__texto { padding: 16px; }
}

/* 16. MENU PRINCIPAL: PAINÉIS, BUSCA E CONTA ================================
   Poucos itens no topo (DataDealer, Ferramentas, Conteúdo, Contato); o resto
   em painéis agrupados, com uma linha de descrição por destino, e uma busca
   que alcança qualquer calculadora, tema, aula ou documento. */

.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__grupo { position: relative; }

.nav__link,
.nav__gatilho {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-medio);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.nav__link:hover, .nav__gatilho:hover,
.nav__gatilho[aria-expanded="true"] { color: var(--marca-900); background: var(--marca-50); }
.nav__gatilho svg { transition: transform .15s; }
.nav__gatilho[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__link--destaque { color: var(--marca-900); font-weight: 700; }
.nav__link--destaque::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px;
  height: 2px; border-radius: 2px; background: var(--marca-900);
}
.nav__lista > li { position: relative; }

.nav__painel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 300px;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
}
/* ponte invisível: o mouse atravessa o vão entre o botão e o painel sem fechar */
.nav__painel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.painel__grade { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 4px 12px; }
.painel__coluna { display: flex; flex-direction: column; gap: 2px; }
.painel__rotulo {
  padding: 8px 12px 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-suave, #94a3b8);
}
.painel__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--texto);
  text-decoration: none;
  transition: background-color .12s;
}
.painel__item:hover, .painel__item:focus-visible { background: var(--marca-50); outline: none; }
.painel__titulo { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--marca-900); }
.painel__desc {
  font-size: 12.5px; line-height: 1.4; color: var(--texto-medio);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ações da direita: busca, CTA, conta, hambúrguer */
.cabecalho__acoes { display: flex; align-items: center; gap: 10px; }

.busca-gatilho {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 10px 0 12px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: #fff; color: var(--texto-medio);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.busca-gatilho:hover { border-color: var(--marca-900); color: var(--marca-900); }
.busca-gatilho__atalho, .busca-global__rodape kbd {
  padding: 2px 6px; border: 1px solid var(--linha); border-bottom-width: 2px; border-radius: 6px;
  background: var(--marca-50); font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--texto-medio);
}

.conta-gatilho {
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 8px 0 4px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: #fff; color: var(--texto-medio); cursor: pointer;
}
.conta-gatilho:hover, .conta-gatilho[aria-expanded="true"] { border-color: var(--marca-900); color: var(--marca-900); }
.conta-gatilho__inicial {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--marca-900); color: #fff; font-size: 13px; font-weight: 800;
}
.nav__painel--conta { left: auto; right: 0; transform: none; min-width: 240px; padding: 8px; }
.conta__quem { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--linha); }
.conta__quem strong { font-size: 14px; color: var(--marca-900); }
.conta__quem span { font-size: 12.5px; color: var(--texto-medio); overflow-wrap: anywhere; }
.conta__link {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--texto); text-align: left; text-decoration: none; cursor: pointer;
}
.conta__link:hover { background: var(--marca-50); color: var(--marca-900); }
.conta__sair { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--linha); }

/* gaveta do celular */
.menu-mobile__busca {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 4px; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: 12px; background: var(--marca-50);
  font: inherit; font-size: 14px; color: var(--texto-medio); cursor: pointer; text-align: left;
}
.menu-mobile__grupo { padding: 6px 0; border-top: 1px solid var(--linha); }
.menu-mobile__grupo:first-child { border-top: 0; }
.menu-mobile__titulo {
  display: block; padding: 10px 12px 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #94a3b8;
}
.menu-mobile form { margin: 0; }
.menu-mobile form button {
  display: block; width: 100%; padding: 12px; border: 0; border-radius: var(--raio-pequeno); background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: #334155; text-align: left; cursor: pointer;
}
.menu-mobile form button:hover { background: var(--marca-50); color: var(--marca-900); }

/* janela de busca */
.busca-global { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.busca-global__fundo { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); }
.busca-global__caixa {
  position: relative; width: 100%; max-width: 640px; max-height: 76vh;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgba(15, 23, 42, .35);
}
.busca-global__entrada { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linha); color: var(--texto-medio); }
.busca-global__entrada input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: 16px; color: var(--texto);
}
.busca-global__entrada input::-webkit-search-cancel-button { display: none; }
.busca-global__esc {
  padding: 4px 8px; border: 1px solid var(--linha); border-radius: 6px; background: var(--marca-50);
  font: 600 11px/1.3 ui-monospace, Menlo, monospace; color: var(--texto-medio); cursor: pointer;
}
.busca-global__lista { flex: 1; overflow-y: auto; margin: 0; padding: 6px 8px 8px; list-style: none; }
.busca-global__grupo { padding: 12px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #94a3b8; }
.busca-global__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.busca-global__item[aria-selected="true"] { background: var(--marca-900); }
.busca-global__item[aria-selected="true"] .busca-global__titulo, .busca-global__item[aria-selected="true"] .busca-global__desc { color: #fff; }
.busca-global__titulo { font-size: 14px; font-weight: 700; color: var(--marca-900); }
.busca-global__desc { font-size: 12.5px; color: var(--texto-medio); }
.busca-global__vazio { padding: 22px 14px; font-size: 14px; color: var(--texto-medio); text-align: center; }
.busca-global__rodape { padding: 10px 16px; border-top: 1px solid var(--linha); font-size: 12px; color: var(--texto-medio); }

/* celular e tablet: gaveta; desktop: barra completa */
@media (max-width: 1023px) {
  /* na plataforma a conta vai para a gaveta; nas telas de conta ela fica */
  .cabecalho__cta, .busca-gatilho__texto, .busca-gatilho__atalho, .cabecalho__acoes .nav__grupo--conta { display: none; }
  .busca-gatilho { width: 40px; padding: 0; justify-content: center; }
  .menu-botao { display: flex; }
}
@media (min-width: 1024px) {
  .nav { display: block; }
  .menu-mobile, .menu-mobile.aberto { display: none; }
  .menu-botao { display: none; }
}
/* entre 1024 e 1279px a barra fica apertada: busca vira só ícone */
@media (min-width: 1024px) and (max-width: 1279px) {
  .busca-gatilho__texto, .busca-gatilho__atalho { display: none; }
  .busca-gatilho { width: 40px; padding: 0; justify-content: center; }
  .nav__link, .nav__gatilho { padding-left: 8px; padding-right: 8px; }
}
/* nenhum item do cabeçalho quebra em duas linhas */
.nav__link, .nav__gatilho, .cabecalho__cta { white-space: nowrap; }
@media (max-width: 640px) {
  .busca-global { padding-top: 12px; }
  .busca-global__caixa { max-height: calc(100vh - 24px); }
  .painel__grade { grid-template-columns: 1fr; }
}

/* 17. SELO DO DATADEALER NO PAINEL ========================================
   Propaganda do DataDealer sobre o próprio relatório, no canto inferior
   direito, logo acima da barra do Power BI (zoom, tela cheia, compartilhar),
   que continua livre. Cobre as últimas linhas da tabela, então é esperto:
   com o mouse dentro do relatório ele recolhe para só a logo; volta inteiro
   quando o mouse sai ou passa sobre ele. Em tela de toque, onde não existe
   "passar o mouse", vira uma faixa abaixo do painel. */
.painel--bi { position: relative; }

.dd-selo {
  --dd-fundo: #0e0e0f;
  --dd-verde: #8cc63f;
  position: absolute;
  right: 26px;
  bottom: 58px;                /* 12px do cartão + ~46px da barra do Power BI */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 52px);
  padding: 10px 14px 10px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: var(--dd-fundo);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  color: #fff;
  text-decoration: none;
  transition: opacity .25s ease, transform .25s ease, padding .25s ease, box-shadow .2s ease;
}
.dd-selo:hover, .dd-selo:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .55), 0 0 0 1px rgba(140, 198, 63, .45);
  outline: none;
}
.dd-selo__marca {
  display: flex; align-items: center;
  padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, .18);
  transition: padding .25s ease, border-color .25s ease;
}
/* a logo oficial tem "data" escuro: sobre o fundo escuro, sai toda clara */
.dd-selo__marca img { display: block; height: 22px; width: auto; filter: brightness(0) invert(1); }
.dd-selo__marca-texto { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.dd-selo__marca-texto b { color: var(--dd-verde); font-weight: 800; }
.dd-selo__texto {
  display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap;
  max-width: 260px; overflow: hidden;
  transition: max-width .25s ease, opacity .2s ease;
}
.dd-selo__chamada { font-size: 11px; font-weight: 600; color: var(--dd-verde); }
.dd-selo__acao { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: #fff; }
.dd-selo__acao svg { transition: transform .2s ease; }
.dd-selo:hover .dd-selo__acao svg { transform: translateX(3px); }

/* recolhido: mouse lendo o relatório */
.dd-selo.recolhido { opacity: .72; padding: 8px 12px; }
.dd-selo.recolhido .dd-selo__marca { padding-right: 0; border-color: transparent; }
.dd-selo.recolhido .dd-selo__texto { max-width: 0; opacity: 0; }
.dd-selo.recolhido .dd-selo__marca img { height: 18px; }
.dd-selo.recolhido:hover, .dd-selo.recolhido:focus-visible { opacity: 1; }

/* chega com um destaque discreto quando o painel entra na tela, uma vez */
@keyframes dd-selo-chega {
  0%   { opacity: 0; transform: translateY(12px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.dd-selo.visivel:not(.recolhido) { animation: dd-selo-chega .45s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .dd-selo, .dd-selo.visivel, .dd-selo__texto, .dd-selo__marca { animation: none; transition: none; }
}

/* toque (celular, tablet) e telas estreitas: faixa abaixo do painel */
@media (hover: none), (max-width: 767px) {
  .dd-selo, .dd-selo:hover, .dd-selo.visivel, .dd-selo.recolhido {
    position: static;
    transform: none;
    animation: none;
    opacity: 1;
    max-width: none;
    margin-top: 12px;
    padding: 12px 16px;
    justify-content: space-between;
    border-radius: 12px;
    box-shadow: none;
  }
  .dd-selo.recolhido .dd-selo__texto { max-width: none; opacity: 1; }
  .dd-selo.recolhido .dd-selo__marca { padding-right: 14px; border-color: rgba(255, 255, 255, .18); }
  .dd-selo__texto { white-space: normal; max-width: none; }
}
@media (max-width: 380px) {
  .dd-selo, .dd-selo:hover { flex-wrap: wrap; gap: 8px; }
  .dd-selo__marca { border-right: 0; padding-right: 0; }
}

/* links legais no rodapé (Termos e Privacidade) */
.rodape__legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.rodape__legal a { font-size: 12.5px; color: inherit; opacity: .8; }
.rodape__legal a:hover { opacity: 1; }

/* contraste do rodapé: o cinza anterior dava 3,6:1 (mínimo é 4,5:1) */
.rodape__base { color: #a3aec0; }
.rodape__legal a { color: #cbd5e1; opacity: 1; }
.rodape__legal a:hover { color: #fff; }

/* botão flutuante de WhatsApp (ícone próprio, não a marca) */
.botao-whatsapp {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px;
  border-radius: 999px; background: #1f9d55; color: #fff; font-weight: 700; font-size: 14.5px; text-decoration: none;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28); transition: transform .15s ease, background-color .15s ease;
}
.botao-whatsapp:hover, .botao-whatsapp:focus-visible { background: #17834a; transform: translateY(-2px); outline: none; }
@media (max-width: 480px) { .botao-whatsapp { width: 52px; height: 52px; padding: 0; justify-content: center; } .botao-whatsapp span { display: none; } }
@media print { .botao-whatsapp { display: none; } }

/* aviso de cookies (só quando há pixel cadastrado) */
.cookies-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: #1b1b1c; color: #e4e4e7; box-shadow: 0 -10px 30px rgba(15, 23, 42, .25); }
.cookies-barra[hidden] { display: none; }
.cookies-barra p { margin: 0; max-width: 760px; font-size: 13.5px; line-height: 1.55; }
.cookies-barra a { color: #fff; text-decoration: underline; }
.cookies-barra__botoes { display: flex; gap: 8px; }
.cookies-barra .botao--contorno { color: #fff; border-color: #a1a1aa; background: transparent; }
.cookies-barra .botao--primario { background: #fff; color: #1b1b1c; border-color: #fff; }
.com-aviso-cookies .botao-whatsapp { bottom: calc(18px + var(--altura-cookies, 0px)); }