/* Kamura Digital — site (versão 4, 08/10/2026).
   O dono achou a v3 "com cara de IA, sem identidade" e apontou wama.com.br e o Muse como régua.
   O que mudou por causa disso, e por quê:
   - preto e branco puros, sem cinza pontilhado; a cor da página vem do TRABALHO REAL (capturas dos sites
     e produtos feitos pela casa), não de enfeite;
   - uma letra só, Host Grotesk, em peso normal e grande (nada de título em negrito apertado);
   - cantos retos, fio fino e grade de revista; nada de cartão branco arredondado com sombra;
   - nenhuma tela de mentira: onde não há captura real, o bloco é só cor e palavra;
   - o azul é o do cursor do logo e aparece em três lugares: o cursor, uma palavra por título, a chamada final. */

@font-face { font-family: 'Host Grotesk'; src: url('../fonts/HostGrotesk.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }

:root {
  --branco: #fff;
  --preto: #000;
  --cinza: #6b6b6b;          /* texto secundário */
  --apagado: #a6a6a6;
  --fio: #e6e6e6;
  --chao: #f4f4f4;           /* painel neutro atrás das peças */
  --azul: #1f5eff;
  --azul-escuro: #5a8bff;    /* o mesmo azul, pra ler em cima do preto */

  --letra: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --largura: 1400px;
  --borda: clamp(18px, 5.4vw, 98px);
  --secao: clamp(88px, 11vw, 170px);
  --suave: cubic-bezier(.2, .8, .2, 1);
  --mola: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--branco); color: var(--preto); font: 400 18px/1.5 var(--letra); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
i { font-style: normal; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.escuro :focus-visible, .azulado :focus-visible { outline-color: #fff; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--preto); color: #fff; }
.pular:focus { top: 12px; }
.dentro { width: min(100% - 2 * var(--borda), var(--largura)); margin-inline: auto; }
.ic { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.azul { color: var(--azul); }
.escuro .azul { color: var(--azul-escuro); }

/* ---------- letra: grande, peso normal ---------- */
.titulo { font-weight: 400; font-size: clamp(34px, 4.5vw, 66px); line-height: 1.12; letter-spacing: -.018em; text-wrap: balance; }
.rotulo { font-size: 12.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; line-height: 1.4; }
.lide { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--cinza); max-width: 36em; text-wrap: pretty; }
/* cabeça de seção como no Wama: o nome da seção pequeno à esquerda, a frase grande à direita */
.cabeca { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 9.4fr); gap: 12px 24px; align-items: start; margin-bottom: clamp(44px, 6vw, 92px); }
.cabeca .rotulo { padding-top: clamp(10px, 1.4vw, 22px); }
.cabeca .lide { grid-column: 2; margin-top: 10px; }

/* ---------- botões e tags ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 10px 24px; border: 1px solid var(--preto); border-radius: 999px; background: var(--preto); color: #fff; font-weight: 500; font-size: 16px; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, translate .25s var(--suave); }
.botao:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
.botao:active { scale: .97; }
.botao.vazado { background: transparent; color: var(--preto); }
.botao.vazado:hover { background: var(--preto); border-color: var(--preto); color: #fff; }
.botao.branco { background: #fff; border-color: #fff; color: var(--preto); }
.botao.branco:hover { background: var(--preto); border-color: var(--preto); color: #fff; }
.escuro .botao.branco:hover { background: var(--azul); border-color: var(--azul); }
.botao.grande { min-height: 60px; padding: 14px 34px; font-size: 19px; }
.botao.pequeno { min-height: 40px; padding: 7px 17px; font-size: 14.5px; gap: 7px; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; padding: 3px 11px 4px; border: 1px solid #d4d4d4; border-radius: 999px; font-size: 13.5px; line-height: 1.3; white-space: nowrap; }
.tag.cheia { background: var(--preto); border-color: var(--preto); color: #fff; }
.tag.azulada { background: var(--azul); border-color: var(--azul); color: #fff; }

/* ---------- topo: uma barra reta ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--branco); transition: box-shadow .3s; }
.topo.rolou { box-shadow: 0 1px 0 var(--fio); }
.topo-barra { width: min(100% - 2 * var(--borda), var(--largura)); margin-inline: auto; height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.marca { display: inline-flex; justify-self: start; text-decoration: none; }
.logo-svg { height: 33px; width: auto; }
/* o cursor do logo pisca sem sumir de todo (o K continua legível) */
.kd-cursor { animation: pisca-logo 1.3s steps(1) infinite; }
@keyframes pisca-logo { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .2; } }
@keyframes pisca { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.menu { display: flex; gap: clamp(14px, 2.2vw, 34px); }
.menu a { text-decoration: none; font-size: 18px; text-transform: lowercase; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--suave); }
.menu a:hover { background-size: 100% 1px; }
.topo .botao { justify-self: end; }
.progresso { position: fixed; left: 0; top: 0; z-index: 60; height: 2px; width: 100%; background: var(--azul); transform-origin: 0 50%; scale: var(--rolou, 0) 1; }

/* ---------- abertura ---------- */
.abertura { padding: clamp(54px, 7vw, 96px) 0 0; text-align: center; }
.abertura h1 { font-weight: 400; font-size: clamp(42px, 6.3vw, 100px); line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; max-width: 13em; margin-inline: auto; }
.abertura .lide { margin: 22px auto 0; color: var(--preto); max-width: 31em; }
.abertura .botoes { justify-content: center; margin-top: 30px; }
/* o cursor do logo, no fim do título */
.cursor { display: inline-block; width: .06em; height: .8em; margin-left: .05em; background: var(--azul); vertical-align: -.06em; animation: pisca 1.15s steps(1) infinite; }
.js .abertura h1 .cursor-caixa { opacity: 0; transition: opacity .3s 1.1s; }
.js .abertura h1.visto .cursor-caixa { opacity: 1; }

/* palavras que surgem uma a uma (mantido da v3) e entradas */
.js [data-palavras] .p { display: inline-block; opacity: 0; filter: blur(12px); translate: 0 .25em; transition: opacity .7s var(--suave), filter .7s var(--suave), translate .7s var(--suave); transition-delay: calc(var(--i) * 65ms + var(--espera, 0ms)); }
.js [data-palavras].visto .p { opacity: 1; filter: blur(0); translate: 0 0; }
.js [data-entra] { opacity: 0; translate: 0 26px; transition: opacity .8s var(--suave), translate .8s var(--suave), scale .8s var(--suave); transition-delay: calc(var(--i, 0) * 80ms + var(--espera, 0ms)); }
.js [data-entra='tag'] { translate: 0 8px; scale: .7; transition-timing-function: var(--mola); transition-duration: .55s; }
.js [data-entra].visto { opacity: 1; translate: 0 0; scale: 1; }

/* ---------- a roda de anúncios: cada carta é o anúncio de um serviço e leva pro WhatsApp ----------
   As cartas ficam em arco e giram sem parar (o site.js anda o ângulo --a de cada uma); passar o mouse freia. */
.leque-caixa { margin-top: clamp(44px, 5.4vw, 80px); padding-inline: var(--borda); }
/* isolation: as cartas trocam de camada entre si o tempo todo; sem isto elas passariam por cima do topo e da Kamurinha */
.leque { position: relative; isolation: isolate; width: min(100%, var(--largura)); margin-inline: auto; aspect-ratio: 1400 / 590; background: var(--chao); overflow: hidden; }
.carta { position: absolute; left: 50%; top: 13%; width: 16%; margin-left: -8%; aspect-ratio: 1 / 2; container-type: inline-size; display: flex; flex-direction: column; text-align: left; padding: 1.4vw; border-radius: 1.3vw; text-decoration: none; transform-origin: 50% 292%; box-shadow: -18px 22px 44px -18px rgb(0 0 0 / .45); rotate: calc(var(--a, var(--a0)) * 1deg); transition: rotate 1.2s var(--suave) calc(var(--i) * 45ms), translate .45s var(--suave), opacity .5s calc(var(--i) * 45ms); }
.leque.girando .carta { transition: translate .45s var(--suave); }
.js .leque:not(.visto) .carta { rotate: 0deg; opacity: 0; translate: 0 18%; }
.carta:hover { translate: 0 -3.5%; }
.carta.c-branco { background: #fff; color: #000; box-shadow: 0 0 0 1px #000, -18px 22px 44px -18px rgb(0 0 0 / .45); }
.carta.c-preto { background: #000; color: #fff; }
.carta.c-azul { background: var(--azul); color: #fff; }
.carta-topo { font-size: 5.6cqw; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; display: flex; justify-content: space-between; }
.carta b { margin-top: 22cqw; font-weight: 400; font-size: 16.5cqw; line-height: 1.02; letter-spacing: -.025em; }
.carta b::after { content: ""; display: inline-block; width: .07em; height: .78em; margin-left: .06em; background: var(--azul); vertical-align: -.05em; animation: pisca 1.15s steps(1) infinite; }
.carta.c-azul b::after { background: #fff; }
.carta.c-preto b::after { background: var(--azul-escuro); }
.carta em { margin-top: 6cqw; font-style: normal; font-size: 8.4cqw; line-height: 1.25; opacity: .78; }
.carta strong { margin-top: 7cqw; font-weight: 400; font-size: 30cqw; line-height: 1; letter-spacing: -.03em; }

/* ---------- faixa de palavras: o cursor separa ---------- */
.faixa { overflow: hidden; padding: clamp(40px, 5vw, 70px) 0; border-bottom: 1px solid var(--fio); }
.faixa-linha { display: flex; align-items: center; width: max-content; animation: corre 55s linear infinite; }
.faixa-linha span { display: inline-flex; align-items: center; font-size: clamp(34px, 5vw, 74px); line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.faixa-linha span::after { content: ""; width: .055em; height: .8em; margin: 0 .45em; background: var(--azul); }
@keyframes corre { to { translate: -50% 0; } }

/* ---------- cena preta: a roleta de palavras ---------- */
.escuro { background: var(--preto); color: #fff; }
.roleta-secao { padding: clamp(84px, 11vw, 170px) 0; overflow: hidden; }
.roleta { display: flex; justify-content: center; align-items: center; gap: .3em; font-weight: 400; font-size: clamp(46px, 9.6vw, 140px); line-height: 1.1; letter-spacing: -.03em; height: 3.3em; -webkit-mask: linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent); mask: linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent); }
.roleta-fixo { color: var(--azul-escuro); }
.roleta-pista { height: 1.1em; text-align: left; }
.roleta-lista { transition: translate .75s var(--suave); }
.roleta-lista li { height: 1.1em; color: #4d4d4d; transition: color .6s; white-space: nowrap; }
.roleta-lista li.vez { color: #fff; }
.roleta-pe { display: grid; justify-items: center; gap: 26px; margin-top: clamp(16px, 2.6vw, 40px); text-align: center; }
.roleta-pe p { font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -.01em; }

/* ---------- seções ---------- */
.secao { padding: var(--secao) 0 0; }

/* ---------- os anúncios: um painel por serviço, que empilha sobre o anterior enquanto a página rola ---------- */
.pilha { display: grid; padding-bottom: 14px; }
.anuncio { --topo: calc(78px + var(--n) * 12px); position: sticky; top: var(--topo); min-height: min(84vh, 760px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 30px clamp(30px, 5vw, 90px); align-items: center; padding: clamp(30px, 4.4vw, 70px) clamp(22px, 4.6vw, 76px); overflow: hidden; }
.anuncio.branco { background: #fff; box-shadow: inset 0 0 0 1px #000; }
.anuncio.chao { background: var(--chao); }
.anuncio.preto { background: #000; color: #fff; }
.anuncio.azul-cheio { background: var(--azul); color: #fff; }
.anuncio .rotulo { display: flex; gap: 1.4em; }
.anuncio .rotulo span { opacity: .55; }
.anuncio h3 { margin-top: 18px; font-weight: 400; font-size: clamp(44px, 7.3vw, 122px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.anuncio .texto > p { margin: 22px 0 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; max-width: 25em; }
.anuncio.branco .texto > p, .anuncio.chao .texto > p { color: var(--cinza); }
.anuncio .botoes { margin-top: 30px; }
.anuncio .preco { display: inline-block; margin-left: .25em; color: var(--azul); }
.anuncio.preto .botao, .anuncio.azul-cheio .botao { background: #fff; border-color: #fff; color: #000; }
.anuncio.preto .botao:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
.anuncio.azul-cheio .botao:hover { background: #000; border-color: #000; color: #fff; }
.anuncio.preto .tag, .anuncio.azul-cheio .tag { border-color: rgb(255 255 255 / .45); }
.anuncio .tags { margin-top: 20px; }

/* as peças em movimento de cada anúncio: só letra, cor e, no vídeo, quadros do anúncio de verdade */
.peca { position: relative; justify-self: stretch; font-size: clamp(26px, 3.5vw, 58px); line-height: 1.16; letter-spacing: -.025em; }
/* 01: o endereço sendo digitado */
.p-endereco { font-size: clamp(26px, 4vw, 66px); white-space: nowrap; }
.p-endereco .troca { color: var(--azul); }
.p-endereco .cursor { height: .84em; }
.p-endereco small { display: block; margin-top: .9em; font-size: 15px; letter-spacing: 0; color: var(--cinza); }
/* 02: o pedido chegando, linha por linha */
.p-pedido li { opacity: 0; translate: 0 .5em; animation: chega 9s var(--suave) infinite; }
.p-pedido li:nth-child(2) { animation-delay: .9s; } .p-pedido li:nth-child(3) { animation-delay: 1.8s; } .p-pedido li:nth-child(4) { animation-delay: 2.7s; } .p-pedido li:nth-child(5) { animation-delay: 3.9s; }
.p-pedido li:last-child { margin-top: .5em; font-size: 16px; letter-spacing: 0; }
.p-pedido .apaga { color: #6b6b6b; }
@keyframes chega { 0% { opacity: 0; translate: 0 .5em; } 5%, 78% { opacity: 1; translate: 0 0; } 86%, 100% { opacity: 0; translate: 0 0; } }
/* 03: o preço, o relógio do anúncio correndo até 0:30 e o que vem nele */
.p-video .valor { font-size: clamp(64px, 9.4vw, 160px); line-height: .9; letter-spacing: -.045em; white-space: nowrap; }
.p-video .valor small { display: block; margin-bottom: .6em; font-size: 14px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; }
.p-video .tempo { display: flex; align-items: center; gap: 16px; margin-top: .55em; font-size: 16px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.p-video .tempo i { position: relative; flex: 1; height: 3px; background: rgb(255 255 255 / .3); }
.p-video .tempo i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; scale: var(--toca, .4) 1; }
.p-video .vem { margin-top: .5em; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.2; }
.p-video .vem li { color: rgb(255 255 255 / .45); animation: acende-claro 8s infinite; }
.p-video .vem li:nth-child(2) { animation-delay: 2s; } .p-video .vem li:nth-child(3) { animation-delay: 4s; } .p-video .vem li:nth-child(4) { animation-delay: 6s; }
@keyframes acende-claro { 0%, 20% { color: #fff; } 27%, 100% { color: rgb(255 255 255 / .45); } }
/* 04: as áreas do sistema, uma acende por vez */
.p-areas li { color: #c4c4c4; animation: acende 6.4s infinite; }
.p-areas li:nth-child(2) { animation-delay: 1.6s; } .p-areas li:nth-child(3) { animation-delay: 3.2s; } .p-areas li:nth-child(4) { animation-delay: 4.8s; }
@keyframes acende { 0%, 22% { color: #000; } 30%, 100% { color: #c4c4c4; } }
.p-areas { font-size: clamp(34px, 5vw, 84px); line-height: 1.08; }
/* 05: a lista da virada sendo riscada */
.p-virada li { display: flex; align-items: baseline; gap: .5em; padding: .3em 0; border-bottom: 1px solid rgb(255 255 255 / .28); }
.p-virada li::before { content: ""; width: .6em; height: .32em; flex: none; border-left: .1em solid var(--azul-escuro); border-bottom: .1em solid var(--azul-escuro); rotate: -45deg; translate: 0 -.18em; animation: risca 6s infinite; }
.p-virada li:nth-child(2)::before { animation-delay: .9s; } .p-virada li:nth-child(3)::before { animation-delay: 1.8s; }
@keyframes risca { 0%, 6% { opacity: 0; scale: .2; } 14%, 100% { opacity: 1; scale: 1; } }
/* 06: o caminho do pedido, com o ponto que trava */
.p-caminho li { display: flex; align-items: center; gap: .45em; opacity: .55; animation: passa 7.5s infinite; }
.p-caminho li:nth-child(2) { animation-delay: 1.5s; } .p-caminho li:nth-child(3) { animation-delay: 3s; } .p-caminho li:nth-child(4) { animation-delay: 4.5s; } .p-caminho li:nth-child(5) { animation-delay: 6s; }
@keyframes passa { 0%, 18% { opacity: 1; } 26%, 100% { opacity: .55; } }
.p-caminho li.trava { opacity: 1; animation: none; }
.p-caminho .tag { font-size: 13px; letter-spacing: 0; background: #fff; border-color: #fff; color: #000; animation: boia 3.2s ease-in-out infinite; }

/* ---------- a frase da casa, acendendo palavra por palavra ---------- */
.tudo { text-align: center; }
.tudo-frase { font-weight: 400; font-size: clamp(36px, 7vw, 110px); line-height: 1.08; letter-spacing: -.028em; min-height: 2.2em; text-wrap: balance; }
.tudo-frase span { color: #d0d0d0; transition: color .5s; }
.tudo-frase span.vez, .tudo-frase.fim span { color: var(--preto); }
.tudo-frase.fim .final { color: var(--azul); }
.tudo .botoes { justify-content: center; margin-top: 20px; }

/* ---------- como funciona: três linhas, fio fino ---------- */
.passos { border-top: 1px solid var(--preto); }
.passo { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 4.6fr) minmax(0, 4.8fr); gap: 8px 24px; align-items: baseline; padding: clamp(24px, 3vw, 42px) 0; border-bottom: 1px solid var(--fio); }
.passo h3 { font-weight: 400; font-size: clamp(26px, 2.9vw, 44px); line-height: 1.12; letter-spacing: -.018em; }
.passo p { color: var(--cinza); max-width: 30em; }
.depois { margin-top: clamp(30px, 4vw, 54px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; }
.depois p { font-size: clamp(22px, 2.3vw, 34px); letter-spacing: -.015em; }

/* ---------- chamada final: o azul do cursor, de ponta a ponta ---------- */
.azulado { background: var(--azul); color: #fff; }
.chamada { margin-top: var(--secao); padding: clamp(90px, 12vw, 190px) 0; text-align: center; }
.chamada h2 { font-weight: 400; font-size: clamp(42px, 7.6vw, 124px); line-height: 1.03; letter-spacing: -.03em; text-wrap: balance; max-width: 11em; margin-inline: auto; }
.chamada .cursor { background: #fff; }
.chamada .botoes { justify-content: center; margin-top: 40px; }
.chamada .numero { margin-top: 22px; font-size: 19px; }

/* ---------- rodapé ---------- */
.rodape { padding: clamp(50px, 6vw, 90px) 0 120px; font-size: 16px; }
.rodape .dentro { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 4.6fr) minmax(0, 4.8fr); gap: 30px 24px; align-items: start; }
.rodape .logo-svg { height: 38px; }
.rodape ul { display: grid; gap: 8px; justify-items: start; }
.rodape a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--suave); }
.rodape a:hover { background-size: 100% 1px; }
.rodape p { color: #8f8f8f; }
.pausa { border: 0; background: none; padding: 0; color: #8f8f8f; text-decoration: underline; text-underline-offset: 3px; }
.pausa:hover { color: #fff; }

/* ---------- Kamurinha: o tira-dúvidas, no lugar do antigo botão fixo ----------
   O botão é azul como o cursor, com a Kamurinha espiando; a janela é reta, de fio preto, como o resto do site. */
.duvida-botao { position: fixed; right: 22px; bottom: 22px; z-index: 55; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 26px 10px 78px; border: 0; border-radius: 999px; background: var(--azul); color: #fff; font-weight: 500; font-size: 17px; line-height: 1.1; box-shadow: 0 0 0 2px #fff; transition: background .25s, translate .3s var(--suave), opacity .2s; }
.js .duvida-botao { animation: chega-botao .7s var(--mola) 1.4s both; }
@keyframes chega-botao { from { translate: 0 120px; } }
.duvida-botao img { position: absolute; left: 8px; bottom: 5px; width: 62px; height: auto; animation: boia 4s ease-in-out infinite; }
.duvida-botao .cursor { width: 2px; height: 1.05em; margin-left: -7px; background: #fff; }
.duvida-botao:hover { background: var(--preto); }
.duvida-aberta .duvida-botao { opacity: 0; pointer-events: none; }

.duvida { position: fixed; right: 22px; bottom: 22px; z-index: 56; width: min(400px, calc(100vw - 28px)); max-height: min(660px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: #fff; box-shadow: 0 0 0 1px #000, 0 34px 70px -24px rgb(0 0 0 / .5); animation: abre-duvida .35s var(--suave); transform-origin: 100% 100%; }
.duvida[hidden] { display: none; }
@keyframes abre-duvida { from { opacity: 0; scale: .94; translate: 0 14px; } }
.duvida-topo { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 14px; background: #000; color: #fff; }
.duvida-topo svg.kamurinha { width: 64px; height: auto; flex: none; margin: -14px 0 -2px; overflow: visible; }
.duvida-topo h2 { font-weight: 500; font-size: 19px; line-height: 1.1; }
.duvida-topo p { font-size: 13.5px; color: #a6a6a6; line-height: 1.3; }
.duvida-fechar { margin-left: auto; width: 42px; height: 42px; border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; }
.duvida-fechar:hover { color: var(--azul-escuro); }
.duvida-conversa { flex: 1; min-height: 190px; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 8px; }
.fala { max-width: 88%; padding: 9px 13px 10px; font-size: 15.5px; line-height: 1.4; animation: abre-duvida .3s var(--suave); }
.fala.dela { align-self: flex-start; background: var(--chao); }
.fala.sua { align-self: flex-end; background: #000; color: #fff; }
.fala.pensando::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--azul); vertical-align: -.16em; animation: pisca .9s steps(1) infinite; }
.duvida-prontas { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 12px; }
.duvida-prontas .tag { background: #fff; transition: background .2s, color .2s, border-color .2s; }
.duvida-prontas .tag:hover { background: #000; border-color: #000; color: #fff; }
.duvida-form { display: flex; border-top: 1px solid #000; }
.duvida-form input { flex: 1; min-width: 0; border: 0; padding: 14px; font: inherit; font-size: 16px; background: #fff; color: #000; caret-color: var(--azul); }
.duvida-form input:focus { outline: none; background: var(--chao); }
.duvida-form button { width: 52px; border: 0; background: #000; color: #fff; font-size: 20px; line-height: 1; transition: background .2s; }
.duvida-form button:hover { background: var(--azul); }
.duvida-pe { padding: 12px 14px 12px; border-top: 1px solid var(--fio); display: grid; gap: 8px; }
.duvida-pe .botao { width: 100%; }
.duvida-pe small { font-size: 12.5px; line-height: 1.35; color: var(--cinza); }
/* a Kamurinha por dentro: pisca os olhos, e o cursor da cabeça pisca enquanto ela pensa */
.kamurinha .km-olhos { transform-box: fill-box; transform-origin: center; animation: km-pisca 4.6s infinite; }
@keyframes km-pisca { 0%, 94%, 100% { scale: 1 1; } 96.5% { scale: 1 .1; } }
.kamurinha .km-braco-d { transform-box: fill-box; transform-origin: 20% 10%; animation: km-acena 2.6s ease-in-out 3; }
@keyframes km-acena { 0%, 100% { rotate: 0deg; } 50% { rotate: -22deg; } }
.duvida.pensando .km-cursor { animation: pisca .5s steps(1) infinite; }

/* pausado pelo botão do rodapé */
.parado *, .parado *::before, .parado *::after { animation: none !important; transition: none !important; }
.parado [data-palavras] .p, .parado [data-entra] { opacity: 1 !important; filter: none !important; translate: none !important; scale: 1 !important; }
.parado .leque .carta { opacity: 1 !important; rotate: calc(var(--a0) * 1deg) !important; translate: none !important; }
.parado .p-pedido li { opacity: 1; translate: none; }
.parado .p-areas li:first-child { color: #000; }

@media (max-width: 1000px) {
  .topo-barra { grid-template-columns: 1fr auto; }
  .menu { display: none; }
  .cabeca { grid-template-columns: 1fr; }
  .cabeca .rotulo { padding-top: 0; }
  .cabeca .lide { grid-column: 1; }
  .anuncio { grid-template-columns: 1fr; align-content: center; gap: 34px; }
  .passo, .rodape .dentro { grid-template-columns: 1fr; }
  .leque { aspect-ratio: 1000 / 560; }
  .carta { width: 22%; margin-left: -11%; transform-origin: 50% 250%; border-radius: 1.8vw; padding: 2vw; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .topo-barra { height: 66px; }
  .logo-svg { height: 28px; }
  /* no celular os anúncios não empilham: cada um ocupa o seu lugar */
  .anuncio { position: static; min-height: 0; padding: 40px 22px 44px; }
  .anuncio h3 { font-size: 46px; }
  .leque { aspect-ratio: 390 / 400; }
  .carta { width: 40%; margin-left: -20%; top: 12%; transform-origin: 50% 210%; border-radius: 3vw; padding: 3.6vw; }
  .leque .f2, .leque .f3 { display: none; }
  .duvida-botao { right: 14px; bottom: 14px; }
  .duvida { left: 0; right: 0; bottom: 0; width: 100%; max-height: 88dvh; }
  .botoes .botao.grande { width: 100%; }
  .depois .botao { width: 100%; }
  .rodape { padding-bottom: 110px; }
}