/* Modelo KRIA — transporte escolar · "Pôster chapado" (estilo autoral, direção loud-flat-poster)
   Escrito para 360 px e ampliado em 560, 900 e 1100 px. A página tem a voz de um cartaz de rua: cores chapadas
   em painéis que se encostam, letra pesada e poucas palavras. A ideia vem da faixa amarela com ESCOLAR em
   preto que o Código de Trânsito manda pintar em toda van escolar: o título do início é essa faixa, e o amarelo
   volta na ficha da vaga, no quadro da segurança e no contato. Grafite de fundo, as cores primárias de material
   escolar nos painéis (vermelho, azul, verde e amarelo). Unbounded (o letreiro) e Onest (o texto). Sem etiquetas
   acima de títulos, numeração, linhas finas, sombras em repouso, gradientes ou vidro. Cantos vivos em tudo.
   As cores mudam pelo "cores" do site.json. */

/* Fontes servidas pelo próprio site (subconjunto latino do Google Fonts, licença SIL OFL). Onest é variável
   (peso 400 a 500). */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/unbounded-800.woff2') format('woff2'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/onest.woff2') format('woff2'); }

:root {
  --c-fundo: #191919;
  --c-superficie: #242424;
  --c-tinta: #FFFFFF;
  --c-suave: #A3A3A3;
  --c-destaque: #0C7866;
  --c-destaque-tinta: #FFFFFF;
  --c-faixa: #FFE927;
  --c-faixa-tinta: #111111;
  --c-campo-1: #D71E1E;
  --c-campo-2: #1E4BD7;
  --c-campo-3: #0C7866;
  --c-campo-tinta: #FFFFFF;

  --f-letreiro: 'Unbounded', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --f: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  /* largura média de uma letra maiúscula da Unbounded, em em (o título da faixa se ajusta com ela) */
  --larg-letra: 0.88;

  /* os cinco tamanhos da página (o título da faixa e o da chamada se ajustam à largura deles) */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.75rem, 1.4rem + 6vw, 7rem);

  --topo: 64px;
  --margem: clamp(16px, 2.4vw, 32px);
  --secao: clamp(88px, 11vw, 176px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 8px);
  /* o WhatsApp flutuante não cobre o item que recebe o foco perto da borda de baixo */
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  accent-color: var(--c-destaque);
  scrollbar-color: var(--c-suave) var(--c-fundo);
}
body {
  margin: 0;
  background: var(--c-fundo);
  color: var(--c-tinta);
  font: 400 var(--step-body)/1.5 var(--f);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
a, button, summary, label, select { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-weight: 500; color: inherit; }
p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }
::selection { background: var(--c-faixa); color: var(--c-faixa-tinta); }

/* Foco em anel duplo, visível no grafite, nas cores dos painéis e no amarelo */
:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
.cupom :focus-visible, .contato :focus-visible, .chamada :focus-visible, .tiquete :focus-visible, .quadro--titulo :focus-visible { outline-color: var(--c-faixa-tinta); box-shadow: 0 0 0 3px var(--c-faixa); } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
.chamada :focus-visible, .tiquete :focus-visible { box-shadow: 0 0 0 3px var(--c-tinta); } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
[tabindex="-1"]:focus { outline: none; box-shadow: none; } /* taste-skill-ignore: tira o anel do ponto de partida do Tab */

.container { padding-inline: var(--margem); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: texto só para leitor de tela, não é linha */
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; background: var(--c-faixa); color: var(--c-faixa-tinta);
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* botões: retângulos chapados, de canto vivo */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 0;
  font: 500 var(--step-body)/1.2 var(--f); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);
}
.btn:active, .tiquete__acao:active, .cupom__enviar:active, .canal:active { transform: scale(0.97); }
.btn--destaque { background: var(--c-destaque); color: var(--c-destaque-tinta); }
.btn--claro { background: var(--c-tinta); color: var(--c-fundo); }
.btn--grande { min-height: 60px; padding: 0 32px; }
.btn--pequeno { min-height: 44px; padding: 0 16px; }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em;
}
.titulo-secao {
  font-family: var(--f-letreiro); font-size: var(--step-head); font-weight: 800; line-height: 1;
  text-transform: uppercase; letter-spacing: -0.03em; text-wrap: balance;
}

/* ---------- faixa do modelo de demonstração ---------- */
.faixa-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  padding: 4px var(--margem);
  background: var(--c-superficie); color: var(--c-tinta);
  font-size: var(--step-small); line-height: 1.4;
}
.faixa-demo span { padding-block: 8px; }
.faixa-demo a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; text-underline-offset: 4px; }

/* ---------- topo: o nome, poucos links e uma ação ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--c-fundo); }
.topo__barra { display: flex; align-items: center; gap: 12px; height: var(--topo); padding-inline: var(--margem); }
.marca { display: flex; align-items: center; min-height: 44px; min-width: 0; margin-right: auto; text-decoration: none; }
.marca img { height: 36px; width: auto; max-width: 46vw; object-fit: contain; object-position: left center; }
.marca__nome {
  font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-small); line-height: 1.15;
  text-transform: uppercase; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.menu a { text-decoration: none; }
.topo__cta { flex: none; }
.menu-btn {
  flex: none; min-width: 64px; min-height: 44px; padding: 0 10px; margin-right: -10px;
  border: 0; background: none; color: inherit; cursor: pointer;
  font: 500 var(--step-body)/1 var(--f); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em;
}
.menu-btn__fechar, .menu-btn[aria-expanded="true"] .menu-btn__abrir { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__fechar { display: inline; }

/* Sem JavaScript: os links viram uma linha logo abaixo do nome */
html:not(.js) .topo { position: relative; }
html:not(.js) .topo__barra { flex-wrap: wrap; height: auto; padding-block: 8px; }
html:not(.js) .menu { order: 3; width: 100%; }
html:not(.js) .menu ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
html:not(.js) .menu a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
html:not(.js) .menu-btn, html:not(.js) .menu__acoes { display: none; }

/* Com JavaScript, até 1099 px: menu de tela cheia na cor da faixa */
@media (max-width: 1099px) {
  .js .menu {
    position: fixed; inset: 0; z-index: 45;
    display: flex; flex-direction: column;
    padding: calc(var(--topo-fim, var(--topo)) + 24px) var(--margem) calc(24px + env(safe-area-inset-bottom));
    background: var(--c-faixa); color: var(--c-faixa-tinta);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity 240ms var(--ease-out), visibility 0s 240ms;
  }
  .js.menu-aberto .menu { visibility: visible; opacity: 1; transition: opacity 240ms var(--ease-out); }
  .js .menu li a {
    display: flex; align-items: center; min-height: 60px;
    font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-head); line-height: 1;
    text-transform: uppercase; letter-spacing: -0.03em;
  }
  .js .menu li, .js .menu__acoes { opacity: 0; transform: translateY(16px); transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); }
  .js.menu-aberto .menu li, .js.menu-aberto .menu__acoes { opacity: 1; transform: none; }
  .js.menu-aberto .menu li:nth-child(2) { transition-delay: 40ms; }
  .js.menu-aberto .menu li:nth-child(3) { transition-delay: 80ms; }
  .js.menu-aberto .menu li:nth-child(4) { transition-delay: 120ms; }
  .js.menu-aberto .menu li:nth-child(5) { transition-delay: 160ms; }
  .js.menu-aberto .menu li:nth-child(6) { transition-delay: 200ms; }
  .js.menu-aberto .menu__acoes { transition-delay: 240ms; }
  .menu__acoes { margin-top: auto; padding-top: 40px; }
  .menu__acoes .btn { width: 100%; background: var(--c-faixa-tinta); color: var(--c-faixa); }
  .js .marca, .js .topo__cta, .js .menu-btn { position: relative; z-index: 46; }
  .menu-aberto .topo { background: var(--c-faixa); color: var(--c-faixa-tinta); }
  .menu-aberto .topo__cta { background: var(--c-faixa-tinta); color: var(--c-faixa); }
  .js .menu :focus-visible, .menu-aberto .topo :focus-visible { outline-color: var(--c-faixa-tinta); box-shadow: 0 0 0 3px var(--c-faixa); } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
  .menu-aberto, .menu-aberto body { overflow: hidden; }
  .menu-aberto .flutuante { opacity: 0; pointer-events: none; visibility: hidden; }
}

/* ---------- início: a faixa amarela com o título, a conversa e a van ---------- */
.inicio { padding-block: 20px 56px; overflow-x: clip; }
.inicio__grade { display: grid; grid-template-columns: minmax(0, 1fr); padding-inline: var(--margem); }

/* a faixa: amarela, de ponta a ponta, com o título em letra preta (como a faixa ESCOLAR da van) */
.faixa {
  margin-inline: calc(-1 * var(--margem));
  padding: clamp(18px, 3vw, 40px) var(--margem) clamp(14px, 2.4vw, 34px);
  background: var(--c-faixa); color: var(--c-faixa-tinta);
}
.faixa__titulo {
  container-type: inline-size;
  font-family: var(--f-letreiro); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.03em; line-height: 0.96;
}
/* a letra enche a largura da faixa: a linha mais comprida ocupa quase toda a largura, em no máximo duas linhas */
.faixa__linha {
  display: block; white-space: nowrap;
  font-size: min(calc(98cqi / (var(--letras) * var(--larg-letra))), 9.5rem);
}
.faixa__linha > span { display: inline-block; }
/* com acento ou cedilha, as linhas se afastam um pouco para o acento não encostar na linha de cima */
.faixa__titulo--acentos { line-height: 1.08; }

.inicio__conversa { display: grid; gap: 20px; padding-block: 24px 28px; }
.inicio__sub { max-width: 30ch; font-size: var(--step-lead); line-height: 1.35; }
.inicio__acoes { display: grid; justify-items: start; gap: 4px; }
.inicio__acoes .btn { width: 100%; }

/* o número grande: o ano da vaga (ou quantas escolas), num bloco chapado sobre a borda da foto (no celular,
   embaixo dela; no computador, no canto de cima) */
.numero {
  position: relative; z-index: 2; order: 3;
  display: grid; gap: 4px; width: min(64%, 280px); padding: 16px 18px 18px;
  margin-top: -44px;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
}
.inicio__foto { order: 2; }
.numero__valor { font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.numero__texto { font-size: var(--step-body); line-height: 1.35; max-width: 22ch; }
.numero--solto { margin-top: 0; }

.inicio__foto { margin-inline: calc(-1 * var(--margem)); aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-superficie); }
.inicio__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- escolas e horários: a grade, uma escola por linha, num painel azul ---------- */
.escolas { padding-block: var(--secao); background: var(--c-campo-2); color: var(--c-campo-tinta); }
.escolas .titulo-secao { margin-bottom: 40px; }
.grade { width: 100%; }
.grade thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* no celular, a linha de títulos fica só para o leitor de tela */
.grade tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.grade th, .grade td { padding: 0; text-align: left; font-weight: 400; }
.grade__turno th {
  grid-column: 1 / -1;
  position: sticky; top: var(--topo); z-index: 1;
  padding: 40px 0 12px; background: var(--c-campo-2); color: var(--c-faixa);
  font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-lead); line-height: 1.1; text-transform: uppercase; letter-spacing: -0.02em;
}
.grade tbody:first-of-type .grade__turno th { padding-top: 0; }
.grade__linha { padding-bottom: 18px; }
.grade__linha th { grid-column: 1 / -1; font-size: var(--step-lead); line-height: 1.25; font-weight: 500; }
.grade__linha td { font-size: var(--step-body); line-height: 1.5; }
.grade__bairro, .grade__busca { grid-column: 1; }
.grade__bairro::after { content: ""; }
.grade__hora { grid-column: 2; grid-row: 2 / span 2; align-self: start; font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.escolas__pe { display: grid; gap: 8px; margin-top: 48px; max-width: 60ch; }
.escolas__pe p { font-size: var(--step-lead); line-height: 1.35; }

/* ---------- como é o dia: frases que descem em escada ---------- */
.dia { padding-block: var(--secao); overflow-x: clip; }
.dia__grade { display: grid; gap: 48px; }
.escada { display: grid; gap: 40px; }
.degrau:nth-child(2) { padding-left: 6vw; }
.degrau:nth-child(3) { padding-left: 12vw; }
.degrau:nth-child(n + 4) { padding-left: 18vw; }
.degrau__frase {
  font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-head); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.03em; text-wrap: balance;
}
.degrau__texto { margin-top: 12px; max-width: 34ch; font-size: var(--step-body); color: var(--c-suave); }
.degrau--ultimo .degrau__frase { color: var(--c-faixa); }
.dia__foto { width: 78%; margin-left: auto; aspect-ratio: 4 / 5; overflow: hidden; transform: rotate(-3deg); background: var(--c-superficie); }
.dia__foto img { width: 100%; height: 115%; object-fit: cover; }

/* ---------- segurança: um quadro para cada item, num painel verde ---------- */
.seguranca { padding-top: var(--secao); background: var(--c-campo-3); color: var(--c-campo-tinta); overflow-x: clip; }
.quadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.quadro {
  display: flex; flex-direction: column; gap: 10px; min-height: 140px; padding: 18px 16px 20px;
  background: color-mix(in srgb, var(--c-campo-3) 78%, #000);
}
.quadro:last-child { grid-column: span var(--fim-2, 1); }
.quadro--titulo {
  grid-column: 1 / -1; min-height: 0; padding: 22px 20px 26px; gap: 14px;
  background: var(--c-faixa); color: var(--c-faixa-tinta);
}
.quadro__titulo {
  font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-head); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.03em;
}
.quadro__nome { font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; hyphens: auto; }
.quadro__texto { font-size: var(--step-body); line-height: 1.45; }
.quadro--titulo .quadro__texto { font-size: var(--step-body); max-width: 46ch; }

/* a foto da faixa ESCOLAR sai pelas bordas, com a legenda numa barra chapada */
.seguranca__foto { position: relative; margin-top: 56px; margin-left: 12%; }
.seguranca__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.seguranca__foto figcaption {
  position: relative; z-index: 1; width: calc(100% - 16px); margin-top: -32px; padding: 16px 18px 20px;
  background: var(--c-fundo); color: var(--c-tinta); font-size: var(--step-body); line-height: 1.45;
}

/* ---------- mensalidade: o tíquete, num painel vermelho ---------- */
.precos { padding-block: var(--secao); background: var(--c-campo-1); color: var(--c-campo-tinta); }
.precos .titulo-secao { margin-bottom: 40px; }
.tiquetes { display: grid; gap: 28px; }
/* o picote do tíquete e da ficha: uma fileira de furos e uma mordida em cada ponta, na cor do painel de trás.
   No celular ele corre de lado a lado; no computador, de cima a baixo. */
.picote { --corte: 28px; position: relative; display: block; height: 10px; margin-inline: 22px; }
.picote > span {
  position: absolute; inset: 0; background: var(--furo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Ccircle cx='7' cy='5' r='3'/%3E%3C/svg%3E") 0 0 / 14px 10px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Ccircle cx='7' cy='5' r='3'/%3E%3C/svg%3E") 0 0 / 14px 10px repeat-x;
}
.picote::before, .picote::after {
  content: ""; position: absolute; top: 50%; width: var(--corte); height: var(--corte); border-radius: 50%;
  background: var(--furo); transform: translateY(-50%);
}
.picote::before { left: calc(-22px - var(--corte) / 2); }
.picote::after { right: calc(-22px - var(--corte) / 2); }
.tiquete .picote { --furo: var(--c-campo-1); }
.cupom .picote { --furo: var(--c-fundo); }

.tiquete {
  position: relative; display: grid;
  background: var(--c-tinta); color: var(--c-fundo);
}
.tiquete__corpo { display: grid; gap: 18px; padding: 28px 24px 30px; container-type: inline-size; }
/* a palavra mais comprida do nome do plano cabe inteira na linha */
.tiquete__nome {
  font-family: var(--f-letreiro); font-weight: 800; font-size: min(var(--step-head), calc(98cqi / (var(--letras, 8) * var(--larg-letra)))); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.03em; overflow-wrap: anywhere;
}
.tiquete__detalhes { display: grid; gap: 6px; }
.tiquete__detalhes li { font-size: var(--step-body); line-height: 1.4; }
.tiquete__canhoto { display: grid; justify-items: center; align-content: space-between; gap: 18px; padding: 44px 24px 0; container-type: inline-size; }
.tiquete__preco { display: grid; justify-items: center; gap: 2px; text-align: center; }
.tiquete__unidade { font-size: var(--step-body); line-height: 1.35; }
.tiquete__valor { font-family: var(--f-letreiro); font-weight: 800; font-size: min(var(--step-display), calc(92cqi / (var(--letras-preco, 6) * var(--larg-letra)))); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tiquete__consulte { font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-lead); line-height: 1.1; }
.tiquete__acao {
  display: flex; align-items: center; justify-content: center; width: calc(100% + 48px); min-height: 56px; margin-inline: -24px;
  background: var(--c-fundo); color: var(--c-tinta); font-weight: 500; text-decoration: none; text-align: center;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);
}
.precos__nota { max-width: 60ch; margin-top: 32px; font-size: var(--step-body); }

/* ---------- a ficha da vaga: o cupom para recortar, amarelo sobre o grafite ---------- */
.vaga { padding-block: var(--secao); }
.cupom {
  position: relative; display: grid;
  background: var(--c-faixa); color: var(--c-faixa-tinta);
}
.cupom__cabeca { position: relative; display: grid; gap: 14px; padding: 26px 20px 30px; container-type: inline-size; }
/* "VAGA PARA" cabe numa linha e o ano vai na de baixo */
.cupom__titulo {
  font-family: var(--f-letreiro); font-weight: 800; font-size: min(var(--step-head), 11cqi); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.03em; text-wrap: balance;
}
.cupom__texto { max-width: 34ch; font-size: var(--step-body); }
.cupom__foto { justify-self: end; width: 40%; max-width: 170px; margin: 4px 8px 0 0; aspect-ratio: 4 / 5; overflow: hidden; transform: rotate(5deg); background: var(--c-superficie); }
.cupom__foto img { width: 100%; height: 100%; object-fit: cover; }
.cupom__campos { display: grid; gap: 12px; padding: 26px 20px 28px; }
.campo { display: grid; gap: 6px; }
.campo[hidden] { display: none; }
.campo__rotulo { font-size: var(--step-small); font-weight: 500; line-height: 1.3; }
.campo__entrada {
  width: 100%; min-height: 54px; padding: 0 14px;
  border: 0; border-radius: 0; background: color-mix(in srgb, var(--c-faixa) 45%, #fff); color: var(--c-faixa-tinta);
  font: 400 1rem/1.3 var(--f); /* 16 px: o celular não dá zoom ao tocar */
  -webkit-appearance: none; appearance: none;
}
select.campo__entrada {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.campo__entrada::placeholder { color: #5B5418; opacity: 1; }
.cupom__resposta { min-height: 1.5em; font-size: var(--step-body); line-height: 1.45; font-weight: 500; }
.cupom__resposta:empty { display: none; }
.cupom__enviar {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 20px; margin-top: 6px;
  border: 0; border-radius: 0; background: var(--c-faixa-tinta); color: var(--c-faixa);
  font: 500 var(--step-body)/1.2 var(--f); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);
}
/* sem JavaScript, o botão da ficha vira um link com a mensagem simples */
.cupom__simples { display: none; }
html:not(.js) .cupom__simples { display: flex; }
html:not(.js) button.cupom__enviar { display: none; }
.cupom__aviso { font-size: var(--step-small); line-height: 1.45; }

/* ---------- quem leva: quadros de cor, um por pessoa (e um para a van) ---------- */
.equipe { padding-block: var(--secao); background: var(--c-superficie); }
.equipe__titulo {
  font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-lead); line-height: 1.1;
  text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 32px;
}
.pessoas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 8px; }
.pessoa__quadro { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center; }
.pessoa__quadro--1 { background: var(--c-campo-1); color: var(--c-campo-tinta); }
.pessoa__quadro--2 { background: var(--c-campo-2); color: var(--c-campo-tinta); }
.pessoa__quadro--3 { background: var(--c-campo-3); color: var(--c-campo-tinta); }
.pessoa__quadro--4 { background: var(--c-faixa); color: var(--c-faixa-tinta); }
/* fotos de qualidades diferentes viram um conjunto só: preto e branco sobre a cor do quadro */
.pessoa__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; }
.pessoa__inicial { font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-display); line-height: 1; }
.pessoa__nome { margin-top: 10px; font-size: var(--step-body); font-weight: 500; line-height: 1.3; }
.pessoa__papel { display: block; font-weight: 400; color: var(--c-suave); }
.pessoa__texto { margin-top: 6px; font-size: var(--step-body); line-height: 1.45; color: var(--c-suave); max-width: 36ch; }

/* ---------- dúvidas: quadros que abrem ---------- */
.duvidas { padding-block: var(--secao); }
.duvidas__grade { display: grid; gap: 32px; }
.duvidas__lista { display: grid; gap: 6px; }
.duvida { background: var(--c-superficie); transition: background-color 220ms ease, color 220ms ease; }
.duvida[open] { background: var(--c-destaque); color: var(--c-destaque-tinta); }
.duvida__pergunta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 14px 20px; cursor: pointer; list-style: none;
  font-size: var(--step-body); font-weight: 500; line-height: 1.3;
}
.duvida__pergunta::-webkit-details-marker { display: none; }
.duvida__sinal { position: relative; flex: none; width: 16px; height: 16px; }
.duvida__sinal::before, .duvida__sinal::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor; transition: transform 260ms var(--ease-out); }
.duvida__sinal::after { transform: rotate(90deg); }
.duvida[open] .duvida__sinal::after { transform: rotate(0deg); }
.duvida__resposta { max-width: 52ch; padding: 0 20px 22px; font-size: var(--step-body); }

/* ---------- contato: na cor da faixa ---------- */
.contato { padding-block: var(--secao); background: var(--c-faixa); color: var(--c-faixa-tinta); overflow-x: clip; }
.contato__grade { display: grid; gap: 40px; }
.contato__cabeca { display: grid; gap: 28px; align-content: start; }
.contato__hoje { font-weight: 500; font-size: var(--step-lead); line-height: 1.3; }
.horarios { display: grid; gap: 2px; margin-top: 12px; }
.horarios li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; background: color-mix(in srgb, var(--c-faixa) 82%, #000); }
.horarios li.e-hoje { background: var(--c-faixa-tinta); color: var(--c-faixa); font-weight: 500; }
.contato__foto { width: 86%; aspect-ratio: 4 / 3; overflow: hidden; transform: rotate(-3deg); background: var(--c-superficie); }
.contato__foto img { width: 100%; height: 100%; object-fit: cover; }
.contato__canais { display: grid; gap: 28px; align-content: start; }
.canais { display: grid; gap: 6px; }
.canal {
  display: grid; gap: 2px; min-height: 64px; padding: 12px 16px;
  background: var(--c-faixa-tinta); color: var(--c-faixa); text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);
}
.canal__nome { font-size: var(--step-small); }
.canal__valor { font-family: var(--f-letreiro); font-weight: 800; font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.contato__onde { display: grid; justify-items: start; }
.contato__endereco { font-size: var(--step-lead); line-height: 1.35; font-weight: 500; margin-bottom: 6px; }
.contato__mapa { position: relative; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--c-faixa) 82%, #000); }
.contato__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contato__mapa--reservado { display: grid; place-items: center; padding: 24px; text-align: center; font-weight: 500; }
.contato__mapa--foco { outline: 3px solid var(--c-faixa-tinta); outline-offset: 3px; }

/* ---------- chamada final: as cores trocadas (fundo claro, tinta grafite) ---------- */
.chamada { padding-block: clamp(72px, 10vw, 140px) clamp(88px, 9vw, 128px); background: var(--c-tinta); color: var(--c-fundo); }
.chamada__grade { display: grid; gap: 28px; }
.chamada__titulo {
  container-type: inline-size;
  font-family: var(--f-letreiro); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.96;
}
.chamada__titulo span { display: block; white-space: nowrap; font-size: min(calc(98cqi / (var(--letras) * var(--larg-letra))), 9rem); }
.chamada__texto { max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }
.chamada__acao { width: 100%; }

/* ---------- rodapé: o nome montado em blocos ---------- */
.rodape { padding-block: clamp(48px, 6vw, 88px) calc(96px + env(safe-area-inset-bottom)); background: var(--c-fundo); }
.blocos { container-type: inline-size; display: flex; align-items: flex-end; gap: 4px; height: 22svh; min-height: 140px; max-height: 300px; }
.bloco {
  flex: 1 1 0; min-width: 0; height: var(--altura); display: grid; place-items: center; overflow: hidden;
  font-family: var(--f-letreiro); font-weight: 800; line-height: 1; text-transform: uppercase;
  font-size: min(calc((100cqi - (var(--qtd) - 1) * 4px) / var(--qtd) * 0.82), 8rem);
  color: var(--c-fundo);
}
/* nome comprido: um bloco por palavra, cada um da largura da palavra, todos com a mesma letra; a tinta é a
   do painel (branca no vermelho, no azul e no verde), porque a letra aqui pode ficar pequena */
.blocos--palavras .bloco {
  flex: var(--n) 1 0; padding: 0 8px;
  font-size: min(calc((100cqi - (var(--qtd) - 1) * 4px - var(--qtd) * 16px) / (var(--total) * var(--larg-letra))), 6rem);
}
.blocos--palavras .bloco--1, .blocos--palavras .bloco--2, .blocos--palavras .bloco--3 { color: var(--c-campo-tinta); }
.blocos--palavras .bloco--4 { color: var(--c-faixa-tinta); }
.bloco--1 { background: var(--c-campo-1); }
.bloco--2 { background: var(--c-campo-2); }
.bloco--3 { background: var(--c-campo-3); }
.bloco--4 { background: var(--c-faixa); }
.rodape__grade { display: grid; gap: 32px; margin-top: 48px; }
.rodape__links ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.rodape__links a, .rodape__canais a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.rodape__contatos { display: grid; gap: 6px; color: var(--c-suave); }
.rodape__nome { color: var(--c-tinta); font-weight: 500; }
.rodape__horario { display: block; }
.rodape__canais { margin-top: 6px; color: var(--c-tinta); }
.rodape__dobras { display: grid; gap: 6px; margin-top: 40px; }
.dobra { background: var(--c-superficie); }
.dobra summary {
  display: flex; align-items: center; min-height: 52px; padding: 0 18px; cursor: pointer; list-style: none;
  font-size: var(--step-small); font-weight: 500;
}
.dobra summary::-webkit-details-marker { display: none; }
.dobra summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; line-height: 1; }
.dobra[open] summary::after { content: "−"; }
.dobra__texto { display: grid; gap: 10px; padding: 0 18px 20px; max-width: 64ch; font-size: var(--step-small); line-height: 1.55; color: var(--c-suave); }
/* os links dentro do texto (créditos e aviso) ganham 44 px de área de toque sem mudar o texto de lugar */
.dobra__texto a { padding: 12px 9px; margin-inline: -9px; color: var(--c-tinta); overflow-wrap: anywhere; }
.dobra__texto strong { color: var(--c-tinta); font-weight: 500; }
.rodape__fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 32px; font-size: var(--step-small); color: var(--c-suave); }
.rodape__fim a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-tinta); }

/* ---------- página 404 ---------- */
.pagina-404 { min-height: 100svh; display: flex; flex-direction: column; }
.pagina-404 main { flex: 1; display: grid; align-content: center; gap: 0; padding-block: 24px; }
.pagina-404 .faixa { margin-inline: 0; }
.pagina-404__texto { display: grid; justify-items: start; gap: 24px; padding: 32px var(--margem); max-width: 46rem; font-size: var(--step-lead); line-height: 1.35; }
.rodape--curto { padding: 20px var(--margem) calc(20px + env(safe-area-inset-bottom)); font-size: var(--step-small); color: var(--c-suave); }
.rodape--curto a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-tinta); }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
  border: 2px solid var(--c-fundo);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55); /* taste-skill-ignore: o botão flutuante flutua de verdade */
  transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s;
}
.flutuante svg { width: 28px; height: 28px; fill: currentColor; }
.flutuante:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 6px var(--c-fundo); border-radius: 50%; } /* taste-skill-ignore: anel duplo de foco do botão flutuante */
.js .flutuante:not(.flutuante--visivel) { opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s 240ms; }

/* ---------- 560 px ---------- */
@media (min-width: 560px) {
  .inicio__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
  .inicio__acoes .btn { width: auto; }
  .pessoas { grid-template-columns: repeat(min(var(--colunas), 3), minmax(0, 1fr)); }
  .quadros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quadro:last-child { grid-column: span var(--fim-3, 1); }
  .chamada__acao { width: auto; justify-self: start; }
}

/* ---------- 900 px: o computador ---------- */
@media (min-width: 900px) {
  /* início: a conversa à esquerda e a van à direita, apoiada na borda da faixa; o título enche a faixa */
  .inicio { padding-block: clamp(24px, 3vw, 48px) clamp(48px, 5vw, 80px); }
  .inicio__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .inicio__conversa { grid-column: 1 / span 6; grid-row: 1; align-self: end; padding-block: 0 52px; gap: 28px; }
  .inicio__sub { max-width: 28ch; }
  .faixa { grid-column: 1 / -1; grid-row: 2; padding-top: 60px; }
  .faixa__linha { font-size: min(calc(98cqi / (var(--letras) * var(--larg-letra))), 8.5rem); }
  /* a van entra 44 px na faixa, só no espaço acima das letras */
  .inicio__foto {
    grid-column: 8 / -1; grid-row: 1; align-self: end; z-index: 1;
    margin: 0 0 -44px; aspect-ratio: 3 / 2; transform: rotate(3deg); transform-origin: 50% 100%;
  }
  .numero { grid-column: 8 / span 3; grid-row: 1; align-self: start; z-index: 2; width: auto; max-width: 280px; margin: 0 0 0 -40px; }

  .escolas .titulo-secao { margin-bottom: 24px; }
  .grade { font-size: var(--step-lead); }
  .grade thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .grade tr, .grade thead tr { display: grid; grid-template-columns: 36fr 22fr 22fr 20fr; column-gap: 24px; }
  .grade thead th { padding-bottom: 8px; font-size: var(--step-small); color: color-mix(in srgb, var(--c-campo-tinta) 78%, var(--c-campo-2)); }
  .grade thead th:last-child { text-align: right; }
  .grade__turno th { padding: 72px 0 20px; font-size: inherit; }
  .grade tbody:first-of-type .grade__turno th { padding-top: 40px; }
  .grade__linha { padding-bottom: 0; }
  .grade__linha th, .grade__linha td { grid-column: auto; grid-row: auto; font-size: inherit; line-height: 1.5; font-weight: 400; }
  .grade__hora { text-align: right; font-weight: 400; }

  .dia__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .escada { grid-column: 1 / -1; grid-row: 1; gap: 64px; }
  .degrau { grid-column: 1 / -1; padding-left: 0 !important; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .degrau > * { grid-column: var(--degrau-inicio, 1) / -1; }
  .degrau:nth-child(2) { --degrau-inicio: 3; }
  .degrau:nth-child(3) { --degrau-inicio: 5; }
  .degrau:nth-child(n + 4) { --degrau-inicio: 7; }
  .degrau__texto { max-width: 34ch; }
  /* a foto fica no vazio que a escada deixa embaixo, à esquerda */
  .dia__foto { grid-column: 1 / span 3; grid-row: 1; align-self: end; width: 100%; margin: 0; aspect-ratio: 1 / 1; transform: rotate(-4deg); }

  .quadros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .quadro { aspect-ratio: 3 / 2; min-height: 0; padding: 24px; }
  .quadro:last-child { grid-column: span var(--fim-4, 1); aspect-ratio: auto; }
  .quadro--titulo { grid-column: span 2; aspect-ratio: auto; padding: 28px 32px; }
  .seguranca__foto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin: 96px 0 0; padding-left: var(--margem); }
  .seguranca__foto img { grid-column: 6 / -1; grid-row: 1; aspect-ratio: 16 / 10; }
  .seguranca__foto figcaption { grid-column: 2 / span 5; grid-row: 1; align-self: end; width: auto; max-width: 40ch; margin: 0 0 48px; padding: 24px 28px 28px; }

  /* o picote de cima a baixo, com as mordidas nas bordas de cima e de baixo */
  .picote { width: 10px; height: auto; margin: 22px 0; }
  .picote > span {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14'%3E%3Ccircle cx='5' cy='7' r='3'/%3E%3C/svg%3E") 0 0 / 10px 14px repeat-y;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14'%3E%3Ccircle cx='5' cy='7' r='3'/%3E%3C/svg%3E") 0 0 / 10px 14px repeat-y;
  }
  .picote::before { left: 50%; top: -22px; transform: translate(-50%, -50%); }
  .picote::after { left: 50%; right: auto; top: calc(100% + 22px); transform: translate(-50%, -50%); }

  .tiquetes { justify-items: center; gap: 40px; }
  /* abaixo de 1200 px o tíquete fica mais largo que 64% da tela, para o preço e o nome caberem */
  .tiquete { width: clamp(min(100%, 760px), 64vw, 940px); aspect-ratio: 2.3 / 1; grid-template-columns: 7fr 10px 3fr; }
  .tiquete__corpo { align-content: space-between; padding: 40px; }
  .tiquete__detalhes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
  .tiquete__canhoto { align-content: center; padding: 32px 0 0; }
  .tiquete__valor { font-size: min(var(--step-head), calc(92cqi / (var(--letras-preco, 6) * var(--larg-letra)))); }
  .tiquete__acao { align-self: end; width: 100%; margin: 0; }
  .precos__nota { margin-inline: auto; width: clamp(min(100%, 760px), 64vw, 940px); }

  .cupom { grid-template-columns: 46fr 10px 54fr; width: calc(100% * 10 / 12); margin-inline: auto; }
  .cupom__cabeca { align-content: space-between; padding: 48px; }
  .cupom__foto { justify-self: start; width: 180px; max-width: none; margin: 12px 0 0; transform: rotate(-4deg); }
  .cupom__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; padding: 48px; align-content: center; }
  .cupom__campos > .campo:first-child, .cupom__campos > .cupom__resposta, .cupom__campos > .cupom__enviar, .cupom__campos > .cupom__aviso, .cupom__campos > .campo:has([name="bairro"]), .cupom__campos > .campo:has([name="outra"]) { grid-column: 1 / -1; }

  .equipe__titulo { margin-bottom: 40px; }
  .pessoas { grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); gap: 36px 12px; }
  .pessoa__quadro { aspect-ratio: 1 / 1; }

  .duvidas__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  /* "PERGUNTAS" cabe na coluna do título em qualquer largura do computador */
  .duvidas__titulo { grid-column: 1 / span 5; position: sticky; top: calc(var(--topo) + 32px); font-size: min(var(--step-head), 4vw); }
  .duvidas__lista { grid-column: 6 / -1; gap: 8px; }
  .duvida__pergunta { min-height: 72px; padding: 16px 24px; font-size: var(--step-lead); }
  .duvida__resposta { padding: 0 24px 26px; }

  .contato__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .contato__cabeca { grid-column: 1 / span 5; gap: 32px; }
  .contato__canais { grid-column: 7 / -1; }
  .contato__foto { width: 80%; margin-top: 16px; }
  .contato__mapa { aspect-ratio: 16 / 9; }

  .chamada__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .chamada__titulo { grid-column: 1 / -1; margin-bottom: 56px; }
  .chamada__texto { grid-column: 1 / span 5; }
  .chamada__acao { grid-column: 9 / -1; justify-self: end; }

  .blocos { height: 34svh; max-height: 380px; }
  .rodape__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 56px; }
  .rodape__links { grid-column: 1 / span 7; }
  .rodape__links ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rodape__contatos { grid-column: 9 / -1; }
}

/* ---------- 1100 px: o menu volta para a barra ---------- */
@media (min-width: 1100px) {
  .menu { display: flex; align-items: center; margin-right: 12px; }
  .menu ul { display: flex; gap: 4px 24px; }
  .menu li a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
    font-weight: 500; font-size: var(--step-small);
    text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.08em; text-underline-offset: 0.3em;
    transition: text-decoration-color 180ms ease;
  }
  .menu__acoes, .menu-btn { display: none; }
}

/* ---------- interação no computador ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--destaque:hover { background: var(--c-faixa); color: var(--c-faixa-tinta); }
  .btn--claro:hover { background: var(--c-faixa); }
  .chamada .btn--destaque:hover { background: var(--c-fundo); color: var(--c-tinta); }
  .tiquete__acao:hover { background: var(--c-campo-1); color: var(--c-campo-tinta); }
  .cupom__enviar:hover { background: var(--c-campo-1); color: var(--c-campo-tinta); }
  .canal:hover { background: var(--c-campo-1); color: var(--c-campo-tinta); }
  .duvida:not([open]):hover { background: color-mix(in srgb, var(--c-superficie) 80%, var(--c-tinta)); }
  .dobra:hover { background: color-mix(in srgb, var(--c-superficie) 85%, var(--c-tinta)); }
  .menu li a:hover { text-decoration-color: currentColor; }
  .link:hover, .menu-btn:hover, .rodape a:hover { text-decoration-thickness: 0.14em; text-decoration-line: underline; }
  .campo__entrada:hover { background: color-mix(in srgb, var(--c-faixa) 25%, #fff); }
  .inicio__foto img, .dia__foto img, .contato__foto img, .pessoa__quadro img { transition: transform 900ms var(--ease-out); }
  .inicio__foto:hover img, .contato__foto:hover img, .pessoa:hover .pessoa__quadro img { transform: scale(1.04); }
  .pessoa:hover .pessoa__inicial { transform: translateY(-6px); }
  .pessoa__inicial { transition: transform 400ms var(--ease-out); }
}

/* ---------- movimento (só com a classe .movimento, que respeita "reduzir movimento") ----------
   Assinatura: as linhas do título sobem do pé da faixa (a letra nunca começa escondida: só desliza). A van
   assenta inclinada. Os blocos marcados com data-revelar sobem quando chegam na tela; o conteúdo nunca sai da
   ordem do Tab e aparece na hora se algo dentro dele receber o foco. */
.movimento .faixa__linha > span { animation: subir-linha 900ms var(--ease-out) both; }
.movimento .faixa__linha + .faixa__linha > span { animation-delay: 110ms; }
.movimento .inicio__conversa { animation: aparecer 700ms var(--ease-out) 260ms both; }
.movimento .numero { animation: aparecer 700ms var(--ease-out) 360ms both; }
.movimento .inicio__foto img { animation: assentar 1400ms var(--ease-out) both; }
@keyframes subir-linha { from { transform: translateY(0.32em); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(18px); } }
@keyframes assentar { from { transform: scale(1.08); } }

.movimento [data-revelar].a-revelar { opacity: 0; transform: translateY(28px); }
.movimento [data-revelar].a-revelar:focus-within { opacity: 1; transform: none; }
.movimento [data-revelar] { transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--atraso, 0ms); }
.movimento .dia__foto[data-revelar].a-revelar { transform: translateY(40px) rotate(-3deg); }
@media (min-width: 900px) { .movimento .dia__foto[data-revelar].a-revelar { transform: translateY(40px) rotate(10deg); } }
.movimento .tiquete[data-revelar].a-revelar { transform: translateY(48px) rotate(-2deg); }
.cupom__resposta.e-nova { animation: aparecer 420ms var(--ease-out); }

/* ---------- celular (até 899 px): ajustes que não mexem no computador ---------- */
/* no celular estreito, o topo fica só com o nome e o menu: o pedido de vaga está no início e no flutuante */
@media (max-width: 559.98px) {
  .topo__cta { display: none; }
  /* dois quadros por linha: o nome vai na letra do texto, que é estreita, e nenhuma palavra se parte */
  .quadro__nome { font-family: var(--f); font-weight: 500; font-size: var(--step-lead); line-height: 1.2; letter-spacing: 0; overflow-wrap: normal; hyphens: manual; }
}
/* até 899 px: o tamanho do título da faixa fica no próprio h1 (as linhas herdam), para o h1 medir o que mostra */
@media (max-width: 899.98px) {
  .faixa { container-type: inline-size; }
  .faixa__titulo { font-size: min(calc(98cqi / (var(--letras) * var(--larg-letra))), 9.5rem); }
  .faixa__linha { font-size: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}