:root {
  --marca: #2d6bff;
  --fundo: #f4f8fd;
  --papel: #ffffff;
  --linha: #e3ecf8;
  --texto: #1a2b4a;
  --mudo: #6d7f99;
  --verde: #2d6bff;
  --hoje: #8ec5ff;
  --anterior: #2451b8;
  --semana: #6d8cff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Open Sans", "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--texto);
  background: linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
}
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
code, pre { font-family: Consolas, monospace; }
code { background: #f6f6f6; border-radius: 6px; padding: 0.1rem 0.35rem; }
pre { background: #f6f6f6; border-radius: 8px; padding: 1rem; overflow: auto; white-space: pre-wrap; }
.comando-cron {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--linha);
  background: #f4f8fd;
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
}

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: 220px;
  background: #fff;
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 8px 12px;
  z-index: 20;
  transition: transform .2s ease;
}
html.menu-fechado .rail { transform: translateX(-100%); }
.rail-item {
  min-height: 40px;
  margin: 4px 0;
  padding: 8px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5c5c5c;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
}
.rail-item svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-item.activo, .rail-item:hover { background: linear-gradient(90deg, #4d86ff, #2d6bff); color: #fff; }
.rail-item.sair { margin-top: auto; }
.rail-item.sair:hover { background: #f3f3f3; color: #444; }

.coluna { margin-left: 220px; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.coluna > main { flex: 1; }
.rodape-conta {
  margin-top: auto;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  background: #fff;
  color: var(--mudo);
  font-size: 13px;
  font-weight: 700;
}
html.menu-fechado .coluna { margin-left: 0; }
.barra-topo {
  height: calc(56px + env(safe-area-inset-top));
  background: #fff;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top) max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  position: sticky;
  top: 0;
  z-index: 30;
}
.empresa { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.empresa strong { color: var(--marca); letter-spacing: .01em; }
button.hamb {
  margin: 0;
  padding: 6px 8px;
  background: transparent;
  color: #666;
  font-size: 20px;
  line-height: 1;
  border-radius: 8px;
}
button.hamb:hover { background: #f3f3f3; color: #222; }
.canto-topo { display: flex; align-items: center; gap: 10px; }
.instalar-app { margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.saudacao-canto { margin: 0; font-size: 13px; font-weight: 600; color: var(--mudo); }
.velo-menu { display: none; }
.ajuda-instalar p { margin: 0 0 4px; line-height: 1.5; color: var(--texto); }

main { padding: 16px 18px 32px; }
.faixa-conta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #e8f0ff;
  color: var(--texto);
}
.faixa-conta p { margin: 0; }
.faixa-conta button { width: auto; }
.barra-loja {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.selector-loja { position: relative; flex: 1; min-width: 0; }
.selector-loja-botao, .opcao-loja {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  text-align: left;
  background: #fff;
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(45, 107, 255, .06);
}
.selector-loja-botao { min-height: 64px; padding: 10px 14px; }
.selector-loja-botao:hover, .opcao-loja:hover { border-color: #c5d7f6; }
.marca-loja {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e8f0ff;
  color: var(--marca);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.marca-loja svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.texto-loja { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.texto-loja small, .texto-loja em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--mudo); }
.texto-loja strong { font-size: 15px; line-height: 1.2; }
.seta-loja { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--mudo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.selector-loja.aberto .seta-loja { transform: rotate(180deg); }
.selector-loja-lista {
  position: absolute;
  z-index: 35;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(26, 43, 74, .14);
}
.selector-loja-lista[hidden] { display: none; }
.opcao-loja { border-radius: 12px; box-shadow: none; padding: 8px 10px; }
.opcao-loja.activo { background: linear-gradient(90deg, #4d86ff, #2d6bff); color: #fff; border-color: transparent; }
.opcao-loja.activo .marca-loja { background: rgba(255, 255, 255, .18); color: #fff; }
.opcao-loja.activo .texto-loja em { color: rgba(255, 255, 255, .82); }
.opcao-loja.inactiva .texto-loja em { color: #b42318; }
.opcao-loja.activo.inactiva .texto-loja em { color: #ffe1e1; }
.interruptor {
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 8px;
  min-height: 52px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.interruptor input { position: absolute; opacity: 0; }
.interruptor i {
  width: 36px;
  height: 20px;
  border-radius: 99px;
  background: #d5d5d5;
  position: relative;
  display: inline-block;
}
.interruptor i::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.interruptor input:checked + i { background: var(--marca); }
.interruptor input:checked + i::after { left: 18px; }

.dia-loja { display: flex; justify-content: space-between; align-items: center; margin: 6px 2px 8px; }
.dia, .hora { display: flex; align-items: center; gap: 8px; }
.dia strong, .hora strong { font-size: 18px; font-weight: 600; }
.dia span, .cal, .hora span { color: #666; text-transform: uppercase; }
.progresso { height: 6px; background: #e4ecf8; border-radius: 99px; overflow: hidden; }
.progresso span { display: block; height: 100%; background: linear-gradient(90deg, #8ec5ff, #2d6bff); }
.horarios { display: flex; justify-content: space-between; color: #666; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin: 6px 0 8px; }
.horarios .fechado-hoje, .semana-resumo .dia-fechado { color: #a32020; font-weight: 700; }
.semana-resumo { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; color: #666; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.semana-horario { margin-top: 10px; }
.dia-horario {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1fr) 4.6rem;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
}
.dia-horario.cabeca {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--mudo);
  padding-bottom: 2px;
}
.dia-horario.cabeca span:last-child { text-align: center; }
.dia-horario .nome-dia { font-weight: 700; font-size: 13px; }
.cartao-form .dia-horario input[type="time"] {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 6px 4px;
}
.cartao-form label.check-fechado {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.cartao-form label.check-fechado input {
  width: 16px;
  height: 16px;
  margin: 0;
}
.dia-horario.fechado .nome-dia { color: var(--mudo); }
.dia-horario.fechado input[type="time"] { opacity: .4; }

.cartao, .painel-bloco, .cartao-form, .caixa-login {
  background: var(--papel);
  border: 1px solid #e6eef8;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.cartao, .cartao-form, .painel-bloco { padding: 16px 18px 14px; margin-bottom: 14px; }
.cartao h2, .painel-bloco h2, .cartao-form h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.cartao strong { display: block; font-size: 28px; line-height: 1.15; margin: 4px 0; }
.cartao p, .cartao-form p { margin: 4px 0; color: #555; }
.sub { color: var(--mudo) !important; font-size: 13px; }
.venda-topo, .kpi-topo { display: flex; justify-content: space-between; gap: 16px; }
.comparacao { text-align: right; }
.comparacao span { display: block; color: #666; font-size: 13px; }
.comparacao strong { font-size: 18px; font-weight: 600; }
.legenda { display: flex; gap: 16px; color: #555; font-size: 13px; margin: 8px 0; }
.legenda span { display: flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.grafico { width: 100%; height: 120px; display: block; }
.hero { background: #fff; border: 1px solid #e6eef8; border-radius: 8px; padding: 18px 20px; margin-bottom: 14px; }
.hero h1 { margin: 4px 0 8px; font-size: 22px; }
.olho { margin: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--marca); font-weight: 700; }
.previsoes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.previsoes article {
  background: #fff; border: 1px solid #e6eef8; border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: 220px;
}
.previsoes article span { width: 100%; background: var(--marca); border-radius: 6px 6px 2px 2px; min-height: 4px; }
.previsoes small, .previsoes em { color: var(--mudo); font-size: 12px; }
.boas-vindas { text-align: center; padding: 28px 18% 24px; }
.boas-vindas h1 { margin: 8px 0 12px; font-size: 26px; }
.boas-vindas p { margin: 8px auto; max-width: 640px; line-height: 1.45; }

.kpi { border-left: 5px solid var(--verde); }
.variacao { font-weight: 700; white-space: nowrap; }
.positivo { color: var(--verde); font-weight: 700; }
.negativo { color: #d23b3b; font-weight: 700; }
.com-unidade small { font-size: 16px; font-weight: 600; margin-left: 4px; }

.calor { display: grid; grid-template-columns: 2.6rem repeat(15, minmax(18px, 1fr)); gap: 3px; align-items: center; overflow-x: auto; }
.hora-calor, .dia-calor { font-size: 11px; color: var(--mudo); text-align: center; }
.celula-calor { display: block; height: 22px; border-radius: 4px; }
.barras-mapa { display: flex; flex-direction: column; gap: 8px; }
.linha-mapa { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; }
.trilho { display: block; height: 10px; background: #e7eefb; border-radius: 99px; overflow: hidden; }
.trilho i { display: block; height: 100%; background: linear-gradient(90deg, #8ec5ff, #2d6bff); border-radius: 99px; }
.exploracao .tres, .cartao-form .tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.alinha-botao { display: flex; flex-direction: column; justify-content: flex-end; }
.lista-exploracoes { display: flex; flex-direction: column; gap: 8px; }
.exploracao-guardada { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.exploracao-guardada a { color: var(--marca); font-weight: 700; text-decoration: none; }
.col-barra { width: 120px; }
.lista-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.segmentos { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
@media (max-width: 1200px) {
  .segmentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.insight h2 { margin: 4px 0 8px; font-size: 18px; }
.accao-insight { margin: 10px 0 0; font-weight: 700; color: var(--marca); }
.filtros { display: inline-flex; background: #fff; border: 1px solid #e4e4e4; border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.filtros a {
  background: transparent;
  color: #444;
  text-decoration: none;
  padding: 10px 18px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  border-right: 1px solid #eee;
}
.filtros a:last-child { border-right: 0; }
.filtros a.activo { background: var(--marca); color: #fff; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #f0f0f0; }
th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mudo); }
tr.total td { font-weight: 700; }
.tabela-larga, .painel-bloco { overflow-x: auto; }
.paginacao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 14px; }
.paginacao a, .paginacao span {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--linha);
  background: #fff;
  color: var(--texto);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
.paginacao a:hover { border-color: #c5d7f6; background: #f4f8fd; }
.paginacao .activo { background: linear-gradient(90deg, #4d86ff, #2d6bff); color: #fff; border-color: transparent; }
.paginacao .resumo, .paginacao .reticencias { border: 0; background: transparent; color: var(--mudo); min-width: 0; font-weight: 600; }

.duas, .duas-colunas, .grelha-lojas { display: grid; gap: 14px; }
.duas-colunas, .grelha-lojas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartao-form label, .caixa-login label { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--mudo); letter-spacing: .01em; }
input[type="email"], input[type="password"], input[type="text"], input[type="search"], input[type="number"], input:not([type]), textarea, select {
  appearance: none;
  width: 100%;
  border: 1px solid #e3ecf8;
  border-radius: 12px;
  padding: 12px 14px;
  background-color: #f4f8fd;
  color: var(--texto);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7f99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}
input[type="email"]:hover, input[type="password"]:hover, input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover, input:not([type]):hover, textarea:hover, select:hover {
  border-color: #c5d7f6;
}
input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, input:not([type]):focus, textarea:focus, select:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--marca);
  box-shadow: 0 0 0 4px rgba(45, 107, 255, .16);
}
input[type="time"], input[type="date"], input[type="file"] {
  border: 1px solid #e3ecf8;
  border-radius: 12px;
  background-color: #f4f8fd;
  color: var(--texto);
  font-weight: 600;
}
button {
  background: linear-gradient(90deg, #4d86ff, #2d6bff);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}
.cartao-form button { margin-top: 14px; }
td.accoes { width: 1%; white-space: nowrap; vertical-align: middle; }
.accoes form { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; }
.accoes button, .botao-linha {
  margin-top: 0;
  background: linear-gradient(90deg, #4d86ff, #2d6bff);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
}
.botoes-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.barra-nova { margin-bottom: 14px; }
.barra-catalogo { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pesquisa { display: flex; gap: 8px; flex: 1; }
.pesquisa input { flex: 1; }
a.botao-linha.secundario { background: #fff; color: var(--marca); border: 1px solid var(--marca); }
.botoes-linha button { margin-top: 14px; }
button.secundario, .accoes button.secundario { background: #fff; color: var(--marca); border: 1px solid var(--marca); }
.etws-modo { display: flex; gap: 16px; margin: 8px 0; border: 0; background: transparent; padding: 0; }
.etws-modo label { display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 600; }
.check-linha { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: 12px; }
dialog.popup.fatura { width: min(880px, calc(100vw - 32px)); }
.fatura-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 12px 0 14px; }
.fatura-meta span { display: block; color: var(--mudo); font-size: 12px; }
.fatura-totais { margin-top: 12px; text-align: right; }
.fatura-totais p { margin: 2px 0; }
.fatura-totais strong { font-size: 22px; }
.numero-doc { font-weight: 700; }

dialog.popup {
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: #fff;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 24px 60px rgba(26, 43, 74, .18);
}
dialog.popup::backdrop { background: rgba(26, 43, 74, .35); }
dialog.popup .cartao-form { margin: 0; box-shadow: none; }
.popup-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.popup-cabeca h2 { margin: 0; }
.popup-fechar {
  margin: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #f2f2f2;
  color: #333;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
}
.popup-loja { margin: 8px 0 0; color: var(--mudo); }
.etiqueta { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #f3f3f3; color: #666; font-size: 12px; font-weight: 700; vertical-align: middle; }
.cartao-form.inactiva { opacity: .72; }
.hero a { color: var(--marca); }
.flash { padding: 10px 12px; border-radius: 8px; background: #e8f1ff; color: #1d4fbf; }
.flash.erro { background: #fdecec; color: #a32020; }

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f3f7fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 80h160M80 0v160' stroke='%23e3ecf8'/%3E%3C/svg%3E");
}
.pagina-registar {
  display: flex;
  flex-direction: column;
  place-items: stretch;
}
.pagina-registar main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 32px 0;
}
.pagina-registar .rodape { width: 100%; }
.caixa-login { width: min(420px, calc(100% - 32px)); padding: 28px 26px 22px; }
.caixa-login p { text-align: center; }
.caixa-login button { width: 100%; margin-top: 16px; padding: 12px; }
.nota { color: var(--mudo); font-size: 12px; }
.caixa-login a, .nota a { color: var(--marca); font-weight: 700; text-decoration: none; }
.caixa-totp { width: min(460px, calc(100% - 32px)); }
.qr-totp { display: flex; justify-content: center; margin: 8px 0 4px; }
.qr-totp img, .qr-totp canvas { border-radius: 8px; }
.chave-totp { font-size: 13px; line-height: 1.45; }
.chave-totp strong { letter-spacing: .08em; }
html:has(body.apresentacao) { scroll-padding-top: 84px; }
.apresentacao {
  margin: 0;
  min-height: 100vh;
  color: var(--texto);
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(142, 197, 255, .55), transparent 60%),
    radial-gradient(700px 380px at 100% 0%, rgba(45, 107, 255, .18), transparent 55%),
    #f4f8ff;
}
.apresentacao h1, .apresentacao h2, .apresentacao h3 { letter-spacing: -.02em; }
.topo-publico {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 32px;
  background: #fff;
  border-bottom: 1px solid rgba(227, 236, 248, .9);
  box-shadow: 0 8px 24px rgba(26, 43, 74, .04);
}
.marca-publica { color: var(--marca); font-size: 18px; font-weight: 800; text-decoration: none; }
.topo-publico nav { display: flex; gap: 8px 18px; align-items: center; }
.topo-publico nav a { color: #3d4d66; font-weight: 700; text-decoration: none; }
.topo-publico nav a.botao-linha { color: #fff; padding: 8px 14px; }
.hamb-publico { display: none; margin: 0; background: #fff; color: var(--marca); border: 1px solid #d5e4fb; }
.faixa-etpos { max-width: 1120px; margin: 28px auto 0; padding: 0 32px; }
.faixa-etpos-caixa {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  background: #fff;
  border: 1px solid #e3ecf8;
  border-radius: 18px;
  padding: 16px 22px;
}
.faixa-etpos img { height: 56px; width: auto; }
.faixa-etpos p { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.faixa-etpos strong { color: var(--marca); }
.hero-publico {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 32px 28px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 36px;
  align-items: center;
}
.hero-publico h1 { font-size: 52px; line-height: 1.05; font-weight: 800; margin: 8px 0 14px; }
.hero-texto > p { font-size: 18px; line-height: 1.55; color: #3d4d66; max-width: 34rem; }
.promessas { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.promessas li { padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid #dbe7f8; color: #2451b8; font-size: 13px; font-weight: 700; }
.painel-vivo {
  background: #fff;
  border: 1px solid #e3ecf8;
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 24px 60px rgba(45, 107, 255, .12);
}
.painel-cabeca { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.painel-cabeca span:last-child { color: var(--mudo); font-size: 12px; font-weight: 700; }
.loja-viva { margin-top: 10px; padding: 14px; border-radius: 16px; background: #f7faff; border: 1px solid #e6eef8; }
.loja-viva.destaque { background: linear-gradient(180deg, #f3f7ff, #fff); }
.loja-viva header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.loja-viva strong { font-size: 15px; }
.loja-viva em { color: var(--mudo); font-style: normal; font-size: 12px; }
.loja-viva b { display: block; margin: 6px 0 2px; font-size: 26px; color: var(--marca); }
.loja-viva p { margin: 0; color: #3d4d66; font-size: 13px; }
.mini-barras { display: flex; align-items: flex-end; gap: 5px; height: 42px; margin-top: 10px; }
.mini-barras i { flex: 1; display: block; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #8ec5ff, #2d6bff); }
.selo-falso { display: inline-block; margin: 0; padding: 4px 10px; border-radius: 999px; background: #fff4d6; color: #8a5a00; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nota-exemplo { margin: 12px 0 0; color: var(--mudo); font-size: 13px; }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.passos li { background: #fff; border: 1px solid #e6eef8; border-radius: 18px; padding: 18px; box-shadow: 0 10px 30px rgba(26, 43, 74, .04); }
.passos span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #e8f1ff; color: var(--marca); font-weight: 800; }
.passos h3 { margin: 12px 0 6px; }
.bloco-publico, .cta-publico, .rodape { scroll-margin-top: 76px; }
.bloco-publico { padding: 28px 0 42px; }
.bloco-publico.claro { background: rgba(255, 255, 255, .72); }
.miolo-publico { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.bloco-publico h2, .cta-publico h2 { margin: 0 0 8px; font-size: 34px; font-weight: 800; }
.lead { max-width: 640px; color: #3d4d66; font-size: 16px; }
.lista-funcionalidades, .planos, .lojas-exemplo, .painel-detalhe { display: grid; gap: 14px; margin-top: 18px; }
.lista-funcionalidades { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.planos, .lojas-exemplo, .painel-detalhe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lista-funcionalidades article, .planos article, .lojas-exemplo article, .painel-detalhe > div {
  background: #fff;
  border: 1px solid #e6eef8;
  border-radius: 18px;
  padding: 18px;
}
.lista-funcionalidades span { color: #8ec5ff; font-weight: 800; font-size: 13px; }
.lista-funcionalidades h3, .planos h3, .lojas-exemplo h3, .painel-detalhe h3 { margin: 8px 0; font-size: 16px; }
.cidade { margin: 0; color: var(--mudo); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.valor-exemplo { margin: 4px 0 8px; font-size: 32px; font-weight: 800; color: var(--marca); }
.lojas-exemplo ul { margin: 0; padding-left: 18px; color: #3d4d66; }
.painel-detalhe table { margin: 0; }
.painel-detalhe .linha-mapa { grid-template-columns: 7.5rem 1fr auto; margin-top: 10px; }
.plano-ano { background: linear-gradient(180deg, #f3f7ff, #fff); border-color: #c9dbff; }
.preco-plano { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.preco-plano strong { font-size: 36px; line-height: 1; letter-spacing: -.03em; color: var(--marca); }
.preco-plano span { color: var(--mudo); font-size: 14px; font-weight: 700; }
.planos a { display: inline-block; margin-top: 8px; color: var(--marca); font-weight: 800; text-decoration: none; }
.cta-publico {
  max-width: 1120px;
  margin: 8px auto 40px;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: linear-gradient(120deg, #2451b8, #2d6bff 45%, #6d8cff);
  color: #fff;
  border-radius: 22px;
}
.cta-publico p { color: #e7f0ff; margin: 0; }
.cta-publico .botao-linha { background: #fff; color: var(--marca); }
.cta-publico .botao-linha.secundario { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.rodape { background: #1a2b4a; color: #d5e2f7; padding: 36px 0 16px; }
.rodape-grelha { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.rodape-marca p { margin: 8px 0 0; max-width: 26ch; line-height: 1.45; }
.rodape strong { color: #fff; font-size: 18px; }
.rodape h2 { margin: 0 0 12px; color: #fff; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.rodape a { display: flex; align-items: flex-start; gap: 10px; color: #d5e2f7; text-decoration: none; margin: 0 0 12px; font-weight: 600; line-height: 1.35; }
.rodape a:hover { color: #fff; }
.rodape a svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  padding: 7px;
  box-sizing: content-box;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  fill: none;
  stroke: #8ec5ff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rodape a:hover svg { background: rgba(45, 107, 255, .45); stroke: #fff; }
.rodape-base { max-width: 1120px; margin: 8px auto 0; padding: 14px 32px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rodape-base a { display: inline; margin: 0; font-weight: 700; color: #fff; }
.pagina-termos { display: flex; flex-direction: column; min-height: 100vh; }
.pagina-termos main { flex: 1; width: min(760px, calc(100% - 64px)); margin: 28px auto 48px; }
.pagina-termos h1 { margin: 0 0 8px; font-size: 40px; line-height: 1.1; }
.pagina-termos .lead { color: var(--mudo); }
.pagina-termos h2 { margin: 28px 0 8px; font-size: 20px; }
.pagina-termos p { line-height: 1.6; }
.pagina-termos a { color: var(--marca); font-weight: 700; }
.aviso-termos { margin-top: 18px; padding: 18px 20px; background: #fff; border: 1px solid #c9dbff; border-radius: 16px; }
.aviso-termos strong { display: block; margin-bottom: 8px; color: var(--marca); font-size: 18px; }
.aviso-termos p { margin: 0; }

@media (max-width: 800px) {
  .boas-vindas { padding: 24px 16px; }
  .duas-colunas, .grelha-lojas, .previsoes, .grelha-apresentacao, .lista-insights, .lista-funcionalidades, .planos, .lojas-exemplo, .painel-detalhe, .passos, .rodape-grelha, .exploracao .tres, .cartao-form .tres, .linha-mapa { grid-template-columns: 1fr; }
  .hero-publico, .cta-publico { grid-template-columns: 1fr; display: grid; padding-top: 28px; }
  .faixa-etpos { padding: 0 16px; }
  .faixa-etpos-caixa { flex-direction: column; align-items: center; gap: 12px; }
  .faixa-etpos p { font-size: 22px; }
  .hero-publico h1, .bloco-publico h2, .pagina-termos h1 { font-size: 32px; }
  .pagina-termos main { width: min(760px, calc(100% - 32px)); }
  .pagina-termos .topo-publico { padding: 14px 16px; }
  .hamb-publico { display: inline-flex; }
  .topo-publico nav {
    display: none;
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    background: #fff;
    border-bottom: 1px solid #e3ecf8;
  }
  body.menu-publico-aberto .topo-publico nav { display: flex; }
  .topo-publico nav a { padding: 12px 4px; }
  .cta-publico { margin-inline: 16px; }
  .barra-loja { flex-direction: column; align-items: stretch; }
  .coluna, html.menu-fechado .coluna { margin-left: 0; }
  .rail {
    top: calc(56px + env(safe-area-inset-top));
    width: min(280px, 86vw);
    overflow-y: auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  html:not(.menu-fechado) .rail { box-shadow: 8px 0 24px rgba(26, 43, 74, .16); }
  html:not(.menu-fechado) body:has(.rail) { overflow: hidden; }
  .velo-menu {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(26, 43, 74, .38);
  }
  html:not(.menu-fechado) .velo-menu { display: block; }
  main { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}