html, body { margin: 0; height: 100%; background: #ffffff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; height: 100dvh; }
.barra { display: flex; align-items: center; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); background: #287040; color: #fff; font-size: 14px; line-height: 1.3; }
.barra[hidden] { display: none; }
.barra #barraTexto { flex: 1; }
.barra button { font: inherit; border: 0; border-radius: 6px; cursor: pointer; }
.barra #barraAcao { background: #f8f010; color: #1b1b1b; font-weight: 700; padding: 6px 10px; white-space: nowrap; }
.barra .fechar { background: transparent; color: #fff; font-size: 16px; padding: 4px 6px; }
main { position: relative; flex: 1; min-height: 0; }
iframe.crm { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.tela-aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: #333; background: #fff; z-index: 1; }
.tela-aviso[hidden] { display: none; }
.tela-aviso p { margin: 0; font-size: 16px; }
.link { color: #287040; font-size: 14px; }

/* Abertura: logo grande que "expande" ao entrar, pulsa enquanto o CRM carrega e se dissolve quando ele fica pronto */
.abertura { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px; background: #fff; transition: opacity .45s ease; }
.abertura[hidden] { display: none; }
.abertura-logo { width: min(82vw, 520px); height: auto; transform-origin: center; animation: logoEntra .9s cubic-bezier(.2, .8, .2, 1.15) both, logoPulsa 2.4s ease-in-out .9s infinite; }
.abertura-barra { width: min(46vw, 220px); height: 4px; border-radius: 4px; background: #e6efe9; overflow: hidden; opacity: 0; animation: surge .4s ease .7s forwards; }
.abertura-barra span { display: block; width: 40%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #287040, #f8f010); animation: corre 1.2s ease-in-out infinite; }
.abertura-texto { margin: 0; color: #5b6b62; font-size: 15px; opacity: 0; animation: surge .4s ease .8s forwards; }
.abertura.saindo { opacity: 0; pointer-events: none; }
.abertura.saindo .abertura-logo { animation: logoSai .45s ease forwards; }
@keyframes logoEntra { 0% { opacity: 0; transform: scale(.55); filter: blur(6px); } 70% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes logoPulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes logoSai { to { transform: scale(1.12); } }
@keyframes surge { to { opacity: 1; } }
@keyframes corre { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .abertura-logo, .abertura.saindo .abertura-logo, .abertura-barra span { animation: none; }
  .abertura-barra, .abertura-texto { animation: none; opacity: 1; }
  .abertura { transition: none; }
}
.botao { font: inherit; font-weight: 700; background: #287040; color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; }