/* =========================================================================
   HERO OFICIAL — replica fiel da hero de pablomarcal.com.br/quebrandociclos
   Fundo cinematografico (Pablo + correntes + monumentos) + texto a esquerda.
   ========================================================================= */
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('fonts/SpaceGrotesk.woff2') format('woff2'); }

.hero{ position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; background:#0a0a0a; padding:0; isolation:isolate; }

/* fundo + escurecimento a esquerda pra legibilidade */
.hero__media{ position:absolute; inset:0; z-index:0;
  background:#0a0a0a url('imgs/qbc-hero-bg.jpg') center right / cover no-repeat; }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,8,9,.97) 0%, rgba(8,8,9,.86) 26%, rgba(8,8,9,.42) 50%, rgba(8,8,9,0) 66%),
    linear-gradient(0deg, rgba(8,8,9,.55) 0%, transparent 26%); }

.hero__wrap{ position:relative; z-index:2; width:100%; max-width:1280px;
  margin:0 auto; padding:0 clamp(22px,5vw,80px); }
.hero__content{ max-width:640px; }

.hero__logo{ display:block; width:clamp(115px,10.5vw,150px); height:auto;
  margin-bottom:clamp(22px,3vw,38px); }

.hero__title{ font-family:'Space Grotesk','Inter',sans-serif; font-weight:700;
  font-size:clamp(27px,3.15vw,43px); line-height:1.08; letter-spacing:-.8px;
  color:#fff; margin:0; }
.og{ background:linear-gradient(135deg,#ff9422 0%,#f16200 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; font-weight:700; }

.hero__sub{ font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(15px,1.2vw,16.5px); line-height:1.64;
  color:rgba(255,255,255,.75); margin:22px 0 0; max-width:540px; }

.hero__cta{ display:inline-flex; align-items:center; gap:14px; margin-top:30px;
  padding:16px 30px; border-radius:999px; text-decoration:none; border:0; cursor:pointer;
  background:linear-gradient(135deg,#ff8800 0%,#f16200 100%); color:#fff;
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px; letter-spacing:.4px;
  text-transform:uppercase; box-shadow:0 14px 36px rgba(241,98,0,.42);
  transition:transform .16s ease, box-shadow .16s ease; }
.hero__cta:hover{ transform:translateY(-2px); box-shadow:0 18px 46px rgba(241,98,0,.52); }
.hero__price{ background:rgba(0,0,0,.24); border-radius:999px; padding:4px 12px; font-size:14px; }

.hero__info{ margin-top:26px; display:flex; flex-direction:column; gap:7px; }
.hi-date{ margin:0; font-family:'Inter',sans-serif; font-size:14.5px; color:#fff;
  letter-spacing:.4px; font-weight:500; }
.hi-date b{ color:#ff9422; font-weight:800; }
.hi-live{ margin:0; font-size:13.5px; color:rgba(255,255,255,.62); }
.hi-trust{ margin:7px 0 0; display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:12.5px; color:rgba(255,255,255,.56); }
.hi-trust span{ display:inline-flex; align-items:center; gap:7px; }
.hi-trust svg{ width:15px; height:15px; flex:none; stroke:#ff9422; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.hero__scroll{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:3; color:rgba(255,255,255,.55); }
.hero__scroll svg{ width:24px; height:24px; }

/* ---------------- MOBILE ---------------- */
@media (max-width:880px){
  /* mobile empilhado: imagem no topo (rosto limpo) + texto abaixo sobre preto */
  .hero{ display:block; min-height:100svh; align-items:stretch; background:#08080a;
    padding:0; text-align:center; }
  /* altura da imagem cede espaco ao texto+CTA: nunca deixa < 428px pro conteudo,
     garantindo o botao na 1a dobra mesmo em telas curtas (iPhone SE) */
  .hero__media{ position:relative; inset:auto; width:100%;
    height:min(40vh, calc(100svh - 430px)); min-height:210px;
    background-image:url('imgs/qbc-hero-bg-mobile.jpg'); background-position:center top;
    background-size:cover; }
  .hero__scrim{ background:
    linear-gradient(0deg, #08080a 0%, rgba(8,8,10,.72) 14%, rgba(8,8,10,.12) 36%, transparent 58%); }
  .hero__wrap{ position:relative; z-index:2; max-width:none; margin:0;
    padding:0 22px 36px; margin-top:-30px; }
  .hero__content{ max-width:480px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
  .hero__logo{ width:140px; margin:0 auto 14px; }
  .hero__title{ font-size:clamp(24px,6.7vw,31px); letter-spacing:-.4px; line-height:1.13; }
  .hero__sub{ font-size:14.5px; line-height:1.55; margin:13px auto 0; }
  .hero__cta{ width:100%; justify-content:space-between; margin-top:18px; }
  .hero__info{ align-items:center; margin-top:16px; }
  .hi-trust{ justify-content:center; }
  .hero__scroll{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .hero__cta{ transition:none; } }