/* A página é uma conversa: cada parte é aberta por um pet falando, no balão de verdade do jogo.
   Fundo claro de lilás, muito espaço e uma cor só de destaque, o roxo da marca. */
@font-face { font-family: "Fredoka"; src: url("assets/fontes/Fredoka.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fontes/PlusJakartaSans.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
/* a letra redonda dos títulos em japonês, só com os caracteres da página (o montar_idiomas.py refaz). As outras línguas não baixam */
@font-face { font-family: "Zen Maru Gothic"; src: url("assets/fontes/ZenMaruGothic-Bold.sub.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  color-scheme: light;
  --tinta: #211B33;       /* o roxo quase preto dos olhos dos pets */
  --tinta-2: #5F5873;
  --papel: #FFFFFF;
  --nevoa: #F5F2FC;
  --linha: #E5DFF3;
  --roxo: #6E5CE6;        /* o da marca */
  --roxo-escuro: #5443C9;
  --lilas: #A99DF2;       /* o contorno do balão no jogo */
  --rosa: #F4B3C6;        /* a bochecha */
  --noite: #1C1638;
  --noite-2: #2A2350;
  --ambar: #8A5300;
  --ambar-fundo: #FFF1DC;
  --titulo: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --texto: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-d: max(20px, env(safe-area-inset-right, 0px));
  --mola: cubic-bezier(.2, 1.35, .4, 1);
}
/* em japonês, as letras latinas seguem as mesmas; o resto vem da Zen Maru nos títulos e da letra do sistema no texto */
:root:lang(ja) {
  --titulo: "Fredoka", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  --texto: "Plus Jakarta Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, sans-serif;
}
:root:lang(ja) body { line-break: strict; overflow-wrap: anywhere; }
/* (nos títulos grandes, as quebras estão marcadas com <wbr> em idiomas\ja.txt: o navegador sozinho cortou 今日 no meio) */
:lang(ja) h1, :lang(ja) h2 { word-break: keep-all; letter-spacing: 0; }
:lang(ja) h3, :lang(ja) .balaozinho, :lang(ja) .botao { word-break: auto-phrase; letter-spacing: 0; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--roxo-escuro); }
:focus-visible { outline: 3px solid var(--roxo); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.pular { position: absolute; left: -999px; top: 8px; background: var(--papel); padding: 8px 14px; border-radius: 10px; z-index: 100; }
.pular:focus { left: 8px; }
.miudo { font-size: .875rem; color: var(--tinta-2); line-height: 1.5; }
.centro { text-align: center; }
.pre { font-family: var(--titulo); font-weight: 500; color: var(--roxo-escuro); font-size: 1.05rem; }

/* ---- botões */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; border-radius: 999px; background: var(--roxo); color: #fff; font-family: var(--titulo); font-weight: 600; font-size: 1.15rem; text-decoration: none; box-shadow: 0 5px 0 var(--roxo-escuro); transition: transform .14s, box-shadow .14s, background .14s; }
.botao:hover { background: #7B6AEC; transform: translateY(-2px); box-shadow: 0 7px 0 var(--roxo-escuro); }
.botao:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--roxo-escuro); }
.botao-pequeno { min-height: 42px; padding: 8px 20px; font-size: 1rem; box-shadow: 0 3px 0 var(--roxo-escuro); }
.botao-pequeno:hover { box-shadow: 0 5px 0 var(--roxo-escuro); }
.botao-pequeno:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--roxo-escuro); }
.botao-em-breve { opacity: .65; pointer-events: none; box-shadow: none; }
.botao-grande { min-height: 62px; padding: 14px 40px; font-size: 1.35rem; }
/* o botão no meio da página: entre o topo e o preço são umas 10 telas */
.chamada-meio { display: grid; justify-items: center; gap: 12px; margin-top: clamp(30px, 4vw, 48px); text-align: center; }

/* ---- o topo fixo */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.topo-dentro { max-width: 1240px; margin: 0 auto; padding: 8px var(--gutter-d) 8px var(--gutter); display: flex; align-items: center; gap: 24px; }
.marca img { width: 104px; height: auto; }
.topo-menu { display: flex; gap: 22px; margin-left: auto; font-size: .95rem; font-weight: 600; }
.topo-menu a { color: var(--tinta); text-decoration: none; }
.topo-menu a:hover { color: var(--roxo-escuro); }
/* o seletor de idioma: a pessoa já cai na língua dela, e isto é pra quando o palpite errar */
.linguas { display: flex; align-items: center; gap: 2px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.linguas a { padding: 4px 7px; border-radius: 8px; color: var(--tinta-2); text-decoration: none; }
.linguas a:hover { color: var(--roxo-escuro); }
.linguas a[aria-current] { background: var(--nevoa); color: var(--roxo-escuro); }
.topo .marca, .topo .botao { flex: none; white-space: nowrap; }

/* ---- o balão, igual ao do jogo */
.balao { position: relative; background: var(--papel); border: 4px solid var(--lilas); border-radius: 34px; }
.balao::after { content: ""; position: absolute; width: 22px; height: 22px; background: var(--papel); border-right: 4px solid var(--lilas); border-bottom: 4px solid var(--lilas); transform: rotate(45deg); border-bottom-right-radius: 5px; }
.balaozinho { position: relative; display: inline-block; background: var(--papel); border: 3px solid var(--lilas); border-radius: 18px; padding: 8px 14px; font-family: var(--titulo); font-weight: 500; font-size: 1.02rem; line-height: 1.25; color: var(--tinta); box-shadow: 0 6px 16px rgba(60, 40, 120, .10); }

/* ---- 1. o palco */
.palco { position: relative; z-index: 3; isolation: isolate; }
.palco-fundo { position: absolute; inset: 0; overflow: hidden; z-index: -1; display: block; }
.palco-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.palco-dentro { max-width: 1240px; margin: 0 auto; padding: clamp(16px, 2.2vw, 30px) var(--gutter-d) clamp(30px, 3vw, 44px) var(--gutter); }
/* o balão: o título, o vídeo e o botão na 1ª tela; os pets de arremessar ficam logo abaixo. No computador, o balão e o vídeo se separam (no fim deste arquivo) */
.balao-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "titulo video" "abre video" "acoes video" "preco video" "credito video"; margin-inline: auto; padding: clamp(18px, 2.2vw, 30px) clamp(20px, 2.8vw, 38px); animation: balao-entra .7s var(--mola) both; box-shadow: 0 18px 50px rgba(80, 50, 150, .18); }
.balao-topo::after { left: 50%; margin-left: -11px; bottom: -14px; }
.balao-topo h1 { grid-area: titulo; align-self: end; font-size: clamp(2.5rem, 5vw, 4.1rem); line-height: 1.04; }
.abre { grid-area: abre; margin-top: 16px; font-size: clamp(1.03rem, 1.4vw, 1.16rem); }
.acoes { grid-area: acoes; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.balao-topo .miudo { margin-top: 14px; }
.balao-topo .topo-preco { grid-area: preco; }
.balao-topo .topo-credito { grid-area: credito; align-self: end; margin-top: 18px; }
.topo-credito .credito, .palco-nota .credito { white-space: nowrap; }
.palco-nota .nota-credito { display: none; }
.topo-video { grid-area: video; position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--noite); box-shadow: 0 16px 36px rgba(40, 25, 90, .22); }
.topo-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.topo-video-som { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 18px; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.topo-video-som span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: rgba(28, 22, 56, .84); color: #fff; font-family: var(--titulo); font-weight: 500; font-size: 1.02rem; line-height: 1.2; transition: background .15s, transform .15s; }
.topo-video-som:hover span { background: var(--roxo); transform: translateY(-2px); }
.topo-video-som svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.palco-nota { position: absolute; right: 16px; bottom: 10px; font-size: .75rem; color: #fff; text-shadow: 0 1px 3px rgba(30, 40, 10, .8); }

.turma-campo { --t: clamp(112px, 13vw, 196px); position: relative; max-width: 900px; height: clamp(320px, 30vw, 420px); margin: clamp(26px, 3vw, 40px) auto 0; }
.pet { position: absolute; left: var(--x); bottom: var(--y); width: var(--t); height: var(--t); margin-left: calc(var(--t) / -2); padding: 0; border: 0; background: none; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; animation: pet-cai .75s var(--mola) backwards; }
.pet:nth-of-type(1) { animation-delay: .25s; } .pet:nth-of-type(2) { animation-delay: .32s; } .pet:nth-of-type(3) { animation-delay: .39s; }
.pet:nth-of-type(4) { animation-delay: .46s; } .pet:nth-of-type(5) { animation-delay: .53s; } .pet:nth-of-type(6) { animation-delay: .6s; }
.pet[data-pet="moya_lencol"] { --x: 24%; --y: 47%; }
.pet[data-pet="moya_fogo"] { --x: 52%; --y: 53%; }
.pet[data-pet="nimbo"] { --x: 80%; --y: 42%; }
.pet[data-pet="mebu"] { --x: 11%; --y: 6%; }
.pet[data-pet="mimi"] { --x: 38%; --y: 0%; }
.pet[data-pet="axolote"] { --x: 65%; --y: 3%; }
.pet.pegando { cursor: grabbing; }
.pet.solto { z-index: 30; }
.pet:focus-visible { outline-offset: -6px; border-radius: 50%; }
.pet-corpo { display: block; width: 100%; height: 100%; transform-origin: 50% 88%; }
.pet-corpo img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 10px 8px rgba(50, 30, 90, .28)); }
.boia { animation: boia 3.4s ease-in-out infinite; }
.boia-b { animation-duration: 4.1s; animation-delay: -1.4s; }
.boia-c { animation-duration: 3.7s; animation-delay: -2.2s; }
.respira { animation: respira 2.9s ease-in-out infinite; }
.respira-b { animation-duration: 3.3s; animation-delay: -1s; }
.respira-c { animation-duration: 3.1s; animation-delay: -1.9s; }
.pet.pegando .pet-corpo, .pet.solto .pet-corpo { animation: none; }
.pet.pousou .pet-corpo { animation: pousa .55s var(--mola); }
.pet-fala { position: absolute; left: 50%; bottom: 92%; transform: translateX(-50%); white-space: nowrap; pointer-events: none; animation: fala-entra .3s var(--mola) both; font-size: .98rem; }
.pet-fala::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 11px; height: 11px; margin-left: -5px; background: var(--papel); border-right: 3px solid var(--lilas); border-bottom: 3px solid var(--lilas); transform: rotate(45deg); }
.pet-susto { position: absolute; left: 50%; top: -6%; margin-left: -18px; font-family: var(--titulo); font-weight: 700; font-size: 2.4rem; line-height: 1; color: #F0407F; -webkit-text-stroke: 2px #fff; paint-order: stroke fill; pointer-events: none; animation: susto .28s var(--mola) both; }
.dica { position: absolute; right: 2%; top: 2%; margin: 0; pointer-events: none; animation: dica 2.4s ease-in-out infinite; transition: opacity .3s; }
.dica span { display: inline-block; background: var(--roxo); color: #fff; font-family: var(--titulo); font-weight: 500; padding: 7px 16px; border-radius: 999px; box-shadow: 0 8px 18px rgba(60, 40, 150, .3); }
.dica.sumiu { opacity: 0; }

/* ---- as partes */
.secao { padding-block: clamp(64px, 8.5vw, 112px); }
.dentro { max-width: 1160px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-d); }
.faixa-nevoa { background: var(--nevoa); }
.abre-secao { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; display: grid; gap: 16px; justify-items: center; }
.abre-secao > p { color: var(--tinta-2); font-size: 1.1rem; }
.anfitriao { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.anfitriao img { width: 104px; height: 104px; order: 2; margin-top: -2px; }
.anfitriao .balaozinho { order: 1; }
.anfitriao .balaozinho::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 11px; height: 11px; margin-left: -6px; background: var(--papel); border-right: 3px solid var(--lilas); border-bottom: 3px solid var(--lilas); transform: rotate(45deg); }
.anfitriao.viu .balaozinho { animation: fala-simples .45s var(--mola) both; }
.anfitriao.viu img { animation: pulinho .55s var(--mola) both; }

/* ---- 2. o avatar */
.avatar { padding-top: clamp(56px, 7vw, 96px); }
.avatar-grade { max-width: 1160px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-d); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.avatar-foto { margin: 0; }
.avatar-ceu { position: relative; overflow: hidden; border-radius: 32px; background: linear-gradient(178deg, #8D9BFA 0%, #B7A3F6 46%, #F3B4D8 82%, #FCD9B6 100%); aspect-ratio: 1000 / 900; }
/* a foto com zoom: a Kipfel em destaque, e o outro avatar saindo pela direita */
.avatar-cena { position: absolute; left: -3%; top: -27%; width: 128%; }
.avatar-img { display: block; width: 100%; max-width: none; height: auto; }
/* o rosto por cima da foto: a caixa é ROSTO_CAIXA do montar_imagens.py, em % da foto (1000 x 900) */
.avatar-rosto { position: absolute; left: 26.2%; top: 42.2222%; width: 9%; aspect-ratio: 90 / 66; }
.avatar-rosto img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.avatar-rosto img.vez { opacity: 1; }
.balaozinho-kipfel { position: absolute; left: 9%; top: 9%; animation: flutua 3.6s ease-in-out infinite; }
.balaozinho-kipfel::after { content: ""; position: absolute; left: 44%; bottom: -8px; width: 11px; height: 11px; background: var(--papel); border-right: 3px solid var(--lilas); border-bottom: 3px solid var(--lilas); transform: rotate(45deg); }
.avatar-foto figcaption { margin-top: 10px; font-size: .85rem; color: var(--tinta-2); }
.avatar-texto { display: grid; gap: 14px; min-width: 0; }
.avatar-texto > p:not(.miudo):not(.pre) { font-size: 1.08rem; }
.caras-kipfel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chamada-caras { font-family: var(--titulo); font-weight: 500; color: var(--tinta); margin-top: 4px; }
.caras-kipfel li { width: clamp(52px, 5.4vw, 66px); aspect-ratio: 1; }
.caras-kipfel button { display: block; width: 100%; height: 100%; padding: 0; border-radius: 50%; overflow: hidden; border: 3px solid var(--lilas); background: var(--papel); cursor: pointer; transition: transform .22s var(--mola), border-color .2s, box-shadow .2s; }
.caras-kipfel button:hover { transform: scale(1.18) rotate(-4deg); border-color: var(--roxo); }
.caras-kipfel button[aria-pressed="true"] { transform: scale(1.14); border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(110, 92, 230, .28); }
.caras-kipfel img { width: 100%; height: 100%; object-fit: cover; }
.caixa-precisa { background: var(--nevoa); border-radius: 20px; padding: 16px 20px; }
.caixa-precisa ul { margin-top: 6px; display: grid; gap: 2px; }
.caixa-precisa li { padding-left: 18px; position: relative; }
.caixa-precisa li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--roxo); }

/* ---- o aviso logo abaixo do topo */
.antes-de-tudo { margin: 0; padding: 12px var(--gutter-d) 12px var(--gutter); background: var(--nevoa); text-align: center; font-size: .97rem; }
.antes-de-tudo a { font-weight: 600; white-space: nowrap; }

/* ---- o sinal de que a página continua: em tela alta, o topo e o aviso acima cabem certinho e parecem o fim da página.
   Fica dentro do palco, então nunca cobre o aviso, e some quando a pessoa começa a rolar. */
.desce-lugar { position: sticky; bottom: 6px; z-index: 20; display: flex; justify-content: center; align-items: flex-end; height: 0; pointer-events: none; }
.desce { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px 14px 8px 18px; border-radius: 999px; background: var(--roxo); color: #fff; font-family: var(--titulo); font-weight: 500; font-size: 1.02rem; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 18px rgba(60, 40, 150, .35); animation: desce 2.4s ease-in-out infinite; transition: opacity .25s, background .15s; }
.desce:hover { background: #7B6AEC; }
.desce svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.desce.sumiu { opacity: 0; pointer-events: none; }
@keyframes desce { 50% { transform: translateY(5px); } }

/* ---- 4. a roda, igual ao menu do jogo */
.escolha { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.roda { --meio: 25cqw; container-type: inline-size; position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #2A2540; overflow: hidden; box-shadow: 0 22px 50px rgba(40, 25, 90, .25); }
.roda::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from -30deg, transparent 0 59.4deg, rgba(255, 255, 255, .14) 59.4deg 60deg); z-index: 1; pointer-events: none; }
.roda-fatia { position: absolute; inset: 0; background: conic-gradient(from -30deg, var(--roxo) 0 60deg, transparent 60deg 360deg); transform: rotate(calc(var(--i) * 60deg)); transition: transform .4s var(--mola); }
.roda-item { position: absolute; left: 50%; top: 50%; z-index: 2; width: 27cqw; height: 27cqw; margin: -13.5cqw 0 0 -13.5cqw; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--titulo); font-weight: 500; font-size: clamp(.72rem, 3.6cqw, .95rem); transform: rotate(calc(var(--a) * 60deg)) translateY(-35.5cqw) rotate(calc(var(--a) * -60deg)); }
.roda-item img { width: 18cqw; height: 18cqw; object-fit: contain; transition: transform .25s var(--mola); }
.roda-item:hover img { transform: scale(1.14); }
.roda-item[aria-checked="true"] img { transform: scale(1.2); }
.roda-item span { margin-top: -2px; }
.roda-item:focus-visible { outline-color: #fff; border-radius: 50%; }
.roda-meio { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34cqw; height: 34cqw; margin: -17cqw 0 0 -17cqw; border-radius: 50%; background: #17132B; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--titulo); line-height: 1.15; }
.roda-meio small { font-size: clamp(.6rem, 2.7cqw, .78rem); opacity: .75; }
.roda-meio strong { font-weight: 600; font-size: clamp(1rem, 6cqw, 1.5rem); }
.ficha { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(16px, 3vw, 36px); align-items: center; }
.ficha-foto { background: var(--papel); border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; box-shadow: inset 0 0 0 4px var(--linha); }
.ficha-foto img { width: 92%; height: 92%; object-fit: contain; }
.ficha-foto img.pula { animation: pet-pula .45s var(--mola); }
.ficha-texto { display: grid; gap: 10px; min-width: 0; }
.ficha-texto h3 { font-size: 2rem; }
.ficha-rotulo { margin-top: 6px; font-size: .9rem; font-weight: 600; color: var(--tinta-2); }
.ficha-caras { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-caras button { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--linha); background: var(--papel); color: var(--tinta); font: 500 .95rem var(--titulo); cursor: pointer; transition: border-color .15s, background .15s; }
.ficha-caras button:hover { border-color: var(--lilas); }
.ficha-caras button[aria-pressed="true"] { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.escolha + .miudo { margin-top: 28px; }

/* ---- 7. o mosaico */
.mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 36px) clamp(16px, 2.2vw, 28px); }
.cartao-foto { grid-column: span 4; display: grid; gap: 8px; align-content: start; min-width: 0; }
.cartao-foto.largo { grid-column: span 7; }
.cartao-foto:nth-child(2) { grid-column: span 5; }
.foto { position: relative; border-radius: 24px; overflow: hidden; background: var(--nevoa); aspect-ratio: 4 / 3; margin-bottom: 6px; }
.cartao-foto.largo .foto, .cartao-foto:nth-child(2) .foto { aspect-ratio: auto; height: clamp(240px, 27vw, 340px); }
.foto img, .foto video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cartao-foto:hover .foto img, .cartao-foto:hover .foto video { transform: scale(1.04); }
/* as caras da Kipfel, uma de cada vez */
.faz-cara img { position: absolute; inset: 0; object-position: 50% 55%; opacity: 0; }
.faz-cara img.vez { opacity: 1; }
.selo { position: absolute; left: 12px; top: 12px; padding: 3px 11px; border-radius: 999px; background: rgba(23, 19, 43, .72); color: #fff; font-size: .75rem; font-weight: 600; }
.selo-ilustra { background: rgba(255, 255, 255, .92); color: var(--tinta); }
.cartao-foto p { color: var(--tinta-2); }
.lista-curta { margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--linha); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(24px, 4vw, 56px); }
.lista-curta strong { font-family: var(--titulo); font-weight: 600; }

/* ---- 5. a conversa */
.amigos { background: var(--roxo); color: #fff; border-radius: 32px; padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 52px); align-items: center; margin-bottom: clamp(28px, 4vw, 48px); box-shadow: 0 22px 50px rgba(90, 70, 210, .26); }
.amigos-texto { display: grid; gap: 14px; min-width: 0; }
.amigos-texto h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.amigos-texto ul { display: grid; gap: 8px; }
.amigos-texto li { position: relative; padding-left: 26px; }
.amigos-texto li::before { content: ""; position: absolute; left: 2px; top: .34em; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.amigos-texto li::after { content: ""; position: absolute; left: 6.5px; top: .55em; width: 7px; height: 4px; border-left: 2px solid var(--roxo); border-bottom: 2px solid var(--roxo); transform: rotate(-45deg); }
.amigos-texto .miudo { color: #E4DFFB; }
.amigos-chat { display: grid; gap: 10px; min-width: 0; }
.amigos-chat small { font-size: .76rem; font-weight: 600; color: #E4DFFB; }
.amigos-chat span { display: inline-block; padding: 10px 15px; border-radius: 18px; line-height: 1.35; }
.fala-amigo { display: grid; gap: 2px; justify-items: start; }
.fala-amigo span { background: rgba(255, 255, 255, .18); border-bottom-left-radius: 5px; }
.fala-pet { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; }
.fala-pet span { background: var(--papel); color: var(--tinta); border: 3px solid var(--lilas); border-bottom-right-radius: 5px; font-family: var(--titulo); font-weight: 500; }
.fala-pet img { width: 56px; height: 56px; order: 2; flex: none; filter: drop-shadow(0 2px 3px rgba(30, 15, 80, .35)); }
.amigos-chat .exemplo { font-size: .76rem; color: #E4DFFB; text-align: right; }
.fala-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.vozes { background: var(--papel); border: 2px solid var(--linha); border-radius: 28px; padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: clamp(12px, 2.4vw, 28px); align-items: center; }
.vozes-palco { position: relative; padding-top: 58px; }
.vozes-palco img { width: 100%; height: auto; }
.balaozinho-voz { position: absolute; left: 50%; top: 0; width: max-content; max-width: 210px; transform: translateX(-50%); font-size: .92rem; z-index: 1; text-align: center; animation: fala-entra .3s var(--mola) both; }
.vozes h3 { margin-bottom: 4px; }
.vozes-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.vozes-botoes:last-child { margin-bottom: 0; }
.voz { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 10px; border: 2px solid var(--linha); border-radius: 999px; background: var(--papel); font: 500 1rem var(--titulo); color: var(--tinta); cursor: pointer; transition: border-color .15s; }
.voz:hover { border-color: var(--lilas); }
.voz[aria-pressed="true"] { border-color: var(--roxo); color: var(--roxo-escuro); }
.tocar { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--roxo); flex: none; }
.tocar::before { content: ""; position: absolute; left: 9px; top: 7px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.voz[aria-pressed="true"] .tocar::before { left: 6px; top: 6px; width: 12px; height: 12px; border: 0; background: linear-gradient(90deg, #fff 0 3px, transparent 3px 4.5px, #fff 4.5px 7.5px, transparent 7.5px 9px, #fff 9px 12px); animation: barrinhas .5s ease-in-out infinite alternate; transform-origin: bottom; }
.poderes { display: grid; }
.poderes li { padding: 14px 0; border-top: 1px solid var(--linha); }
.poderes li:first-child { border-top: 0; padding-top: 0; }
.poderes p { color: var(--tinta-2); margin-top: 2px; }
.baloes { margin-top: clamp(32px, 5vw, 56px); }
.baloes h3 { margin-bottom: 14px; }
.baloes ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.baloes img { width: 100%; border-radius: 18px; }

/* ---- 6. o intérprete */
.faixa-noite { background: radial-gradient(1px 1px at 12% 22%, #fff8, transparent), radial-gradient(1.5px 1.5px at 70% 14%, #fff9, transparent), radial-gradient(1px 1px at 88% 60%, #fff6, transparent), radial-gradient(1.5px 1.5px at 36% 72%, #fff5, transparent), radial-gradient(1px 1px at 55% 40%, #fff7, transparent), var(--noite); color: #F3F0FC; }
.faixa-noite .miudo { color: #BDB4DE; }
.interprete-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.interprete-grade > div { display: grid; gap: 14px; justify-items: start; }
.interprete-grade .anfitriao { align-items: flex-start; margin-bottom: 4px; }
.interprete-grade .anfitriao img { margin-left: 8px; }
.interprete-grade .anfitriao .balaozinho::after { left: 44px; }
.conversa-demo { display: grid; gap: 14px; counter-reset: fala; }
.conversa-demo li { display: grid; gap: 3px; max-width: 86%; }
.conversa-demo small { font-size: .78rem; color: #BDB4DE; font-weight: 600; }
.conversa-demo span { padding: 11px 16px; border-radius: 18px; font-size: 1.03rem; line-height: 1.4; }
.m-pessoa span { background: var(--noite-2); border-bottom-left-radius: 5px; }
.m-pet { justify-self: center; }
.m-pet span { background: var(--roxo); color: #fff; }
.m-voce { justify-self: end; text-align: right; }
.m-voce span { background: var(--papel); color: var(--tinta); border-bottom-right-radius: 5px; text-align: left; }
.conversa-demo.toca li { animation: conversa-entra .45s var(--mola) both; }
.conversa-demo.toca li:nth-child(2) { animation-delay: 1.1s; }
.conversa-demo.toca li:nth-child(3) { animation-delay: 2.5s; }
.conversa-demo.toca li:nth-child(4) { animation-delay: 3.6s; }

/* ---- 8. nuvem ou PC */
.caminhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; }
.caminho { border: 2px solid var(--linha); border-radius: 28px; padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.caminho.destaque { border: 3px solid var(--roxo); box-shadow: 0 16px 40px rgba(90, 70, 210, .14); }
.etiqueta { align-self: flex-start; padding: 3px 12px; border-radius: 999px; background: var(--nevoa); color: var(--roxo-escuro); font: 500 .85rem var(--titulo); }
.destaque .etiqueta { background: var(--roxo); color: #fff; }
.caminho h3 { font-size: 1.55rem; }
.caminho > p { color: var(--tinta-2); }
.caminho ul { margin-top: auto; padding-top: 6px; display: grid; gap: 2px; font-size: .95rem; font-weight: 600; }
.caminho li { padding-left: 18px; position: relative; }
.caminho li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--lilas); }
.nuvem-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.sanfona .caminhos { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 16px; }
.sanfona .caminho p { padding-bottom: 0; }
.sanfona .caminho h3 { font-size: 1.3rem; }

/* ---- 9. os passos (a ordem aqui é de verdade) */
.passos { counter-reset: passo; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-bottom: 32px; }
.passos li { counter-increment: passo; position: relative; display: grid; gap: 6px; align-content: start; }
.passos li::before { content: counter(passo); width: 46px; height: 46px; border-radius: 50%; background: var(--roxo); color: #fff; display: grid; place-items: center; font: 600 1.35rem var(--titulo); margin-bottom: 6px; position: relative; z-index: 1; }
.passos li:not(:last-child)::after { content: ""; position: absolute; left: 46px; right: calc(-1 * clamp(14px, 2vw, 24px)); top: 22px; height: 3px; background: var(--lilas); }
.passos p { font-size: .96rem; color: var(--tinta-2); }
#como > .dentro > .centro { font-weight: 600; }

/* ---- 10. o preço */
.preco-grade { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.preco-cartao { background: var(--roxo); color: #fff; border-radius: 36px; padding: clamp(28px, 4vw, 48px); display: grid; gap: 10px; justify-items: center; text-align: center; box-shadow: 0 26px 60px rgba(90, 70, 210, .32); }
.preco-cartao h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.preco-etiqueta { margin-top: 8px; padding: 3px 14px; border-radius: 999px; background: rgba(255, 255, 255, .18); font: 500 .95rem var(--titulo); }
.preco-valor { font-family: var(--titulo); font-weight: 600; font-size: clamp(5rem, 11vw, 7.5rem); line-height: 1; letter-spacing: -.02em; }
.preco-valor small { font-size: .36em; font-weight: 500; letter-spacing: 0; }
.preco-sobe { font: 500 1.1rem var(--titulo); }
.preco-sem { font-weight: 600; }
.preco-cartao .botao { background: var(--papel); color: var(--roxo-escuro); box-shadow: 0 5px 0 #CFC8F6; margin-top: 10px; }
.preco-cartao .botao:hover { background: #fff; box-shadow: 0 7px 0 #CFC8F6; }
.preco-cartao .botao:active { box-shadow: 0 1px 0 #CFC8F6; }
.preco-cartao .miudo { color: #E4DFFB; }
.anfitriao-preco img { width: 92px; height: 92px; }
.preco-lado { display: grid; gap: 10px; }
.preco-lado h3 { font-size: 1.4rem; margin-top: 12px; }
.preco-lado h3:first-child { margin-top: 0; }
.vem { display: grid; gap: 7px; }
.vem li { position: relative; padding-left: 28px; }
.vem li::before { content: ""; position: absolute; left: 2px; top: .34em; width: 17px; height: 17px; border-radius: 50%; background: var(--roxo); }
.vem li::after { content: ""; position: absolute; left: 7px; top: .56em; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* ---- 11. antes de comprar */
.antes-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); }
.antes-grade h3 { font-size: 1.5rem; margin-bottom: 12px; }
.lista-traco { display: grid; }
.lista-traco li { padding: 12px 0; border-top: 1px solid var(--linha); font-size: 1rem; }

/* ---- 12. o que o app ouve: fica dentro de "Termos", numa coluna estreita, então a tabela é sempre uma lista: cada linha é um bloco */
.tabela-rola { overflow-x: auto; }
.tabela { font-size: .97rem; color: var(--tinta-2); }
.tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; }
.tabela tr { padding: 14px 0; border-top: 1px solid var(--linha); }
.tabela th, .tabela td { text-align: left; padding: 2px 0; }
.tabela tbody th { font-family: var(--titulo); font-weight: 600; font-size: 1.05rem; color: var(--tinta); }
.tabela td:nth-child(2)::before { content: "Quando: "; font-weight: 700; }
.tabela td:nth-child(3)::before { content: "Pra onde vai: "; font-weight: 700; }
.notas-privacidade { margin: 14px 0 16px; display: grid; gap: 8px; }
.notas-privacidade li { padding: 12px 18px; border-radius: 16px; background: var(--nevoa); color: var(--tinta-2); }

/* ---- 13. dúvidas e termos */
.duvidas-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }
.duvidas-grade h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 14px; }
.sanfona details { border-top: 1px solid var(--linha); }
.sanfona details:last-child { border-bottom: 1px solid var(--linha); }
.sanfona summary { position: relative; cursor: pointer; list-style: none; padding: 14px 34px 14px 0; font-family: var(--titulo); font-weight: 500; font-size: 1.1rem; }
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border-right: 3px solid var(--roxo); border-bottom: 3px solid var(--roxo); transform: rotate(45deg); transition: transform .2s; border-radius: 1px; }
.sanfona details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.sanfona p { padding-bottom: 16px; color: var(--tinta-2); }

/* ---- 14. o fim */
.fim { position: relative; overflow: hidden; }
.fim > img { width: 100%; height: clamp(520px, 60vw, 780px); object-fit: cover; object-position: 50% 100%; }
.fim-texto { position: absolute; left: 0; right: 0; top: clamp(32px, 6vw, 88px); padding: 0 var(--gutter-d) 0 var(--gutter); display: grid; gap: 14px; justify-items: center; text-align: center; color: #fff; }
.fim-texto h2 { font-size: clamp(2.6rem, 6.4vw, 5rem); text-shadow: 0 3px 24px rgba(70, 40, 150, .45); }
.fim-texto .miudo { color: #fff; text-shadow: 0 1px 8px rgba(70, 40, 150, .7); }
.fim-texto .botao-grande { width: auto; }

/* ---- rodapé */
.rodape { background: var(--noite); color: #E6E1F6; }
.rodape-dentro { max-width: 1160px; margin: 0 auto; padding: 36px var(--gutter-d) 40px var(--gutter); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 36px; align-items: start; }
.rodape .marca { background: var(--papel); padding: 8px 12px; border-radius: 14px; display: block; }
.rodape p + p { margin-top: 6px; }
.rodape .miudo { color: #A8A0CC; }
.rodape a { color: #C9BFFF; }
.rodape-redes { display: flex; gap: 10px; }
.rodape .rede { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .09); color: #fff; transition: background .15s, transform .15s; }
.rodape .rede:hover { transform: translateY(-2px); }
.rodape .rede-discord:hover { background: #5865F2; }
.rodape .rede-x:hover { background: #000; }

/* ---- o que ainda falta preencher (só no rascunho) */
.falta { display: inline; padding: 1px 8px; border-radius: 6px; background: var(--ambar-fundo); color: var(--ambar); font-weight: 600; white-space: normal; }
.rascunho { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: min(280px, calc(100vw - 24px)); border-radius: 14px; background: var(--ambar-fundo); color: var(--ambar); font-size: .82rem; line-height: 1.4; box-shadow: 0 8px 22px rgba(80, 50, 0, .2); }
.rascunho-abre { display: block; width: 100%; padding: 7px 12px; border: 0; background: none; color: inherit; font: 600 .82rem var(--texto); text-align: left; cursor: pointer; }
.rascunho ul { margin: 0; list-style: disc; padding: 0 12px 10px 28px; }
.aviso-link { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; padding: 10px 18px; border-radius: 999px; background: var(--tinta); color: #fff; font-size: .92rem; max-width: calc(100vw - 32px); text-align: center; animation: fala-simples .3s var(--mola) both; }

/* ---- movimento */
@keyframes balao-entra { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes pet-cai { from { opacity: 0; transform: translateY(-46px) scale(.82); } }
@keyframes boia { 50% { transform: translateY(-11px) rotate(-1.5deg); } }
@keyframes respira { 50% { transform: scale(1.025, .975); } }
@keyframes pousa { 0% { transform: scale(1.22, .76); } 55% { transform: scale(.92, 1.1); } 100% { transform: none; } }
@keyframes fala-entra { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.8); } }
@keyframes fala-simples { from { opacity: 0; transform: translateY(8px) scale(.85); } }
@keyframes susto { from { opacity: 0; transform: translateY(8px) scale(.5); } }
@keyframes dica { 50% { transform: translateY(-6px); } }
@keyframes flutua { 50% { transform: translateY(-7px); } }
@keyframes pulinho { 0% { transform: translateY(0) scale(1, 1); } 35% { transform: translateY(-14px) scale(.96, 1.05); } 100% { transform: none; } }
@keyframes pet-pula { 0% { transform: scale(.78) translateY(10px); } 100% { transform: none; } }
@keyframes barrinhas { from { transform: scaleY(.55); } to { transform: scaleY(1.05); } }
@keyframes conversa-entra { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes sobe { from { opacity: .001; transform: translateY(22px); } }

/* entra de leve ao rolar, só onde o navegador faz isso sozinho; nos outros, fica tudo parado e à vista */
@supports (animation-timeline: view()) {
  .cartao-foto, .caminho, .passos li, .vozes, .avatar-foto, .avatar-texto, .preco-cartao, .ficha { animation: sobe linear both; animation-timeline: view(); animation-range: entry 0% entry 26%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- telas menores */
@media (max-width: 1040px) {
  .topo-menu { display: none; }
  .linguas { margin-left: auto; }
  .passos { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; margin-inline: auto; }
  .passos li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; padding-bottom: 24px; }
  .passos li::before { grid-row: span 2; margin: 0; }
  .passos li:not(:last-child)::after { left: 22px; right: auto; top: 46px; bottom: 0; width: 3px; height: auto; }
  .passos h3, .passos p { grid-column: 2; }
  .escolha { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .roda { max-width: 400px; }
  .ficha { width: 100%; max-width: 620px; }
}

@media (max-width: 900px) {
  .balao-topo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "titulo" "video" "acoes" "preco" "abre" "credito"; max-width: 560px; }
  .balao-topo h1 { text-align: center; }
  .topo-video { justify-self: center; height: min(52svh, 480px); margin-top: 12px; }
  .acoes { justify-content: center; }
  .balao-topo .topo-preco { text-align: center; }
  .abre { margin-top: 14px; }
  .balao-topo .topo-credito { margin-top: 10px; text-align: center; }
  .turma-campo { --t: clamp(96px, 27vw, 170px); max-width: none; height: clamp(300px, 74vw, 460px); margin-top: 26px; }
  .desce-lugar { display: none; }
  .pet { left: calc(var(--x) * .76 + 12%); }
  .dica { right: auto; left: 50%; top: 0; transform: translateX(-50%); animation: none; white-space: nowrap; }
  .avatar-grade, .fala-grade, .interprete-grade, .preco-grade, .antes-grade, .duvidas-grade, .amigos { grid-template-columns: minmax(0, 1fr); }
  .avatar-foto { max-width: 620px; margin-inline: auto; }
  .mosaico .cartao-foto, .mosaico .cartao-foto.largo, .mosaico .cartao-foto:nth-child(2) { grid-column: span 6; }
  .mosaico .cartao-foto.largo, .mosaico .cartao-foto:nth-child(2) { grid-column: span 12; }
  .caminhos, .nuvem-grade { grid-template-columns: minmax(0, 1fr); }
  .baloes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preco-cartao { order: -1; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .topo-dentro { gap: 10px; }
  .linguas { gap: 0; font-size: .78rem; }
  .linguas a { padding: 3px 5px; }
  .balao-topo { border-radius: 28px; }
  .balao-topo h1 { font-size: 2.15rem; }
  .abre { font-size: 1rem; line-height: 1.5; }
  .acoes { margin-top: 14px; justify-content: center; gap: 8px 22px; }
  .acoes .botao, .chamada-meio .botao { width: 100%; }
  .balao-topo .miudo { margin-top: 10px; text-align: center; }
  .lista-curta { grid-template-columns: minmax(0, 1fr); }
  .mosaico .cartao-foto, .mosaico .cartao-foto.largo, .mosaico .cartao-foto:nth-child(2) { grid-column: span 12; }
  .cartao-foto .foto, .cartao-foto.largo .foto, .cartao-foto:nth-child(2) .foto { aspect-ratio: 3 / 2; height: auto; }
  .ficha { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ficha-foto { width: min(260px, 70vw); }
  .ficha-caras { justify-content: center; }
  .vozes { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .vozes-palco { width: min(220px, 62vw); }
  .vozes-botoes { justify-content: center; }
  .rodape-dentro { grid-template-columns: minmax(0, 1fr); }
  .rodape .marca { width: max-content; }
  .botao-grande { width: 100%; }
}

/* nos celulares bem estreitos, o logo e o botão encolhem pro seletor de idioma caber */
@media (max-width: 380px) {
  .topo .marca img { width: 84px; }
  .topo .botao-pequeno { padding-inline: 14px; }
}

/* ---- no computador, o topo é uma cena só: o balão e o vídeo como um par, com o céu entre eles, e os seis em grupinho na grama.
   (o dono, 30 e 31/10: "versao antiga, parecia mais harmoniosa"; "parece q tem algo estranho". O balão grande com o vídeo dentro tomava a
   tela; depois, os dois quase alinhados, a fileira de pets e o fundo forte davam a estranheza) */
@media (min-width: 901px) {
  .palco-dentro { max-width: 1120px; padding-top: clamp(18px, 2.4vw, 36px); padding-bottom: clamp(26px, 2.6vw, 38px); }
  /* o fundo um pouco menos saturado: quem aparece é o balão, o vídeo e os pets */
  .palco-fundo img { filter: saturate(.8) brightness(1.03); }

  /* o par: o balão fica da altura do vídeo, com o texto no meio, e os dois têm a mesma moldura */
  .balao-topo { grid-template-columns: minmax(0, 640px) auto; grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: ". video" "titulo video" "abre video" "acoes video" "preco video" ". video"; justify-content: center; column-gap: clamp(28px, 3.6vw, 52px); padding: 0; background: none; border: 0; box-shadow: none; }
  .balao-topo::before { content: ""; grid-column: 1; grid-row: 1 / -1; background: var(--papel); border: 4px solid var(--lilas); border-radius: 34px; box-shadow: 0 18px 50px rgba(80, 50, 150, .18); }
  .balao-topo > :not(.topo-video) { margin-inline: clamp(24px, 2.8vw, 38px); z-index: 1; }
  .balao-topo h1 { align-self: start; padding-top: clamp(22px, 2.6vw, 34px); }
  .balao-topo .topo-preco { padding-bottom: clamp(20px, 2.4vw, 30px); }
  .balao-topo .topo-credito { display: none; }
  /* (a caixa aqui não tem borda própria: a ponta sobe os 4 px da moldura pra encostar nela, como no celular) */
  .balao-topo::after { left: 50%; margin-left: -11px; bottom: -10px; }
  .topo-video { z-index: 1; align-self: center; height: clamp(500px, calc(100svh - 190px), 560px); border: 4px solid var(--lilas); border-radius: 34px; box-shadow: 0 18px 44px rgba(40, 25, 90, .3); }

  /* a turma: um grupinho, e não uma fileira. Os que ficam no chão têm sombra, pra pisarem na grama em vez de parecerem colados */
  .turma-campo { --t: clamp(120px, 11vw, 176px); max-width: 620px; height: clamp(250px, 21vw, 310px); margin-top: clamp(14px, 1.6vw, 22px); }
  .dica { right: -14%; top: 8%; }
  .pet::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 3%; height: 11%; border-radius: 50%; background: radial-gradient(closest-side, rgba(45, 55, 20, .42), transparent); z-index: -1; transition: opacity .15s; }
  .pet[data-pet="moya_lencol"]::after, .pet[data-pet="moya_fogo"]::after, .pet[data-pet="nimbo"]::after { opacity: 0; }
  .pet.solto::after { opacity: 0; }

  /* a letra miúda do vídeo fica no canto, junto do aviso do cenário */
  .palco-nota { max-width: 380px; padding: 6px 10px; border-radius: 10px; background: rgba(35, 30, 60, .5); text-align: right; line-height: 1.45; text-shadow: none; }
  .palco-nota .nota-credito { display: block; margin-top: 2px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .palco-nota { max-width: 300px; }
}