/* Custom font */
@font-face{
  font-family: 'Google2015';
  src: url('../../fonts/google-2015.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --brand-blue:#1f57d6;
  --brand-blue-2:#0e3ea8;
  --brand-yellow:#ffd200;
  /* dynamic header height set via JS fallback 72px */
  --header-h:72px;
  --footer-h:48px;
  --bs-body-font-family: 'Google2015', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html, body { height: 100%; }
body {
  background-color: transparent;
  min-height: 100vh;
  min-height: 100svh; /* preenche a altura total no mobile */
  display: flex;
  flex-direction: column;
  font-family: 'Google2015', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.site-header{background: var(--brand-blue);}
.logo{filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));}
.brand-title{
  color:#fff;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.05;
  font-size: clamp(2rem, 4.5vw, 2.75rem); /* ~32–44px */
}
.hero-section {
  background: url('../img/bg-wave.jpg') center/cover no-repeat;
  /* fill the viewport under the header; footer fica sobreposto */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-bottom: var(--footer-h);
  display: flex;
  align-items: center;
  /* garante que o blend do personagem limite-se a esta seção */
  isolation: isolate;
}
.hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.hero-badge{
  position:absolute; z-index:2; left:3%; top:12%; width:140px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.hero-characters{
  position:absolute; right:2%; bottom:0; width:36vw; max-width:520px; z-index:1;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
  /* imagem com transparência (PNG/WebP) */
  mix-blend-mode: normal;
}
.feature-card .card-body{ border-top:4px solid var(--brand-yellow); }

/* allow footer to stay at bottom */
main{ flex: 1 0 auto; }

@media (max-width: 576px){
  .brand-title{ font-size: 1.6rem; }
  .site-header .btn{ padding: .35rem .6rem; font-size:.875rem; }
  .hero-section{
    background-image: url('../img/bg-wave-Mobile.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 6%;
  }
  .hero-section .container{ padding-top: 4.5rem !important; padding-bottom: 2.25rem !important; }
  .hero-characters{ right:0; width:52vw; max-width:300px; bottom:12px; }
}

@media (min-width: 577px) and (max-width: 991px){
  .brand-title{ font-size: 2rem; }
  .hero-section{ background-position: center 12%; }
  .hero-section .container{ padding-top: 3.5rem !important; padding-bottom: 2rem !important; }
  .hero-characters{ width:48vw; max-width:460px; right:1%; bottom: 6px; }
}

/* Floating WhatsApp button */
.whatsapp-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  text-decoration: none;
  z-index: 1040;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.whatsapp-fab:hover{
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.whatsapp-fab i{ display:block; font-size:26px; line-height:1; }

/* Fixed transparent footer with white top line */
.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: transparent !important;
  border-top: 0 !important; /* sem linha branca */
  color: #fff;
  z-index: 1020;
}
.site-footer .container{ color: inherit; }