/* =========================================================================
   CARTÃO ATENDE — "O TALÃO"
   Impresso comercial de duas chapas: laranja da marca sangrando até a borda,
   vias em papel branco assentadas sobre ele, tinta de segurança verde-petróleo
   só na camada de máquina. Ver DESIGN.md.
   ========================================================================= */

/* ---------- Chapas ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  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';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/courier-prime-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/courier-prime-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* tinta 1 — laranja da marca */
  --tinta-1:        oklch(0.723 0.153 55);          /* chapa laranja — só campo */
  --tinta-1-texto:  oklch(0.600 0.165 48);          /* laranja legível sobre papel — 4.05:1 */
  --tinta-1-fundo:  oklch(0.628 0.158 48);
  --tinta-1-clara:  oklch(0.930 0.045 68);
  /* tinta 2 — tinta de segurança */
  --tinta-2:        oklch(0.455 0.083 205);         /* 6.72:1 sobre papel */
  --tinta-2-clara:  oklch(0.930 0.028 205);
  /* papel e ink */
  --papel:          oklch(0.988 0.003 70);
  --ink:            oklch(0.235 0.028 55);          /* 16.2:1 sobre papel · 6.5:1 sobre laranja */
  --ink-fraca:      oklch(0.475 0.032 55);          /* 6.5:1 sobre papel */
  /* sobre a chapa laranja o texto é tinta escura, nunca branco:
     branco sobre laranja dá 2.46:1 e reprova até para display */
  --ink-sobre-tinta:       var(--ink);              /* 6.53:1 */
  --ink-sobre-tinta-fraca: oklch(0.340 0.060 48);   /* 4.68:1 */

  /* contexto: o que está atrás da via (a serrilha morde com esta cor) */
  --fundo: var(--papel);

  --col: min(100% - 3.5rem, 1180px);
  --fio-x: 14px;

  --serr-r: 7px;
  --serr-passo: 22px;

  --sombra-via: 0 2px 0 var(--tinta-1-fundo), 0 22px 34px -24px oklch(0.235 0.028 55 / 0.55);
  --sombra-via-alta: 0 3px 0 var(--tinta-1-fundo), 0 40px 52px -28px oklch(0.235 0.028 55 / 0.62);

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 520ms;

  --z-picote: 1;
  --z-conteudo: 2;
  --z-carimbo: 3;
  --z-topo: 40;
  --z-canhoto: 50;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.mono {
  font-family: 'Courier Prime', ui-monospace, 'Cascadia Mono', Menlo, monospace;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tinta-2);
  outline-offset: 3px;
  border-radius: 1px;
}
.secao--tinta :focus-visible,
.abre :focus-visible,
.fecho :focus-visible { outline-color: var(--ink); }

.pular {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ink); color: var(--papel);
  padding: 0.75rem 1.1rem; font-weight: 700; text-decoration: none;
}
.pular:focus { top: 1rem; }

/* =========================================================================
   O PICOTE — fio contínuo, desenhado pelo scroll
   ========================================================================= */
main { position: relative; }
:target, .secao, .abre, .fecho { scroll-margin-top: 6rem; }

.picote {
  position: absolute;
  top: 0; bottom: var(--picote-fim, 0px);
  left: max(var(--fio-x), calc(50% - var(--col) / 2 - 26px));
  width: 2px;
  z-index: var(--z-picote);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.picote__trilho, .picote__linha {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ink) 0 7px,
    transparent 7px 17px
  );
}
.picote::after {
  content: '';
  position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.5;
}
.picote__trilho { opacity: 0.16; }
.picote__linha {
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--progresso, 0%), transparent var(--progresso, 0%));
  mask-image: linear-gradient(to bottom, #000 var(--progresso, 0%), transparent var(--progresso, 0%));
}

/* nós do fio: um alvo de registro em cada seção */
.secao, .abre, .fecho { position: relative; }
.secao::before {
  content: '';
  position: absolute;
  top: clamp(2.4rem, 4vw, 3.6rem);
  left: max(calc(var(--fio-x) - 4px), calc(50% - var(--col) / 2 - 30px));
  width: 10px; height: 10px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--fundo);
  opacity: 0.45;
  z-index: var(--z-picote);
}

/* =========================================================================
   TOPO
   ========================================================================= */
.topo {
  position: sticky;
  top: 0;
  z-index: var(--z-topo);
  background: var(--tinta-1);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.1rem clamp(1rem, 3vw, 2.25rem) 1.1rem clamp(1.25rem, 4vw, 3rem);
}
.topo__marca { display: block; line-height: 0; }
.topo__marca img { width: clamp(150px, 17vw, 218px); height: auto; }

.topo__nav {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  margin-inline-start: auto;
}
.topo__nav a {
  font-size: 0.9rem;
  font-variation-settings: 'wdth' 94;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 180ms var(--curva);
}
.topo__nav a:hover { border-bottom-color: var(--ink); }

/* canhoto "já sou cliente" — via branca com serrilha na aresta esquerda */
.canhoto-cliente {
  position: relative;
  display: grid;
  gap: 0.05rem;
  background: var(--papel);
  color: var(--ink);
  text-decoration: none;
  padding: 0.55rem 1rem 0.6rem 1.25rem;
  min-height: 48px;
  box-shadow: 0 2px 0 var(--tinta-1-fundo);
  transition: transform 200ms var(--curva), box-shadow 200ms var(--curva);
}
.canhoto-cliente::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0; width: 8px;
  background-image: radial-gradient(circle at 0 8px, var(--tinta-1) 5px, transparent 5.5px);
  background-size: 8px 16px;
  background-repeat: repeat-y;
}
.canhoto-cliente:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--tinta-1-fundo); }
.canhoto-cliente__rot {
  font-size: 0.6875rem; font-weight: 650;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-fraca);
}
.canhoto-cliente__val {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.95rem; font-weight: 700;
  font-variation-settings: 'wdth' 100;
}
.seta { width: 1.05em; height: 1.05em; flex: none; }

/* =========================================================================
   VIA — o único container da página
   ========================================================================= */
.via {
  position: relative;
  background: var(--papel);
  color: var(--ink);
  box-shadow: var(--sombra-via);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  padding-bottom: calc(clamp(1.4rem, 2.4vw, 2rem) + var(--serr-r));
  z-index: var(--z-conteudo);
}
.serrilha--baixo {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--serr-r) + 2px);
  background-image: radial-gradient(
    circle at calc(var(--serr-passo) / 2) calc(var(--serr-r) + 2px),
    var(--fundo) var(--serr-r), transparent calc(var(--serr-r) + 0.6px)
  );
  background-size: var(--serr-passo) 100%;
  background-repeat: repeat-x;
  pointer-events: none;
}

.via__marca-canto {
  position: absolute; top: 0.85rem; right: 0.85rem;
  color: var(--tinta-2); opacity: 0.55;
}
.mira { width: 20px; height: 20px; display: block; }

.via__cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  margin-bottom: 1.1rem;
  border-bottom: 1.5px solid var(--ink);
}
.via__cedente {
  font-size: 0.78rem; font-weight: 700;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.13em;
}
.via__num {
  font-size: 0.72rem; color: var(--ink-fraca);
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Campos do carnê */
.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0.15rem 1.4rem;
}
.campo {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0 0.6rem;
  border-bottom: 1px solid var(--tinta-1-clara);
}
.campo__rot {
  font-size: 0.6875rem; font-weight: 650;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-fraca);
}
.campo__val { font-size: 1.05rem; font-weight: 700; }
.campo__val small {
  font-size: 0.62em; font-weight: 400; color: var(--ink-fraca);
  letter-spacing: 0;
}
.valor-grande {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.campo--destaque {
  grid-column: 1 / -1;
  border-bottom-width: 2px;
  border-bottom-color: var(--ink);
}
.campos--emissao .campo--destaque { padding-top: 0.2rem; }

/* Camada de máquina */
.maquina {
  margin-top: 1.4rem;
  color: var(--tinta-2);
}
.barras {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 38px;
  fill: currentColor;
}
.linha-digitavel {
  margin-top: 0.5rem;
  font-size: clamp(0.66rem, 0.5rem + 0.5vw, 0.8rem);
  letter-spacing: 0.02em;
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

/* =========================================================================
   BOTÕES — campo carimbado, não pílula
   ========================================================================= */
.botao {
  --btn-bg: var(--ink);
  --btn-fg: var(--papel);
  --btn-sombra: var(--tinta-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 750;
  font-size: 1.0625rem;
  font-variation-settings: 'wdth' 104;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: none;
  box-shadow: 0 5px 0 var(--btn-sombra);
  cursor: pointer;
  transition: transform 170ms var(--curva), box-shadow 170ms var(--curva), background-color 170ms var(--curva);
}
.botao:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--btn-sombra); }
.botao:active { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-sombra); }
.botao--forte { width: 100%; }
.botao--grande {
  min-height: 66px;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem);
  padding-inline: 2rem;
}
.botao--tinta2 { --btn-bg: var(--tinta-2); --btn-sombra: var(--ink); }
.botao--fino {
  min-height: 46px;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.botao--fino:hover {
  --btn-bg: var(--ink); --btn-fg: var(--papel);
  transform: none; box-shadow: inset 0 0 0 2px var(--ink);
}
.zap { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }

/* botões sobre campo laranja */
.secao--tinta .botao,
.fecho .botao { --btn-bg: var(--papel); --btn-fg: var(--ink); --btn-sombra: var(--ink); }

/* =========================================================================
   VIA 01 — ABERTURA
   ========================================================================= */
.abre {
  --fundo: var(--tinta-1);
  background: var(--tinta-1);
  color: var(--ink-sobre-tinta);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4.5vw, 4rem);
  overflow: hidden;
}
.abre__interior {
  width: var(--col);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  grid-template-areas: 'dizer via' 'prova peca';
  align-items: start;
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  row-gap: clamp(1.75rem, 3vw, 2.5rem);
}
.abre__dizer  { grid-area: dizer; }
.abre__peca   { grid-area: peca; }
.abre__prova  { grid-area: prova; align-self: start; }
.via--emissao { grid-area: via; }

.selo-tipo {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--papel);
  padding: 0.35rem 0.7rem;
  margin-bottom: 1.1rem;
}
.abre h1 {
  font-size: clamp(2.3rem, 1.15rem + 4.3vw, 4.4rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ink-sobre-tinta);
}
.abre__sub {
  margin-top: 1.15rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  color: var(--ink-sobre-tinta-fraca);
}
.abre__marcas {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.abre__marcas li {
  font-size: 0.82rem; font-weight: 650;
  font-variation-settings: 'wdth' 92;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-sobre-tinta);
  border: 1.5px solid oklch(0.235 0.028 55 / 0.45);
  padding: 0.3rem 0.7rem;
}

.abre__peca { margin: clamp(0.5rem, 2vw, 2.25rem) 0 0; }
.abre__peca img {
  width: 100%;
  box-shadow: 0 3px 0 var(--tinta-1-fundo), 0 32px 44px -26px oklch(0.235 0.028 55 / 0.6);
  transform: rotate(-1.6deg);
}
.abre__peca figcaption {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--ink-sobre-tinta-fraca);
  max-width: 34ch;
}

/* prova em gramática de campo de carnê, não em números-cartaz */
.abre__prova {
  margin: clamp(1.75rem, 3vw, 2.75rem) 0 0;
  padding-top: 0.4rem;
  border-top: 1.5px solid oklch(0.235 0.028 55 / 0.4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  column-gap: 1.5rem;
}
.abre__prova > div {
  padding: 0.6rem 0 0.65rem;
  border-bottom: 1px solid oklch(0.235 0.028 55 / 0.22);
}
.abre__prova dt {
  font-size: 0.66rem; font-weight: 650;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--ink-sobre-tinta-fraca);
}
.abre__prova dd {
  margin: 0.15rem 0 0;
  font-size: 0.95rem; font-weight: 700;
  color: var(--ink-sobre-tinta);
}


.via__acao { margin-top: 1.5rem; }
.via__acao-nota {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--ink-fraca);
}


/* ---- O canhoto: tira lateral picotada com os campos abreviados ----
   É o dispositivo que define o objeto. Fundo em guilhoché de segurança,
   perfuração vertical desenhada na mesma gramática do picote da página. */
.via--emissao {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  padding: 0;
  padding-bottom: var(--serr-r);
}
.via__corpo { padding: clamp(1.4rem, 2.4vw, 2rem); }

.canhoto {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 1.35rem;
  width: clamp(7.5rem, 12vw, 9.5rem);
  padding: clamp(1.3rem, 2vw, 1.75rem) clamp(0.9rem, 1.4vw, 1.15rem);
  background-color: oklch(0.455 0.083 205 / 0.035);
  background-image:
    repeating-linear-gradient(45deg,  oklch(0.455 0.083 205 / 0.10) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(-45deg, oklch(0.455 0.083 205 / 0.08) 0 1px, transparent 1px 8px);
}
.canhoto::after {
  content: '';
  position: absolute; top: 0; bottom: 0; right: -1px; width: 2px;
  background-image: repeating-linear-gradient(to bottom, var(--ink) 0 6px, transparent 6px 14px);
  opacity: 0.42;
}
.canhoto__marca {
  font-size: 0.7rem; font-weight: 800;
  font-variation-settings: 'wdth' 87;
  text-transform: lowercase; letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--tinta-1-texto);
}
.canhoto__campos { margin: 0; display: grid; gap: 0.05rem; }
.canhoto__campos > div {
  padding: 0.35rem 0 0.4rem;
  border-bottom: 1px solid oklch(0.455 0.083 205 / 0.28);
}
.canhoto__campos dt {
  font-size: 0.58rem; font-weight: 650;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-fraca);
}
.canhoto__campos dd { margin: 0; font-size: 0.82rem; font-weight: 700; }
.canhoto__rodape {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
  text-transform: uppercase;
}

.linha-digitavel__rot {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-size: 0.58rem; font-weight: 650;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--tinta-2);
  margin-bottom: 0.2rem;
}

/* ---- Atalho de agendamento dentro do canhoto fixo ---- */
.canhoto-fixo__agendar {
  position: relative;
  display: grid;
  gap: 0.05rem;
  flex: none;
  padding: 0.4rem 0.85rem 0.45rem 0.7rem;
  min-height: 50px;
  align-content: center;
  color: var(--tinta-2);
  text-decoration: none;
  border-right: 1px dashed oklch(0.455 0.083 205 / 0.45);
}
.canhoto-fixo__agendar-val { font-size: 1rem; font-weight: 750; line-height: 1.1; }

/* =========================================================================
   SEÇÕES
   ========================================================================= */
.secao {
  --fundo: var(--tinta-1-clara);
  width: 100%;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}
.secao > * { width: var(--col); margin-inline: auto; }
.secao--tinta {
  --fundo: var(--tinta-1);
  background: var(--tinta-1);
  color: var(--ink);
}
.secao--tinta .secao__lede { color: var(--ink-sobre-tinta-fraca); }

.secao__cabeca { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.secao h2 {
  font-size: clamp(1.85rem, 1.05rem + 3.2vw, 3.4rem);
  font-weight: 780;
  font-variation-settings: 'wdth' 110;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 20ch;
}
.secao h2 em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.1em;
  text-decoration-color: var(--tinta-1-texto);
}
.secao--tinta h2 em { text-decoration-color: var(--papel); }
.secao__lede {
  margin-top: 1.1rem;
  max-width: 62ch;
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
  color: var(--ink-fraca);
}

/* =========================================================================
   VIA 02 — O TALÃO DE BENEFÍCIOS
   ========================================================================= */
.talao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: start;
}
.via--benef {
  display: grid;
  align-content: start;
  transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.benef__num {
  font-size: clamp(3rem, 2rem + 4vw, 4.6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--tinta-1-texto);
  margin: 0.2rem 0 0.6rem;
}
.benef__num--palavra {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.3rem);
  font-weight: 780;
  font-variation-settings: 'wdth' 92;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-transform: lowercase;
  padding-block: 0.55rem 0.3rem;
}
.benef__diz { font-size: 0.98rem; color: var(--ink-fraca); }
.campo--pagar {
  margin-top: 1.2rem;
  border-bottom: 2px solid var(--ink);
}
.campo--pagar .campo__val { color: var(--ink); }

.destacar {
  margin-top: 1.1rem;
  min-height: 48px;
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 2px dashed var(--tinta-2);
  font-family: inherit;
  font-size: 0.86rem; font-weight: 700;
  font-variation-settings: 'wdth' 92;
  text-transform: uppercase; letter-spacing: 0.09em;
  cursor: pointer;
  transition: background-color 200ms var(--curva), color 200ms var(--curva), border-color 200ms var(--curva);
}
.destacar:hover { background: var(--tinta-2-clara); }
.destacar__off { display: none; }
.destacar__on  { display: inline; }

.carimbo {
  position: absolute;
  bottom: 7.4rem; left: 50%;
  transform: translate(-50%, 50%) rotate(-9deg) scale(1.5);
  z-index: var(--z-carimbo);
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 96;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tinta-2);
  border: 3px solid var(--tinta-2);
  outline: 1px solid var(--tinta-2);
  outline-offset: 3px;
  padding: 0.3rem 0.9rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--curva), transform var(--dur) var(--curva);
}
.via--benef.destacada {
  transform: rotate(-1.3deg) translateY(9px);
  box-shadow: var(--sombra-via-alta);
}
.via--benef.destacada .carimbo {
  opacity: 0.92;
  transform: translate(-50%, 50%) rotate(-9deg) scale(1);
}
.via--benef.destacada .destacar {
  border-style: solid;
  border-color: var(--tinta-2);
  background: var(--tinta-2);
  color: var(--papel);
}
.via--benef.destacada .destacar__off { display: inline; }
.via--benef.destacada .destacar__on  { display: none; }

.talao__saldo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-top: 1rem;
  border-top: 1.5px solid var(--tinta-1-clara);
}
.talao__saldo-rot {
  font-size: 0.7rem; font-weight: 650;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--ink-fraca);
}
#saldo-num { font-size: 1.1rem; font-weight: 700; }
.talao__saldo-nota { font-size: 0.9rem; color: var(--ink-fraca); }

/* =========================================================================
   VIA 03 — SITUAÇÕES
   ========================================================================= */
.situacoes {
  list-style: none; margin-block: 0; padding: 0;
  border-top: 1.5px solid var(--ink);
}
.situacao {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) auto;
  align-items: baseline;
  gap: 0.3rem clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.15rem, 2vw, 1.6rem) 0;
  border-bottom: 1.5px solid oklch(0.235 0.028 55 / 0.28);
}
.situacao h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.35rem);
  font-weight: 720;
  font-variation-settings: 'wdth' 104;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.situacao__itens {
  font-size: 0.86rem;
  color: var(--ink-sobre-tinta-fraca);
  line-height: 1.5;
}
.situacao__valor {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-align: right;
}
.situacoes__nota {
  margin-block: 1.5rem 0;
  margin-inline: auto 0;
  font-size: 0.95rem;
  color: var(--ink-sobre-tinta-fraca);
  max-width: 52ch;
}

/* =========================================================================
   VIA 04 — BALANÇO
   ========================================================================= */
.balanco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(1.2rem, 2.2vw, 2rem);
  align-items: start;
}
.via--balanco-nao { --sombra-via: 0 2px 0 var(--tinta-2), 0 22px 34px -24px oklch(0.235 0.028 55 / 0.5); }

.lista-marcada { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.05rem; }
.lista-marcada li {
  position: relative;
  padding: 0.55rem 0 0.6rem 2rem;
  border-bottom: 1px solid var(--tinta-1-clara);
  font-size: 0.98rem;
}
.lista-marcada li::before {
  position: absolute; left: 0; top: 0.5rem;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
}
.lista-marcada--sim li::before { content: '✓'; color: var(--tinta-1-texto); }
.lista-marcada--nao li::before { content: '✕'; color: var(--tinta-2); }
.lista-marcada--nao li { border-bottom-color: var(--tinta-2-clara); }
.balanco__nota {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--ink-fraca);
}
.secao--tinta .lista-marcada li { border-bottom-color: oklch(0.235 0.028 55 / 0.25); }
.secao--tinta .lista-marcada--sim li::before { color: var(--ink); }

/* =========================================================================
   VIA 05 — REDE
   ========================================================================= */
.rede__assinatura { margin-bottom: 1.2rem; }
.rede__assinatura img { width: 168px; height: auto; }

.unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: start;
}
.via--unidade { padding-top: 0; display: grid; align-content: start; }
.via--unidade > img {
  width: calc(100% + 2 * clamp(1.4rem, 2.4vw, 2rem));
  margin-left: calc(-1 * clamp(1.4rem, 2.4vw, 2rem));
  margin-bottom: 1.2rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.via--unidade .via__cabeca { margin-bottom: 0.9rem; }
.via--unidade address {
  font-style: normal;
  font-size: 0.95rem;
  color: var(--ink-fraca);
  line-height: 1.55;
  margin-bottom: 1.2rem;
}
.via--unidade .botao { justify-self: start; }

.infra {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem;
  list-style: none; margin-block: clamp(1.5rem, 2.5vw, 2.25rem) 0; padding: 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-fraca);
}
.infra li::after { content: ' ·'; color: var(--tinta-1-texto); }
.infra li:last-child::after { content: ''; }

/* =========================================================================
   VIA 06 — CLIENTE ATUAL
   ========================================================================= */
.secao--cliente {
  --fundo: var(--tinta-2-clara);
  background: var(--tinta-2-clara);
}
.via--cliente {
  max-width: 44rem;
  margin-inline: auto 0;
  --sombra-via: 0 2px 0 var(--tinta-2), 0 24px 36px -24px oklch(0.235 0.028 55 / 0.5);
}
.via--cliente h2 {
  font-size: clamp(1.6rem, 1.05rem + 2.2vw, 2.5rem);
  font-weight: 780;
  font-variation-settings: 'wdth' 108;
  letter-spacing: -0.028em;
  line-height: 1.05;
  max-width: 22ch;
  margin-bottom: 0.9rem;
}
.via--cliente > p { color: var(--ink-fraca); max-width: 52ch; margin-bottom: 1.5rem; }
.via--cliente .botao { max-width: 26rem; }

/* =========================================================================
   VIA 07 — PARCEIROS
   ========================================================================= */
.parceiros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 0;
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
}
.desconto {
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.desconto__val {
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--tinta-1-texto);
}
.desconto--extra .desconto__val { color: var(--tinta-2); }
.desconto__onde {
  margin-top: 0.8rem;
  font-size: 0.92rem;
  color: var(--ink-fraca);
  max-width: 22ch;
}
.parceiros__nota { margin-block: 1.2rem 0; margin-inline: auto 0; font-size: 0.85rem; color: var(--ink-fraca); }

/* =========================================================================
   VIA 08 — EMPRESAS
   ========================================================================= */
.empresas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: start;
}
.empresas__dizer .lista-marcada { margin: 1.75rem 0; }
.empresas__dizer .botao { max-width: 24rem; }
.via--pj { --sombra-via: 0 2px 0 oklch(0.42 0.14 45), 0 24px 36px -24px oklch(0.235 0.028 55 / 0.5); }

/* =========================================================================
   VIA 09 — PERGUNTAS
   ========================================================================= */
.faq { border-top: 1.5px solid var(--ink); max-width: 56rem; margin-inline: auto 0; }
.questao { border-bottom: 1px solid var(--tinta-1-clara); }
.questao summary {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 0;
  min-height: 56px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.13rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 102;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
}
.questao summary::-webkit-details-marker { display: none; }
.questao summary::after {
  content: '+';
  margin-inline-start: auto;
  font-family: 'Courier Prime', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tinta-1-texto);
  transition: transform 220ms var(--curva);
}
.questao[open] summary::after { content: '−'; }
.questao summary:hover { color: var(--tinta-1-texto); }
.questao__corpo { padding: 0 0 1.3rem; max-width: 66ch; }
.questao__corpo p { color: var(--ink-fraca); }
.questao__corpo a { color: var(--tinta-2); text-underline-offset: 3px; }

/* =========================================================================
   FECHO
   ========================================================================= */
.fecho {
  --fundo: var(--tinta-1);
  background: var(--tinta-1);
  color: var(--ink);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
  text-align: center;
}
.fecho__interior { width: var(--col); margin-inline: auto; display: grid; }
.fecho h2 {
  font-size: clamp(2rem, 1.15rem + 3.6vw, 4rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 114;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink-sobre-tinta);
  max-width: 16ch;
  margin-inline: auto;
}
.fecho__interior > p {
  margin-top: 1.1rem;
  max-width: 44ch;
  margin-inline: auto;
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.15rem);
  color: var(--ink-sobre-tinta-fraca);
}
.fecho__valores {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.6rem 1rem;
  margin: 1.9rem 0 1.6rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 700;
  color: var(--ink-sobre-tinta);
}
.fecho__valores .mono {
  border: 1.5px solid var(--ink-sobre-tinta);
  padding: 0.45rem 0.9rem;
}
.fecho__ou {
  font-family: 'Archivo', sans-serif;
  font-size: 0.8rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-sobre-tinta-fraca);
}
.fecho .botao { width: min(100%, 26rem); margin-inline: auto; }

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.rodape {
  background: var(--ink);
  color: oklch(0.90 0.012 60);
  padding: clamp(3rem, 5vw, 4.5rem) 0 2.5rem;
}
.rodape > * { width: var(--col); margin-inline: auto; }
.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid oklch(1 0 0 / 0.16);
}
.rodape__marca img { width: 190px; margin-bottom: 1rem; }
.rodape__marca p { font-size: 0.9rem; color: oklch(0.82 0.02 60); max-width: 26ch; }
.rodape__bloco h3 {
  font-size: 0.72rem; font-weight: 700;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--tinta-1);
  margin-bottom: 0.9rem;
}
.rodape__bloco p { font-size: 0.92rem; margin-bottom: 0.5rem; color: oklch(0.86 0.015 60); }
.rodape__bloco a { color: oklch(0.94 0.012 60); text-underline-offset: 3px; }
.rodape__bloco a:hover { color: var(--tinta-1); }
.rodape__legal {
  margin-top: 2.5rem;
  font-size: 0.78rem;
  line-height: 1.65;
  color: oklch(0.74 0.018 60);
  max-width: 82ch;
}
.rodape__legal strong { color: oklch(0.92 0.015 60); }
.rodape__copy { margin-top: 1.5rem; font-size: 0.75rem; color: oklch(0.68 0.018 60); }

/* =========================================================================
   CANHOTO FIXO (celular)
   ========================================================================= */
.canhoto-fixo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-canhoto);
  display: none;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
  background: var(--papel);
  box-shadow: 0 -1px 0 var(--tinta-1-clara), 0 -14px 28px -18px oklch(0.235 0.028 55 / 0.6);
  transform: translateY(110%);
  transition: transform 320ms var(--curva);
}
.canhoto-fixo.visivel { transform: translateY(0); }
.canhoto-fixo__val { display: grid; gap: 0.05rem; flex: none; }
.canhoto-fixo__rot {
  font-size: 0.62rem; font-weight: 650;
  font-variation-settings: 'wdth' 87;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-fraca);
}
.canhoto-fixo__val .mono { font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.canhoto-fixo .botao { min-height: 50px; font-size: 0.98rem; padding-inline: 1.1rem; }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width: 1000px) {
  .abre__interior {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'dizer' 'via' 'peca' 'prova';
    row-gap: clamp(1.75rem, 3vw, 2.25rem);
  }
  .abre__peca { max-width: 26rem; margin-top: 0; }
}

@media (max-width: 720px) {
  .via--emissao { grid-template-columns: minmax(0, 1fr); }
  .canhoto {
    width: auto;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.9rem clamp(1.4rem, 2.4vw, 2rem) 1.1rem;
  }
  .canhoto::after {
    top: auto; right: 0; left: 0; bottom: -1px; width: auto; height: 2px;
    background-image: repeating-linear-gradient(to right, var(--ink) 0 6px, transparent 6px 14px);
  }
  .canhoto__campos {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 0.85rem;
  }
  .canhoto__rodape { grid-column: 2; grid-row: 1; text-align: right; }
  .via--emissao > .via__marca-canto { display: none; }
}

@media (max-width: 860px) {
  .topo__nav { display: none; }
  .topo { justify-content: space-between; }
  .canhoto-fixo { display: flex; }
  .situacao {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'titulo valor' 'itens itens';
    align-items: start;
  }
  .situacao h3 { grid-area: titulo; }
  .situacao__valor { grid-area: valor; }
  .situacao__itens { grid-area: itens; margin-top: 0.35rem; }
}

@media (max-width: 640px) {
  :root {
    --col: min(100% - 3.25rem, 1180px);
    --fio-x: 12px;
  }
  .secao > *,
  .abre__interior,
  .fecho__interior,
  .rodape > * {
    margin-left: max(2rem, calc((100% - var(--col)) / 2));
    margin-right: auto;
  }
  .topo { padding-left: 1.5rem; }
  .topo__marca img { width: 132px; }
  .abre h1 { font-size: clamp(2rem, 1rem + 6vw, 3rem); }
  .canhoto-cliente { padding: 0.5rem 0.75rem 0.55rem 1rem; }
  .canhoto-cliente__val { font-size: 0.84rem; }
  .canhoto-cliente__rot { font-size: 0.62rem; }
  .parceiros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carimbo { bottom: 6.9rem; }
}

@media (max-width: 400px) {
  .parceiros { grid-template-columns: minmax(0, 1fr); }
  .canhoto-fixo .botao { font-size: 0.9rem; padding-inline: 0.8rem; }
  .canhoto-fixo__agendar { padding-inline: 0.55rem 0.7rem; }
}

@media (max-width: 350px) {
  .canhoto-cliente__rot { display: none; }
}

/* =========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  .via--benef.destacada { transform: none; }
  .carimbo { transition: opacity 120ms linear; }
  .via--benef.destacada .carimbo { transform: translate(-50%, 50%) rotate(-9deg) scale(1); }
  .picote__linha { -webkit-mask-image: none; mask-image: none; }
  .canhoto-fixo { transition: none; }
}

/* =========================================================================
   IMPRESSÃO
   ========================================================================= */
@media print {
  .picote, .canhoto-fixo, .destacar, .topo__nav { display: none; }
  body { background: #fff; }
  .abre, .secao--tinta, .fecho { background: #fff; color: #000; }
  .via { box-shadow: none; border: 1px solid #000; }
}