/* ==========================================================================
   CDIX — Contabilidade Digital
   Folha de estilo única. HTML puro, sem framework e sem build.
   Paleta e tipografia herdadas do site original.
   ========================================================================== */

:root {
  /* Azul da marca. Fica nos elementos DECORATIVOS (bordas, ícones, filetes),
     onde o contraste exigido é 3:1. */
  --azul:        #0095DA;
  --azul-escuro: #1488CB;
  /* Mesma matiz, escurecida só o suficiente para TEXTO passar em WCAG AA
     (4,5:1). O #0095DA puro dá 3,33:1 no branco — o site original reprovava
     aqui, e link é justamente o texto que precisa ser lido. */
  --azul-texto:  #0072A6;   /* 5,31:1 no branco · 4,61:1 no #EFEFEF */
  --azul-botao:  #007AB3;   /* branco por cima: 4,74:1 */
  --marinho:     #204766;
  --texto:       #333333;
  --cinza:       #EFEFEF;
  --cinza-medio: #5f6a77;   /* 5,51:1 no branco · 4,79:1 no cinza da seção */
  --branco:      #FFFFFF;
  --preto:       #111418;

  --fonte-titulo: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --fonte-texto:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --largura: 1180px;
  --topo: 84px;

  --sombra:    0 2px 12px rgba(32, 71, 102, .08);
  --sombra-md: 0 8px 28px rgba(32, 71, 102, .13);
  --raio: 8px;
  --transicao: .25s ease;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--topo); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.75;
  color: var(--texto);
  background: var(--branco);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-texto); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--marinho); }
h1, h2, h3, h4, h5, h6 { font-family: var(--fonte-titulo); color: var(--marinho); margin: 0 0 .6em; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 1.15em; }
ul { margin: 0 0 1.15em; padding-left: 1.2em; }

/* Foco visível — o tema original removia o contorno em vários controles. */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 3px; }

.pular-para-conteudo {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--marinho); color: #fff; padding: 12px 20px; border-radius: 0 0 6px 6px;
  font-family: var(--fonte-titulo); font-weight: 600; transition: top var(--transicao);
}
.pular-para-conteudo:focus { top: 0; color: #fff; }

/* ------------------------------------------------------------ estrutura -- */
.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.secao { padding: 88px 0; }
.secao--cinza { background: var(--cinza); }
.secao--marinho { background: var(--marinho); color: #dfe8f0; }
.secao--marinho h2, .secao--marinho h3, .secao--marinho h4 { color: #fff; }

.secao__titulo { font-size: clamp(1.85rem, 4vw, 2.6rem); margin-bottom: .35em; }
.secao__subtitulo {
  font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 600;
  color: var(--azul-texto); letter-spacing: .09em; text-transform: uppercase; margin-bottom: .8em;
}
.secao__cabecalho { max-width: 780px; margin-bottom: 52px; }
.secao__cabecalho--centro { margin-left: auto; margin-right: auto; text-align: center; }

/* --------------------------------------------------------------- botão -- */
.botao {
  display: inline-block; font-family: var(--fonte-titulo); font-weight: 600; font-size: .95rem;
  letter-spacing: .04em; padding: 15px 34px; border-radius: 4px; border: 2px solid var(--azul-botao);
  background: var(--azul-botao); color: #fff; cursor: pointer; text-align: center;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao), transform var(--transicao);
}
.botao:hover { background: #005f8c; border-color: #005f8c; color: #fff; transform: translateY(-2px); }
.botao--vazado { background: transparent; color: var(--azul-texto); }
.botao--vazado:hover { background: var(--azul-botao); color: #fff; }
.botao--claro { background: #fff; border-color: #fff; color: var(--marinho); }
.botao--claro:hover { background: transparent; color: #fff; border-color: #fff; }

/* ------------------------------------------------------------ cabeçalho -- */
.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 100; background: #fff;
  box-shadow: var(--sombra); height: var(--topo);
  display: flex; align-items: center;
}
.cabecalho__interno { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cabecalho__logo img { width: 190px; }

.menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu a, .menu__botao {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--fonte-titulo); font-size: .93rem; font-weight: 600; color: var(--marinho);
  padding: 12px 14px; border: 0; background: none; cursor: pointer; font-weight: 600;
  border-radius: 4px; transition: color var(--transicao), background var(--transicao);
}
.menu a:hover, .menu__botao:hover,
.menu a[aria-current="page"] { color: var(--azul-texto); background: rgba(0, 149, 218, .09); }
.menu__seta { width: 10px; height: 10px; fill: currentColor; transition: transform var(--transicao); }
.menu__botao[aria-expanded="true"] .menu__seta { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 288px;
  background: #fff; border-radius: var(--raio); box-shadow: var(--sombra-md);
  list-style: none; margin: 0; padding: 8px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.menu li:hover > .submenu,
.menu li:focus-within > .submenu,
.submenu[data-aberto="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { font-weight: 500; padding: 11px 14px; border-radius: 5px; }

.bandeira { width: 26px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }

.menu-alternar {
  display: none; width: 46px; height: 46px; border: 0; background: none; cursor: pointer;
  padding: 11px 10px; border-radius: 5px;
}
.menu-alternar:hover { background: rgba(0, 149, 218, .08); }
.menu-alternar span { display: block; height: 2.5px; background: var(--marinho); border-radius: 2px; transition: transform var(--transicao), opacity var(--transicao); }
.menu-alternar span + span { margin-top: 6px; }
.menu-alternar[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.menu-alternar[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-alternar[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero -- */
.hero { position: relative; margin-top: var(--topo); background: var(--preto); color: #fff; overflow: hidden; }
.hero__slide {
  display: none; min-height: 460px; padding: 96px 0;
  background: linear-gradient(115deg, #0d1b26 0%, var(--marinho) 55%, var(--azul-escuro) 130%);
  align-items: center;
}
.hero__slide[data-ativo="true"] { display: flex; animation: aparecer .6s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero__conteudo { max-width: 720px; }
.hero__titulo { font-size: clamp(2.1rem, 5.2vw, 3.4rem); color: #fff; margin-bottom: .2em; }
.hero__texto { font-size: clamp(1.1rem, 2.4vw, 1.45rem); color: #cfe3f2; margin-bottom: 1.8em; font-weight: 300; }

.hero__controles { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; gap: 11px; }
.hero__ponto {
  width: 12px; height: 12px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.75); background: transparent; transition: background var(--transicao);
}
.hero__ponto[aria-selected="true"] { background: #fff; }

/* Sem JS o carrossel vira uma pilha legível em vez de sumir. */
.no-js .hero__slide { display: flex; }
.no-js .hero__controles { display: none; }

/* --------------------------------------------------------------- grades -- */
.grade { display: grid; gap: 30px; }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--5 { grid-template-columns: repeat(5, 1fr); }
.grade--texto-imagem { grid-template-columns: 1.25fr .75fr; align-items: center; gap: 56px; }

/* --------------------------------------------------------- card solução -- */
.solucao {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border-radius: var(--raio); padding: 38px 24px 32px;
  box-shadow: var(--sombra); border-top: 4px solid var(--azul);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.solucao:hover { transform: translateY(-6px); box-shadow: var(--sombra-md); }
.solucao__icone { width: 62px; margin-bottom: 22px; }
.solucao__titulo { font-size: 1.13rem; margin-bottom: .55em; }
.solucao__texto { font-size: .97rem; color: var(--cinza-medio); flex-grow: 1; margin-bottom: 1.4em; }
.solucao__link { font-family: var(--fonte-titulo); font-weight: 600; font-size: .9rem; }
.solucao__link::after { content: ' →'; }

/* --------------------------------------------------------------- números -- */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 34px 0 30px; }
.numero {
  background: #fff; border-left: 4px solid var(--azul); border-radius: var(--raio);
  padding: 22px 24px; box-shadow: var(--sombra);
}
.numero__valor { font-family: var(--fonte-titulo); font-size: 2.1rem; font-weight: 700; color: var(--azul-texto); line-height: 1.1; }
.numero__rotulo { font-size: .93rem; color: var(--cinza-medio); }
.secao--marinho .numero { background: rgba(255,255,255,.07); border-left-color: var(--azul); box-shadow: none; }
.secao--marinho .numero__valor { color: #6cc5f2; }
/* Sobre o marinho o azul da marca cai para 2,93:1 — aqui o subtítulo clareia. */
.secao--marinho .secao__subtitulo { color: #6cc5f2; }
/* :not(.botao) é essencial: sem ele esta regra vence a cor do .botao--claro
   (que é um <a>) e o botão fica com texto azul-claro sobre fundo branco —
   1,47:1, ilegível. */
.secao--marinho a:not(.botao) { color: #a8dcf8; }
.secao--marinho a:not(.botao):hover { color: #fff; }
.secao--marinho .numero__rotulo { color: #c2d4e2; }

/* ----------------------------------------------------------- blocos IA/ret -- */
.destaque {
  background: #fff; border-radius: var(--raio); padding: 32px 30px;
  box-shadow: var(--sombra); border-top: 4px solid var(--azul); height: 100%;
}
.destaque__titulo { font-size: 1.1rem; }
.destaque__texto { font-size: .97rem; color: var(--cinza-medio); margin: 0; }

/* Blocos longos das páginas internas. */
.bloco + .bloco { margin-top: 52px; padding-top: 52px; border-top: 1px solid #e2e8ee; }
.bloco__titulo { font-size: 1.5rem; color: var(--azul-texto); }

/* ---------------------------------------------------------------- posts -- */
.post {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--raio);
  overflow: hidden; box-shadow: var(--sombra); transition: transform var(--transicao), box-shadow var(--transicao);
}
.post:hover { transform: translateY(-6px); box-shadow: var(--sombra-md); }
.post__imagem { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--cinza); }
.post__corpo { padding: 26px 24px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.post__etiqueta {
  font-family: var(--fonte-titulo); font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--azul-texto); margin-bottom: .7em;
}
.post__titulo { font-size: 1.14rem; line-height: 1.4; margin-bottom: .6em; }
.post__titulo a { color: var(--marinho); }
.post__titulo a:hover { color: var(--azul-texto); }
.post__resumo { font-size: .95rem; color: var(--cinza-medio); flex-grow: 1; }
.post__link { font-family: var(--fonte-titulo); font-weight: 600; font-size: .9rem; }
.post__link::after { content: ' →'; }

/* --------------------------------------------------------------- contato -- */
.contato-grade { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.contato-caixa { background: #fff; border-radius: var(--raio); padding: 34px 32px; box-shadow: var(--sombra-md); }

/* O HubSpot injeta o próprio HTML (.hs-form, .hs-input, .hs-button…).
   Em vez de lutar com aquele CSS, adotamos as classes dele aqui, para o
   formulário sair com a cara do site em vez da cara padrão do HubSpot. */
.formulario-hubspot { min-height: 320px; }

.formulario-hubspot .hs-form-field { margin-bottom: 20px; }

.formulario-hubspot label,
.formulario-hubspot .hs-form-field > label {
  display: block; font-family: var(--fonte-titulo); font-weight: 600;
  font-size: .9rem; color: var(--marinho); margin-bottom: 7px;
}
.formulario-hubspot .hs-form-required { color: #a4262c; }

.formulario-hubspot input[type="text"],
.formulario-hubspot input[type="email"],
.formulario-hubspot input[type="tel"],
.formulario-hubspot input[type="number"],
.formulario-hubspot textarea,
.formulario-hubspot select,
.formulario-hubspot .hs-input {
  width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  padding: 13px 15px; font-family: var(--fonte-texto); font-size: 1rem; color: var(--texto);
  border: 1.5px solid #d3dce4; border-radius: 5px; background: #fff;
  transition: border-color var(--transicao);
}
.formulario-hubspot .hs-input:focus { border-color: var(--azul-texto); outline: 2px solid transparent; }
.formulario-hubspot textarea.hs-input { min-height: 132px; resize: vertical; }

/* Caixas de seleção não podem herdar a largura total dos campos de texto. */
.formulario-hubspot .hs-input[type="checkbox"],
.formulario-hubspot .hs-input[type="radio"] {
  width: auto !important; margin-right: 8px;
}
.formulario-hubspot .hs-form-booleancheckbox label,
.formulario-hubspot .hs-form-checkbox label,
.formulario-hubspot .hs-form-radio label {
  display: flex; align-items: flex-start; gap: 4px;
  font-family: var(--fonte-texto); font-weight: 400; font-size: .93rem; color: var(--texto);
}

.formulario-hubspot .hs-button,
.formulario-hubspot input[type="submit"] {
  display: inline-block; font-family: var(--fonte-titulo); font-weight: 600; font-size: .95rem;
  letter-spacing: .04em; padding: 15px 34px; border-radius: 4px;
  border: 2px solid var(--azul-botao); background: var(--azul-botao); color: #fff;
  cursor: pointer; width: auto !important;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.formulario-hubspot .hs-button:hover,
.formulario-hubspot input[type="submit"]:hover {
  background: #005f8c; border-color: #005f8c; transform: translateY(-2px);
}

.formulario-hubspot .hs-error-msgs { list-style: none; margin: 7px 0 0; padding: 0; }
.formulario-hubspot .hs-error-msg,
.formulario-hubspot .hs-error-msgs label { color: #a4262c; font-size: .88rem; font-weight: 400; }

.formulario-hubspot .legal-consent-container,
.formulario-hubspot .hs-richtext { font-size: .86rem; color: var(--cinza-medio); }
.formulario-hubspot .submitted-message { font-size: 1rem; color: var(--texto); }

.formulario__aviso { font-size: .88rem; color: var(--cinza-medio); margin-top: 14px; }

.canal { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 24px; }
.canal__icone { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,149,218,.1); display: grid; place-items: center; }
.canal__icone svg { width: 20px; height: 20px; fill: var(--azul-texto); }
.canal__rotulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem; color: var(--marinho); }
.canal__valor { font-size: .97rem; color: var(--cinza-medio); }

/* ---------------------------------------------------------- cabeçalho pág -- */
.pagina-topo {
  margin-top: var(--topo); padding: 74px 0 66px;
  background: linear-gradient(115deg, #0d1b26 0%, var(--marinho) 60%, var(--azul-escuro) 135%);
  color: #fff;
}
.pagina-topo h1 { color: #fff; font-size: clamp(1.95rem, 4.6vw, 3rem); margin-bottom: .25em; }
.pagina-topo__texto { color: #cfe3f2; font-size: 1.15rem; font-weight: 300; margin: 0; max-width: 720px; }

.trilha { font-size: .87rem; color: #a9c6dd; margin-bottom: 1.1em; }
.trilha a { color: #cfe3f2; }
.trilha a:hover { color: #fff; }
.trilha span[aria-current] { color: #fff; }

/* --------------------------------------------------------------- rodapé -- */
.rodape { background: var(--marinho); color: #b9cbdb; padding: 68px 0 0; font-size: .95rem; }
.rodape h3, .rodape h4 { color: #fff; }
.rodape__grade { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); gap: 34px; }
.rodape__logo { width: 178px; margin-bottom: 22px; filter: brightness(0) invert(1); }
.rodape__titulo { font-size: 1rem; letter-spacing: .05em; margin-bottom: .9em; }
.rodape address { font-style: normal; line-height: 1.7; }
.rodape address + address { margin-top: 18px; }
.rodape a { color: #b9cbdb; }
.rodape a:hover { color: #fff; }

.rodape__sociais { display: flex; gap: 12px; margin-top: 22px; }
.rodape__social {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: grid; place-items: center; transition: background var(--transicao);
}
.rodape__social:hover { background: var(--azul); }
.rodape__social svg { width: 18px; height: 18px; fill: #fff; }

.rodape__base {
  margin-top: 56px; border-top: 1px solid rgba(255,255,255,.14); padding: 24px 0;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .87rem;
}

/* ---------------------------------------------------------- whats flutua -- */
.whatsapp-flutuante {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366;
  display: grid; place-items: center; box-shadow: 0 5px 18px rgba(0,0,0,.26);
  transition: transform var(--transicao);
}
.whatsapp-flutuante:hover { transform: scale(1.08); }
.whatsapp-flutuante svg { width: 31px; height: 31px; fill: #fff; }

/* ------------------------------------------------------------ responsivo -- */
@media (max-width: 1024px) {
  .grade--5 { grid-template-columns: repeat(3, 1fr); }
  .rodape__grade { grid-template-columns: 1fr 1fr 1fr; }
  .grade--texto-imagem { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 860px) {
  :root { --topo: 72px; }
  .secao { padding: 60px 0; }

  .menu-alternar { display: block; }
  .cabecalho__logo img { width: 158px; }
  .cabecalho__nav {
    position: fixed; inset: var(--topo) 0 auto 0; background: #fff;
    box-shadow: var(--sombra-md); padding: 14px 20px 26px;
    max-height: calc(100dvh - var(--topo)); overflow-y: auto;
    display: none;
  }
  .cabecalho__nav[data-aberto="true"] { display: block; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > li { border-bottom: 1px solid #eef2f6; }
  .menu a, .menu__botao { width: 100%; padding: 15px 6px; font-size: 1rem; justify-content: space-between; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    padding: 0 0 10px 14px; min-width: 0; display: none;
  }
  .submenu[data-aberto="true"] { display: block; }
  .menu li:hover > .submenu, .menu li:focus-within > .submenu { display: none; }
  .menu li:hover > .submenu[data-aberto="true"] { display: block; }

  /* Sem JS o botão não faz nada: em vez de esconder a navegação (que a
     deixaria inalcançável no celular), mostramos o menu já aberto. */
  .no-js .menu-alternar { display: none; }
  .no-js .cabecalho__nav { position: static; display: block; box-shadow: none; padding: 0; }
  .no-js .submenu { display: block; }

  .grade--2, .grade--3, .grade--5 { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: 1fr; }
  .contato-grade { grid-template-columns: 1fr; gap: 34px; }
  .rodape__grade { grid-template-columns: 1fr; }
  .hero__slide { min-height: 0; padding: 62px 0 74px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .cabecalho, .whatsapp-flutuante, .hero__controles, .pular-para-conteudo { display: none !important; }
  body { font-size: 12pt; }
  .hero, .pagina-topo { margin-top: 0; }
}