/* Site novo, fase 5: janela de saída, balão e rótulo do WhatsApp (static/site/js/contato.js).
 * Visual da simulação aprovada pela Julia (pacote, pasta 4, versão 7), com o
 * prefixo sx- para não colidir com as classes das páginas. Usa os tokens que
 * todo CSS de página do site novo define (--roxo, --azul, --linho, --capim...).
 * No computador a janela é centralizada; no celular é uma faixa que sobe de
 * baixo e nunca cobre a tela inteira (doc 06: o Google penaliza janela que cobre a página). */
.sx-trava, .sx-trava body { overflow: hidden }
.sx-veu { position: fixed; inset: 0; z-index: 200; background: rgba(32, 31, 75, .82); display: flex; align-items: center; justify-content: center; padding: 16px; animation: sx-entra .2s ease-out }
.sx-jan { position: relative; width: min(500px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--linho, #FCFAF1); color: var(--azul, #201F4B); border: 2px solid var(--azul, #201F4B); border-radius: 8px; box-shadow: 8px 8px 0 var(--lavanda, #B5BAFE); padding: 32px 32px 20px; display: flex; flex-direction: column; gap: 16px; font-family: var(--f, system-ui, sans-serif) }
.sx-jan h3 { margin: 0 40px 0 0; font-size: clamp(24px, 3.2vw, 30px); line-height: 1.1; font-weight: 700; color: var(--roxo, #600A55); max-width: 18ch; text-wrap: balance }
.sx-jan p { margin: 0; font-size: 17px; line-height: 26px }
.sx-jan p b { font-weight: 700; color: var(--roxo, #600A55) }
.sx-fr { display: block; text-wrap: balance }
.sx-fr + .sx-fr { margin-top: 8px }
.sx-fecha { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--azul, #201F4B); background: var(--branco, #fff); color: var(--azul, #201F4B); font-size: 22px; line-height: 1; cursor: pointer }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 20px; border-radius: 4px; background: var(--capim, #CEFF96); color: var(--azul, #201F4B); border: 2px solid var(--azul, #201F4B); box-shadow: 4px 4px 0 var(--azul, #201F4B); font: inherit; font-weight: 700; font-size: 18px; line-height: 24px; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s }
.sx-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--azul, #201F4B); color: var(--azul, #201F4B) }
.sx-btn svg { width: 22px; height: 22px; fill: currentColor; flex: none }
.sx-sec, .sx-nao { align-self: center; font: inherit; font-size: 15px; line-height: 20px; color: var(--apoio, #5A5878); text-decoration: underline; padding: 6px; background: none; border: 0; cursor: pointer }
.sx-jan form { display: flex; flex-direction: column; gap: 8px }
.sx-jan label { font-weight: 600; font-size: 15px }
.sx-jan input[type=email] { width: 100%; height: 52px; border: 2px solid var(--azul, #201F4B); border-radius: 4px; padding: 0 14px; font: inherit; font-size: 17px; background: var(--branco, #fff); color: var(--azul, #201F4B); box-sizing: border-box }
.sx-jan .sx-btn { margin-top: 4px }
.sx-priv { font-size: 13px !important; line-height: 18px !important; color: var(--apoio, #5A5878) }
.sx-jan :focus-visible, .sx-balao :focus-visible { outline: 3px solid var(--roxo, #600A55); outline-offset: 2px }

@media (max-width: 760px) {
  .sx-veu { align-items: flex-end; padding: 0; background: rgba(32, 31, 75, .55) }
  .sx-jan { width: 100%; max-height: 85vh; border-radius: 12px 12px 0 0; border-inline: 0; border-bottom: 0; box-shadow: none; padding: 24px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 12px; animation: sx-sobe .25s ease-out }
  .sx-jan h3 { font-size: 24px }
  .sx-jan p { font-size: 16px; line-height: 24px }
}

/* Balão e rótulo, ao lado do botão flutuante (.zap: 58 px, 20 px da borda). */
.sx-balao, .sx-rotulo { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 61; background: var(--branco, #fff); color: var(--azul, #201F4B); border: 2px solid var(--azul, #201F4B); border-radius: 8px; box-shadow: 3px 3px 0 var(--lavanda, #B5BAFE); padding: 10px 14px; font-family: var(--f, system-ui, sans-serif); font-size: 15px; line-height: 20px; font-weight: 600; max-width: 240px }
.sx-balao { padding-right: 34px; animation: sx-entra .25s ease-out }
.sx-balao a { color: inherit; text-decoration: none; display: block; text-wrap: balance }
.sx-balao em { display: block; font-style: normal; font-weight: 700; color: var(--roxo, #600A55); margin-top: 4px; font-size: 14px }
.sx-balao-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--apoio, #5A5878); cursor: pointer }
.sx-rotulo { bottom: calc(31px + env(safe-area-inset-bottom, 0px)); right: calc(90px + env(safe-area-inset-right, 0px)); white-space: nowrap; pointer-events: none }

@keyframes sx-entra { from { opacity: 0 } to { opacity: 1 } }
@keyframes sx-sobe { from { transform: translateY(100%) } to { transform: none } }
@media (prefers-reduced-motion: reduce) {
  .sx-veu, .sx-jan, .sx-balao { animation: none }
  .sx-btn { transition: none }
}

/* Newsletter (fase 6): aviso de erro e mensagem de inscrição feita. */
.sx-aviso { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: #A3121E }
.sx-ok { margin: 0; background: #BDF2DE; color: var(--azul, #201F4B); border: 2px solid var(--azul, #201F4B); border-radius: 8px; padding: 16px; font-size: 16px; line-height: 24px }