/* Tudo Celebra · landing (13/11/2026)
   Uma marcação, duas identidades. As cores e as letras vêm dos tokens (identidades.js, escritos no :root);
   o desenho de cada uma sai de [data-forma="arco"] (Original) e [data-forma="balao"] (Proposta 1).
   Movimento só em transform e opacity; com "reduzir movimento", tudo parado e à vista.
   Safari: moldura com canto redondo corta pelo clip-path, nunca por overflow + border-radius. */

/* ------------------------------------------------------------------ base */
:root {
  --pad: clamp(16px, 2.4vw, 32px);
  --topo: 76px;
  --fdv: normal; /* a variação da fonte de título, se a identidade pedir uma (identidades.js) */
  --tela: 100svh; /* a altura da tela; o script de conferência a fixa para medir a página inteira */
  --suave: cubic-bezier(.2, .75, .15, 1);
}
[data-forma="arco"] {
  --h1: clamp(50px, 7.2vw, 134px);
  --h2: clamp(40px, 5.8vw, 98px);
  --h3: clamp(26px, 2.4vw, 38px);
  --lh: 1;
  --raio: 0px;
}
[data-forma="balao"] {
  --h1: clamp(52px, 8.6vw, 166px); /* cada linha do título cabe na coluna de 900 a 1440 (medido, 13/11) */
  --h2: clamp(44px, 7.4vw, 132px);
  --h3: clamp(26px, 2.6vw, 42px);
  --lh: .9;
  --raio: 28px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--topo); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--ft);
  font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; -webkit-font-smoothing: antialiased;
}
main, .rodape { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); letter-spacing: var(--fde); line-height: var(--lh); margin: 0; text-wrap: balance; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.08; }
p { margin: 0; }
.kicker { font-family: var(--ft); font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta2); margin: 0 0 20px; }
.lead { font-size: clamp(19px, 1.6vw, 25px); line-height: 1.45; color: var(--tinta2); max-width: 34em; margin-top: 22px; text-wrap: pretty; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--tinta); color: var(--sobreTinta); padding: 12px 18px; border-radius: 10px; }
.pular:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.so-arco, .so-balao { display: none; }
[data-forma="arco"] .so-arco, [data-forma="balao"] .so-balao { display: block; }

/* ------------------------------------------------------------------ botões */
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.acoes-centro { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 58px; padding: 0 30px;
  border-radius: 999px; border: 2px solid var(--tinta); font: inherit; font-size: 18px; font-weight: 600; line-height: 1.1;
  text-decoration: none; cursor: pointer; transition: transform .25s var(--suave), box-shadow .25s var(--suave), background .25s;
}
.btn-p { background: var(--tinta); color: var(--sobreTinta); }
.btn-s { background: transparent; color: var(--tinta); }
.btn:hover { transform: translateY(-2px); }
[data-forma="balao"] .btn { border-radius: 18px; font-weight: 700; box-shadow: 4px 4px 0 var(--tinta); }
[data-forma="balao"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
[data-forma="balao"] .btn-s { background: var(--c2); color: var(--c2s); }

/* ------------------------------------------------------------------ a marca */
.logo { display: inline-flex; align-items: center; gap: .3em; line-height: 1; white-space: nowrap; }
.logo .sim { width: 1.5em; height: 1.5em; display: inline-flex; flex: none; }
.logo .sim svg { width: 100%; height: 100%; }
.wm { font-family: var(--fd); font-weight: var(--fdw); letter-spacing: var(--fde); }
.wm b { font-weight: inherit; }
.wm i { font-family: var(--fa); font-style: italic; font-weight: 400; letter-spacing: 0; font-size: 1.12em; }

/* ------------------------------------------------------------------ topo */
.topo {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; min-height: var(--topo);
  padding: 10px var(--pad); background: var(--fundo); transition: box-shadow .3s;
}
.topo.rolou { box-shadow: 0 1px 0 var(--linha); }
.topo-marca { font-size: 26px; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.topo-nav { display: flex; gap: 26px; margin-left: auto; font-size: 16px; font-weight: 600; }
.topo-nav a { text-decoration: none; color: var(--tinta2); padding: 10px 0; }
.topo-nav a:hover { color: var(--tinta); }
.btn-topo { min-height: 48px; padding: 0 22px; font-size: 16px; }
@media (max-width: 1080px) { .topo-nav { display: none; } .btn-topo { margin-left: auto; } }
@media (max-width: 480px) { .topo-marca { font-size: 22px; } .btn-topo { padding: 0 16px; min-height: 44px; font-size: 15px; } }

/* ------------------------------------------------------------------ as fotos e as molduras */
.moldura { position: relative; }
.foto { margin: 0; position: absolute; inset: 0; background: var(--linha); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto img[data-vel] { position: absolute; left: 0; top: -8%; height: 116%; will-change: transform; }
[data-forma="arco"] .foto { clip-path: inset(0 round 9999px 9999px 0 0); }
[data-forma="balao"] .foto { clip-path: inset(0 round var(--raio)); }
/* o fio dourado: o JS desenha o caminho pelo tamanho da moldura; aparece quando a moldura entra */
.fio { position: absolute; inset: -12px -12px 0 -12px; width: calc(100% + 24px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
.fio path { fill: none; stroke: var(--det); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); transition: stroke-dashoffset 2s var(--suave) .35s; }
.vis .fio path, .fio.vis path, .pronto .fio-hero path { stroke-dashoffset: 0; }
/* o aviso das fotos de outros perfis (só no laboratório) */
.ref-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 4; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 8px;
  background: #121212; color: #FFFFFF; font: 600 12px/1.3 'Figtree', system-ui, sans-serif; letter-spacing: .01em; pointer-events: none;
}
[data-forma="arco"] .ref-tag { left: 50%; transform: translateX(-50%); white-space: nowrap; }
[data-forma="balao"] .moldura::before { content: ''; position: absolute; inset: 0; border-radius: var(--raio); background: var(--cor, var(--c2)); transform: translate(14px, 14px) rotate(2.5deg); }

/* ------------------------------------------------------------------ balões */
.baloes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.balao { position: absolute; left: var(--x); top: var(--y); width: var(--s); will-change: transform; }
.balao-sobe { animation: balao-sobe 2.2s var(--suave) both; animation-delay: var(--d, 0s); animation-play-state: paused; }
.pronto [data-baloes="hero"] .balao-sobe, .pronto [data-baloes="palco"] .balao-sobe, .baloes.vis .balao-sobe { animation-play-state: running; }
.balao-svg { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: balao-balanca var(--t, 6s) ease-in-out infinite alternate; }
@keyframes balao-sobe { from { transform: translate3d(var(--dx, 0), 70vh, 0) rotate(-6deg); opacity: 0; } 20% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes balao-balanca { from { transform: rotate(-3.5deg) translateY(0); } to { transform: rotate(3.5deg) translateY(-10px); } }

/* ------------------------------------------------------------------ abertura */
.hero {
  position: relative; display: grid; gap: 0 clamp(28px, 4.5vw, 72px); min-height: calc(var(--tela) - var(--topo));
  padding: clamp(20px, 3vw, 48px) var(--pad) clamp(48px, 6vw, 96px); overflow-x: clip;
}
.hero-kicker, .hero-titulo, .hero-mais { position: relative; z-index: 2; }
.hero-titulo { font-size: var(--h1); }
.hero-titulo em { font-style: normal; }
.hero-titulo br.q { display: none; }
.hero-apoio { font-size: clamp(19px, 1.6vw, 25px); line-height: 1.45; color: var(--tinta2); max-width: 30em; }
.hero-palco { position: relative; z-index: 1; }
/* as palavras do título sobem uma a uma (o JS embrulha cada palavra) */
.js .hero-titulo .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.js .hero-titulo .w > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--suave); transition-delay: calc(var(--i) * 70ms + .1s); }
.js.pronto .hero-titulo .w > span { transform: none; }
.js .hero-kicker, .js .hero-mais { opacity: 0; transform: translateY(18px); transition: opacity .8s, transform .9s var(--suave); transition-delay: .55s; }
.js.pronto .hero-kicker, .js.pronto .hero-mais { opacity: 1; transform: none; }

/* Original: texto à esquerda, o palco dos arcos à direita */
[data-forma="arco"] .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". p" "k p" "t p" "m p" ". p"; align-items: end; }
[data-forma="arco"] .hero-kicker { grid-area: k; }
[data-forma="arco"] .hero-titulo { grid-area: t; }
[data-forma="arco"] .hero-mais { grid-area: m; align-self: start; margin-top: 32px; }
[data-forma="arco"] .hero-titulo em { color: var(--detTexto); }
[data-forma="arco"] .hero-palco { grid-area: p; align-self: end; justify-self: center; width: min(100%, calc((var(--tela) - var(--topo) - 80px) * .96)); aspect-ratio: 1 / 1.04; clip-path: inset(-100vh -100vw 0 -100vw); }
.arco { position: absolute; bottom: 0; border-radius: 9999px 9999px 0 0; }
.a-rosa { left: 1%; width: 44%; height: 80%; background: var(--c1); }
.hero-moldura { position: absolute; left: 21%; bottom: 0; width: 51%; height: 97%; }
.a-azul { right: 0; width: 35%; height: 60%; background: var(--c2); }
.a-pessego { left: 9%; width: 27%; height: 29%; background: var(--c3); z-index: 2; }
.chao { position: absolute; left: -6%; right: -6%; bottom: 0; height: 2px; background: var(--linha); z-index: 3; }
.fio-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.fio-hero path { transition-duration: 2.6s; transition-delay: 1.1s; }
.baloes-palco { z-index: 4; }
.js [data-forma="arco"] .hero-palco > .arco, .js [data-forma="arco"] .hero-moldura { transform: translateY(103%); transition: transform 1.3s var(--suave); }
.js [data-forma="arco"] .a-rosa { transition-delay: .15s; }
.js [data-forma="arco"] .hero-moldura { transition-delay: .3s; }
.js [data-forma="arco"] .a-azul { transition-delay: .45s; }
.js [data-forma="arco"] .a-pessego { transition-delay: .6s; }
.js.pronto[data-forma="arco"] .hero-palco > .arco, .js.pronto[data-forma="arco"] .hero-moldura { transform: none; }

/* Proposta 1: o título enorme em cima, de ponta a ponta; embaixo o texto e a foto com o bloco de cor e o selo */
[data-forma="balao"] .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". p" "k p" "t p" "m p" ". p"; align-items: end; }
[data-forma="balao"] .hero-kicker { grid-area: k; }
[data-forma="balao"] .hero-titulo { grid-area: t; }
[data-forma="balao"] .hero-titulo em { font-family: var(--fa); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--c1); }
[data-forma="balao"] .hero-mais { grid-area: m; align-self: start; margin-top: clamp(28px, 3vw, 48px); }
[data-forma="balao"] .hero-palco { grid-area: p; align-self: center; justify-self: end; width: min(100%, calc((var(--tela) - var(--topo) - 120px) * .8)); aspect-ratio: 4 / 5; }
[data-forma="balao"] .bloco-cor { position: absolute; inset: 7% 0 -2% 10%; border-radius: 40px; background: var(--c2); transform: rotate(4deg); }
[data-forma="balao"] .hero-moldura { position: absolute; inset: 0 7% 5% 0; left: 0; bottom: 5%; width: auto; height: auto; transform: rotate(-2.5deg); }
[data-forma="balao"] .hero-moldura::before { display: none; }
[data-forma="balao"] .hero-moldura .foto { --raio: 36px; }
.selo-gira { position: absolute; z-index: 3; width: clamp(108px, 12vw, 184px); aspect-ratio: 1; left: -5%; top: -9%; will-change: transform; }
.selo-roda { width: 100%; height: 100%; animation: gira 22s linear infinite; }
.selo-roda svg { width: 100%; height: 100%; display: block; }
@keyframes gira { to { transform: rotate(360deg); } }
.js [data-forma="balao"] .bloco-cor { transform: rotate(4deg) scale(.6); opacity: 0; transition: transform 1.1s var(--suave) .35s, opacity .6s .35s; }
.js [data-forma="balao"] .hero-moldura { transform: rotate(-2.5deg) translateY(40px); opacity: 0; transition: transform 1.1s var(--suave) .5s, opacity .7s .5s; }
.js [data-forma="balao"] .selo-gira { opacity: 0; transition: opacity .6s .9s; }
.js.pronto[data-forma="balao"] .bloco-cor { transform: rotate(4deg); opacity: 1; }
.js.pronto[data-forma="balao"] .hero-moldura { transform: rotate(-2.5deg); opacity: 1; }
.js.pronto[data-forma="balao"] .selo-gira { opacity: 1; }

@media (min-width: 900px) { .hero-titulo br.q { display: inline; } }
@media (max-width: 899px) {
  .hero { min-height: 0; }
  [data-forma="arco"] .hero, [data-forma="balao"] .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "k" "t" "m" "p"; }
  [data-forma="arco"] .hero-palco { width: min(100%, 560px); margin-top: 48px; }
  [data-forma="balao"] { --h1: clamp(50px, 12vw, 108px); }
  [data-forma="balao"] .hero-palco { margin-top: 64px; width: min(calc(100% - 16px), 520px); justify-self: start; }
}

/* ------------------------------------------------------------------ faixa de festas */
.faixa { overflow: hidden; border-block: 1px solid var(--linha); padding: clamp(18px, 2vw, 28px) 0; }
.faixa-trilho { display: flex; align-items: center; width: max-content; white-space: nowrap; will-change: transform; font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); letter-spacing: var(--fde); line-height: 1.1; font-size: clamp(38px, 5.4vw, 88px); }
.faixa-trilho i { flex: none; margin: 0 .55em; }
[data-forma="arco"] .faixa-trilho i { width: .42em; height: .56em; border: 1.5px solid var(--det); border-bottom: 0; border-radius: 9999px 9999px 0 0; }
[data-forma="balao"] .faixa { background: var(--tinta); border: 0; }
[data-forma="balao"] .faixa-trilho { font-size: clamp(44px, 7vw, 120px); }
[data-forma="balao"] .faixa-trilho span:nth-of-type(5n+1) { color: var(--c2); }
[data-forma="balao"] .faixa-trilho span:nth-of-type(5n+2) { color: var(--c6); }
[data-forma="balao"] .faixa-trilho span:nth-of-type(5n+3) { color: var(--c4); }
[data-forma="balao"] .faixa-trilho span:nth-of-type(5n+4) { color: var(--c3); }
[data-forma="balao"] .faixa-trilho span:nth-of-type(5n+5) { color: var(--c5); }
[data-forma="balao"] .faixa-trilho i { width: .36em; height: .44em; border-radius: 50% 50% 48% 48%; background: var(--sobreTinta); }

/* ------------------------------------------------------------------ seções */
.sec { position: relative; padding: clamp(80px, 10vw, 168px) var(--pad); }
.cab { position: relative; z-index: 2; max-width: 1100px; }
.cab-linha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: end; max-width: none; }
.cab-linha .lead { margin: 0; }
@media (max-width: 899px) { .cab-linha { grid-template-columns: minmax(0, 1fr); } .cab-linha .lead { margin-top: 4px; } }
.js .rv { opacity: 0; transform: translateY(30px) rotate(var(--rot, 0deg)); transition: opacity .8s ease, transform 1s var(--suave); transition-delay: var(--d, 0s); }
.js .rv.vis { opacity: 1; transform: rotate(var(--rot, 0deg)); }

/* ------------------------------------------------------------------ os dois jeitos */
.jeitos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 96px); position: relative; z-index: 2; }
.jeito { display: grid; grid-template-rows: auto 1fr; background: var(--cor); color: var(--sobre); padding: clamp(28px, 4vw, 72px); gap: clamp(28px, 3vw, 48px); }
.jeito-moldura { width: min(100%, 560px); aspect-ratio: 4 / 5; justify-self: center; }
.jeito-nome { font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.jeito h3 { font-size: clamp(30px, 3.2vw, 54px); max-width: 16ch; }
.marcas { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; }
.marcas li { padding: 14px 0 14px 34px; border-top: 1px solid currentColor; position: relative; font-size: clamp(17px, 1.3vw, 20px); }
.marcas li:last-child { border-bottom: 1px solid currentColor; }
.marcas li::before { content: ''; position: absolute; left: 4px; top: 22px; width: 14px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.jeito-para { margin-top: 24px; font-weight: 600; }
[data-forma="arco"] .jeitos-grade { margin-inline: calc(var(--pad) * -1); }
[data-forma="arco"] .j-montado { --cor: var(--c1); --sobre: var(--c1s); }
[data-forma="arco"] .j-kit { --cor: var(--c2); --sobre: var(--c2s); }
[data-forma="arco"] .jeito-moldura { aspect-ratio: 3 / 4; width: min(100%, 480px); }
[data-forma="arco"] .jeito-moldura .fio path { stroke: var(--detTexto); }
[data-forma="balao"] .jeitos-grade { gap: clamp(20px, 2.4vw, 36px); }
[data-forma="balao"] .jeito { border-radius: 40px; }
[data-forma="balao"] .j-montado { --cor: var(--c3); --sobre: var(--c3s); }
[data-forma="balao"] .j-kit { --cor: var(--c2); --sobre: var(--c2s); }
[data-forma="balao"] .jeito-moldura { --cor: var(--sup); }
[data-forma="balao"] .j-kit .jeito-moldura { --cor: var(--c6); }
[data-forma="balao"] .j-montado .jeito-moldura { --cor: var(--c4); }
[data-forma="balao"] .jeito-moldura .foto { transform: rotate(-2deg); }
[data-forma="balao"] .j-kit .jeito-moldura .foto { transform: rotate(2deg); }
[data-forma="balao"] .jeito h3 { letter-spacing: -.035em; }
@media (max-width: 899px) { .jeitos-grade { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ os cenários */
.cen-lista { list-style: none; margin: clamp(48px, 5vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(16px, 2vw, 32px); }
.cen h3 { margin-top: 26px; font-size: clamp(26px, 2.2vw, 36px); }
.cen p { margin-top: 8px; color: var(--tinta2); font-size: 17px; line-height: 1.45; }
.cen-moldura { aspect-ratio: 3 / 4; }
.cen:nth-child(4n+2), .cen:nth-child(4n+4) { margin-top: clamp(0px, 5vw, 80px); }
.cen:nth-child(2) { --d: .08s; } .cen:nth-child(3) { --d: .16s; } .cen:nth-child(4) { --d: .24s; }
[data-forma="balao"] .cen-moldura { aspect-ratio: 4 / 5; }
[data-forma="balao"] .cen:nth-child(6n+1) { --cor: var(--c1); } [data-forma="balao"] .cen:nth-child(6n+2) { --cor: var(--c2); }
[data-forma="balao"] .cen:nth-child(6n+3) { --cor: var(--c3); } [data-forma="balao"] .cen:nth-child(6n+4) { --cor: var(--c4); }
[data-forma="balao"] .cen:nth-child(6n+5) { --cor: var(--c5); } [data-forma="balao"] .cen:nth-child(6n+6) { --cor: var(--c6); }
[data-forma="balao"] .cen:nth-child(even) .cen-moldura::before { transform: translate(-12px, 14px) rotate(-3deg); }
[data-forma="balao"] .cen .foto { transition: transform .5s var(--suave); }
[data-forma="balao"] .cen:hover .foto { transform: rotate(-1.5deg) scale(1.02); }
[data-forma="balao"] .cen h3 { letter-spacing: -.035em; }
@media (max-width: 1179px) { .cen-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cen:nth-child(n) { margin-top: 0; } .cen:nth-child(3n+2) { margin-top: clamp(0px, 5vw, 64px); } }
@media (max-width: 899px) { .cen-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cen:nth-child(n) { margin-top: 0; } .cen:nth-child(even) { margin-top: 48px; } }
@media (max-width: 639px) {
  .cen-lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding: 24px var(--pad) 12px; scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .cen-lista::-webkit-scrollbar { display: none; }
  .cen { scroll-snap-align: start; }
  .cen:nth-child(n) { margin-top: 0; }
}

/* ------------------------------------------------------------------ como funciona */
.como { background: var(--sup); }
.como-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.passos { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 10px; }
.passo {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; text-align: left; font: inherit; color: var(--tinta);
  background: transparent; border: 2px solid transparent; border-radius: 22px; padding: 18px 20px; cursor: pointer; transition: background .3s, border-color .3s;
}
.passo b { font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); font-size: 30px; line-height: 1; width: 58px; height: 64px; display: grid; place-items: center; flex: none; padding-top: 6px; }
.passo strong { display: block; font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); letter-spacing: var(--fde); font-size: clamp(24px, 2.2vw, 34px); line-height: 1.08; }
.passo small { display: block; margin-top: 8px; font-size: 17px; line-height: 1.45; color: var(--tinta2); }
.passo[aria-pressed="true"] { background: var(--fundo); border-color: var(--linha); }
[data-forma="arco"] .passo b { border: 1.5px solid var(--det); border-bottom: 0; border-radius: 9999px 9999px 0 0; color: var(--detTexto); }
[data-forma="arco"] .passo[aria-pressed="true"] b { background: var(--c1); border-color: var(--c1); color: var(--c1s); }
[data-forma="balao"] .como { background: var(--c2); }
[data-forma="balao"] .como .kicker, [data-forma="balao"] .como .passo small { color: var(--c2s); }
[data-forma="balao"] .passo b { border-radius: 50% 50% 46% 46%; background: var(--sup); color: var(--tinta); width: 60px; height: 66px; padding-top: 0; }
[data-forma="balao"] .passo[aria-pressed="true"] { background: var(--sup); border-color: var(--tinta); box-shadow: 5px 5px 0 var(--tinta); }
[data-forma="balao"] .passo[aria-pressed="true"] b { background: var(--c1); color: var(--c1s); }
[data-forma="balao"] .passo[aria-pressed="true"] small { color: var(--tinta2); }
.piloto { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.piloto-ico { width: 12px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.piloto[aria-pressed="true"] .piloto-ico { border: 0; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.celular-lugar { display: grid; justify-items: center; gap: 18px; }
.celular { position: relative; width: clamp(270px, 25vw, 350px); aspect-ratio: 9 / 18.6; background: var(--tinta); border-radius: 48px; padding: 11px; box-shadow: 0 30px 60px -30px rgba(40, 20, 10, .45); }
[data-forma="balao"] .celular { box-shadow: 12px 12px 0 var(--tinta); transform: rotate(2deg); }
.celular-tela { position: relative; width: 100%; height: 100%; background: var(--fundo); clip-path: inset(0 round 38px); }
.celular-nota { font-size: 14px; color: var(--tinta2); text-align: center; max-width: 30ch; }
[data-forma="balao"] .celular-nota { color: var(--c2s); }
.tela { position: absolute; inset: 0; padding: 46px 18px 18px; opacity: 0; transform: translateX(24px); transition: opacity .45s, transform .55s var(--suave); font-family: var(--ft); color: var(--tinta); }
.tela.ativa { opacity: 1; transform: none; }
.tl-cab { font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); letter-spacing: var(--fde); font-size: 26px; line-height: 1.05; margin-bottom: 16px; }
.tl-linha { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 16px; border: 2px solid transparent; margin-bottom: 2px; }
.tl-linha img { width: 60px; height: 68px; object-fit: cover; }
.tl-botao { position: absolute; left: 18px; right: 18px; bottom: 22px; min-height: 48px; display: grid; place-items: center; border-radius: 999px; background: var(--tinta); color: var(--sobreTinta); font-size: 15px; font-weight: 700; }
[data-forma="balao"] .tl-botao { border-radius: 14px; }
.tela.ativa .tl-botao { animation: aperta .5s ease 2.1s both; }
@keyframes aperta { 50% { transform: scale(.95); } }
[data-forma="arco"] .tl-linha img, [data-forma="arco"] .tl-foto { clip-path: inset(0 round 9999px 9999px 0 0); }
[data-forma="balao"] .tl-linha img { clip-path: inset(0 round 12px); }
.tl-linha b { display: block; font-size: 15px; line-height: 1.2; }
.tl-linha small { display: block; font-size: 13px; color: var(--tinta2); }
.tela.ativa .tl-toque { animation: toque 2.6s ease both; }
@keyframes toque { 0%, 35% { border-color: transparent; background: transparent; } 50%, 100% { border-color: var(--tinta); background: var(--sup); } }
.tl-foto { height: 44%; overflow: hidden; }
[data-forma="balao"] .tl-foto { clip-path: inset(0 round 18px); }
.tl-foto img { width: 100%; height: 100%; object-fit: cover; }
.tl-tit { font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); letter-spacing: var(--fde); font-size: 24px; line-height: 1.05; margin-top: 14px; }
.tl-rot { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta2); margin-top: 14px; }
.tl-cores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 10px; }
.tl-cores i { aspect-ratio: 1; border-radius: 50%; background: var(--b); border: 1.5px solid var(--linha); position: relative; }
.tela.ativa .tl-cores i.sim { animation: escolhe .5s var(--suave) both; }
.tela.ativa .tl-cores i.sim:nth-child(1) { animation-delay: .7s; } .tela.ativa .tl-cores i.sim:nth-child(2) { animation-delay: 1.3s; }
@keyframes escolhe { from { box-shadow: 0 0 0 0 var(--tinta); } to { box-shadow: 0 0 0 3px var(--fundo), 0 0 0 5px var(--tinta); } }
.tl-escolha { margin-top: 14px; font-size: 15px; font-weight: 600; }
.tl-mes { font-size: 14px; font-weight: 700; color: var(--tinta2); margin-bottom: 8px; }
.tl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 13px; }
.tl-cal span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; }
.tl-cal .cab { font-weight: 700; color: var(--tinta2); }
.tela.ativa .tl-cal .hoje { animation: dia .4s var(--suave) .8s both; }
@keyframes dia { from { background: transparent; color: var(--tinta); } to { background: var(--tinta); color: var(--sobreTinta); } }
.tl-campo { margin-top: 12px; padding: 10px 14px; border: 1.5px solid var(--linha); border-radius: 14px; background: var(--sup); }
.tl-campo small { display: block; font-size: 12px; color: var(--tinta2); }
.tl-campo b { font-size: 15px; }
.tela-zap { background: var(--sup); }
.tl-zap-cab { display: flex; gap: 10px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--linha); margin-bottom: 18px; }
.tl-zap-av { width: 40px; height: 40px; border-radius: 50%; background: var(--fundo); display: grid; place-items: center; font-size: 15px; }
.tl-zap-av .logo .wm { display: none; }
.tl-zap-cab b { display: block; font-size: 15px; }
.tl-zap-cab small { display: block; font-size: 12px; color: var(--tinta2); }
.tl-bolha { margin-left: auto; width: 92%; background: var(--c1); color: var(--c1s); border-radius: 18px 18px 4px 18px; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; }
[data-forma="balao"] .tl-bolha { background: var(--c2); color: var(--c2s); }
.tl-bolha p + p { margin-top: 8px; }
.tl-bolha small { display: block; text-align: right; margin-top: 8px; font-size: 12px; font-weight: 700; }
.tela.ativa .tl-bolha { animation: bolha .7s var(--suave) .4s both; }
@keyframes bolha { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) { .como-grade { grid-template-columns: minmax(0, 1fr); } .celular-lugar { order: 2; } }

/* ------------------------------------------------------------------ o que vem no kit */
.kit-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.kit-fotos { position: relative; aspect-ratio: 1 / 1.12; }
.kit-moldura { position: absolute; left: 0; top: 0; width: 72%; height: 88%; }
.kit-moldura-2 { position: absolute; right: 0; bottom: 0; width: 44%; height: 50%; z-index: 2; }
[data-forma="arco"] .kit-moldura-2 { outline: 10px solid var(--fundo); clip-path: inset(-10px round 9999px 9999px 0 0); }
[data-forma="balao"] .kit-moldura { --cor: var(--c5); }
[data-forma="balao"] .kit-moldura-2 { --cor: var(--c3); }
.kit-lista { list-style: none; padding: 0; margin: 44px 0 0; counter-reset: k; }
.kit-lista li { counter-increment: k; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; padding: 20px 0; border-top: 1px solid var(--linha); }
.kit-lista li:last-child { border-bottom: 1px solid var(--linha); }
.kit-lista li::before { content: counter(k); grid-row: span 2; font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); font-size: 40px; line-height: 1; color: var(--detTexto); }
.kit-lista b { font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); letter-spacing: var(--fde); font-size: clamp(26px, 2.2vw, 36px); line-height: 1.1; }
.kit-lista span { color: var(--tinta2); margin-top: 4px; }
[data-forma="balao"] .kit-lista li::before { width: 50px; height: 56px; border-radius: 50% 50% 46% 46%; display: grid; place-items: center; font-size: 26px; background: var(--c); color: var(--cs); }
[data-forma="balao"] .kit-lista li:nth-child(1) { --c: var(--c2); --cs: var(--c2s); } [data-forma="balao"] .kit-lista li:nth-child(2) { --c: var(--c3); --cs: var(--c3s); }
[data-forma="balao"] .kit-lista li:nth-child(3) { --c: var(--c6); --cs: var(--c6s); } [data-forma="balao"] .kit-lista li:nth-child(4) { --c: var(--c4); --cs: var(--c4s); }
[data-forma="balao"] .kit-lista li:nth-child(5) { --c: var(--c5); --cs: var(--c5s); }
.kit-nota { margin-top: 30px; }
.kit-mais { margin-top: 18px; padding: 18px 22px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linha); }
.kit-mais span { font-weight: 700; }
@media (max-width: 899px) { .kit-grade { grid-template-columns: minmax(0, 1fr); } .kit-fotos { width: min(100%, 560px); } }

/* ------------------------------------------------------------------ entrega e retirada */
.entrega { background: var(--sup); }
.linhas { display: grid; gap: clamp(56px, 6vw, 96px); margin-top: clamp(48px, 6vw, 88px); }
.linha-tempo h3 { font-size: clamp(30px, 3vw, 50px); }
.lt-trilho { position: relative; margin-top: 28px; }
.lt-fio { position: absolute; left: 0; top: 4px; width: 100%; height: 40px; overflow: visible; }
.lt-fio path { fill: none; stroke: var(--det); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lt-trilho ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; position: relative; }
.lt-trilho li { padding-top: 68px; position: relative; }
.lt-trilho li:nth-child(2) { --d: .12s; } .lt-trilho li:nth-child(3) { --d: .24s; }
.lt-trilho li i { position: absolute; left: 0; top: 0; width: 40px; height: 48px; }
.lt-trilho b { display: block; font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); letter-spacing: var(--fde); font-size: clamp(26px, 2.4vw, 40px); line-height: 1.05; }
.lt-trilho span { display: block; margin-top: 8px; color: var(--tinta2); max-width: 22em; }
[data-forma="arco"] .lt-trilho li i { background: var(--c); border-radius: 9999px 9999px 0 0; }
[data-forma="arco"] .lt-trilho li:nth-child(1) i { --c: var(--c1); } [data-forma="arco"] .lt-trilho li:nth-child(2) i { --c: var(--c2); } [data-forma="arco"] .lt-trilho li:nth-child(3) i { --c: var(--c3); }
[data-forma="balao"] .entrega { background: var(--fundo); }
[data-forma="balao"] .lt-fio path { stroke: var(--cor); stroke-width: 10; }
[data-forma="balao"] .linha-tempo:nth-child(1) { --cor: var(--c3); } [data-forma="balao"] .linha-tempo:nth-child(2) { --cor: var(--c1); }
[data-forma="balao"] .lt-trilho li i { width: 44px; height: 52px; border-radius: 50% 50% 46% 46%; background: var(--tinta); }
@media (max-width: 767px) {
  .lt-fio { display: none; }
  .lt-trilho ol { grid-template-columns: minmax(0, 1fr); gap: 0; border-left: 2px solid var(--det); margin-left: 20px; }
  [data-forma="balao"] .lt-trilho ol { border-left: 8px solid var(--cor); margin-left: 18px; }
  .lt-trilho li { padding: 6px 0 30px 40px; }
  .lt-trilho li i { left: -21px; top: 4px; width: 40px; height: 44px; }
  [data-forma="balao"] .lt-trilho li i { left: -26px; }
}

/* ------------------------------------------------------------------ onde atendemos */
.area-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.area-mapa { position: relative; width: min(100%, 620px); aspect-ratio: 1; justify-self: center; margin-top: 30px; }
.area-mapa svg { width: 100%; height: 100%; overflow: visible; }
.anel { stroke: var(--det); stroke-width: 1.2; }
.a3 { fill: var(--c3); } .a2 { fill: var(--c2); } .a1 { fill: var(--c1); }
.centro { fill: var(--tinta); }
.area-rot { position: absolute; left: 50%; transform: translate(-50%, -50%); font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--tinta); background: var(--fundo); padding: 4px 12px; border-radius: 999px; }
.r1 { top: 30%; } .r2 { top: 14.5%; } .r3 { top: -1%; transform: translate(-50%, -100%); }
.area-cidade { position: absolute; left: 50%; top: 57%; transform: translateX(-50%); font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); font-size: clamp(18px, 1.8vw, 26px); line-height: 1; color: var(--sobreTinta); background: var(--tinta); padding: 8px 16px 9px; border-radius: 999px; white-space: nowrap; }
.area .num { color: var(--detTexto); white-space: nowrap; }
[data-forma="balao"] .anel { stroke: var(--tinta); stroke-width: 2; }
[data-forma="balao"] .a3 { fill: var(--c2); } [data-forma="balao"] .a2 { fill: var(--c3); } [data-forma="balao"] .a1 { fill: var(--c1); }
[data-forma="balao"] .area-cidade { font-weight: 700; }
[data-forma="balao"] .area .num { color: var(--tinta); background: var(--c2); padding: 0 .12em; border-radius: .12em; }
@media (max-width: 899px) { .area-grade { grid-template-columns: minmax(0, 1fr); } .area-mapa { order: 2; width: min(100%, 460px); } }

/* ------------------------------------------------------------------ as regras */
.regras-lista { list-style: none; padding: 0; margin: clamp(48px, 6vw, 88px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.regra { padding: clamp(28px, 3vw, 48px); background: var(--cor); color: var(--sobre); display: flex; flex-direction: column; }
.regra-grande { display: block; font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); letter-spacing: var(--fde); font-size: clamp(44px, 4.2vw, 76px); line-height: .95; margin-bottom: 18px; }
.regra h3 { font-family: var(--ft); font-weight: 700; letter-spacing: 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
.regra p { margin-top: 6px; }
.regra:nth-child(3n+2) { --d: .1s; } .regra:nth-child(3n+3) { --d: .2s; }
[data-forma="arco"] .regra { border-radius: 9999px 9999px 0 0; padding-top: clamp(64px, 6vw, 96px); text-align: center; align-items: center; justify-content: center; min-height: clamp(300px, 24vw, 380px); }
[data-forma="arco"] .regra-grande { font-size: clamp(48px, 4.6vw, 84px); }
[data-forma="arco"] .regra:nth-child(3n+1) { --cor: var(--c1); --sobre: var(--c1s); }
[data-forma="arco"] .regra:nth-child(3n+2) { --cor: var(--c2); --sobre: var(--c2s); }
[data-forma="arco"] .regra:nth-child(3n+3) { --cor: var(--c3); --sobre: var(--c3s); }
[data-forma="balao"] .regra { border-radius: var(--raio); }
[data-forma="balao"]:not(.js) .regra { transform: rotate(var(--rot)); }
[data-forma="balao"] .regra:nth-child(odd) { --rot: -1.2deg; } [data-forma="balao"] .regra:nth-child(even) { --rot: 1deg; }
[data-forma="balao"] .regra:nth-child(1) { --cor: var(--c2); --sobre: var(--c2s); }
[data-forma="balao"] .regra:nth-child(2) { --cor: var(--c3); --sobre: var(--c3s); }
[data-forma="balao"] .regra:nth-child(3) { --cor: var(--c4); --sobre: var(--c4s); }
[data-forma="balao"] .regra:nth-child(4) { --cor: var(--c6); --sobre: var(--c6s); }
[data-forma="balao"] .regra:nth-child(5) { --cor: var(--c5); --sobre: var(--c5s); }
[data-forma="balao"] .regra:nth-child(6) { --cor: var(--sup); --sobre: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
@media (max-width: 1023px) { .regras-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .regras-lista { grid-template-columns: minmax(0, 1fr); } [data-forma="arco"] .regra { min-height: 0; } }
.confirmar { display: none; }
.interno .confirmar { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #FFE7A3; color: #3D2C00; font: 700 12px/1.5 'Figtree', system-ui, sans-serif; letter-spacing: .02em; }

/* ------------------------------------------------------------------ dúvidas */
.duvidas-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.duvidas-grade .cab { position: sticky; top: calc(var(--topo) + 32px); }
.faq details { border-top: 1px solid var(--linha); }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; min-height: 44px;
  font-family: var(--fd); font-variation-settings: var(--fdv); font-weight: var(--fdw); letter-spacing: var(--fde); font-size: clamp(24px, 2vw, 32px); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--det);
  background: linear-gradient(var(--tinta), var(--tinta)) center / 14px 2px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 2px 14px no-repeat; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 56px 28px 0; color: var(--tinta2); font-size: clamp(17px, 1.3vw, 20px); }
[data-forma="balao"] .faq summary::after { border: 0; background-color: var(--c2); }
[data-forma="balao"] .faq details[open] summary::after { background-color: var(--c6); }
@media (max-width: 899px) { .duvidas-grade { grid-template-columns: minmax(0, 1fr); } .duvidas-grade .cab { position: static; } .faq details p { padding-right: 0; } }

/* ------------------------------------------------------------------ convite */
.convite { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center;
  padding: clamp(80px, 10vw, 168px) var(--pad); overflow: clip; }
.convite-texto { position: relative; z-index: 2; }
.convite-titulo { font-size: var(--h1); }
.convite .lead { color: inherit; }
.convite-palco { position: relative; width: min(100%, 620px); aspect-ratio: 1 / 1.02; justify-self: center; }
.convite-moldura { position: absolute; left: 18%; bottom: 0; width: 54%; height: 96%; }
.c-rosa { left: 0; width: 36%; height: 58%; background: var(--sup); }
.c-azul { right: 0; width: 34%; height: 72%; background: var(--c2); }
[data-forma="arco"] .convite { background: var(--c1); color: var(--c1s); }
[data-forma="arco"] .convite .kicker { color: var(--c1s); }
[data-forma="arco"] .convite-palco { clip-path: inset(-100vh -100vw 0 -100vw); }
[data-forma="arco"] .convite-palco > .arco, [data-forma="arco"] .convite-moldura { transform: translateY(var(--sobe, 0%)); }
[data-forma="balao"] .convite { background: var(--tinta); color: var(--sobreTinta); }
[data-forma="balao"] .convite .btn-p { background: var(--c2); color: var(--c2s); border-color: var(--c2); box-shadow: 4px 4px 0 var(--c1); }
[data-forma="balao"] .convite .btn-s { background: transparent; color: var(--sobreTinta); border-color: var(--sobreTinta); box-shadow: 4px 4px 0 var(--sobreTinta); }
[data-forma="balao"] .convite-moldura { inset: 6% 6% 6% 6%; width: auto; height: auto; --cor: var(--c1); }
[data-forma="balao"] .selo-convite { left: auto; right: -2%; top: -6%; }
@media (max-width: 899px) { .convite { grid-template-columns: minmax(0, 1fr); } .convite-palco { order: 2; width: min(100%, 480px); } }

/* ------------------------------------------------------------------ rodapé */
.rodape { background: var(--tinta); color: var(--sobreTinta); padding: 56px var(--pad) 48px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.rodape-marca { font-size: 30px; }
.rodape p { font-size: 16px; max-width: 34em; }
.rodape nav { display: flex; gap: 24px; font-weight: 600; font-size: 16px; }
.rodape nav a { text-decoration: none; padding: 10px 0; }
.rodape nav a:hover { text-decoration: underline; }
.rodape p.rodape-fim { grid-column: 1 / -1; max-width: none; padding-top: 24px; border-top: 1px solid currentColor; font-size: 14px; }
[data-forma="balao"] .rodape { border-top: 2px solid var(--c2); }
@media (max-width: 899px) { .rodape { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ a barra do laboratório (só com TC.INTERNO) */
.lab { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: #121212; color: #FFFFFF; font: 600 13px/1 'Figtree', system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.lab a { color: #FFFFFF; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 6px 0 2px; }
.lab a, .lab button { white-space: nowrap; }
.lab button { font: inherit; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: #FFFFFF; cursor: pointer; }
.lab button[aria-pressed="true"] { background: #FFFFFF; color: #121212; }
@media (max-width: 479px) { .lab { right: 50%; transform: translateX(50%); bottom: 12px; } .lab > span { display: none; } .lab > a { padding: 0 4px; } .lab { gap: 2px; padding-left: 12px; max-width: calc(100vw - 16px); } .lab button { padding: 0 11px; } }

/* ------------------------------------------------------------------ reduzir movimento: tudo à vista e parado */
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .hero-kicker, .js .hero-mais, .js .hero-titulo .w > span,
  .js [data-forma] .hero-palco > *, .js [data-forma] .hero-moldura { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-forma="balao"] .hero-moldura { transform: rotate(-2.5deg) !important; }
  [data-forma="balao"] .bloco-cor { transform: rotate(4deg) !important; }
  .balao-sobe, .balao-svg, .selo-roda, .tela.ativa *, .tela.ativa .tl-toque { animation: none !important; }
  .fio path { transition: none; stroke-dashoffset: 0; }
}