/*
 * LP Solidy Contabilidade — recriação estática da página feita no Elementor.
 * Valores lidos dos estilos computados e de _referencia/css/post-*.css.
 * Faixas do Elementor: laptop ≤ 1366px, tablet ≤ 1024px, mobile ≤ 767px.
 */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --azul: #3C85F3;
  --azul-hover: #2873E4;
  --azul-escuro: #0A2B5E;
  --azul-escuro-2: #0D336C;
  --azul-escuro-3: #0F3672;
  --gradiente: linear-gradient(90deg, #1E53A3 0%, #418DFF 100%);
  --texto: #101828;
  --texto-forte: #0C111D;
  --texto-2: #344054;
  --texto-3: #475467;
  --texto-4: #555A5E;
  --fundo-claro: #F0F7FB;
  --fundo-claro-2: #EAF2FF;
  --branco: #FFFFFF;
  --container: 1216px;
  --fonte: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto-2);
  background: var(--branco);
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; }

.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 16px;
  background: var(--branco);
  color: var(--texto-forte);
}
.pular-conteudo:focus { left: 16px; top: 16px; }

/* Âncoras não ficam escondidas atrás do cabeçalho fixo. */
[id] { scroll-margin-top: 95px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* Botões (widget "button" do Elementor: altura de linha 1, hover com leve deslocamento). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color .3s, color .3s, transform .3s;
}
.btn:hover, .btn:focus-visible { transform: translate(-1px, -1px) scale(1.01); }
.btn--primario { background: var(--azul); color: var(--branco); }
.btn--primario:hover, .btn--primario:focus-visible { background: var(--azul-hover); }
.btn--secundario {
  background: var(--fundo-claro-2);
  color: var(--azul-escuro);
  border: 1px solid var(--azul);
}
.btn--secundario:hover, .btn--secundario:focus-visible { background: var(--azul-hover); color: var(--branco); }

@media (max-width: 1366px) {
  .btn { font-size: 14px; }
}

/* ---------- Cabeçalho ---------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--branco);
  border-bottom: 1px solid rgba(0, 0, 0, .063);
}
.cabecalho__interno {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
}
.cabecalho__logo { width: 123px; flex: 0 0 auto; }
.cabecalho__logo img { width: 100%; height: auto; }

.menu ul { display: flex; gap: 42px; }
.menu a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 36px 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--texto-2);
  transition: color .3s;
}
/* Sublinhado do item ativo/hover (pointer "underline" + animação "fade" do Elementor). */
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--azul);
  opacity: 0;
  transition: opacity .3s;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--texto-forte); }
.menu a:hover::after, .menu a[aria-current="page"]::after { opacity: 1; }

.cabecalho__cta { padding: 16px 24px; }

.menu-botao { display: none; }
#menu-toggle { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 1366px) {
  .cabecalho__interno { padding: 0 40px; }
  .cabecalho__logo { width: 117px; }
  .menu ul { gap: 24px; }
  .menu a { font-size: 15px; }
}

@media (max-width: 1024px) {
  .cabecalho__interno { padding: 24px 40px; }
  .cabecalho__cta { display: none; }
  .menu-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 39px;
    padding: 6px;
    border-radius: 3px;
    cursor: pointer;
  }
  .menu-botao svg { width: 24px; height: 24px; }
  /* Menu suspenso: aberto pelo checkbox, funciona sem JavaScript. */
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9997;
    background: var(--branco);
  }
  #menu-toggle:checked ~ .menu { display: block; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a { padding: 18px 40px; font-size: 16px; }
  .menu a::after { display: none; }
  .menu a:hover, .menu a[aria-current="page"] { background: var(--azul); color: var(--branco); }
}

@media (max-width: 767px) {
  [id] { scroll-margin-top: 80px; }
  .cabecalho__interno { padding: 20px; }
  .menu a { padding: 18px 20px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--branco);
}
.hero__fundo, .hero__fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__fundo img { object-fit: cover; object-position: center center; }
.hero__interno {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 0;
}
.hero__titulo {
  max-width: 623px;
  margin-bottom: 24px;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--azul-escuro-2);
}
.hero__titulo b { font-weight: 700; }
.hero__titulo strong {
  font-weight: 700;
  line-height: 1.2;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-feature-settings: "salt" on;
}
.hero__texto {
  max-width: 491px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--texto-2);
}
.lista-check { margin-top: 24px; }
.lista-check li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--texto-2);
}
.lista-check li + li { margin-top: 12px; }
.lista-check svg { flex: 0 0 20px; width: 20px; height: 20px; }

.hero__ofertas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.hero__preco {
  padding: 16px 42px;
  border-radius: 12px;
  background: var(--fundo-claro-2);
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--azul);
}
.hero__preco small {
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: var(--texto-2);
}
.hero__botoes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 235px;
}
.hero__botoes .btn { width: 100%; }

@media (max-width: 1366px) {
  .hero__interno { padding: 80px 40px; }
  .hero__titulo { max-width: 571px; }
}

@media (max-width: 1024px) {
  .hero { min-height: 1400px; }
}

@media (max-width: 767px) {
  .hero { min-height: 1180px; }
  .hero__fundo img { object-position: bottom center; }
  .hero__interno { padding: 42px 20px 64px; }
  .hero__titulo { margin-bottom: 16px; font-size: 32px; }
  .hero__texto { font-size: 15px; }
  /* No celular a lista de vantagens vai para depois dos botões, como no Elementor. */
  .hero .lista-check { order: 2; margin-top: 16px; }
  .lista-check li { font-size: 15px; gap: 7px; }
  .lista-check li + li { margin-top: 10px; }
  .lista-check svg { flex-basis: 18px; width: 18px; height: 18px; }
  .hero__ofertas { margin-top: 24px; }
  .hero__preco { flex: 1 0 100%; padding: 12px 42px; }
  .hero__botoes { width: 100%; }
}

/* ---------- Revelação ao rolar ---------- */

/*
 * Os blocos só ficam escondidos quando o lp.js liga a classe .revelar-ativo, e ele só
 * faz isso se puder revelá-los depois. Sem JS (ou se algo falhar) tudo aparece normal.
 * Movimento curto (24px) e só em transform/opacity, para não pesar nem deslocar layout.
 */
@media (prefers-reduced-motion: no-preference) {
  .revelar-ativo [data-revelar],
  .revelar-ativo [data-revelar-grupo] > * {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--atraso, 0ms);
  }
  .revelar-ativo [data-revelar="esquerda"] { transform: translate3d(-32px, 0, 0); }
  .revelar-ativo [data-revelar="direita"] { transform: translate3d(32px, 0, 0); }
  .revelar-ativo [data-revelar="fade"] { transform: none; }
  .revelar-ativo [data-revelar].revelado,
  .revelar-ativo [data-revelar-grupo].revelado > * {
    opacity: 1;
    transform: none;
  }
}
/* No celular o deslocamento lateral poderia criar rolagem horizontal: vira subida. */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .revelar-ativo [data-revelar="esquerda"]:not(.revelado),
  .revelar-ativo [data-revelar="direita"]:not(.revelado) { transform: translate3d(0, 24px, 0); }
}

/* ---------- Títulos de seção ---------- */

.titulo-secao {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--azul-escuro-2);
}
@media (max-width: 767px) {
  .titulo-secao { font-size: 36px; }
}

/* Link de texto com seta (botões "Abrir Empresa", "Ver planos"...). */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #589BFF;
  transition: transform .3s;
}
.link-seta svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* ---------- Serviços ---------- */

.servicos {
  background: url("../img/servicos-fundo.webp") center / cover no-repeat;
}
.servicos__interno {
  display: flex;
  flex-direction: column;
  gap: 42px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 0;
}
.servicos__topo {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.servicos__topo .titulo-secao { max-width: 429px; }
.servicos__subtitulo {
  align-self: center;
  max-width: 324px;
  font-size: 20px;
  line-height: 1.5;
  text-align: end;
  color: var(--texto-2);
}
.servicos__grade {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.servico {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  width: 389px;
  padding: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.servico__corpo { display: flex; flex-direction: column; gap: 14px; }
.servico__icone svg { width: 42px; height: 42px; }
.servico__titulo {
  margin-top: 8px;
  margin-bottom: 2px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #0D151B;
}
.servico p { font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.servico .link-seta { margin-top: auto; padding: 4px 0; }

@media (max-width: 1366px) {
  .servicos__interno { padding: 80px 40px; }
  .servicos__grade { gap: 18px; }
  .servico { width: 32%; }
}
@media (max-width: 1024px) {
  .servicos__grade { gap: 26px; }
  .servico { width: 48%; }
}
@media (max-width: 767px) {
  .servicos__interno { gap: 32px; padding: 64px 20px; }
  .servicos__topo { flex-wrap: wrap; gap: 0; }
  .servicos__topo .titulo-secao { max-width: none; margin-bottom: 16px; }
  .servicos__subtitulo { align-self: flex-start; max-width: none; font-size: 18px; text-align: start; }
  .servicos__grade { gap: 16px; }
  /* No celular o Elementor mostra uma versão dos cartões sem ícone e mais compacta. */
  .servico { width: 100%; gap: 16px; }
  .servico__corpo { gap: 0; margin-top: -10px; }
  .servico__icone { display: none; }
  .servico__titulo { margin-bottom: 6px; }
}

/* ---------- Planos ---------- */

.planos__interno {
  display: flex;
  flex-direction: column;
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 0;
}
.planos__titulo {
  margin-bottom: 100px;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--azul-escuro-2);
}
.planos__grade {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}
.plano {
  display: flex;
  flex-direction: column;
  width: 32%;
}
.plano__cartao {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, .063);
  border-radius: 16px;
  background: linear-gradient(360deg, #FFFFFF 76%, #EAF2FF 100%);
}
.plano--destaque {
  border-radius: 0 0 16px 16px;
  background: var(--azul);
}
.plano__destaque-interno { flex: 1; display: flex; flex-direction: column; }
.plano--destaque .plano__cartao { border-color: var(--azul); }
.plano__selo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: -36px;
  padding: 8px 0;
  border-radius: 16px 16px 0 0;
  background: var(--azul);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--branco);
}
.plano__selo svg { width: 20px; height: 20px; }

.plano__topo { margin-bottom: 32px; text-align: center; }
.plano__topo h3 {
  margin: -1px 0 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--azul-escuro-2);
}
.plano__topo p { font-size: 16px; line-height: 1.4; color: var(--texto-3); }

.plano__preco {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--texto);
}
.plano__preco b { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--texto-forte); }
.plano--destaque .plano__preco { margin-top: 24px; }

.plano__cta {
  margin-top: 32px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.plano__divisor {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .063);
}
.plano__base {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--texto);
}
.plano__base b { font-weight: 600; color: var(--azul); }
.plano__itens li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto-3);
}
.plano__itens li + li { margin-top: 16px; }
.plano__itens svg { flex: 0 0 16px; width: 16px; height: 16px; }

/* "Ver mais / Ver menos" só existem no celular. */
.plano__alternar {
  display: none;
  align-items: center;
  gap: 12px;
  align-self: flex-end;
  padding: 16px 24px;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--azul-escuro-2);
  cursor: pointer;
}
.plano__alternar svg { width: 16px; height: 16px; fill: var(--azul-escuro-2); }

.planos__nota {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: var(--texto-2);
}
.planos__nota a { font-weight: 500; color: var(--azul); }

.planos__faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 64px;
  padding: 24px;
  border-radius: 12px;
  background: #0F3672 url("../img/planos-faixa.webp") center / cover no-repeat;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
}
.planos__faixa-texto {
  display: flex;
  align-items: center;
  gap: 19px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--branco);
}
.planos__faixa-texto svg { flex: 0 0 42px; width: 42px; height: 42px; }
.planos__faixa-btn { padding: 16px 32px; font-size: 16px; line-height: 1.4; }

@media (max-width: 1366px) {
  .planos__interno { padding: 80px 40px; }
  .plano__cta, .planos__faixa-btn { padding: 12px 24px; }
}
@media (max-width: 1024px) {
  .planos__faixa-texto { max-width: 321px; }
}
@media (max-width: 1024px) {
  .planos__grade { flex-wrap: wrap; justify-content: center; gap: 26px; }
  .plano { width: 48%; }
}
@media (max-width: 767px) {
  .planos__interno { padding: 64px 20px; }
  .planos__titulo { margin-bottom: 42px; font-size: 32px; }
  .planos__grade { flex-direction: column; gap: 42px; }
  .plano { width: 100%; }
  .plano--destaque { border-radius: 16px; }
  .plano__selo { margin-top: 0; }
  .plano--destaque .plano__preco { margin-top: 0; }
  .plano__cta { margin-top: 24px; padding: 16px 24px; }
  /* Com JS, a lista começa fechada e abre pelo "Ver mais"; sem JS ela fica aberta. */
  .lp-pronto .plano__ver-mais { display: flex; margin-top: 24px; }
  .lp-pronto .plano__detalhes { display: none; }
  .lp-pronto .plano--aberto .plano__ver-mais { display: none; }
  .lp-pronto .plano--aberto .plano__detalhes { display: flex; flex-direction: column; }
  .lp-pronto .plano__ver-menos { display: flex; margin-top: 32px; }
  .planos__nota a { line-height: 1.5; text-decoration: underline; text-underline-position: from-font; }
  .planos__faixa { flex-wrap: wrap; gap: 24px; margin-top: 42px; }
  .planos__faixa-texto { width: 100%; font-size: 18px; }
  .planos__faixa-btn { width: 100%; padding: 16px 24px; }
}

/* ---------- Por que a Solidy (carrossel) ---------- */

.porque {
  overflow: hidden;
  background: #F0F7FB url("../img/porque-desktop.webp");
}
.porque__interno {
  display: flex;
  flex-direction: column;
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px 0 196px;
}
.porque__texto { display: flex; flex-direction: column; align-items: flex-start; width: 552px; }
.porque__titulo {
  max-width: 623px;
  margin-bottom: 32px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--azul-escuro-2);
}
.porque__titulo b { font-weight: 600; color: var(--azul); font-feature-settings: "salt" on; }
.porque__texto p { max-width: 552px; font-size: 16px; line-height: 1.4; color: var(--texto-2); }

/*
 * O carrossel do Elementor (Swiper) deixa os cartões vizinhos visíveis além da coluna
 * de 1216px. Aqui o trilho rolável se estende até as bordas da tela e o recuo
 * (--recuo) mantém o primeiro cartão alinhado à coluna.
 */
.carrossel {
  position: relative;
  margin-top: 64px;
  container-type: inline-size;
  --por-tela: 3;
  --recuo: calc((100vw - 100cqw) / 2);
}
.carrossel__trilho {
  display: flex;
  gap: 24px;
  /* O espaço extra embaixo evita cortar a sombra; a margem negativa devolve a altura. */
  margin: 0 calc(-1 * var(--recuo)) -12px;
  padding: 0 var(--recuo) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--recuo);
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.vantagem {
  flex: 0 0 calc((100cqw - (var(--por-tela) - 1) * 24px) / var(--por-tela));
  padding: 24px;
  border-radius: 12px;
  background: var(--branco);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
  scroll-snap-align: start;
}
.vantagem__icone svg { width: 24px; height: 24px; }
.vantagem h3 {
  margin: 10px 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #0D151B;
}
.vantagem p { font-size: 16px; line-height: 1.5; color: var(--texto-2); }

.carrossel__setas {
  position: absolute;
  top: calc(100% + 29px);
  left: 0;
  display: flex;
  gap: 10px;
}
.carrossel__seta {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.carrossel__seta svg { width: 32px; height: 32px; }
.carrossel__seta:disabled { opacity: .3; }

.porque__selo { display: none; }

@media (max-width: 1366px) {
  .porque { background-position: center; background-repeat: no-repeat; background-size: cover; }
  .porque__interno { padding: 120px 40px 160px; }
  .porque__titulo { max-width: 571px; }
}
@media (max-width: 1024px) {
  .porque { min-height: 1600px; background-image: url("../img/porque-tablet.webp"); }
  .porque__interno { padding: 80px 40px 140px; }
  .porque__texto { width: 100%; }
  .porque__titulo { max-width: 100%; }
  .carrossel { --por-tela: 2; }
}
@media (max-width: 767px) {
  .porque { min-height: 0; background-image: url("../img/porque-mobile.png"); background-position: left center; }
  .porque__interno { padding: 64px 20px; }
  .porque__titulo { font-size: 24px; text-align: center; }
  .porque__texto p { text-align: center; }
  .carrossel { margin-top: 42px; --por-tela: 1; }
  .carrossel__setas { left: 50%; transform: translateX(-50%); }
  .porque__selo { display: block; align-self: center; margin-top: 100px; }
}

/* ---------- Conta PJ ---------- */

.pj { background: #F0F7FB; }
.pj__interno {
  display: flex;
  flex-direction: column;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 0 100px;
}
.pj__divisor {
  margin: 0 0 100px;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .063);
}
.pj__topo {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.pj__titulo { flex: 0 1 429px; }
.pj__lateral {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  flex: 0 1 390px;
}
.pj__icones { display: flex; justify-content: flex-end; }
.pj__icones img { width: 36px; height: 36px; }
.pj__icones img:first-child { margin-right: -13px; }
.pj__lateral p { font-size: 16px; line-height: 1.5; text-align: end; color: var(--texto-2); }

.pj__cartoes {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-top: 64px;
}
.pj__cartao {
  display: flex;
  flex-direction: column;
  width: 50%;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
  background: var(--branco);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
}
.pj__cartao img { width: 100%; border-radius: 12px 12px 0 0; }
.pj__cartao-corpo { flex: 1; display: flex; flex-direction: column; padding: 24px; }
.pj__cartao-corpo p { margin-bottom: 38.4px; font-size: 16px; line-height: 1.5; color: var(--texto-4); }
.pj__cartao-corpo .link-seta { margin-top: auto; padding: 4px 0; }

@media (max-width: 1366px) {
  .pj__interno { padding: 0 40px 100px; }
}
@media (max-width: 1024px) {
  .pj__interno { padding: 0 40px 80px; }
  .pj__divisor { margin-bottom: 80px; }
  .pj__cartoes { flex-wrap: wrap; }
  .pj__cartao { width: 100%; }
}
@media (max-width: 767px) {
  .pj__interno { padding: 0 24px 64px; }
  .pj__divisor { margin-bottom: 64px; }
  .pj__topo { flex-wrap: wrap; gap: 24px 0; }
  .pj__titulo { flex-basis: 100%; font-size: 32px; }
  .pj__lateral { flex-basis: 100%; }
  .pj__icones { justify-content: flex-start; }
  .pj__lateral p { text-align: start; }
  .pj__cartao--desktop { display: none; }
}

/* ---------- Contato ---------- */

.contato { background: #F0F7FB; }
.contato__interno { max-width: var(--container); margin: 0 auto; padding: 0 0 100px; }
.contato__caixa {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  padding: 64px;
  border-radius: 16px;
  background: var(--azul-escuro);
}
.contato__texto { position: relative; display: flex; flex-direction: column; width: 521px; }
.contato__texto h2 {
  max-width: 424px;
  margin-bottom: 32px;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--branco);
}
.contato__texto > p:not(.contato__telefone) { max-width: 366px; font-size: 18px; line-height: 1.4; color: #D0D5DD; }
.contato__telefone {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 32px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--branco);
}
.contato__telefone svg { flex: 0 0 42px; width: 42px; height: 42px; }
/* A foto "vaza" para fora da caixa, como no Elementor (posição absoluta com deslocamento negativo). */
.contato__foto {
  position: absolute;
  left: -83px;
  bottom: -19px;
  z-index: 1;
  width: 501px;
  max-width: none;
  transition: transform .3s;
}
.contato__foto:hover { transform: translate(1px, -2px); }

.contato__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 512px;
  padding: 24px;
  border-radius: 8px;
  background: var(--branco);
}
.formulario .form-campos { display: flex; flex-wrap: wrap; gap: 24px 16px; }
/* A regra acima venceria o [hidden] do navegador; sem isto o formulário não some após o envio. */
.form-campos[hidden] { display: none !important; }
.campo { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo--metade { width: calc(50% - 8px); }
.campo > label, .campo legend {
  padding: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #0D151B;
}
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, .063);
  border-radius: 8px;
  background: var(--branco);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto-4);
}
.campo textarea { height: 98px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #757575; opacity: 1; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: 0; }
.radios { display: flex; flex-wrap: wrap; }
.radios label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: #0D151B;
  cursor: pointer;
}
.radios label + label { margin-left: 16px; }
.radios input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #CCCCCC;
  border-radius: 50%;
  background: var(--branco);
  cursor: pointer;
}
.radios input:checked { border-color: var(--azul); box-shadow: inset 0 0 0 3px var(--branco); background: var(--azul); }
.radios input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.formulario__enviar {
  width: 100%;
  padding: 16px 0;
  border: 0;
  border-radius: 8px;
  background: var(--azul);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--branco);
  cursor: pointer;
  transition: background-color .3s;
}
.formulario__enviar:hover { background: #2B73DF; }
.formulario__enviar:disabled { opacity: .7; cursor: wait; }
.erro:empty { display: none; }
.erro { display: block; margin-top: 6px; font-size: 13px; line-height: 1.3; color: #B42318; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-resultado { padding: 16px; border-radius: 8px; font-size: 16px; line-height: 1.5; }
.form-resultado--ok { background: #ECFDF3; color: #054F31; }
.form-resultado--erro { background: #FEF3F2; color: #7A271A; }
.form-resultado a { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--azul); text-decoration: underline; }
.contato__aviso { font-size: 14px; line-height: 1.4; text-align: center; color: var(--texto-2); }
.contato__aviso a { color: #589BFF; }

@media (max-width: 1366px) {
  .contato__interno { padding: 0 40px 100px; }
  .contato__caixa { gap: 42px; padding: 32px; }
  .contato__texto h2 { margin-bottom: 24px; font-size: 32px; }
  .contato__texto > p:not(.contato__telefone) { font-size: 16px; }
  .contato__telefone { margin-top: 16px; font-size: 16px; }
  .contato__telefone svg { flex-basis: 38px; width: 38px; height: 38px; }
  .contato__foto { left: -50px; bottom: -16px; width: 460px; }
  .campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea,
  .radios label { font-size: 14px; }
}
@media (max-width: 1200px) {
  .campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea { padding: 8px; }
  .campo input[type="text"], .campo input[type="email"], .campo input[type="tel"] { height: 40px; }
  .campo textarea { height: 81px; }
}
@media (max-width: 1024px) {
  .contato__caixa { flex-wrap: wrap; }
  .contato__texto { min-height: 600px; }
  .contato__telefone { max-width: 321px; }
  .contato__foto { left: -85px; bottom: -18px; width: 601px; }
  .contato__form { width: 100%; }
}
@media (max-width: 767px) {
  .contato__interno { padding: 0 20px 64px; }
  .contato__caixa { padding: 42px 20px; }
  .contato__texto { width: 100%; min-height: 478px; }
  .contato__foto { left: -32px; bottom: -8px; width: 100%; max-width: 601px; }
  .campo--metade { width: 100%; }
  .contato__aviso { text-align: start; }
}

/* ---------- FAQ ---------- */

.faq__interno {
  display: flex;
  flex-direction: column;
  gap: 42px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 0;
}
.faq__titulo { text-align: center; }
.faq__colunas { display: flex; justify-content: space-between; gap: 32px; }
.faq__coluna { display: flex; flex-direction: column; gap: 24px; width: 592px; }
.pergunta {
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
  background: var(--branco);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
}
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 32px;
  border-radius: 12px;
  list-style: none;
  cursor: pointer;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary h3 { font-size: 18px; font-weight: 500; line-height: 1.4; color: #0D151B; }
.pergunta summary svg { flex: 0 0 16px; width: 16px; height: 8px; margin: 4px 0; transition: transform .3s; }
.pergunta[open] summary svg { transform: rotate(180deg); }
.pergunta__resposta { margin-top: -32px; padding: 32px 33px 33px; }
.pergunta__resposta p { font-size: 16px; line-height: 1.5; color: var(--texto-4); }
.faq__rodape { font-size: 16px; line-height: 1.4; text-align: center; color: var(--texto-2); }
.faq__rodape a { line-height: 1.5; color: var(--azul); }

@media (max-width: 1366px) {
  .faq__interno { padding: 80px 40px; }
}
@media (max-width: 1024px) {
  .faq__colunas { flex-wrap: wrap; justify-content: center; gap: 24px; }
  .faq__coluna { width: 100%; }
}
@media (max-width: 767px) {
  .faq__interno { padding: 64px 20px; }
  .faq__titulo { font-size: 32px; }
}

/* ---------- Rodapé ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.rodape { background: var(--azul-escuro); color: var(--branco); }
.rodape__interno { max-width: var(--container); margin: 0 auto; }
.rodape__topo { padding-top: 54px; }
.rodape__linha-logo { display: flex; align-items: flex-start; justify-content: space-between; }
.rodape__logo { width: 123px; margin-top: 10px; }
.rodape__logo img { width: 100%; height: auto; }
.newsletter { position: relative; width: 479px; }
.newsletter__linha { display: flex; }
.newsletter__linha input {
  width: 50%;
  padding: 12px;
  border: 0;
  border-left: 1px solid var(--branco);
  border-radius: 8px 0 0 8px;
  background: var(--branco);
  font-size: 16px;
  line-height: 1.4;
  color: var(--texto-4);
}
.newsletter__linha input::placeholder { color: #757575; opacity: 1; }
.newsletter__linha button {
  width: 50%;
  padding: 16px 32px 16px 8px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: var(--azul);
  font-size: 16px;
  font-weight: 500;
  line-height: .9;
  color: var(--branco);
  cursor: pointer;
}
.newsletter__linha button:disabled { opacity: .7; cursor: wait; }
.newsletter__consentimento {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Fora do fluxo: ocupa o espaço que já existe acima do divisor, sem empurrar o rodapé. */
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #D0D5DD;
  cursor: pointer;
}
.newsletter__consentimento input { width: 16px; height: 16px; margin: 0; accent-color: var(--azul); }
.newsletter .erro { position: absolute; top: calc(100% + 32px); left: 0; color: #FDA29B; }
.newsletter .form-resultado { padding: 12px 16px; }
.newsletter .aviso-sem-js:target { display: block; margin-top: 8px; }
.rodape__divisor { margin: 54px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .063); }

.rodape__colunas { display: flex; justify-content: space-between; gap: 112px; padding: 54px 0; }
/* As colunas encolhem como no Elementor, mesmo que o e-mail longo ultrapasse a coluna. */
.rodape__colunas > * { min-width: 0; }
.rodape__contato li { white-space: nowrap; }
.rodape__contato li:last-child { white-space: normal; }
.rodape__sobre { display: flex; flex-direction: column; gap: 24px; width: 279px; padding-bottom: 30px; }
.rodape__sobre p { max-width: 576px; font-size: 14px; line-height: 1.5; }
.rodape__sociais { display: flex; gap: 20px; }
.rodape__sociais span, .rodape__sociais svg { display: block; width: 20px; height: 20px; }
.rodape__coluna { display: flex; flex-direction: column; gap: 24px; }
.rodape__coluna--nav { width: 200px; }
.rodape__coluna--transparencia { width: 190px; }
.rodape__coluna--contato { width: 305px; }
.rodape__coluna h2 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.rodape__coluna li { font-size: 14px; font-weight: 400; line-height: 1.5; }
.rodape__coluna li + li { margin-top: 12px; }
.rodape__coluna a:hover { text-decoration: underline; }
.rodape__contato li { display: flex; align-items: center; gap: 9px; }
.rodape__contato svg { flex: 0 0 16px; width: 16px; height: 16px; }

.rodape__divisor--base { margin: 0 0 42px; }
.rodape__base-linha { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 40px; }
.rodape__base-linha p { flex: 0 1 401px; font-size: 13px; line-height: 1.5; }
.rodape__site { text-align: end; }
/* Copyright numa linha só a partir do tablet; no celular a frase não cabe e quebra. */
@media (min-width: 768px) {
  .rodape__base-linha p:first-child { flex: none; white-space: nowrap; }
}
.rodape__site a { font-weight: 400; color: var(--azul); }

@media (max-width: 1366px) {
  .rodape__interno { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 1024px) {
  .rodape__topo { padding-top: 52px; }
  .rodape__linha-logo { flex-wrap: wrap; align-items: center; }
  .rodape__logo { width: 480px; margin-top: 0; }
  .rodape__colunas { flex-wrap: wrap; gap: 42px; padding: 80px 40px; }
  .rodape__sobre { width: 100%; }
  .rodape__coluna--nav { width: 170px; }
  .rodape__coluna--transparencia { width: 180px; }
  .rodape__base-linha { padding-bottom: 30px; }
  .rodape__coluna--contato { width: 200px; }
}
@media (max-width: 767px) {
  .rodape__interno { padding-left: 24px; padding-right: 24px; }
  .rodape__topo { padding-top: 64px; }
  /* No celular o formulário de newsletter do rodapé fica oculto, como na página atual. */
  .newsletter { display: none; }
  .rodape__logo { width: 195px; }
  .rodape__topo .rodape__divisor { margin-top: 42px; }
  .rodape__colunas { padding: 42px 24px; }
  .rodape__coluna, .rodape__coluna--nav, .rodape__coluna--transparencia, .rodape__coluna--contato { width: 100%; }
  .rodape__base-linha { flex-direction: column; gap: 16px; padding-bottom: 30px; }
  .rodape__base-linha p { flex: none; }
  .rodape__site { text-align: start; }
}

/* ---------- WhatsApp flutuante (equivalente ao Click to Chat) ---------- */

.whatsapp-flutuante {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 9990;
  display: flex;
  padding: 16px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  transition: box-shadow .3s;
}
.whatsapp-flutuante svg { width: 36px; height: 36px; }

/* ---------- Banner de consentimento (visual do Complianz) ---------- */

.consentimento {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 99999;
  display: grid;
  gap: 10px;
  width: 526px;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  padding: 15px 20px;
  border-radius: 12px;
  background: var(--branco);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
  color: var(--texto);
}
.consentimento[hidden] { display: none; }
.consentimento__topo { display: flex; align-items: center; justify-content: space-between; min-height: 46px; }
.consentimento__topo img { width: 140px; height: auto; }
.consentimento__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.consentimento__fechar {
  padding: 0;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 20px;
  color: var(--texto);
  cursor: pointer;
}
.consentimento__texto { margin-bottom: 5px; font-size: 14px; line-height: 1.5; }
.consentimento__preferencias { display: grid; gap: 10px; }
.consentimento__preferencias[hidden] { display: none; }
.consentimento__categoria { border-radius: 8px; background: #F2F2F2; }
.consentimento__categoria summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.consentimento__categoria summary::-webkit-details-marker { display: none; }
.consentimento__categoria em { font-style: normal; font-weight: 500; color: #1E73BE; }
.consentimento__categoria input { width: 18px; height: 18px; margin: 0; accent-color: var(--azul); }
.consentimento__categoria p { padding: 0 15px 12px; font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.consentimento__botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.consentimento__btn {
  padding: 10px;
  border: 1px solid #F2F2F2;
  border-radius: 12px;
  background: var(--branco);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--texto);
  cursor: pointer;
}
.consentimento__btn[hidden] { display: none; }
.consentimento__btn--aceitar { border-color: var(--azul); background: var(--azul); color: var(--branco); }
.consentimento__links { display: flex; justify-content: center; gap: 10px; }
.consentimento__links a { font-size: 14px; line-height: 1.5; color: var(--azul); }


@media (max-width: 767px) {
  .consentimento { right: 0; bottom: 0; width: 100%; max-height: 85vh; }
  .consentimento__botoes { grid-template-columns: 1fr; }
}

/* ---------- Páginas legais ---------- */

.legal__interno { max-width: var(--container); margin: 0 auto; }
.legal__topo { background: var(--branco); }
.legal__topo .legal__interno { padding: 80px 0; }
.legal__topo h1 {
  font-size: 64px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--azul-escuro-2);
}
.legal__topo h1 strong {
  font-weight: 700;
  line-height: 1.2;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.legal__topo p { max-width: 491px; margin-top: 24px; font-size: 18px; line-height: 1.4; color: var(--texto-2); }
.legal__conteudo { background: #F0F7FB; }
.legal__conteudo .legal__interno { padding: 100px 0 80px; }
.legal__texto { font-size: 14px; line-height: 1.5; color: #333333; }
.legal__texto > * { max-width: 800px; }
.legal__texto h2, .legal__texto h3 {
  margin: 15px 0 10px;
  padding-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--azul-escuro-2);
}
.legal__texto h4 { margin: 12px 0 6px; font-size: 16px; font-weight: 600; }
.legal__texto h5 { margin: 8px 0 2px; font-size: 14px; font-weight: 500; }
.legal__texto p { margin-bottom: 14.4px; }
.legal__texto ul, .legal__texto ol { margin-bottom: 15px; padding-left: 40px; list-style: disc; }
.legal__texto ol { list-style: decimal; }
.legal__texto a { font-weight: 500; color: #589BFF; }
.legal__texto table { width: 100%; max-width: 1000px; margin: 8px 0 20px; border-collapse: collapse; background: var(--branco); font-size: 13px; }
.legal__texto th, .legal__texto td { padding: 10px 12px; border: 1px solid #D0D5DD; text-align: left; vertical-align: top; }
.legal__texto th { background: var(--fundo-claro-2); font-weight: 600; color: var(--azul-escuro-2); }
.legal__texto td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
@media (max-width: 767px) {
  /* No celular a tabela rola de lado em vez de espremer as colunas. */
  .legal__texto table { display: block; overflow-x: auto; }
}

@media (max-width: 1366px) {
  .legal__topo .legal__interno, .legal__conteudo .legal__interno { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 767px) {
  .legal__topo .legal__interno { padding: 64px 20px; }
  .legal__conteudo .legal__interno { padding: 64px 20px; }
  .legal__topo h1 { font-size: 42px; }
}

/* Confirmação do envio sem JavaScript: o PHP redireciona para #form-enviado ou #form-erro. */
.aviso-sem-js { display: none; }
.aviso-sem-js:target { display: block; }

/* ---------- Ajustes só do celular ---------- */

@media (max-width: 767px) {
  /* A seção Conta PJ (e os links para ela) não aparecem no celular, a pedido da Solidy. */
  .oculto-celular { display: none !important; }
  /* Sem a Conta PJ, o contato encostaria na seção anterior. */
  .contato__interno { padding-top: 64px; }
}