/* Meu CDN, direção TRAVESSIA (rodada 3): os 3 heros aprovados numa abertura só.
   Ponte da Amizade (Fronteira) → costura em partículas → Cataratas do Iguaçu, a névoa vira o logo (Garganta) →
   o logo cai na tela do painel e a câmera recua até o prédio com o letreiro aceso (Plantão) → trilho de produtos.
   Dois modos: html.mov (GSAP + ScrollTrigger e sem "reduzir movimento") e parado (o HTML já é o estado final). */

.tv-titulo { font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.7rem); line-height: 1.03; margin: 14px 0 16px; text-wrap: balance; }
h1.tv-titulo { font-size: clamp(2.3rem, 4.3vw, 4rem); }
.tv-titulo span { display: inline; }
.tv-apoio { font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.55; color: var(--tinta-2); max-width: 33em; }
.tv-frase .botao { margin-top: 24px; }

/* elementos que só existem com movimento */
.tv-cena1, .tv-cena3, .tv-bruma, .tv-passagem, .tv-cortina, .tv-atos, .tv-trilho__conta, .tv-veu, .letreiro-luz, .janela, .tv-bruma-baixa, .tv-sombra { display: none; }
.tv-mascote img.tv-tarde { display: none; }

/* =========================================================================================================
   VERSÃO PARADA (sem JS ou "reduzir movimento"): a mesma história em blocos
   ========================================================================================================= */
html:not(.mov) .tv-ato { position: relative; }
/* ato 1 */
html:not(.mov) .tv-ponte { height: min(94vh, 68vw); min-height: 560px; overflow: hidden; }
html:not(.mov) .tv-ponte-parada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; }
html:not(.mov) .tv-ponte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(14 7 32 / .8) 0%, rgb(14 7 32 / .35) 46%, rgb(14 7 32 / 0) 70%), linear-gradient(0deg, var(--fundo) 0%, rgb(14 7 32 / 0) 24%); pointer-events: none; }
html:not(.mov) .tv-frase { position: relative; z-index: 2; }
html:not(.mov) .tv-ponte .tv-frase { position: absolute; left: var(--lado); top: 50%; transform: translateY(-46%); width: min(640px, 50vw); }
html:not(.mov) .tv-mascote { position: absolute; z-index: 1; right: 4vw; bottom: 0; height: 74%; }
html:not(.mov) .tv-mascote img { height: 100%; width: auto; }
/* ato 2 */
html:not(.mov) .tv-garganta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(24px, 4vw, 64px); align-items: center; padding: 72px var(--lado) 32px; }
html:not(.mov) .tv-quadro2 { border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 3 / 2; }
html:not(.mov) .tv-foto2 { width: 100%; height: 100%; object-fit: cover; }
html:not(.mov) .tv-garganta .tv-mascote { position: absolute; right: auto; left: calc(var(--lado) + 58.3% - 18vw); bottom: 32px; height: auto; width: 18vw; max-width: 260px; }
html:not(.mov) .tv-garganta .tv-mascote img { width: 100%; height: auto; }
/* a marca */
html:not(.mov) .tv-marca { padding: 72px var(--lado) 40px; display: grid; justify-items: center; gap: 18px; text-align: center; }
html:not(.mov) .tv-marca__logo { width: min(480px, 76vw); height: auto; }
html:not(.mov) .tv-marca__texto { color: var(--tinta-2); font-size: 1.05rem; }
/* ato 3 */
html:not(.mov) .tv-plantao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "f3 f3 f3" "p1 p2 p3" "pr pr pr"; gap: 24px; padding: 56px var(--lado) 24px; }
html:not(.mov) .tv-planos li:nth-child(1) { grid-area: p1; } html:not(.mov) .tv-planos li:nth-child(2) { grid-area: p2; } html:not(.mov) .tv-planos li:nth-child(3) { grid-area: p3; }
html:not(.mov) .tv-plantao .tv-frase[data-frase="3"] { grid-area: f3; max-width: 760px; }
html:not(.mov) .tv-planos { display: contents; list-style: none; }
html:not(.mov) .tv-planos li { list-style: none; }
html:not(.mov) .tv-planos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
html:not(.mov) .tv-planos li:first-child img { object-position: 0 0; }
html:not(.mov) .tv-planos li:nth-child(2) img { object-position: 52% 40%; }
html:not(.mov) .tv-planos figcaption { margin-top: 10px; color: var(--tinta-2); font-size: .95rem; }
html:not(.mov) .tv-predio-parado { grid-area: pr; position: relative; margin-top: 32px; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; max-height: 88vh; }
html:not(.mov) .tv-predio-parado img:first-child { width: 100%; height: 100%; object-fit: cover; }
html:not(.mov) .tv-predio-parado .letreiro { position: absolute; left: 55.39%; top: 12.19%; width: 9.01%; height: auto; }
html:not(.mov) .tv-predio-parado::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(14 7 32 / .9) 0%, rgb(14 7 32 / .5) 28%, rgb(14 7 32 / 0) 45%); pointer-events: none; }
html:not(.mov) .tv-plantao .tv-frase[data-frase="4"] { grid-area: pr; align-self: center; justify-self: start; margin: 32px 0 0 clamp(20px, 3vw, 48px); width: min(440px, 34vw); z-index: 2; }
/* ato 4 */
html:not(.mov) .tv-trilho { padding: 88px var(--lado) 48px; }
html:not(.mov) .tv-trilho__cabeca { max-width: 760px; margin-bottom: 36px; }
html:not(.mov) .tv-trilho__faixa { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
html:not(.mov) .produto { width: auto; }

/* =========================================================================================================
   PRODUTOS (cartões, comuns aos dois modos)
   ========================================================================================================= */
.tv-trilho__titulo { font-weight: 800; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.04; margin: 12px 0 12px; text-wrap: balance; }
.tv-trilho__apoio { color: var(--tinta-2); font-size: 1.04rem; }
.tv-trilho__nota { margin-top: 18px; font-size: .8rem; color: var(--tinta-3); }
.tv-trilho__faixa { list-style: none; margin: 0; padding: 0; }
.produto {
  --luz: 1; --px: 0;
  position: relative; width: clamp(272px, 23vw, 330px); flex: none;
  display: flex; flex-direction: column; padding: 12px 12px 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgb(24 12 52 / .9), rgb(14 7 32 / .92));
  border: 1px solid rgb(255 255 255 / .12);
  transition: border-color .35s, transform .45s var(--saida);
}
.produto:hover, .produto:focus-within { border-color: rgb(240 0 208 / .55); transform: translateY(-4px); }
/* o vidro é uma janela acesa: dentro, a tela real do produto e o buldogue na pose daquele produto */
.produto__vidro {
  position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; margin-bottom: 16px;
  background: radial-gradient(110% 90% at 72% 100%, #ffcf8a 0%, #ec8f5c 24%, #7a2c98 58%, #1b0d36 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
}
.produto__vidro::after { content: ''; position: absolute; inset: 0; background: #0a0517; opacity: calc((1 - var(--luz)) * .66); pointer-events: none; }
.produto__tela {
  position: absolute; left: 6%; bottom: 9%; width: 60%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0;
  border-radius: 5px; box-shadow: 0 12px 26px -10px rgb(10 5 23 / .8), 0 0 0 1px rgb(255 255 255 / .18);
  transform: translate3d(calc(var(--px) * .5px), 0, 0);
}
.produto__pose {
  position: absolute; right: 3%; bottom: 0; height: 104%; width: auto; max-width: none;
  transform: translate3d(calc(var(--px) * 1px), calc((1 - var(--luz)) * 10%), 0); transform-origin: 50% 100%;
  filter: drop-shadow(-8px 6px 14px rgb(20 6 40 / .55));
}
.produto__pose--espelho { transform: translate3d(calc(var(--px) * 1px), calc((1 - var(--luz)) * 10%), 0) scaleX(-1); }
.produto--so-pose .produto__pose { right: auto; left: 50%; height: 100%; transform: translate3d(calc(-50% + var(--px) * 1px), calc((1 - var(--luz)) * 10%), 0); }
.produto__num { font: 700 .76rem/1.2 var(--fonte); letter-spacing: .12em; color: var(--magenta); margin-bottom: 8px; }
.produto__num span { color: var(--tinta-2); margin-left: 8px; letter-spacing: .08em; text-transform: uppercase; }
.produto__nome { font-weight: 800; font-size: 1.28rem; line-height: 1.15; margin-bottom: 8px; }
.produto__link { text-decoration: none; }
.produto__link::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.produto__link:focus-visible { outline: none; }
.produto__link:focus-visible::after { outline: 3px solid var(--ambar); outline-offset: 2px; }
.produto__texto { color: var(--tinta-2); font-size: .93rem; line-height: 1.52; }
.produto__fatos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.produto__fatos li { font-size: .78rem; line-height: 1.2; padding: 6px 9px; border-radius: 6px; background: rgb(255 255 255 / .07); color: var(--tinta-2); }
.produto__ir { margin-top: auto; padding-top: 16px; font: 700 .9rem/1 var(--fonte); }
.produto__ir span { display: inline-block; transition: transform .35s var(--saida); color: var(--magenta); }
.produto:hover .produto__ir span { transform: translateX(5px); }

/* =========================================================================================================
   COM MOVIMENTO: um palco preso, quatro atos
   ========================================================================================================= */
html.mov .tv-palco { position: relative; height: var(--alto); overflow: hidden; background: #0a0517; isolation: isolate; }
html.mov .tv-ato { position: absolute; inset: 0; visibility: hidden; z-index: 1; }
html.mov .tv-ponte { visibility: visible; }
html.mov .tv-ato.sai { -webkit-mask-image: linear-gradient(180deg, #000 var(--m1), transparent var(--m2)); mask-image: linear-gradient(180deg, #000 var(--m1), transparent var(--m2)); }
html.mov .tv-ato.entra { -webkit-mask-image: linear-gradient(180deg, transparent var(--m1), #000 var(--m2)); mask-image: linear-gradient(180deg, transparent var(--m1), #000 var(--m2)); }
html.mov .tv-ponte-parada, html.mov .tv-planos, html.mov .tv-predio-parado { display: none; }

/* o pesado chega quando precisa: as imagens dos atos 2, 3 e 4 só existem depois da classe de proximidade */
html.mov:not(.tv-a2) .tv-garganta img { display: none; }
html.mov:not(.tv-a3) .tv-plantao img, html.mov:not(.tv-a3) .tv-cena3 { display: none; }
html.mov:not(.tv-a4) .tv-trilho img { display: none; }

/* ato 1: 3 camadas (céu, ponte e cidade, rio de perto) x 2 estados, em px da foto (1536 x 1024) */
html.mov .tv-cena1 { display: block; position: absolute; inset: 0; }
html.mov .tv-camada { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; will-change: transform; }
html.mov .tv-camada img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
html.mov .tv-noite { opacity: 0; visibility: hidden; }

/* buldogue que apresenta a cena (gerado com a luz de cada cena; meio corpo, cortado pela borda da tela) */
html.mov .tv-mascote { position: absolute; z-index: 2; bottom: 0; right: 3.5vw; height: min(64vh, 590px); aspect-ratio: 764 / 1100; opacity: 0; visibility: hidden; will-change: transform; pointer-events: none; }
html.mov .tv-mascote img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
html.mov .tv-mascote img.tv-tarde { display: block; }
html.mov .tv-sombra { display: block; position: absolute; left: -30%; right: -30%; bottom: -12%; height: 46%; background: radial-gradient(50% 50% at 50% 70%, rgb(8 4 20 / .62), rgb(8 4 20 / 0) 72%); }
html.mov .tv-mascote--garganta { right: 5vw; height: min(64vh, 600px); aspect-ratio: 730 / 1100; }
html.mov .tv-bruma-baixa { display: block; position: absolute; left: -40%; right: -40%; bottom: -4%; height: 34%; background: radial-gradient(60% 70% at 50% 100%, rgb(214 196 240 / .34), rgb(140 110 200 / .12) 50%, rgb(140 110 200 / 0) 75%); }

/* ato 2: a Garganta em "cover" com câmera própria */
html.mov .tv-quadro2 { position: absolute; inset: 0; overflow: hidden; }
html.mov .tv-camera2 { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
html.mov .tv-foto2 { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* a marca: o logo oficial nítido no auge da costura (as partículas desenham o mesmo logo por baixo) */
html.mov .tv-marca { position: absolute; z-index: 4; left: 0; top: 0; opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 50% 50%; }
html.mov .tv-marca__logo { width: 100%; height: auto; }
html.mov .tv-marca__texto { position: absolute; left: 0; right: 0; top: calc(100% + 22px); text-align: center; font: 600 clamp(.95rem, 1.2vw, 1.12rem)/1.4 var(--fonte); color: var(--tinta-2); letter-spacing: .02em; }

/* ato 3: as camadas da câmera que recua (Plantão) */
html.mov .tv-cena3 { display: block; position: absolute; inset: 0; contain: strict; }
html.mov .cam { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; visibility: hidden; }
html.mov .cam > img { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; max-width: none; }
html.mov .c-mesa {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.tela { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #e8eaf2; }
.tela img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
.tela::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(158deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / 0) 34%), radial-gradient(130% 110% at 50% 45%, rgb(20 10 40 / 0) 62%, rgb(20 10 40 / .26) 100%); }
.caixilho { position: absolute; left: 927px; top: 442px; width: 151px; height: 84px; border: 1.6px solid #07050d; }
.caixilho i { position: absolute; top: 0; bottom: 0; width: 1.7px; background: #07050d; }
.caixilho i:nth-child(1) { left: 35.2px; } .caixilho i:nth-child(2) { left: 74px; } .caixilho i:nth-child(3) { left: 112.6px; }
.caixilho::after { content: ''; position: absolute; inset: 0; background: linear-gradient(112deg, rgb(255 255 255 / .09) 0 26%, rgb(255 255 255 / 0) 42%); }
/* letreiro (logo oficial com halo) na platibanda: px da foto do prédio */
html.mov .c-predio .letreiro { position: absolute; left: 850.8px; top: 124.8px; width: 138.4px; height: 72.3px; max-width: none; opacity: 0; }
html.mov .letreiro-luz { display: block; position: absolute; left: 700px; top: 104px; width: 440px; height: 130px; opacity: 0; background: radial-gradient(50% 50% at 50% 50%, rgb(200 40 230 / .34), rgb(110 40 220 / .12) 55%, rgb(110 40 220 / 0) 75%); }
html.mov .janela { display: block; position: absolute; opacity: 0; background-image: url('../img/janelas.webp'); background-repeat: no-repeat; }

/* partículas e véu da passagem */
html.mov .tv-bruma { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; visibility: hidden; }
html.mov .tv-passagem { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(70% 70% at 50% 46%, rgb(14 7 32 / .82), rgb(10 5 23 / .96)); opacity: 0; visibility: hidden; }

/* véus de leitura e frases (cada ato tem o seu; nunca duas frases juntas) */
html.mov .tv-veu { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
html.mov .tv-veu--ponte { background: linear-gradient(90deg, rgb(10 5 23 / .66) 0%, rgb(10 5 23 / .3) 38%, rgb(10 5 23 / 0) 62%), linear-gradient(180deg, rgb(10 5 23 / .42), rgb(10 5 23 / 0) 22%); }
html.mov .tv-veu--garganta { background: linear-gradient(90deg, rgb(14 7 32 / .84) 0%, rgb(14 7 32 / .55) 28%, rgb(14 7 32 / .1) 52%, rgb(14 7 32 / 0) 64%), linear-gradient(0deg, rgb(14 7 32 / .6) 0%, rgb(14 7 32 / 0) 30%), linear-gradient(180deg, rgb(14 7 32 / .5) 0%, rgb(14 7 32 / 0) 20%); }
html.mov .tv-veu--plantao { background: linear-gradient(90deg, rgb(9 6 24 / .93) 0%, rgb(9 6 24 / .8) 34%, rgb(9 6 24 / .35) 58%, rgb(9 6 24 / 0) 74%), linear-gradient(to bottom, rgb(9 6 24 / .6) 0%, rgb(9 6 24 / 0) 16%); opacity: 0; }
/* na fase da tela (logo depois do logo escuro) a tela clara entra amortecida: o véu da tela some quando a câmera chega na mesa */
html.mov .tv-veu--tela { background: radial-gradient(90% 90% at 70% 40%, rgb(12 6 30 / .35), rgb(12 6 30 / .62)); opacity: 0; }
html.mov .tv-frase { position: absolute; z-index: 5; left: var(--lado); top: 50%; width: min(600px, 46vw); transform: translateY(-50%); opacity: 0; visibility: hidden; }
html.mov .tv-frase a { pointer-events: auto; }
html.mov .tv-frase[data-frase="1"] { width: min(660px, 50vw); }
html.mov .tv-titulo { text-shadow: 0 2px 30px rgb(10 5 23 / .4); }
html.mov h1.tv-titulo span { display: block; }

/* ato 4: o trilho sobre o prédio (que continua da cena do plantão) */
html.mov .tv-trilho { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 92px; visibility: hidden; opacity: 0;
  background: linear-gradient(0deg, rgb(10 5 23 / .94) 0%, rgb(10 5 23 / .82) 46%, rgb(10 5 23 / .2) 66%, rgb(10 5 23 / 0) 78%), linear-gradient(90deg, rgb(10 5 23 / .7) 0%, rgb(10 5 23 / 0) 40%); }
html.mov .tv-trilho__cabeca { position: relative; padding: 0 var(--lado) 20px; max-width: calc(620px + 2 * var(--lado)); text-shadow: 0 2px 14px rgb(10 5 23 / .9), 0 0 4px rgb(10 5 23 / .7); }
@media (min-width: 761px) and (max-height: 840px) {
  html.mov .tv-trilho__apoio, html.mov .produto__fatos { display: none; }
  html.mov .tv-trilho__titulo { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
}
html.mov .tv-trilho__titulo { font-size: clamp(1.9rem, 3vw, 2.8rem); }
html.mov .tv-trilho__conta { display: block; margin-top: 18px; font: 700 .8rem/1 var(--fonte); letter-spacing: .12em; color: var(--tinta-2); }
html.mov .tv-trilho__conta b { color: #fff; }
html.mov .tv-trilho__janela { position: relative; overflow: hidden; padding-top: 8px; }
html.mov .tv-trilho__faixa { display: flex; gap: 20px; width: max-content; padding: 0 var(--lado); will-change: transform; }
html.mov .tv-trilho__nota { position: absolute; right: var(--lado); bottom: 22px; margin: 0; }

/* cortina de entrada: o logo grande sobre a noite, que vai para o cabeçalho */
html.mov .tv-cortina { display: block; position: absolute; inset: 0; z-index: 8; pointer-events: none; }
html.mov .tv-cortina__fundo { display: block; position: absolute; left: 0; right: 0; top: 0; height: 135%; will-change: transform;
  background: linear-gradient(180deg, rgb(14 7 32 / .9) 0%, rgb(14 7 32 / .84) 62%, rgb(14 7 32 / .5) 70%, rgb(14 7 32 / 0) 74%); }
html.mov .tv-cortina__logo { position: absolute; left: 0; top: 0; height: auto; max-width: none; transform-origin: 0 0; filter: drop-shadow(0 8px 40px rgb(139 43 226 / .45)); }
html.mov .tv-cortina__dica { position: absolute; left: 0; right: 0; bottom: 92px; text-align: center; font: 600 .86rem/1 var(--fonte); letter-spacing: .06em; color: var(--tinta-2); }
html.mov .tv-cortina__dica::after { content: ''; display: block; width: 2px; height: 26px; margin: 14px auto 0; background: linear-gradient(var(--magenta), transparent); animation: tv-desce 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes tv-desce { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* indicador dos atos: discreto, clicável, leva a câmera até cada ato */
html.mov .tv-atos { display: block; position: absolute; z-index: 7; left: 50%; bottom: 20px; transform: translateX(-50%); }
.tv-atos ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.tv-atos a { position: relative; display: flex; align-items: center; gap: 7px; padding: 10px 12px 12px; text-decoration: none; font: 600 .78rem/1 var(--fonte); color: var(--tinta-3); letter-spacing: .04em; transition: color .3s; white-space: nowrap; }
.tv-atos__n { font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .1em; }
.tv-atos a i { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .2); overflow: hidden; }
.tv-atos a i::after { content: ''; position: absolute; inset: 0; background: var(--degrade); transform-origin: left; transform: scaleX(var(--f, 0)); }
.tv-atos a:hover { color: var(--tinta); }
.tv-atos a[aria-current="step"] { color: #fff; }

/* =========================================================================================================
   CELULAR (até 760 px ou tela em pé): versão própria
   ========================================================================================================= */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root { --cab: 58px; }
  .selo { left: 12px; bottom: 10px; padding: 5px 9px 5px 7px; font-size: .64rem; max-width: calc(100vw - 24px); }
  .selo svg { width: 14px; height: 14px; }
  .tv-titulo { font-size: clamp(1.75rem, 7.6vw, 2.2rem); }
  h1.tv-titulo { font-size: clamp(2rem, 9vw, 2.5rem); }
  .tv-apoio { font-size: .98rem; }

  /* parado */
  html:not(.mov) .tv-ponte { height: auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; }
  html:not(.mov) .tv-ponte-parada { position: relative; height: 62vh; object-position: 80% 60%; }
  html:not(.mov) .tv-ponte::after { display: none; }
  html:not(.mov) .tv-ponte .tv-frase { position: relative; left: auto; top: auto; transform: none; width: auto; padding: 24px 20px 8px; order: 2; }
  html:not(.mov) .tv-ponte .tv-mascote { top: calc(62vh - 230px); bottom: auto; right: 10px; height: 230px; }
  html:not(.mov) .tv-garganta { grid-template-columns: 1fr; padding: 48px 20px 16px; gap: 20px; }
  html:not(.mov) .tv-garganta .tv-mascote { left: auto; right: 24px; top: 48px; bottom: auto; width: 130px; }
  html:not(.mov) .tv-plantao { grid-template-columns: 1fr; grid-template-areas: "f3" "p1" "p2" "p3" "pr" "f4"; padding: 48px 20px 16px; }
  html:not(.mov) .tv-plantao .tv-frase[data-frase="4"] { grid-area: f4; width: auto; margin: 0; }
  html:not(.mov) .tv-predio-parado::after { background: linear-gradient(0deg, rgb(14 7 32 / .5), rgb(14 7 32 / 0) 40%); }
  html:not(.mov) .tv-trilho { padding: 64px 20px 40px; }

  /* com movimento: frase no alto, cena no meio, buldogue embaixo */
  html.mov .tv-frase, html.mov .tv-frase[data-frase="1"] { left: 20px; right: 20px; width: auto; top: calc(var(--cab) + 44px); transform: none; }
  html.mov .tv-frase .botao { width: 100%; }
  html.mov .tv-veu--ponte, html.mov .tv-veu--garganta, html.mov .tv-veu--plantao { background: linear-gradient(180deg, rgb(10 5 23 / .82) 0%, rgb(10 5 23 / .55) 34%, rgb(10 5 23 / 0) 56%), linear-gradient(0deg, rgb(10 5 23 / .5) 0%, rgb(10 5 23 / 0) 22%); }
  html.mov .tv-veu--plantao { background: linear-gradient(180deg, rgb(10 5 23 / .95) 0%, rgb(10 5 23 / .88) 38%, rgb(10 5 23 / .5) 54%, rgb(10 5 23 / 0) 68%); }
  html.mov .tv-mascote { right: -4vw; height: 42vh; }
  html.mov .tv-mascote--garganta { right: -2vw; height: 40vh; }
  html.mov .tv-trilho { padding: 0 0 54px; background: linear-gradient(0deg, rgb(10 5 23 / .95) 0%, rgb(10 5 23 / .86) 52%, rgb(10 5 23 / .3) 70%, rgb(10 5 23 / 0) 82%); }
  html.mov .tv-trilho__cabeca { padding: 0 20px 14px; max-width: none; }
  html.mov .tv-frase[data-frase="4"] { top: auto; bottom: 52px; }
  html.mov .tv-frase[data-frase="4"]::before { content: ''; position: absolute; z-index: -1; left: -20px; right: -20px; top: -70px; bottom: -52px; background: linear-gradient(0deg, rgb(10 5 23 / .94) 0%, rgb(10 5 23 / .8) 60%, rgb(10 5 23 / 0) 100%); }
  html.mov .tv-trilho__titulo { font-size: 1.7rem; }
  html.mov .tv-trilho__cabeca { text-shadow: 0 2px 14px rgb(10 5 23 / .95), 0 0 4px rgb(10 5 23 / .8); }
  html.mov .tv-trilho__apoio { display: none; }
  html.mov .tv-trilho__conta { margin-top: 10px; }
  html.mov .tv-trilho__faixa { gap: 12px; padding: 0 20px; }
  html.mov .produto { width: 78vw; }
  html.mov .tv-trilho__nota { display: none; }
  html.mov .tv-cortina__dica { bottom: 70px; }
  /* atos: barra segmentada no alto, logo abaixo do cabeçalho */
  html.mov .tv-atos { left: 16px; right: 16px; top: calc(var(--cab) + 4px); bottom: auto; transform: none; }
  html.mov .tv-atos ol { gap: 6px; }
  html.mov .tv-atos li { flex: 1; }
  html.mov .tv-atos a { padding: 12px 0 0; font-size: 0; gap: 0; }
  html.mov .tv-atos a i { left: 0; right: 0; top: 0; bottom: auto; height: 3px; }
  html.mov .tv-atos a[aria-current="step"] { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
  html.mov .tv-atos a[aria-current="step"] .tv-atos__n { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  html.mov .produto__fatos { display: none; }
}

html.mov .tv-mascote img.tv-noite { visibility: visible; }