/* Visual escuro de propósito, como sala de projeção: fundo azul-noite, vidro, brilho azul.
   A escrita é a da Karina: títulos em Italiana (caixa alta), texto em Montserrat e a assinatura em Allura. */
:root {
  --bg: #05070B;
  --bg2: #0B1018;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-forte: rgba(20, 24, 32, 0.78);
  --borda: rgba(255, 255, 255, 0.13);
  --texto: #FFFFFF;
  --apagado: rgba(255, 255, 255, 0.58);
  --fraco: rgba(255, 255, 255, 0.38);
  --azul: #9DC4FF;
  --brilho: #3D8BFF;
  --erro: #FF9C8A;
  --ok: #8FE3C0;
  --fonte: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --titulo: 'Italiana', 'Didot', 'Bodoni 72', Georgia, serif;
  --assinatura: 'Allura', 'Brush Script MT', cursive;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--texto); font-family: var(--fonte); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--azul); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.vidro { background: var(--glass); border: 1px solid var(--borda); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.brilho { position: fixed; border-radius: 50%; filter: blur(60px); background: radial-gradient(closest-side, var(--brilho), transparent); opacity: .45; pointer-events: none; z-index: 0; }
.assinatura { font-family: var(--assinatura); font-weight: 400; letter-spacing: 0; text-transform: none; }
.rotulo { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apagado); margin: 0; }
.dois-tons span { color: var(--apagado); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; text-wrap: balance; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 24px; border: 1px solid var(--borda); background: var(--glass); color: var(--texto); font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn.claro { background: #FFFFFF; color: #05070B; border-color: #FFFFFF; font-weight: 500; }
.btn.perigo { color: var(--erro); border-color: rgba(255, 156, 138, .35); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-icone { width: 44px; height: 44px; border-radius: 22px; padding: 0; min-height: 0; }
.btn:focus-visible, .campo:focus-visible, .chip:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(157, 196, 255, .55); outline-offset: 2px; }

.campo { width: 100%; min-height: 50px; border-radius: 16px; border: 1px solid var(--borda); background: rgba(0, 0, 0, .35); color: var(--texto); padding: 12px 16px; font-size: 16px; }
textarea.campo { min-height: 120px; resize: vertical; line-height: 1.5; }
select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--apagado) 50%), linear-gradient(135deg, var(--apagado) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
select.campo option { background: #11161F; }
label.titulo-campo { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); margin: 0 0 6px 4px; }
.dica { margin: 6px 4px 0; font-size: 13px; color: var(--fraco); font-weight: 300; }
.erro-msg { margin: 0; color: var(--erro); font-size: 14px; }
.erro-msg:empty { display: none; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 12px 20px; border-radius: 24px; background: #FFFFFF; color: #05070B; font-weight: 500; font-size: 15px; z-index: 100; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); max-width: calc(100% - 32px); text-align: center; }

.carregando { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #FFFFFF; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Assinatura no topo das páginas */
.marca { display: flex; align-items: baseline; gap: 8px; }
.marca .por { font-size: 10px; letter-spacing: .24em; color: var(--apagado); }