/* Site do Lero: layout, marca, conteudo e visualizer do Lero. So tema claro.
   (medidas de layout mantidas fora do deploy).
   Tokens em tokens.css, gerado do design/tokens.json por src/build.py. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--surface-100);color:var(--ink);font:400 16px/24px var(--font-sans);letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
[hidden]{display:none!important}
.pular{position:absolute;left:12px;top:-60px;z-index:60;padding:10px 16px;border-radius:9999px;background:var(--ink);color:#fff;font-size:14px;line-height:1}
.pular:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- moldura: faixa cinza no topo e a folha clara por cima, com os cantos de cima redondos ---------- */
.faixa{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;min-height:48px;padding:8px 16px;font-size:14px;line-height:18px;text-align:center}
.faixa .mini{width:22px;height:22px}
.faixa .btn{height:32px;padding:0 12px;font-size:13px;line-height:18px}
.folha{position:relative;background:var(--paper);border-radius:16px 16px 0 0}
.trilho{position:relative;width:100%;max-width:1178px;margin-inline:auto;padding-inline:12px;border-inline:1px solid var(--hairline)}
.pad{padding-inline:20px}
@media (max-width:1210px){.trilho{border-inline-color:transparent}}
@media (max-width:640px){.trilho{padding-inline:8px}.pad{padding-inline:12px}}

/* ---------- topo e barra que aparece ao rolar ---------- */
.topo .trilho{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;border-inline-color:transparent}
.marca{display:inline-flex;align-items:center;gap:10px;font:var(--fw-display) 28px/1 var(--font-display);letter-spacing:var(--ls-display)}
.marca .mini{width:24px;height:24px}
.acoes{display:flex;align-items:center;gap:8px}
.barra{position:fixed;inset:0 0 auto;z-index:20;background:rgba(253,252,252,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hairline);transform:translateY(-102%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.barra.on{transform:none}
.barra .trilho{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;border-inline-color:transparent}
.barra__nome{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:21px}
.barra__nome .mini{width:18px;height:18px}
@media (max-width:640px){.barra__nome span{display:none}.barra .btn--branco{display:none}.topo .btn--branco{display:none}}

/* ---------- botões (pílulas) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border:0;border-radius:9999px;font:500 14px/20px var(--font-sans);letter-spacing:0;white-space:nowrap;transition:background-color .2s,box-shadow .2s,color .2s}
.btn--preto{background:var(--ink);color:var(--on-ink)}
.btn--preto:hover{background:var(--ink-hover)}
.btn--branco{background:#fff;color:var(--ink);box-shadow:var(--edge)}
.btn--branco:hover{box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.08)}
.btn--vidro{background:rgba(255,255,255,.2);color:#fff}
.btn--vidro:hover{background:rgba(255,255,255,.3)}
.btn--m{height:40px;padding:0 16px;font-size:15px;line-height:22px}
.btn--g{height:44px;padding:0 20px;font-size:16px;line-height:24px}
.btn--heroi{height:46px;padding:0 20px;font:500 16px/1 var(--font-sans);letter-spacing:0}
.btn--bloco{width:100%}
.play{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;flex:none}
.play svg{width:11px;height:11px;margin-left:2px}
.bolha{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.14);transition:transform .2s}
.bolha:hover{transform:translate(-50%,-50%) scale(1.06)}
.bolha svg{width:12px;height:12px;margin-left:2px}

/* ---------- tipo ---------- */
.olho{font-size:13px;line-height:18px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rotulo{font-size:13px;line-height:18px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.t-h1{font:var(--fw-display) 52px/56px var(--font-display);letter-spacing:var(--ls-display);text-wrap:balance}
.t-h2{font:var(--fw-display) 34px/40px var(--font-display);letter-spacing:var(--ls-display);text-wrap:balance}
.t-h3{font:var(--fw-display) 36px/42px var(--font-display);letter-spacing:var(--ls-display)}
.t-h1 > span,.t-h2 > span{display:block;color:var(--faint)}
.lead{font-size:17px;line-height:26px;color:var(--ink-soft)}
.suave{color:var(--muted)}
.mini{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--surface-200) center/cover;flex:none}
@media (max-width:640px){.t-h1{font-size:40px;line-height:44px}.t-h2{font-size:28px;line-height:33px}.t-h3{font-size:30px;line-height:36px}}

/* ---------- orb (o visualizer) ---------- */
.orb{position:relative;width:100%;height:100%;border-radius:50%;clip-path:circle(50% at 50% 50%);isolation:isolate;background:center/cover}
.orb__gl,.orb__grao{position:absolute;inset:0}
.orb__grao{mix-blend-mode:overlay;opacity:.5;image-rendering:pixelated;background-size:256px;pointer-events:none}
.orb-casca{position:relative;aspect-ratio:1}
.orb-casca > .orb{position:absolute;inset:0}

/* ---------- seções e linhas com os pontos nos trilhos ---------- */
.secao > .trilho{padding-block:128px}
.secao--linha{border-top:1px solid var(--hairline)}
.secao--linha > .trilho::before,.secao--linha > .trilho::after{content:"";position:absolute;top:-3px;width:5px;height:5px;border-radius:50%;background:#c9c3bb}
.secao--linha > .trilho::before{left:-3px}
.secao--linha > .trilho::after{right:-3px}
@media (max-width:1210px){.secao--linha > .trilho::before,.secao--linha > .trilho::after{display:none}}
@media (max-width:760px){.secao > .trilho{padding-block:80px}}

/* ---------- herói ---------- */
.heroi .trilho{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;min-height:min(760px,calc(100svh - 120px));padding-block:48px}
.heroi__texto{max-width:580px}
.heroi__texto .t-h1{margin-top:10px}
.heroi__texto p.suave{margin-top:18px;max-width:400px;font-size:17px;line-height:26px}
.heroi__texto .btn{margin-top:32px}
.heroi__arte{position:relative;width:100%;max-width:560px;aspect-ratio:1;justify-self:center;display:grid;place-items:center}
.heroi__arte .orb-casca{width:90%}
.pilula-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;height:64px;padding:0 32px 0 14px;border:0;border-radius:9999px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.1);font:500 22px/22px var(--font-sans);letter-spacing:-.01em;white-space:nowrap;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.pilula-play:hover{transform:translate(-50%,-50%) scale(1.03)}
@media (max-width:900px){.heroi .trilho{grid-template-columns:1fr;min-height:0;padding-block:32px 72px}.heroi__arte{max-width:440px;grid-row:1}.pilula-play{height:52px;gap:12px;padding-right:22px;font-size:17px}}

/* ---------- cabeça de seção, recursos e bento ---------- */
.cabeca{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:52px;row-gap:16px;align-items:start}
.cabeca > .rotulo{grid-column:1/-1;margin-bottom:8px}
.cabeca .btn{margin-top:28px}
.cabeca--centro{grid-template-columns:1fr;justify-items:center;text-align:center}
.t-h2--escada > span{display:block}
.t-h2--escada > span:first-child{padding-right:64px;color:var(--ink)}
.t-h2--escada > span:last-child{padding-left:64px;color:var(--faint)}
@media (max-width:760px){.cabeca{grid-template-columns:1fr}.t-h2--escada > span{padding:0!important}}
.recursos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:52px;row-gap:48px;margin-top:72px}
.recursos--topo{margin-top:0}
.recursos > h2{grid-row:span 2;font-size:20px;line-height:27px;font-weight:500;max-width:15em}
.recurso h3{font-size:18px;line-height:26px;font-weight:500}
.recurso p{margin-top:12px;font-size:15px;line-height:22px;color:var(--muted)}
.recurso code,.cartao code{font-family:var(--font-mono);font-size:.9em;color:var(--ink-soft)}
@media (max-width:900px){.recursos{grid-template-columns:1fr 1fr}.recursos > h2{grid-column:1/-1;grid-row:auto}}
@media (max-width:560px){.recursos{grid-template-columns:1fr;row-gap:32px}}
.bento{display:grid;grid-template-columns:minmax(0,764fr) minmax(0,376fr);gap:12px;margin-top:40px}
.bento--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cartao{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:16px;background:var(--surface-100);overflow:hidden}
.cartao__midia{position:relative;flex:1;display:grid;place-items:center;min-height:300px}
.cartao__texto{position:relative;padding:16px 20px 28px}
.cartao__texto h3{font-size:16px;line-height:24px;font-weight:500}
.cartao__texto p{margin-top:8px;font-size:15px;line-height:22px;color:var(--muted)}
.cartao--centro .cartao__texto{text-align:center;padding-inline:28px}
.bento--3 .cartao__midia{aspect-ratio:1;min-height:0;flex:none}
@media (max-width:900px){.bento,.bento--3{grid-template-columns:1fr}}

/* carrossel de vozes no cartão do orb */
.carrossel{width:min(232px,62%)}
.seta{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--muted)}
.seta:hover{color:var(--ink);background:rgba(0,0,0,.04)}
.seta svg{width:14px;height:14px}
.seta--ant{left:10px}
.seta--prox{right:10px}
.voz-nome{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13px;line-height:18px;color:var(--muted)}

/* o estúdio de mentira (decorativo) no cartão grande */
.cartao--estudio{min-height:474px}
.estudio-fundo{position:absolute;inset:0;background:center/cover;transform:scale(1.15)}
.estudio{position:absolute;left:36px;top:36px;right:-1px;bottom:-1px;display:grid;grid-template-columns:40px minmax(0,1fr) 200px;background:#fff;border-radius:12px 0 0 0;box-shadow:0 2px 8px rgba(0,0,0,.06),0 20px 50px rgba(0,0,0,.14);font-size:11px;line-height:17px;letter-spacing:0;overflow:hidden}
.estudio__icones{display:flex;flex-direction:column;align-items:center;gap:13px;padding-top:16px;border-right:1px solid var(--hairline)}
.estudio__icones i{width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1.2px #b9b3ab}
.estudio__icones i:nth-child(3n){border-radius:50%}
.estudio__icones i.on{box-shadow:inset 0 0 0 1.2px var(--ink)}
.estudio__roteiro{padding:20px 24px;display:flex;flex-direction:column;gap:16px;min-width:0}
.locutor{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10.5px}
.locutor .mini{width:12px;height:12px}
.estudio__roteiro p{margin-top:5px;color:#2b2926}
.tag{color:var(--orange)}
.estudio__add{align-self:center;margin-top:2px;color:var(--muted);font-size:10.5px}
.estudio__painel{border-left:1px solid var(--hairline);padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.abas-mini{display:flex;gap:12px;font-size:10.5px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--hairline)}
.abas-mini b{font-weight:400;color:var(--ink)}
.campo-mini span{display:block;color:var(--muted);font-size:10px}
.campo-mini div{display:flex;align-items:center;gap:6px;margin-top:4px;padding:5px 8px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--hairline);color:var(--ink);white-space:nowrap;overflow:hidden}
.regua{position:relative;height:2px;margin-top:9px;border-radius:2px;background:var(--surface-200)}
.regua::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--ink);border-radius:inherit}
.regua::after{content:"";position:absolute;top:50%;left:var(--v);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ink)}
@media (max-width:640px){.estudio{grid-template-columns:minmax(0,1fr);left:16px;top:16px}.estudio__icones,.estudio__painel{display:none}}

/* barras de preço (no lugar do gráfico de latência) */
.barras{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:40px 40px 24px}
.barra-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:28px;row-gap:8px}
.barra-linha span{font-size:13px;line-height:18px;color:var(--muted)}
.barra-linha strong{grid-row:span 2;grid-column:2;font:500 28px/32px var(--font-sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--muted)}
.barra-linha i{display:block;height:6px;border-radius:3px;background:rgba(0,0,0,.05)}
.barra-linha i b{display:block;height:100%;width:var(--w);border-radius:inherit;background:#d6d0c8;transform-origin:left;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.barra-linha--lero span{color:var(--ink)}
.barra-linha--lero strong{color:var(--ink)}
.barra-linha--lero i b{background:var(--orange)}
.barras:not(.on) i b{transform:scaleX(0)}
.barras__nota{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;line-height:16px;color:var(--faint)}
.ligar{position:absolute;left:calc(50% + 62px);top:calc(50% + 70px);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 0 0 4px var(--surface-100)}
.ligar svg{width:15px;height:15px}

/* emoção em cada frase */
.emocao{display:flex;align-items:center;justify-content:center;gap:48px 72px}
.emocao__texto{max-width:404px}
.emocao__texto p{margin-top:16px;font-size:15px;line-height:22px;color:var(--muted)}
.emocao__texto .btn{margin-top:24px}
.emocao .orb-casca{width:248px;flex:none}
@media (max-width:760px){.emocao{flex-direction:column-reverse;text-align:center}}

/* ---------- faixa escura das vozes ---------- */
.noite{position:relative;background:var(--night);color:var(--night-ink);overflow:hidden}
.noite__palco{position:relative;max-width:1440px;min-height:772px;margin-inline:auto;display:grid;place-items:center;padding:88px 16px}
.noite__centro{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:320px}
.noite__rotulo{font-size:15px;line-height:22px;color:var(--faint)}
.noite__lista{display:flex;flex-direction:column;align-items:center;margin-top:14px}
.noite__lista button{border:0;background:none;padding:3px 8px;border-radius:8px;font:var(--fw-display) 24px/32px var(--font-display);letter-spacing:var(--ls-display);color:var(--muted);transition:color .25s}
.noite__lista button:hover{color:#d6d1ca}
.noite__lista button[aria-pressed="true"]{color:#fff}
.noite__desc{margin-top:52px;min-height:54px;font-size:13px;line-height:18px;color:var(--faint)}
.noite__desc b{font-weight:400;color:#fff}
.noite__acoes{display:flex;gap:8px;margin-top:18px}
.voz-cartao{position:absolute;padding:0;border:0;border-radius:6px;overflow:hidden;background:#2a2522 center/cover;box-shadow:0 24px 60px rgba(0,0,0,.4);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.voz-cartao:hover{transform:translateY(-6px)}
.voz-cartao__nome{position:absolute;left:12px;bottom:10px;font-size:13px;line-height:18px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.voz-cartao--1{left:6.8%;top:40px;width:256px;height:306px;background-position:20% 30%}
.voz-cartao--2{left:69.9%;top:56px;width:188px;height:236px;background-position:70% 20%}
.voz-cartao--3{left:16.8%;top:420px;width:210px;height:280px;background-position:40% 80%}
.voz-cartao--4{left:75.1%;top:330px;width:254px;height:340px;background-position:80% 60%}
@media (max-width:1100px){.voz-cartao--1,.voz-cartao--3{left:3%}.voz-cartao--2,.voz-cartao--4{left:auto;right:3%}}
@media (max-width:860px){.noite__palco{min-height:0;padding-block:64px 300px}.voz-cartao{top:auto!important;bottom:40px;width:28%!important;height:200px!important}.voz-cartao--1{left:4%}.voz-cartao--2{left:auto;right:4%}.voz-cartao--3{left:36%}.voz-cartao--4{display:none}}

/* ---------- frases (carrossel) ---------- */
.frases{display:flex;flex-direction:column;align-items:center;text-align:center}
.frases blockquote{max-width:724px;min-height:102px;font:var(--fw-display) 26px/34px var(--font-display);letter-spacing:var(--ls-display);text-wrap:balance;transition:opacity .35s}
.frases figcaption{margin-top:20px;font-size:14px;line-height:21px;color:var(--muted)}
.frases__ctrl{display:flex;align-items:center;gap:14px;margin-top:72px}
.frases__ctrl .seta{position:static;transform:none}
.pontos{display:flex;gap:4px}
.pontos button{width:6px;height:2px;padding:0;border:0;border-radius:1px;background:#d4cfc8;transition:width .3s,background-color .3s}
.pontos button[aria-current="true"]{width:20px;background:var(--ink)}

/* ---------- ajuste (voice clone, superflow, pronúncia) ---------- */
.clone{position:absolute;inset:0;background:center/cover;transition:filter .5s}
.clone.clonada{filter:hue-rotate(-14deg) saturate(1.15)}
.alterna{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;padding:3px;border-radius:9999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.alterna button{height:30px;padding:0 14px;border:0;border-radius:9999px;background:none;font-size:13px;color:var(--muted)}
.alterna button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--edge)}
.ditado{padding:28px;font-size:22px;line-height:30px;letter-spacing:-.01em;text-align:left;align-self:start;justify-self:start}
.ditado mark{background:none;color:var(--orange)}
.ditado .mini{width:20px;height:20px;vertical-align:-3px;margin:0 2px}
.ditado__rodape{position:absolute;left:28px;right:20px;bottom:16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;line-height:16px;color:var(--faint)}
.pronuncia{align-self:stretch;justify-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:16px 20px}
.pronuncia li{display:grid;grid-template-columns:auto 14px minmax(0,1fr) 28px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:15px;line-height:20px}
.pronuncia li:last-child{border-bottom:0}
.pronuncia span:nth-child(3){color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pronuncia svg.flecha{width:14px;height:14px;color:var(--faint)}
.pronuncia button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--ink)}
.pronuncia button:hover{background:rgba(0,0,0,.05)}
.pronuncia button svg{width:10px;height:10px}

/* ---------- planos ---------- */
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:56px}
.plano{position:relative;display:flex;flex-direction:column;padding:24px 20px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.03)}
.plano--destaque{box-shadow:inset 0 0 0 1px rgba(228,89,51,.45),0 22px 34px -22px rgba(228,89,51,.65)}
.plano--destaque::after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.plano h3{font-size:20px;line-height:27px;font-weight:500}
.plano__preco{margin-top:2px;font-size:16px;line-height:24px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.plano__preco small{font-size:13px}
.plano .btn{margin-top:20px}
.plano__inclui{margin-top:28px;font-size:13px;line-height:18px;color:var(--muted)}
.plano ul{display:grid;gap:6px;margin-top:10px}
.plano li{display:flex;gap:8px;font-size:14px;line-height:21px}
.plano li svg{width:14px;height:14px;margin-top:3.5px;flex:none}
.planos__nota{margin-top:28px;text-align:center;font-size:14px;line-height:21px;color:var(--muted)}
.planos__nota a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:900px){.planos{grid-template-columns:1fr}}

/* ---------- API ---------- */
.api{display:grid;grid-template-columns:minmax(0,376fr) minmax(0,776fr);min-height:484px;margin-top:40px;border-radius:16px;background:var(--surface-100);overflow:hidden}
.api__texto{display:flex;flex-direction:column;padding:28px 20px 20px}
.api__texto h3{font-size:16px;line-height:24px;font-weight:500}
.api__texto p{margin-top:8px;font-size:15px;line-height:22px;color:var(--muted)}
.api__texto ul{display:grid;gap:10px;margin-top:24px}
.api__texto li{display:flex;gap:8px;font-size:14px;line-height:21px;color:var(--muted)}
.api__texto li svg{width:14px;height:14px;margin-top:3.5px;flex:none;color:var(--ink)}
.api__texto .btn{margin-top:auto;align-self:flex-start}
.api__arte{position:relative;display:grid;place-items:center;padding:40px;background:var(--night);overflow:hidden}
.api__fundo{position:absolute;inset:-10%;background:center/cover;filter:blur(24px) brightness(.5) saturate(.9)}
.codigo{position:relative;width:min(540px,100%);margin:0;padding:20px 22px;border-radius:12px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.45);font:400 12.5px/20px var(--font-mono);letter-spacing:0;color:#2b2926;overflow-x:auto;white-space:pre}
.codigo .c{color:var(--faint)}
.codigo .k{color:var(--red)}
.codigo .s{color:var(--blue)}
.codigo__selo{position:absolute;top:12px;right:12px;padding:2px 8px;border-radius:9999px;background:var(--surface-100);font:500 10px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.api{grid-template-columns:1fr}.api__arte{min-height:300px;padding:24px 16px}}

/* ---------- perguntas ---------- */
.faq{display:grid;grid-template-columns:minmax(0,376fr) minmax(0,724fr);column-gap:52px;row-gap:24px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;font-size:17px;line-height:25px;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:14px;height:14px;flex:none;color:var(--muted);transition:transform .25s}
.faq details{border-bottom:1px solid var(--hairline)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 40px 22px 0;font-size:15px;line-height:22px;color:var(--muted)}
@media (max-width:900px){.faq{grid-template-columns:1fr}}

/* ---------- chamada final e rodapé ---------- */
.chamada{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.chamada .trilho{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding-block:72px}
.chamada p{font:var(--fw-display) 32px/38px var(--font-display);letter-spacing:var(--ls-display)}
.rodape .trilho{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px 24px;padding-block:64px 40px}
.rodape h2{font-size:14px;line-height:21px;font-weight:500;color:var(--muted)}
.rodape ul{display:grid;gap:2px;margin-top:10px}
.rodape li a{display:inline-block;padding:4px 0;font-size:14px;line-height:21px;font-weight:500}
.rodape li a:hover{color:var(--muted)}
.idioma{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;line-height:21px;color:var(--muted)}
.rodape__base{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--hairline);font-size:13px;line-height:18px;color:var(--muted)}
@media (max-width:760px){.rodape .trilho{grid-template-columns:1fr 1fr}.rodape .trilho > div:first-child{grid-column:1/-1}.chamada p{font-size:26px;line-height:30px}}

/* ---------- conversa flutuante, aviso e a lista do beta ---------- */
.conversa{position:fixed;right:16px;bottom:16px;z-index:30;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 10px;border:0;border-radius:9999px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 6px 20px rgba(0,0,0,.1);font-size:16px;line-height:24px}
.conversa .mini{width:32px;height:32px}
.aviso{position:fixed;left:50%;bottom:84px;z-index:50;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;line-height:20px;opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .25s,transform .25s}
.aviso.on{opacity:1;transform:translate(-50%,0)}
.lista{width:min(480px,calc(100vw - 32px));padding:28px;border:0;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.25)}
.lista::backdrop{background:rgba(28,25,23,.4)}
.lista h2{padding-right:40px;font:var(--fw-display) 28px/33px var(--font-display);letter-spacing:var(--ls-display)}
.lista p{margin-top:8px;font-size:15px;line-height:22px;color:var(--muted)}
.lista input[type="email"]{width:100%;height:44px;margin-top:20px;padding:0 18px;border:0;border-radius:9999px;background:var(--surface-100);font-size:16px}
.interesses{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;border:0}
.interesses legend{margin-bottom:8px;padding:0;font-size:13px;line-height:18px;color:var(--muted)}
.interesses label{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:9999px;background:var(--surface-100);font-size:13px;cursor:pointer;transition:background-color .2s,color .2s}
.interesses label:has(input:checked){background:var(--ink);color:#fff}
.interesses label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.interesses input{position:absolute;opacity:0;pointer-events:none}
.lista__acoes{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
.lista__msg{margin-top:14px;font-size:14px;line-height:20px}
.fechar{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--surface-100)}
.fechar svg{width:12px;height:12px}

/* ================= página de emoções (o layout do /pt/emotional-range) ================= */
.emo-pagina{background:#fff;overflow:hidden}
.emo{position:relative;height:100svh;min-height:620px;overflow:hidden}
.emo__topo{position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0}
.emo__sotaque{display:flex;align-items:center;gap:10px;font-size:13px;line-height:18px;color:rgba(0,0,0,.6)}
.seletor{height:32px;padding:0 30px 0 12px;border:0;border-radius:9999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%230c0a09' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/11px;box-shadow:var(--edge);font-size:14px;line-height:18px;color:#0c0a09;appearance:none;-webkit-appearance:none;cursor:pointer}
.emo__orb{position:absolute;left:12.6%;top:47%;z-index:3;width:min(374px,30vw,50svh);transform:translateY(-50%)}
.emo__orb .bolha{opacity:0;transition:opacity .25s}
.emo__orb:hover .bolha,.emo__orb .bolha:focus-visible{opacity:1}
.emo__texto{position:absolute;left:28px;bottom:28px;z-index:4;width:min(345px,calc(100% - 56px))}
.emo__texto h1{font-size:20px;line-height:27px;font-weight:400;letter-spacing:-.01em}
.emo__texto h1 span{display:block;color:rgba(0,0,0,.4)}
.emo__texto p{margin-top:16px;font-size:13px;line-height:18px;color:rgba(0,0,0,.6)}
.emo__acoes{display:flex;gap:8px;margin-top:20px}
.emo__frase{display:none}
.emo__nota{position:absolute;right:16px;bottom:16px;z-index:4;font-size:12px;line-height:16px;color:rgba(0,0,0,.45)}
.roda{position:absolute;inset:0;z-index:2;overflow:hidden;touch-action:none;cursor:grab;outline:none;-webkit-user-select:none;user-select:none}
.roda.arrastando{cursor:grabbing}
.roda__item{position:absolute;top:0;left:0;display:flex;align-items:center;height:40px;margin-top:-20px;transform-origin:0 50%;white-space:nowrap;font:var(--fw-display) 28px/1 var(--font-display);letter-spacing:var(--ls-display);color:#1c1917;will-change:transform,opacity}
.roda__nome{position:relative}
.roda__nome::before,.roda__nome::after{position:absolute;top:0;color:var(--orange);opacity:0;transition:opacity .2s}
.roda__nome::before{content:"[";right:calc(100% + 16px)}
.roda__nome::after{content:"]";left:calc(100% + 16px)}
.roda__frase{margin-left:44px;color:#c9c3bb;opacity:0;transition:opacity .3s}
.roda__item.sel .roda__nome{color:var(--orange)}
.roda__item.sel .roda__nome::before,.roda__item.sel .roda__nome::after,.roda__item.sel .roda__frase{opacity:1}
.roda:focus-visible .roda__item.sel .roda__nome{outline:2px solid var(--blue);outline-offset:6px;border-radius:4px}
@media (max-width:760px){
  .emo__orb{left:50%;top:76px;width:180px;transform:translateX(-50%)}
  .roda__item{font-size:22px;height:32px;margin-top:-16px}
  .roda__frase{display:none}
  .emo__texto .emo__frase{display:block;margin:0 0 14px;font:var(--fw-display) 20px/26px var(--font-display);color:var(--orange);min-height:52px}
  .emo__sotaque label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .emo__nota{display:none}
}
/* intro: "Como você está se sentindo?" com a roda reta */
.intro{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;transition:opacity .7s cubic-bezier(.22,1,.36,1),visibility .7s}
.intro.sai{opacity:0;visibility:hidden}
.intro__pergunta{font-size:14px;line-height:21px;color:#555}
.intro__lista{position:relative;width:min(560px,92vw);height:156px;margin-top:10px;overflow:hidden;touch-action:none;cursor:grab;outline:none;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(transparent,#000 26%,#000 74%,transparent);mask-image:linear-gradient(transparent,#000 26%,#000 74%,transparent)}
.intro__item{position:absolute;left:0;right:0;top:50%;height:52px;margin-top:-26px;display:flex;align-items:center;justify-content:center;font:var(--fw-display) 29px/1 var(--font-display);letter-spacing:var(--ls-display);color:rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.22,1,.36,1),color .3s;cursor:pointer}
.intro__item .roda__nome::before{right:calc(100% + 28px)}
.intro__item .roda__nome::after{left:calc(100% + 28px)}
.intro__item.sel .roda__nome{color:var(--orange)}
.intro__item.sel .roda__nome::before,.intro__item.sel .roda__nome::after{opacity:1}
.intro__lista:focus-visible .intro__item.sel .roda__nome{outline:2px solid var(--blue);outline-offset:6px;border-radius:4px}
.intro__dica{display:flex;align-items:center;gap:8px;margin-top:26px;font-size:14px;line-height:21px;color:#999}
.tecla{display:inline-grid;place-items:center;width:18px;height:22px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);font-size:11px;line-height:1;color:#777}
.intro__pular{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);padding:4px 12px;border:0;border-radius:9999px;background:none;font:500 14px/28px var(--font-sans);color:var(--muted)}
.intro__pular:hover{background:var(--surface-100)}