/* RENGUI · site (v8.4)
   Tema claro (papel quase branco, títulos em marinho, dourado nos detalhes e nas ações) com blocos institucionais em
   marinho: a abertura com o vídeo, os cartões do App e da Gestão e o rodapé. As cores vêm de variáveis; um bloco
   escuro (.escuro) só troca as variáveis, e os mesmos componentes servem nos dois fundos (nenhuma regra duplicada).
   Com "reduzir movimento", tudo parado. */

/* fontes próprias (SIL Open Font License 1.1, ver fonts/LICENCA.txt), servidas pelo próprio site */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin.woff2") format("woff2"); font-weight: 500 800; font-stretch: 100% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  /* marca: as cores oficiais das plataformas */
  --marinho: #0B1B33;
  --noite: #060E1C;
  --ouro: #B8954F;
  --ouro-logo: #C9A55C;
  --ouro-claro: #D6BC85;
  /* tema claro */
  --fundo: #F7F6F3;
  --fundo-2: #EFEDE8;
  --superficie: #FFFFFF;
  --titulo: #0B1B33;
  --tinta: #1F2B3F;
  --tinta-2: #475569;
  --aco: #5B687C;
  --ouro-txt: #7D5F27;
  --foco: #85652A;
  --linha: rgba(11, 27, 51, 0.09);
  --linha-forte: rgba(11, 27, 51, 0.18);
  --vela: rgba(11, 27, 51, 0.035);
  --vela-2: rgba(11, 27, 51, 0.06);
  --campo: #FFFFFF;
  --campo-borda: rgba(11, 27, 51, 0.17);
  --campo-borda-2: rgba(11, 27, 51, 0.32);
  --dica: #7A8496;
  --segm-on: #FFFFFF;
  --segm-on-cor: #0B1B33;
  --segm-on-sombra: 0 1px 2px rgba(11, 27, 51, 0.12), 0 0 0 1px rgba(11, 27, 51, 0.06);
  --vidro: var(--superficie);
  --vidro-borda: rgba(11, 27, 51, 0.08);
  --vidro-sombra: 0 1px 2px rgba(11, 27, 51, 0.05), 0 16px 36px -20px rgba(11, 27, 51, 0.24);
  --fio: linear-gradient(135deg, rgba(201, 165, 92, 0.6), rgba(201, 165, 92, 0) 32%, rgba(11, 27, 51, 0) 70%, rgba(11, 27, 51, 0.07));
  /* estados */
  --bom: #1D7543; --bom-bg: rgba(46, 160, 87, 0.12);
  --aviso: #8F530A; --aviso-bg: rgba(234, 140, 30, 0.14);
  --erro: #B0241D; --erro-bg: rgba(229, 72, 77, 0.11);
  /* tipo */
  --f-display: "Archivo", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --f-texto: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-heroi: clamp(2.3rem, 1.25rem + 3.6vw, 4.3rem);
  --t-2: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  --t-3: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --t-corpo: 1.0625rem;
  --t-peq: 0.9375rem;
  --t-rot: 0.72rem;
  /* espaço */
  --largura: 1140px;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-d: max(16px, env(safe-area-inset-right, 0px));
  --sec: clamp(64px, 8vw, 112px);
  --topo-h: 64px;
}
@media (min-width: 720px) {
  :root { --gut: max(32px, env(safe-area-inset-left, 0px)); --gut-d: max(32px, env(safe-area-inset-right, 0px)); --topo-h: 72px; }
}
/* blocos institucionais em marinho: as mesmas variáveis, com os valores do fundo escuro */
.escuro {
  color-scheme: dark;
  --titulo: #FFFFFF;
  --tinta: #EEF2F7;
  --tinta-2: #BAC4D4;
  --aco: #9AA7BB;
  --ouro-txt: #D6BC85;
  --foco: #D6BC85;
  --linha: rgba(255, 255, 255, 0.09);
  --linha-forte: rgba(255, 255, 255, 0.2);
  --vela: rgba(255, 255, 255, 0.04);
  --vela-2: rgba(255, 255, 255, 0.075);
  --campo: rgba(3, 9, 20, 0.42);
  --campo-borda: rgba(255, 255, 255, 0.2);
  --campo-borda-2: rgba(255, 255, 255, 0.36);
  --dica: #7E8AA0;
  --segm-on: rgba(255, 255, 255, 0.13);
  --segm-on-cor: #FFFFFF;
  --segm-on-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --vidro: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025) 62%, rgba(255, 255, 255, 0.05));
  --vidro-borda: rgba(255, 255, 255, 0.12);
  --vidro-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px -34px rgba(0, 0, 0, 0.85);
  --fio: linear-gradient(135deg, rgba(214, 188, 133, 0.75), rgba(214, 188, 133, 0) 34%, rgba(255, 255, 255, 0) 70%, rgba(120, 160, 220, 0.35));
  --bom: #86DDA6; --bom-bg: rgba(46, 160, 87, 0.17);
  --aviso: #F7BA74; --aviso-bg: rgba(234, 140, 30, 0.15);
  --erro: #FF9D92; --erro-bg: rgba(229, 72, 77, 0.17);
  color: var(--tinta);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + env(safe-area-inset-top, 0px) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t-corpo); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--f-display); color: var(--titulo); }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--ouro-logo); color: var(--marinho); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 6px; }

.miolo { width: 100%; max-width: calc(var(--largura) + 64px); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-d); }
.pular { position: absolute; left: var(--gut); top: -60px; z-index: 80; background: var(--ouro-logo); color: var(--marinho); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.pular:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }

/* só para leitor de tela (fora da tela, sem ocupar lugar) */
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* rótulo de seção: o traço tracejado dourado do logo */
.rotulo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-texto); font-weight: 700; font-size: var(--t-rot); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-2); }
.rotulo::before { content: ""; width: 22px; height: 2px; flex: none; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--ouro) 0 6px, transparent 6px 9px); }

/* painéis: cartões brancos no claro; vidro moderado nos blocos escuros. Sem desfoque de fundo em lugar nenhum: ele é
   refeito a cada quadro do que está atrás (vídeo, demonstrações, rolagem) e era o que travava a animação */
.produto, .sobre, .caminhao, .frete, .recomenda, .navegador {
  position: relative; background: var(--vidro); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-sombra);
}
/* fio de luz na borda (dourado em cima à esquerda, some no meio) */
.produto::before, .sobre::before, .recomenda[data-v="bom"]::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--fio);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
/* painel marinho da empresa, com o mesmo vidro (vem com .escuro): os cartões do App e da Gestão e os fretes A e B da
   calculadora; o resto da página fica no claro */
.fundo-marinho { isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(11, 27, 51, 0.08), 0 34px 70px -34px rgba(11, 27, 51, 0.6); background: var(--vidro),
  radial-gradient(70% 55% at 90% 0%, rgba(201, 165, 92, 0.16), transparent 70%),
  radial-gradient(80% 70% at 0% 35%, rgba(35, 80, 138, 0.45), transparent 70%),
  radial-gradient(70% 60% at 100% 100%, rgba(35, 80, 138, 0.3), transparent 70%),
  linear-gradient(180deg, #0D2140, #081427); }
.fundo-marinho::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-family: var(--f-texto); font-weight: 700; font-size: 0.92rem; text-decoration: none; cursor: pointer; background: none; color: var(--tinta); transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.botao svg { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.botao:hover svg { transform: translateX(3px); }
.botao:active { transform: translateY(1px); }
.botao-ouro { background: var(--ouro-logo) linear-gradient(180deg, #D8B970, var(--ouro-logo)); color: var(--marinho); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px -12px rgba(160, 122, 50, 0.7); }
.botao-ouro:hover { background: var(--ouro-claro) linear-gradient(180deg, #E6CC8E, var(--ouro-claro)); }
.botao-claro { border-color: var(--linha-forte); color: var(--titulo); background: var(--vela); }
.botao-claro:hover { border-color: var(--campo-borda-2); background: var(--vela-2); }
.abertura .botao-claro { background: rgba(8, 18, 34, 0.38); }
.abertura .botao-claro:hover { background: rgba(8, 18, 34, 0.55); }

/* ---------- topo: transparente sobre a abertura; na cor da página quando ela rola (opaco, sem desfoque) ---------- */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; color: #fff; border-bottom: 1px solid transparent; transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.topo.rolou, .topo.aberto, .interna .topo { color: var(--marinho); background: var(--fundo); border-bottom-color: var(--linha); box-shadow: 0 8px 24px -18px rgba(11, 27, 51, 0.45); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--marinho); }
.topo .miolo { display: flex; align-items: center; gap: 8px; height: var(--topo-h); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca svg { width: 32px; height: 32px; flex: none; }
.marca-nome { display: grid; line-height: 1; }
.marca-nome b { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.14em; }
.marca-nome small { font-family: var(--f-texto); font-weight: 700; font-size: 0.5rem; letter-spacing: 0.42em; color: var(--ouro-claro); margin-top: 5px; transition: color .3s; }
.topo.rolou .marca-nome small, .topo.aberto .marca-nome small, .interna .topo .marca-nome small { color: var(--ouro-txt); }
@media (min-width: 720px) { .marca svg { width: 36px; height: 36px; } .marca-nome b { font-size: 1rem; } .marca-nome small { font-size: 0.54rem; } }
/* seções: na linha no computador; no celular, uma lista que abre pelo botão de menu */
.menu-bt { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.menu a { position: relative; text-decoration: none; font-weight: 600; transition: color .2s; }
@media (min-width: 860px) {
  .menu { display: flex; align-items: center; gap: 4px; margin-right: -14px; }
  .menu a { padding: 10px 14px; font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); }
  .menu a:hover, .menu a.ativo { color: #fff; }
  .topo.rolou .menu a { color: var(--tinta-2); }
  .topo.rolou .menu a:hover, .topo.rolou .menu a.ativo { color: var(--titulo); }
  .menu a.ativo::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--ouro-logo); }
  .menu-bt { display: none; }
}
@media (max-width: 859px) {
  .menu { display: none; }
  .topo.aberto .menu { display: grid; position: absolute; top: 100%; left: 0; right: 0; padding: 4px var(--gut-d) 14px var(--gut); background: rgba(247, 246, 243, 0.98); border-bottom: 1px solid var(--linha); box-shadow: 0 24px 40px -24px rgba(11, 27, 51, 0.45); }
  .topo.aberto .menu a { display: flex; align-items: center; min-height: 52px; font-size: 1.02rem; color: var(--tinta); border-bottom: 1px solid var(--linha); }
  .topo.aberto .menu a:last-child { border-bottom: 0; }
  .topo.aberto .menu a.ativo { color: var(--ouro-txt); }
}
.menu-bt svg { width: 24px; height: 24px; }
.menu-bt path { transition: transform .2s, opacity .2s; transform-origin: 12px 12px; }
.menu-bt[aria-expanded="true"] .mb-1 { transform: translateY(5px) rotate(45deg); }
.menu-bt[aria-expanded="true"] .mb-2 { opacity: 0; }
.menu-bt[aria-expanded="true"] .mb-3 { transform: translateY(-5px) rotate(-45deg); }

.etiqueta { font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--vela-2); border: 1px solid var(--linha); color: var(--tinta-2); white-space: nowrap; }
.etiqueta.ouro { background: rgba(201, 165, 92, 0.14); border-color: rgba(201, 165, 92, 0.38); color: var(--ouro-txt); }

/* ---------- seções ---------- */
.secao { padding-block: var(--sec); }
.faixa { background: var(--fundo-2); border-block: 1px solid var(--linha); }
.secao-cab { display: grid; gap: 14px; max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.secao-cab h2, .sobre h2 { font-size: var(--t-2); font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; }
.secao-cab p { color: var(--tinta-2); max-width: 58ch; }
/* os painéis entram ao chegar na tela (onde o navegador sabe ligar animação à rolagem) */
@supports (animation-timeline: view()) {
  .caminhao, .frete, .recomenda, .produto, .sobre { animation: revela linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  @keyframes revela { from { opacity: 0; transform: translateY(24px); } }
}

/* ---------- abertura: o vídeo em ciclo atrás do título (js/abertura.js) ---------- */
.abertura { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * (var(--topo-h) + 1px)); padding: calc(var(--topo-h) + 40px) 0 clamp(64px, 10vh, 112px); background: var(--marinho); overflow: hidden; }
.abertura-midia, .abertura-midia picture, .abertura-midia img, .abertura-midia video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* zoom com a rolagem: o js/abertura.js escreve --zoom (de 1 a 1,1); só transform, sem refazer o layout */
.abertura-midia { z-index: -2; transform: scale(var(--zoom, 1)); transform-origin: 50% 45%; will-change: transform; }
.abertura-midia img, .abertura-midia video { object-fit: cover; object-position: 50% 50%; }
.abertura-midia video { opacity: 0; transition: opacity .8s ease; }
.abertura.tocando .abertura-midia video { opacity: 1; }
/* véu: escurece a coluna do texto (esquerda), o alto (o topo passa por cima) e o pé; o meio e a direita ficam vivos */
.abertura-veu { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(6, 14, 28, 0.62) 0%, rgba(6, 14, 28, 0) 22%),
  linear-gradient(90deg, rgba(6, 14, 28, 0.86) 0%, rgba(6, 14, 28, 0.78) 36%, rgba(6, 14, 28, 0.54) 60%, rgba(6, 14, 28, 0.16) 82%, rgba(6, 14, 28, 0) 100%),
  linear-gradient(0deg, rgba(6, 14, 28, 0.55) 0%, rgba(6, 14, 28, 0) 32%); }
.abertura-bloco { display: grid; justify-items: start; gap: 20px; max-width: 44rem; text-shadow: 0 1px 2px rgba(5, 10, 20, 0.55), 0 4px 18px rgba(5, 10, 20, 0.45); }
.abertura .rotulo { color: #DCE3EE; }
.abertura h1 { font-size: clamp(2.45rem, 1.2rem + 3.7vw, 4rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.032em; color: #fff; }
/* uma frase por linha no computador; no celular cada uma quebra em duas no mesmo ponto ("Fretes mais / organizados.",
   "Decisões mais / seguras."): quebra comum, sem o equilíbrio automático dos títulos */
.abertura h1 span { display: block; text-wrap: wrap; }
.abertura-txt { max-width: 36ch; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem); line-height: 1.55; color: #E6ECF4; }
.abertura-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; text-shadow: none; }
/* os textos chegam juntos com a página (sem esperar o vídeo) */
.abertura-bloco > * { animation: chega .7s cubic-bezier(.2, .7, .2, 1) both; }
.abertura-bloco > :nth-child(2) { animation-delay: .06s; }
.abertura-bloco > :nth-child(3) { animation-delay: .14s; }
.abertura-bloco > :nth-child(n+4) { animation-delay: .22s; }
@keyframes chega { from { opacity: 0; transform: translateY(14px); } }
/* celular em pé: o texto embaixo, o véu sobe do pé */
@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
  .abertura { align-items: end; padding-bottom: clamp(40px, 8vh, 64px); }
  .abertura-veu { background: linear-gradient(180deg, rgba(6, 14, 28, 0.6) 0%, rgba(6, 14, 28, 0) 20%), linear-gradient(0deg, rgba(6, 14, 28, 0.94) 0%, rgba(6, 14, 28, 0.86) 40%, rgba(6, 14, 28, 0.62) 60%, rgba(6, 14, 28, 0.22) 76%, rgba(6, 14, 28, 0) 90%); }
  .abertura h1 { font-size: clamp(2.2rem, 1.3rem + 4.4vw, 3.4rem); }
  /* sombra presa ao bloco de texto: cobre o rótulo em qualquer altura de tela */
  .abertura-bloco { position: relative; isolation: isolate; }
  .abertura-bloco::before { content: ""; position: absolute; z-index: -1; inset: -64px calc(-1 * var(--gut-d)) -24px calc(-1 * var(--gut)); pointer-events: none; background: linear-gradient(180deg, rgba(6, 14, 28, 0) 0, rgba(6, 14, 28, 0.5) 56px, rgba(6, 14, 28, 0.6) 100%); }
}
@media (max-width: 480px) { .abertura-acoes { display: grid; width: 100%; } }

/* ---------- calculadora prática: dois fretes lado a lado, num bloco compacto no meio da coluna ---------- */
.miolo-estreito { max-width: calc(920px + 64px); }
/* --calc-largura: a largura do bloco compacto ("Seu caminhão", o aviso com o botão Limpar, os dois fretes e, um embaixo
   do outro, a recomendação) */
.calc { --calc-largura: 600px; display: grid; gap: 16px; }
/* no computador: "Seu caminhão", o aviso com o botão "Limpar os dois fretes" e os dois fretes à esquerda; a recomendação à
   direita dos fretes, no meio da altura deles; a nota da conta embaixo, na largura toda. No celular e no tablet, tudo
   um embaixo do outro, na mesma ordem */
@media (min-width: 980px) {
  .calc { grid-template-columns: var(--calc-largura) minmax(0, 1fr); grid-template-areas: "caminhao ." "dica ." "fretes recomenda" "nota nota"; column-gap: 18px; align-items: start; }
  .caminhao { grid-area: caminhao; }
  .calc-dica { grid-area: dica; }
  .fretes { grid-area: fretes; }
  .recomenda { grid-area: recomenda; max-width: none; align-self: center; }
  .res-nota { grid-area: nota; }
}
/* "Seu caminhão": uma linha de resumo; abre para ajustar (fica guardado no aparelho) */
.caminhao { width: 100%; max-width: var(--calc-largura); margin-inline: auto; border-radius: 18px; }
.caminhao summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-radius: 18px; }
.caminhao summary::-webkit-details-marker { display: none; }
.caminhao summary:hover .cam-ajustar { text-decoration-color: var(--ouro); }
.cam-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(201, 165, 92, 0.13); border: 1px solid rgba(201, 165, 92, 0.34); color: var(--ouro-txt); }
.cam-ic svg { width: 22px; height: 22px; }
.cam-txt { display: grid; gap: 1px; min-width: 0; }
.cam-txt b { font-size: 0.86rem; font-weight: 800; color: var(--titulo); }
.cam-txt b small { margin-left: 6px; font-size: 0.72rem; font-weight: 700; color: var(--ouro-txt); }
.cam-txt > span { font-size: 0.86rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.cam-ajustar { font-size: 0.84rem; font-weight: 700; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
.caminhao[open] .cam-ajustar::after { content: " (fechar)"; font-weight: 600; color: var(--aco); }
.cam-campos { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 16px 0; }
/* os 5 dados do caminhão: em 3 colunas quando o "Seu caminhão" tem 560 px ou mais (tela a partir de 592 px) */
@media (min-width: 592px) { .cam-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cam-nota { padding: 10px 16px 14px; font-size: 0.8rem; color: var(--aco); }

.campos { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campos .largo { grid-column: 1 / -1; }
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--campo-gap, 5px); min-width: 0; align-content: end; }
.campo > label { font-size: var(--rotulo-fs, 0.8rem); font-weight: 700; color: var(--tinta); line-height: 1.3; }
.campo > label small { font-weight: 500; color: var(--aco); }
.entrada { display: flex; align-items: center; min-width: 0; min-height: var(--campo-h, 44px); border-radius: 11px; border: 1px solid var(--campo-borda); background: var(--campo); transition: border-color .2s, box-shadow .2s; }
.entrada:hover { border-color: var(--campo-borda-2); }
.entrada:focus-within { border-color: var(--ouro); box-shadow: 0 0 0 4px rgba(201, 165, 92, 0.2); }
.entrada span { padding: 0 9px; font-size: 0.8rem; font-weight: 700; color: var(--aco); white-space: nowrap; }
.entrada span:first-child { padding-right: 0; }
.entrada span:last-child { padding-left: 0; }
.entrada input { flex: 1; width: 0; min-width: 0; height: calc(var(--campo-h, 44px) - 2px); padding: 0 9px; border: 0; background: none; color: var(--titulo); font: 650 var(--campo-fs, 1rem) var(--f-texto); font-variant-numeric: tabular-nums; outline: none; }
.entrada input::placeholder { color: var(--dica); font-weight: 500; }

/* os dois fretes: menores que a coluna (largura e altura), centralizados entre o "Seu caminhão" e a recomendação */
.fretes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 2vw, 18px); align-items: start; width: 100%; max-width: var(--calc-largura); margin-inline: auto; }
.frete { --campo-h: 34px; --campo-fs: 0.88rem; --rotulo-fs: 0.7rem; --campo-gap: 3px; min-width: 0; display: grid; gap: 7px; padding: clamp(9px, 1.2vw, 12px); border-radius: 14px; transition: border-color .25s, box-shadow .25s; }
/* no toque, o texto dos campos fica em 16 px: abaixo disso o iPhone aproxima a tela ao tocar no campo */
@media (pointer: coarse) { .frete { --campo-h: 38px; --campo-fs: 1rem; } }
.frete.vence { border-color: rgba(184, 149, 79, 0.75); box-shadow: 0 0 0 3px rgba(201, 165, 92, 0.18), 0 18px 40px -22px rgba(160, 122, 50, 0.55); }
.frete-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.frete-cab h3 { font-size: clamp(0.98rem, 0.92rem + 0.25vw, 1.08rem); font-weight: 600; letter-spacing: -0.015em; }
.etiqueta.melhor { background: var(--ouro-logo); border-color: var(--ouro-logo); color: var(--marinho); }
.segm { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 11px; background: var(--vela-2); border: 1px solid var(--linha); }
.segm label { position: relative; min-width: 0; }
.segm input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segm span { display: grid; place-items: center; min-height: 26px; padding: 0 4px; border-radius: 8px; font-weight: 700; font-size: 0.74rem; color: var(--aco); text-align: center; line-height: 1.15; transition: background-color .2s, color .2s, box-shadow .2s; }
.segm input:checked + span { background: var(--segm-on); color: var(--segm-on-cor); box-shadow: var(--segm-on-sombra); }
.segm input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }

.frete-res { display: grid; gap: 7px; padding-top: 8px; border-top: 1px solid var(--linha); }
.frete-vazio { font-size: 0.86rem; color: var(--aco); }
.veredito { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; border-radius: 999px; font-family: var(--f-display); font-weight: 700; font-size: 0.78rem; line-height: 1.2; }
.veredito svg { width: 15px; height: 15px; display: block; flex: none; }
.veredito[data-v="bom"] { background: var(--bom-bg); color: var(--bom); }
.veredito[data-v="atencao"] { background: var(--aviso-bg); color: var(--aviso); }
.veredito[data-v="ruim"] { background: var(--erro-bg); color: var(--erro); }
.veredito[data-v="vazio"] { background: var(--vela-2); color: var(--aco); }
.res-topo { display: grid; gap: 1px; }
.res-topo span { font-weight: 700; font-size: var(--t-rot); letter-spacing: 0.14em; text-transform: uppercase; color: var(--aco); }
.res-topo b { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.05rem, 0.95rem + 0.25vw, 1.1rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--titulo); font-variant-numeric: tabular-nums; }
.res-topo b.neg { color: var(--erro); }
.res-topo small { color: var(--tinta-2); font-size: 0.76rem; }
.res-ind { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-block: 1px solid var(--linha); }
.res-ind div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1px 10px; padding: 5px 0; min-width: 0; }
.res-ind div + div { border-top: 1px solid var(--linha); }
.res-ind dt { font-size: 0.72rem; font-weight: 700; color: var(--aco); }
.res-ind dd { margin: 0; text-align: right; font-weight: 750; font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--titulo); }
.res-ind dd.neg { color: var(--erro); }
.res-ind dd small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--aco); }
.res-ind .chave dt { color: var(--ouro-txt); }
.frete.vence .res-ind .chave dd { color: var(--ouro-txt); }
.conta-det summary { width: max-content; max-width: 100%; font-size: 0.76rem; font-weight: 700; color: var(--tinta); cursor: pointer; text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
.conta-det[open] summary { margin-bottom: 4px; }
.conta { margin: 0; display: grid; font-size: 0.8rem; }
.conta div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; padding: 4px 0; border-bottom: 1px dashed var(--linha-forte); }
.conta dt { color: var(--tinta-2); min-width: 0; }
.conta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conta .tot { border-bottom: 0; padding-top: 8px; }
.conta .tot dt, .conta .tot dd { color: var(--titulo); font-weight: 800; }
/* fretes estreitos (celular): um campo por linha e os números embaixo do nome; tela até 600 px = frete até 260 px */
@media (max-width: 600px) {
  .campos { grid-template-columns: minmax(0, 1fr); }
  .res-ind div, .res-ind div + div, .conta div { display: grid; justify-content: start; gap: 1px; }
  .res-ind dd, .conta dd { text-align: left; }
}
/* até 480 px = frete até 200 px */
@media (max-width: 480px) {
  .frete .entrada span { padding: 0 6px; font-size: 0.74rem; }
  .frete .entrada input { padding: 0 6px; } /* o tamanho do texto fica o de --campo-fs (16 px no toque) */
  .segm span { font-size: 0.74rem; }
  .veredito { font-size: 0.78rem; padding: 5px 10px 5px 6px; }
  .conta { font-size: 0.78rem; }
}

.recomenda { display: grid; gap: 8px; width: 100%; max-width: var(--calc-largura); margin-inline: auto; padding: clamp(16px, 2.6vw, 22px); border-radius: 18px; transition: background-color .25s, border-color .25s; }
.recomenda h3 { font-size: var(--t-3); font-weight: 600; letter-spacing: -0.015em; }
.recomenda p { color: var(--tinta-2); max-width: 72ch; }
.recomenda[data-v="bom"] { background: linear-gradient(150deg, rgba(201, 165, 92, 0.16), rgba(201, 165, 92, 0.05) 60%, var(--superficie)); border-color: rgba(184, 149, 79, 0.4); }
.recomenda[data-v="bom"] h3 { color: var(--ouro-txt); }
.recomenda[data-v="atencao"] { background: linear-gradient(150deg, rgba(234, 140, 30, 0.12), var(--superficie)); border-color: rgba(214, 140, 50, 0.35); }
.recomenda[data-v="atencao"] h3 { color: var(--aviso); }
.recomenda[data-v="ruim"] { background: linear-gradient(150deg, rgba(229, 72, 77, 0.1), var(--superficie)); border-color: rgba(200, 70, 70, 0.3); }
.recomenda[data-v="ruim"] h3 { color: var(--erro); }
.calc-dica { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; width: 100%; max-width: var(--calc-largura); margin-inline: auto; font-size: 0.82rem; color: var(--aco); }
.calc-dica button { border: 0; background: none; padding: 6px 0; color: var(--ouro-txt); font: 700 0.82rem var(--f-texto); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.res-nota { font-size: 0.82rem; color: var(--aco); max-width: 96ch; }
.res-nota a { color: var(--ouro-txt); font-weight: 700; }

/* ---------- App e Gestão: cada produto num cartão marinho com vidro, na seção clara ---------- */
.produtos { display: grid; gap: clamp(24px, 4vw, 40px); }
.produto { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(20px, 4vw, 48px); border-radius: 28px; }
.produto-texto { display: grid; gap: 18px; align-content: start; min-width: 0; }
.produto-eyebrow { display: flex; flex-wrap: wrap; gap: 8px; }
.produto h3 { font-size: var(--t-2); font-weight: 600; line-height: 1.05; letter-spacing: -0.022em; }
.produto-texto > p { color: var(--tinta-2); max-width: 50ch; }
.plataformas-de { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--tinta-2); }
.plataformas-de span { font-size: 0.76rem; font-weight: 700; color: var(--tinta); padding: 4px 10px; border-radius: 999px; background: var(--vela-2); border: 1px solid var(--linha-forte); }

/* telas reais, com dados de exemplo (img/, feitas pelo gerar-telas.mjs) */
/* a tela (o celular ou o navegador) fica no meio da altura do cartão, ao lado do texto */
.tela { margin: 0; display: grid; gap: 14px; min-width: 0; align-self: center; }
.tela img { width: 100%; height: auto; }
.tela-legenda { text-align: center; font-size: 0.75rem; color: var(--aco); }
.navegador { border-radius: 14px; overflow: hidden; }
.nav-barra { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--linha); background: var(--vela); }
.nav-barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); flex: none; }
.nav-barra span { margin-left: 8px; flex: 0 1 300px; min-width: 0; height: 18px; border-radius: 6px; background: var(--vela-2); font-size: 0.66rem; line-height: 18px; color: var(--tinta-2); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-barra b { font-weight: 700; color: var(--ouro-txt); }

/* vitrine do app: o celular à esquerda, o texto e os passos à direita; a legenda do passo fica embaixo do celular
   (nunca por cima dos números da tela). O celular inclina com o mouse. */
.produto-app { grid-template-areas: "texto" "tela" "passos"; }
.produto-app .produto-texto { grid-area: texto; }
.produto-app .tela-app { grid-area: tela; }
.produto-app .app-passos { grid-area: passos; }
@media (min-width: 760px) {
  .produto-app { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; grid-template-areas: "tela texto" "tela passos"; align-items: start; row-gap: 22px; }
}
.app-passos { display: grid; gap: 14px; min-width: 0; }
.passos { display: grid; gap: 8px; }
.passo { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 13px 16px; border-radius: 16px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .25s, border-color .25s; }
.passo:hover { background: var(--vela); }
.passo[aria-selected="true"] { background: var(--vela-2); border-color: rgba(214, 188, 133, 0.38); }
.passo-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; color: var(--ouro-txt); border: 1px solid rgba(214, 188, 133, 0.45); transition: background-color .25s, color .25s; }
.passo[aria-selected="true"] .passo-n { background: var(--ouro-logo); border-color: var(--ouro-logo); color: var(--marinho); }
.passo-txt { display: grid; gap: 2px; min-width: 0; }
.passo-txt b { font-family: var(--f-display); font-weight: 650; font-size: 1rem; color: var(--titulo); }
.passo-txt small { font-size: 0.86rem; line-height: 1.45; color: var(--tinta-2); }
/* as duas vitrines: a barra dourada corre no item ativo (o JS da demonstração escreve o andamento) e o botão Pausar */
.avanco { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--ouro-logo); transform: scaleX(0); transform-origin: left; pointer-events: none; will-change: transform; }
[data-vitrine].rodando [aria-selected="true"] .avanco { animation: avanca var(--tempo, 5s) linear forwards; }
[data-vitrine].rodando:hover .avanco, [data-vitrine].rodando:focus-within .avanco { animation-play-state: paused; }
@keyframes avanca { to { transform: scaleX(1); } }
.vitrine-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; font-size: 0.85rem; color: var(--tinta-2); }
.vitrine-pausa { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--vela); color: var(--tinta); font: 700 0.82rem var(--f-texto); cursor: pointer; transition: border-color .2s, background-color .2s; }
.vitrine-pausa:hover { border-color: var(--campo-borda-2); background: var(--vela-2); }
.vitrine-pausa[aria-pressed="true"] { border-color: rgba(214, 188, 133, 0.6); color: var(--ouro-txt); }
.app-nota { font-size: 0.84rem; color: var(--aco); }
.celular3d { position: relative; display: grid; justify-items: center; perspective: 1400px; padding-block: 8px; }
.celular3d::before { content: ""; position: absolute; inset: 10% 14%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(214, 188, 133, 0.3), transparent 60%), radial-gradient(circle at 60% 70%, rgba(52, 98, 170, 0.55), transparent 62%); filter: blur(42px); pointer-events: none; }
.aparelho { position: relative; width: min(66vw, 300px); padding: 2.8%; border-radius: 15% / 7%; background: linear-gradient(150deg, #34405A, #0B1220 55%, #1C2840); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 3px rgba(0, 0, 0, 0.5), 0 50px 90px -36px rgba(0, 0, 0, 0.95); transform: rotateY(var(--ry, -7deg)) rotateX(var(--rx, 3deg)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.aparelho::after { content: ""; position: absolute; top: 3.1%; left: 50%; width: 3.6%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: #05080F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); z-index: 2; }
.aparelho-tela { position: relative; isolation: isolate; aspect-ratio: 300 / 649; border-radius: 12.5% / 5.8%; overflow: hidden; background: var(--marinho); }
.aparelho-tela::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--mx, 20%) var(--my, 10%), rgba(255, 255, 255, 0.14), transparent 45%); }
.tela-app-item { position: absolute; inset: 0; }
.tela-app-item img { width: 100%; height: 100%; object-fit: cover; }
/* a legenda do passo: embaixo do celular */
.app-balao { justify-self: center; display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 8px 14px 8px 8px; border-radius: 14px; font-size: 0.84rem; font-weight: 700; line-height: 1.3; color: var(--titulo); background: var(--vela-2); border: 1px solid var(--linha); }
.app-balao i { width: 24px; height: 24px; flex: none; border-radius: 8px; background: rgba(201, 165, 92, 0.18); border: 1px solid rgba(214, 188, 133, 0.45); position: relative; }
.app-balao i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 6px; border-left: 2px solid var(--ouro-claro); border-bottom: 2px solid var(--ouro-claro); transform: translateY(-1px) rotate(-45deg); }
.app-balao.troca { animation: balao .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes balao { from { opacity: 0; transform: translateY(6px); } }

/* vitrine da Gestão: os recursos à esquerda (as abas: clique e setas), o navegador grande à direita, com o endereço
   acompanhando a tela. Com "reduzir movimento", a tela troca só quando a pessoa escolhe. */
.produto-gestao { --tempo: 6s; }
@media (min-width: 900px) { .produto-gestao { grid-template-columns: minmax(250px, 0.66fr) minmax(0, 1.34fr); align-items: start; } }
.recursos { display: grid; gap: 4px; margin-top: 2px; }
.recurso { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 10px 14px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--tinta-2); font: inherit; font-size: var(--t-peq); line-height: 1.5; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .25s, border-color .25s, color .25s; }
.recurso svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ouro-txt); }
.recurso b { color: var(--titulo); font-weight: 700; }
.recurso:hover { background: var(--vela); }
.recurso[aria-selected="true"] { background: var(--vela-2); border-color: rgba(214, 188, 133, 0.34); color: var(--tinta); }
.nav-tela { position: relative; isolation: isolate; aspect-ratio: 1440 / 1013; overflow: hidden; background: #EEF2F7; }
.gtela { position: absolute; inset: 0; }
.gtela img { width: 100%; height: 100%; object-fit: cover; }

/* demonstração guiada (js/demonstracao.js): um canvas por cima das telas paradas. Aparece quando as imagens já foram
   decodificadas; enquanto isso (e com "reduzir movimento") fica a tela parada de sempre. */
[data-vitrine].demo-vem .avanco { animation: none; }
.demo { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.demo canvas { width: 100%; height: 100%; }
[data-vitrine].demo-ativa .demo { opacity: 1; }

/* ---------- quem somos ---------- */
.sobre { display: grid; gap: clamp(20px, 4vw, 56px); padding: clamp(24px, 4.5vw, 56px); border-radius: 28px; }
@media (min-width: 900px) { .sobre { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.sobre-cab { display: grid; gap: 14px; align-content: start; }
.sobre-texto { display: grid; gap: 16px; }
.sobre-texto p { color: var(--tinta-2); max-width: 60ch; }

/* ---------- rodapé (marinho) ---------- */
.rodape { position: relative; padding-block: clamp(56px, 7vw, 88px) calc(28px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, #0B1B33, var(--noite)); color: var(--tinta); overflow: hidden; }
.rodape .marca { color: #fff; }
.rodape-topo { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .rodape-topo { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.rodape-marca { display: grid; gap: 16px; align-content: start; }
.rodape-marca p { color: var(--tinta-2); font-size: var(--t-peq); max-width: 34ch; }
.rodape h2 { margin: 0 0 14px; font-family: var(--f-texto); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro-txt); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape li a { color: var(--tinta-2); text-decoration: none; font-size: var(--t-peq); }
.rodape li a:hover { color: var(--titulo); text-decoration: underline; text-decoration-color: var(--ouro); text-underline-offset: 4px; }
.rodape li small { color: var(--aco); font-size: 0.78rem; margin-left: 6px; }
/* a assinatura: RENGUI de ponta a ponta da tela, com as seis letras distribuídas por igual na largura toda */
.assinatura { display: flex; justify-content: space-between; margin-top: clamp(40px, 5vw, 64px); padding-inline: var(--gut) var(--gut-d); font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(3rem, 15vw, 20rem); line-height: 0.8; color: transparent; -webkit-text-stroke: clamp(1px, 0.1vw, 2px) rgba(201, 165, 92, 0.32); user-select: none; }
/* a linha de baixo do rodapé (direitos reservados): centralizada, em todas as páginas */
.rodape-base { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 10px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linha); font-size: 0.8rem; color: var(--aco); }
.rodape-base a { color: inherit; }
.rodape-curto { padding-block: 8px calc(28px + env(safe-area-inset-bottom, 0px)); background: none; }
.rodape-curto .rodape-base { margin-top: 0; }

/* ---------- páginas internas ---------- */
.pagina { padding-block: clamp(40px, 6vw, 80px) var(--sec); }
.pagina-cab { display: grid; gap: 14px; max-width: 760px; margin-bottom: 40px; }
.pagina-cab h1 { font-size: var(--t-2); font-weight: 600; line-height: 1.06; letter-spacing: -0.022em; }
.pagina-cab p { color: var(--aco); }
.texto-legal { max-width: 70ch; display: grid; gap: 16px; }
.texto-legal h2 { font-size: var(--t-3); font-weight: 600; letter-spacing: -0.01em; margin-top: 22px; }
.texto-legal p, .texto-legal li { color: var(--tinta-2); }
.texto-legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.texto-legal a { color: var(--ouro-txt); }
.retorno { min-height: 62vh; display: grid; align-content: center; gap: 22px; padding-block: 60px; }
.retorno svg { width: min(100%, 320px); height: auto; }
.retorno h1 { font-size: var(--t-heroi); font-weight: 600; line-height: 1; letter-spacing: -0.028em; }
.retorno p { color: var(--tinta-2); max-width: 46ch; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* aba do navegador escondida: tudo o que anima para (animation-play-state não é herdado, por isso o seletor pega todos) */
body.pausado *, body.pausado *::before, body.pausado *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vitrine-pausa { display: none !important; }
  .abertura-midia video { display: none; }
  .abertura-midia { transform: none; }
}