@charset "UTF-8";
/* =============================================================================
   ds-ux.css — camada de reskin
   -----------------------------------------------------------------------------
   Aplica a linguagem visual do /novo-site sobre o markup do site antigo.
   Não altera conteúdo nem estrutura: só a camada visual.

   Carregar SEMPRE por último, depois de foundation.min.css, main.min.css e do
   style.css local da página. Para reverter o redesign, remova o <link>.

   Os seletores abaixo espelham exatamente os seletores dos style.css legados
   (que variam de página para página na numeração .style-N e no aninhamento).
   Isso mantém a especificidade idêntica, então o override vence pela ordem da
   cascata — sem precisar de !important.

   Tokens extraídos de novo-site/index.html + novo-site/responsive.css.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* superfícies — o novo site alterna #f8fafa e #ffffff, com #0f1c26 na ênfase */
  --ds-bg:            #f8fafa;
  --ds-surface:       #ffffff;
  --ds-deep:          #0f1c26;

  /* tinta */
  --ds-ink:           #0c1a24;  /* títulos */
  --ds-ink-2:         #455864;  /* corpo de texto */
  --ds-muted:         #7b8a94;  /* apoio */
  --ds-muted-2:       #93a1ab;  /* labels, meta */
  --ds-nav-link:      #3d4f5c;

  /* acento */
  --ds-accent:        #ffd21e;
  --ds-accent-hover:  #f0c400;
  --ds-accent-soft:   #fff8e0;  /* hover de item de menu */
  --ds-gold:          #8a6d00;  /* links em texto */
  --ds-gold-hover:    #6b5500;

  /* traços */
  --ds-border:        rgba(12, 26, 36, .08);
  --ds-border-soft:   rgba(12, 26, 36, .07);

  /* rodapé */
  --ds-footer-text:   #9fb2c0;
  --ds-footer-head:   #eef4f8;
  --ds-footer-label:  #5f7381;

  /* tipografia */
  --ds-font-body:     'Hanken Grotesk', system-ui, sans-serif;
  --ds-font-head:     'Poppins', sans-serif;

  /* raio — o legado usava 20–40px; o novo é bem mais contido */
  --ds-radius-sm:     8px;
  --ds-radius:        10px;
  --ds-radius-lg:     14px;
  --ds-radius-xl:     16px;

  /* elevação */
  --ds-shadow-sm:     0 2px 8px rgba(12, 26, 36, .06);
  --ds-shadow:        0 8px 24px rgba(12, 26, 36, .08);
  --ds-shadow-panel:  0 24px 60px rgba(12, 26, 36, .18);
  --ds-shadow-cta:    0 8px 20px rgba(255, 210, 30, .45);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────────────────────────────────── */

html, body {
  font-family: var(--ds-font-body);
  color: var(--ds-ink);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-head);
  font-weight: 700;
  color: var(--ds-ink);
  letter-spacing: -0.5px;
  text-wrap: balance;
}
h1 { letter-spacing: -1.5px; line-height: 1.14; }
p  { text-wrap: pretty; }

a         { color: var(--ds-gold); }
a:hover   { color: var(--ds-gold-hover); }

/* ─────────────────────────────────────────────────────────────────────────────
   RITMO DAS SEÇÕES
   O legado alternava creme (#FFFACD) e amarelo saturado (#F7B000 / #FEE600).
   O novo site alterna cinza-claro e branco e guarda o amarelo para o CTA.
   Só background-color: as seções carregam background-image/position próprios.
   ───────────────────────────────────────────────────────────────────────── */

.style-1 { background-color: var(--ds-bg); }
.style-2 { background-color: var(--ds-surface); }
.style-3 { background-color: var(--ds-bg); }
.style-4 { background-color: var(--ds-surface); }
.style-5 { background-color: var(--ds-bg); }
.style-6 { background-color: var(--ds-surface); }
.style-7 { background-color: var(--ds-bg); }

/* faixa final de conversão — equivalente à seção "Formulário" do novo site */
.style-8 { background-color: var(--ds-accent); }
.style-8 .block h2,
.style-8 .block p { color: var(--ds-ink); }

/* ── faixas de ênfase ──
   Algumas seções tinham texto branco sobre o amarelo saturado #F7B000 —
   contraste ruim que já existia no legado. O novo site resolve isso com
   seções escuras (#0f1c26, como "Distribuição" e "Parceiros"): o texto
   branco continua válido e o contraste passa a ser adequado.

   A numeração .style-N muda de página para página, então a distinção é
   estrutural: só essas faixas carregam um .block (ou .col .box, no caso da
   style-5 dos segmentos). A home usa .block na style-1 e na style-8, que
   têm tratamento próprio e ficam de fora. */
.style-2:has(.block),
.style-3:has(.block),
.style-7:has(.block),
.style-5:has(.col .box) { background-color: var(--ds-deep); }

/* cartões translúcidos dentro das faixas escuras */
.style-5:has(.col .box) .col .box {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--ds-radius-lg);
  box-shadow: none;
}

/* Reafirma o texto claro dentro das faixas escuras: as regras de tinta desta
   folha empatam em especificidade com as legadas (ex.: `.style-3 .flex h2` vs
   `.style-3 .block h2`) e venceriam por vir depois na cascata. O :has() eleva
   a especificidade o bastante para o texto continuar legível. */
.style-2:has(.block) .block h2,
.style-3:has(.block) .block h2,
.style-7:has(.block) .block h2,
.style-5:has(.col .box) .col .box h3 { color: #ffffff; }

.style-2:has(.block) .block p,
.style-3:has(.block) .block p,
.style-7:has(.block) .block p,
.style-5:has(.col .box) .col .box p { color: rgba(255, 255, 255, .82); }

/* a tarja amarela do <b> também aparece nas faixas escuras — o texto herda a
   cor clara do título em vez de voltar para a tinta escura */
.style-2:has(.block) .block h2 b,
.style-3:has(.block) .block h2 b,
.style-7:has(.block) .block h2 b { color: inherit; }

/* ─────────────────────────────────────────────────────────────────────────────
   TIPOGRAFIA DAS SEÇÕES
   ───────────────────────────────────────────────────────────────────────── */

/* títulos — roxo #2813AD passa a tinta escura */
.style-1 .box h1,
.style-1 .flex .box h1,
.style-2 .col .box h3,
.style-2 .col .cor2 h3,
.style-2 .flex .col .box h3,
.style-3 .flex h2,
.style-3 h2,
.style-3 .horizontal .col h3,
.style-3 .vertical .box .col h3,
.style-4 h2,
.style-4 .horizontal .col h3,
.style-4 .vertical .box .col h3,
.style-5 .flex .box h2,
.style-6 .flex .box h2,
.style-7 h2 {
  font-family: var(--ds-font-head);
  font-weight: 700;
  color: var(--ds-ink);
  letter-spacing: -0.5px;
}

/* corpo de texto */
.style-1 .box p,
.style-1 .flex .box p,
.style-1 .flex .share p,
.style-2 .col .box p,
.style-2 .col .content p,
.style-2 .col .cor2 p,
.style-2 .flex .box ul li p,
.style-2 .flex .col .box p,
.style-3 .flex .col .box p,
.style-3 .horizontal .col p,
.style-3 .vertical .box .col p,
.style-4 .box p,
.style-4 .horizontal .col p,
.style-4 .vertical .box .col p,
.style-5 .flex .box p,
.style-6 .flex .box p,
.style-7 .box p {
  font-family: var(--ds-font-body);
  color: var(--ds-ink-2);
}

.style-2 .flex .box ul li b { color: var(--ds-ink); }

/* ── destaque de título ──
   O legado animava um gradiente arco-íris no <b> via background-clip:text.
   O novo usa uma tarja amarela sob a palavra — assinatura visual do redesign. */
.style-1 .box h1,
.style-1 .flex .box h1 b,
.style-3 .flex h2 b,
.style-3 h2 b,
.style-3 .horizontal .col h3 b,
.style-3 .vertical .box .col h3 b,
.style-4 h2 b,
.style-4 .horizontal .col h3 b,
.style-4 .vertical .box .col h3 b,
.style-5 .flex .box h2 b,
.style-6 .flex .box h2 b,
.style-7 h2 b {
  background: none;
  background-image: none;
  animation: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ds-ink);
}
/* a tarja fica só nos <b>; o h1 de /sobre é o próprio elemento e não recebe */
.style-1 .flex .box h1 b,
.style-3 .flex h2 b,
.style-3 h2 b,
.style-3 .horizontal .col h3 b,
.style-3 .vertical .box .col h3 b,
.style-4 h2 b,
.style-4 .horizontal .col h3 b,
.style-4 .vertical .box .col h3 b,
.style-5 .flex .box h2 b,
.style-6 .flex .box h2 b,
.style-7 h2 b {
  font-weight: 700;
  box-shadow: inset 0 -0.28em 0 var(--ds-accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOTÕES — pílula amarela de 30px vira o botão contido do novo site
   ───────────────────────────────────────────────────────────────────────── */

.style-1 .flex .box a,
.style-2 .flex .box a,
.style-3 .horizontal .col a,
.style-3 .vertical .box .col a,
.style-4 .horizontal .col a,
.style-4 .vertical .box .col a,
.style-5 .flex .box a,
.style-6 .flex .box a {
  background: var(--ds-accent);
  background-image: none;
  color: var(--ds-ink);
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-cta);
  transition: background .15s;
}
.style-1 .flex .box a:hover,
.style-2 .flex .box a:hover,
.style-3 .horizontal .col a:hover,
.style-3 .vertical .box .col a:hover,
.style-4 .horizontal .col a:hover,
.style-4 .vertical .box .col a:hover,
.style-5 .flex .box a:hover,
.style-6 .flex .box a:hover {
  background: var(--ds-accent-hover);
  background-image: none;
  animation: none;
  color: var(--ds-ink);
}

/* links de texto (imprensa) seguem como link, não como botão */
.style-7 .box a         { color: var(--ds-gold); }
.style-7 .box a:hover   { color: var(--ds-gold-hover); }
.style-7 .box           { border-left: 3px solid var(--ds-accent); }

/* ─────────────────────────────────────────────────────────────────────────────
   CARTÕES — creme (#FFFACD) vira branco com traço e elevação sutil
   ───────────────────────────────────────────────────────────────────────── */

.style-2 .col .cor2,
.style-2 .flex .col .box,
.style-3 .horizontal,
.style-3 .vertical .box,
.style-4 .box,
.style-4 .horizontal,
.style-4 .vertical .box {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-sm);
}

/* /sobre alterna três cores de cartão: #F7B000 e #B8860B levam texto branco.
   Passam a escuros, como as faixas de ênfase, preservando o texto claro. */
/* .cor1/.cor3 também carregam a classe .box, alcançada pela regra de cartão
   branco acima (0,4,0) — por isso a especificidade extra aqui. */
.style-2 .flex .col .box.cor1,
.style-2 .flex .col .box.cor3 {
  background: var(--ds-deep);
  border: 1px solid rgba(255, 255, 255, .12);
}
.style-2 .flex .col .box.cor1 h3,
.style-2 .flex .col .box.cor3 h3 { color: #ffffff; }
.style-2 .flex .col .box.cor1 p,
.style-2 .flex .col .box.cor3 p  { color: rgba(255, 255, 255, .82); }

/* cartões que já eram brancos ganham traço e reação ao hover */
.style-3 .flex .col .box {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.style-3 .flex .col .box:hover {
  box-shadow: var(--ds-shadow);
  transform: translateY(-2px);
}

/* ── raios: 20–40px do legado passam à escala contida do novo site ── */
.style-1 .box,
.style-2 .col .box,
.style-2 .flex .col .box,
.style-5 .col .box {
  border-radius: var(--ds-radius-lg);
}

.style-3 .horizontal,
.style-3 .vertical .box,
.style-4 .horizontal,
.style-4 .vertical .box,
.style-1 .flex .cover,
.style-5 .flex .cover,
.style-6 .flex .cover {
  border-radius: var(--ds-radius-xl);
}

.style-1 .flex .box a,
.style-2 .flex .box a,
.style-3 .horizontal .col a,
.style-3 .vertical .box .col a,
.style-4 .horizontal .col a,
.style-4 .vertical .box .col a,
.style-5 .flex .box a,
.style-6 .flex .box a {
  border-radius: var(--ds-radius);
}

/* capas de imagem: só a cor de fundo (preservam background-image própria) */
.style-1 .flex .cover,
.style-5 .flex .cover,
.style-6 .flex .cover { background-color: var(--ds-surface); }

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER — barra amarela sólida vira nav branca translúcida com blur.
   Mantém position:fixed: o padding-top das seções depende disso.
   ───────────────────────────────────────────────────────────────────────── */

.header {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
  border-bottom: 1px solid var(--ds-border-soft);
  padding: 12px 0;
}

.header .flex .col2 ul li > a,
.header .flex .col2 ul li .dropdown .dropbtn {
  font-family: var(--ds-font-body);
  color: var(--ds-nav-link);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
}
.header .flex .col2 ul li > a:hover,
.header .flex .col2 ul li .dropdown .dropbtn:hover { color: var(--ds-ink); }

/* ── painéis de dropdown ── */
.header .flex .col2 ul li .dropdown .dropdown-solucoes,
.header .flex .col2 ul li .dropdown .dropdown-segmentos {
  background-color: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-panel);
  top: 46px;
}

.header .flex .col2 ul li .dropdown .dropdown-solucoes .box,
.header .flex .col2 ul li .dropdown .dropdown-segmentos .box {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  transition: background .15s;
}
.header .flex .col2 ul li .dropdown .dropdown-solucoes .box:hover,
.header .flex .col2 ul li .dropdown .dropdown-segmentos .box:hover {
  background: var(--ds-accent-soft);
}

.header .flex .col2 ul li .dropdown .dropdown-solucoes .box b {
  font-family: var(--ds-font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--ds-ink);
}
.header .flex .col2 ul li .dropdown .dropdown-solucoes .box:hover b { color: var(--ds-ink); }
.header .flex .col2 ul li .dropdown .dropdown-solucoes .box p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ds-muted);
}
.header .flex .col2 ul li .dropdown .dropdown-segmentos .box p {
  font-size: 13.5px;
  color: var(--ds-nav-link);
}
.header .flex .col2 ul li .dropdown .dropdown-segmentos .box:hover p { color: var(--ds-ink); }

/* ── CTAs do header — gradientes roxos viram o amarelo do novo site ── */
.header .flex .col3 ul a.link,
.header .flex .col3 ul a.outline {
  background: none;
  background-image: none;
  color: var(--ds-ink);
  font-family: var(--ds-font-body);
  font-weight: 600;
  border-radius: var(--ds-radius-sm);
  padding: 10px 14px;
}
.header .flex .col3 ul a.link:hover,
.header .flex .col3 ul a.outline:hover {
  background: none;
  background-image: none;
  color: var(--ds-gold);
}

.header .flex .col3 ul a.primary {
  background: var(--ds-accent);
  background-image: none;
  color: var(--ds-ink);
  font-family: var(--ds-font-body);
  font-weight: 600;
  border-radius: var(--ds-radius-sm);
  padding: 10px 18px;
}
.header .flex .col3 ul a.primary:hover {
  background: var(--ds-accent-hover);
  color: var(--ds-ink);
}

/* ── header mobile ── */
.header-mobile {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
  border-bottom: 1px solid var(--ds-border-soft);
}
.header-mobile .menu-float li a {
  color: var(--ds-nav-link);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
}
.menu-mobile-suspenso .toggle-container .toggle-body ul li a { color: var(--ds-nav-link); }
.menu-mobile-suspenso .toggle-container .toggle-body p       { color: var(--ds-muted); }

/* ─────────────────────────────────────────────────────────────────────────────
   FORMULÁRIO
   ───────────────────────────────────────────────────────────────────────── */

/* Campos: cantos contidos e traço visível (antes eram branco sobre branco). */
#form-box .float-label input,
#form-box .float-label select {
  font-family: var(--ds-font-body);
  font-size: 15px;
  color: var(--ds-ink);
  border: 1px solid rgba(12, 26, 36, .14);
  border-radius: 9px;
}
#form-box .float-label input:focus,
#form-box .float-label select:focus { border: 1px solid #c9a400 !important; }

#form-box .float-label label,
#form-box .float-label input:not(:placeholder-shown) + label,
#form-box .float-label select:focus ~ label,
#form-box .float-label select:not([value=""]):valid ~ label {
  font-family: var(--ds-font-body);
  color: var(--ds-ink-2);
}
#form-box .float-label input:focus + label,
#form-box .float-label select:focus + label {
  color: var(--ds-ink-2);
  background: var(--ds-surface);
  border-radius: 5px;
}

/* Botão de envio: escuro, como no novo site — o formulário fica sobre a faixa
   amarela, então um botão amarelo desapareceria no fundo. */
#form-box .cta button {
  background: var(--ds-ink);
  background-image: none;
  color: #ffffff;
  font-family: var(--ds-font-head);
  font-weight: 700;
  font-size: 15.5px;
  padding: 15px 16px;
  border-radius: var(--ds-radius);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  transition: background .15s;
}
#form-box .cta button:hover {
  background: #1b2f3d;
  background-image: none;
  animation: none;
  color: #ffffff;
}

/* Nas faixas escuras o botão escuro desapareceria: ali ele inverte para o
   amarelo, mantendo o par claro/escuro sempre em contraste. */
.style-2:has(.block) #form-box .cta button,
.style-3:has(.block) #form-box .cta button,
.style-7:has(.block) #form-box .cta button {
  background: var(--ds-accent);
  color: var(--ds-ink);
}
.style-2:has(.block) #form-box .cta button:hover,
.style-3:has(.block) #form-box .cta button:hover,
.style-7:has(.block) #form-box .cta button:hover {
  background: var(--ds-accent-hover);
  color: var(--ds-ink);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER — roxo sólido vira o azul-petróleo escuro do novo site
   ───────────────────────────────────────────────────────────────────────── */

.footer { background: var(--ds-deep); }
.footer .flex .col b {
  font-family: var(--ds-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ds-footer-label);
}
.footer .flex .col .list li,
.footer .flex .col .link li { color: var(--ds-footer-head); }
.footer .flex .col .list li a,
.footer .flex .col .link li a {
  color: var(--ds-footer-text);
  text-decoration: none;
  font-weight: 400;
}
.footer .flex .col .list li a:hover,
.footer .flex .col .link li a:hover { color: var(--ds-accent); }

.rdp .flex .col p { color: var(--ds-footer-text); }

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVO — acompanha os breakpoints já existentes do legado (1100px)
   ───────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 1100px) {
  .style-1 .flex .cover,
  .style-5 .flex .cover,
  .style-6 .flex .cover { border-radius: 0; }

  .style-2 .flex .col .box,
  .style-3 .flex .col .box,
  .style-5 .col .box { border-radius: var(--ds-radius); }

  .style-3 .horizontal,
  .style-3 .vertical .box,
  .style-4 .horizontal,
  .style-4 .vertical .box {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .style-1 .flex .box a,
  .style-2 .flex .box a,
  .style-3 .horizontal .col a,
  .style-3 .vertical .box .col a,
  .style-4 .horizontal .col a,
  .style-4 .vertical .box .col a,
  .style-5 .flex .box a,
  .style-6 .flex .box a { font-size: 15px; padding: 14px 24px; }
}

@media screen and (max-width: 680px) {
  h1 { letter-spacing: -0.5px; }
  .style-1 .box h1,
  .style-1 .flex .box h1 { font-size: 28px; line-height: 1.18; }
  .style-3 .flex h2,
  .style-3 h2,
  .style-4 h2,
  .style-5 .flex .box h2,
  .style-6 .flex .box h2,
  .style-7 h2,
  .style-8 .block h2 { font-size: 23px; letter-spacing: -0.4px; }
}