/* ==========================================================================
   02-hero.css — dobra principal
   Célula de 722px em 1440 governada pela arte (--hero-art-h = 594 + 2×64 de padding).
   Só tokens de tokens.css. Prefixo BEM: .hero__ (+ .badge-ai, componente do §4.3).
   ========================================================================== */

/* ---------- grid da dobra ---------- */
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  padding:var(--sp-16) var(--cell-px);          /* 64px 24 → 32 → 64 → 104 */
  background:var(--grad-hero);
  overflow:hidden;                               /* corta os mockups na borda da célula */
}

/* ---------- coluna esquerda ---------- */
.hero__copy{
  min-width:0;
  padding-bottom:var(--sp-10);                   /* 40 */
  position:relative;
  z-index:var(--z-content);
}

/* selo "100% infoprodução" (reaproveita o componente .badge-ai) */
.badge-ai{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  width:fit-content;
  max-width:100%;
  padding:var(--badge-pad);                      /* 12px 20px 12px 16px */
  border:var(--border-1);
  border-radius:var(--r-pill);
  background:var(--c-surface);
  text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-default);
}
.badge-ai:hover{background:var(--c-surface-soft)}
.badge-ai__logos{display:flex;flex-shrink:0}
.badge-ai__logo{position:relative;flex-shrink:0;padding:var(--sp-1);border-radius:var(--r-pill);background:var(--c-surface)}
.badge-ai__logo+.badge-ai__logo{margin-left:-8px}
.badge-ai__logo.is-1{z-index:1}
.badge-ai__logo.is-2{z-index:2;left:-3px;padding:0}
.badge-ai__logo.is-3{z-index:3;left:-5px}
.badge-ai__text{
  /* 13px <769 (SPEC §4.3: reduzir para caber em 390) → 14px ≥769 */
  font:var(--fw-medium) 13px/1.25 var(--font-display);
  color:var(--c-ink-600);
}
.badge-ai__text b{font-weight:var(--fw-bold);color:var(--c-ink-900)}

/* H1 — 44px em todas as larguras (D4) */
.hero__title{
  margin-top:var(--sp-8);                        /* 32 */
  font:var(--fw-semibold) var(--fs-h1)/var(--lh-h1) var(--font-display);
  letter-spacing:var(--ls-h1);
  color:var(--c-ink-900);
}
.hero__title>span{display:block}

/* Linha 2: verde CHAPADO + a varredura de --grad-shimmer (base.css §3.6) por cima.
   Anula a 2ª camada de base.css (rampa estática --c-green-soft→--c-green em --shimmer-ramp),
   que a referência NÃO tem. Medição por pixel na linha 2 do H1 (y346–387), coluna a coluna:
     · ref/desktop-1440-fold → #7C3AED CHEIO de x=154 a x=331, clareando só de x≈332 p/ a direita;
     · ref/desktop-1440-full → #CEEEB9 em x=164, rampa monotônica e saturação em x=248, chapado dali em diante.
   Uma camada branca por cima só CLAREIA: se houvesse rampa fixa, o pé esquerdo nunca sairia
   #7C3AED puro no fold. O que muda entre os dois shots é a FASE da varredura, não uma rampa.
   E a geometria bate: a rampa de 40%→50% de --grad-shimmer sobre background-size:200% cobre
   0,2×W = 114px numa coluna de 572px em 1440 — exatamente o trecho medido (x134→248).
   Aqui a base de --c-green vem de background-color (também recortada por background-clip:text)
   e o único background-image é a varredura.
   02-hero.js pausa a varredura fora da viewport (repaint de background-position);
   a regra `.shimmer.is-off{animation-play-state:paused}` mora em base.css §3.6. */
.hero__title .shimmer{
  display:block;
  background-color:var(--c-green);
  background-image:var(--grad-shimmer);
  background-size:200% auto;
}
/* base.css §6 zera o background-IMAGE em alto contraste, mas não conhece este background-COLOR;
   sem isto o verde continuaria recortado no texto por baixo do CanvasText. */
@media (forced-colors: active){ .hero__title .shimmer{background-color:transparent} }

.hero__sub{
  margin-top:var(--sp-8);
  font:var(--fw-medium) var(--fs-lead)/var(--lh-hero-sub) var(--font-body);
  color:var(--c-ink-600);
}

/* CTAs */
.hero__ctas{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  margin-top:var(--sp-16);                       /* 64 */
  width:100%;
}
.hero__cta{width:100%;justify-content:center}
/* o secundário da dobra tem 44px na referência (o primário, 48) — 10 + 24 (line-box 16/1.5) + 10.
   `.btn` continua 48px no resto do site. */
.hero__cta-alt{display:none;padding:10px 16px}

/* bullets Veloz / Blindado — disco CLARO #FFE8DD + glifo escuro #1C1238.
   O disco vem de .icon-circle (base.css §3.4), que já corrige a decisão D2 ("disco escuro");
   confirmado aqui por amostragem: ref e render dão #FFE8DD na borda e #1C1238 no miolo. */
.hero__bullets{
  display:none;
  gap:var(--sp-3);
  margin-top:var(--sp-19);                       /* 76 */
  margin-bottom:var(--sp-19);
}
.hero__bullet{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-3)}
.hero__bullet-txt{display:flex;flex-direction:column;gap:var(--sp-2-5);min-width:0}
.hero__bullet-t{font:var(--fw-bold) var(--fs-small)/1.5 var(--font-display);color:var(--c-ink-800)}
.hero__bullet-d{font:var(--fw-medium) var(--fs-micro)/16px var(--font-body);color:var(--c-ink-800)}

/* ---------- coluna direita (arte) ---------- */
.hero__art{
  position:relative;
  height:var(--hero-art-h);                      /* 298 → 594 */
  min-width:0;
}
.hero__desktop,
.hero__phone{
  position:absolute;
  bottom:0;
  box-sizing:content-box;                        /* borda POR FORA (950+2×10 = 970) */
  overflow:hidden;
  border:var(--mock-border) solid var(--c-surface);
}
.hero__desktop{
  left:80px;
  width:var(--mock-desktop-w);
  height:var(--hero-art-h);
  border-radius:var(--r-lg);
  background:var(--c-surface-soft);
  box-shadow:var(--sh-mock-desktop);
}
.hero__phone{
  left:var(--sp-4);                              /* 16 */
  width:var(--mock-phone-w);
  height:var(--mock-phone-h);
  border-radius:var(--phone-radius);
  background:var(--c-mock-phone-bg);
  box-shadow:var(--sh-mock-phone);
}

/* tipografia interna dos mockups (SVG inline).
   Os defaults ficam no <svg> DE PROPÓSITO, para serem HERDADOS pelos <text>.
   Um seletor `.hero__mock text{…}` casaria com cada <text> e venceria os atributos de
   apresentação (`font-weight="600"`, `letter-spacing="-.51"`), que entram na cascata como
   declaração de autor de especificidade 0 — foi o que zerava todo peso e tracking do mockup.
   Herdado, o valor só vale onde não há atributo. Peso base 400 = o default do SVG,
   que é o que os <text> sem atributo pedem. */
.hero__mock{
  display:block;
  font-family:var(--font-body);
  font-weight:var(--fw-regular);
  font-feature-settings:"tnum";
}

/* ---------- ≥769 (md) ---------- */
@media (min-width:769px){
  .hero__copy{padding-top:var(--sp-10)}          /* 40 */
  .badge-ai__text{font-size:var(--fs-small)}     /* 14 */
  .hero__ctas{width:auto}
  .hero__cta{width:fit-content;justify-content:center}
  .hero__cta-alt{display:inline-flex}
  .hero__bullets{display:flex}
}

/* ---------- ≥1025 — dobra centralizada: texto em cima, painel embaixo ---------- */
@media (min-width:1025px){
  .hero__copy{max-width:860px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero__sub{max-width:680px}
  .hero__ctas{justify-content:center;margin-top:var(--sp-10)}
  .hero__bullets{margin:var(--sp-12) 0 var(--sp-12);justify-content:center;gap:var(--sp-10);text-align:left}
  .hero__bullet{flex:0 1 auto}
  .hero__desktop{left:50%;transform:translateX(-44%)}
  .hero__phone{left:calc(50% - var(--mock-desktop-w) * .44 - 70px)}
}
@media (min-width:1440px){
  .hero__title>span{white-space:nowrap}
}

/* ---------- ≥1698 (xxl) ---------- */
@media (min-width:1698px){
  .hero__grid{background:var(--grad-hero-xl)}
}