/* 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 .wt-s3-card[data-wt-rv]{transition-duration:.7s}
.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 — Carrossel. 4 painéis empilhados na mesma célula (crossfade .7s); abas com auto-avanço de 6s no watch.js.
   Sem JS: os 4 painéis e as 4 descrições aparecem em sequência e a linha de abas sai. */
#main .wt .wt-s3{padding-top:140px}
.wt .wt-s3-h{margin:0 0 56px}
.wt .wt-s3-card{border:1px solid var(--wt-l08);border-radius:16px;background:var(--wt-sf);overflow:hidden}
.wt .wt-s3-bar{padding:16px 24px;border-bottom:1px solid var(--wt-l08);font-size:13px;color:var(--wt-t2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wt .wt-s3-read{font-size:12px;color:var(--wt-t3)}
/* coluna minmax(0,1fr): o min-content de um painel (DARF no celular) não alarga a célula */
.wt .wt-s3-panels{display:grid;grid-template-columns:minmax(0,1fr);min-height:380px}
.wt .wt-s3-panel{grid-area:1/1;padding:40px 24px;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .7s var(--wt-ease)}
.wt .wt-s3-panel.is-on{opacity:1;pointer-events:auto}
.wt .wt-s3-box{width:100%;max-width:560px;background:var(--wt-bg);border:1px solid var(--wt-l10);border-radius:14px}
/* 1 · Plano do dia */
.wt .wt-s3-plan{overflow:hidden;box-sizing:border-box;max-width:562px}
.wt .wt-s3-plan__head{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--wt-l08)}
.wt .wt-s3-plan__t{font-size:17px;font-weight:600}
.wt .wt-s3-plan__d{font-size:11px;color:var(--wt-t3)}
.wt .wt-s3-plan__grid{display:grid;grid-template-columns:1fr auto;font-size:14px}
.wt .wt-s3-plan__grid dt,.wt .wt-s3-plan__grid dd{padding:14px 22px;border-bottom:1px solid var(--wt-l06)}
.wt .wt-s3-plan__grid dt{color:var(--wt-t3);font-size:11px;letter-spacing:.12em}
.wt .wt-s3-plan__grid dd{text-align:right}
.wt .wt-s3-plan__grid dt:last-of-type,.wt .wt-s3-plan__grid dd:last-of-type{border-bottom:0}
.wt .wt-s3-plan__grid dd.wt-mono{font-size:13px}
/* 2 · Alertas */
.wt .wt-s3-alerts{width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}
.wt .wt-s3-alert{background:var(--wt-bg);border:1px solid var(--wt-l10);border-radius:14px;padding:18px 22px;display:flex;gap:16px;align-items:flex-start}
.wt .wt-s3-alert--on{border-color:color-mix(in srgb,var(--wt-acc) 35%,transparent)}
.wt .wt-s3-alert__dot{width:10px;height:10px;border-radius:50%;background:var(--wt-t3);margin-top:6px;flex:none}
.wt .wt-s3-alert--on .wt-s3-alert__dot{background:var(--wt-acc);box-shadow:0 0 12px color-mix(in srgb,var(--wt-acc) 70%,transparent)}
.wt .wt-s3-alert__txt{flex:1}
.wt .wt-s3-alert__t{font-size:16px;font-weight:600}
.wt .wt-s3-alert__c{font-size:13px;color:var(--wt-t3);margin-top:4px}
.wt .wt-s3-alert__h{font-size:12px;color:var(--wt-t3)}
/* 3 · Margem e risco */
.wt .wt-s3-bars{box-sizing:border-box;max-width:610px;padding:26px 24px;display:flex;flex-direction:column;gap:26px}
.wt .wt-s3-bars__row{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:var(--wt-t3);margin-bottom:10px}
.wt .wt-s3-bars__v{color:var(--wt-text)}
.wt .wt-s3-bars__track{height:6px;border-radius:3px;background:var(--wt-l08);overflow:hidden}
.wt .wt-s3-bars__fill{display:block;height:100%}
.wt .wt-s3-bars__fill--y{width:70%;background:var(--wt-acc)}
.wt .wt-s3-bars__fill--g{width:42%;background:var(--wt-t2)}
.wt .wt-s3-bars__fill--v{width:58%;background:var(--wt-green)}
/* 4 · DARF do mês */
.wt .wt-s3-darf{box-sizing:border-box;max-width:610px;padding:26px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:24px}
.wt .wt-s3-darf__k{font-size:11px;letter-spacing:.12em;color:var(--wt-t3)}
.wt .wt-s3-darf__v{font-size:30px;font-weight:600;margin-top:8px}
.wt .wt-s3-darf__v--pos{color:var(--wt-green)}
.wt .wt-s3-darf__v--mono{font-size:24px}
/* abas e setas */
.wt .wt-s3-ctl{max-width:920px;margin:32px auto 0;display:flex;align-items:center;gap:20px}
.wt .wt-s3-arr{flex:none;width:44px;height:44px;padding:0;border-radius:50%;background:none;border:1px solid var(--wt-l14);color:var(--wt-text);font-size:18px;line-height:normal;cursor:pointer}
.wt .wt-s3-arr:hover{border-color:rgba(255,255,255,.3)}
.wt .wt-s3-tabs{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wt .wt-s3-tab{background:none;border:0;border-bottom:1px solid var(--wt-l12);color:var(--wt-t3);font-size:15px;font-weight:500;line-height:normal;padding:0 0 14px;text-align:left;cursor:pointer;transition:color .3s,border-color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt .wt-s3-tab:hover{color:var(--wt-t2)}
.wt .wt-s3-tab[aria-selected="true"]{color:var(--wt-text);border-bottom-color:var(--wt-text)}
/* descrição da aba ativa: as 4 empilhadas na mesma célula (a altura não pula entre abas) */
.wt .wt-s3-say{display:grid;max-width:620px;margin:32px auto 0;text-align:center}
.wt .wt-s3-say__i{grid-area:1/1;font-size:17px;line-height:1.6;color:var(--wt-t2);text-wrap:pretty;visibility:hidden}
.wt .wt-s3-say__i.is-on{visibility:visible}
@media (max-width:759.98px){
  /* 4 abas em 1 linha não cabem no celular (o handoff corta com reticências): abas em 2 × 2 na largura toda e as
     setas numa linha própria, centradas, embaixo delas */
  .wt .wt-s3-ctl{flex-wrap:wrap;justify-content:center;row-gap:20px}
  .wt .wt-s3-tabs{order:-1;flex:1 1 100%;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px}
}
/* toque: abas com 44px de altura (o espaço a mais fica em cima do rótulo; a linha de baixo não muda) */
@media (max-width:759.98px),(pointer:coarse){
  .wt .wt-s3-tab{min-height:44px;padding-top:8px}
}
.wt:not(.wt-js) .wt-s3-panels{display:block}
.wt:not(.wt-js) .wt-s3-panel{opacity:1;pointer-events:auto}
.wt:not(.wt-js) .wt-s3-panel+.wt-s3-panel{border-top:1px solid var(--wt-l08)}
.wt:not(.wt-js) .wt-s3-ttl,.wt:not(.wt-js) .wt-s3-ctl{display:none}
.wt:not(.wt-js) .wt-s3-say{display:flex;flex-direction:column;gap:16px}
.wt:not(.wt-js) .wt-s3-say__i{visibility:visible}

/* ===== 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}
.wt .wt-s7-chat{box-sizing:border-box;width:100%;max-width:462px;margin-top:24px;background:var(--wt-sf);border:1px solid var(--wt-l08);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:10px;text-align:left}
.wt .wt-s7-b{align-self:flex-start;max-width:88%;background:var(--wt-sf2);border:1px solid var(--wt-l08);border-radius:14px 14px 14px 4px;padding:12px 14px;font-size:14px;line-height:1.5}
.wt .wt-s7-b--on{border-color:color-mix(in srgb,var(--wt-acc) 40%,transparent)}
.wt .wt-s7-h8{display:block;margin-top:6px;font-size:10px;line-height:1.5;color:var(--wt-t3);text-align:right}
.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}
.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;padding-bottom:120px}
.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)}}