/* ============================================================
   GRUPO VOCICAL — hero-preview.css (HERO DA HOME)
   Hero centralizado + grade de fundo + marquee de marcas.
   Só usado no index. O header (pill + dropdown + drawer) agora
   vive em site.css (componente site-wide). Depende de base.css.
   ============================================================ */

/* a 1ª tela (hero + marquee) ocupa a viewport menos o header sticky */
.hero-screen { display: flex; flex-direction: column;
               min-height: 100vh; min-height: calc(100dvh - var(--nb-h, 72px)); }

/* ---------------------------------------------------------------
   HERO centralizado
   --------------------------------------------------------------- */
.hero2 { position: relative; overflow: hidden; text-align: center;
         flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
         padding: clamp(28px, 5vh, 64px) 0; }

/* grade de fundo (port do grid-pattern), com fade radial */
.hero2__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(125% 95% at 50% 32%, #000 32%, transparent 80%);
          mask-image: radial-gradient(125% 95% at 50% 32%, #000 32%, transparent 80%);
}
.hero2::before {
  content: ""; position: absolute; left: 50%; top: 34%;
  width: min(940px, 92vw); height: 540px; transform: translate(-50%, -34%);
  background: radial-gradient(closest-side, rgba(166,3,3,.18), rgba(166,3,3,.05) 58%, transparent 76%);
  filter: blur(46px); z-index: 0; pointer-events: none;
}
.hero2::after {
  content: ""; position: absolute; left: 50%; top: 8%;
  width: min(620px, 80vw); height: 320px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(26,26,26,.10), transparent 70%);
  filter: blur(40px); z-index: 0; pointer-events: none;
}
.hero2__inner { position: relative; z-index: 1; max-width: 1080px; margin-inline: auto;
                padding-inline: var(--gutter); display: flex; flex-direction: column;
                align-items: center; gap: clamp(22px, 3vw, 32px); }

.hero2__title {
  font-family: var(--font); font-weight: 700; letter-spacing: -.025em; line-height: 1.04;
  font-size: clamp(2.1rem, 5vw, 3.9rem); color: var(--ink);
}
.hero2__title .t-line { display: block; }
/* o destaque do hero é texto vermelho em Archivo Black (sem o chip dos demais títulos) */
.hero2__title .t-line.accent {
  color: var(--red); background: none; padding: 0; margin: 0; border-radius: 0;
  font-family: var(--display); font-weight: 400; letter-spacing: -.02em;
}
/* reveal vertical-cut: cada palavra sobe de dentro de um corte */
.hero2__title .rw { display: inline-block; overflow: hidden; vertical-align: top; }
.hero2__title .rw__i { display: inline-block; }
.hero2__title.is-rev .rw__i { animation: cutReveal .8s var(--ease-weight) both; }
@keyframes cutReveal { from { transform: translateY(118%); } to { transform: translateY(0); } }
/* reveal do título do hero mantido sob reduced-motion (decisão do cliente) */
.hero2__lede { font-size: clamp(1.02rem, 1.5vw, 1.22rem); font-weight: 500;
               color: #4a4a4a; max-width: 60ch; }

.hero2__cta { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero2__trust { display: inline-flex; align-items: center; gap: 14px;
                font-size: .86rem; color: var(--gray); font-weight: 600; flex-wrap: wrap;
                justify-content: center; }
.hero2__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero2__trust b { color: var(--ink); }
.hero2__trust i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); font-style: normal; flex: 0 0 auto; }

/* mobile: os 3 selos empilham em 3 linhas centralizadas, cada um com bolinha
   dos DOIS lados (ficam simétricos) */
@media (max-width: 560px) {
  .hero2__trust { flex-direction: column; align-items: center; gap: 9px; }
  .hero2__trust span::after {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--red); flex: 0 0 auto;
  }
}

/* ---------------------------------------------------------------
   MARQUEE de marcas (rodapé da 1ª tela)
   --------------------------------------------------------------- */
.bslider { position: relative; z-index: 1; flex: 0 0 auto;
           padding-bottom: clamp(22px, 4vh, 48px); }
.bslider__cap { display: flex; align-items: center; justify-content: center; gap: 18px;
                padding: 0 var(--gutter) 22px; }
.bslider__cap span { font-size: .88rem; color: var(--gray); font-weight: 600; text-align: center; }
.bslider__cap b { color: var(--ink); }
.bslider__rule { height: 2px; width: clamp(36px, 12vw, 150px); flex: 0 0 auto; opacity: .35; }
.bslider__rule--l { background: linear-gradient(to left, var(--gray), transparent); }
.bslider__rule--r { background: linear-gradient(to right, var(--gray), transparent); }

.marquee { overflow: hidden; width: 100%; }
.marquee__track { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem);
                  width: max-content; animation: bmarquee 36s linear infinite;
                  /* compositing por GPU: torna o loop confiável no iOS Safari */
                  will-change: transform; backface-visibility: hidden; }
/* pausa no hover só em dispositivos com ponteiro real — no touch o :hover
   "gruda" após tocar/rolar e travava o marquee no mobile */
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }
/* caixa comum: altura normaliza o tamanho e o max-width impede que wordmarks
   largos (Fortlev, Imbralit) dominem a faixa; object-fit centraliza cada logo */
.marquee__logo { height: clamp(40px, 5vw, 56px); width: auto; max-width: clamp(110px, 14vw, 158px);
                 flex: 0 0 auto; object-fit: contain;
                 opacity: .92; transition: opacity .2s, transform .2s; }
.marquee__logo:hover { opacity: 1; transform: scale(1.05); }
@keyframes bmarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }