/* =========================================================
   BASE — cores, fontes, botões, campos e efeitos usados em todo o site
   ========================================================= */

/* ===== Cores e base ===== */
:root {
  --vinho: #7a1f3d;
  --vinho-escuro: #5a1229;
  --rosa: #e8879c;
  --rosa-claro: #f8d7de;
  --creme: #fff7f0;
  --papel: #fffdf8;
  --texto: #4a2530;
  --texto-suave: #8a5a66;
  --sombra: 0 10px 30px rgba(122, 31, 61, 0.18);
  --raio: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
  background: linear-gradient(180deg, var(--creme) 0%, #fde9ec 50%, var(--creme) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

.cursiva {
  font-family: "Great Vibes", "Brush Script MT", cursive;
  font-weight: 400;
  color: var(--vinho);
}

.tela-cheia {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  position: relative;
  z-index: 1;
}

.secao {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 64px 18px;
  text-align: center;
}

.titulo-secao {
  font-size: clamp(2.4rem, 10vw, 3.2rem);
  line-height: 1.15;
  margin: 0 0 12px;
}

.subtitulo {
  color: var(--texto-suave);
  font-style: italic;
  margin: 0 0 24px;
}

.botao {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--rosa), var(--vinho));
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.botao:active { transform: scale(0.96); }

/* ===== Corações no fundo ===== */
#coracoes-fundo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.coracao-flutuante {
  position: absolute;
  bottom: -40px;
  color: var(--rosa);
  opacity: 0;
  animation: subir linear infinite;
}
@keyframes subir {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.45; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-110vh) rotate(25deg); opacity: 0; }
}

.cadeado {
  font-size: 2.6rem;
  animation: batida 1.6s ease-in-out infinite;
}
@keyframes batida {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.1); }
}

.campo {
  font-family: inherit;
  font-size: 1.1rem;
  text-align: center;
  padding: 14px;
  border: 2px solid var(--rosa-claro);
  border-radius: 14px;
  background: #fff;
  color: var(--vinho);
  outline: none;
  transition: border-color 0.2s;
}
.campo:focus { border-color: var(--rosa); }
.campo-senha { font-size: 1.4rem; letter-spacing: 0.4em; }
.botao:disabled { opacity: 0.6; cursor: default; }

/* Botão com cara de link (ex.: "entrar com outro usuário", "sair") */
.link {
  font-family: inherit;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--texto-suave);
  background: none;
  border: none;
  padding: 6px;
  margin-top: 6px;
  text-decoration: underline;
  cursor: pointer;
}

/* Carregando */
#tela-carregando .subtitulo { margin-top: 14px; }

.erro { min-height: 1.6em; margin: 14px 0 0 !important; color: var(--vinho) !important; font-style: italic; }
.tremer { animation: tremer 0.45s ease; }
@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.sumir { animation: sumir 0.7s ease forwards; }
@keyframes sumir { to { opacity: 0; transform: scale(1.05); } }

.chuva-coracao {
  position: fixed;
  top: -40px;
  z-index: 50;
  pointer-events: none;
  animation: cair linear forwards;
}
@keyframes cair {
  to { transform: translateY(110vh) rotate(360deg); opacity: 0.6; }
}

.rodape {
  position: relative; z-index: 1;
  text-align: center;
  padding: 30px 16px calc(40px + env(safe-area-inset-bottom, 0px));
  font-size: 0.85rem;
  color: var(--texto-suave);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Links do rodapé ("sair" durante a surpresa) */
.rodape .link { display: inline; margin: 0; }

/* iPhone: impede a página de rolar para os lados (precisa no html E no body) */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* App estático: sem zoom (pinça ou toque duplo) e sem arrastar para os lados.
   Só rola na vertical. As faixas que deslizam de lado (abas) continuam deslizando. */
html, body { touch-action: pan-y; }
.abas, .menu { touch-action: pan-x pan-y; }