/* ===== Paleta (predominância do vermelho) ===== */
:root{
  --red-900: #8E1B1B;
  --red-800: #A71F20;
  --red-700: #C62828; /* Primário */
  --red-600: #E53935;
  --red-500: #FF5252; /* Hover/realces */
  --accent:  #FFD166; /* Destaques sutis */
  --bg:      #FFF8F6; /* Fundo quente */
  --text:    #1A1A1A;
  --text-on-red: #FFFFFF;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(198,40,40,.25);
}

/* Reset mínimo + tipografia */
*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 85% 15%, rgba(255,82,82,.25), transparent 60%),
    radial-gradient(1000px 500px at 10% 90%, rgba(198,40,40,.35), transparent 60%),
    var(--bg);
  min-height: 100dvh;
  overflow: hidden; /* evita scroll durante o splash */
}

/* ===== Splash ===== */
.splash{
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}

/* Ornamentos/Orbs de fundo */
.bg-orbs{ position: absolute; inset: 0; pointer-events: none; }
.orb{
  position: absolute;
  width: 48vmin; height: 48vmin;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55; mix-blend-mode: multiply;
  background: radial-gradient(circle at 30% 30%, var(--red-500), var(--red-700));
  animation: float 9s ease-in-out infinite;
}
.orb-a{ top:-10vmin; left:-10vmin; animation-delay:.0s; }
.orb-b{ top:30%; right:-12vmin; animation-delay:.6s; }
.orb-c{ bottom:-14vmin; left:30%; animation-delay:1.2s; }
@keyframes float{ 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(0,-12px,0) scale(1.05);} }

/* Partículas sutis */
.particles{ position:absolute; inset:0; }
.particles span{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: linear-gradient(180deg, var(--accent), var(--red-500));
  filter: blur(.5px); box-shadow:0 0 12px rgba(255,210,102,.6);
  animation: rise 4s linear infinite; opacity:.85;
}
.particles span:nth-child(1){ left:10%; top:60%; animation-duration:3.6s; }
.particles span:nth-child(2){ left:20%; top:70%; animation-duration:4.1s; }
.particles span:nth-child(3){ left:30%; top:65%; animation-duration:3.2s; }
.particles span:nth-child(4){ left:40%; top:75%; animation-duration:4.6s; }
.particles span:nth-child(5){ left:50%; top:68%; animation-duration:3.4s; }
.particles span:nth-child(6){ left:60%; top:72%; animation-duration:4.2s; }
.particles span:nth-child(7){ left:70%; top:66%; animation-duration:3.8s; }
.particles span:nth-child(8){ left:80%; top:74%; animation-duration:4.4s; }
.particles span:nth-child(9){ left:88%; top:69%; animation-duration:3.5s; }
.particles span:nth-child(10){ left:15%; top:78%; animation-duration:4.8s; }
@keyframes rise{ 0%{transform:translateY(0) scale(1); opacity:.9;} 100%{transform:translateY(-80vh) scale(.85); opacity:0;} }

/* Conteúdo */
.content{ position:relative; z-index:1; text-align:center; max-width:820px; }

/* LOGO acima do título (30% menor) */
.brand{
  width: min(224px, 42vw); /* antes: min(320px, 60vw) */
  height: auto;
  display: block;
  margin: 0 auto 16px;
  filter: drop-shadow(0 8px 24px rgba(198,40,40,.15));
}

h1{
  font-size: clamp(28px, 4vw, 46px); line-height:1.1;
  margin:0 0 12px; color:var(--red-700); text-shadow:0 2px 0 rgba(0,0,0,.02);
}
p{ font-size: clamp(16px, 1.5vw, 20px); margin:0 0 28px; color:#402B2B; }
.helper{ font-size:12px; opacity:.7; margin-top:16px; }

/* Botão */
.btn{
  appearance:none; border:0; border-radius:999px; padding:14px 22px;
  font-weight:700; letter-spacing:.2px; cursor:pointer; color:var(--text-on-red);
  background: linear-gradient(135deg, #FF3B30, var(--red-700) 60%, var(--red-900));
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover,.btn:focus-visible{ transform:translateY(-1px); box-shadow:0 18px 40px rgba(198,40,40,.33); outline:none; }
.btn:active{ transform:translateY(0); filter:brightness(.97); }

/* Acessibilidade: foco visível */
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* Fallback noscript */
.noscript{
  min-height:100dvh; display:grid; place-items:center; text-align:center;
  gap:8px; padding:24px;
}

/* Respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .orb,.particles span{ animation:none !important; }
  .btn{ transition:none; }
}

/* Frase de efeito (discreta) — sempre abaixo do botão */
.tagline{
  display:block; padding:8px 12px; margin:14px auto 0;
  border-radius:999px; font-size:14px; font-weight:600; letter-spacing:.2px;
  color:var(--red-800);
  background: rgba(198,40,40,.06);
  border: 1px solid rgba(198,40,40,.18);
  box-shadow: 0 2px 8px rgba(198,40,40,.08);
}
.btn + .tagline{ margin-top:14px; }

/* Contador */
.countdown{
  margin:10px 0 0;
  font-size: 14px;
  color: #7a2b2b;
  opacity: .9;
}

/* ===== App shell com iframe ===== */
.app-shell{ position:fixed; inset:0; background:#fff; }
.app-shell.hidden{ display:none !important; }
.app-shell iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; background:#fff;
}

/* ===== FAB WhatsApp ===== */
.whatsapp-fab{
  position: fixed;
  right: 16px; bottom: 16px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #ffffff; background: #25D366;
  box-shadow: 0 12px 24px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.12);
  z-index: 10000;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.whatsapp-fab:hover, .whatsapp-fab:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(0,0,0,.22), 0 6px 12px rgba(0,0,0,.16);
}
@media (max-width: 480px){
  .whatsapp-fab{ right: 12px; bottom: 12px; width: 52px; height: 52px; }
}