/* ITERA — hero.css: hero único das páginas principais (home, trader, investidor, Itera Watch), 29/09/2026.
   Linkado em _src/layout.html logo depois de bundle.css; carimbo ?v= pelo build.
   Marcação (igual nas quatro; ids, data-cta e data-bar-after de cada página preservados):
     <section class="hero" id="top" aria-labelledby="hero-title" style="--hero-pos:50% 50%">
       <div class="hero-media" aria-hidden="true"> <picture>/<img> ou <picture> + <video>; <div class="hero-veil"></div> </div>
       <div class="hero-body">
         <div class="hero-head"> <p class="hero-label">A <span class="hero-sep">//</span> B</p>
                                 <h1 id="hero-title" class="hero-h1">… <em>destaque</em></h1> </div>
         <p class="hero-lead">…</p>
         <div class="hero-ctas" data-bar-after> .btn.btn--primary.btn--lg + .btn.btn--ghost.btn--lg </div>
         <p class="hero-note">…</p>
       </div>
     </section>
   .hero-head só agrupa rótulo e H1 (no celular os dois vão juntos sobre a foto).
   Faixas fixas: rótulo 22px, H1 com 2 linhas reservadas, lead com 3, CTAs de 52px. Assim, na mesma largura de tela,
   rótulo, H1, lead e CTAs começam na mesma altura nas quatro páginas.
   Mídia: dentro da coluna externa do site (--page-outer, 1336px); em telas maiores a cor da dobra (--bg) sobra nas
   laterais, com as bordas da mídia esmaecidas. Posição do recorte por página: --hero-pos (desktop) e --hero-pos-m
   (celular; padrão = --hero-pos).
   Especificidade: tudo começa com "#main .hero" para vencer as regras de dobra do v3.css ("main section...") e os
   resets das páginas (".wt h1", ".iv :where(a)"). Uma página que tenha reset de seção mais forte (ex.:
   "main#main .iv > section", 1,1,2) precisa deixar o .hero de fora (":not(:where(.hero))"). */

#main .hero,#main .hero *,#main .hero *::before,#main .hero *::after{box-sizing:border-box}
#main .hero{--hero-pos:50% 50%;--hero-pos-m:var(--hero-pos); /* padrões; a página troca no style do section */
  position:relative;min-height:max(720px,100vh);margin:0;padding:0;background:var(--bg);color:var(--text);
  overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
@supports (height:100svh){#main .hero{min-height:max(720px,100svh)}}
#main .hero::before,#main .hero::after{content:none}

/* ---------- mídia (foto ou vídeo) ---------- */
#main .hero .hero-media{position:absolute;top:0;bottom:0;left:50%;right:auto;width:min(100%,var(--page-outer,1336px));height:auto;
  transform:translateX(-50%);margin:0;overflow:hidden;pointer-events:none;background:var(--bg)}
#main .hero .hero-media picture{display:contents}
#main .hero .hero-media img,#main .hero .hero-media video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:var(--hero-pos,50% 50%);-webkit-user-select:none;user-select:none}
/* véu: escurece o topo (header) e desce ao preto da dobra; um segundo véu, radial, fica atrás da coluna do texto para o
   lead e a nota passarem de 4,5:1 sobre qualquer trecho da foto */
/* a faixa do header (transparente sobre o hero) leva um véu a mais: o nav em #9E9E9E passa de 4,5:1 sobre a foto */
#main .hero .hero-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.6) 0,rgba(10,10,10,.6) calc(var(--header-h,76px) - 8px),rgba(10,10,10,0) calc(var(--header-h,76px) + 96px)),
             radial-gradient(ellipse 680px 420px at 50% calc(var(--header-h,76px) + 300px),rgba(10,10,10,.5) 0,rgba(10,10,10,.34) 55%,rgba(10,10,10,0) 100%),
             linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.45) 40%,rgba(10,10,10,.72) 68%,rgba(10,10,10,.95) 86%,#0a0a0a 94%)}
/* 29/09 (noite): a foto fecha em preto na base do hero (fade dos 68% aos 94% da altura), unindo com a dobra seguinte */
/* telas mais largas que a coluna externa: as bordas da mídia esmaecem na cor da dobra, sem corte seco */
@media (min-width:1337px){
  #main .hero .hero-media{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%)}
}

/* ---------- texto ---------- */
#main .hero .hero-body{position:relative;z-index:1;width:100%;max-width:1040px;margin:0 auto;
  padding:calc(var(--header-h,76px) + clamp(48px,9vh,96px)) var(--gut) clamp(48px,8vh,96px);
  display:flex;flex-direction:column;align-items:center;text-align:center}
#main .hero .hero-head{width:100%;display:flex;flex-direction:column;align-items:center}
/* rótulo (web-label do DS): faixa fixa de 22px, a altura da tag "Em breve", para o H1 não mudar de lugar com ela.
   #C9C9C9 como o lead: o --muted (#9E9E9E) em 12px não chega a 4,5:1 sobre a foto do investidor */
#main .hero .hero-label{margin:0;max-width:100%;min-height:22px;font-family:var(--font-sans);font-size:12px;line-height:22px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#c9c9c9}
#main .hero .hero-sep{color:var(--yellow);margin:0 .15em}
/* tag do DS (bloco de canto 4px) dentro do rótulo, ex.: "Em breve" no Itera Watch */
#main .hero .hero-tag{display:inline-block;vertical-align:top;margin-left:10px;padding:3px 8px;border-radius:var(--radius-xs,4px);
  background:var(--itera-yellow);color:var(--deep-black);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em}
/* H1: 2 linhas reservadas (min-height 2,04em); nenhum título das quatro passa de 2 linhas entre 1240 e 1440px */
#main .hero .hero-h1{margin:24px 0 0;max-width:none;min-height:2.04em;font-family:var(--font-sans);font-size:clamp(44px,5.6vw,80px);
  line-height:1.02;font-weight:700;letter-spacing:-.03em;text-transform:none;color:var(--text);text-wrap:balance}
#main .hero .hero-h1 em{font-style:normal;font-weight:700;color:var(--yellow)}
/* lead: 3 linhas reservadas (min-height 4,65em), mesmo vazio. #C9C9C9 em vez de --muted: passa de 4,5:1 sobre o véu */
#main .hero .hero-lead{margin:28px 0 0;max-width:560px;min-height:4.65em;font-size:clamp(17px,1.35vw,20px);line-height:1.55;
  font-weight:400;color:#c9c9c9;text-wrap:pretty}
#main .hero .hero-ctas{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
#main .hero .hero-note{position:relative;isolation:isolate;margin:24px 0 0;max-width:560px;font-size:13px;line-height:1.5;font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none}
#main .hero .hero-note .hero-sep{margin:0 .3em}
/* nota (texto de conformidade): halo escuro e difuso só atrás dela, como na home; estrela ou brilho da mídia não
   derrubam o contraste */
#main .hero .hero-note::before{content:"";position:absolute;inset:0 8px;z-index:-1;border-radius:999px;background:rgba(10,10,10,.6);
  box-shadow:0 0 20px 14px rgba(10,10,10,.6);pointer-events:none}

/* botões do DS dentro do hero (as páginas têm resets de <a> mais fortes que .btn--primary: ".wt a", ".iv :where(a)") */
#main .hero .btn--primary,#main .hero .btn--primary:hover{color:var(--cta-text)}
#main .hero .btn--primary{box-shadow:var(--glow)} /* glow só no CTA amarelo principal do hero (DS 2.0) */
#main .hero .btn--primary:hover{box-shadow:var(--glow-2)}
#main .hero .btn--ghost,#main .hero .btn--ghost:hover{color:var(--text);border-color:var(--text)}
#main .hero .btn--ghost{background:rgba(10,10,10,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#main .hero .btn--ghost:hover{background:rgba(255,255,255,.06)}

/* .hero--vp (trader): um bloco da dobra seguinte sobe --hero-overlap sobre a base do hero no desktop (a barra de
   proposta de valor, 88px). O hero ganha esse espaço embaixo, para o bloco não cobrir a nota; as faixas de cima
   (rótulo, H1, lead, CTAs, nota) ficam nas mesmas alturas das outras páginas */
#main .hero--vp{--hero-overlap:88px} /* padrão; a página troca (trader.css: --tr-vp-lift) */
@media (min-width:760px){
  #main .hero--vp .hero-body{padding-bottom:calc(clamp(48px,8vh,96px) + var(--hero-overlap))}
}

/* ---------- celular (< 760px): modelo da home de 26/09 (v4.css, --v4-ph-*) ----------
   Foto (ou vídeo 4:5) em faixa no topo: começa --hero-ph-top abaixo do topo da página (sob o fim do header), com
   --hero-ph-h de altura. Rótulo a 60px do header e H1 44px abaixo dele, sobre a foto. O lead entra --hero-ph-in na foto,
   sobre um blur que some para cima (transição foto -> preto); CTAs 20px abaixo, empilhados; nota embaixo. */
@media (max-width:759.98px){
  #main .hero{min-height:0;display:block;padding:0 0 32px;--hero-ph-top:56px;--hero-ph-h:min(125vw,600px);--hero-ph-in:112px}
  #main .hero .hero-media{top:var(--hero-ph-top);bottom:auto;left:0;width:100%;height:var(--hero-ph-h);transform:none;-webkit-mask-image:none;mask-image:none}
  #main .hero .hero-media img,#main .hero .hero-media video{object-position:var(--hero-pos-m,var(--hero-pos,50% 50%))}
  /* véu: mais forte no terço de cima, onde o rótulo (12px) fica sobre a foto (4,5:1); mais leve no H1 (texto grande,
     3:1) e fechando no preto, onde entram o lead e os CTAs */
  #main .hero .hero-veil{background:linear-gradient(180deg,rgba(10,10,10,.74) 0%,rgba(10,10,10,.66) 28%,rgba(10,10,10,.34) 56%,rgba(10,10,10,.55) 80%,#0a0a0a 100%)}
  #main .hero .hero-body{position:static;max-width:none;padding:calc(var(--hero-ph-top) + var(--hero-ph-h) - var(--hero-ph-in)) var(--gut) 0}
  #main .hero .hero-head{position:absolute;z-index:1;top:calc(var(--header-h,76px) + 60px);left:var(--gut);right:var(--gut);width:auto}
  /* rótulo com 2 linhas reservadas (2 × 1,9em): o H1 fica na mesma altura com rótulo de 1 ou 2 linhas */
  #main .hero .hero-label{line-height:1.9;min-height:3.8em}
  #main .hero .hero-tag{vertical-align:middle}
  #main .hero .hero-h1{margin-top:44px;font-size:max(44px,11.5vw);min-height:0}
  /* lead com 4 linhas reservadas (6,2em): os CTAs ficam na mesma altura nas quatro páginas a 390px (o lead do trader
     tem 3 linhas; os outros, 4) */
  #main .hero .hero-lead{position:relative;isolation:isolate;margin-top:0;max-width:none;min-height:6.2em;color:rgba(255,255,255,.86)}
  #main .hero .hero-lead::before{content:"";position:absolute;z-index:-1;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));top:-40px;bottom:-16px;
    background:rgba(10,10,10,.32);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px);pointer-events:none}
  #main .hero .hero-ctas{margin-top:20px;flex-direction:column;align-items:stretch;width:100%}
  #main .hero .hero-ctas .btn{width:100%}
  #main .hero .hero-note{margin-top:24px;max-width:none}
}

/* "Role para conhecer": cue de rolagem no rodapé do hero, o mesmo do investidor (.iv-cue). Só desktop; hoje só a home
   traz a marcação (pedido do Paulo, 29/09/2026). Âncora: primeira dobra depois do hero. */
#main .hero .hero-cue{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
#main .hero .hero-cue:hover{color:var(--text)}
#main .hero .hero-cue:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
#main .hero .hero-cue-line{position:relative;display:block;width:1px;height:36px;background:var(--line-2);overflow:hidden}
#main .hero .hero-cue-line span{position:absolute;inset:0;background:var(--yellow);animation:heroCue 2.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes heroCue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:759.98px){#main .hero .hero-cue{display:none}}
@media (prefers-reduced-motion:reduce){#main .hero .hero-cue-line span{animation:none}}
/* em telas baixas (720 a 760px de altura) o cue desce para não encostar na nota do hero */
@media (min-width:760px) and (max-height:760px){#main .hero .hero-cue{bottom:24px}}