/*
 * MRC Promoções: o site como o estande da MRC num encontro de provedores.
 * Testeira verde com o nome, parede em painel claro, mural de ERPs, balcão de atendimento.
 * Tokens em três camadas: primitivos (valores) → semânticos (papéis) → componentes.
 */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Primitivos: os materiais do estande. */
  --p-painel: #f4f5f2;          /* painel melamínico */
  --p-painel-alternado: #e7eae5; /* painel vizinho, um tom abaixo */
  --p-branco: #ffffff;
  --p-grafite: #18201e;         /* vinil grafite, carpete */
  --p-grafite-claro: #26302d;
  --p-texto-suave: #45514d;
  --p-testeira: #1e6b57;        /* testeira em vinil verde */
  --p-testeira-funda: #175344;
  --p-sobre-verde-suave: #d3ece2;
  --p-menta: #3ed598;           /* o R do logo */
  --p-menta-viva: #5fe3ad;
  --p-aluminio: #bcc2c0;        /* perfil de alumínio escovado */
  --p-ambar: #f2c230;           /* amarelo de sinalização: preço e prova */
  --p-erro: #b42318;
  --p-erro-fundo: #fdecea;

  /* Semânticos */
  --cor-fundo: var(--p-painel);
  --cor-superficie: var(--p-branco);
  --cor-superficie-alternada: var(--p-painel-alternado);
  --cor-tinta: var(--p-grafite);
  --cor-tinta-suave: var(--p-texto-suave);
  --cor-campo-verde: var(--p-testeira);
  --cor-campo-verde-fundo: var(--p-testeira-funda);
  --cor-sobre-verde: var(--p-branco);
  --cor-sobre-verde-suave: var(--p-sobre-verde-suave);
  --cor-campo-escuro: var(--p-grafite);
  --cor-rodape: var(--p-grafite);
  --cor-sobre-escuro: var(--p-painel);
  --cor-sobre-escuro-suave: #b9c4c0;
  --cor-acao: var(--p-menta);
  --cor-acao-realce: var(--p-menta-viva);
  --cor-acao-tinta: var(--p-grafite);
  --cor-estrutura: var(--p-aluminio);
  /* Prova: números e destaques, só sobre fundo escuro (verde ou grafite), nunca em botões nem em texto corrido. */
  --cor-prova: var(--p-ambar);
  --cor-erro: var(--p-erro);
  --cor-erro-fundo: var(--p-erro-fundo);
  --cor-foco: var(--p-grafite);

  /* Tipo: uma família, larguras diferentes para vinil e texto. */
  --fonte: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --t-vinil: clamp(2.5rem, 1rem + 6.2vw, 6.5rem);
  --t-titulo: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem);
  --t-subtitulo: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  --t-chamada: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-corpo: 1.125rem;
  --t-nota: 0.9375rem;
  --largura-vinil: 78%;
  --largura-texto: 100%;

  /* Espaço */
  --margem: clamp(20px, 3.2vw, 48px);
  --largura-maxima: 1360px;
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --secao-espaco: clamp(4rem, 2.6rem + 3.6vw, 6rem);

  /* Componentes */
  --testeira-altura: 88px;
  --perfil-espessura: 10px;
  --botao-altura: 3.25rem;
  --botao-fundo: var(--cor-acao);
  --botao-tinta: var(--cor-acao-tinta);
  --botao-fundo-realce: var(--cor-acao-realce);
  --campo-fundo: var(--p-branco);
  --campo-borda: #8b9692;
  --placa-fundo: var(--p-branco);

  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--testeira-altura) + var(--s-3));
  scrollbar-color: var(--cor-campo-verde) var(--cor-superficie-alternada);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cor-acao); color: var(--cor-acao-tinta); }

p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
}

.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px; /* taste-skill-ignore: utilitário só para leitor de tela, nunca visível */
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute;
  left: var(--margem);
  top: -100px;
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--cor-acao);
  color: var(--cor-acao-tinta);
  font-weight: 700;
}
.pular-para-conteudo:focus { top: var(--s-2); }

.estrutura {
  width: min(100% - 2 * var(--margem), var(--largura-maxima));
  margin-inline: auto;
}

/* Tipografia */

.vinil {
  font-size: var(--t-vinil);
  font-weight: 800;
  font-stretch: var(--largura-vinil);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.titulo {
  font-size: var(--t-titulo);
  font-weight: 800;
  font-stretch: var(--largura-vinil);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.chamada {
  font-size: var(--t-chamada);
  font-weight: 400;
  line-height: 1.4;
  max-width: 34em;
  text-wrap: pretty;
}

.texto {
  max-width: 38em;
  text-wrap: pretty;
}
.texto > * + * { margin-top: var(--s-2); }
.texto a:not(.botao) { color: var(--cor-campo-verde); font-weight: 600; }
.texto ul, .texto ol { padding-left: 1.2em; }
.texto li + li { margin-top: var(--s-1); }

.nota { font-size: var(--t-nota); color: var(--cor-tinta-suave); }

/* Faixas: cada seção ocupa a largura e muda o campo de cor inteiro. */

.faixa { padding-block: var(--secao-espaco); }
.faixa + .faixa:not([class*="faixa--"]) { padding-top: 0; }
.faixa--alternada { background: var(--cor-superficie-alternada); }
.faixa--verde { background: var(--cor-campo-verde); color: var(--cor-sobre-verde); }
.faixa--escura { background: var(--cor-campo-escuro); color: var(--cor-sobre-escuro); }
.faixa--verde .texto a:not(.botao), .faixa--escura .texto a:not(.botao) { color: inherit; }
.faixa--verde .nota { color: var(--cor-sobre-verde-suave); }
.faixa--escura .nota { color: var(--cor-sobre-escuro-suave); }
.faixa--verde :focus-visible, .faixa--escura :focus-visible { outline-color: var(--cor-acao); }

.cabeca-de-secao { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.cabeca-de-secao .chamada { color: var(--cor-tinta-suave); }
.faixa--verde .cabeca-de-secao .chamada { color: var(--cor-sobre-verde-suave); }
.faixa--escura .cabeca-de-secao .chamada { color: var(--cor-sobre-escuro-suave); }

/* O perfil de alumínio: só onde há estrutura (topo do mural, trilho dos crachás, borda do balcão). */
.perfil {
  height: var(--perfil-espessura);
  background: var(--cor-estrutura);
}

/*
 * Botões: placas retas de vinil, uma cor cheia, rótulo levemente condensado.
 * Ícones são máscaras SVG no mesmo traço 2.5 das setas da rota e do carrossel.
 */

:root {
  --icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M4 11h14M12 4l7 7-7 7'/%3E%3C/svg%3E");
  --icone-telefone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --icone-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5l1.3-4.2A8.5 8.5 0 1 1 8 19.4z'/%3E%3C/svg%3E");
  --botao-fundo-pressionado: #31c287;
  --botao-rotulo-largura: 88%;
  --botao-raio: 8px; /* só os botões arredondam; painéis, campos e placas seguem retos */
}

.botao {
  --icone: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: var(--botao-altura);
  padding: 0 var(--s-3);
  border: 2px solid transparent;
  border-radius: var(--botao-raio);
  background: var(--botao-fundo);
  color: var(--botao-tinta);
  font: inherit;
  font-size: var(--t-corpo);
  font-weight: 700;
  font-stretch: var(--botao-rotulo-largura);
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color 180ms var(--ease-saida),
    color 180ms var(--ease-saida),
    border-color 180ms var(--ease-saida),
    transform 120ms var(--ease-saida);
}
.botao:hover { background: var(--botao-fundo-realce); }
.botao:active { background: var(--botao-fundo-pressionado); transform: translateY(1px); }
.botao:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
.faixa--verde .botao:focus-visible, .faixa--escura .botao:focus-visible, .testeira .botao:focus-visible { outline-color: var(--cor-acao); }
.botao svg { width: 1.25em; height: 1.25em; flex: none; }

/* Ícone desenhado: seta depois do rótulo, telefone e WhatsApp antes dele. */
.botao--seta::after,
.botao--telefone::before,
.botao--whatsapp::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
  transition: transform 180ms var(--ease-saida);
}
.botao--seta { --icone: var(--icone-seta); }
.botao--telefone { --icone: var(--icone-telefone); }
.botao--whatsapp { --icone: var(--icone-whatsapp); }
.botao--seta:hover::after { transform: translateX(4px); }
.botao--telefone:hover::before { transform: rotate(-12deg); }

.botao--contorno {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.botao--contorno:hover { background: var(--cor-tinta); color: var(--cor-fundo); border-color: var(--cor-tinta); }
.botao--contorno:active { background: var(--p-grafite-claro); border-color: var(--p-grafite-claro); }
.faixa--verde .botao--contorno:hover, .faixa--escura .botao--contorno:hover,
.testeira .botao--contorno:hover { background: var(--cor-sobre-verde); color: var(--cor-campo-verde); border-color: var(--cor-sobre-verde); }

.botao[disabled], .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Enviando: o rótulo muda e um indicador gira no lugar da seta (parado se o visitante pede menos movimento). */
.botao[aria-busy="true"] { opacity: 1; cursor: progress; background: var(--botao-fundo-realce); }
.botao--seta[aria-busy="true"]::after {
  -webkit-mask: none;
  mask: none;
  background: none;
  width: 1em;
  height: 1em;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .botao--seta[aria-busy="true"]::after { animation: botao-girando 700ms linear infinite; }
}
@keyframes botao-girando { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .botao, .botao::before, .botao::after { transition: none; }
  .botao:active { transform: none; }
}

.acoes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 640px) { .parede .acoes .botao { flex: 1 1 100%; } }

.link-seta {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.link-seta::after {
  content: "";
  width: 0.9em; height: 0.9em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M4 11h14M12 4l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M4 11h14M12 4l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms var(--ease-saida);
}
.link-seta:hover::after { transform: translateX(4px); }

/* Testeira: o topo do estande, com o nome em placa branca. */

.testeira {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cor-campo-verde);
  color: var(--cor-sobre-verde);
}
.testeira__linha {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--testeira-altura);
}
.testeira__placa {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--s-3);
  background: var(--placa-fundo);
}
.testeira__placa img { width: auto; height: 52px; }
.testeira__nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.testeira__links { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.testeira__links > li { position: relative; }
.testeira__link {
  display: block;
  padding: var(--s-1) var(--s-2);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.testeira__link:hover, .testeira__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--cor-prova);
  text-underline-offset: 0.45em;
}
.testeira__sub {
  position: absolute; left: 0; top: 100%;
  min-width: 14rem;
  padding: var(--s-1) 0;
  list-style: none; margin: 0;
  background: var(--cor-campo-verde-fundo);
  box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.35); /* taste-skill-ignore: submenu flutua sobre a página */
  display: none;
}
.testeira__links > li:hover > .testeira__sub,
.testeira__links > li:focus-within > .testeira__sub { display: block; }
.testeira .botao { white-space: nowrap; }
.testeira__telefone { display: none; }
.testeira :focus-visible { outline-color: var(--cor-acao); }

.testeira__menu-botao {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: 0 var(--s-2);
  border: 2px solid var(--cor-sobre-verde);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1080px) {
  :root { --testeira-altura: 72px; }
  .testeira__placa img { height: 44px; }
  .testeira__menu-botao { display: inline-flex; }
  .testeira__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    margin: 0;
    padding: var(--s-3) var(--margem) var(--s-4);
    background: var(--cor-campo-verde);
    box-shadow: 0 16px 24px -12px rgb(0 0 0 / 0.4); /* taste-skill-ignore: menu aberto flutua sobre a página */
  }
  .testeira[data-aberta] .testeira__nav { display: grid; gap: var(--s-3); }
  .testeira__links { flex-direction: column; align-items: stretch; gap: 0; }
  .testeira__link { padding: var(--s-2) 0; font-size: var(--t-chamada); }
  .testeira__sub { position: static; display: block; box-shadow: none; background: transparent; padding: 0 0 0 var(--s-2); } /* taste-skill-ignore: remove a sombra */
  .testeira__nav .botao { width: 100%; }
  .testeira__telefone { display: block; color: inherit; font-weight: 700; font-size: var(--t-chamada); text-decoration: none; padding: var(--s-1) 0; }
}

/* Parede: o hero. */

.parede { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }
.parede__titulo { max-width: 15ch; }
.parede__corpo {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
.parede__corpo .chamada { max-width: 36em; }
.parede--com-imagem .parede__grade { display: grid; gap: var(--s-5); align-items: center; }
.parede--compacta .parede__titulo { max-width: none; }
.parede__imagem img { width: 100%; }

@media (min-width: 900px) {
  .parede__corpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .parede__corpo .acoes { justify-content: flex-end; }
  .parede--com-imagem .parede__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .parede--com-imagem .parede__corpo { grid-template-columns: 1fr; }
  .parede--com-imagem .parede__corpo .acoes { justify-content: flex-start; }
  /* Páginas internas: título e frase lado a lado, sem meia tela vazia. */
  .parede--compacta .parede__compacta { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--s-6); align-items: end; }
  .parede--compacta .parede__corpo { margin-top: 0; grid-template-columns: 1fr; }
  .parede--compacta .parede__corpo .acoes { justify-content: flex-start; }
}

/* Mural de ERPs: o painel de parceiros e a rota de integração. */

.mural { padding-bottom: 0; }
.mural__painel { background: var(--cor-superficie-alternada); padding: var(--s-5) var(--s-5) var(--s-5); }
.mural__cabeca { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.mural__cabeca .titulo { font-size: var(--t-subtitulo); }

.mural__logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: var(--s-1);
  border: 0;
  padding: 0;
}
.mural__logo { position: relative; }
.mural__logo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mural__placa {
  display: grid;
  grid-template-rows: 64px auto;
  justify-items: center;
  align-items: center;
  gap: var(--s-1);
  height: 100%;
  padding: var(--s-2) var(--s-1) var(--s-1);
  background: var(--cor-superficie);
  border: 2px solid transparent;
  transition: background-color 160ms var(--ease-saida), border-color 160ms var(--ease-saida);
}
.mural__placa img { max-height: 60px; max-width: 104px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.mural__nome { font-size: var(--t-nota); font-weight: 600; text-align: center; line-height: 1.2; }
.mural__logo input:hover + .mural__placa { border-color: var(--cor-estrutura); }
.mural__logo input:focus-visible + .mural__placa { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.mural__logo input:checked + .mural__placa { background: var(--cor-acao); border-color: var(--cor-acao); }
a.mural__placa { color: inherit; text-decoration: none; }
a.mural__placa:hover { border-color: var(--cor-estrutura); }

.rota {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
}
.rota__trilho {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: var(--s-2);
  list-style: none; margin: 0; padding: 0;
}
.rota__parada {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  min-width: 7.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}
.rota__marco {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  background: var(--cor-superficie);
  border: 3px solid var(--cor-estrutura);
}
.rota__marco img { max-width: 52px; max-height: 44px; mix-blend-mode: multiply; }
.rota__marco svg { width: 34px; height: 34px; }
.rota__linha {
  height: 6px;
  background: var(--cor-estrutura);
  position: relative;
  overflow: hidden;
}
.rota__linha::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cor-acao);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease-saida);
}
.rota[data-ativa] .rota__linha::after { transform: scaleX(1); }
.rota[data-ativa] .rota__linha + .rota__parada .rota__marco,
.rota[data-ativa] .rota__parada:first-child .rota__marco { border-color: var(--cor-acao); }
.rota[data-ativa] .rota__linha--segunda::after { transition-delay: 220ms; }
.rota__mensagem { display: grid; gap: var(--s-2); max-width: 46em; }
.rota__mensagem strong { font-size: var(--t-chamada); line-height: 1.3; }

@media (max-width: 640px) {
  .mural__painel { padding: var(--s-4) var(--s-2); margin-inline: calc(-1 * var(--margem) + 0px); }
  .mural__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rota__trilho { grid-template-columns: 1fr; justify-items: start; gap: 0; }
  .rota__parada { grid-template-columns: 56px auto; justify-items: start; align-items: center; gap: var(--s-2); min-width: 0; text-align: left; }
  .rota__marco { width: 56px; height: 56px; }
  .rota__linha { width: 6px; height: 28px; margin-left: 25px; }
  .rota__linha::after { transform: scaleY(0); transform-origin: top; }
  .rota[data-ativa] .rota__linha::after { transform: scaleY(1); }
}

/* Pacotes de SVAs: cada painel com composição própria. */

.pacotes { display: grid; gap: var(--s-6); }
.resumo-pacotes { display: grid; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.resumo-pacote { display: grid; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); background: var(--cor-superficie); align-items: center; }
.resumo-pacote__nome { font-size: var(--t-chamada); font-weight: 800; font-stretch: var(--largura-vinil); line-height: 1.1; }
.resumo-pacote__apps { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); list-style: none; margin: 0; padding: 0; font-weight: 600; }
.resumo-pacote__apps li { display: inline-flex; align-items: center; gap: var(--s-1); }
.resumo-pacote__apps img { width: 40px; height: 40px; object-fit: contain; }
.resumo-pacote .pacote__ganho { font-size: var(--t-nota); }
.resumo-pacotes__link { margin-top: var(--s-4); }
.resumo-pacote:nth-child(even) { background: var(--cor-superficie-alternada); }
@media (max-width: 640px) {
  /* No celular o resumo é lista corrida: sem painéis empilhados que leiam como cartões. */
  .resumo-pacotes { gap: var(--s-4); }
  .resumo-pacote, .resumo-pacote:nth-child(even) { background: none; padding: 0; }
}
@media (min-width: 1000px) { .resumo-pacote { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); } }
.pacote { display: grid; gap: var(--s-4); }
.pacote__conteudo > * + * { margin-top: var(--s-3); }
.pacote__conteudo > .produtos { margin-top: var(--s-4); }
.pacote__ganho { max-width: 38em; font-weight: 500; }
.pacote__ganho strong { font-weight: 800; }
/* Âmbar só no grafite: sobre o verde do pacote--destaque dá 3,8:1, abaixo de AA nesse tamanho, e o rótulo fica no branco herdado. */
.pacote--faixa .pacote__ganho strong, .faixa--escura .pacote__ganho strong { color: var(--cor-prova); }
.pacote__nome { font-size: var(--t-subtitulo); font-weight: 800; font-stretch: var(--largura-vinil); line-height: 1; letter-spacing: -0.02em; }
.produtos { display: grid; gap: var(--s-3) var(--s-4); list-style: none; margin: 0; padding: 0; }
.produto { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-2); align-items: start; }
.produto__icone { width: 64px; height: 64px; object-fit: contain; }
.produto__icone--vazio { background: var(--cor-superficie-alternada); }
.produto__nome { display: block; font-weight: 700; line-height: 1.3; }
.produto__texto { display: block; margin-top: 0.15em; color: var(--cor-tinta-suave); }
.faixa--verde .produto__texto { color: var(--cor-sobre-verde-suave); }

/* vitrine: painel branco largo, produtos em duas colunas, imagem à direita */
.pacote--vitrine { background: var(--cor-superficie); padding: var(--s-5); }
.pacote--vitrine .pacote__imagem img { width: 100%; max-width: 372px; margin-inline: auto; }
/* destaque: um produto com imagem grande, em campo verde de ponta a ponta */
.pacote--destaque { background: var(--cor-campo-verde); color: var(--cor-sobre-verde); padding: var(--s-5); }
.pacote--destaque .produto__texto { color: var(--cor-sobre-verde-suave); }
.pacote--destaque :focus-visible { outline-color: var(--cor-acao); }
.pacote--destaque .pacote__imagem img { width: 100%; max-width: 300px; margin-inline: auto; }
@media (max-width: 899px) { .pacote--destaque .pacote__imagem img { max-width: none; height: 280px; object-fit: cover; object-position: center 20%; } }
/* lista: painel branco pendurado no perfil, nome ao lado dos produtos */
.pacote--lista { background: var(--cor-superficie); border-top: var(--perfil-espessura) solid var(--cor-estrutura); padding: var(--s-5); }
/* faixa: grafite, produtos em lista de duas colunas ao lado do nome */
.pacote--faixa { background: var(--cor-campo-escuro); color: var(--cor-sobre-escuro); padding: var(--s-5); }
.pacote--faixa .produto__texto { color: var(--cor-sobre-escuro-suave); }

@media (min-width: 900px) {
  .pacote--vitrine { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: var(--s-6); }
  .pacote--vitrine .produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pacote--vitrine:not(:has(.pacote__imagem)) { grid-template-columns: 1fr; }
  .pacote--vitrine:not(:has(.pacote__imagem)) .produtos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .pacote--destaque { grid-template-columns: 300px minmax(0, 1fr); align-items: center; column-gap: var(--s-6); }
  .pacote--destaque .pacote__imagem { order: -1; }
  .pacote--lista { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-6); }
  .pacote--lista .produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pacote--faixa { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-6); align-items: start; }
  .pacote--faixa .produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pacote--vitrine, .pacote--destaque, .pacote--faixa, .pacote--lista { padding: var(--s-4) var(--s-3); margin-inline: calc(-1 * var(--margem)); }
}

/* Rota de trabalho (como funciona): estações numa linha, a ordem é a própria linha. */

.estacoes { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; counter-reset: none; }
.estacao { position: relative; display: grid; gap: var(--s-1); padding-left: calc(28px + var(--s-3)); }
.estacao::before {
  content: "";
  position: absolute; left: 0; top: 0.2em;
  width: 28px; height: 28px;
  background: var(--cor-campo-verde);
}
.estacao::after {
  content: "";
  position: absolute; left: 11px; top: calc(0.2em + 28px); bottom: calc(-1 * var(--s-4));
  width: 6px;
  background: var(--cor-estrutura);
}
.estacao:last-child::after { display: none; }
.estacao__titulo { font-size: var(--t-chamada); font-weight: 700; line-height: 1.25; }
.estacoes-grade { display: grid; gap: var(--s-6); align-items: center; }
.estacoes-grade__imagem img { width: 100%; }

@media (min-width: 1000px) {
  .estacoes-grade--com-imagem { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .estacoes--horizontal { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--s-4); }
  .estacoes--horizontal .estacao { padding-left: 0; padding-top: calc(28px + var(--s-3)); }
  .estacoes--horizontal .estacao::before { top: 0; }
  .estacoes--horizontal .estacao::after { left: 28px; top: 11px; bottom: auto; right: calc(-1 * var(--s-4)); width: auto; height: 6px; }
}

/* Tabela de custos: o quadro de preços do balcão. */

.tabela-custos { display: grid; gap: var(--s-4); }
.tabela-custos .cabeca-de-secao { margin-bottom: 0; }
.custos { display: grid; gap: var(--s-1); margin: 0; }
.custo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--cor-campo-verde-fundo);
}
.custo dt { font-size: var(--t-chamada); font-weight: 600; line-height: 1.3; }
.custo__valor { color: var(--cor-prova); font-size: var(--t-subtitulo); font-weight: 800; font-stretch: var(--largura-vinil); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.custo__nota { grid-column: 1 / -1; font-size: var(--t-nota); color: var(--cor-sobre-verde-suave); }
@media (min-width: 1000px) {
  .tabela-custos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; column-gap: var(--s-6); }
}
@media (max-width: 640px) {
  .custo { padding: var(--s-3); }
}

/* Painel de texto (bloco texto + imagem). */

.painel-texto { display: grid; gap: var(--s-5); align-items: center; }
.painel-texto__imagem img { width: 100%; }
@media (min-width: 900px) {
  .painel-texto--com-imagem { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--s-6); }
  .painel-texto--imagem-esquerda .painel-texto__imagem { order: -1; }
}
.faixa--imagem { position: relative; isolation: isolate; background-size: cover; background-position: center; }
.faixa--imagem::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(23 83 68 / 0.88); }

/* Lista de vantagens (bloco antigo de cards). */

.vantagens { display: grid; gap: var(--s-4) var(--s-6); list-style: none; margin: 0; padding: 0; }
.vantagem { display: grid; gap: var(--s-2); align-content: start; }
.vantagem--com-imagem { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s-3); }
.vantagem__imagem { width: 96px; height: 96px; object-fit: cover; }
.vantagem__titulo { font-size: var(--t-chamada); font-weight: 700; line-height: 1.25; }
@media (min-width: 900px) {
  .vantagens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vantagens--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Galerias de imagens (artes dos produtos, imagem avulsa, carrossel). */

.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.mosaico img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.figura img { width: 100%; }
.figura--conteudo { max-width: 1040px; }
.figura figcaption { margin-top: var(--s-2); }

.carrossel { position: relative; }
.carrossel__trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  list-style: none; margin: 0; padding: 0;
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__item { scroll-snap-align: start; }
.carrossel__item img { width: 100%; }
.carrossel__controles { display: flex; gap: var(--s-1); justify-content: flex-end; margin-top: var(--s-2); }
.carrossel__controles button {
  border-radius: var(--botao-raio);
  width: 48px; height: 48px;
  border: 2px solid var(--cor-tinta); background: transparent; color: var(--cor-tinta);
  font: inherit; font-size: 1.25rem; cursor: pointer;
}
.carrossel__controles button:hover { background: var(--cor-tinta); color: var(--cor-fundo); }
.carrossel__controles svg { width: 22px; height: 22px; margin: auto; }

/* Crachás da equipe, pendurados no perfil. */

.cracha-trilho .perfil { margin-bottom: var(--s-4); }
.crachas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4) var(--s-3); list-style: none; margin: 0; padding: 0; }
.cracha {
  position: relative;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: var(--cor-superficie);
  text-align: center;
}
.cracha::before {
  content: "";
  position: absolute; top: var(--s-2); left: 50%;
  width: 44px; height: 8px; margin-left: -22px;
  background: var(--cor-fundo);
  border-radius: 4px;
}
.cracha__foto { width: 200px; height: 200px; margin: var(--s-2) auto var(--s-1); object-fit: cover; border-radius: 50%; filter: grayscale(1); }
.cracha__nome { font-size: var(--t-chamada); font-weight: 800; font-stretch: var(--largura-vinil); line-height: 1.1; }
.cracha__cargo { color: var(--cor-tinta-suave); line-height: 1.35; }
.cracha__faixa { margin: var(--s-2) calc(-1 * var(--s-3)) calc(-1 * var(--s-3)); height: 10px; background: var(--cor-campo-verde); }
.cracha__bio { font-size: var(--t-nota); color: var(--cor-tinta-suave); }

/* Contatos (departamentos + mapa). */

.contatos { display: grid; gap: var(--s-5); }
.contatos__subtitulo { margin-bottom: var(--s-3); font-size: var(--t-chamada); font-weight: 800; font-stretch: var(--largura-vinil); line-height: 1.1; }
.contatos__subtitulo--endereco { margin-top: var(--s-5); margin-bottom: var(--s-2); }
.departamentos { display: grid; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.departamento {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-2);
  padding: var(--s-3);
  background: var(--cor-superficie);
}
.departamento__nome { font-weight: 600; }
.departamento__numero { font-size: var(--t-chamada); font-weight: 800; font-stretch: var(--largura-vinil); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
a.departamento__numero:hover { text-decoration: underline; }
.departamento--principal { background: var(--cor-campo-verde); color: var(--cor-sobre-verde); }
.endereco { font-style: normal; }
.contatos__mapa-link { margin-top: var(--s-2); }
.mapa { min-height: 360px; background: var(--cor-superficie-alternada); }
.mapa iframe { width: 100%; height: 100%; min-height: 360px; border: 0; }
@media (min-width: 900px) {
  .contatos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; column-gap: var(--s-6); }
}

/* Balcão: o formulário de contato em campo grafite. */

.balcao { display: grid; gap: var(--s-5); }
.balcao__intro { display: grid; gap: var(--s-3); align-content: start; }
.balcao__canais { display: grid; gap: 0; margin-top: var(--s-1); list-style: none; padding: 0; }
.balcao__canais a { display: inline-block; padding-block: 0.6rem; font-size: var(--t-chamada); font-weight: 700; text-decoration: none; }
.balcao__canais a:hover { text-decoration: underline; }
.balcao__canais .nota { color: var(--cor-prova); }
.balcao__tampo { background: var(--cor-superficie); color: var(--cor-tinta); }
.balcao__tampo .perfil { border-radius: 0; }
.balcao__form { display: grid; gap: var(--s-3); padding: var(--s-5); }
.balcao__linha { display: grid; gap: var(--s-3); align-items: start; }
@media (min-width: 700px) { .balcao__linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .balcao { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: var(--s-6); align-items: start; }
  .balcao__intro { grid-column: 1; grid-row: 1; }
  .balcao__tampo { grid-column: 2; grid-row: 1 / span 2; }
  .balcao__equipe { grid-column: 1; grid-row: 2; }
}
.balcao__prazo { margin-top: calc(-1 * var(--s-1)); }
.faixa--escura .balcao__tampo .nota { color: var(--cor-tinta-suave); }
.balcao__equipe { margin-top: var(--s-5); }
@media (max-width: 640px) { .balcao__form { padding: var(--s-4) var(--s-3); } .balcao__tampo { margin-inline: calc(-1 * var(--margem)); } }

.campo { display: grid; gap: 0.4rem; }
.campo label { font-weight: 600; }
.campo__opcional { font-weight: 400; color: var(--cor-tinta-suave); }
.campo input, .campo textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--campo-borda);
  border-radius: 0;
  background: var(--campo-fundo);
  color: var(--cor-tinta);
  font: inherit;
  caret-color: var(--cor-campo-verde);
  transition: border-color 140ms var(--ease-saida);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #5f6b67; }
.campo input:hover, .campo textarea:hover { border-color: var(--cor-tinta); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--cor-campo-verde); outline-offset: 0; border-color: var(--cor-tinta); }
.campo [aria-invalid="true"] { border-color: var(--cor-erro); }
.campo__erro { color: var(--cor-erro); font-size: var(--t-nota); font-weight: 600; }
.balcao__enviar { justify-self: start; }
.balcao__enviar[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.aviso { padding: var(--s-3); font-weight: 600; }
.aviso:focus { outline: 3px solid var(--cor-erro); outline-offset: 2px; }
.aviso--erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.aviso--sucesso { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--cor-acao); color: var(--cor-acao-tinta); }
.aviso--sucesso strong { font-size: var(--t-titulo); font-weight: 800; font-stretch: var(--largura-vinil); line-height: 1; }

/* Texto longo (contrato): medida de leitura, alinhado à esquerda, sumário. */

.texto-longo { display: grid; gap: var(--s-5); }
.texto-longo__corpo { max-width: 66ch; line-height: 1.65; }
.texto-longo__corpo > * + * { margin-top: 1em; }
.texto-longo__corpo h2, .texto-longo__corpo h3, .texto-longo__corpo h4 { margin-top: 2em; font-size: var(--t-chamada); font-weight: 800; line-height: 1.3; }
.texto-longo__corpo strong { font-weight: 700; }
.texto-longo__corpo ul, .texto-longo__corpo ol { padding-left: 1.3em; }
.sumario { align-self: start; }
.sumario__lista { display: grid; gap: var(--s-1); list-style: none; margin: var(--s-2) 0 0; padding: 0; font-size: var(--t-nota); }
.sumario__lista a { text-decoration: none; color: var(--cor-tinta-suave); }
.sumario__lista a:hover { color: var(--cor-tinta); text-decoration: underline; }
@media (min-width: 1100px) {
  .texto-longo--com-sumario { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-6); }
  .texto-longo--com-sumario .sumario { position: sticky; top: calc(var(--testeira-altura) + var(--s-4)); order: 2; max-height: calc(100vh - var(--testeira-altura) - var(--s-6)); overflow-y: auto; overscroll-behavior: contain; }
}

/* Rodapé: o fecho, com o nome de ponta a ponta. */

.rodape { border-top: var(--perfil-espessura) solid var(--cor-estrutura); background: var(--cor-rodape); color: var(--cor-sobre-escuro); padding-block: var(--s-6) var(--s-4); }
.rodape a { color: inherit; text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape :focus-visible { outline-color: var(--cor-acao); }
.rodape__colunas { display: grid; gap: var(--s-5); }
.rodape__titulo { font-size: var(--t-nota); font-weight: 700; color: var(--cor-prova); margin-bottom: var(--s-2); }
.rodape__lista { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.rodape__lista a { display: inline-block; padding-block: 0.7rem; }
.rodape__telefone { font-size: var(--t-chamada); font-weight: 800; font-stretch: var(--largura-vinil); }
.rodape__nome { margin-top: var(--s-6); }
.rodape__nome img { width: 100%; max-width: 220px; height: auto; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--t-nota); color: var(--cor-sobre-escuro-suave); }
@media (min-width: 900px) { .rodape__colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* WhatsApp: flutua sobre a página, por isso é o único com sombra. */

.whatsapp {
  position: fixed; right: var(--margem); bottom: var(--s-3); z-index: 40;
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 56px; padding: 0 var(--s-3);
  background: var(--cor-acao); color: var(--cor-acao-tinta);
  border-radius: var(--botao-raio);
  font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 24px -8px rgb(24 32 30 / 0.45); /* taste-skill-ignore: botão fixo flutua sobre o conteúdo */
}
.whatsapp svg { width: 26px; height: 26px; }
.whatsapp:hover { background: var(--cor-acao-realce); }
@media (max-width: 640px) { .whatsapp__rotulo { display: none; } .whatsapp { padding: 0; width: 56px; justify-content: center; } }

/* Página não encontrada */

.nao-encontrada { min-height: 60vh; display: grid; align-content: center; gap: var(--s-4); }

/* Pré-visualização do rascunho: selo flutuante. */

.selo-rascunho {
  position: fixed; left: var(--s-2); bottom: var(--s-2); z-index: 60;
  padding: var(--s-1) var(--s-2);
  background: var(--p-ambar); color: var(--cor-tinta);
  font-weight: 700; font-size: var(--t-nota);
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.45); /* taste-skill-ignore: selo fixo flutua sobre o conteúdo */
}

/*
 * Movimento: o vinil sendo aplicado. O título entra como adesivo passado com espátula, e o mesmo
 * gesto volta nos títulos de seção, nas imagens e na troca de slides. O conteúdo é visível por
 * padrão; o script só anima quando há movimento permitido.
 */

@keyframes vinil-aplica {
  from { clip-path: inset(-0.1em 100% -0.1em 0); }
  to { clip-path: inset(-0.1em 0 -0.1em 0); }
}
@keyframes vinil-espatula {
  0% { transform: translateX(-100%); opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes sobe-e-aparece {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-entrada] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 640ms var(--ease-saida), transform 640ms var(--ease-saida);
    transition-delay: calc(var(--ordem, 0) * var(--entrada-passo, 80ms));
  }
  .js [data-entrada].visivel > * { opacity: 1; transform: none; }

  /* Mural de placas: uma cascata curta, não uma placa por vez. */
  [data-entrada="cascata"] { --entrada-passo: 35ms; }

  /* O h1 da parede: o foco da página. A espátula corre na mesma curva do recorte. */
  .parede__titulo {
    position: relative;
    animation: vinil-aplica 900ms var(--ease-saida) both;
  }
  .parede__titulo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent calc(100% - 8px), var(--cor-campo-verde) 0);
    animation: vinil-espatula 900ms var(--ease-saida) both;
    pointer-events: none;
  }
  .parede__corpo, .parede__imagem, .prateleira {
    animation: sobe-e-aparece 640ms var(--ease-saida) 360ms both;
  }

  /* Títulos de seção: o mesmo adesivo, sem a espátula. */
  .js [data-entrada] > .titulo {
    opacity: 1;
    transform: none;
    clip-path: inset(-0.1em 100% -0.1em 0);
    transition: clip-path 760ms var(--ease-saida);
  }
  .js [data-entrada].visivel > .titulo { clip-path: inset(-0.1em 0 -0.1em 0); }

  /* Imagens: reveladas no mesmo sentido do vinil. */
  .js [data-entrada] .pacote__imagem img,
  .js [data-entrada] .figura img {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 900ms var(--ease-saida) 180ms;
  }
  .js [data-entrada].visivel .pacote__imagem img,
  .js [data-entrada].visivel .figura img { clip-path: inset(0); }

  /* Quadro de custos: o R$ 0 é carimbado linha a linha. */
  .js .custos[data-entrada] .custo__valor {
    display: inline-block;
    opacity: 0;
    transform: scale(1.8);
    transition: opacity 180ms linear, transform 420ms var(--ease-saida);
    transition-delay: calc(var(--ordem, 0) * 140ms + 320ms);
  }
  .js .custos[data-entrada].visivel .custo__valor { opacity: 1; transform: none; }

  /* Estações: o trilho se preenche de uma parada até a próxima. */
  .js [data-entrada] > .estacao::before {
    transform: scale(0);
    transition: transform 420ms var(--ease-saida);
    transition-delay: calc(var(--ordem, 0) * 200ms + 120ms);
  }
  .js [data-entrada].visivel > .estacao::before { transform: none; }
  .js [data-entrada] > .estacao::after {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 560ms var(--ease-saida);
    transition-delay: calc(var(--ordem, 0) * 200ms + 280ms);
  }
  .js [data-entrada].visivel > .estacao::after { transform: none; }

  @media (hover: hover) {
    /* Crachá pendurado balança pelo furo; ícones e logos respondem ao ponteiro. */
    .cracha { transform-origin: 50% 0; transition: transform 420ms var(--ease-saida); }
    .cracha:hover { transform: rotate(-1.4deg); }
    .produto__icone, .resumo-pacote__apps img, .vitrine__apps img, .mural__placa img { transition: transform 240ms var(--ease-saida); }
    .produto:hover .produto__icone,
    .resumo-pacote__apps li:hover img,
    .vitrine__apps li:hover img,
    .mural__logo:hover .mural__placa img,
    a.mural__placa:hover img { transform: translateY(-3px) scale(1.06); }
  }
}

/* Controles de movimento: mesma placa dos botões, usados na vitrine e no letreiro. */

.controle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: var(--botao-raio);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 160ms var(--ease-saida), color 160ms var(--ease-saida), transform 120ms var(--ease-saida);
}
.controle[hidden] { display: none; }
.controle svg { width: 22px; height: 22px; }
.controle__tocar { display: none; }
.controle[data-pausado] .controle__pausar { display: none; }
.controle[data-pausado] .controle__tocar { display: block; }
.controle:hover { background: var(--p-branco); color: var(--p-grafite); border-color: var(--p-branco); }
.controle:active { transform: translateY(1px); }

/* Letreiro: os fatos da oferta correndo numa faixa grafite. */

.letreiro {
  position: relative;
  overflow: hidden;
  background: var(--cor-campo-escuro);
  color: var(--cor-sobre-escuro);
}
.parede:has(+ .letreiro) { padding-bottom: var(--s-4); }
.letreiro :focus-visible { outline-color: var(--cor-acao); }
.letreiro__janela { padding-block: var(--s-2); }
.letreiro__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  list-style: none;
  margin: 0;
}
.letreiro__lista[role="list"] { padding-inline: var(--margem); }
.letreiro__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-weight: 600;
  white-space: nowrap;
}
.letreiro__valor {
  color: var(--cor-prova);
  font-size: var(--t-subtitulo);
  font-weight: 800;
  font-stretch: var(--largura-vinil);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.letreiro__pausa {
  position: absolute;
  z-index: 1;
  right: var(--margem);
  top: 50%;
  margin-top: -24px;
}
/* Placa de ponta a ponta atrás do botão: o texto some nela, sem reaparecer na margem. */
.letreiro--vivo::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: calc(var(--margem) + 48px + var(--s-2));
  background: var(--cor-campo-escuro);
}
.letreiro--vivo .letreiro__janela {
  display: flex;
  width: max-content;
  animation: letreiro-corre var(--letreiro-tempo, 40s) linear infinite;
}
.letreiro--vivo .letreiro__lista { flex: none; flex-wrap: nowrap; }
.letreiro--vivo .letreiro__lista[role="list"] { padding-inline: 0 var(--s-5); }
/* Só o foco de teclado segura: depois de um clique em retomar, o foco fica no botão e a faixa precisa andar. */
.letreiro--vivo:has(:focus-visible) .letreiro__janela,
.letreiro--pausado .letreiro__janela,
.letreiro--fora .letreiro__janela { animation-play-state: paused; }
@media (hover: hover) {
  .letreiro--vivo:hover .letreiro__janela { animation-play-state: paused; }
}
@keyframes letreiro-corre { to { transform: translateX(calc(-100% / var(--letreiro-copias, 6))); } }

/* Vitrine de produtos: o campo inteiro troca de cor a cada slide. */

[data-campo="grafite"] {
  --v-fundo: var(--cor-campo-escuro);
  --v-tinta: var(--cor-sobre-escuro);
  --v-suave: var(--cor-sobre-escuro-suave);
  --v-rotulo: var(--cor-prova); /* âmbar só no grafite: no verde fica abaixo de AA em texto pequeno */
}
[data-campo="verde"] {
  --v-fundo: var(--cor-campo-verde);
  --v-tinta: var(--cor-sobre-verde);
  --v-suave: var(--cor-sobre-verde-suave);
  --v-rotulo: var(--cor-sobre-verde);
}

.vitrine {
  --vitrine-tempo: 6s;
  padding-block: var(--secao-espaco) var(--s-4);
  background-color: var(--v-fundo);
  color: var(--v-tinta);
  transition: background-color 520ms var(--ease-saida), color 520ms var(--ease-saida);
}
.vitrine + .mural { padding-top: var(--secao-espaco); }
.mural:has(+ .vitrine) { padding-bottom: var(--secao-espaco); }
.vitrine :focus-visible, .vitrine .botao:focus-visible { outline-color: var(--cor-acao); }
.vitrine__slides { display: grid; gap: var(--s-6); }
.vitrine__slide {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  color: var(--v-tinta);
}
/* Sem script os slides ficam empilhados, cada um com o seu campo. */
.vitrine:not(.vitrine--viva) .vitrine__slide { padding: var(--s-4); background: var(--v-fundo); }
.vitrine:not([data-vitrine]) .vitrine__slide { padding: 0; }
.vitrine__conteudo > * + * { margin-top: var(--s-3); }
/* Um degrau abaixo do h1 da parede; o ganho do provedor vem logo depois, maior que a descrição. */
.vitrine__nome { font-size: clamp(2.25rem, 1rem + 4vw, 4.5rem); overflow-wrap: break-word; }
.vitrine__ganho { max-width: 30em; font-size: var(--t-chamada); line-height: 1.35; color: var(--v-tinta); text-wrap: pretty; }
.vitrine__ganho strong { color: var(--v-rotulo); font-weight: 800; }
.vitrine__texto { max-width: 38em; color: var(--v-suave); }
.vitrine__apps { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); list-style: none; margin-inline: 0; padding: 0; font-weight: 600; }
.vitrine__apps li { display: inline-flex; align-items: center; gap: var(--s-1); }
.vitrine__apps img { width: 44px; height: 44px; object-fit: contain; }
.vitrine__acao { padding-top: var(--s-1); }
.vitrine__imagem { overflow: hidden; }
/* Os atributos width e height da tag trazem o tamanho real: imagem pequena fica menor, não borrada. */
.vitrine__imagem img { max-height: 300px; margin-inline: auto; object-fit: contain; }

.vitrine__comandos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); }
.vitrine__comandos[hidden] { display: none; }
.vitrine__trilho { display: flex; flex: 1 1 18rem; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.vitrine__trilho li { flex: 1 1 0; min-width: 0; }
.vitrine__ir {
  display: grid;
  gap: var(--s-1);
  width: 100%;
  min-height: 48px;
  align-content: end;
  padding: 0;
  border: 0;
  background: none;
  color: var(--v-suave);
  font: inherit;
  font-size: var(--t-nota);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 160ms var(--ease-saida);
}
.vitrine__ir:hover, .vitrine__ir[aria-current="true"] { color: var(--v-tinta); }
.vitrine__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vitrine__progresso { position: relative; display: block; height: 6px; overflow: hidden; background: var(--cor-estrutura); }
.vitrine__progresso::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cor-acao);
  transform: scaleX(0);
  transform-origin: left;
}
.vitrine__ir[aria-current="true"] .vitrine__progresso::after { transform: scaleX(1); }
.vitrine__setas { display: flex; gap: var(--s-1); }

@media (min-width: 900px) {
  .vitrine__slide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-6); }
  .vitrine__imagem img { max-height: 460px; }
}
@media (max-width: 640px) {
  .vitrine__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* taste-skill-ignore: rótulo só para leitor de tela no celular */
  .vitrine__trilho { flex-basis: 100%; }
  .vitrine__setas { margin-left: auto; }
  .letreiro__pausa { right: var(--s-1); }
}

/* Com o script ligado: slides na mesma célula, a altura é a do maior e nada pula na troca. */
.vitrine--viva .vitrine__slides { grid-template-columns: minmax(0, 1fr); }
.vitrine--viva .vitrine__slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  touch-action: pan-y;
  transition: opacity 180ms linear, visibility 0s linear 180ms;
}
.vitrine--viva .vitrine__slide--ativo {
  visibility: visible;
  opacity: 1;
  transition: opacity 180ms linear;
}

@media (prefers-reduced-motion: no-preference) {
  .vitrine--viva .vitrine__nome {
    clip-path: inset(-0.1em 100% -0.1em 0);
    transition: clip-path 0s linear 180ms;
  }
  .vitrine--viva .vitrine__slide--ativo .vitrine__nome {
    clip-path: inset(-0.1em 0 -0.1em 0);
    transition: clip-path 760ms var(--ease-saida) 100ms;
  }
  .vitrine--viva .vitrine__conteudo > :not(.vitrine__nome) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0s linear 180ms, transform 0s linear 180ms;
  }
  .vitrine--viva .vitrine__slide--ativo .vitrine__conteudo > :not(.vitrine__nome) {
    opacity: 1;
    transform: none;
    transition: opacity 480ms var(--ease-saida) 300ms, transform 480ms var(--ease-saida) 300ms;
  }
  .vitrine--viva .vitrine__slide--ativo .vitrine__conteudo > :nth-child(3) { transition-delay: 380ms; }
  .vitrine--viva .vitrine__slide--ativo .vitrine__conteudo > :nth-child(4) { transition-delay: 460ms; }
  .vitrine--viva .vitrine__slide--ativo .vitrine__conteudo > :nth-child(5) { transition-delay: 540ms; }
  .vitrine--viva .vitrine__imagem {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0s linear 180ms;
  }
  .vitrine--viva .vitrine__slide--ativo .vitrine__imagem {
    clip-path: inset(0);
    transition: clip-path 820ms var(--ease-saida) 60ms;
  }
  .vitrine--viva .vitrine__imagem img { transform: scale(1.08); transition: transform 0s linear 180ms; }
  .vitrine--viva .vitrine__slide--ativo .vitrine__imagem img { transform: none; transition: transform 1400ms var(--ease-saida) 60ms; }

  /* O preenchimento do trilho é o próprio relógio: pausou o trilho, pausou a troca. */
  .vitrine--viva .vitrine__ir[aria-current="true"] .vitrine__progresso::after {
    animation: vitrine-progresso var(--vitrine-tempo) linear both;
  }
  .vitrine--pausada .vitrine__ir[aria-current="true"] .vitrine__progresso::after { animation-play-state: paused; }
}
@keyframes vitrine-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Prateleira: os ícones reais dos apps, como produtos expostos no estande. */

.prateleira { background: var(--cor-superficie); padding: var(--s-4); }
.prateleira__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); list-style: none; margin: 0; padding: 0; }
.prateleira__item { display: grid; justify-items: center; gap: var(--s-1); text-align: center; font-size: var(--t-nota); font-weight: 600; line-height: 1.2; }
.prateleira__item img { width: 72px; height: 72px; object-fit: contain; }
.prateleira__rodape { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 0; }
@media (max-width: 640px) {
  .prateleira { padding: var(--s-3) var(--s-2); margin-inline: calc(-1 * var(--margem)); }
  .prateleira__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2) var(--s-1); }
  .prateleira__item img { width: 56px; height: 56px; }
}

/* Quem atende: a equipe comercial ao lado do balcão. */

.atendentes { display: grid; gap: var(--s-2); list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.atendente { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-2); align-items: center; }
.atendente img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; filter: grayscale(1); background: var(--cor-superficie); }
.atendente__nome { display: block; font-weight: 700; font-size: var(--t-chamada); line-height: 1.2; }
.atendente__cargo { display: block; color: var(--cor-sobre-escuro-suave); }
@media (max-width: 640px) {
  .atendentes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atendente { grid-template-columns: 1fr; justify-items: start; gap: var(--s-1); }
  .atendente img { width: 64px; height: 64px; }
  .atendente__nome { font-size: var(--t-corpo); }
  .atendente__cargo { font-size: var(--t-nota); }
}