:root {
  --azul: #14224b;
  --azul-escuro: #0b1530;
  --azul-medio: #1d2f63;
  --vermelho: #c81e2c;
  --vermelho-escuro: #a11723;
  --amarelo: #f0b429;
  --verde: #00a650;
  --verde-escuro: #00913f;
  --verde-bg: #e6f7ec;
  --cinza-bg: #f4f5f7;
  --cinza-bg-forte: #eceef1;
  --cinza-borda: #dcdee3;
  --cinza-borda-forte: #c7cad1;
  --texto: #1b1d21;
  --texto-suave: #6b6f76;
  --texto-fraco: #90949c;
  --branco: #fff;
  --sombra-sutil: 0 1px 2px rgba(15, 22, 48, 0.06);
  --sombra: 0 2px 8px rgba(15, 22, 48, 0.08);
  --raio: 6px;
  --raio-sm: 4px;
  --raio-lg: 8px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--cinza-bg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================= Header ================= */
.topo-aviso {
  background: var(--azul-escuro);
  color: #cfd6e8;
  text-align: center;
  font-size: 12.5px;
  padding: 7px 10px;
  letter-spacing: .01em;
}

.cabecalho {
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  position: sticky;
  top: 0;
  z-index: 50;
}

.cabecalho .container {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.cabecalho .logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cabecalho .logo img {
  height: 46px;
  width: auto;
}

.busca {
  flex: 1;
  display: flex;
  max-width: 640px;
}

.busca input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--cinza-borda-forte);
  border-right: none;
  border-radius: var(--raio-sm) 0 0 var(--raio-sm);
  font-size: 14px;
  background: var(--cinza-bg);
}
.busca input:focus { outline: none; border-color: var(--azul); background: var(--branco); }

.busca button {
  background: var(--azul);
  color: var(--branco);
  border: none;
  width: 44px;
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
}
.busca button:hover { background: var(--azul-medio); }

.acoes-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.icone-acao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--raio-sm);
  border: none;
  background: transparent;
  color: var(--azul);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.icone-acao:hover { color: var(--vermelho); }
.icone-acao svg { display: block; }

.icone-acao.icone-carrinho {
  color: var(--azul);
  font-size: 20px;
}
.icone-acao.icone-carrinho:hover { color: var(--vermelho); }

.badge-contagem {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--vermelho);
  color: var(--branco);
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--branco);
}

.faixa-categorias {
  background: var(--azul);
  border-top: 1px solid rgba(255,255,255,.08);
}

.faixa-categorias .container {
  display: flex;
  gap: 26px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 20px;
  color: #c3cae2;
  overflow-x: auto;
  letter-spacing: .01em;
}
.faixa-categorias a:hover { color: var(--branco); }

/* ================= Breadcrumb ================= */
.breadcrumb {
  font-size: 12.5px;
  color: var(--texto-suave);
  margin: 16px 0 14px;
}
.breadcrumb a:hover { color: var(--vermelho); text-decoration: underline; }

/* ================= Home ================= */
.carrossel-home {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--azul-escuro);
}
.trilho-banner {
  display: flex;
  transition: transform .65s ease;
  will-change: transform;
}
.slide-banner {
  flex: 0 0 100%;
  min-width: 0;
}
.slide-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 1983 / 793;
  object-fit: cover;
}
.controle-banner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 21, 48, .58);
  color: var(--branco);
  font-size: 22px;
  cursor: pointer;
  transition: background .2s;
  z-index: 2;
}
.controle-banner:hover { background: rgba(11, 21, 48, .86); }
.controle-banner.anterior { left: 20px; }
.controle-banner.proximo { right: 20px; }
.indicadores-banner {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.indicadores-banner button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(11, 21, 48, .35);
  cursor: pointer;
}
.indicadores-banner button.ativo { background: var(--branco); }

.grade-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0 44px;
}

.cartao-produto {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.cartao-produto:hover { border-color: var(--cinza-borda-forte); box-shadow: var(--sombra-sutil); }
.cartao-produto img { aspect-ratio: 1/1; object-fit: contain; width: 100%; background: var(--branco); }
.cartao-produto .info { padding: 12px 14px; }
.cartao-produto .marca { font-size: 11.5px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.cartao-produto .nome { font-size: 14px; margin: 4px 0 8px; min-height: 36px; }
.cartao-produto .preco-de-cartao { font-size: 12.5px; color: var(--texto-fraco); text-decoration: line-through; }
.cartao-produto .preco-por { font-size: 19px; font-weight: 700; color: var(--verde); }

/* ================= Página de produto ================= */
.pagina-produto {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 36px;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  padding: 24px;
  border-radius: var(--raio);
  margin-bottom: 20px;
}

.galeria { position: relative; }

.galeria .imagem-principal {
  position: relative;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--branco);
}
.galeria .imagem-principal img { width: 100%; height: 100%; object-fit: contain; }
.galeria .imagem-principal video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.galeria .imagem-principal [hidden] { display: none; }

.galeria-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--cinza-borda-forte);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--azul);
  box-shadow: var(--sombra-sutil);
}
.galeria-seta:hover { background: var(--branco); border-color: var(--azul); }
.galeria-seta.anterior { left: 10px; }
.galeria-seta.proxima { right: 10px; }

.miniaturas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.miniaturas::-webkit-scrollbar { height: 5px; }
.miniaturas::-webkit-scrollbar-thumb { background: var(--cinza-borda-forte); border-radius: 3px; }
.miniaturas button {
  padding: 0;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
  width: 58px;
  height: 58px;
  cursor: pointer;
  background: var(--branco);
  flex-shrink: 0;
}
.miniaturas button:hover { border-color: var(--cinza-borda-forte); }
.miniaturas button.ativa { border-color: var(--azul); border-width: 2px; }
.miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.miniatura-video { position: relative; }
.miniatura-video video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.miniatura-video span {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(11, 21, 48, .82);
  color: var(--branco);
  font-size: 11px;
  padding-left: 2px;
  pointer-events: none;
}

.info-produto .marca {
  color: var(--texto-suave);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.info-produto h1 {
  font-size: 21px;
  font-weight: 700;
  margin: 5px 0 8px;
  line-height: 1.3;
  color: var(--texto);
}

.avaliacao {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cinza-borda);
}
.avaliacao .estrelas { color: var(--amarelo); letter-spacing: 1px; font-size: 13px; }
.avaliacao .nota-numero { font-weight: 700; color: var(--texto); }

/* ----- Bloco de preço ----- */
.bloco-preco {
  background: var(--cinza-bg);
  border-radius: var(--raio-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.preco-de {
  text-decoration: line-through;
  color: var(--texto-fraco);
  font-size: 13px;
}
.preco-pix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.preco-pix .valor {
  font-size: 30px;
  font-weight: 800;
  color: var(--verde);
  line-height: 1.1;
}
.preco-pix .rotulo-pix {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--verde);
}
.selo-off {
  display: inline-block;
  background: var(--vermelho);
  color: var(--branco);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--raio-sm);
}
.preco-cartao { font-size: 13px; color: var(--texto-suave); margin-top: 6px; }

.pix-envio-caixa {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  background: var(--branco);
  border: 1px solid rgba(153, 153, 153, 0.28);
  border-radius: 4px;
  padding: 8px 6px;
  font-size: 13px;
  margin-top: 10px;
  max-width: 100%;
}
.pix-envio-icone {
  height: 16px;
  width: 16px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 7px;
}
.pix-envio-texto strong { color: var(--texto); font-weight: 700; }
.pix-envio-texto span { color: var(--texto-suave); margin-left: 4px; }
.pix-envio-badge {
  background: var(--verde);
  color: var(--branco);
  margin-left: 5px;
  line-height: 10px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  justify-content: center;
  border-radius: 15px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

/* ----- Formas de pagamento ----- */
.formas-pagamento {
  margin-bottom: 16px;
}
.formas-pagamento .titulo-secao {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.metodo-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cinza-borda);
  font-size: 13.5px;
}
.metodo-linha:last-of-type { border-bottom: none; }
.metodo-icone {
  width: 26px;
  height: 26px;
  border-radius: var(--raio-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: var(--cinza-bg-forte);
}
.metodo-icone.pix { background: var(--verde-bg); }
.metodo-linha .metodo-texto strong { color: var(--texto); }
.metodo-linha .metodo-texto span { display: block; color: var(--texto-suave); font-size: 12.5px; margin-top: 1px; }

.link-mais-formas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
  margin-top: 8px;
  border: none;
  background: none;
  padding: 0;
}
.link-mais-formas:hover { text-decoration: underline; }

.popover-pagamento {
  display: none;
  margin-top: 10px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
  padding: 14px 16px;
  background: var(--branco);
  font-size: 13px;
}
.popover-pagamento.aberto { display: block; }
.popover-pagamento h4 { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
.popover-pagamento p { margin: 0 0 12px; color: var(--texto); }
.popover-pagamento p:last-child { margin-bottom: 0; }

.bandeiras {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bandeiras span {
  border: 1px solid var(--cinza-borda-forte);
  border-radius: var(--raio-sm);
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-suave);
  background: var(--cinza-bg);
}

/* ----- Quantidade / estoque ----- */
.selecao-qtd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cinza-borda-forte);
  border-radius: var(--raio-sm);
  overflow: hidden;
}
.stepper button {
  background: var(--cinza-bg);
  border: none;
  width: 32px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  color: var(--texto);
}
.stepper button:hover { background: var(--cinza-bg-forte); }
.stepper input {
  width: 42px;
  padding: 0 4px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--cinza-borda);
  border-right: 1px solid var(--cinza-borda);
  border-radius: 0;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
}
.estoque-info { font-size: 12.5px; font-weight: 600; }
.estoque-info.disponivel { color: var(--verde); }
.estoque-info.baixo { color: #a15c00; }
.estoque-info.esgotado { color: var(--vermelho); }

/* ----- Ações ----- */
.acoes-produto { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .12s, background-color .12s, border-color .12s;
}
.btn:active { filter: brightness(.94); }
.btn-primario { background: var(--verde); color: var(--branco); }
.btn-primario:hover { background: var(--verde-escuro); }
.btn-secundario { background: var(--azul); color: var(--branco); }
.btn-secundario:hover { background: var(--azul-medio); }
.btn-outline { background: var(--branco); color: var(--verde); border-color: var(--verde); }
.btn-outline:hover { background: var(--verde-bg); }
.btn-bloco { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .6s linear infinite;
}
.btn-outline .spinner { border-color: rgba(0,166,80,.25); border-top-color: var(--verde); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ----- Frete ----- */
.calculo-frete {
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.calculo-frete .rotulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 8px;
}
.calculo-frete form { display: flex; gap: 8px; }
.calculo-frete input {
  flex: 1;
  max-width: 160px;
  padding: 8px 10px;
  border: 1px solid var(--cinza-borda-forte);
  border-radius: var(--raio-sm);
  font-size: 13.5px;
}
.calculo-frete button {
  background: var(--azul);
  color: var(--branco);
  border: none;
  padding: 0 16px;
  border-radius: var(--raio-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.calculo-frete button:hover { background: var(--azul-medio); }
.resultado-frete {
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  display: none;
}
.resultado-frete.mostrar { display: block; }
.resultado-frete.gratis { color: var(--verde); }
.resultado-frete.info { color: var(--texto-suave); font-weight: 500; }
.resultado-frete.erro { color: var(--vermelho); }

.cartao-frete {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--branco);
}
.cartao-frete .icone-frete {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.cartao-frete .titulo-cartao-frete {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texto);
}
.cartao-frete .subtitulo-cartao-frete {
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 1px;
}

/* ----- Selos de confiança ----- */
.selos-confianca {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--texto-suave);
  padding-top: 12px;
  border-top: 1px solid var(--cinza-borda);
}
.selos-confianca span { display: inline-flex; align-items: center; gap: 5px; }

/* ================= Abas / descrição ================= */
.abas-produto {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 22px 26px 28px;
}
.abas-produto h2 { font-size: 16px; margin: 0 0 12px; font-weight: 700; }
.abas-produto h2:not(:first-child) { margin-top: 26px; }
.abas-produto ul { padding-left: 18px; margin: 0; line-height: 1.7; font-size: 14px; }
.abas-produto p { line-height: 1.7; font-size: 14px; margin: 0; }
.perguntas-produto { display: grid; gap: 12px; }
.perguntas-produto p {
  padding: 12px 14px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
  background: var(--cinza-bg);
}

.tabela-especificacoes {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 4px;
}
.tabela-especificacoes tr { border-bottom: 1px solid var(--cinza-borda); }
.tabela-especificacoes tr:last-child { border-bottom: none; }
.tabela-especificacoes td { padding: 9px 4px; }
.tabela-especificacoes td:first-child { color: var(--texto-suave); width: 42%; font-weight: 600; }

.aviso-cuidado {
  background: #fdf6e5;
  border: 1px solid #eddca0;
  border-left: 3px solid var(--amarelo);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  font-size: 13px;
  margin-top: 14px;
}

/* ================= Toast ================= */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--azul-escuro);
  color: var(--branco);
  padding: 12px 18px;
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra);
  font-size: 13.5px;
  z-index: 200;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toast.mostrar { opacity: 1; transform: translateY(0); }

/* ================= Carrinho ================= */
.pagina-carrinho { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 22px; margin: 20px 0 44px; }
.pagina-carrinho h1 { font-size: 19px; margin: 0 0 6px; }
.item-carrinho {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--cinza-borda);
}
.item-carrinho img { width: 72px; height: 72px; object-fit: contain; background: var(--branco); border-radius: var(--raio-sm); border: 1px solid var(--cinza-borda); }
.item-carrinho .nome-item { font-size: 14px; font-weight: 600; }
.item-carrinho .remover { color: var(--vermelho); font-size: 12.5px; cursor: pointer; background: none; border: none; padding: 0; margin-top: 6px; }
.item-carrinho .remover:hover { text-decoration: underline; }
.item-carrinho .preco-item { font-weight: 700; text-align: right; min-width: 90px; }

.resumo-carrinho {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid var(--azul);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}
.resumo-carrinho .total { font-size: 20px; font-weight: 800; }

.carrinho-vazio { text-align: center; padding: 56px 20px; color: var(--texto-suave); }

/* ================= Checkout ================= */
.pagina-checkout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  margin: 20px 0 44px;
  align-items: start;
}
.form-checkout {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 24px;
}
.form-checkout fieldset { border: none; padding: 0; margin: 0 0 20px; }
.form-checkout legend { font-weight: 700; font-size: 15px; margin-bottom: 12px; color: var(--azul); padding: 0; }
.linha-form { display: grid; gap: 12px; margin-bottom: 12px; }
.linha-form.duas { grid-template-columns: 1fr 1fr; }
.linha-form.tres { grid-template-columns: 1fr 1fr 1fr; }
label { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; display: block; color: var(--texto); }
input, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--cinza-borda-forte);
  border-radius: var(--raio-sm);
  font-size: 13.5px;
  background: var(--branco);
}
input:focus, select:focus { outline: none; border-color: var(--azul); }

.resumo-pedido {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 20px;
  position: sticky;
  top: 86px;
}
.resumo-pedido h2 { font-size: 15px; margin: 0 0 12px; font-weight: 700; }
.resumo-item { display: flex; justify-content: space-between; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--cinza-borda); }
.resumo-total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 800; margin-top: 12px; }
.metodo-pagamento { border: 1px solid var(--verde); background: var(--verde-bg); border-radius: var(--raio-sm); padding: 11px; margin: 14px 0; font-size: 13px; font-weight: 600; color: var(--verde); display: flex; align-items: center; gap: 8px; }
.erro-form { color: var(--vermelho); font-size: 12.5px; margin-top: 10px; display: none; }

/* ================= Pagamento Pix ================= */
.pagina-pagamento {
  max-width: 540px;
  margin: 28px auto 56px;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 28px;
  text-align: center;
}
.selo-ambiente-teste {
  background: #fdf6e5;
  border: 1px solid #eddca0;
  border-left: 3px solid var(--amarelo);
  color: #6b5300;
  font-size: 12.5px;
  border-radius: var(--raio-sm);
  padding: 10px 14px;
  margin-bottom: 18px;
  text-align: left;
}
.pagina-pagamento h1 { font-size: 19px; }
.qr-box { display: inline-block; padding: 14px; border: 1px solid var(--cinza-borda); border-radius: var(--raio-sm); margin: 8px 0 16px; }
.qr-box img { width: 210px; height: 210px; }
.valor-pagar { font-size: 26px; font-weight: 800; color: var(--azul); margin: 4px 0 16px; }
.copia-cola { display: flex; gap: 8px; margin-bottom: 16px; }
.copia-cola input { font-size: 11.5px; color: var(--texto-suave); }
.status-pagamento { font-weight: 700; margin: 16px 0; padding: 11px; border-radius: var(--raio-sm); font-size: 13.5px; }
.status-pagamento.pendente { background: #fdf6e5; color: #6b5300; }
.status-pagamento.pago { background: var(--verde-bg); color: var(--verde); }
.passos-pix { text-align: left; font-size: 12.5px; color: var(--texto-suave); margin: 18px 0; line-height: 1.8; }

/* ================= Avaliações ================= */
.secao-avaliacoes {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 24px 26px 28px;
  margin-top: 20px;
}
.cabecalho-avaliacoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.cabecalho-avaliacoes h2 { font-size: 16px; font-weight: 700; margin: 0; }
.cabecalho-avaliacoes .btn { padding: 9px 16px; font-size: 13px; }

.resumo-avaliacoes {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--cinza-borda);
}
.nota-grande { text-align: left; }
.nota-grande .numero { font-size: 30px; font-weight: 800; color: var(--texto); line-height: 1.1; }
.nota-grande .estrelas-grandes { color: var(--amarelo); font-size: 16px; margin: 4px 0; letter-spacing: 1px; }
.nota-grande .base { font-size: 12px; color: var(--texto-suave); }

.titulo-filtro { font-size: 12.5px; font-weight: 700; color: var(--texto-suave); margin-bottom: 8px; }
.botoes-filtro { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro-nota {
  background: var(--cinza-bg);
  border: 1px solid var(--cinza-borda-forte);
  border-radius: var(--raio-sm);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
}
.filtro-nota span { color: var(--texto-suave); font-weight: 500; }
.filtro-nota:hover { border-color: var(--azul); }
.filtro-nota.ativo { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.filtro-nota.ativo span { color: #c3cae2; }

.lista-avaliacoes { display: flex; flex-direction: column; gap: 16px; }
.avaliacao-item {
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
  padding: 16px 18px;
}
.avaliacao-item .estrelas-item { color: var(--amarelo); font-size: 14px; letter-spacing: 1px; margin-bottom: 6px; }
.avaliacao-item .autor-avaliacao { font-weight: 700; font-size: 13.5px; }
.avaliacao-item .meta-avaliacao { font-size: 12px; color: var(--texto-suave); display: flex; gap: 10px; margin: 3px 0 10px; }
.avaliacao-item .comentario-avaliacao { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; color: var(--texto); }
.selo-recomenda {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--verde-bg);
  color: var(--verde);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--raio-sm);
}
.sem-avaliacoes-filtro {
  display: none;
  text-align: center;
  color: var(--texto-suave);
  font-size: 13.5px;
  padding: 30px 0;
}
.sem-avaliacoes-filtro.mostrar { display: block; }

.fotos-clientes {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cinza-borda);
}
.titulo-fotos-clientes {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 10px;
}
.grade-fotos-clientes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.miniatura-foto-cliente {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--cinza-bg);
  flex-shrink: 0;
}
.miniatura-foto-cliente:hover { border-color: var(--azul); }
.miniatura-foto-cliente img { width: 100%; height: 100%; object-fit: cover; }

.lightbox-foto {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 21, 48, 0.9);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox-foto.aberto { display: flex; }
.lightbox-foto img {
  max-width: min(92vw, 480px);
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: var(--raio-sm);
  object-fit: contain;
}
.lightbox-fechar {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--branco);
  color: var(--texto);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ================= Produtos relacionados ================= */
.secao-relacionados { margin-top: 20px; }
.titulo-centralizado { text-align: center; font-size: 17px; font-weight: 700; margin: 0 0 18px; }

.carrossel-relacionados { display: flex; align-items: center; gap: 8px; }
.carrossel-seta {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--cinza-borda-forte);
  background: var(--branco);
  color: var(--azul);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carrossel-seta:hover { border-color: var(--azul); }

.trilho-relacionados {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
}
.trilho-relacionados::-webkit-scrollbar { height: 6px; }
.trilho-relacionados::-webkit-scrollbar-thumb { background: var(--cinza-borda-forte); border-radius: 3px; }

.cartao-relacionado {
  scroll-snap-align: start;
  flex: 0 0 220px;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
}
.cartao-relacionado:hover { border-color: var(--cinza-borda-forte); box-shadow: var(--sombra-sutil); }
.imagem-relacionado { position: relative; aspect-ratio: 1/1; background: var(--branco); }
.imagem-relacionado img { width: 100%; height: 100%; object-fit: contain; }
.selo-off-relacionado {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--vermelho);
  color: var(--branco);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--raio-sm);
}
.info-relacionado { padding: 12px 14px 14px; }
.nome-relacionado { font-size: 13px; font-weight: 600; line-height: 1.35; min-height: 36px; margin-bottom: 6px; }
.avaliacao-relacionado { color: var(--amarelo); font-size: 11.5px; margin-bottom: 6px; }
.avaliacao-relacionado span { color: var(--texto-suave); }
.preco-de-relacionado { font-size: 11.5px; color: var(--texto-fraco); text-decoration: line-through; }
.preco-pix-relacionado { font-size: 15px; font-weight: 800; color: var(--verde); }
.preco-cartao-relacionado { font-size: 11px; color: var(--texto-suave); margin-top: 2px; }

/* ================= Footer ================= */
.faixa-servicos {
  background: var(--cinza-bg);
  border-top: 1px solid var(--cinza-borda);
  margin-top: 20px;
}
.faixa-servicos .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 22px 20px;
}
.item-servico { text-align: center; font-size: 12.5px; }
.item-servico .icone-servico { font-size: 20px; display: block; margin-bottom: 6px; }
.item-servico .titulo-servico { font-weight: 700; color: var(--texto); margin-bottom: 3px; }
.item-servico .texto-servico { color: var(--texto-suave); }

.rodape {
  background: var(--azul-escuro);
  color: #b7bfd6;
  padding: 36px 0 18px;
}
.rodape .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 22px; }
.rodape h3 { color: var(--branco); font-size: 13px; margin-bottom: 10px; font-weight: 700; }
.rodape p, .rodape a { font-size: 12.5px; line-height: 1.9; color: #9aa2bf; }
.rodape a:hover { color: var(--branco); }
.rodape .lista-links { list-style: none; padding: 0; margin: 0; }
.logo-rodape {
  display: inline-block;
  max-width: 170px;
  margin-bottom: 8px;
}
.logo-rodape img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.logo-pix-rodape {
  height: 28px;
  width: auto;
  margin-top: 10px;
}
.selos-seguranca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.selos-seguranca img {
  display: block;
  width: auto;
  max-width: min(100%, 150px);
  height: auto;
  object-fit: contain;
}
.rodape .copyright { text-align: center; font-size: 11.5px; margin-top: 26px; color: #7580a3; }

@media (max-width: 860px) {
  .pagina-produto { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px; }
  .pagina-checkout { grid-template-columns: 1fr; }
  .resumo-pedido { position: static; }
  .cabecalho .container { flex-wrap: wrap; row-gap: 8px; }
  .busca { order: 3; width: 100%; max-width: none; }
  .linha-form.duas, .linha-form.tres { grid-template-columns: 1fr; }
  .qr-box img { width: 180px; height: 180px; }
  .resumo-avaliacoes { grid-template-columns: 1fr; gap: 18px; }
  .cabecalho-avaliacoes { flex-direction: column; align-items: flex-start; }
  .cartao-relacionado { flex-basis: 168px; }
}

@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .info-produto h1 { font-size: 18px; }
  .preco-pix .valor { font-size: 26px; }
  .cabecalho .logo img { height: 38px; }
  .miniaturas button { width: 50px; height: 50px; }
  .selecao-qtd { flex-wrap: wrap; }
  .calculo-frete form { flex-wrap: wrap; }
  .calculo-frete input { max-width: none; }
  .copia-cola { flex-wrap: wrap; }
  .copia-cola input { width: 100%; }
  .rodape .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .logo-rodape { margin-left: auto; margin-right: auto; }
  .logo-pix-rodape { margin-left: auto; margin-right: auto; }
  .selos-seguranca { justify-content: center; }
  .selos-seguranca img { max-width: min(45%, 140px); }
  .controle-banner { width: 34px; height: 34px; font-size: 18px; }
  .controle-banner.anterior { left: 8px; }
  .controle-banner.proximo { right: 8px; }
  .indicadores-banner { bottom: 8px; }
  .indicadores-banner button { width: 8px; height: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .trilho-banner { transition: none; }
}

/* Checkout transparente */
.checkout-container { max-width: 1120px; }
.checkout-cabecalho { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0; }
.checkout-cabecalho h1 { margin:3px 0;font-size:27px; }
.checkout-cabecalho p { margin:0;color:var(--texto-suave);font-size:13px; }
.checkout-eyebrow { color:var(--verde);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.checkout-seguranca { display:flex;align-items:center;gap:10px;color:var(--verde);padding:10px 14px;border-radius:var(--raio-sm);background:var(--verde-bg); }
.checkout-seguranca span { display:flex;flex-direction:column;color:var(--texto-suave);font-size:10px; }
.checkout-seguranca strong { color:var(--texto);font-size:12px; }
.checkout-etapas { display:flex;list-style:none;padding:0 0 18px;margin:0 0 4px;border-bottom:1px solid var(--cinza-borda); }
.checkout-etapas li { flex:1;display:flex;align-items:center;gap:8px;color:var(--texto-suave);font-size:12px;font-weight:700; }
.checkout-etapas li:not(:last-child)::after { content:"";height:1px;background:var(--cinza-borda-forte);flex:1;margin:0 15px; }
.checkout-etapas span,.numero-secao { display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--azul);color:#fff;font-size:11px;flex:none; }
.form-checkout legend { color:var(--texto);display:flex;align-items:center;gap:9px;margin-bottom:16px; }
.form-checkout fieldset + fieldset { border-top:1px solid var(--cinza-borda);padding-top:20px; }
.resumo-linha { display:flex;justify-content:space-between;font-size:12.5px;margin-top:12px; }
.frete-gratis { color:var(--verde); }
.opcao-pagamento { display:flex;align-items:center;gap:12px;border:2px solid var(--verde);background:var(--verde-bg);padding:14px;border-radius:var(--raio-sm);cursor:pointer; }
.opcao-pagamento input { width:auto;accent-color:var(--verde); }
.pagamento-marca { display:grid;place-items:center;width:44px;height:30px;border-radius:6px;font-size:11px;font-weight:900;background:#fff;color:var(--verde);border:1px solid #b8dfd3; }
.pagamento-descricao { display:flex;flex-direction:column;flex:1; }
.pagamento-descricao small { color:var(--texto-suave);font-weight:400;margin-top:2px; }
.opcao-pagamento>i { color:var(--verde); }
.pix-vantagem { color:var(--texto-suave);font-size:11.5px;margin:10px 0 0 35px; }
.pix-vantagem i { color:var(--amarelo);margin-right:5px; }
.checkout-termos { color:var(--texto-suave);font-size:10.5px;line-height:1.5;text-align:center;margin:10px 0 0; }
.checkout-pix { max-width:780px;margin:25px auto 55px;padding:30px;background:var(--branco);border:1px solid var(--cinza-borda);border-radius:var(--raio);text-align:center; }
.checkout-pix[hidden] { display:none; }
.checkout-pix h2 { margin:7px 0;font-size:24px; }
.checkout-pix>p { color:var(--texto-suave);font-size:13px; }
.pix-sucesso-icone { margin:0 auto 10px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--verde-bg);color:var(--verde);font-size:20px; }
.pix-layout { display:grid;grid-template-columns:250px 1fr;align-items:center;gap:28px;margin-top:22px;text-align:left; }
.pix-layout .qr-box { margin:0; }
.pix-layout .qr-box img { display:block;width:220px;height:220px; }
.pix-instrucoes .valor-pagar { margin-top:0; }
.pix-instrucoes ol { padding-left:20px;color:var(--texto-suave);font-size:12.5px;line-height:1.8; }
.status-pulso { display:inline-block;width:8px;height:8px;background:#c49b00;border-radius:50%;margin-right:5px; }

@media (max-width:600px) {
  .checkout-cabecalho { flex-direction:column;align-items:flex-start; }
  .checkout-seguranca { width:100%; }
  .checkout-etapas li { font-size:0; }
  .checkout-etapas li:not(:last-child)::after { margin:0 8px; }
  .form-checkout,.checkout-pix { padding:18px; }
  .pix-layout { grid-template-columns:1fr;gap:16px; }
  .pix-layout .qr-box { margin:auto; }
}

/* Checkout em etapas */
.checkout-body { background:#f5f5f5;color:#292929; }
.checkout-topo { height:76px;background:#fff;display:grid;place-items:center;border-bottom:1px solid #eee; }
.checkout-topo img { display:block;max-height:54px;width:auto; }
.checkout-beneficios { color:#fff;background:linear-gradient(100deg,var(--azul),#087ab0); }
.checkout-beneficios-inner { max-width:900px;margin:auto;min-height:58px;display:flex;align-items:center;justify-content:space-around;gap:35px;padding:7px 24px; }
.checkout-beneficios-inner span { display:grid;grid-template-columns:32px auto;grid-template-rows:auto auto;align-items:center;column-gap:9px; }
.checkout-beneficios-inner i { grid-row:1/3;font-size:25px;color:#ffd34d; }
.checkout-beneficios-inner b { font-size:12px;line-height:1.15; }
.checkout-beneficios-inner small { font-size:10.5px;opacity:.88; }
.checkout-aviso { min-height:45px;background:#fff;text-align:center;padding:9px 15px;color:var(--texto-suave);font-size:11.5px; }
.checkout-aviso b { color:var(--verde); }
.checkout-shell { max-width:1040px;margin:24px auto 60px;padding:0 20px; }
.checkout-colunas { display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start; }
.checkout-fluxo { display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start; }
.checkout-card { background:#fff;border:1px solid #e4e4e4;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.05); }
.etapa[data-step="1"] { grid-column:1;grid-row:1; }
.etapa[data-step="2"] { grid-column:1;grid-row:2; }
.etapa[data-step="3"] { grid-column:2;grid-row:1/3; }
.etapa-titulo { display:flex;align-items:flex-start;gap:9px;padding:19px 20px;cursor:pointer; }
.etapa-titulo>span { display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;background:#dadada;color:#fff;font-size:11px;font-weight:800; }
.etapa-titulo h2 { margin:0 0 4px;font-size:16px;line-height:1.2; }
.etapa-titulo p { margin:0;color:#999;font-size:10.5px;line-height:1.45; }
.etapa-check { margin-left:auto;color:var(--verde);display:none; }
.etapa.ativa .etapa-titulo>span { background:var(--azul); }
.etapa.concluida .etapa-check { display:block; }
.etapa.bloqueada { background:#fafafa;box-shadow:none;opacity:.54; }
.etapa.bloqueada .etapa-conteudo,.etapa.concluida .etapa-conteudo { display:none; }
.etapa-conteudo { padding:0 20px 20px; }
.etapa-conteudo>label,.etapa-conteudo .checkout-duplo label { margin-top:11px;font-size:11px; }
.etapa-conteudo label small { font-weight:400;color:#777; }
.etapa-conteudo input { height:39px;background:#f8f9fa;border-color:#dedede;font-size:12px; }
.etapa-conteudo input::placeholder { color:#bbc0c5; }
.campo-cep { position:relative; }
.campo-cep input { padding-right:34px; }
.campo-cep>i { position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#a8adb2;font-size:12px;pointer-events:none; }
.campo-cep input[aria-busy="true"]+.fa-location-dot { color:var(--azul); }
.cep-status { display:block;min-height:15px;margin-top:4px;font-size:9.5px;line-height:1.3;font-weight:500; }
.cep-status.buscando { color:var(--azul); }
.cep-status.encontrado { color:var(--verde); }
.cep-status.erro { color:var(--vermelho); }
.cep-status i { margin-right:3px; }
.checkout-duplo { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.desconto-pix { margin:12px 0;padding:11px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:10.5px;background:#fafafa; }
.desconto-pix i,.desconto-pix strong { color:var(--verde); }
.btn-proxima,.btn-finalizar { min-height:42px;text-transform:none;font-size:13px; }
.btn-proxima i { margin-left:7px; }
.opcao-frete { display:flex;align-items:center;gap:10px;border:1px solid #c5e6d6;background:#f2fbf7;padding:12px;margin:14px 0;border-radius:4px;color:var(--verde); }
.opcao-frete span { display:flex;flex-direction:column;flex:1; }
.opcao-frete small { color:#777;font-size:9.5px;margin-top:2px; }
.opcao-frete b { font-size:11px; }
.etapa-pagamento .opcao-pagamento { margin-top:4px;border-width:1px;padding:12px; }
.pix-simbolo { display:grid;place-items:center;width:36px;height:30px;background:#fff;border:1px solid #bfe5d8;border-radius:4px;color:var(--verde);font-size:18px; }
.pix-explicacao { display:flex;flex-direction:column;gap:4px;margin:12px 0;padding:12px;background:#f7f7f7;border-radius:4px;font-size:10.5px;color:#777;line-height:1.5; }
.pix-explicacao b { color:#333; }
.checkout-lateral { display:flex;flex-direction:column;gap:16px;position:sticky;top:14px; }
.resumo-novo { position:static;padding:20px; }
.resumo-novo h2 { margin:0 0 15px;text-transform:uppercase;font-size:14px;font-weight:600; }
.cupom>label { font-size:10.5px;font-weight:400; }
.cupom>div { display:flex;gap:6px;margin:5px 0 12px; }
.cupom input { height:34px;font-size:11px;background:#f6f6f6; }
.cupom button { border:1px solid #ddd;background:#fff;color:var(--verde);border-radius:4px;padding:0 10px;font-size:10.5px;cursor:pointer; }
.resumo-produtos { border-top:1px solid #eee;border-bottom:1px solid #eee;padding:10px 0; }
.resumo-produto { display:grid;grid-template-columns:48px 1fr auto;gap:9px;align-items:center;padding:6px 0; }
.resumo-produto img { width:48px;height:48px;object-fit:contain;border:1px solid #eee;border-radius:3px; }
.resumo-produto div { display:flex;flex-direction:column;min-width:0; }
.resumo-produto strong { font-size:10.5px;line-height:1.35;font-weight:600; }
.resumo-produto small { color:#999;font-size:9.5px;margin-top:3px; }
.resumo-produto>b { font-size:10px;white-space:nowrap; }
.resumo-valores { padding-top:10px; }
.resumo-valores>div { display:flex;justify-content:space-between;padding:4px 0;font-size:10.5px; }
.resumo-valores>div strong { color:var(--verde); }
.resumo-valores .resumo-total { border-top:1px dashed #ddd;margin-top:6px;padding-top:10px;font-size:15px; }
.resumo-valores>small { display:block;text-align:right;color:#999;font-size:9px; }
.garantias { padding:12px 16px; }
.garantias>div { display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed #ddd; }
.garantias>div:last-child { border:0; }
.garantias i { display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:#eef6fb;color:var(--azul);font-size:17px; }
.garantias span { display:flex;flex-direction:column; }
.garantias b { font-size:10.5px;margin-bottom:3px; }
.garantias small { color:#777;font-size:9.5px;line-height:1.45; }
.checkout-footer { padding:20px;text-align:center;background:#fff;border-top:1px solid #eee;color:#888;font-size:11px; }
.checkout-footer i { color:var(--verde);margin-right:5px; }

@media (max-width:900px) {
  .checkout-colunas { grid-template-columns:1fr; }
  .checkout-lateral { position:static;grid-row:1; }
  .garantias { display:grid;grid-template-columns:1fr 1fr; }
  .checkout-fluxo { grid-row:2; }
}
@media (max-width:620px) {
  .checkout-topo { height:64px; }
  .checkout-topo img { max-height:44px; }
  .checkout-beneficios-inner { gap:8px;padding:8px 10px; }
  .checkout-beneficios-inner span { grid-template-columns:25px auto;column-gap:5px; }
  .checkout-beneficios-inner i { font-size:19px; }
  .checkout-beneficios-inner b { font-size:9.5px; }
  .checkout-beneficios-inner small { font-size:8px; }
  .checkout-shell { padding:0 12px;margin-top:14px; }
  .checkout-fluxo,.checkout-lateral { display:contents; }
  .resumo-novo { order:1; }
  .etapa[data-step="1"] { grid-column:1;grid-row:auto;order:2; }
  .etapa[data-step="2"] { grid-column:1;grid-row:auto;order:3; }
  .etapa[data-step="3"] { grid-column:1;grid-row:auto;order:4; }
  .garantias { order:5; }
  .checkout-duplo { grid-template-columns:1fr;gap:0; }
  .garantias { grid-template-columns:1fr; }
}