.c-hero-xl .line-mask{clip-path:inset(-.1em);overflow:visible!important;overflow:initial!important}.c-hero-xl .hero_main{background-color:transparent;color:#fff;position:relative;z-index:1}.c-hero-xl .hero_main .main_inner{align-items:stretch;display:flex;flex-direction:column;justify-content:space-between;height:100lvh;padding-bottom:max(32px,min(calc(32px + .012*(100vw - 440px)),44px));padding-top:max(112px,min(calc(112px + (148 - 112) * ((100vw - 440px) / (1440 - 440))),148px));row-gap:100px}.c-hero-xl .hero_main .main_bottom{align-items:flex-start;display:flex;flex-direction:column;justify-content:space-between;gap:24px var(--gap);width:100%}@media (min-width: 1025px){.c-hero-xl .hero_main .main_bottom{align-items:flex-end;flex-direction:row}}.c-hero-xl .hero_main .main_heading{font-size:max(3.125rem,min(calc(3.125rem + .062*(100vw - 27.5rem)),7rem));letter-spacing:-.03em;line-height:1em;max-width:1070px;text-wrap:pretty}.c-hero-xl .hero_main .main_text{font-size:max(1.25rem,min(calc(1.25rem + .004*(100vw - 27.5rem)),1.5rem));letter-spacing:-.02em;line-height:1.2em;max-width:640px;text-wrap:pretty}.c-hero-xl .hero_scroller{background:transparent;color:#fff;height:100lvh;position:relative;z-index:1}@media (min-width: 1025px) and (min-height: 730px),(max-width: 1024px) and (min-height: 500px){.c-hero-xl .hero_scroller{padding-top:70px}}.c-hero-xl .hero_scroller .scroller_head{display:flex;flex-direction:column;flex:0 0 auto;justify-content:space-between;padding-bottom:44px;padding-top:48px}.c-hero-xl .hero_scroller .scroller_label{--background-color: rgba(255, 255, 255, .1);--color: #fff}.c-hero-xl .hero_scroller .scroller_body{align-items:stretch;display:flex;flex-direction:column;flex:0 0 auto;width:100%}.c-hero-xl .hero_scroller .scroller_progress{background-color:#fff3;overflow:hidden;position:relative;width:100%;height:1px}.c-hero-xl .hero_scroller .progress_bar{background-color:#fff;top:0;left:0;position:absolute;width:100%;height:100%;transform:scaleX(0);transform-origin:0% 50%;z-index:1}.c-hero-xl .hero_scroller .scroller_content{align-items:flex-start;display:flex;flex-direction:column;gap:44px var(--gap);padding-top:32px;width:100%}@media (min-width: 1025px){.c-hero-xl .hero_scroller .scroller_content{align-items:flex-start;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}.c-hero-xl .hero_scroller .content_index{width:100%}.c-hero-xl .hero_scroller .index_inner{align-items:stretch;border:1px solid rgba(255,255,255,.4);border-radius:20px;display:inline-flex;font-family:var(--family--2);font-size:max(.75rem,min(calc(.75rem + .002*(100vw - 27.5rem)),.875rem));line-height:1em;justify-content:flex-start;padding:12px 17px;width:-moz-fit-content;width:fit-content}.c-hero-xl .hero_scroller .index_inner>*{align-items:center;display:inline-flex;min-width:20px;justify-content:center}.c-hero-xl .hero_scroller .index_divider,.c-hero-xl .hero_scroller .index_total{color:#ffffff4d}.c-hero-xl .hero_scroller .content_main{position:relative;width:100%;height:100%}.c-hero-xl .hero_scroller .main_item{display:flex;top:0;left:0;position:absolute;flex-direction:column;width:100%;opacity:0;transition:opacity .3s ease}.c-hero-xl .hero_scroller .main_item p{font-size:max(1.875rem,min(calc(1.875rem + .028*(100vw - 27.5rem)),3.625rem));letter-spacing:-.02em;line-height:1.1em;text-wrap:pretty}.c-hero-xl .hero_scroller .char{display:inline-block;opacity:.5}.c-hero-xl .hero_scroller .line{display:block}.c-hero-xl .hero_background{height:100lvh;margin:0;top:0;left:0;position:absolute;width:100%;z-index:0}.c-hero-xl .background_frame{background-color:transparent;border-radius:20px;height:calc(100lvh - 16px);overflow:hidden;inset:8px;position:absolute;width:calc(100% - 16px)}@media (min-width: 1025px){.c-hero-xl .background_frame{height:calc(100lvh - 24px);inset:12px;position:absolute;width:calc(100% - 24px)}}.c-hero-xl .background_canvas{background-color:#000;clip-path:inset(50% 50% 50% 50% round 100px);opacity:1;top:50%;left:50%;position:absolute;width:100%;height:100%;transform:translate(-50%,-50%)}@media (min-width: 1025px){.c-hero-xl .background_canvas{clip-path:inset(50% 50% 50% 50% round 200px)}}.c-hero-xl .background_canvas *{margin:auto;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;opacity:.875;top:0;left:0;position:absolute;width:100%!important;height:100%!important;transform:scale(1)}.c-hero-xl.is-preview .background_canvas{clip-path:inset(0% round 0)!important}

/* ══════════════════════════════════════════════════════════════════════════
   PokerLAB · camada de diagramação do hero da home
   Troca o layout "tipografia gigante + espaço em branco" herdado do tema por
   uma composição editorial com hierarquia: pill de identidade → headline com
   ênfase palavra-a-palavra → subtítulo com keywords → âncora de conversão
   (Seleção aberta + CTAs) → strip de prova social.
   Exclusivo da home: nenhuma outra página carrega hero-xl.css.
   ══════════════════════════════════════════════════════════════════════════ */
.c-hero-xl{
  /* ─────────────────────────────────────────────────────────────────────────
     CORES DO HERO — MEXA AQUI (Thiago, 2026-07-17)
     Estes 3 tokens são o único lugar pra ajustar as cores que você vinha
     testando na mão. Duas formas de mexer:
       · No código: troque o valor abaixo e salve.
       · Ao vivo no DevTools: inspecione o <section class="… c-hero-xl …"> (o
         primeiro elemento do hero), ache este bloco no painel "Styles" e edite
         o valor da variável. O véu e os dois botões seguem daqui na hora.
     Por que o "fill" some no inspetor: ele é um pseudo-elemento (::after) sobre
     o vídeo — não é um nó clicável. Estas variáveis dão a ele um endereço fixo. */
  --pl-hero-veil:#263030eb;    /* fill/cor por cima do vídeo · 8 dígitos = RGB + alfa (eb ≈ 92%) */
  --pl-hero-btn-face:#e2e3dc;  /* pílula dos botões — a "parte escura", agora clara */
  --pl-hero-btn-ink:#3a4041;   /* fonte dos botões */

  --pl-cream:#f7f7f5;
  --pl-soft:rgba(247,247,245,.66);
  --pl-muted:rgba(247,247,245,.7);
  --pl-line:rgba(247,247,245,.14);
  --pl-lime:#cef79e;
  --pl-lime-deep:#a7e26e;
  --pl-gold:#c9a84c;
  --pl-ease:cubic-bezier(.16,1,.3,1);

  /* — A FRASE DO HERO —
     O hero tem duas frases grandes: a headline ("Uma só missão…") e a do
     scroller ("O poker de alto nível…"). São componentes diferentes, mas
     precisam soar como a MESMA voz — então a tipografia delas mora aqui, num
     lugar só, e as duas classes bebem daqui. Ajuste de corpo, peso, entrelinha
     ou tracking se faz nestes 4 tokens e vale para as duas de uma vez.
     A escala é a do tema (30px em 440 → 58px em 1440). A headline vinha com
     escala própria, menor e mais apertada (54px/600/-.03em), e por isso as duas
     frases nunca casavam. */
  --pl-phrase-size:clamp(1.875rem, calc(1.875rem + .028 * (100vw - 27.5rem)), 3.625rem);
  --pl-phrase-weight:400;
  --pl-phrase-lh:1.1em;
  --pl-phrase-ls:-.02em
}

/* As duas frases do hero. Seletores separados — cada uma tem sua própria medida
   e seu próprio papel na página —, formatação idêntica. */
.c-hero-xl .hero_main .main_heading,
.c-hero-xl .hero_scroller .main_item p{
  font-size:var(--pl-phrase-size);
  font-weight:var(--pl-phrase-weight);
  line-height:var(--pl-phrase-lh);
  letter-spacing:var(--pl-phrase-ls);
  color:var(--pl-cream);
  text-wrap:pretty
}

/* — véu sobre o vídeo: fill chapado, cor no token --pl-hero-veil (topo do bloco).
     Substitui os dois gradientes empilhados em preto-azulado do site antigo. Vai
     no ::after do .background_canvas: assim herda o clip-path do reveal e o
     arredondamento do frame, e NÃO recebe o scale do parallax (que o JS aplica
     no primeiro filho) — o véu fica firme enquanto o vídeo se move por baixo.
     É pseudo-elemento: no DevTools ele aparece só se você expandir o nó
     .background_canvas (item "::after"), ou edite o token lá em cima. — */
.c-hero-xl .background_canvas:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--pl-hero-veil)
}

/* — coluna editorial, centrada na altura em vez de esticada de topo a base — */
.c-hero-xl .hero_main .main_inner{justify-content:center;row-gap:0}
/* `stretch` (não `flex-start`): como item de flex-column, um filho alinhado a
   flex-start encolhe pro shrink-to-fit e a headline quebra numa coluna magra.
   Quem limita a medida de leitura é o max-width de cada bloco. */
.c-hero-xl .main_stack{
  display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(18px,1.9vw,28px);
  width:100%;max-width:1120px
}
.c-hero-xl .main_eyebrow{align-self:flex-start}

/* — pill de identidade — */
.c-hero-xl .main_eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border:1px solid var(--pl-line);border-radius:999px;
  background:rgba(247,247,245,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--family--2);font-size:.75rem;line-height:1;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pl-soft)
}
.c-hero-xl .eyebrow_mark{color:var(--pl-gold);font-size:.8rem;line-height:1}

/* — headline: keywords em cream, conectivos rebaixados (contraste do site antigo) —
   Corpo, peso, entrelinha, tracking e cor vêm dos tokens da frase do hero (topo
   do arquivo). Aqui fica só o que é DESTA frase: a medida de leitura.
   `pretty`, não `balance`: balance iguala o comprimento das linhas e acaba
   fatiando a frase em linhas curtas; queremos as linhas cheias do site antigo,
   então a medida é quem define a quebra. */
.c-hero-xl .hero_main .main_heading{max-width:1080px}
/* A ênfase é só de COR. O peso é o mesmo da frase inteira — era o rebaixamento
   de peso (600 → 400) que picotava a headline em duas tipografias. */
.c-hero-xl .main_heading .hd_mute{color:var(--pl-muted)}

/* — subtítulo: keywords em cream sobre corpo rebaixado — */
.c-hero-xl .hero_main .main_text{
  font-size:clamp(1.0625rem,.95rem + .5vw,1.375rem);
  font-weight:400;line-height:1.5em;letter-spacing:-.01em;
  color:var(--pl-soft);max-width:660px
}
.c-hero-xl .main_text strong{color:var(--pl-cream);font-weight:600}

/* — âncora de conversão: "Seleção aberta" é o único elemento colorido do hero — */
.c-hero-xl .hero_main .main_button{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:clamp(2px,.5vw,8px)
}
.c-hero-xl .cta_status{
  display:inline-flex;align-items:center;gap:11px;
  font-size:clamp(1rem,.9rem + .3vw,1.1875rem);
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--pl-lime)
}
.c-hero-xl .status_dot{
  position:relative;flex:0 0 auto;width:9px;height:9px;
  border-radius:50%;background:var(--pl-lime-deep)
}
.c-hero-xl .status_dot:after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--pl-lime-deep);
  animation:pl-ping 2.4s var(--pl-ease) infinite
}
@keyframes pl-ping{0%{transform:scale(1);opacity:.55}70%,to{transform:scale(2.6);opacity:0}}

/* CTA secundário: é o MESMO componente u-btn--1 do "Quero Entrar" — mesma
   geometria, mesmo canto curvo, mesma coreografia de hover (blob encolhe, seta
   desliza, cores invertem). Só reescreve os tokens do tema, e troca a seta "→"
   por "↓" (o botão rola a página, não sai dela).
   As cores são OPACAS de propósito: o .label_corner (o SVG da ponte curva) fica
   em right:-16px com 18px de largura, ou seja, sobrepõe 2px o label. Com cor
   translúcida os dois alfas se somam nesses 2px e desenham um traço vertical
   visível. Opaco, a emenda some — que é como o botão primário sempre funcionou. */
.c-hero-xl .cta_ghost{
  --button-text-background:#1b2627;
  --button-text-background-hover:#263436;
  --button-text-color:var(--pl-cream);
  --button-text-color-hover:var(--pl-cream);
  --button-blob-background:#2a3739;
  --button-blob-background-hover:#3a4a4c;
  --button-blob-icon-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23f7f7f5' d='M5.8 7.703V.398H4.6v7.305l-3.36-3.36-.84.855 4.8 4.8 4.8-4.8-.84-.855-3.36 3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-image-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23f7f7f5' d='M5.8 7.703V.398H4.6v7.305l-3.36-3.36-.84.855 4.8 4.8 4.8-4.8-.84-.855-3.36 3.36Z'/%3E%3C/svg%3E")
}

/* — botões do hero: a "parte escura" (a pílula do label + a ponte curva, que
     seguem --button-text-background) foi invertida de charcoal para claro.
     Thiago 2026-07-17: parte escura → #e2e3dc, fonte → #3a4041.
     Vale para os DOIS botões do hero — o seletor tem especificidade maior que a
     do .cta_ghost, então também sobrescreve a pílula dark do "Saiba mais".
     O blob (limão no primário, dark no ghost) segue como acento — não foi
     mexido. O hover mantém a pílula estável na mesma cor; a affordância fica por
     conta da animação de blob/seta que o componente do tema já traz. */
.c-hero-xl .hero_main .main_button .u-btn--1{
  --button-text-background:var(--pl-hero-btn-face);
  --button-text-background-hover:var(--pl-hero-btn-face);
  --button-text-color:var(--pl-hero-btn-ink);
  --button-text-color-hover:var(--pl-hero-btn-ink)
}

/* — strip de prova (vidro fosco) — */
.c-hero-xl .main_stats{
  display:flex;flex-wrap:wrap;width:100%;max-width:840px;
  margin-top:clamp(12px,1.6vw,26px);
  border:1px solid var(--pl-line);border-radius:18px;overflow:hidden;
  background:rgba(247,247,245,.045);
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%)
}
.c-hero-xl .stat{
  display:flex;align-items:center;gap:14px;flex:1 1 230px;
  padding:18px clamp(18px,1.5vw,26px);
  border-left:1px solid var(--pl-line)
}
.c-hero-xl .stat:first-child{border-left:0}
.c-hero-xl .stat_num{
  font-family:var(--family--2);font-weight:400;
  font-size:clamp(1.5rem,1.2rem + .9vw,2.125rem);
  line-height:1;letter-spacing:-.04em;color:var(--pl-cream);white-space:nowrap
}
/* Sufixos ("+", "X"): mesma altura do dígito — em monospace o X maiúsculo já
   nasce na cap-height, ao contrário do "×" (que tem só metade da altura de tinta
   e precisaria de 1,9× de escala pra empatar). Rebaixados na cor pra o número
   ficar sendo o protagonista. */
.c-hero-xl .num_suffix{color:rgba(247,247,245,.4)}

/* Token de palavra ("TECH") ocupando o slot do número: herda o mesmo corpo de
   "12M+" e "2X" — só sobe pra caixa alta e solta o tracking, porque o -.04em
   é afinação de dígito e esmaga letras. */
.c-hero-xl .stat_num--word{text-transform:uppercase;letter-spacing:.01em}
.c-hero-xl .stat_label{
  display:flex;flex-direction:column;gap:3px;
  font-family:var(--family--2);font-size:.6875rem;line-height:1.3;
  letter-spacing:.08em;text-transform:uppercase;color:var(--pl-soft)
}
.c-hero-xl .label_accent{color:var(--pl-lime);font-style:normal}

/* Mobile: o hero é height:100lvh — se a composição crescer, ela vaza por baixo
   da dobra e colide com o scroller. Compacta a strip e o topo em vez de deixar
   a prova social cair fora da tela. */
@media (max-width: 719px){
  /* A escala do tema (mínimo de 30px) empurra a headline para 6-7 linhas num
     360px e a composição inteira vaza a dobra. Quem cede é o TOKEN — as duas
     frases encolhem juntas e continuam idênticas entre si. */
  .c-hero-xl{--pl-phrase-size:clamp(1.375rem, 1.05rem + 1.5vw, 1.75rem)}
  .c-hero-xl .stat{
    flex:1 1 100%;gap:12px;padding:13px 18px;
    border-left:0;border-top:1px solid var(--pl-line)
  }
  .c-hero-xl .stat:first-child{border-top:0}
  .c-hero-xl .stat_num{font-size:1.375rem}
  .c-hero-xl .stat_label{font-size:.625rem}
  .c-hero-xl .main_stats{border-radius:14px}
  .c-hero-xl .main_stack{gap:16px}
  .c-hero-xl .hero_main .main_inner{padding-top:92px}
  .c-hero-xl .main_scrollcue{display:none} /* colide com a strip em telas curtas */
}

/* Telas baixas (360x640 e afins): mesmo compactada, a composição não cabe em
   100lvh — a strip de prova social terminava ~50px abaixo da dobra (defeito que
   já existia antes de as duas frases serem unificadas). Encolhe mais um passo:
   frase, respiro e a própria strip. */
@media (max-width: 719px) and (max-height: 700px){
  .c-hero-xl{--pl-phrase-size:clamp(1.25rem, 1rem + 1.2vw, 1.5rem)}
  .c-hero-xl .main_stack{gap:10px}
  .c-hero-xl .hero_main .main_inner{padding-top:76px}
  .c-hero-xl .stat{padding:9px 16px}
  .c-hero-xl .main_stats{margin-top:8px}
}

/* — affordance de scroll — */
.c-hero-xl .main_scrollcue{
  display:flex;justify-content:center;pointer-events:none;
  bottom:clamp(20px,2.2vw,34px);left:0;right:0;position:absolute;z-index:2
}
.c-hero-xl .cue_mouse{
  position:relative;display:block;width:22px;height:34px;
  border:1.5px solid rgba(247,247,245,.35);border-radius:12px
}
.c-hero-xl .cue_mouse:after{
  content:"";position:absolute;top:6px;left:50%;width:3px;height:6px;
  border-radius:2px;background:var(--pl-lime);
  animation:pl-cue 2s ease-in-out infinite
}
@keyframes pl-cue{
  0%{transform:translate(-50%,0);opacity:0}
  25%{opacity:1}
  70%{transform:translate(-50%,13px);opacity:0}
  to{opacity:0}
}
/* Em viewport curta (laptop 720–800px) o cue encosta na strip de prova. Some —
   o botão "Saiba mais" já cumpre a mesma função de afordância. */
@media (max-height: 820px){
  .c-hero-xl .main_scrollcue{display:none}
}

/* — entrada: heading/texto/CTA são animados pelo hero-xl.js (SplitText+GSAP);
     pill, strip e cue não têm hook no JS do tema, então entram por CSS na
     cadência da timeline do bloco. `both` garante o estado final mesmo se a
     animação for perdida. — */
@media (prefers-reduced-motion: no-preference){
  .c-hero-xl .main_eyebrow{animation:pl-rise .7s var(--pl-ease) 1.2s both}
  .c-hero-xl .main_stats{animation:pl-rise .8s var(--pl-ease) 2.1s both}
  .c-hero-xl .main_scrollcue{animation:pl-rise .8s var(--pl-ease) 2.5s both}
}
@keyframes pl-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* — reduced-motion: o JS do tema aborta a timeline e nunca reverte o
     opacity:0 inline do heading/texto/CTA; sem isto o hero fica invisível. — */
@media (prefers-reduced-motion: reduce){
  .c-hero-xl .main_heading,
  .c-hero-xl .main_text,
  .c-hero-xl .main_button{opacity:1!important;transform:none!important}
  .c-hero-xl .status_dot:after,
  .c-hero-xl .cue_mouse:after{animation:none}
}