/* ==========================================================================
   Gráfica Batista — base visual v2 (out/2026)
   Fontes, tokens, tipografia, botões, cabeçalho, rodapé, aviso de cookies,
   ritmo de seção e os componentes-assinatura (marcas de impressão).
   Manual: trabalho-redesign/04-sistema-visual.md
   ========================================================================== */

/* ---------- Fontes no próprio site (subset latino, eixo variável) ---------- */
@font-face {
    font-family: 'Inter';
    src: url(../fonts/inter-latin-var.woff2) format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url(../fonts/jakarta-latin-var.woff2) format('woff2');
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fallbacks com a métrica medida das fontes (Chrome, 05/10): a troca não empurra o texto */
@font-face {
    font-family: 'GB Inter Fallback';
    src: local('Arial'), local('ArialMT');
    size-adjust: 105.4%;
    ascent-override: 92%;
    descent-override: 22.8%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'GB Jakarta Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 700 800;
    size-adjust: 100.3%;
    ascent-override: 103.7%;
    descent-override: 21.9%;
    line-gap-override: 0%;
}

/* ---------- Tokens (02-direcao-visual.md, seção 3) ---------- */
:root {
    /* Cores da skill */
    --papel: #FFFFFF;
    --papel-cinza: #F2F3F5;
    --tinta: #13202F;
    --grafite: #3F4A57;
    --azul: #1565A8;
    --azul-escuro: #0F4F86;
    --azul-tinta: #0E2A47;
    --kraft-claro: #D8BE96;
    --kraft: #A87B4F;          /* só detalhe, nunca texto */
    --linha: #D9DDE3;
    --nevoa: #EAF1F8;
    --erro: #B42318;
    /* Adições */
    --kraft-escuro: #5E4026;
    --tinta-2: #16365A;
    --linha-escura: rgba(255, 255, 255, .16);
    --milimetrado: rgba(21, 101, 168, .10);
    --milimetrado-cm: rgba(21, 101, 168, .20);
    --texto-claro: #DCE4EE;    /* texto corrido sobre azul tinta */
    /* Tintas de processo: só em marcas de impressão */
    --cmyk-c: #00AEEF;
    --cmyk-m: #EC008C;
    --cmyk-y: #FFF200;
    --cmyk-k: #231F20;
    --cmyk-cm: #2E3192;
    --cmyk-cy: #00A651;
    --cmyk-my: #ED1C24;
    --registro: #13202F;

    /* Tipografia fluida (390 → 1440 px) */
    --f-titulo: 'Plus Jakarta Sans', 'GB Jakarta Fallback', system-ui, sans-serif;
    --f-texto: 'Inter', 'GB Inter Fallback', system-ui, sans-serif;
    --t-h1: clamp(2.125rem, 1.429rem + 2.857vw, 4rem);
    --t-display: clamp(2rem, 1.348rem + 2.667vw, 3.75rem);
    --t-h2: clamp(1.75rem, 1.379rem + 1.524vw, 2.75rem);
    --t-h3: clamp(1.1875rem, 1.118rem + .286vw, 1.375rem);
    --t-lead: clamp(1.125rem, 1.055rem + .286vw, 1.3125rem);
    --t-corpo: clamp(1.0625rem, 1.039rem + .095vw, 1.125rem);
    --t-ui: 1rem;
    --t-legenda: .875rem;
    --t-tecnico: .8125rem;
    --lh-titulo: 1.06; --lh-h2: 1.1; --lh-h3: 1.25; --lh-corpo: 1.6; --lh-lead: 1.5;
    --tr-titulo: -.025em; --tr-h2: -.02em; --tr-h3: -.01em;

    /* Espaço */
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
    --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
    --secao-p: clamp(32px, 26px + 1.5vw, 48px);
    --secao-m: clamp(64px, 50px + 3.8vw, 104px);
    --secao-g: clamp(80px, 58px + 6vw, 144px);
    --secao: var(--secao-m);           /* apelido antigo */
    --container: 1200px;
    --margem: clamp(20px, 12px + 2vw, 32px);
    --gutter: clamp(16px, 12px + 1vw, 24px);
    --header-h: 56px;

    /* Raio por função */
    --r-papel: 2px;
    --r-foto: var(--r-papel);          /* apelido antigo */
    --r-campo: 10px;
    --r-folha: 16px;
    --r-pilula: 999px;

    /* Movimento */
    --dur-micro: 120ms;
    --dur-curta: 200ms;
    --dur-media: 320ms;
    --dur-traco: 480ms;
    --dur-longa: 700ms;
    --ease-sai: cubic-bezier(.22, .61, .36, 1);
    --ease-padrao: cubic-bezier(.2, 0, .38, .9);
    --ease-saida: cubic-bezier(.4, .14, 1, 1);
    --ease-traco: cubic-bezier(.65, 0, .35, 1);
    --ease-carimbo: cubic-bezier(.05, .7, .1, 1);
}
@media (min-width: 900px) { :root { --header-h: 64px; } }

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
    margin: 0;
    background: var(--papel);
    color: var(--grafite);
    font-family: var(--f-texto);
    font-size: var(--t-corpo);
    line-height: var(--lh-corpo);
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
a { color: var(--azul); text-underline-offset: 3px; }
a:hover { color: var(--azul-escuro); }
p { margin: 0 0 1em; max-width: 66ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
figure { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
/* Fundo escuro: contorno branco */
.gb-header :focus-visible, .gb-secao--tinta :focus-visible, .gb-footer :focus-visible,
.gb-aviso :focus-visible { outline-color: #FFFFFF; }

.gb-sr-only {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Estrutura e ritmo ---------- */
.gb-container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--margem));
    margin: 0 auto;
    padding: 0 var(--margem);
}
/* Grade: 4 colunas no celular, 12 a partir de 900 px */
.gb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
.gb-grid > * { grid-column: 1 / -1; }
@media (min-width: 900px) { .gb-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.gb-secao { padding: var(--secao-m) 0; }
.gb-secao--p { padding: var(--secao-p) 0; }
.gb-secao--g { padding: var(--secao-g) 0; }
.gb-secao--cinza { background: var(--papel-cinza); }
.gb-secao--nevoa { background: var(--nevoa); }
/* A cor vem antes da textura: se a imagem falhar, a seção fica na cor certa */
.gb-secao--kraft { background: var(--kraft-claro) url(../assets/images/sacolas-nova/textura-kraft.webp) 0 0 / 160px 160px; color: var(--tinta); }
.gb-secao--tinta { background: var(--azul-tinta) url(../assets/images/sacolas-nova/textura-grao.webp) 0 0 / 128px 128px; color: var(--texto-claro); }

/* ---------- Tipografia ---------- */
.gb-h1, .gb-h2, .gb-h3, .gb-display {
    font-family: var(--f-titulo);
    color: var(--tinta);
    margin: 0;
    text-wrap: balance;
}
.gb-h1 { font-weight: 800; font-size: var(--t-h1); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); }
.gb-display { font-weight: 800; font-size: var(--t-display); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); }
.gb-h2 { font-weight: 800; font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.gb-h3 { font-weight: 700; font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
.gb-secao--tinta .gb-h1, .gb-secao--tinta .gb-h2, .gb-secao--tinta .gb-h3, .gb-secao--tinta .gb-display { color: #FFFFFF; }
.gb-lead { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--grafite); max-width: 56ch; }
.gb-legenda { font-size: var(--t-legenda); line-height: 1.45; color: var(--grafite); max-width: 52ch; }
/* Voz técnica: medidas, ficha, legenda de foto, régua */
.gb-tecnico { font-family: var(--f-texto); font-weight: 500; font-size: var(--t-legenda); line-height: 1.4; color: var(--grafite); font-variant-numeric: tabular-nums; }
.gb-tecnico--mini { font-size: var(--t-tecnico); }
.gb-secao--tinta .gb-lead, .gb-secao--tinta .gb-legenda, .gb-secao--tinta .gb-tecnico { color: var(--texto-claro); }

/* ---------- Botões ---------- */
.gb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1.5px solid transparent;
    border-radius: var(--r-campo);
    font-family: var(--f-texto);
    font-weight: 600;
    font-size: var(--t-ui);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform var(--dur-micro) var(--ease-padrao);
    -webkit-tap-highlight-color: transparent;
}
.gb-btn:active { transform: translateY(1px); }
.gb-btn--primario { background: var(--azul); color: #FFFFFF; }
.gb-btn--primario:hover, .gb-btn--primario:active { background: var(--azul-escuro); color: #FFFFFF; }
.gb-btn--contorno { background: var(--papel); border-color: var(--azul); color: var(--azul); }
.gb-btn--contorno:hover { background: var(--azul); color: #FFFFFF; }
.gb-btn--claro { background: #FFFFFF; color: var(--azul-tinta); }
.gb-btn--claro:hover { background: #E6EDF5; color: var(--azul-tinta); }
.gb-btn--tinta { background: var(--tinta); color: #FFFFFF; }
.gb-btn--tinta:hover { background: #000000; color: #FFFFFF; }
.gb-btn--bloco { display: flex; width: 100%; }
.gb-btn--pequeno { min-height: 40px; padding: 8px 14px; font-size: 15px; white-space: nowrap; }
.gb-btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 379px) {
    .gb-header .gb-marca { gap: 8px; }
    .gb-header .gb-marca span:not(.gb-marca__selo) { font-size: 15px; }
    .gb-header .gb-btn--pequeno { padding: 8px 12px; font-size: 14px; }
}
.gb-link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--azul);
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.gb-link-btn:hover { color: var(--azul-escuro); }

/* ---------- Cabeçalho (azul; some descendo, volta subindo: js/gb-base.js) ---------- */
.gb-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    background: var(--azul);
    color: #FFFFFF;
    transition: transform 250ms var(--ease-padrao);
}
.gb-header.is-oculto { transform: translateY(-100%); }
.gb-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gb-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.gb-marca:hover { color: inherit; }
.gb-marca__selo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.gb-marca__selo img { width: 32px; height: 32px; }
.gb-marca span:not(.gb-marca__selo) {
    white-space: nowrap;
    font-family: var(--f-titulo);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.015em;
    color: inherit;
}
@media (min-width: 900px) {
    .gb-marca__selo, .gb-marca__selo img { width: 38px; height: 38px; }
    .gb-marca span:not(.gb-marca__selo) { font-size: 19px; }
}

/* ---------- Menu do cabeçalho (Início e páginas de produto; a /sacolas não tem menu de propósito) ----------
   <nav class="gb-nav" id="gbNav"> com links (aria-current="page" na página atual) + .gb-header__acoes com o
   botão da página e <button class="gb-menu-btn" aria-controls="gbNav" aria-expanded="false">Menu</button>.
   Celular: o botão abre a lista embaixo do cabeçalho (js/gb-base.js). Desktop: links em linha. */
.gb-header__acoes { display: flex; align-items: center; gap: 8px; }
.gb-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1.5px solid rgba(255, 255, 255, .45);
    border-radius: var(--r-campo);
    background: none;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.gb-menu-btn::before {
    content: "";
    width: 16px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}
.gb-header.is-menu-aberto .gb-menu-btn { background: rgba(255, 255, 255, .14); }
.gb-nav { display: none; }
.gb-header.is-menu-aberto .gb-nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--margem) 16px;
    background: var(--azul);
    border-top: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 12px 24px rgba(14, 42, 71, .25);
}
.gb-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.gb-nav a:last-child { border-bottom: 0; }
.gb-nav a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 2px; }
.gb-nav a[aria-current="page"] { font-weight: 700; }
@media (min-width: 900px) {
    .gb-menu-btn { display: none; }
    .gb-nav, .gb-header.is-menu-aberto .gb-nav {
        display: flex;
        flex-direction: row;
        gap: 4px;
        position: static;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        margin-left: auto;
        margin-right: 12px;
    }
    .gb-nav a { min-height: 40px; padding: 0 12px; border: 0; font-size: 15px; border-radius: 8px; }
    .gb-nav a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
    .gb-nav a[aria-current="page"] { background: rgba(255, 255, 255, .16); font-weight: 600; }
}
@media (max-width: 379px) {
    .gb-menu-btn { padding: 8px; font-size: 14px; }
}

/* ---------- Rodapé (azul tinta com grão; "fim da folha" com a tira de cor) ---------- */
.gb-footer {
    background: var(--azul-tinta) url(../assets/images/sacolas-nova/textura-grao.webp) 0 0 / 128px 128px;
    color: #C9D4E1;
    padding: 56px 0 28px;
    border-top: 1px solid var(--linha-escura);
    font-size: 15px;
    line-height: 1.6;
}
.gb-footer a { color: #FFFFFF; }
.gb-footer a:hover { color: #BFD6EE; }
.gb-footer__grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .gb-footer__grid { grid-template-columns: 5fr 4fr 3fr; gap: 48px; } }
.gb-footer .gb-marca { color: #FFFFFF; }
.gb-footer__linha { margin-top: 14px; max-width: 36ch; }
.gb-footer__titulo { font-family: var(--f-texto); font-weight: 600; font-size: 15px; color: #FFFFFF; margin: 0 0 10px; }
.gb-footer ul { list-style: none; margin: 0; padding: 0; }
.gb-footer li + li { margin-top: 6px; }
.gb-footer__base {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--linha-escura);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    justify-content: space-between;
    font-size: 14px;
}
/* Tira de cor + "© 2026 Gráfica Batista": <span class="gb-footer__assinatura"><span class="gb-tira-cor">…</span><span>© …</span></span> */
.gb-footer__assinatura { display: inline-flex; align-items: center; gap: 14px; }
.gb-footer .gb-tira-cor { outline-color: rgba(255, 255, 255, .2); }

/* ---------- Aviso de cookies (só informativo) ---------- */
.gb-aviso {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--aviso-offset, 0px));
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    max-width: 560px;
    padding: 14px 16px;
    background: var(--tinta);
    color: #E4EAF1;
    border-radius: var(--r-campo);
    font-size: 14px;
    line-height: 1.45;
}
.gb-aviso p { margin: 0; flex: 1 1 200px; }
.gb-aviso a { color: #FFFFFF; }
.gb-aviso .gb-btn { flex: none; min-height: 40px; padding: 8px 16px; font-size: 14px; }
@media (min-width: 900px) { .gb-aviso { left: 24px; right: auto; bottom: 24px; } }

/* ==========================================================================
   Componentes-assinatura (marcas de impressão). SVG inline + CSS, sem imagem.
   Traços que se desenham levam pathLength="1" e a classe "traco".
   ========================================================================== */

/* Folha de papel: borda fina; --duplo põe uma segunda folha deslocada atrás */
.gb-papel { position: relative; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-papel); }
.gb-papel--duplo::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translate(6px, 6px);
    z-index: -1;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--r-papel);
}
.gb-papel--duplo { isolation: isolate; }

/* Prova de impressão: foto com marcas de corte (L), de registro e tira de cor */
.gb-prova { position: relative; margin: 20px; }
.gb-prova img { width: 100%; border-radius: var(--r-papel); background: var(--papel-cinza); }
.gb-corte, .gb-registro { position: absolute; overflow: visible; pointer-events: none; }
.gb-corte { width: 20px; height: 20px; }
.gb-corte path { fill: none; stroke: var(--azul); stroke-width: 1.25; }
.gb-corte--se { top: -20px; left: -20px; }
.gb-corte--sd { top: -20px; right: -20px; transform: scaleX(-1); }
.gb-corte--ie { bottom: -20px; left: -20px; transform: scaleY(-1); }
.gb-corte--id { bottom: -20px; right: -20px; transform: scale(-1); }
.gb-registro { width: 22px; height: 22px; }
.gb-registro path { fill: none; stroke: var(--registro); stroke-width: 1; opacity: .6; }
.gb-registro circle { fill: var(--registro); opacity: .6; }
.gb-registro--e { left: -22px; top: 50%; margin-top: -11px; }
.gb-registro--d { right: -22px; top: 50%; margin-top: -11px; }
.gb-registro--s { display: none; left: 50%; margin-left: -11px; top: -22px; }
.gb-prova__rodape { position: absolute; left: 0; right: 0; bottom: -20px; height: 20px; display: flex; align-items: center; gap: 12px; }
/* Legenda da prova: no celular fica só para leitor de tela */
.gb-prova__slug { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) {
    .gb-prova { margin: 30px; }
    .gb-corte { width: 28px; height: 28px; }
    .gb-corte--se { top: -28px; left: -28px; } .gb-corte--sd { top: -28px; right: -28px; }
    .gb-corte--ie { bottom: -28px; left: -28px; } .gb-corte--id { bottom: -28px; right: -28px; }
    .gb-registro { width: 28px; height: 28px; }
    .gb-registro--e { left: -30px; margin-top: -14px; } .gb-registro--d { right: -30px; margin-top: -14px; }
    .gb-registro--s { display: block; margin-left: -14px; top: -30px; }
    .gb-prova__rodape { bottom: -30px; height: 30px; }
    .gb-prova__slug { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-left: auto; padding-right: 12px; font-size: var(--t-tecnico); font-weight: 500; color: var(--grafite); }
}

/* Tira de controle de cor: C M Y K CM CY MY K50 */
.gb-tira-cor { display: inline-flex; flex: none; outline: 1px solid rgba(19, 32, 47, .12); }
.gb-tira-cor i { width: 9px; height: 8px; background: var(--c); transform-origin: 50% 100%; }
@media (min-width: 900px) { .gb-tira-cor i { width: 12px; height: 10px; } }

/* Papel milimetrado (só atrás de desenho). --esc = px por mm do desenho */
.gb-milimetrado {
    --cm: calc(var(--esc, .5) * 10px);
    background-color: var(--papel);
    background-image:
        linear-gradient(var(--milimetrado-cm) 1px, transparent 1px),
        linear-gradient(90deg, var(--milimetrado-cm) 1px, transparent 1px),
        linear-gradient(rgba(21, 101, 168, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 101, 168, .06) 1px, transparent 1px);
    background-size: calc(var(--cm) * 5) calc(var(--cm) * 5), calc(var(--cm) * 5) calc(var(--cm) * 5), var(--cm) var(--cm), var(--cm) var(--cm);
    background-position: -1px -1px;
    border: 1px solid var(--linha);
    border-radius: var(--r-papel);
}
@media (max-width: 899px) {
    /* a linha de 1 cm teria 3 px: fica só a de 5 cm */
    .gb-milimetrado {
        background-image: linear-gradient(var(--milimetrado-cm) 1px, transparent 1px), linear-gradient(90deg, var(--milimetrado-cm) 1px, transparent 1px);
        background-size: calc(var(--cm) * 5) calc(var(--cm) * 5);
    }
}

/* Faca (dieline): corte contínuo, vinco tracejado, marcas de vinco em magenta */
.gb-faca .corte { fill: none; stroke: currentColor; stroke-width: 1.25; }
.gb-faca .vinco { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 6 5; opacity: .5; }
.gb-faca .marca-vinco { fill: none; stroke: var(--cmyk-m); stroke-width: 1.5; }

/* Carimbo (prévia) */
.gb-carimbo {
    display: inline-block;
    padding: 6px 12px;
    border: 2.5px solid var(--azul);
    border-radius: 6px;
    color: var(--azul);
    font-family: var(--f-titulo);
    font-weight: 800;
    font-size: var(--t-legenda);
    line-height: 1.2;
    white-space: nowrap;
    transform: rotate(-8deg);
    opacity: .92;
}

/* Canhoto com picote (prazo e pagamento). --furo = cor do fundo da seção */
.gb-canhoto {
    --furo: var(--papel-cinza);
    position: relative;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--r-papel);
    padding-top: 24px;
}
.gb-canhoto::before { content: ""; position: absolute; left: 12px; right: 12px; top: 11px; border-top: 2px dashed var(--linha); }
.gb-canhoto::after {
    content: "";
    position: absolute;
    left: -9px;
    right: -9px;
    top: 3px;
    height: 18px;
    background: radial-gradient(circle at 9px 9px, var(--furo) 8px, transparent 8.5px) left / 18px 18px no-repeat,
                radial-gradient(circle at 9px 9px, var(--furo) 8px, transparent 8.5px) right / 18px 18px no-repeat;
}
@media (min-width: 900px) {
    .gb-canhoto { padding-top: 0; padding-left: 28px; }
    .gb-canhoto::before { left: 13px; right: auto; top: 12px; bottom: 12px; border-top: 0; border-left: 2px dashed var(--linha); }
    .gb-canhoto::after { left: 5px; right: auto; top: -9px; bottom: -9px; width: 18px; height: auto;
        background-position: top, bottom; }
}

/* Ficha técnica: etiqueta de caixa de papelão */
.gb-ficha { margin: 0; border: 1px solid var(--tinta); border-radius: var(--r-papel); background: var(--papel); }
.gb-ficha > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linha); }
.gb-ficha > div:first-child { border-top: 0; }
.gb-ficha dt { font-size: 14px; color: var(--grafite); }
.gb-ficha dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Faixa de logos em loop (pausa: data-marquee + botão data-marquee-pausa, js/gb-motion.js) */
.gb-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.gb-marquee__trilho { display: flex; width: max-content; }
.gb-marquee__lista { display: flex; gap: 12px; padding: 0 12px 0 0; margin: 0; list-style: none; }
.gb-marquee__pausa {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--linha);
    border-radius: var(--r-campo);
    background: var(--papel);
    color: var(--tinta);
    cursor: pointer;
}
.gb-marquee__pausa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.gb-marquee__pausa .ico-tocar, .gb-marquee__pausa[aria-pressed="true"] .ico-pausa { display: none; }
.gb-marquee__pausa[aria-pressed="true"] .ico-tocar { display: block; }

/* ==========================================================================
   Movimento. Tudo decorativo só com no-preference; sem JS, tudo fica no estado final.
   - Carregamento (hero): .gb-prova--entrada, CSS puro.
   - Ao aparecer: [data-anima] + .traco / .surge (js/gb-motion.js põe .motion no <html>
     e .is-visto no bloco). --i escalona, --atraso adia.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .gb-prova--entrada .gb-corte path, .gb-prova--entrada .gb-registro path {
        stroke-dasharray: 1;
        animation: gb-traco var(--dur-traco) var(--ease-traco) both;
        animation-delay: calc(var(--atraso, 150ms) + var(--i, 0) * 80ms);
    }
    .gb-prova--entrada .gb-corte--sd { --atraso: 210ms; }
    .gb-prova--entrada .gb-corte--ie { --atraso: 270ms; }
    .gb-prova--entrada .gb-corte--id { --atraso: 330ms; }
    .gb-prova--entrada .gb-registro { --atraso: 420ms; }
    .gb-prova--entrada .gb-registro circle { animation: gb-aparece 200ms var(--ease-sai) 700ms both; }
    .gb-prova--entrada .gb-tira-cor i { animation: gb-imprime 160ms var(--ease-sai) both; animation-delay: calc(520ms + var(--n, 0) * 45ms); }

    .motion [data-anima] .traco {
        stroke-dasharray: 1;
        transition: stroke-dashoffset var(--dur-traco) var(--ease-traco);
        transition-delay: calc(var(--atraso, 0ms) + var(--i, 0) * 120ms);
    }
    .motion [data-anima] .surge {
        transition: opacity var(--dur-curta) var(--ease-sai), transform var(--dur-media) var(--ease-sai);
        transition-delay: calc(var(--atraso, 0ms) + var(--i, 0) * 120ms);
    }
    .motion [data-anima]:not(.is-visto) .traco { stroke-dashoffset: 1; }
    .motion [data-anima]:not(.is-visto) .surge { opacity: 0; }

    .motion [data-anima] .gb-carimbo { transition: opacity 120ms linear 200ms, transform 260ms var(--ease-carimbo) 200ms; }
    .motion [data-anima]:not(.is-visto) .gb-carimbo { opacity: 0; transform: scale(1.6) rotate(-14deg); }

    .gb-marquee__trilho { animation: gb-marquee 40s linear infinite; }
    .gb-marquee:hover .gb-marquee__trilho, .gb-marquee:focus-within .gb-marquee__trilho,
    .gb-marquee.is-pausado .gb-marquee__trilho { animation-play-state: paused; }

    .gb-aviso:not([hidden]) { transition: opacity var(--dur-curta) var(--ease-sai), transform var(--dur-curta) var(--ease-sai); }
    @starting-style { .gb-aviso:not([hidden]) { opacity: 0; transform: translateY(16px); } }
}
@keyframes gb-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gb-aparece { from { opacity: 0; } }
@keyframes gb-imprime { from { transform: scaleY(0); } }
@keyframes gb-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    /* Faixa de logos parada, em grade */
    .gb-marquee { -webkit-mask-image: none; mask-image: none; }
    .gb-marquee__trilho { width: auto; }
    .gb-marquee__lista { flex-wrap: wrap; padding: 0; }
    .gb-marquee__lista[aria-hidden="true"], .gb-marquee__pausa { display: none; }
    /* Rede de segurança */
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}