/* ==========================================================================
   BBR · Página de aplicação (VSL) + popup de captura
   ========================================================================== */

body{font-family:var(--f-display)}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,4vw,40px);
  padding:50px 20px;
  background:linear-gradient(160deg,#000 0%,#000 22%,#424242 100%);
}
.hero__logo{width:min(260px,55vw);height:auto}
.hero__player{
  width:min(860px,100%);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.hero__player vturb-smartplayer{display:block;margin:0 auto;width:100%;border-radius:var(--radius-lg);overflow:hidden}
/* Reserva a altura do vídeo antes do player carregar (evita salto de layout). */
.hero__player::before{content:'';display:block;padding-top:56.25%;float:left}
.hero__player::after{content:'';display:table;clear:both}
.hero__player:has(vturb-smartplayer)::before{display:none}

.hero__cta{
  width:min(620px,100%);
  font-family:var(--f-display);font-weight:500;font-size:clamp(15px,2.6vw,18px);
  border-radius:40px;
  border:1px solid var(--gold-deep);
  padding:1.15rem 2rem;
  background:linear-gradient(32deg,var(--gold) 58%,var(--gold-2) 100%);
  text-wrap:balance;line-height:1.35;
}

/* --- Rodapé -------------------------------------------------------------- */
.footer{background:var(--bg-3);padding:20px}
.footer__text{
  margin:0;text-align:center;text-transform:uppercase;
  font-family:var(--f-display);font-size:15px;font-weight:400;color:#fff;
}
.footer__text a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:767px){ .footer__text{font-size:11px} }

/* ==========================================================================
   Popup de aplicação
   Espelha o container do popup Elementor: #2C2C2C, borda branca de 1px,
   raio 25px (15px no mobile), padding 25px, largura padrão de 640px.
   ========================================================================== */
.modal{
  border:0;padding:0;background:transparent;
  width:min(640px,calc(100vw - 32px));
  max-height:calc(100svh - 32px);
  color:var(--text);
  overflow:visible;
}
.modal::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(3px)}
.modal[open]{animation:modal-in .22s cubic-bezier(.2,.7,.3,1)}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.modal__box{
  position:relative;
  background:var(--surface);
  border:1px solid #FFFFFF;
  border-radius:25px;
  padding:25px;
  max-height:calc(100svh - 32px);
  overflow-y:auto;
  box-shadow:0 0 10px 0 rgba(0,0,0,.5);
}
@media (max-width:767px){
  .modal__box{border-radius:15px;padding:15px}
  .modal__close{top:8px;right:8px;width:30px;height:30px;font-size:18px}
}

.modal__close{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-2);border-radius:50%;
  color:var(--text-2);font-size:20px;line-height:1;
  transition:border-color .2s,color .2s,background .2s;
}
.modal__close:hover{border-color:var(--gold);color:var(--gold);background:rgba(176,164,115,.1)}

/* --- Cabeçalho (.popup-premium-head) ------------------------------------- */
.modal__head{text-align:center;margin-bottom:22px}
.modal__eyebrow{
  display:inline-flex;padding:8px 14px;
  border:1px solid rgba(176,164,115,.28);border-radius:999px;
  background:rgba(176,164,115,.08);color:#E9DFC0;
  font-family:var(--f-body);font-size:12px;font-weight:700;
  line-height:1.2;text-transform:uppercase;
}
.modal__title{
  font-family:var(--f-head);font-size:34px;font-weight:500;
  letter-spacing:-.03em;color:#FFFFFF;
  margin:14px 0 8px;
}
.modal__lead{font-family:var(--f-body);font-size:15px;line-height:1.5;color:#C2BFB6}
.modal__lead strong{font-weight:700}
@media (max-width:767px){
  .modal__title{font-size:24px}
  /* Abre espaço para o X não encostar na pílula do cabeçalho. */
  .modal__head{padding-inline:30px}
  .modal__eyebrow{max-width:100%;font-size:11px;padding:6px 12px}
}

/* --- Rodapé de segurança ------------------------------------------------- */
.modal__foot{
  margin-top:16px;text-align:center;
  font-family:var(--f-display);font-size:14px;font-weight:400;line-height:1.5;
  color:#747474;
}
@media (max-width:767px){ .modal__foot{font-size:12px} }