/* ------------------------------------------------------------------
   Layout novo do HUB (flag novo-layout), desenhado no canvas
   "HUB PDV Kaw White". Carregado só com a flag ligada, depois do app.css.

   Tudo aqui tem o prefixo kw-: as telas antigas (Bootstrap 4 do template)
   continuam com o app.css e só ganham os ajustes do fim deste arquivo.
   ------------------------------------------------------------------ */

:root {
  --kw-vermelho: #d41116;
  --kw-vermelho-escuro: #b00e13;
  --kw-vinho: #6c050b;
  --kw-vermelho-claro: #fdecec;
  --kw-vermelho-borda: #f9d2d3;

  --kw-fundo: #f5f6f8;
  --kw-superficie: #ffffff;
  --kw-borda: #e3e6eb;
  --kw-borda-forte: #cdd3db;
  --kw-trilho: #eceff3;

  --kw-texto: #111418;
  --kw-texto-2: #3a424e;
  --kw-texto-suave: #5b6573;
  --kw-texto-fraco: #8a93a0;

  --kw-sucesso: #14713b;
  --kw-sucesso-claro: #e4f4ea;
  --kw-whatsapp: #1e9e54;
  --kw-alerta: #8a5300;
  --kw-alerta-claro: #fcefd6;
  --kw-info: #2b5f8a;
  --kw-info-claro: #e5eef5;

  --kw-fonte: "Inter", system-ui, sans-serif;
  --kw-fonte-titulo: "Montserrat", "Inter", sans-serif;
  --kw-raio: 6px;
  --kw-sombra: 0 2px 6px rgba(17, 20, 24, 0.08);
  --kw-largura-menu: 264px;
}

body.kw {
  margin: 0;
  background: var(--kw-fundo);
  color: var(--kw-texto);
  font-family: var(--kw-fonte);
}

/* Cor de link só em links: botões mantêm a cor própria. :where() deixa a especificidade baixa */
body.kw a:where(:not(.btn, [class*="kw-botao"], .btn-principal, .btn-secundario)) {
  color: var(--kw-vermelho-escuro);
}

body.kw a:where(:not(.btn, [class*="kw-botao"], .btn-principal, .btn-secundario)):hover {
  color: var(--kw-vinho);
}

/* Botões com o vermelho da marca: texto sempre branco, em todos os estados (contraste) */
body.kw .btn.btn-primary,
body.kw .btn.btn-primary:hover,
body.kw .btn.btn-primary:focus,
body.kw .btn.btn-primary:active,
body.kw .btn.btn-danger,
body.kw .btn.btn-danger:hover,
body.kw .btn.btn-danger:focus,
body.kw .btn.btn-danger:active,
body.kw .btn.btn-gradient-primary,
body.kw a.btn[href="#next"],
body.kw a.btn[href="#previous"],
body.kw .badge-danger,
body.kw .badge-primary {
  color: #fff;
}

/* ---------------------------------------------------------------
   Casca: menu lateral + coluna principal
   --------------------------------------------------------------- */
.kw-casca {
  display: flex;
  min-height: 100vh;
}

.kw-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kw-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kw-conteudo {
  flex: 1;
  padding: 28px;
}

.kw-rodape {
  padding: 16px 28px 24px;
  font-size: 13px;
  color: var(--kw-texto-suave);
}

/* ---------------------------------------------------------------
   Menu lateral
   --------------------------------------------------------------- */
.kw-sidebar {
  position: sticky;
  top: 0;
  flex: 0 0 var(--kw-largura-menu);
  width: var(--kw-largura-menu);
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px 14px;
  background: var(--kw-superficie);
  border-right: 1px solid var(--kw-borda);
  color: var(--kw-texto);
}

.kw-sidebar__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 8px;
}

.kw-sidebar__logo img {
  display: block;
  height: 34px;
  width: auto;
}

body.kw .kw-sidebar .kw-sidebar__fechar {
  display: none;
}

.kw-sidebar__rolagem {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kw-loja {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--kw-borda);
  border-radius: var(--kw-raio);
  background: var(--kw-fundo);
}

.kw-loja__marca {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--kw-raio);
  background: var(--kw-vermelho);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kw-loja__textos,
.kw-usuario__textos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kw-loja__nome,
.kw-usuario__nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--kw-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kw-loja__detalhe,
.kw-usuario__detalhe {
  font-size: 12px;
  color: var(--kw-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kw-nav__grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kw-nav__grupo--rodape {
  border-top: 1px solid var(--kw-borda);
  padding-top: 14px;
}

.kw-nav__titulo {
  padding: 0 12px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kw-texto-suave);
}

body.kw .kw-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: var(--kw-raio);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kw-texto-2);
  text-decoration: none;
  cursor: pointer;
}

body.kw .kw-nav__item:hover {
  background: var(--kw-fundo);
  color: var(--kw-vermelho);
}

body.kw .kw-nav__item--ativo,
body.kw .kw-sidebar a.kw-nav__item.active {
  background: var(--kw-vermelho-claro);
  color: var(--kw-vermelho-escuro);
}

.kw-nav__rotulo {
  flex: 1;
  min-width: 0;
}

.kw-nav__item.navegando,
.kw-nav__subitem.navegando {
  opacity: 0.7;
}

.kw-nav__mais > summary {
  list-style: none;
}

.kw-nav__mais > summary::-webkit-details-marker {
  display: none;
}

.kw-nav__seta {
  transition: transform 0.15s ease-out;
}

.kw-nav__mais[open] .kw-nav__seta {
  transform: rotate(180deg);
}

.kw-nav__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px 42px;
}

body.kw .kw-nav__subitem {
  display: block;
  padding: 7px 12px;
  border-radius: var(--kw-raio);
  font-size: 14px;
  font-weight: 600;
  color: var(--kw-texto-2);
  text-decoration: none;
}

body.kw .kw-nav__subitem:hover {
  background: var(--kw-fundo);
  color: var(--kw-vermelho);
}

body.kw .kw-nav__subitem--ativo,
body.kw .kw-sidebar a.kw-nav__subitem.active {
  background: var(--kw-vermelho-claro);
  color: var(--kw-vermelho-escuro);
}

.kw-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--kw-borda);
}

.kw-usuario__avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--kw-texto);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------
   Topo
   --------------------------------------------------------------- */
.kw-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 28px;
  background: var(--kw-superficie);
  border-bottom: 1px solid var(--kw-borda);
}

body.kw .kw-topo .kw-topo__menu {
  display: none;
}

.kw-topo__titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--kw-texto);
}

.kw-topo__espaco {
  flex: 1;
}

/* ---------------------------------------------------------------
   Botões
   --------------------------------------------------------------- */
body.kw .kw-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--kw-raio);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

body.kw .kw-botao:disabled {
  opacity: 0.6;
  cursor: default;
}

body.kw .kw-botao--primario {
  background: var(--kw-vermelho);
  color: #fff;
  font-weight: 800;
}

body.kw .kw-botao--primario:hover {
  background: var(--kw-vermelho-escuro);
  color: #fff;
}

body.kw .kw-botao--secundario {
  background: var(--kw-superficie);
  border-color: var(--kw-borda-forte);
  color: var(--kw-texto);
}

body.kw .kw-botao--secundario:hover {
  background: var(--kw-fundo);
  color: var(--kw-texto);
}

body.kw .kw-botao--whatsapp {
  background: var(--kw-whatsapp);
  color: #fff;
}

body.kw .kw-botao--whatsapp:hover {
  background: var(--kw-sucesso);
  color: #fff;
}

body.kw .kw-botao-icone {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--kw-borda);
  border-radius: var(--kw-raio);
  background: var(--kw-superficie);
  color: var(--kw-texto-2);
  cursor: pointer;
}

body.kw .kw-botao-icone:hover {
  background: var(--kw-fundo);
  color: var(--kw-vermelho);
}

body.kw .kw-botao:focus-visible,
body.kw .kw-botao-icone:focus-visible,
body.kw .kw-nav__item:focus-visible,
body.kw .kw-nav__subitem:focus-visible {
  outline: 2px solid var(--kw-vermelho);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Conteúdo das telas novas
   --------------------------------------------------------------- */
.kw-pagina {
  width: 100%;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kw-cabecalho {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.kw-cabecalho__textos {
  flex: 1;
  min-width: 260px;
}

body.kw .kw-titulo {
  margin: 0;
  font-family: var(--kw-fonte-titulo);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--kw-texto);
}

.kw-subtitulo {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--kw-texto-suave);
}

.kw-cartao {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--kw-superficie);
  border: 1px solid var(--kw-borda);
  border-radius: var(--kw-raio);
  box-shadow: var(--kw-sombra);
}

body.kw .kw-cartao__titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--kw-texto);
}

/* Faixa de destaque (teste grátis, avisos de assinatura) */
.kw-destaque {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 18px 22px;
  background: var(--kw-superficie);
  border: 1px solid var(--kw-vermelho-borda);
  border-radius: var(--kw-raio);
  box-shadow: var(--kw-sombra);
}

.kw-destaque__icone {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--kw-raio);
  background: var(--kw-vermelho-claro);
  color: var(--kw-vermelho);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kw-destaque__textos {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kw-destaque__titulo {
  font-size: 16px;
  font-weight: 800;
  color: var(--kw-texto);
}

.kw-destaque__texto {
  font-size: 13.5px;
  color: var(--kw-texto-suave);
}

/* Indicador numérico */
.kw-indicador {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--kw-superficie);
  border: 1px solid var(--kw-borda);
  border-radius: var(--kw-raio);
  box-shadow: var(--kw-sombra);
}

.kw-indicador__rotulo {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kw-texto-suave);
}

.kw-indicador__valor {
  font-family: var(--kw-fonte-titulo);
  font-weight: 800;
  font-size: 26px;
  color: var(--kw-texto);
}

.kw-indicador__nota {
  font-size: 13px;
  color: var(--kw-texto-suave);
}

.kw-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Selos (situação, etapa, contadores) */
.kw-selo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--kw-texto-2);
  background: var(--kw-trilho);
}

.kw-selo--sucesso {
  color: var(--kw-sucesso);
  background: var(--kw-sucesso-claro);
}

.kw-selo--alerta {
  color: var(--kw-alerta);
  background: var(--kw-alerta-claro);
}

.kw-selo--perigo {
  color: var(--kw-vermelho-escuro);
  background: var(--kw-vermelho-claro);
}

.kw-selo--info {
  color: var(--kw-info);
  background: var(--kw-info-claro);
}

.kw-nota {
  margin: 0;
  font-size: 13px;
  color: var(--kw-texto-suave);
}

/* ---------------------------------------------------------------
   Telas antigas dentro da casca nova: só o acabamento dos cartões
   --------------------------------------------------------------- */
.kw-conteudo .card {
  border: 1px solid var(--kw-borda);
  border-radius: var(--kw-raio);
  box-shadow: var(--kw-sombra);
}

/* ---------------------------------------------------------------
   Cadastro (layouts.auth): apresentação à esquerda, formulário à
   direita. Os formulários são os mesmos do layout antigo
   (cadastro/partials/form-etapa*), só restilizados aqui.
   --------------------------------------------------------------- */
body.kw.form-membership {
  padding: 0;
  background: var(--kw-superficie);
}

body.kw.form-membership .form-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.kw-cadastro {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

.kw-cadastro__apresentacao,
.kw-cadastro__lado {
  flex: 1 1 420px;
  box-sizing: border-box;
  padding: 56px 64px;
}

.kw-cadastro__apresentacao {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  background: var(--kw-fundo);
}

.kw-cadastro__logo {
  align-self: flex-start;
  height: 52px;
  width: auto;
}

.kw-cadastro__chamada {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.kw .kw-cadastro__titulo {
  margin: 0;
  max-width: 560px;
  font-family: var(--kw-fonte-titulo);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--kw-texto);
}

.kw-cadastro__texto {
  margin: 0;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--kw-texto-suave);
}

.kw-cadastro__vantagens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  color: var(--kw-texto);
}

.kw-cadastro__vantagens li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kw-cadastro__vantagens .kw-icone {
  flex: 0 0 auto;
  color: var(--kw-vermelho);
  stroke-width: 2.5;
}

.kw-cadastro__lado {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kw-cadastro__caixa {
  width: 100%;
  max-width: 440px;
}

.kw-cadastro__cabecalho {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.kw-cadastro__passo {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kw-vermelho-escuro);
}

.kw-cadastro__trilho {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.kw-cadastro__trilho span {
  height: 4px;
  border-radius: 999px;
  background: var(--kw-borda);
}

.kw-cadastro__trilho .kw-cadastro__trilho-feito {
  background: var(--kw-vermelho);
}

body.kw .kw-cadastro__titulo-form {
  margin: 4px 0 0;
  font-family: var(--kw-fonte-titulo);
  font-weight: 800;
  font-size: 26px;
  color: var(--kw-texto);
}

.kw-cadastro__subtitulo {
  margin: 0;
  font-size: 14.5px;
  color: var(--kw-texto-suave);
}

.kw-cadastro .form-group {
  margin-bottom: 18px;
}

body.kw .kw-cadastro label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--kw-texto-2);
}

body.kw .kw-cadastro .form-control {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--kw-borda-forte);
  border-radius: var(--kw-raio);
  background: var(--kw-superficie);
  font-family: inherit;
  font-size: 15px;
  color: var(--kw-texto);
  box-shadow: none;
}

body.kw .kw-cadastro .form-control:focus {
  border-color: var(--kw-vermelho);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 17, 22, 0.15);
}

body.kw .kw-cadastro .form-control.is-invalid {
  border-color: var(--kw-vermelho);
}

.kw-cadastro .erro-campo {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--kw-vermelho-escuro);
}

body.kw .kw-cadastro .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--kw-texto-2);
  cursor: pointer;
}

.kw-cadastro .check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--kw-vermelho);
}

/* armadilha para robôs: continua fora da tela */
.kw-cadastro .armadilha {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kw-cadastro .alerta {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--kw-vermelho-borda);
  border-radius: var(--kw-raio);
  background: var(--kw-vermelho-claro);
  font-size: 14px;
  color: var(--kw-vinho);
}

body.kw .kw-cadastro .alerta a {
  color: var(--kw-vinho);
  font-weight: 700;
  text-decoration: underline;
}

body.kw .kw-cadastro .btn-principal,
body.kw .kw-cadastro .btn-secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  border-radius: var(--kw-raio);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

body.kw .kw-cadastro .btn-principal {
  height: 50px;
  border: 0;
  background: var(--kw-vermelho);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

body.kw .kw-cadastro .btn-principal:hover {
  background: var(--kw-vermelho-escuro);
  color: #fff;
}

body.kw .kw-cadastro .btn-principal:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

body.kw .kw-cadastro .btn-secundario {
  height: 46px;
  border: 1px solid var(--kw-borda-forte);
  background: var(--kw-superficie);
  color: var(--kw-texto);
  font-size: 14px;
  font-weight: 700;
}

body.kw .kw-cadastro .btn-secundario:hover {
  background: var(--kw-fundo);
  color: var(--kw-texto);
}

body.kw .kw-cadastro .link-voltar {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .kw-cadastro__apresentacao,
  .kw-cadastro__lado {
    padding: 28px 16px;
  }

  .kw-cadastro__apresentacao {
    gap: 16px;
  }

  body.kw .kw-cadastro__titulo {
    font-size: 26px;
  }

  .kw-cadastro__logo {
    height: 40px;
  }

  /* Nas etapas, o formulário sobe: a apresentação fica só com logo e título */
  .kw-cadastro--etapa .kw-cadastro__texto,
  .kw-cadastro--etapa .kw-cadastro__vantagens {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Aviso de cookies (layouts/partials/aviso-cookies) no visual novo
   --------------------------------------------------------------- */
body.kw #aviso-cookies {
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 28px;
  background: var(--kw-superficie);
  border-top: 1px solid var(--kw-borda);
  box-shadow: 0 -2px 6px rgba(17, 20, 24, 0.06);
  color: var(--kw-texto-2);
  font-family: var(--kw-fonte);
}

body.kw #aviso-cookies a {
  color: var(--kw-vermelho-escuro);
  font-weight: 700;
  text-decoration: none;
}

body.kw #aviso-cookies .btn-entendi {
  border: 1px solid var(--kw-vermelho);
  border-radius: var(--kw-raio);
  background: var(--kw-superficie);
  color: var(--kw-vermelho-escuro);
  font-family: inherit;
  font-weight: 800;
}

body.kw #aviso-cookies .btn-entendi:hover {
  background: var(--kw-vermelho-claro);
}

/* ---------------------------------------------------------------
   Celular e tablet: o menu vira gaveta aberta pelo botão do topo
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .kw-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    box-shadow: none;
  }

  body.kw-menu-aberto .kw-sidebar {
    transform: none;
    box-shadow: 0 8px 24px rgba(17, 20, 24, 0.18);
  }

  body.kw-menu-aberto {
    overflow: hidden;
  }

  body.kw .kw-sidebar .kw-sidebar__fechar,
  body.kw .kw-topo .kw-topo__menu {
    display: inline-flex;
  }

  .kw-fundo-menu:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1030;
    background: rgba(17, 20, 24, 0.4);
  }

  .kw-topo {
    padding: 10px 16px;
  }

  .kw-conteudo {
    padding: 20px 16px;
  }

  .kw-rodape {
    padding: 12px 16px 20px;
  }
}

@media (max-width: 575.98px) {
  body.kw .kw-titulo {
    font-size: 24px;
  }

  /* No celular o topo mostra só os ícones dos botões */
  body.kw .kw-topo .kw-botao {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kw-sidebar,
  .kw-nav__seta {
    transition: none;
  }
}