/* ============ TOKENS ============ */
:root{
  --blue:#0245AB;
  --blue-dark:#02337e;
  --red:#F40B0B;
  --whats:#25D366;
  --whats-dark:#1da851;
  --ink:#1c2430;
  --muted:#5b6675;
  --bg:#ffffff;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
.container-text{max-width:640px;margin:0 auto;padding:0 24px}

/* ============ HERO ============ */
.hero{
  background:linear-gradient(160deg,var(--blue) 0%,var(--blue-dark) 100%);
  color:#fff;text-align:center;padding:36px 24px 32px;
}
.hero-logo{margin:0 auto 22px;height:52px;width:auto}
.hero h1{font-size:1.9rem;font-weight:800;line-height:1.2;letter-spacing:-.01em;max-width:560px;margin:0 auto}
.hero-sub{max-width:520px;margin:18px auto 0;font-size:1.08rem;font-weight:700;line-height:1.4}

/* ============ DATAS ============ */
.dates{background:#fff;text-align:center;padding:28px 24px 8px}
.dates p{color:var(--red);font-weight:800;font-size:1.65rem;line-height:1.2;max-width:520px;margin:0 auto}

/* ============ VÍDEO ============ */
.video-wrap{display:flex;justify-content:center;padding:28px 24px 8px}
.video-box{
  position:relative;width:100%;max-width:340px;aspect-ratio:9/16;
  border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 10px 30px rgba(2,51,126,.2);
}
.video-box video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.play-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3);
  transition:transform .15s ease,background .15s ease;
}
.play-icon:hover{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.play-icon svg{width:26px;height:26px;fill:var(--blue-dark);margin-left:3px}
.play-icon[hidden]{display:none}

/* ============ SETA ============ */
.arrow-down{display:flex;justify-content:center;padding:18px 0 6px;animation:bounce 1.6s infinite}
.arrow-down svg{width:34px;height:34px;fill:var(--blue-dark)}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ============ CTA PRINCIPAL ============ */
.cta-wrap{display:flex;justify-content:center;padding:10px 24px 8px}
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--whats);color:#fff;font-weight:800;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.02em;
  padding:20px 40px;border-radius:50px;text-align:center;
  box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  max-width:420px;width:100%;
}
.btn-cta:hover{background:var(--whats-dark);transform:translateY(-2px)}

/* ============ TEXTO / REFORÇO ============ */
.offer-text{padding:34px 24px 44px;text-align:center}
.offer-text p{max-width:560px;margin:0 auto 14px;color:var(--ink);font-size:1.02rem;line-height:1.6}
.offer-headline{font-weight:800;font-size:1.15rem;text-decoration:underline;text-underline-offset:4px}
.offer-text p:last-child{margin-bottom:0}
.offer-text strong{color:var(--blue-dark)}

/* ============ RODAPÉ ============ */
.site-footer{background:var(--blue-dark);color:#cdd9f0;text-align:center;padding:18px 24px;font-size:.85rem}

/* ============ RESPONSIVO ============ */
@media (min-width:640px){
  .hero h1{font-size:2.4rem}
  .hero-sub{font-size:1.2rem}
  .dates p{font-size:2rem}
  .btn-cta{font-size:1.25rem}
}
@media (max-width:380px){
  .hero h1{font-size:1.65rem}
  .dates p{font-size:1.4rem}
  .btn-cta{padding:18px 28px;font-size:1.02rem}
}