/* SumWise — estilos do site
   Medidas e quebras reproduzem o site antigo (WordPress + Elementor):
   tablet até 1024px, celular até 767px. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("/assets/fonts/poppins-200.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); }

:root {
  --azul: #0d42a7;
  --grafite: #302f35;
  --cinza-claro: #f2f4f8;
  --cinza-rodape: #78787f;
  --texto: #444;
  --menu-lateral: 380px;
  --transicao-menu: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; }
h1, h2, h3, h6, p { margin: 0; }
a { color: inherit; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular-conteudo { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 8px 16px; background: #fff; color: var(--azul); }
.pular-conteudo:focus { left: 8px; top: 8px; }

/* ---------- Página (desliza quando o menu lateral abre) ---------- */

.pagina { position: relative; overflow-wrap: break-word; transition: transform var(--transicao-menu); }
body.menu-aberto { height: 100%; }
body.menu-aberto .pagina { z-index: 300; transform: translateX(calc(-1 * var(--menu-lateral))); }

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

.cabecalho { position: fixed; top: 0; left: 0; width: 100%; height: 0; z-index: 1000; }
.cabecalho--rolado { box-shadow: 0 0 18px 1px rgba(0, 0, 0, 0.1); }

.cabecalho__barra {
  position: absolute; top: 0; left: 0; width: 100%;
  padding: 18px 0;
  color: #fff;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0) 100%);
  transition: all 0.5s ease-in-out;
}
.cabecalho--rolado .cabecalho__barra { padding: 12px 0; background: rgba(255, 255, 255, 0.9); }

.cabecalho__conteudo {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 0 30px;
}

.cabecalho__logo { display: flex; align-items: center; margin-right: 10px; max-width: 50%; }
.cabecalho__logo a { display: block; max-width: 350px; }
.cabecalho__logo img { width: auto; max-height: 80px; transition: all 0.2s ease-in-out; }
.cabecalho--rolado .cabecalho__logo img { max-height: 70px; }

.menu-principal { flex: 1; display: flex; justify-content: flex-end; }
.menu-principal ul { display: flex; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
.menu-principal li { margin: 0 15px; }
.menu-principal a {
  display: block; padding: 5px 0 3px;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.menu-principal a:hover { border-bottom-color: rgba(255, 255, 255, 0.8); opacity: 0.8; }

/* Botão de três barras (abre o menu lateral; vira X/seta quando aberto) */
.botao-menu {
  display: none; position: relative; width: 40px; margin: 0 0 0 15px; padding: 12px 0;
  background: none; border: 2px solid transparent; border-left: 0; border-right: 0;
  cursor: pointer;
}
.botao-menu span {
  display: block; position: relative; width: 22px; height: 2px; background: #fff;
  transition: width 0.13s ease-out, transform 0.13s ease-out, opacity 0.13s ease-out;
}
.botao-menu span + span { margin-top: 5px; }
.botao-menu span:nth-child(2) { width: 17px; }
.botao-menu:hover span { width: 17px; }
.botao-menu:hover span:nth-child(2) { width: 22px; }

.menu-aberto .botao-menu span:nth-child(1) { transform: rotateZ(-45deg) translate3d(-5px, 5px, 0); width: 28px; }
.menu-aberto .botao-menu span:nth-child(2) { transform: translateX(0); opacity: 0; }
.menu-aberto .botao-menu span:nth-child(3) { transform: rotateZ(45deg) translate3d(-5px, -5px, 0); width: 28px; }

/* ---------- Menu lateral (tablet e celular) ---------- */

.menu-lateral {
  position: fixed; top: 0; right: 0; bottom: -70px; width: var(--menu-lateral);
  overflow: hidden; visibility: hidden; z-index: -1;
}
.menu-lateral__painel {
  position: relative; height: 100%; overflow: auto; padding-bottom: 70px;
  background: var(--grafite); color: var(--cinza-rodape);
  transform: translateX(var(--menu-lateral)); transition: transform var(--transicao-menu);
}
.menu-lateral__conteudo { position: relative; padding: 60px 30px; }
/* flow-root segura a margem do botão dentro do bloco, como no tema antigo */
.menu-lateral__fechar { display: flow-root; }
.menu-lateral .botao-menu--fechar { display: none; margin: 5px 0 0; }
.menu-lateral ul { margin: 0 0 40px; padding: 0; list-style: none; }
.menu-lateral li { margin: 10px 0; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.menu-lateral a { padding: 4px 0; color: #fff; text-decoration: none; }

.menu-lateral__fundo {
  display: none; position: fixed; top: 0; left: 0; bottom: 0; right: var(--menu-lateral);
  z-index: 900; cursor: e-resize;
}

body.menu-transicao .menu-lateral { visibility: visible; }
body.menu-aberto .menu-lateral { visibility: visible; z-index: 600; }
body.menu-aberto .menu-lateral__painel { transform: translateX(0); }
body.menu-aberto .menu-lateral__fundo { display: block; }

/* ---------- Estrutura das seções ---------- */

.secao { position: relative; display: flex; flex-direction: column; }
.secao__conteudo { position: relative; z-index: 1; display: flex; flex-grow: 1; width: 100%; max-width: 1214px; margin: 0 auto; padding: 6% 0; }
.secao__conteudo--estreito { max-width: min(100%, 1140px); }

/* min-width: 0 deixa colunas e grades encolherem abaixo da palavra mais longa (que então quebra), como no Elementor */
.coluna { display: flex; flex-direction: column; gap: 20px; width: 50%; min-width: 0; padding: 10px; }
.coluna--centro { justify-content: center; }

.faixa { height: 20px; scroll-margin-top: -10px; }
.faixa--cinza { background: var(--cinza-claro); }

/* Textos */
.sobretitulo { font-size: 13px; line-height: 1; font-weight: 600; color: var(--azul); }
.titulo { font-size: 30px; line-height: 1; font-weight: 600; color: var(--grafite); }
.titulo--34 { line-height: 34px; }
.titulo--branco { color: #fff; }
.titulo--centro { text-align: center; }
.subtitulo { font-size: 16px; line-height: 1; font-weight: 600; color: var(--grafite); }
.texto { color: var(--grafite); }
.texto p { margin-bottom: 24px; }

/* Botões */
.botoes { display: flex; }
.botao {
  display: block; flex: 0 0 auto; min-width: 150px; padding: 20px 30px;
  font-size: 16px; font-weight: 600; line-height: 1; text-align: center; text-decoration: none;
  color: #fff; background: var(--azul);
  transition: border-color 0.4s cubic-bezier(0.2, 1, 0.3, 1), color 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}
.botao:hover { color: #fff; background: var(--grafite); }
.botao--claro { color: var(--azul); background: var(--cinza-claro); }
.botao__interno { display: flex; align-items: center; justify-content: center; }
.botao__icone { display: block; margin-right: 5px; line-height: 16px; }
.botao__icone svg { width: 30px; height: 30px; fill: currentColor; }

/* Imagem centralizada a 75% da coluna */
.imagem { align-items: center; }
.imagem img { width: 75%; max-width: 75%; }

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

.hero {
  min-height: 551px; padding: 0 10px;
  background: var(--azul) url("/assets/img/SumWise_SOLUCOES-FINANCEIRAS.webp") left center / cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--grafite); opacity: 0; }
.hero .secao__conteudo { padding: 10px 0; }
.hero__texto { width: 40%; }
.hero__texto h1 { font-size: 25px; line-height: 32px; font-weight: 500; color: #fff; }
.hero__texto p { margin-bottom: 3px; font-weight: 200; line-height: 21px; color: #fff; }
.hero__respiro { width: 50%; padding: 10px; }
.hero__respiro::before { content: ""; display: block; height: 50px; }

/* ---------- Sobre nós ---------- */

.sobre {
  min-height: 409px;
  background: var(--cinza-claro) url("/assets/img/element-line-sumwise.png") center bottom / cover no-repeat;
}
.sobre .secao__conteudo, .servico .secao__conteudo { align-items: center; }
.sobre__titulos { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Resultados ---------- */

.resultados { min-height: 409px; background: var(--cinza-claro); }
.resultados .secao__conteudo { flex-direction: column; align-items: center; }
.resultados__banner {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; min-height: 439px; padding: 10px; border-radius: 24px;
  background: url("/assets/img/RESULTADOS-COMPROVADOS-NA-GESTAO-FINANCEIRA-DE-POSTOS.webp") center / cover no-repeat;
}
.numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(1, 1fr);
  justify-items: center; align-items: center; gap: 20px;
  width: 95%; margin: -33px; padding: 24px;
  background: #fff; border-radius: 24px;
}
.numero { text-align: center; }
.numero h3 { margin-top: 24px; font-size: 24px; line-height: 1.4; font-weight: 600; color: var(--azul); }
.numero p { font-weight: 600; line-height: 18px; color: var(--grafite); }

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

.servico { min-height: 409px; }
.servico--bpo { background: url("/assets/img/element-line-sumwise-2.png") center top / auto no-repeat; }

/* ---------- Diferenciais ---------- */

.diferenciais { background: var(--cinza-claro); }
.diferenciais__grade {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px;
  width: 50%; min-width: 0; padding: 10px;
}
.diferencial { display: flex; flex-direction: column; min-width: 0; padding: 10px; }
.diferencial__icone img { display: inline-block; width: 85px; height: 85px; }
.diferencial h3 { font-size: 24px; line-height: 31px; font-weight: 600; color: var(--grafite); }

/* ---------- Como ajudamos ---------- */

.ajudamos { background: var(--cinza-claro) url("/assets/img/element-line-sumwise-3.png") center / auto no-repeat; }
.ajudamos .coluna { width: 100%; padding-bottom: 30px; }

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

.rodape { background: var(--grafite); color: var(--cinza-rodape); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rodape__conteudo { max-width: 1200px; margin: 0 auto; padding: 0 30px; }
.rodape__info { padding: 26.25px 0; font-size: 14px; }

/* ---------- WhatsApp flutuante ---------- */

.whatsapp-flutuante {
  position: fixed; right: 15px; bottom: 15px; z-index: 99999999;
  display: block; width: 50px; height: 50px;
  transform-origin: bottom right;
  animation: whatsapp-entrada 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.15s both;
}
.whatsapp-flutuante svg { display: block; width: 50px; height: 50px; }
@keyframes whatsapp-entrada { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* ---------- Página 404 ---------- */

/* Sem foto de fundo, a barra do cabeçalho é branca desde o topo */
.pagina-erro .cabecalho__barra { background: #fff; }
.pagina-erro .cabecalho--rolado .cabecalho__barra { background: rgba(255, 255, 255, 0.9); }
.pagina-erro .rodape { border-top: 0; }

.erro { padding-top: 124.8px; }
.erro__conteudo { max-width: 1200px; margin: 0 auto; padding: 0 30px; }
.erro__miolo { padding: 48px 10px; }
.erro h1 {
  margin-bottom: 17.42px;
  font-size: 26px; line-height: 1.4; font-weight: 700; text-align: center; text-transform: uppercase; color: #222;
}
.erro h1::after { content: ""; display: block; width: 130px; height: 1px; margin: 40px auto 48px; background: #e6e6e6; }
.erro p { margin-bottom: 24px; }
.erro a { color: #0bb4aa; text-decoration: none; transition: all 0.1s ease-in; }
.erro a:hover { color: #000; }

/* ---------- Quebras ---------- */

@media (min-width: 768px) {
  .rodape { font-size: 16px; line-height: 1.6; }
}

@media (max-width: 1024px) {
  .menu-principal { display: none; }
  .botao-menu { display: block; }
  .cabecalho__conteudo, .rodape__conteudo, .erro__conteudo { padding-left: 4%; padding-right: 4%; }
}

@media (max-width: 782px) {
  .menu-lateral .botao-menu--fechar { margin: 0 0 15px; }
}

@media (max-width: 767px) {
  .secao__conteudo { flex-wrap: wrap; padding: 4% 0; }
  .coluna, .hero__respiro, .diferenciais__grade { width: 100%; }

  .hero { padding: 0 4%; background-position: center; }
  .hero::before { opacity: 0.87; }
  .hero .secao__conteudo { padding: 2% 0; }
  .hero__respiro::before { height: 1px; }

  .sobre, .servico, .diferenciais, .ajudamos { padding: 0 4%; }
  .botoes--centro-celular { justify-content: center; }

  .numeros { grid-template-columns: repeat(2, 1fr); width: 100%; }

  .consultoria__imagem { padding: 4% 0 0; }

  .diferenciais__grade { gap: 4px; margin: 0; padding: 4% 0; }
  .diferencial { text-align: center; }
  .diferencial:first-child { padding: 0; align-items: center; }
  .diferencial__icone img { width: 70px; height: 70px; }
  .diferencial h3 { font-size: 16px; line-height: 1.6em; }
}

@media (max-width: 640px) {
  .menu-lateral .botao-menu--fechar { display: block; }
  .menu-lateral__conteudo { padding-top: 20px; }
  .menu-aberto .pagina .botao-menu span:nth-child(1) { transform: rotateZ(-40deg) translate3d(4px, 17px, 0); width: 12px; }
  .menu-aberto .pagina .botao-menu span:nth-child(2) { transform: translateX(3px); opacity: 1; }
  .menu-aberto .pagina .botao-menu span:nth-child(3) { transform: rotateZ(40deg) translate3d(4px, -17px, 0); width: 12px; }
  .rodape__info { text-align: center; }
}

@media (max-width: 480px) {
  :root { --menu-lateral: 320px; }
  .rodape { font-size: 14px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .whatsapp-flutuante { animation: none; }
}