/* =====================================================================
   Saydor — oferta de saída
   ---------------------------------------------------------------------
   Substitui /desconto, que tinha virado página.

   A primeira versão mostrava os quatro kits lado a lado, com quatro botões
   iguais. Não convertia: quem está saindo já viu esses kits e esses preços,
   e pedir uma escolha entre quatro opções iguais no momento de menor
   motivação da visita é pedir para a pessoa ir embora.

   Esta versão faz uma oferta só, com um motivo concreto — o frasco pela
   metade do preço — e deixa os outros tamanhos escondidos atrás de um link
   para quem quiser. Tipografia bem maior: era pequena demais para um
   público que já lê com dificuldade.
   ===================================================================== */

.saida-fundo {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 15, 46, .86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .22s ease;
  overflow-y: auto;
}
.saida-fundo[hidden] { display: none; }
.saida-fundo.is-visivel { opacity: 1; }

.saida-caixa {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(2, 15, 46, .5);
  overflow: hidden;
  transform: translateY(16px) scale(.98);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
  font-family: Arial, Helvetica, sans-serif;
}
.saida-fundo.is-visivel .saida-caixa { transform: none; }

/* ---------- Topo: o motivo ---------- */
.saida-topo {
  position: relative;
  padding: 30px 26px 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #0a4a89 0%, #020f2e 100%);
}
.saida-chapeu {
  display: inline-block;
  font: 700 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #d7ad58;
  margin-bottom: 12px;
}
.saida-titulo {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(25px, 6.4vw, 31px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: #fff;
}
.saida-titulo em { font-style: normal; color: #ffd77a; }
.saida-linha {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #cfe0f5;
}
.saida-linha b { color: #fff; }

.saida-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.saida-fechar:hover { background: rgba(255, 255, 255, .3); }
.saida-fechar:focus-visible { outline: 2px solid #d7ad58; outline-offset: 2px; }

/* ---------- A oferta ---------- */
.saida-oferta { padding: 22px 22px 18px; text-align: center; }

.saida-oferta-nome {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #073d73;
}
.saida-oferta-sub { font-size: 13px; color: #5b6b82; margin-top: 3px; }

.saida-porfrasco {
  margin: 16px 0 4px;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 9vw, 42px);
  line-height: 1;
  color: #0f7a36;
  letter-spacing: -.02em;
}
.saida-porfrasco span { display: block; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 13px; color: #5b6b82; letter-spacing: 0; margin-top: 6px; text-transform: uppercase; }

.saida-antes {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: #5b6b82;
}
.saida-antes s { color: #97a4b6; }

.saida-preco {
  margin: 14px 0 0;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #071427;
}
.saida-preco small { display: block; font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; color: #5b6b82; margin-top: 3px; }

.saida-botao {
  display: block;
  margin: 18px 0 0;
  padding: 17px 14px;
  border-radius: 11px;
  background: #17a44a;
  color: #fff;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(23, 164, 74, .34);
  transition: background .15s ease, transform .15s ease;
}
.saida-botao:hover { background: #128a3d; transform: translateY(-1px); }
.saida-botao:focus-visible { outline: 3px solid #073d73; outline-offset: 3px; }

.saida-garantia {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 14px;
  font-size: 13px;
  color: #46536a;
}
.saida-garantia b { color: #071427; }

/* ---------- Outros tamanhos, escondidos ---------- */
.saida-outros { border-top: 1px solid #eef2f8; }
.saida-abrir-outros {
  display: block;
  width: 100%;
  padding: 14px;
  border: 0;
  background: none;
  color: #073d73;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.saida-lista { display: none; padding: 0 18px 6px; }
.saida-outros.is-aberto .saida-lista { display: block; }
.saida-outros.is-aberto .saida-abrir-outros { display: none; }

.saida-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 8px;
  border: 1.5px solid #dde5f2;
  border-radius: 10px;
  text-decoration: none;
  color: #071427;
}
.saida-item:hover { border-color: #0a90b2; background: #f7fbfd; }
.saida-item:focus-visible { outline: 2px solid #0a90b2; outline-offset: 2px; }
.saida-item-nome { font-family: Montserrat, Arial, Helvetica, sans-serif; font-weight: 800; font-size: 15px; }
.saida-item-sub { font-size: 12px; color: #5b6b82; margin-top: 2px; }
.saida-item-preco { text-align: right; white-space: nowrap; }
.saida-item-frasco { font-family: Montserrat, Arial, Helvetica, sans-serif; font-weight: 800; font-size: 16px; color: #0f7a36; }
.saida-item-total { font-size: 12px; color: #5b6b82; }

/* ---------- Rodapé ---------- */
.saida-rodape {
  padding: 14px 20px 18px;
  border-top: 1px solid #eef2f8;
  text-align: center;
}
.saida-zap { display: inline-block; font-size: 14px; color: #073d73; text-decoration: underline; }
.saida-recusar {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 0;
  background: none;
  color: #8896aa;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.saida-aviso { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: #97a4b6; }

@media (max-width: 380px) {
  .saida-topo { padding: 24px 18px 20px; }
  .saida-oferta { padding: 18px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .saida-fundo, .saida-caixa, .saida-botao { transition: none; }
}