/* ITERA — v4.css. Home v4 (site/v4): conteúdo da v3 no ritmo da página "Para o trader" e da referência
   robinhood.com (hero grande, texto centralizado, uma dobra por ideia). Tudo aqui vale só dentro de .v4;
   header, rodapé e barra mobile são os partials do site (tokens.css, bundle.css, v3.css e brand.css intactos).
   29/09/2026 (fundação do DS 2.0): hero = assets/hero.css; valores da página = tokens do site (DS 2.0 via tokens.css);
   margens = --gut e conteúdo até --page (1240px); mídia de borda a borda limitada a --page-outer (1336px), centrada;
   botões .v4-btn = Button lg do DS; sem ajuste de header e rodapé por página. */

/* ===== Núcleo: tokens da página (apelidos dos tokens do site, DS 2.0) ===== */
.v4{
  --v4-pad:var(--gut);
  --v4-sy:clamp(80px,8.5vw,128px);
  --v4-ease:var(--ease);
  --v4-bg:var(--bg);
  --v4-g1:var(--bg-alt); /* placa (dobra alternada do DS, #141414) */
  --v4-g2:var(--panel-2);
  --v4-g3:var(--panel-3);
  --v4-line:var(--line);
  --v4-line2:var(--line-2);
  --v4-line4:rgba(255,255,255,.4);
  --v4-text:var(--text);
  --v4-t2:var(--muted);
  --v4-t3:var(--muted); /* o DS tem dois níveis de texto (era #7C7C7C) */
  --v4-acc:var(--yellow);
  --v4-soft:var(--yellow-soft);
  --v4-gold:var(--gold);
  --v4-acc-wash:var(--yellow-wash);
  --v4-acc-line:var(--yellow-line);
  --v4-on-acc:var(--cta-text);
  --v4-glow:var(--glow);
  --v4-glow2:var(--glow-2);
  --v4-shadow:var(--shadow-sm);
  --v4-dash-cover:var(--v4-bg);
  /* DS 2.0 (29/09): superfícies de card, fio e curva de movimento (hover 150ms, transição 250ms) */
  --v4-s1:var(--surface-1);
  --v4-s2:var(--surface-2);
  --v4-ds-line:var(--border);
  --v4-ds-ease:var(--ease);
  position:relative;overflow-x:clip;background:var(--v4-bg);color:var(--v4-text);
  font-family:var(--font-sans,Manrope,system-ui,sans-serif);font-size:16px;line-height:normal;text-wrap:wrap;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
.v4 *,.v4 *::before,.v4 *::after{box-sizing:border-box}
.v4 h1,.v4 h2,.v4 h3,.v4 h4,.v4 p,.v4 ul,.v4 ol,.v4 dl,.v4 dd,.v4 figure{margin:0;max-width:none;text-transform:none}
.v4 h1,.v4 h2,.v4 h3,.v4 h4{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.v4 ul,.v4 ol{list-style:none;padding:0}
.v4 a{color:var(--v4-text);text-decoration:none}
.v4 a:hover{color:var(--v4-acc)}
.v4 em{font-style:normal}
.v4 img{display:block;max-width:100%}
.v4 .v4-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* seções: vence as regras de dobra do v3.css ("main section" põe min-height, flex e padding em ≥1000px) */
#main .v4 .v4-sec{position:relative;min-height:0;display:block;align-items:normal;padding:var(--v4-sy) var(--v4-pad)}
.v4 .v4-in{width:100%;max-width:var(--page);margin:0 auto}
.v4 .v4-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.v4 .v4-head .v4-h2{max-width:980px}
/* subtítulo das dobras (DS 2.0, 29/09): 17–20px, 1.55, text-2. Só dentro de .v4-head (o lead do hero é o .hero-lead do hero.css) */
.v4 .v4-head .v4-sup{max-width:680px;margin-top:24px;font-size:clamp(17px,1.35vw,20px);line-height:1.55}
.v4 .v4-head .v4-label+.v4-h2{margin-top:20px}
.v4 .v4-head .v4-ctas{margin-top:36px}
.v4 .v4-head .v4-note{margin-top:14px}

/* ===== Núcleo: tipografia ===== */
.v4 .v4-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v4-t2)}
.v4 .v4-label .v4-sep{margin:0 .15em;color:var(--v4-acc)}
/* título de dobra (DS 2.0, 29/09): um tamanho só em todas as h2 da página (antes havia v4-h2, v4-big e v4-giant);
   a primeira parte em 500 e o <em> em 500, amarelo (sem light desde 29/09/2026, pedido do Paulo). O .v4-lit continua fazendo a palavra acender. */
.v4 .v4-h2{font-weight:700;font-size:clamp(44px,5.6vw,80px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.v4 .v4-h2 em{font-weight:700;color:var(--v4-acc)}
.v4 .v4-lead{font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.5;color:var(--v4-text);text-wrap:pretty}
.v4 .v4-sup{font-weight:400;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--v4-t2);text-wrap:pretty}
/* link de texto (o DS não tem componente de link): 600, branco, sublinhado de 1px a 4px, amarelo no hover */
.v4 .v4-sup a{font-weight:600;color:var(--v4-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color 150ms var(--v4-ds-ease)}
.v4 .v4-sup a:hover{color:var(--v4-acc)}
.v4 .v4-note{font-size:12px;line-height:1.5;color:var(--v4-t2);text-wrap:balance;text-align:center}
.v4 .v4-note span+span::before{content:"·";margin:0 8px;color:var(--v4-t3)}
.v4 .v4-cap{margin-top:14px;font-size:12px;color:var(--v4-t3);text-align:center}
/* tag de status (DS 2.0, it-tag): bloco de 4px, amarelo com texto #0A0A0A. Nada de cápsula */
.v4 .v4-tag{display:inline-block;padding:3px 8px;border-radius:4px;background:var(--v4-acc);color:#0a0a0a;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
/* linha de tags em texto (29/09, no lugar das cápsulas .v4-chip): mesma voz do .v4-label do hero, com "//" amarelo entre
   os itens. É texto numa lista (ul/li); cada item não quebra, e o "//" fica no fim da linha quando a linha quebra */
.v4 .v4-tags{display:flex;flex-wrap:wrap;justify-content:center;row-gap:6px;font-size:12px;line-height:1.6;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v4-t2)}
.v4 .v4-tags li{white-space:nowrap}
.v4 .v4-tags li:not(:last-child)::after{content:"//";margin:0 .6em;color:var(--v4-acc)}

/* palavra do <em> que "acende por último": branca embaixo, amarela em cima, crossfade ao revelar.
   Marcação: <em class="v4-lit" data-lit="X"><span class="v4-lit__w">X</span></em>. Desde 29/09/2026 (GEO) a cópia amarela é
   conteúdo gerado (::after com o data-lit), fora do texto do DOM: robô e busca leem o título uma vez só (antes era um
   span .v4-lit__y com aria-hidden, que eles liam: "Itera Watch: Itera Watch:"). O "/ ''" tira a cópia do nome acessível;
   a primeira declaração é a de navegador sem esse recurso. A animação é a mesma, agora no ::after. */
.v4 .v4-lit{position:relative;display:inline-block;font-style:normal;color:inherit}
.v4 .v4-lit__w{color:var(--v4-text);transition:opacity 600ms var(--v4-ease) var(--v4-lit-delay,500ms)}
.v4 .v4-lit::after{content:attr(data-lit);content:attr(data-lit) / "";position:absolute;left:0;top:0;color:var(--v4-acc);opacity:0;transition:opacity 600ms var(--v4-ease) var(--v4-lit-delay,500ms)}
.v4 .is-in .v4-lit__w,.no-js .v4 .v4-lit__w{opacity:0}
.v4 .is-in .v4-lit::after,.no-js .v4 .v4-lit::after{opacity:1}

/* ===== Núcleo: botões e CTA =====
   29/09: Button lg do DS 2.0 (52px, raio 8, 500, 16px, sem caixa alta; nunca pílula). Primário amarelo (hover
   cta-hover), secundário com borda de 1px na cor do texto. O glow fica só no CTA do hero (hero.css). */
.v4 .v4-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 var(--space-6,24px);border-radius:var(--radius-md,8px);border:1px solid transparent;font-size:16px;font-weight:500;letter-spacing:0;line-height:1;text-transform:none;white-space:nowrap;cursor:pointer;transition:background-color 150ms var(--v4-ds-ease),border-color 150ms var(--v4-ds-ease),color 150ms var(--v4-ds-ease),transform 150ms var(--v4-ds-ease)}
.v4 .v4-btn:active{transform:scale(.98)}
.v4 .v4-btn svg{width:16px;height:16px;flex:none}
.v4 .v4-btn--primary,.v4 .v4-btn--primary:hover{background:var(--cta);border-color:var(--cta);color:var(--cta-text);font-weight:600}
.v4 .v4-btn--primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.v4 .v4-btn--secondary,.v4 .v4-btn--secondary:hover{background:transparent;color:var(--v4-text);border-color:var(--v4-text)}
.v4 .v4-btn--secondary:hover{background:rgba(255,255,255,.06)}
.v4 .v4-ctas{display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:12px}

/* ===== Núcleo: reveal (bloco sobe 24px com fade, uma vez; --i escalona irmãos) ===== */
.js .v4 [data-v4-rv]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--v4-ease) calc(var(--i,0)*90ms),transform 700ms var(--v4-ease) calc(var(--i,0)*90ms)}
.js .v4 [data-v4-rv].is-in{opacity:1;transform:none}
.js .v4 [data-v4-rv].v4-rv-now{transition:none}

/* ===== Núcleo: fio tracejado no eixo central (desenha de cima para baixo) ===== */
.v4 .v4-dash{position:relative;width:1px;height:clamp(96px,11vw,160px);margin:var(--v4-sy) auto calc(var(--v4-sy)*-1);overflow:hidden;background-image:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--v4-acc) 45%,transparent) 0 6px,transparent 6px 12px)}
.js .v4 .v4-dash::after{content:"";position:absolute;left:0;right:0;top:100%;height:100%;background:var(--v4-dash-cover);transform:translateY(-100%);transition:transform 700ms var(--v4-ease)}
.js .v4 .v4-dash.is-in::after{transform:translateY(0)}

/* ===== Núcleo: dobras com foto de fundo (essência, fecho) =====
   29/09: a foto fica na coluna externa do site (--page-outer, 1336px), centrada; em telas maiores a cor da dobra sobra
   nas laterais e as bordas da foto esmaecem em 72px (como no hero, hero.css) */
.v4 .v4-photo{position:absolute;top:0;bottom:0;left:50%;width:min(100%,var(--page-outer,1336px));transform:translateX(-50%);overflow:hidden}
@media (min-width:1337px){
  .v4 .v4-photo{-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%)}
}
.v4 .v4-photo img{width:100%;height:100%;max-width:none;object-fit:cover;-webkit-user-select:none;user-select:none}
.v4 .v4-veil{position:absolute;inset:0;pointer-events:none}
.v4 .v4-veil--top{background:linear-gradient(to bottom,#0a0a0a 0%,rgba(10,10,10,.86) 24%,rgba(10,10,10,.5) 52%,rgba(10,10,10,0) 76%)}
.v4 .v4-veil--bottom{background:linear-gradient(to top,#0a0a0a 0%,rgba(10,10,10,.74) 18%,rgba(10,10,10,0) 46%)}
.v4 .v4-veil--dim{background:rgba(10,10,10,.42)}

/* ===== S1 — HERO: assets/hero.css (hero padrão do site, 29/09/2026). Aqui só o que é do H1 da home =====
   H1 com a palavra que troca ("operar." / "investir.") a cada 3 s: marcação e motor são os da v3 (site.js: .h1-rot .rot;
   v3.css: .rot inline-grid, .rot-w com fade). A linha fica centralizada: o v4.js mede a palavra ativa e anima a
   largura do slot, e os itens não esticam (justify-items:start) para a medida ser a do texto.
   "Evoluir." é uma linha própria (.v4-line = block) e também a palavra que acende (.v4-lit, com a cópia amarela em
   position:absolute; left:0; acende com o .is-in do data-v4-seen do H1). Como bloco de largura total, a cópia amarela
   colava à esquerda: o bloco tem a largura do texto e centraliza por margem, e o left:0 coincide com a palavra. */
.v4 .hero-h1 .v4-line{display:block}
.v4 .hero-h1 .h1-rot{display:block}
.v4 .hero-h1 .rot{display:inline-grid;justify-items:start;vertical-align:baseline;text-align:left;transition:width .6s var(--v4-ease)}
.v4 .hero-h1 .rot-w{white-space:nowrap}
.v4 .hero-h1 .v4-line.v4-lit{display:block;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
/* 29/09/2026 (GEO): a camada animada (.h1-rot, aria-hidden) não tem nó de texto. Cada pedaço ("Mais que ", "operar.",
   "investir.", o "Evoluir." branco) vem do data-t por conteúdo gerado e a cópia amarela do data-lit (regra .v4-lit acima):
   o texto do H1 no HTML e no DOM é só o do .h1-static, a frase uma vez. O site.js e o v4.js seguem mexendo nos mesmos
   .rot-w (classe e largura), agora vazios por dentro */
.v4 .hero-h1 .h1-rot [data-t]::before{content:attr(data-t);content:attr(data-t) / ""}

/* ===== S2 — O QUE VOCÊ ENCONTRA: quatro entradas ligadas às dobras =====
   29/09 (DS 2.0 + proposta de valor do trader, .tr-vp-list): UM card (#141414, fio de 8%, raio 16) com as quatro entradas
   separadas por fios verticais recuados; ícone num quadrado de 56px com borda, palavra em 20px/600 e descrição em text-2.
   Sem a numeração "01 //". 760–1059px: 2 × 2 dentro do mesmo card. <760px: lista empilhada, ícone à esquerda. */
#main .v4 .v4-attr{padding:clamp(56px,7vw,104px) var(--v4-pad) 0}
.v4 .v4-attr-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--page);margin:0 auto;background:var(--v4-s1);border:1px solid var(--v4-ds-line);border-radius:16px;overflow:hidden}
.v4 .v4-attr-list li{position:relative}
.v4 .v4-attr-list li::before,.v4 .v4-attr-list li::after{content:"";position:absolute;background:var(--v4-ds-line);pointer-events:none}
.v4 .v4-attr-list li::before{left:0;top:32px;bottom:32px;width:1px}
.v4 .v4-attr-list li::after{display:none}
.v4 .v4-attr-list li:first-child::before{display:none}
.v4 .v4-attr-list a{display:flex;flex-direction:column;align-items:flex-start;height:100%;padding:32px;color:var(--v4-text);text-align:left;transition:background 150ms var(--v4-ds-ease)}
.v4 .v4-attr-list a:hover{background:rgba(255,255,255,.04);color:var(--v4-text)}
.v4 .v4-attr-list a:focus-visible{outline:2px solid var(--v4-acc);outline-offset:-2px}
.v4 .v4-attr-ico{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:12px;background:var(--v4-s2);border:1px solid var(--v4-ds-line);color:var(--v4-acc);transition:border-color 150ms var(--v4-ds-ease)}
.v4 .v4-attr-list a:hover .v4-attr-ico{border-color:var(--v4-acc-line)}
.v4 .v4-attr-ico svg{width:26px;height:26px}
.v4 .v4-attr-w{margin-top:24px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.v4 .v4-attr-d{margin-top:6px;font-size:15px;line-height:1.5;color:var(--v4-t2);text-wrap:pretty}
@media (min-width:760px) and (max-width:1059.98px){
  .v4 .v4-attr-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4 .v4-attr-list li:nth-child(odd)::before{display:none}
  .v4 .v4-attr-list li:nth-child(n+3)::after{display:block;top:0;left:32px;right:32px;height:1px}
}
@media (max-width:759.98px){
  .v4 .v4-attr-list{grid-template-columns:minmax(0,1fr);padding:4px 20px}
  .v4 .v4-attr-list li::before{display:none}
  .v4 .v4-attr-list li+li::after{display:block;top:0;left:0;right:0;height:1px}
  .v4 .v4-attr-list a{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"ico w" "ico d";column-gap:16px;align-content:start;padding:18px 0}
  .v4 .v4-attr-list a:hover{background:transparent}
  .v4 .v4-attr-ico{grid-area:ico;width:44px;height:44px;border-radius:12px}
  .v4 .v4-attr-ico svg{width:22px;height:22px}
  .v4 .v4-attr-w{grid-area:w;align-self:center;margin-top:0;font-size:18px}
  .v4 .v4-attr-d{grid-area:d;margin-top:2px;font-size:14px}
}

/* ===== S3 — ESTRUTURA: título, apoio e dois cards lado a lado =====
   29/09: os dois cards seguem o card do DS 2.0 (#141414, fio de 8%, raio 16, padding 24/32), sem os degradês warm/cool
   nem o brilho amarelo atrás. Card 1 com o espaço da foto da Stefany ao vivo; card 2 com a interface ilustrativa. */
.v4 .v4-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,80px)}
.v4 .v4-card{display:flex;flex-direction:column;gap:14px;padding:32px;background:var(--v4-s1);border:1px solid var(--v4-ds-line);border-radius:16px;text-align:left}
.v4 .v4-card-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--v4-s2);border:1px solid var(--v4-ds-line);color:var(--v4-acc)}
.v4 .v4-card-ico svg{width:24px;height:24px}
.v4 .v4-card h3{margin-top:10px;font-size:clamp(22px,2vw,28px);font-weight:600;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.v4 .v4-card>p{font-size:16px;line-height:1.6;color:var(--v4-t2);text-wrap:pretty}
.v4 .v4-vis{margin-top:auto;padding-top:20px}
/* chamada ¹ (nota no fim da dobra; sem link, como pedido) */
.v4 .v4-fn{font-size:.72em;font-weight:600;line-height:0;margin-left:1px;color:var(--v4-text)}
/* espaço da foto (16:10) até a foto chegar: segunda camada do DS, borda tracejada, ícone e legenda */
.v4 .v4-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;aspect-ratio:16/10;border-radius:12px;background:var(--v4-s2);border:1px dashed rgba(255,255,255,.22);color:var(--v4-t2);text-align:center}
.v4 .v4-ph-ico{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.v4 .v4-ph-cap{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.v4 .v4-card-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
/* nota 1 da dobra: discreta, 12px, text-2, alinhada à esquerda numa coluna de leitura */
.v4 .v4-fn-note{max-width:880px;margin:40px auto 0;text-align:left;text-wrap:pretty}
.v4 .v4-fn-note sup{font-size:.75em;font-weight:600;line-height:0;margin-right:2px;color:var(--v4-text)}

/* interface ilustrativa (sem valores legíveis) */
.v4 .v4-ui{background:var(--v4-bg);border:1px solid var(--v4-ds-line);border-radius:12px;overflow:hidden}
.v4 .v4-ui-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--v4-line)}
.v4 .v4-ui-t{font-size:13px;font-weight:600;letter-spacing:.02em}
.v4 .v4-ui-rows{display:grid;gap:0;padding:6px 18px 10px}
.v4 .v4-ui-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--v4-line)}
.v4 .v4-ui-rows>div:last-child{border-bottom:0}
.v4 .v4-ui-rows dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v4-t3)}
.v4 .v4-ui-rows dd{font-size:14px;font-weight:500;color:var(--v4-text);text-align:right}
.v4 .v4-ui-rows dd.v4-ui-hi{font-weight:700}
.v4 .v4-ui-bars{display:flex;gap:4px;padding:0 18px 16px}
.v4 .v4-ui-bars span{flex:1;height:6px;border-radius:999px;background:var(--v4-g3)}
.v4 .v4-ui-bars span.is-on{background:var(--v4-acc)}

/* ===== S4 e S11 — dobras de foto inteira com texto por cima ===== */
#main .v4 .v4-photo-sec{min-height:max(640px,92vh);padding:calc(var(--header-h,76px) + 8vh) var(--v4-pad) 12vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.v4 .v4-photo-sec .v4-head{position:relative;z-index:1;width:100%}
/* essência, 05/10/2026: sai a foto de fundo; a faixa de 3 lâminas (fundo transparente) entra abaixo do texto e do botão.
   No celular a faixa fica maior que a tela (160%), centrada na Beatriz, e vaza pelas laterais. */
#main .v4 .v4-essencia{overflow:hidden}
.v4 .v4-laminas{width:min(1336px,100%);margin:56px auto 0}
.v4 .v4-laminas img{display:block;width:100%;height:auto;max-width:none;-webkit-user-select:none;user-select:none}
@media (max-width:759.98px){
  /* 05/10/2026 (noite): no celular a faixa entra entre o título e o subtítulo (mesma ordem do hero e da comunidade).
     O .v4-head vira "contents" para o título, o texto e os botões entrarem na mesma coluna flexível da faixa */
  #main .v4 .v4-essencia{display:flex;flex-direction:column;align-items:center}
  .v4 .v4-essencia .v4-head{display:contents}
  .v4 .v4-essencia .v4-h2{order:1}
  .v4 .v4-laminas{order:2;width:160%;margin:32px 0 0;align-self:center}
  .v4 .v4-essencia .v4-sup{order:3;margin-top:28px}
  .v4 .v4-essencia .v4-ctas{order:4}
}

/* ===== S3 — estrutura, 05/10/2026: foto da dupla atrás do título, como hero de seção. Fica no topo da dobra, na coluna de
   1336px com as bordas esmaecidas, desce um pouco (a sombra preta fica em cima, para o título ler limpo) e esmaece no
   preto antes dos cards. Ponto de partida: previa-hero-golden-estrutura.js (site/imagens/ferramentas). ===== */
#main .v4 .v4-estrutura{overflow:hidden}
.v4 .v4-estrutura .v4-in{position:relative;z-index:1}
.v4 .v4-est-foto{--est-desce:140px;position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,var(--page-outer,1336px));height:960px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);mask-composite:intersect}
.v4 .v4-est-foto img{position:absolute;left:0;top:var(--est-desce);width:100%;height:calc(100% - var(--est-desce));max-width:none;object-fit:cover;object-position:70% 40%;-webkit-user-select:none;user-select:none}
.v4 .v4-est-veu{position:absolute;inset:0;background:linear-gradient(180deg,var(--v4-bg) 0,var(--v4-bg) var(--est-desce),rgba(10,10,10,.6) calc(var(--est-desce) + 160px),rgba(10,10,10,.25) 64%,var(--v4-bg) 100%)}
.v4 .v4-estrutura .v4-duo{margin-top:340px}
@media (max-width:759.98px){
  /* celular, 05/10/2026 (noite, pedido do Paulo): como no hero e na comunidade, a foto fica entre o título e o subtítulo.
     O título fica no topo, sobre a foto escurecida; o subtítulo desce para a base esmaecida da foto; botão e cards abaixo */
  .v4 .v4-est-foto{--est-desce:24vw;height:190vw;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
  .v4 .v4-est-foto img{object-position:72% 40%}
  .v4 .v4-est-veu{background:linear-gradient(180deg,var(--v4-bg) 0,rgba(10,10,10,.82) var(--est-desce),rgba(10,10,10,.5) 36%,rgba(10,10,10,.12) 52%,rgba(10,10,10,.35) 66%,rgba(10,10,10,.85) 82%,var(--v4-bg) 100%)}
  .v4 .v4-estrutura .v4-sup{margin-top:72vw}
  .v4 .v4-estrutura .v4-duo{margin-top:56px}
}


/* ===== S6 — FORMAÇÃO: quatro etapas com números leves ===== */
.v4 .v4-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,80px);padding-top:32px;border-top:1px solid var(--v4-line2);text-align:left}
.v4 .v4-step-n{display:block;font-size:clamp(56px,6.4vw,96px);font-weight:200;line-height:1;letter-spacing:-.02em;color:var(--v4-acc);font-variant-numeric:tabular-nums}
.v4 .v4-steps b{display:block;margin-top:18px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.v4 .v4-steps p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--v4-t2);text-wrap:pretty}

/* ===== S7 — ITERA WATCH: tag "Em breve", título, recursos em linha de texto e o vídeo do hero da plataforma =====
   29/09: a composição estática saiu; entra o satélite em loop de plataforma.html numa moldura (raio 24, até 1240px,
   16:9 no desktop e 4:5 no celular). Pôster atrás; o vídeo aparece com fade quando começa a tocar (v4.js). */
.v4 .v4-watch-label{display:flex;align-items:center;justify-content:center;gap:12px}
.v4 .v4-watch .v4-h2{max-width:1100px}
.v4 .v4-watch-body{max-width:680px;margin-top:16px;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--v4-text);text-wrap:pretty}
.v4 .v4-watch .v4-tags{margin-top:28px;max-width:900px}
.v4 .v4-watch-visual{position:relative;max-width:var(--page);margin:clamp(48px,6vw,88px) auto 0}
.v4 .v4-watch-frame{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--v4-bg);border:1px solid var(--v4-ds-line)}
.v4 .v4-watch-poster,.v4 .v4-watch-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;-webkit-user-select:none;user-select:none}
.js .v4 .v4-watch-video{opacity:0;transition:opacity 900ms var(--v4-ds-ease)}
.js .v4 .v4-watch-video.is-playing{opacity:1}
.v4.v4-rm .v4-watch-video{visibility:hidden}

/* ===== S8 — COMUNIDADE: foto larga em moldura =====
   29/09: a linha "Ideias // Pessoas // Conexões em movimento" sai de cima do título e vai para depois da foto.
   Celular: a foto passa para trás do título e do texto (véu escuro), com CTAs e linha de palavras abaixo (bloco mobile). */
.v4 .v4-frame{width:100%;max-width:var(--page);margin:clamp(48px,6vw,80px) auto 0;aspect-ratio:16/8;border-radius:24px;overflow:hidden;border:1px solid var(--v4-ds-line);box-shadow:var(--shadow)}
.v4 .v4-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.v4 .v4-com-ctas{margin-top:36px}
.v4 .v4-com-tags{margin-top:32px}

/* ===== S9 — PROGRAMA DE BENEFÍCIOS E RECOMPENSAS =====
   29/09: título centralizado como as outras dobras; saem a textura amarela, o brilho radial e o símbolo grande à direita.
   Os quatro estados (Operar, Evoluir, Conquistar, Fazer parte) usam o esquema da S7 de trader.html (trader.css, "S7"):
   faixa, fio dourado pelo centro dos círculos e o símbolo ITERA que enche de baixo para cima, estado a estado.
   A faixa é revelada pelo núcleo (data-v4-rv → .is-in), que dispara o fio (700ms) e o preenchimento (atrasos
   200/400/600/800ms). Sem JS ou com movimento reduzido: fio desenhado e símbolos no nível final. */
.v4 .v4-prog-head .v4-label{color:var(--v4-acc)}
/* nome do programa (24/09): "e recompensas" só onde o rótulo cabe numa linha (~324px); abaixo, "Programa de benefícios" */
@media (max-width:369.98px){.v4 .v4-prog-rec{display:none}}
.v4 .v4-prog-head .v4-sup{max-width:720px}

/* faixa (card de contêiner do DS: #141414, fio de 8%, raio 24) */
.v4 .v4-prog-band{max-width:var(--page);margin:clamp(48px,6vw,80px) auto 0;padding:clamp(28px,4vw,56px);background:var(--v4-s1);border:1px solid var(--v4-ds-line);border-radius:24px}
.v4 .v4-prog-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
/* fio dourado de 1px pelo centro dos círculos (pseudo da lista: absoluto, fora da grade; os círculos o cobrem) */
.v4 .v4-prog-steps::before{content:"";position:absolute;top:36px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--v4-acc) 25%,transparent),var(--v4-acc));transform-origin:left center;transition:transform 700ms var(--v4-ds-ease)}
.js .v4 .v4-prog-band:not(.is-in) .v4-prog-steps::before{transform:scaleX(0)}

/* estados */
.v4 .v4-prog-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.v4 .v4-prog-st--1{--v4-f:75.3%;--v4-d:200ms}
.v4 .v4-prog-st--2{--v4-f:50%;--v4-d:400ms}
.v4 .v4-prog-st--3{--v4-f:24.7%;--v4-d:600ms}
.v4 .v4-prog-st--4{--v4-f:0%;--v4-d:800ms}
.v4 .v4-prog-circ{flex:none;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--v4-s1);border:1px solid var(--v4-line2)}
.v4 .v4-prog-st--4 .v4-prog-circ{border-color:color-mix(in srgb,var(--v4-acc) 45%,transparent);box-shadow:var(--v4-glow)}
/* símbolo oficial (#i-itera) em 32px: contorno branco a 30% + preenchimento amarelo que sobe. O wrapper (overflow
   hidden) desce f% e o SVG dentro sobe f%: só a parte de baixo aparece. f calibrado no trader.css para o kit final:
   75.3% = metade de baixo do paralelogramo inferior, 50% = inferior inteiro, 24.7% = mais metade do superior, 0% = inteiro */
.v4 .v4-prog-sym{position:relative;width:32px;height:32px}
.v4 .v4-prog-line,.v4 .v4-prog-fs{position:absolute;left:0;top:0;display:block;width:32px;height:32px}
/* contorno: os paths têm fill="currentColor" → color transparente; 23,1 unidades ≈ 1px na tela */
.v4 .v4-prog-line{overflow:visible;color:transparent;stroke:rgba(255,255,255,.3);stroke-width:23.1px;stroke-linejoin:round}
.v4 .v4-prog-fw{position:absolute;inset:0;overflow:hidden;transform:translateY(var(--v4-f));transition:transform 700ms var(--v4-ds-ease) var(--v4-d)}
.v4 .v4-prog-fs{color:var(--v4-acc);transform:translateY(calc(-1 * var(--v4-f)));transition:transform 700ms var(--v4-ds-ease) var(--v4-d)}
.js .v4 .v4-prog-band:not(.is-in) .v4-prog-fw{transform:translateY(100%)}
.js .v4 .v4-prog-band:not(.is-in) .v4-prog-fs{transform:translateY(-100%)}

/* texto do estado */
.v4 .v4-prog-n{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--v4-t2);font-variant-numeric:tabular-nums}
.v4 .v4-prog-name{margin:8px 0 6px;font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.v4 .v4-prog-desc{font-size:15px;line-height:1.55;color:var(--v4-t2);text-wrap:pretty}

/* ===== S10 — XP: assinatura e função de cada parte ===== */
#main .v4 .v4-xp{border-top:1px solid var(--v4-line)}
.v4 .v4-xp .lockup{margin-bottom:36px}
.v4 .v4-xp .v4-h2{max-width:820px}
/* celular do app XP (S6 de investidor.html, .iv-phone): no desktop vai por último, depois do CTA, e esmaece embaixo;
   no celular fica entre o título e o texto (ordem do HTML; bloco mobile) */
.v4 .v4-xp-phone{order:10;position:relative;width:min(360px,100%);margin:48px auto 0;display:flex;justify-content:center}
.v4 .v4-xp-phone img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 96%);mask-image:linear-gradient(180deg,#000 72%,transparent 96%)}
/* o fio tracejado de fechamento começa logo depois do celular esmaecido (antes, um respiro inteiro de dobra) */
.v4 .v4-xp .v4-dash{margin-top:0}

/* ===== S11 — FECHO ===== */
#main .v4 .v4-fecho{min-height:max(720px,100vh);padding-bottom:10vh}
/* 24/09, pedido do Paulo: emenda suave com a placa grafite do XP (--v4-g1) em vez do corte para o preto. Desde 29/09 a
   foto fica na coluna de 1336px: o fundo da própria dobra faz a mesma emenda nas laterais */
#main .v4 .v4-fecho{background:var(--v4-bg)}
.v4 .v4-fecho .v4-veil--top{background:linear-gradient(to bottom,var(--v4-bg) 0%,rgba(10,10,10,.86) 24%,rgba(10,10,10,.5) 52%,rgba(10,10,10,0) 76%)}
.v4 .v4-fecho .v4-photo img{object-position:50% 50%}
.v4 .v4-fecho .v4-h2{max-width:1100px}
.v4 .v4-fecho .v4-sup{margin-top:28px}
.v4 .v4-sig{margin-top:clamp(56px,8vh,96px);display:flex;flex-direction:column;align-items:center;gap:16px}
.v4 .v4-sig .v4-tag-line{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v4-t2)}

/* ===== Header e rodapé: os do site, sem ajuste por página (item ativo é regra global do v3.css), 29/09/2026 ===== */
.v4 a,.v4 button{scroll-margin-top:calc(var(--header-h,76px) + 8px)}

/* ===== Tablet (760–1059): grades apertam ===== */
@media (max-width:1059.98px){
  .v4 .v4-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .v4 .v4-prog-steps{gap:20px}
  .v4 .v4-prog-name{font-size:20px}
}

/* ===== Mobile (< 760): tudo em coluna, botões em largura total, foto do hero em 4:5 ===== */
@media (max-width:759.98px){
  .v4{--v4-sy:72px}
  .v4 .v4-ctas{flex-direction:column;width:100%}
  .v4 .v4-ctas .v4-btn{width:100%}
  .v4 .v4-note span{display:block}
  .v4 .v4-note span+span::before{content:none}
  /* o hero do celular (rótulo e H1 sobre a foto, lead na transição, CTAs empilhados) foi para o hero.css, 29/09 */
  .v4 .v4-duo{grid-template-columns:1fr;gap:16px}
  .v4 .v4-card{padding:24px}
  #main .v4 .v4-photo-sec{min-height:0;padding:calc(var(--header-h,76px) + 48px) var(--v4-pad) 72px}
  .v4 .v4-steps{grid-template-columns:1fr;gap:28px}
  .v4 .v4-step-n{font-size:48px}
  .v4 .v4-frame{aspect-ratio:4/3;border-radius:20px}
  .v4 .v4-xp .lockup{--sym:56px}
  /* Watch: moldura em pé (4:5), a mesma proporção do vídeo e do pôster do celular */
  .v4 .v4-watch-frame{aspect-ratio:4/5}
  /* comunidade: a foto vai para trás do título e do texto, em sangria, com véu escuro (como o hero do celular);
     o texto fica na base da foto, sobre a plateia; CTAs e a linha de palavras vêm abaixo */
  .v4 .v4-comunidade .v4-in{display:grid;grid-template-columns:minmax(0,1fr)}
  .v4 .v4-com-photo,.v4 .v4-com-head{grid-area:1/1}
  .v4 .v4-com-photo{position:relative;width:auto;max-width:none;min-height:125vw;margin:0 calc(-1 * var(--v4-pad));aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
  .v4 .v4-com-photo img{position:absolute;inset:0;object-position:50% 45%}
  .v4 .v4-com-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0a0a0a 0%,rgba(10,10,10,.3) 20%,rgba(10,10,10,.5) 45%,rgba(10,10,10,.9) 75%,#0a0a0a 100%);pointer-events:none}
  .v4 .v4-com-head{position:relative;z-index:1;align-self:end}
  .v4 .v4-com-ctas{grid-row:2;margin-top:28px}
  .v4 .v4-com-tags{grid-row:3;margin-top:28px}
  /* programa: estados empilhados, fio na vertical pelo centro dos círculos (como o trader no celular) */
  .v4 .v4-prog-band{padding:28px 20px;border-radius:20px}
  .v4 .v4-prog-steps{grid-template-columns:minmax(0,1fr);gap:36px}
  .v4 .v4-prog-st{flex-direction:row;align-items:flex-start;text-align:left}
  .v4 .v4-prog-txt{min-width:0}
  .v4 .v4-prog-steps::before{top:36px;bottom:36px;left:36px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--v4-acc) 25%,transparent),var(--v4-acc));transform-origin:center top}
  .js .v4 .v4-prog-band:not(.is-in) .v4-prog-steps::before{transform:scaleY(0)}
  /* XP: o celular fica entre o título e o texto (ordem do HTML) */
  .v4 .v4-xp-phone{order:0;width:min(320px,86%);margin-top:36px}
  .v4 .v4-xp-head .v4-sup{margin-top:4px}
}

/* ===== Movimento reduzido: nada automático, tudo no estado final ===== */
@media (prefers-reduced-motion: reduce){
  .v4 *,.v4 *::before,.v4 *::after{animation:none!important;transition:none!important}
  .js .v4 [data-v4-rv]{opacity:1;transform:none}
  .js .v4 .v4-dash::after{display:none}
  .v4 .v4-lit__w{opacity:0}
  .v4 .v4-lit::after{opacity:1}
}
.v4.v4-rm *,.v4.v4-rm *::before,.v4.v4-rm *::after{animation:none!important;transition:none!important}

/* ===== Rodada 2 (23/09, noite): três superfícies, luz, creme e parallax =====
   Preto só nas dobras de foto; placa grafite em atributos + estrutura e em programa + XP; bloco creme em sócios +
   formação. Luz: o streak dourado do sistema (--streak) e um grão fino sobre as fotos, em modo teste. */

/* placa grafite com o streak diagonal */
/* 29/09: a placa é a dobra alternada do DS (#141414), da cor do card (surface-1); sobre ela os cards e a faixa usam a
   segunda camada (surface-2, #1F1F1F) e os quadros de ícone a terceira, para não sumirem na placa */
.v4 .v4-plate{position:relative;background:var(--v4-g1);--v4-dash-cover:var(--v4-g1);--v4-s1:var(--surface-2);--v4-s2:var(--surface-3)}
.v4 .v4-plate::before{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.028) 53%,color-mix(in srgb,var(--v4-acc) 7%,transparent) 59%,rgba(255,255,255,.018) 65%,transparent 76%);pointer-events:none}
#main .v4 .v4-plate .v4-sec{background:transparent}
#main .v4 .v4-attr{border-top:1px solid var(--v4-line)}
/* 29/09 (noite): entre o hero e a formação o Paulo quer preto chapado, sem a placa grafite nem o reflexo amarelado:
   a primeira placa (âncoras + estrutura) leva .v4-plate--black; cards voltam à superfície 1 do DS (#141414) e a linha do topo sai */
.v4 .v4-plate--black{background:var(--bg);--v4-dash-cover:var(--bg);--v4-s1:var(--surface-1);--v4-s2:var(--surface-2)}
.v4 .v4-plate--black::before{content:none}
#main .v4 .v4-plate--black .v4-attr{border-top:0}

/* S2 e S3: os cards da rodada 2 (quatro cards com degradê, brilho atrás do par de cards, superfícies warm/cool) saíram
   em 29/09 para o card do DS 2.0; as regras novas estão nas seções S2 e S3 acima. */

/* dobras creme (S5 sócios e S6 formação): tokens remapeados; o amarelo do botão principal permanece.
   29/09: a formação subiu para logo depois da estrutura, e as duas dobras creme deixaram de ser vizinhas. A ordem de
   fundos fica grafite (atributos + estrutura) → creme (formação) → foto (essência) → creme (sócios) → preto (Watch):
   cada dobra contrasta com as duas vizinhas. #0A0A0A ou #141414 na formação encostariam no grafite #0b0b0b da placa. */
/* 29/09: "creme" = tema claro do DS 2.0 (bg #F2F2F2, texto #0A0A0A, secundário #646464, destaque #6B6515) */
.v4 .v4-sec--cream{background:var(--cream);color:var(--ink-text);--v4-text:var(--ink-text);--v4-t2:var(--ink-muted);--v4-t3:var(--ink-dim);--v4-line:var(--cream-line);--v4-line2:rgba(10,10,10,.18);--v4-line4:rgba(10,10,10,.4);--v4-g1:var(--neutral-000);--v4-g2:var(--neutral-000);--v4-g3:var(--cream-2);--v4-ink-acc:var(--gold-dim)}
.v4 .v4-sec--cream .v4-h2 em,.v4 .v4-sec--cream .v4-label,.v4 .v4-sec--cream .v4-step-n{color:var(--v4-ink-acc)}
/* no claro o amarelo some (1,1:1): o botão primário é o preto do tema claro do DS (cta #0A0A0A, texto branco) */
.v4 .v4-sec--cream .v4-btn--primary,.v4 .v4-sec--cream .v4-btn--primary:hover{background:var(--deep-black);border-color:var(--deep-black);color:var(--neutral-000);box-shadow:var(--shadow-cta-light)}
.v4 .v4-sec--cream .v4-btn--primary:hover{background:var(--graphite);border-color:var(--graphite)}
.v4 .v4-sec--cream .v4-btn--secondary,.v4 .v4-sec--cream .v4-btn--secondary:hover{color:var(--ink-text);border-color:var(--ink-text)}
.v4 .v4-sec--cream .v4-btn--secondary:hover{background:rgba(10,10,10,.06)}
.v4 .v4-sec--cream a:hover{color:var(--v4-ink-acc)}
#main .v4 .v4-formacao{overflow:hidden}
.v4 .v4-sec--cream .v4-steps{border-top-color:rgba(0,0,0,.18)}
.v4 .v4-wm{position:absolute;right:-3%;bottom:-8%;width:min(44vw,600px);aspect-ratio:739.73/713.26;color:var(--ink-text,#0b0b0b);opacity:.045;pointer-events:none}
.v4 .v4-formacao .v4-in{position:relative}

/* S7 e S9: o brilho amarelo atrás da composição do Watch, a textura do símbolo e os cards de benefício da rodada 2
   saíram em 29/09 (vídeo em moldura no Watch; esquema da S7 do trader no programa). */

/* S10: grafite contínuo com o programa, assinatura em placa preta */
#main .v4 .v4-xp{border-top:0}
.v4 .v4-plaque{display:inline-flex;padding:28px 40px;margin-bottom:36px;border-radius:var(--radius-xl,24px);background:var(--v4-bg);border:1px solid var(--v4-line2);box-shadow:var(--v4-shadow)}
.v4 .v4-xp .lockup{margin-bottom:0}

/* fotos: grão fino (teste) e parallax (a imagem anda mais devagar que a página; só desktop, só com movimento) */
.v4 .v4-grain{position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
.js .v4.v4-px-on .v4-photo img[data-v4-px]{height:calc(100% + 140px);margin-top:-70px;will-change:transform}
.js .v4.v4-px-on .v4-frame img[data-v4-px]{height:calc(100% + 100px);margin-top:-50px;will-change:transform}

@media (max-width:759.98px){
  .v4 .v4-wm{width:70vw;right:-22%;bottom:-3%}
  .v4 .v4-plaque{padding:18px 20px;border-radius:20px}
  .v4 .v4-grain{opacity:.07}
}
@media (prefers-reduced-motion: reduce){
  .v4 .v4-photo img[data-v4-px],.v4 .v4-frame img[data-v4-px]{transform:none!important}
  .v4 .v4-watch-video{visibility:hidden}
}
/* título de dobra = H1 do hero também no celular (29/09/2026) */
@media (max-width:759.98px){.v4 .v4-h2{font-size:max(44px,11.5vw)}}

/* ===== Celular (29/09, noite): Watch com o vídeo atrás do rótulo, título e apoio, como o hero do celular; comunidade com
   título e apoio no começo da foto, o resto da foto abaixo e depois os CTAs (pedidos do Paulo) ===== */
@media (max-width:759.98px){
  .v4 .v4-watch .v4-in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}
  .v4 .v4-watch .v4-head:not(.v4-watch-after){grid-column:1;grid-row:1;position:relative;z-index:1;padding-top:40px}
  .v4 .v4-watch-visual{grid-column:1;grid-row:1/3;position:relative;max-width:none;min-height:125vw;margin:0 calc(-1 * var(--v4-pad))}
  .v4 .v4-watch-frame{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0}
  .v4 .v4-watch-frame::after{content:"";position:absolute;inset:0;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%);pointer-events:none}
  .v4 .v4-watch-after{grid-column:1;grid-row:3;margin-top:24px}
  .v4 .v4-watch-body{margin-top:0}
  .v4 .v4-com-head{align-self:start;padding-top:40px}
  .v4 .v4-com-photo::after{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%)}
}

/* ===== Desktop (29/09, noite): Watch (S7) com o vídeo do satélite atrás dos textos, como o hero de plataforma.html.
   O figure vira fundo da seção (coluna externa de 1336px, bordas esmaecidas em telas largas), com véu para o texto ler;
   a seção ganha altura de hero e centraliza o bloco. Segunda placa (programa + XP) e fecho em preto chapado. ===== */
@media (min-width:760px){
  #main .v4 .v4-watch{position:relative;min-height:max(720px,88vh);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
  .v4 .v4-watch .v4-head{position:relative;z-index:1}
  .v4 .v4-watch-visual{position:absolute;top:0;bottom:0;left:0;right:0;width:min(100%,var(--page-outer,1336px));max-width:none;margin:0 auto;z-index:0;pointer-events:none}
  .v4 .v4-watch-frame{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;background:var(--v4-bg)}
  .v4 .v4-watch-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 760px 480px at 50% 50%,rgba(10,10,10,.55) 0,rgba(10,10,10,.35) 55%,rgba(10,10,10,0) 100%),
               linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.4) 30%,rgba(10,10,10,.4) 62%,#0a0a0a 100%)}
}
@media (min-width:1337px){
  .v4 .v4-watch-visual{-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%)}
}
/* notas da página, no fim (29/09) */
#main .v4 .v4-notes{padding-top:0;padding-bottom:40px}
.v4 .v4-notes .v4-fn-note{margin-top:0}