/* Frete Fácil · site do produto, no mundo "carteira de bilhetes" do sistema (ver DESIGN.md do repo fretes). */
:root {
  --navy: #0b1d3a;
  --navy-2: #16305a;
  --ink: #0b1d3a;
  --ink-2: #34445f;
  --ink-3: #5f6b80;
  --coupon: #ffffff;
  --ground: #e8edf5;
  --ground-2: #dfe6f0;
  --line: #c9d2e0;
  --line-2: #e3e8f0;
  --carbon: #5a3da6;
  --carbon-soft: #eee9f8;
  --jet: #d7262d;
  --ok: #1b7446;
  --ok-soft: #e2f1e8;
  --warn: #9a5a00;
  --warn-soft: #fdf0d5;
  --bad: #c41f27;
  --bad-soft: #fbe7e7;
  --brand-soft: #e1e8f3;

  --sans: "Barlow", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --cond: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --calha: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--coupon); padding: 8px 12px; border-radius: 4px; font-weight: 600; }
.pular:focus { top: 12px; }

.moldura { max-width: 1320px; margin: 0 auto; padding: 0 var(--calha); }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; }
.carbono { font-family: var(--mono); color: var(--carbon); font-weight: 500; letter-spacing: 0.02em; }

/* trama de segurança do bilhete */
.trama {
  background-color: var(--ground);
  background-image:
    repeating-linear-gradient(45deg, rgb(11 29 58 / 0.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgb(11 29 58 / 0.035) 0 1px, transparent 1px 7px);
}

.rotulo {
  display: block;
  font: 600 11px/1.3 var(--cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rotulo-claro { color: rgb(255 255 255 / 0.7); display: inline; }

/* cupom: cantos chanfrados; sombra por filtro porque clip-path corta box-shadow */
.cupom {
  --c: 12px;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.cupom-sombra { filter: drop-shadow(0 1px 1px rgb(11 29 58 / 0.08)) drop-shadow(0 18px 28px rgb(11 29 58 / 0.16)); }

.perfura { position: relative; border-top: 1.5px dashed var(--line); }
.perfura::before, .perfura::after {
  content: ""; position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ground); border: 1px solid var(--line);
}
.perfura::before { left: -8px; clip-path: inset(0 0 0 50%); }
.perfura::after { right: -8px; clip-path: inset(0 50% 0 0); }

.marca { color: var(--jet); font-style: italic; font-weight: 800; letter-spacing: -0.08em; margin-right: 0.3em; }

/* ---------- tipografia ---------- */
.display {
  font: 700 clamp(52px, 7.4vw, 104px)/0.9 var(--cond);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--navy);
  text-wrap: balance;
}
.display-md { font-size: clamp(40px, 5vw, 68px); }
.headline {
  font: 700 clamp(30px, 3.4vw, 44px)/1 var(--cond);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
  text-wrap: balance;
}
.headline-clara { color: #fff; }
.lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.apoio { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.apoio-claro { color: rgb(255 255 255 / 0.78); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 4px;
  font: 600 14px/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 150ms, color 150ms, border-color 150ms, transform 150ms;
}
.btn:active { transform: translateY(1px); }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-primario { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(11 29 58 / 0.3); }
.btn-primario:hover { background: var(--navy-2); }
.btn-secundario { background: var(--coupon); color: var(--navy); border-color: rgb(11 29 58 / 0.8); }
.btn-secundario:hover { background: var(--brand-soft); }
.btn-claro { background: #fff; color: var(--navy); }
.btn-claro:hover { background: var(--brand-soft); }
.btn-fantasma-claro { color: rgb(255 255 255 / 0.75); }
.btn-fantasma-claro:hover { color: #fff; background: rgb(255 255 255 / 0.08); }
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- pílulas e carimbos ---------- */
.pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 3px;
  border: 1px solid; background: rgb(255 255 255 / 0.7);
  font: 600 12px/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.pill-ok { color: var(--ok); border-color: rgb(27 116 70 / 0.5); }
.pill-warn { color: var(--warn); border-color: rgb(154 90 0 / 0.5); }
.pill-bad { color: var(--bad); border-color: rgb(196 31 39 / 0.5); }
.pill-carbon { color: var(--carbon); border-color: rgb(90 61 166 / 0.5); }
.tarja .pill { background: var(--ok-soft); }

.carimbo {
  display: inline-flex; align-items: center; padding: 1px 7px;
  font: 700 13px/1.15 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 1.5px; border-radius: 3px;
  transform: rotate(-3deg);
}
.carimbo-ok { color: var(--ok); }
.carimbo-marinho { color: var(--navy); }
@keyframes bater {
  0% { opacity: 0; transform: rotate(-3deg) scale(1.6); }
  60% { opacity: 1; transform: rotate(-3deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}
.carimbo-bate { animation: bater 380ms var(--expo) 700ms both; }
@media (prefers-reduced-motion: reduce) { .carimbo-bate { animation: none; } }

/* ---------- faixa da companhia ---------- */
.faixa { position: sticky; top: 0; z-index: 20; height: 56px; background: var(--navy); color: #fff; overflow: hidden; }
.faixa-in { max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 var(--calha); display: flex; align-items: center; gap: 28px; position: relative; z-index: 1; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.emblema { width: 36px; height: 28px; }
.logo-nome { font: italic 800 22px/1 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.abas { display: flex; gap: 4px; height: 100%; margin-left: 12px; }
.abas a {
  display: flex; align-items: center; padding: 0 12px; position: relative;
  font: 600 15px/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.65); text-decoration: none; transition: color 150ms;
}
.abas a:hover { color: #fff; }
.abas a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--jet); transform: scaleX(0); transition: transform 200ms var(--expo); }
.abas a:hover::after { transform: scaleX(1); }
.faixa-acoes { margin-left: auto; margin-right: 96px; display: flex; gap: 8px; }
/* pintura da companhia: trapézio jato com duas listras brancas a 39° */
.pintura {
  position: absolute; top: 0; right: 0; width: 120px; height: 56px;
  background:
    linear-gradient(129deg, transparent 0 46%, #fff 46% 50%, transparent 50% 58%, #fff 58% 62%, transparent 62%),
    var(--jet);
  clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- abertura ---------- */
.abertura { padding: 64px 0 88px; border-bottom: 1px solid var(--line); }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: 56px; align-items: center; }
.abertura-texto { display: grid; gap: 28px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.para-quem { font-size: 14px; color: var(--ink-3); max-width: 44ch; padding-top: 16px; border-top: 1px solid var(--line); }

.bilhete-fig { display: grid; gap: 12px; }
.bilhete { display: grid; grid-template-columns: minmax(0, 1fr) 232px; }
.bilhete-corpo { background: var(--coupon); display: grid; align-content: start; }
.tarja { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 0 0 22px; background: var(--navy); color: #fff; }
.tarja-nf { font: 500 16px/1 var(--mono); letter-spacing: 0.04em; }
.tarja-nf .rotulo { margin-right: 6px; }
.tarja-prazo { margin-left: auto; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 22px; background: var(--navy-2); font: 600 15px/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; }
.rota { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 18px; padding: 26px 22px 20px; }
.cidade { display: block; margin-top: 4px; font: 700 clamp(28px, 2.9vw, 46px)/0.95 var(--cond); overflow-wrap: anywhere; letter-spacing: 0.01em; text-transform: uppercase; color: var(--navy); }
.seta { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; color: var(--navy); }
.seta i { flex: 1; border-top: 1.5px dashed var(--line); }
.seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.campos { display: grid; grid-template-columns: 0.9fr 1.1fr 0.7fr 1.5fr; margin: 0 22px 22px; border: 1px solid var(--line); border-radius: 4px; }
.campos > div { padding: 10px 12px; border-left: 1px solid var(--line-2); }
.campos > div:first-child { border-left: 0; }
.campos dd { margin-top: 3px; font: 500 16px/1.2 var(--mono); color: var(--navy); white-space: nowrap; }
.campos .campo-largo { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-2); }
.campos .campo-largo dd { font: 600 16px/1.2 var(--sans); }
.itens { display: grid; gap: 6px; padding: 16px 22px 22px; font-size: 14px; color: var(--ink-2); }
.qtd { color: var(--ink-3); margin-right: 6px; }

.canhoto {
  position: relative; background: var(--carbon-soft); border-left: 1.5px dashed var(--line);
  display: flex; flex-direction: column; gap: 4px; padding: 22px 20px 18px;
}
.canhoto-transp { font: 700 21px/1.05 var(--cond); text-transform: uppercase; letter-spacing: 0.03em; color: var(--navy); margin-bottom: 14px; }
.canhoto-valor { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; letter-spacing: 0; white-space: nowrap; }
.canhoto-nota { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.canhoto .carimbo { align-self: flex-start; margin-bottom: auto; }
.barras { display: block; width: 100%; height: 40px; margin-top: 18px; fill: var(--navy); }
.chave { font-size: 8.5px; color: var(--ink-3); letter-spacing: 0.04em; text-align: justify; text-align-last: justify; margin-top: 4px; }
.legenda { font-size: 13px; color: var(--ink-3); padding-left: 4px; }

/* ---------- seções ---------- */
.secao { padding: 104px 0; }
.secao-trama { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.secao-cab { display: grid; gap: 18px; margin-bottom: 40px; max-width: 760px; }
.secao-cab-larga { max-width: 900px; }

/* o frete desmontado */
.desmonte .painel { background: var(--coupon); padding: 28px; }
.barra { display: flex; height: 56px; gap: 3px; margin-bottom: 28px; }
.seg { position: relative; display: flex; align-items: flex-end; padding: 0 0 8px 10px; border-radius: 3px; color: #fff; transition: opacity 200ms, box-shadow 200ms; min-width: 10px; }
.seg b { font: 600 12px/1 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.s1 { background: var(--navy); }
.s2 { background: #2a4675; }
.s3 { background: #4d6694; }
.s4 { background: #7d90b3; }
.s5 { background: #a9b7cf; }
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 10px; vertical-align: 1px; }
.desmonte.focado .seg:not(.ativo) { opacity: 0.28; }
.seg.ativo { box-shadow: 0 0 0 2px var(--coupon), 0 0 0 4px var(--carbon); }

.razao { width: 100%; border-collapse: collapse; font-size: 15px; }
.razao thead th { height: 36px; text-align: left; font: 600 12px/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); padding: 0 12px; }
.razao tbody th, .razao tbody td { padding: 14px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; text-align: left; }
.razao tbody th { font: 700 17px/1.2 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.razao tbody td { color: var(--ink-2); }
.razao tbody tr { transition: background-color 150ms; outline-offset: -2px; }
.razao tbody tr.ativo { background: var(--brand-soft); }
.razao .dir { text-align: right; }
.razao td.carbono { font-size: 17px; white-space: nowrap; }
.razao tfoot th { padding: 18px 12px 4px; text-align: left; font: 600 12px/1.3 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.razao tfoot .total { padding: 14px 12px 4px; font-size: 30px; }
.doc { display: inline-grid; grid-template-columns: 16px auto; column-gap: 6px; font-size: 14px; color: var(--ink); }
.doc svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.75; stroke-linejoin: round; grid-row: span 2; margin-top: 1px; }
.doc em { font-style: normal; font-size: 13px; color: var(--ink-3); }

.nota-cubagem { display: grid; grid-template-columns: 160px minmax(0, 62ch); gap: 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.nota-cubagem p { color: var(--ink-2); font-size: 15px; }
.nota-cubagem .rotulo { padding-top: 3px; }

/* quem leva */
.ranking-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.ranking-grade .secao-cab { margin-bottom: 0; position: sticky; top: 104px; }
.nota-lateral { margin-top: 12px; padding: 16px 18px; background: var(--coupon); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 8px; }
.nota-lateral p { font-size: 15px; color: var(--ink-2); }
.partidas-in { background: var(--coupon); padding-bottom: 8px; }
.grupo { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 20px; background: var(--ground); border-bottom: 1px solid var(--line-2); font: 700 14px/1 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.grupo .conta { margin-left: 8px; color: var(--ink-3); font-size: 13px; }
.linhas li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px 112px 96px; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; border-bottom: 1px solid var(--line-2); }
.linhas li:last-child { border-bottom: 0; }
.linhas .pos { color: var(--ink-3); font-size: 14px; }
.linhas .nome { font: 600 16px/1.2 var(--sans); color: var(--navy); }
.linhas .prazo { color: var(--ink-2); font-size: 15px; }
.linhas .valor { text-align: right; font-size: 16px; }
.linhas .pill { justify-self: end; }
.linhas .escolhida { background: var(--carbon-soft); }
.inaptas li { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; padding-top: 10px; padding-bottom: 10px; }
.inaptas .nome { color: var(--ink-2); }
.inaptas .motivo { color: var(--bad); font-size: 15px; }
.inaptas .fonte { font: 600 12px/1 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: 5px 6px; white-space: nowrap; }

/* regras */
.secao-marinho { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.secao-marinho::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 7px);
}
.regras-grade { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.regras-grade .apoio { margin-top: 22px; }
.principios { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid rgb(255 255 255 / 0.16); }
.principios li { padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / 0.16); color: rgb(255 255 255 / 0.75); font-size: 16px; max-width: 60ch; }
.principios b { display: block; color: #fff; font: 700 18px/1.2 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.regra { filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.35)); }
.regra-in { position: relative; background: var(--coupon); color: var(--ink); padding: 0 0 22px; }
.regra-cab { display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--ground); border-bottom: 1px solid var(--line); }
.regra-id { color: var(--carbon); font-size: 15px; }
.regra-titulo { font: 700 17px/1.15 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.frase { padding: 28px 24px 24px; font: 500 26px/1.3 var(--sans); color: var(--navy); text-wrap: pretty; }
.campos-regra { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 24px 24px; }
.campos-regra > div:nth-child(3) { border-left: 0; }
.campos-regra > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
.campos-regra dd { font: 600 16px/1.2 var(--sans); white-space: normal; }
.campos-regra dd.mono { font-family: var(--mono); font-weight: 500; }
.aplicada { padding: 18px 24px 0; font-size: 15px; color: var(--ink-2); }
.aplicada .rotulo { display: inline; margin-right: 8px; }
.regra-in .carimbo { position: absolute; right: 24px; top: 64px; }

/* a fila */
.fila-in { background: var(--coupon); }
.fila-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.fila-contas { display: flex; flex-wrap: wrap; gap: 8px; }
.painel-fila { width: 100%; border-collapse: collapse; font-size: 15px; }
.painel-fila th { height: 36px; padding: 0 16px; text-align: left; font: 600 12px/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.painel-fila td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; }
.painel-fila td:nth-child(3) { font: 600 16px/1.2 var(--cond); letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.painel-fila .uf { font-size: 13px; color: var(--ink-3); margin-right: 4px; font-family: var(--mono); text-transform: none; }
.painel-fila .dir { text-align: right; white-space: nowrap; }
.painel-fila .vazio { color: var(--ink-3); }
.acao { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font: 600 13px/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); border-bottom: 1.5px solid rgb(11 29 58 / 0.3); padding-bottom: 2px; }
kbd { display: inline-block; border: 1px solid var(--line); border-radius: 3px; background: var(--coupon); padding: 0 4px; font: 500 10px/16px var(--mono); color: var(--ink-3); }
.fila-mais { padding: 14px 20px 18px; font: 600 13px/1 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* contato */
.fecho { padding: 104px 0 120px; border-top: 1px solid var(--line); }
.convite { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.convite-corpo { background: var(--coupon); padding: 56px; display: grid; gap: 24px; align-content: center; }
.convite-canhoto { background: var(--carbon-soft); border-left: 1.5px dashed var(--line); padding: 40px 28px; display: grid; gap: 12px; align-content: center; justify-items: start; }
.endereco { font-size: 13px; color: var(--ink-3); }

/* rodapé */
.rodape { background: var(--navy); color: rgb(255 255 255 / 0.72); padding: 40px 0; }
.rodape-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.logo-sm .emblema { width: 30px; height: 23px; }
.logo-sm .logo-nome { font-size: 19px; }
.rodape-nota { font-size: 13px; max-width: 70ch; }
.rodape-links { display: flex; gap: 20px; font-size: 14px; }
.rodape-links a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.35); text-underline-offset: 3px; }

/* ---------- telas menores ---------- */
@media (max-width: 1200px) {
  .abertura-grade { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .bilhete-fig { max-width: 820px; }
}
@media (max-width: 1080px) {
  .abas { display: none; }
  .ranking-grade, .regras-grade { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ranking-grade .secao-cab { position: static; }
  .rodape-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 760px) {
  :root { --calha: 16px; }
  .faixa-acoes { margin-right: 56px; }
  .faixa-acoes .btn-fantasma-claro { display: none; }
  .pintura { width: 72px; clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%); }
  .logo-nome { font-size: 19px; }
  .abertura { padding: 40px 0 56px; }
  .lead { font-size: 17px; }
  .secao, .fecho { padding: 72px 0; }
  .bilhete, .convite { grid-template-columns: minmax(0, 1fr); }
  .canhoto, .convite-canhoto { border-left: 0; border-top: 1.5px dashed var(--line); }
  .tarja-prazo { padding: 0 14px; }
  .tarja { padding-left: 14px; gap: 8px; }
  .rota { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 14px 16px; }
  .seta { padding: 0; }
  .seta i { display: none; }
  .seta svg { transform: rotate(90deg); }
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 14px 16px; }
  .acoes .btn { width: 100%; justify-content: center; }
  .campos > div:nth-child(3) { border-left: 0; }
  .campos > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .itens { padding: 14px 14px 18px; }
  .desmonte .painel { padding: 16px; }
  .barra { height: 40px; }
  .seg b { display: none; }
  .razao thead { display: none; }
  .razao tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
  .razao tbody th, .razao tbody td { border: 0; padding: 2px 4px; }
  .razao tbody td[data-r] { grid-column: 1 / -1; font-size: 14px; }
  .razao tbody td[data-r]::before { content: attr(data-r) " · "; font: 600 11px/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
  .razao tbody td.carbono { grid-row: 1; grid-column: 2; }
  .razao tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .razao tfoot .total { font-size: 24px; }
  .nota-cubagem { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .linhas li { grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: 2px; padding: 10px 14px; }
  .linhas .prazo { grid-column: 2; grid-row: 2; font-size: 14px; }
  .linhas .valor { grid-column: 3; grid-row: 1; }
  .linhas li > :last-child:empty { display: none; }
  .linhas .escolhida .pill { grid-column: 3; grid-row: 2; }
  .inaptas li { grid-template-columns: minmax(0, 1fr); }
  .inaptas .fonte { justify-self: start; }
  .grupo { padding: 0 14px; }
  .frase { font-size: 21px; padding: 22px 18px 18px; }
  .regra-cab { padding: 12px 18px; }
  .campos-regra { margin: 0 18px 20px; }
  .aplicada { padding: 16px 18px 0; }
  .regra-in .carimbo { position: static; margin: 16px 18px 0; }
  .painel-fila thead { display: none; }
  .painel-fila tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .painel-fila td { padding: 0; border: 0; }
  .painel-fila td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  .convite-corpo { padding: 28px 20px; }
  .convite-corpo .btn-lg { white-space: normal; height: auto; min-height: 48px; padding: 12px 18px; line-height: 1.2; }
  .convite-canhoto { padding: 24px 20px; }
}