/* H3 Personalizado — BIO PRIME (plano Profissional)
   Direção: "da bancada para a mão". O amarelo da logo abre e fecha a página; a cor codifica a técnica
   (laser = tinta, sublimação = magenta, 3D = turquesa, papelaria = amarelo). Ousadia gasta num lugar
   só: o "H3" impresso em camadas pelo bico da impressora 3D. O resto fica quieto. */

:root {
  --amarelo: #F9ED09;
  --amarelo-claro: #FFF9C4;
  --tinta: #1D1B2F;
  --tinta-suave: #4A475E;
  --magenta: #E81282;
  --magenta-acao: #C80E6E;
  --magenta-escuro: #A50B5B;
  --turquesa: #09B0A3;
  --turquesa-texto: #067C73;
  --papel: #FFFFFF;
  --linha: #E3E1EA;

  --f-display: "Unbounded", "Arial Black", sans-serif;
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --margem: 16px;

  --motion-instant: 90ms;
  --motion-fast: 160ms;
  --motion-standard: 240ms;
  --motion-emphasis: 320ms;
  --motion-scene: 460ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.3, 1.35, 0.5, 1);

  /* abertura: cada camada do "H3" leva este tempo para ser impressa */
  --camada: 190ms;
  --abertura-inicio: 120ms;
}

[data-tec="laser"] { --cor-tec: var(--tinta); }
[data-tec="sublimacao"] { --cor-tec: var(--magenta); }
[data-tec="3d"] { --cor-tec: var(--turquesa); }
[data-tec="papelaria"] { --cor-tec: var(--amarelo); }

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

h1, h2, h3, p { overflow-wrap: break-word; }

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--tinta);
  color: var(--papel);
  font-weight: 700;
  border-radius: 8px;
  transform: translateY(-160%);
}
.pular:focus { transform: none; }

.pagina {
  max-width: 560px;
  margin: 0 auto;
  background: var(--papel);
  overflow-x: clip;
}

.marco-rolagem {
  position: absolute;
  top: 160px;
  width: 1px;
  height: 1px;
}

/* ---------- CENA 1 · Hero ---------- */

.hero-faixa {
  background: var(--amarelo);
  padding: calc(18px + env(safe-area-inset-top)) var(--margem) 188px;
}

.hero-perfil {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-logo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--tinta);
}
.hero-perfil-txt {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.25;
}
.hero-perfil-txt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -6px 0;
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
}
.hero-perfil-txt span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta-suave);
}

.nome {
  margin: 26px 0 0;
  font-family: var(--f-display);
  color: var(--tinta);
  line-height: 1;
}

/* O "H3": o texto real (acessível) dá o tamanho; seis cópias em faixas desenham a peça */
.marca {
  position: relative;
  display: inline-block;
  font-size: clamp(128px, 42vw, 190px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.045em;
  white-space: nowrap;
  padding-right: 0.04em;
}
.marca-base { color: transparent; }

.camadas {
  position: absolute;
  inset: 0;
}
.camada {
  --t: calc(100% - (var(--i) + 1) * 100% / 6 - 1px);
  --b: calc(var(--i) * 100% / 6);
  position: absolute;
  inset: 0;
  clip-path: inset(var(--t) 0 var(--b) 0);
}
/* a faixa de baixo e a de cima se estendem para fora da caixa, para não cortar o desenho da letra */
.camada:nth-child(1) { --b: -40%; }
.camada:nth-child(6) { --t: -40%; }

/* linhas de camada, como numa peça impressa em 3D */
.c-h,
.c-3 {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-h { background-image: repeating-linear-gradient(180deg, var(--magenta-acao) 0 5px, #D62F86 5px 6px); }
.c-3 { background-image: repeating-linear-gradient(180deg, var(--turquesa-texto) 0 5px, #14897F 5px 6px); }

.nome-resto {
  display: block;
  margin-top: 10px;
  font-size: clamp(25px, 8vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.hero-lead {
  margin: 20px 0 0;
  max-width: 32ch;
  font-size: 18px;
  line-height: 1.45;
}
.hero-para {
  margin: 6px 0 0;
  font-weight: 700;
}

.hero-atalhos {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  margin-top: 10px;
}
.hero-atalhos a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--magenta-acao);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.hero-foto {
  position: relative;
  margin: -164px var(--margem) 0;
}
.hero-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  background: #E9E4F2;
}
.hero-foto figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--tinta-suave);
}

/* ---------- Bico da impressora (abertura) ---------- */

.bico-carro {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}
.bico {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 30px;
  translate: 50% 0;
}
.bico svg { display: block; overflow: visible; }
.bico-corpo { fill: var(--tinta); }
.bico-aleta { fill: #6F6B86; }
.bico-ponta { fill: #8E8AA3; }
.bico-brilho { fill: var(--magenta); }

/* Estados da abertura (o script decide):
   .js sem decisão  → as camadas esperam vazias; o revela-seguro mostra tudo aos 2,6s se o script falhar
   .abertura-corre  → o bico sobe o "H3" em 6 passadas, vai e volta, ~1,5s
   .sem-abertura    → foto lenta, aba já rolada ou movimento reduzido: o "H3" pronto, com fade curto
   .abertura-pulada → a pessoa rolou ou tocou: estado final na hora
   sem JS           → as camadas já nascem inteiras */
.js .camada {
  clip-path: inset(var(--t) 100% var(--b) 0);
  animation: revela-seguro 1ms linear 2.6s both;
}
@keyframes revela-seguro {
  to { clip-path: inset(var(--t) 0 var(--b) 0); }
}
.abertura-espera .camada { animation-play-state: paused; }

.abertura-corre .camada {
  animation: camada-ida var(--camada) linear calc(var(--abertura-inicio) + var(--i) * var(--camada)) both;
}
.abertura-corre .camada:nth-child(even) { animation-name: camada-volta; }
@keyframes camada-ida {
  from { clip-path: inset(var(--t) 100% var(--b) 0); }
  to { clip-path: inset(var(--t) 0 var(--b) 0); }
}
@keyframes camada-volta {
  from { clip-path: inset(var(--t) 0 var(--b) 100%); }
  to { clip-path: inset(var(--t) 0 var(--b) 0); }
}

.abertura-corre .bico-carro {
  display: block;
  animation: bico-rota calc(6 * var(--camada) + 220ms) linear var(--abertura-inicio) both;
}
/* 6 passadas de 190ms (vai e volta), subindo uma camada por vez; no fim o bico sobe e sai */
@keyframes bico-rota {
  0%      { transform: translate(-100%, -16.667%); opacity: 1; }
  13.97%  { transform: translate(0, -16.667%); }
  13.98%  { transform: translate(0, -33.333%); }
  27.94%  { transform: translate(-100%, -33.333%); }
  27.95%  { transform: translate(-100%, -50%); }
  41.91%  { transform: translate(0, -50%); }
  41.92%  { transform: translate(0, -66.667%); }
  55.88%  { transform: translate(-100%, -66.667%); }
  55.89%  { transform: translate(-100%, -83.333%); }
  69.85%  { transform: translate(0, -83.333%); }
  69.86%  { transform: translate(0, -100%); }
  83.82%  { transform: translate(-100%, -100%); opacity: 1; }
  100%    { transform: translate(-100%, -128%); opacity: 0; }
}

.sem-abertura .camada,
.abertura-pulada .camada {
  animation: none;
  clip-path: inset(var(--t) 0 var(--b) 0);
}
.sem-abertura .camadas { animation: surge var(--motion-standard) var(--ease-standard) both; }
.abertura-pulada .bico-carro,
.abertura-assentada .bico-carro { display: none; }
@keyframes surge { from { opacity: 0; } }

/* ---------- Botões ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: var(--f-texto);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-instant) var(--ease-standard),
    box-shadow var(--motion-instant) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.btn i { font-size: 22px; }

/* a sombra deslocada repete o contorno deslocado da logo; no toque o botão afunda nela */
.btn-acao {
  background: var(--magenta-acao);
  color: var(--papel);
  box-shadow: 4px 4px 0 var(--turquesa);
}
.btn-acao:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--turquesa);
  background: var(--magenta-escuro);
}

.link-acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--magenta-acao);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}
.link-acao i { font-size: 18px; }
.link-acao:active { color: var(--magenta-escuro); }

/* ---------- CENA 2 · Links ---------- */

.links {
  display: grid;
  gap: 14px;
  padding: 30px var(--margem) 8px;
}
.links-lista {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 10px 16px;
  border: 2px solid var(--tinta);
  border-radius: 12px;
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-instant) var(--ease-standard);
}
.link-linha i {
  flex: none;
  width: 24px;
  text-align: center;
  font-size: 20px;
  color: var(--magenta-acao);
}
.link-linha span {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1.3;
}
.link-linha small {
  font-size: 14px;
  font-weight: 400;
  color: var(--tinta-suave);
}
.link-linha:active {
  background: var(--amarelo-claro);
  transform: scale(0.985);
}

/* ---------- Cenas ---------- */

.cena { padding: 52px var(--margem); }

.cena h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(23px, 6.6vw, 29px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.cena-intro {
  margin: 10px 0 0;
  max-width: 38ch;
  color: var(--tinta-suave);
}

/* ---------- CENA 3 · Técnicas ---------- */

.tec-lista {
  display: grid;
  gap: 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.tec {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 16px;
}
.tec::before {
  content: "";
  grid-row: 1 / span 2;
  border-radius: 3px;
  background: var(--cor-tec);
  box-shadow: inset 0 0 0 1px rgba(29, 27, 47, 0.18);
}
.tec h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}
.tec p { margin: 4px 0 0; }

/* ---------- CENA 4 · Trabalhos ---------- */

.trabalhos {
  padding-left: 0;
  padding-right: 0;
  background: #F6F5F9;
}
.miolo { padding: 0 var(--margem); }

.trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 14px;
  margin: 0;
  padding: 24px var(--margem) 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho:focus-visible { outline-offset: -3px; }

.trab {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.trab img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  background: #E9E4F2;
}
.trab-ficha {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 12px;
}
.trab-ficha h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}
.trab-ficha .link-acao { margin-top: auto; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--tinta-suave);
}
.tag::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--cor-tec, transparent);
  box-shadow: inset 0 0 0 1.5px var(--tinta);
}

.trilho-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}
.trilho-nav[hidden] { display: none; }
.trilho-nav button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--tinta);
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-instant) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
}
.trilho-nav button:active { transform: scale(0.92); }
.trilho-nav button:disabled { opacity: 0.35; cursor: default; }
.trilho-contador {
  min-width: 64px;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- CENA 5 · Para quem ---------- */

.para-lista {
  display: grid;
  gap: 24px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.para {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: start;
}
.para img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--tinta);
}
.para h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}
.para p { margin: 4px 0 0; }

/* ---------- CENA 6 · Pedido ---------- */

.pedido { background: var(--amarelo-claro); }

.pedido-form {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
.grupo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.grupo legend,
.campo label {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  font: 600 16px/1.2 var(--f-texto);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard);
}
.chip:active { transform: scale(0.95); }
.chip[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel);
}
.chip[aria-pressed="true"]::before {
  content: "\f00c";
  margin-right: 8px;
  font-family: "Font Awesome 6 Free";
  font-size: 13px;
  font-weight: 900;
}

.campos {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
}
.campo input {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 10px 14px;
  border: 2px solid var(--tinta);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
  font: 17px/1.3 var(--f-texto);
  -webkit-appearance: none;
  appearance: none;
}
.campo input[type="date"] { text-align: left; }
.campo input::-webkit-date-and-time-value { text-align: left; }
.campo input::placeholder { color: #77738A; }
.campo input:focus-visible {
  outline: 3px solid var(--magenta-acao);
  outline-offset: 1px;
}
.campo-ajuda {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--tinta-suave);
}

.previa {
  margin: 0;
  padding: 14px 16px;
  border-left: 4px solid var(--magenta-acao);
  border-radius: 0 10px 10px 0;
  background: var(--papel);
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-line;
}
.previa.is-atualizada { animation: previa-acende var(--motion-scene) var(--ease-standard); }
@keyframes previa-acende { from { background-color: var(--amarelo); } }

/* ---------- CENA 7 · Final ---------- */

.final {
  padding-top: 56px;
  padding-bottom: 60px;
  background: var(--amarelo);
}
.final h2 { font-size: clamp(25px, 7.4vw, 33px); }
.final > p {
  margin: 12px 0 24px;
  max-width: 34ch;
}
.final .final-contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--tinta-suave);
}
.final-contato span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Rodapé e selo base2digital ---------- */

.rodape {
  padding: 30px var(--margem) calc(30px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px;
  color: var(--tinta-suave);
}
.rodape p { margin: 0; }

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: #D90000;
  --seal-ring: 0;
  --seal-font: inherit;
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }

/* linhas de camada também no selo: anel pontilhado, cor de ação da página */
.rodape .selo-b2 {
  --seal-accent: var(--magenta-acao);
  --seal-ring: 0.4 1.4;
  --seal-font: var(--f-texto);
}

.credito:active .selo-b2 { rotate: -10deg; }

.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}

/* ---------- CTA flutuante (Regra do CTA) ---------- */

.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 10px var(--margem) calc(12px + env(safe-area-inset-bottom));
  visibility: hidden;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity var(--motion-standard) var(--ease-standard),
    transform var(--motion-standard) var(--ease-enter),
    visibility 0s linear var(--motion-standard);
}
.barra[hidden] { display: none; }
.barra .btn {
  width: min(528px, 100%);
  box-shadow: 4px 4px 0 var(--turquesa), 0 10px 26px rgba(29, 27, 47, 0.22);
}
.barra .btn:active { box-shadow: 0 0 0 var(--turquesa), 0 4px 12px rgba(29, 27, 47, 0.2); }
.barra.is-visivel {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ---------- Ajustes de tela ---------- */

@media (max-width: 359px) {
  :root { --margem: 14px; }
  .campos { grid-template-columns: 1fr; }
  .trilho { grid-auto-columns: 82%; }
}

@media (hover: hover) and (pointer: fine) {
  .btn-acao:hover { background: var(--magenta-escuro); }
  .link-linha:hover { background: var(--amarelo-claro); }
  .chip:hover { background: var(--amarelo-claro); }
  .chip[aria-pressed="true"]:hover { background: var(--tinta); }
  .link-acao:hover { color: var(--magenta-escuro); }
}

@media (min-width: 600px) {
  body { background: #ECECF1; }
  .pagina { box-shadow: 0 0 0 1px rgba(29, 27, 47, 0.06), 0 24px 60px rgba(29, 27, 47, 0.08); }
  .trilho { grid-auto-columns: 46%; }
}

/* ---------- Movimento reduzido: o "H3" já vem pronto, sem bico; toque muda cor, não posição ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .camada,
  .abertura-corre .camada {
    animation: none;
    clip-path: inset(var(--t) 0 var(--b) 0);
  }
  .bico-carro,
  .abertura-corre .bico-carro { display: none; }
  .js .camadas { animation: surge 200ms linear both; }

  .btn-acao:active,
  .barra .btn:active {
    transform: none;
    box-shadow: 4px 4px 0 var(--turquesa);
  }
  .link-linha:active,
  .chip:active,
  .trilho-nav button:active { transform: none; }
  .barra { transform: none; }
  .previa.is-atualizada { animation-duration: 1ms; }
  .credito:active .selo-b2 { rotate: none; }
}