/* ITERA — watch.css. Página do Itera Watch (plataforma.html), a partir do handoff do Claude Design
   (itera-watch/design-handoff-pagina/). Tudo aqui vale só dentro de .wt ou de body.page-plataforma.
   Não mexe em v3.css, bundle.css nem brand.css. Seções marcadas S1…S10.
   Desvios em relação ao handoff: itera-watch/IMPLEMENTACAO-PAGINA.md. */

/* ===== Núcleo: tokens da página (apelidos dos tokens do site, DS 2.0 via tokens.css desde 29/09/2026) ===== */
.wt{
  --wt-ease:var(--ease);
  --wt-bg:var(--bg);
  --wt-sf:var(--surface-1);
  --wt-sf2:var(--surface-2);
  --wt-acc:var(--yellow);
  --wt-on-acc:var(--cta-text);
  --wt-text:var(--text);
  --wt-t2:var(--muted);
  --wt-t3:var(--dim);
  /* textos de conformidade (legendas, notas de risco, avisos legais): o DS tem dois níveis de texto; o secundário
     #9E9E9E dá 7,4:1 sobre #0A0A0A e 6,8:1 sobre #141414 (era #7C7C7C, 4,6:1) */
  --wt-t3-aa:var(--muted);
  --wt-ph:#5a5a5a;
  --wt-l06:rgba(255,255,255,.06);
  --wt-l08:var(--line);
  --wt-l10:rgba(255,255,255,.1);
  --wt-l12:rgba(255,255,255,.12);
  --wt-l14:rgba(255,255,255,.14);
  --wt-green:var(--success);
  --wt-red:var(--danger);
  /* a mono do handoff não existe no site e o site não usa Google Fonts: mono do sistema */
  --wt-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  position:relative;overflow-x:clip;background:var(--wt-bg);color:var(--wt-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
}
/* o handoff mede como o navegador sem reset: content-box em tudo, border-box só nos botões (UA) e nos campos
   (explícito lá). O bundle.css põe border-box global; aqui volta ao do handoff para as medidas baterem. */
.wt *,.wt *::before,.wt *::after{box-sizing:content-box}
.wt button,.wt input{box-sizing:border-box}
.wt h1,.wt h2,.wt h3,.wt p,.wt ul,.wt ol,.wt dl,.wt dt,.wt dd,.wt figure,.wt pre,.wt fieldset,.wt legend{margin:0;padding:0;max-width:none;text-transform:none}
/* títulos sem o tamanho/peso globais do bundle.css e do v3.css; cada seção define os seus */
.wt h1,.wt h2,.wt h3{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.wt ul,.wt ol{list-style:none}
.wt fieldset{border:0;min-width:0}
.wt a{color:var(--wt-t2);text-decoration:none}
.wt a:hover{color:var(--wt-text)}
.wt button{font-family:inherit;margin:0}
.wt em{font-style:normal}
.wt img,.wt video{display:block;max-width:none}
/* line-height 1.32 = a altura de linha "normal" da mono do handoff (a mono do sistema dá ~1.19): ritmo vertical igual */
.wt .wt-mono{font-family:var(--wt-mono);line-height:1.32}
/* texto só para leitor de tela */
.wt .wt-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* foco por teclado nunca embaixo do header fixo (76px) */
.wt a,.wt button,.wt input{scroll-margin-top:calc(var(--header-h,76px) + 8px)}

/* seções: o #main vence as regras de dobra do v3.css ("main section" e "main section:not(#atributos):not(.hero)",
   que põem min-height, flex e padding em ≥1000px). Container (29/09): o do site, conteúdo até --page (1240px) com as
   margens --gut (aqui é content-box: max-width vale para o conteúdo). O hero (.hero) não é .wt-sec: vem de hero.css. */
#main .wt .wt-sec{position:relative;display:block;min-height:0;align-items:normal;max-width:var(--page);margin:0 auto;padding:0 var(--gut)}

/* ===== Núcleo: tipografia ===== */
/* títulos de seção no DS 2.0 (29/09, aprovado pelo Paulo): 500 e o em em 300, amarelo (antes 300, e 800 na S7 e na S10) */
.wt .wt-h2{text-align:center;font-size:clamp(44px,5.6vw,80px);line-height:1.02;letter-spacing:-.03em;font-weight:700}
.wt .wt-h2 em,.wt .wt-s5-h em,.wt .wt-s7-h em,.wt .wt-s10-h em{font-weight:700}
.wt .wt-eyebrow{font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--wt-t3)}
.wt .wt-note{font-size:12px;line-height:1.6;color:var(--wt-t3-aa)}
.wt .wt-cap{margin:8px 0 0;text-align:center;font-size:12px;color:var(--wt-t3-aa)}
.wt .wt-fine{font-size:13px;line-height:1.7;color:var(--wt-t3-aa);text-wrap:pretty}
/* <em> destacado: nasce branco e fica amarelo depois que o bloco entra (sem JS e com movimento reduzido: amarelo) */
.wt .wt-em{color:var(--wt-text);transition:color .5s .35s}
.wt .is-in .wt-em,.wt:not(.wt-js) .wt-em{color:var(--wt-acc)}

/* ===== Núcleo: botões = Button lg do DS 2.0 (29/09): 52px, raio 8, 500, 16px, sem caixa alta; primário amarelo
   (hover cta-hover), secundário com borda de 1px na cor do texto. Glow só no CTA do hero (hero.css). ===== */
.wt .wt-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 var(--space-6,24px);border-radius:var(--radius-md,8px);
  border:1px solid transparent;font-size:16px;font-weight:500;line-height:1;letter-spacing:0;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background-color 150ms var(--wt-ease),border-color 150ms var(--wt-ease),color 150ms var(--wt-ease)}
.wt .wt-btn--primary,.wt .wt-btn--primary:hover{background:var(--cta);border-color:var(--cta);color:var(--cta-text);font-weight:600}
.wt .wt-btn--primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.wt .wt-btn--secondary,.wt .wt-btn--secondary:hover{background:transparent;color:var(--wt-text);border-color:var(--wt-text)}
.wt .wt-btn--secondary:hover{background:rgba(255,255,255,.06)}

/* ===== Núcleo: estado com JS. Tudo o que esconde ou anima depende de .wt-js, que o próprio watch.js põe na raiz ao
   rodar (não do .js do <head>): se o watch.js não carregar ou falhar antes, a página fica no estado sem JS, legível. ===== */
/* ===== Núcleo: reveal (bloco sobe 24px com fade, uma vez; IntersectionObserver .15 no watch.js) ===== */
.wt.wt-js [data-wt-rv]{opacity:0;transform:translateY(24px);transition:opacity .6s var(--wt-ease),transform .6s var(--wt-ease)}
.wt.wt-js [data-wt-rv].is-in{opacity:1;transform:none}
/* revelado pelo foco de teclado: aparece na hora */
.wt.wt-js [data-wt-rv].wt-rv-now{transition:none}

/* ===== Núcleo: "ⓘ Avisos" / "ⓘ Condições" (sem JS o painel fica aberto) ===== */
.wt .wt-disc{position:relative;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--wt-t2);font-size:14px;line-height:normal;cursor:pointer}
.wt .wt-disc:hover{color:var(--wt-text)}
/* área de toque de 44px sem mexer no layout do handoff */
.wt .wt-disc::after{content:"";position:absolute;inset:-13px -10px}
.wt .wt-disc__i{width:16px;height:16px;border:1px solid var(--wt-t3);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1}
.wt.wt-js .wt-disc-panel:not(.is-open){display:none}

/* ===== Header, menu e rodapé: os do site, sem ajuste por página (item ativo é regra global do v3.css; o jurídico do
   rodapé passou a #9E9E9E no site todo com o DS 2.0), 29/09/2026 ===== */

/* ===== Movimento reduzido: estado final estático (o JS também põe .wt-rm na raiz, inclusive com ?rm=1) ===== */
@media (prefers-reduced-motion: reduce){
  .wt *,.wt *::before,.wt *::after{animation:none!important;transition:none!important}
  .wt.wt-js [data-wt-rv]{opacity:1;transform:none}
  .wt .wt-em{color:var(--wt-acc)}
  .wt.wt-js .wt-ruler__fill{width:100%!important}
  .wt.wt-js .wt-ruler__dot{opacity:1}
  .wt .wt-s1-video{visibility:hidden}
}
.wt.wt-rm *,.wt.wt-rm *::before,.wt.wt-rm *::after{animation:none!important;transition:none!important}
.wt.wt-js.wt-rm [data-wt-rv]{opacity:1;transform:none}
.wt.wt-rm .wt-em{color:var(--wt-acc)}
.wt.wt-js.wt-rm .wt-ruler__fill{width:100%!important}
.wt.wt-js.wt-rm .wt-ruler__dot{opacity:1}
.wt.wt-rm .wt-s1-video{visibility:hidden}

/* ===== S1 ===== */
/* S1 — HERO: o hero padrão do site (assets/hero.css, 29/09/2026), com o vídeo do satélite (loop de 8,25 s) como mídia
   (16:9 no desktop, 4:5 no celular, pela <source media>). Aqui só o que é do vídeo: com JS ele entra com fade quando
   começa a tocar ('playing', watch.js); até lá (ou se o autoplay for recusado) fica o pôster. Com movimento reduzido o
   vídeo some e fica o pôster (regras acima). */
.wt.wt-js .wt-s1-video{opacity:0;transition:opacity .9s var(--wt-ease)}
.wt.wt-js .wt-s1-video.is-playing{opacity:1}
/* Quadro do vídeo (desktop deitado): no quadro 16:9 o corpo do satélite começa a 57% da largura. Com o "cover" da mídia
   de 1336px ele caía atrás do fim do lead a 1440px, e nenhum object-position resolvia (a folga horizontal do cover é de
   264px). Aqui o quadro cresce, ancorado à esquerda, até o corpo do satélite começar ~20px depois do lead (560px
   centrado: metade da mídia + 280px), sem nunca ficar menor que o cover; o excesso à direita e embaixo é cortado pela
   mídia. W = max(cover, 87,7% da mídia + 526px), em unidades de contêiner (a .hero-media é o contêiner). Telas em pé
   ficam no cover centrado do hero.css. */
@media (min-width:760px) and (min-aspect-ratio:1/1){
  #main .wt .hero .hero-media{container-type:size}
  #main .wt .hero .hero-media .wt-s1-poster,#main .wt .hero .hero-media .wt-s1-video{right:auto;bottom:auto;
    width:max(100cqw,calc(87.7cqw + 526px),calc(100cqh * 16 / 9));height:auto;aspect-ratio:16/9;object-position:50% 50%}
}

/* ===== S2 ===== */
/* S2 — Intro, disclosure "Avisos" e régua do dia (preenchimento por rAF em 1800 ms no watch.js; sem JS, cheia) */
#main .wt .wt-s2{padding-top:140px;text-align:center}
.wt .wt-s2-intro{display:flex;flex-direction:column;align-items:center;gap:32px}
.wt .wt-s2-p{max-width:820px;font-size:clamp(20px,2.4vw,27px);line-height:1.45;font-weight:400;text-wrap:pretty}
.wt .wt-s2-panel{margin-top:-16px;max-width:700px}
.wt .wt-ruler{position:relative;max-width:920px;height:84px;margin:120px auto 0;text-align:left}
.wt .wt-ruler>div{position:absolute}
.wt .wt-ruler__base{left:0;right:0;top:40px;height:1px;background:var(--wt-l12)}
.wt .wt-ruler__minor{left:0;right:0;top:34px;height:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px calc(100% / 36))}
.wt .wt-ruler__major{left:0;right:0;top:28px;height:12px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px calc(100% / 9))}
.wt .wt-ruler__fill{left:0;top:39px;width:100%;height:3px;background:var(--wt-acc);box-shadow:0 0 18px color-mix(in srgb,var(--wt-acc) 55%,transparent)}
.wt.wt-js .wt-ruler__fill{width:0}
.wt .wt-ruler__dot{left:29.6%;top:34px;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--wt-acc);box-shadow:0 0 20px color-mix(in srgb,var(--wt-acc) 70%,transparent);transition:opacity .4s}
.wt.wt-js .wt-ruler__dot{opacity:0}
.wt.wt-js .wt-ruler__dot.is-on{opacity:1}
.wt .wt-ruler__meta{left:29.6%;top:0;transform:translateX(-50%);font-size:11px;letter-spacing:.08em;color:var(--wt-acc);white-space:nowrap}
.wt .wt-ruler__times{left:0;right:0;top:56px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em;color:var(--wt-t3)}

/* ===== S3 ===== */
/* S3 — barra de 3 itens (Plano do dia, Alertas, Insights), no padrão da barra de proposta de valor do trader (.tr-vp).
   Desde 14/10/2026 no lugar do carrossel de 4 abas (Plano do dia, Alertas, Margem e risco, DARF do mês), pedido do Paulo
   depois da revisão com Marcel e Guilherme: sem DARF nem margem, sem tom de acompanhamento em tempo real. Estático, sem JS.
   Celular: lista empilhada com o ícone à esquerda; desde 760px: 3 colunas com divisória vertical. */
#main .wt .wt-s3{padding-top:140px}
.wt .wt-s3-h{margin:0 0 56px}
.wt .wt-vp-list{max-width:var(--page);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);padding:8px 20px;background:var(--wt-sf);border:1px solid var(--wt-l08);border-radius:24px}
.wt .wt-vp-item{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"ico name" "ico txt";column-gap:16px;align-content:start;padding:18px 0}
.wt .wt-vp-item+.wt-vp-item{border-top:1px solid var(--wt-l08)}
.wt .wt-vp-ico{grid-area:ico;align-self:start;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--wt-sf2);border:1px solid var(--wt-l08);color:var(--wt-acc)}
.wt .wt-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wt .wt-vp-name{grid-area:name;align-self:center;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--wt-text);text-wrap:balance}
.wt .wt-vp-txt{grid-area:txt;margin-top:4px;font-size:14px;line-height:1.5;color:var(--wt-t2);text-wrap:pretty}
@media (min-width:760px){
  .wt .wt-vp-list{grid-template-columns:repeat(3,minmax(0,1fr));padding:0;border-radius:28px}
  .wt .wt-vp-item{--wt-vp-pt:clamp(24px,2.4vw,32px);--wt-vp-px:clamp(18px,1.9vw,28px);grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico ." "name name" "txt txt";padding:var(--wt-vp-pt) var(--wt-vp-px)}
  .wt .wt-vp-item+.wt-vp-item{border-top:0}
  .wt .wt-vp-item+.wt-vp-item::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:1px;background:var(--wt-l12);pointer-events:none}
  .wt .wt-vp-ico{width:44px;height:44px;border-radius:14px}
  .wt .wt-vp-ico .wt-ico{width:24px;height:24px}
  .wt .wt-vp-name{align-self:start;margin-top:20px;font-size:clamp(16px,1.25vw,18px)}
  .wt .wt-vp-txt{margin-top:6px;font-size:clamp(14px,.95vw,15px)}
}

/* ===== S4 ===== */
#main .wt .wt-s4{padding-top:160px}
.wt .wt-s4-h{margin:0 0 64px}
.wt .wt-s4-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:48px;max-width:960px;margin:0 auto}
.wt .wt-s4-col{border-top:1px solid var(--wt-l14);padding-top:28px}
.wt .wt-s4-t{margin:0 0 12px;font-size:24px;font-weight:600;letter-spacing:-.01em}
.wt .wt-s4-p{font-size:16px;line-height:1.65;color:var(--wt-t2);text-wrap:pretty}
.wt .wt-s4-note{margin-top:12px;font-size:12px;color:var(--wt-t3-aa)}

/* ===== S5 ===== */
/* S5 — Leitura semanal. Efeito de digitação (1 caractere por frame, ~16 ms) quando o bloco entra; cursor pisca e some
   2,5 s depois do fim. Sem JS: texto completo, sem cursor. */
@keyframes wtBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
#main .wt .wt-s5{padding-top:160px}
.wt .wt-s5-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:56px;align-items:center}
.wt .wt-s5-eyebrow{margin-bottom:20px}
.wt .wt-s5-h{margin:0 0 20px;font-size:clamp(44px,5.6vw,80px);line-height:1.02;letter-spacing:-.03em;font-weight:700}
.wt .wt-s5-p{font-size:17px;line-height:1.6;color:var(--wt-t2);text-wrap:pretty}
.wt .wt-s5-panel{background:var(--wt-sf);border:1px solid var(--wt-l08);border-radius:16px;padding:28px 28px 24px;min-height:360px}
.wt .wt-s5-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px;font-size:11px;letter-spacing:.08em;color:var(--wt-t3)}
.wt .wt-s5-pre{font-size:14px;line-height:1.75;color:#e6e6e6;white-space:pre-wrap;min-height:250px}
.wt .wt-s5-cursor{display:inline-block;width:8px;height:15px;background:var(--wt-acc);vertical-align:-2px}
.wt.wt-js .wt-s5-cursor{animation:wtBlink 1s steps(1) infinite}
.wt:not(.wt-js) .wt-s5-cursor{display:none}

/* ===== S6 ===== */
#main .wt .wt-s6{padding-top:160px}
.wt .wt-s6-line{position:relative;height:1px;margin:0 4px;background:var(--wt-l14)}
.wt .wt-s6-line span{position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--wt-t2)}
.wt .wt-s6-line span:nth-child(1){left:0}
.wt .wt-s6-line span:nth-child(2){left:25%}
.wt .wt-s6-line span:nth-child(3){left:50%}
.wt .wt-s6-line span:nth-child(4){left:75%}
.wt .wt-s6-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:32px;margin-top:40px}
.wt .wt-s6-n{font-size:64px;font-weight:200;color:var(--wt-acc);line-height:1;letter-spacing:-.02em}
.wt .wt-s6-t{font-size:20px;font-weight:500;margin-top:22px}
.wt .wt-s6-d{font-size:14px;line-height:1.6;color:var(--wt-t3);margin-top:8px}

/* ===== S7 ===== */
#main .wt .wt-s7{padding-top:160px;text-align:center}
.wt .wt-s7-wrap{display:flex;flex-direction:column;align-items:center;gap:24px}
.wt .wt-s7-h{font-size:clamp(44px,5.6vw,80px);line-height:1.02;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.wt .wt-s7-p{max-width:640px;font-size:17px;line-height:1.6;color:var(--wt-t2);text-wrap:pretty}
/* 14/10/2026: celular com a notificação do WhatsApp (PNG com fundo transparente) no lugar das bolhas; tamanho contido */
.wt .wt-s7-fig{margin:24px 0 0;width:280px;max-width:62vw;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.wt .wt-s7-img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}
@media (max-width:759.98px){.wt .wt-s7-fig{width:220px}}
.wt .wt-s7-cap{margin:0}

/* ===== S8 ===== */
#main .wt .wt-s8{padding-top:160px}
.wt .wt-s8-h{margin:0 0 64px}
.wt .wt-s8-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:40px}
.wt .wt-s8-item{border-top:1px solid var(--wt-l14);padding-top:28px}
.wt .wt-s8-n{font-size:44px;font-weight:200;color:var(--wt-acc);line-height:1}
.wt .wt-s8-t{font-size:20px;font-weight:600;margin-top:22px}
.wt .wt-s8-p{font-size:15px;line-height:1.6;color:var(--wt-t2);margin-top:8px}
.wt .wt-s8-foot{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:64px;text-align:center}
.wt .wt-s8-free{font-size:15px;color:var(--wt-t2)}
.wt .wt-s8-panel{margin-top:-8px;max-width:680px}

/* ===== S9 ===== */
/* S9 — FAQ. Um item aberto por vez (o 1º aberto); clicar no aberto fecha. O HTML traz todos abertos (legível sem JS);
   os marcados com data-wt-closed o JS fecha na partida. */
#main .wt .wt-s9{max-width:840px;padding-top:160px;padding-bottom:120px} /* 14/10/2026: o FAQ passou a ser a última dobra (a lista de espera subiu) */
.wt .wt-s9-h{margin:0 0 56px}
.wt .wt-s9-list{border-top:1px solid var(--wt-l10)}
.wt .wt-s9-item{border-bottom:1px solid var(--wt-l10)}
.wt .wt-s9-q{width:100%;background:none;border:0;padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--wt-text);font-size:18px;font-weight:600;line-height:normal;text-align:left;cursor:pointer}
.wt .wt-s9-ic{flex:none;font-size:24px;font-weight:300;line-height:1;color:var(--wt-t2)}
/* 29/09/2026 (GEO): o sinal (− aberto, + fechado) é conteúdo gerado a partir do aria-expanded do botão, fora do texto do
   h3; antes o watch.js escrevia o sinal no span e o título saía "Quanto custa?−" para robô e busca. O "/ ''" tira o
   sinal do nome acessível (o span já é aria-hidden; fica por garantia) */
.wt .wt-s9-ic::before{content:"\2212";content:"\2212" / ""}
.wt .wt-s9-q[aria-expanded="false"] .wt-s9-ic::before{content:"+";content:"+" / ""}
.wt .wt-s9-a p{margin:-8px 0 26px;max-width:680px;font-size:16px;line-height:1.65;color:var(--wt-t2);text-wrap:pretty}

/* ===== S10 ===== */
/* S10 — Formulário do beta. Sim/Ainda não são rádios e o aceite é um checkbox nativo (teclado e leitor de tela),
   com a aparência dos botões do handoff. Erros só no submit; somem ao editar o campo. */
#main .wt .wt-s10{padding-top:160px}
.wt .wt-s10-card{position:relative;border:1px solid var(--wt-l08);border-radius:24px;background:var(--wt-sf);overflow:hidden;padding:clamp(40px,6vw,80px) 24px}
.wt .wt-s10-glow{position:absolute;left:50%;bottom:-200px;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse,color-mix(in srgb,var(--wt-acc) 12%,transparent),transparent 65%);pointer-events:none}
.wt .wt-s10-inner{position:relative;max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
.wt .wt-s10-head{display:flex;flex-direction:column;align-items:center;gap:16px}
.wt .wt-s10-h{font-size:clamp(44px,5.6vw,80px);line-height:1.02;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.wt .wt-s10-sub{font-size:16px;line-height:1.6;color:var(--wt-t2)}
.wt .wt-form{width:100%;display:flex;flex-direction:column;gap:20px;text-align:left}
.wt .wt-form[hidden]{display:none}
.wt .wt-field{display:flex;flex-direction:column;gap:8px}
.wt .wt-label{font-size:12px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;color:var(--wt-t2)}
.wt .wt-input{width:100%;margin:0;background:var(--wt-bg);border:1px solid var(--wt-l14);border-radius:12px;padding:16px 18px;color:var(--wt-text);font-family:inherit;font-size:16px;line-height:normal;outline:none;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.wt .wt-input::placeholder{color:var(--wt-ph);opacity:1}
/* o handoff não tem estado de foco no campo; aqui a borda acende (foco visível) */
.wt .wt-input:focus{border-color:color-mix(in srgb,var(--wt-acc) 60%,transparent)}
.wt .wt-input[aria-invalid="true"]{border-color:var(--wt-red)}
.wt .wt-err{font-size:13px;color:var(--wt-red)}
/* "Já é cliente Itera?" — a legenda flutua para virar um bloco comum dentro do fieldset */
.wt .wt-field--set{display:block}
.wt .wt-field--set .wt-label{float:left;width:100%;margin-bottom:10px}
.wt .wt-tog{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wt .wt-field--set .wt-err{margin-top:10px}
.wt .wt-tog__o{position:relative;display:block;cursor:pointer}
.wt .wt-tog__in,.wt .wt-check__in{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.wt .wt-tog__b{display:block;padding:14px;border-radius:12px;border:1px solid var(--wt-l14);background:var(--wt-bg);color:var(--wt-text);font-size:15px;font-weight:600;line-height:normal;text-align:center;transition:background .3s,color .3s,border-color .3s}
.wt .wt-tog__in:checked+.wt-tog__b{background:var(--wt-acc);border-color:var(--wt-acc);color:var(--wt-on-acc)}
.wt .wt-tog.is-err .wt-tog__in:not(:checked)+.wt-tog__b{border-color:var(--wt-red)}
.wt .wt-tog__in:focus-visible+.wt-tog__b,.wt .wt-check__in:focus-visible+.wt-check__box{outline:2px solid var(--wt-acc);outline-offset:3px}
.wt .wt-check{position:relative;display:flex;gap:12px;align-items:flex-start;color:var(--wt-t2);font-size:14px;line-height:1.5;cursor:pointer}
/* área de toque de no mínimo 44px (o rótulo tem 42px em 2 linhas), sem mexer no layout */
.wt .wt-check::after{content:"";position:absolute;inset:-2px 0}
.wt .wt-check__box{flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1px solid var(--wt-l14);background:var(--wt-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--wt-on-acc);font-size:13px;font-weight:800;line-height:1;transition:background .3s,border-color .3s}
.wt .wt-check__in:checked+.wt-check__box{background:var(--wt-acc);border-color:var(--wt-acc)}
.wt .wt-check__in:checked+.wt-check__box::before{content:"✓"}
.wt .wt-check.is-err .wt-check__in:not(:checked)+.wt-check__box{border-color:var(--wt-red)}
.wt .wt-s10-submit{margin-top:8px;font-family:inherit;transition:opacity .3s,background-color 150ms var(--wt-ease)}
.wt .wt-s10-submit.is-sending{opacity:.6;cursor:progress}
/* a nota de risco da S10 fica sobre o brilho amarelo do card: o secundário do DS (#9E9E9E) passa de 4,5:1 ali */
.wt .wt-s10-note{text-align:center;color:var(--muted)}
.wt .wt-s10-ok{width:100%;display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 0}
.wt .wt-s10-ok[hidden]{display:none}
.wt .wt-s10-ok__c{width:56px;height:56px;border-radius:50%;background:var(--wt-acc);box-shadow:0 0 40px color-mix(in srgb,var(--wt-acc) 50%,transparent);display:flex;align-items:center;justify-content:center;color:var(--wt-on-acc);font-size:24px;font-weight:800}
.wt .wt-s10-ok__t{font-size:26px;font-weight:600;letter-spacing:-.01em;outline:none}
.wt .wt-s10-ok__p{max-width:400px;font-size:16px;line-height:1.6;color:var(--wt-t2)}
.wt .wt-s10-ok__ph{color:var(--wt-text);font-size:15px}
.wt .wt-s10-ok__a{margin-top:8px;font-size:15px;font-weight:600;color:var(--wt-text)}
.wt .wt-s10-ok__a:hover{color:var(--wt-acc)}

/* ===== Frase legal do Watch, logo acima do rodapé do site (no estilo do .legal do rodapé) ===== */
.wt .wt-legal{box-sizing:border-box;max-width:var(--page-outer);margin:0 auto;padding:0 var(--gut) 40px}
.wt .wt-legal p{max-width:110ch;font-size:var(--legal,11.5px);line-height:1.65;color:var(--wt-t3-aa)}
/* títulos de dobra = H1 do hero também no celular (29/09/2026) */
@media (max-width:759.98px){.wt .wt-h2,.wt .wt-s5-h,.wt .wt-s7-h,.wt .wt-s10-h{font-size:max(44px,11.5vw)}}