/* ==========================================================================
   Página Início — estilos específicos (depende de css/gb-base.css)
   Celular primeiro. Quebras: 600 e 900 px (+1100/1280 só para a escala do trio de sacolas).
   Seções: cabeçalho (base + botão do WhatsApp) · abre (hero) · confiança · produtos ·
   como funciona · prévia e amostra (ve) · quem somos · dúvidas · chamada final.
   Faixa de confiança, linha do tempo, quem somos, dúvidas e envelope seguem a /sacolas
   (css/sacolas-nova.css), copiados aqui para a Início não carregar a CSS da outra página.
   ========================================================================== */

/* ---------- Cabeçalho: botão do WhatsApp (só ícone onde o texto não cabe ao lado do menu) ---------- */
.ico-whats { flex: none; width: 20px; height: 20px; }
.gb-header .topo-whats { gap: 8px; }
@media (max-width: 599px), (min-width: 900px) and (max-width: 1039px) {
    .gb-header .topo-whats { width: 40px; padding: 0; }
    .topo-whats__txt { display: none; }
}

/* ==========================================================================
   ABRE (hero): título + folha de imposição em SVG inline
   ========================================================================== */
.abre { padding: 24px 0 36px; }
.abre__sub { margin: 16px 0 0; }
.abre__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; }
.abre__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.abre__folha { margin: 28px 0 0; }
@media (min-width: 900px) {
    .abre { padding: 64px 0 88px; }
    .abre__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
    .abre__texto { grid-column: 1 / span 6; }
    .abre__sub { margin-top: 20px; }
    .abre__acoes { margin-top: 32px; }
    .abre__folha { grid-column: 7 / span 6; margin: 0; }
}

/* Folha de imposição: a mesma marca numa sacola aberta (faca), 8 cartões, panfleto, bloco e pasta.
   Traços em unidades da folha: mais grossos no celular, onde o desenho sai em ~metade do tamanho. */
.imposicao { display: block; width: 100%; height: auto; overflow: visible; }
.imp-papel { fill: var(--papel); stroke: var(--linha); stroke-width: 1.5; }
.imp-marca { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.02em; }
.imp-corte { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linejoin: round; }
.imp-vinco { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .5; }
.imp-vinco--claro { stroke: #FFFFFF; opacity: .55; }
.imp-marca-vinco { fill: none; stroke: var(--cmyk-m); stroke-width: 2; }
.imp-cruz, .imp-canto { fill: none; stroke: var(--azul); stroke-width: 1.8; }
.imp-registro path { fill: none; stroke: var(--registro); stroke-width: 1.5; opacity: .6; }
.imp-registro circle { fill: var(--registro); opacity: .6; }
.imp-fio { fill: none; stroke: var(--azul); stroke-width: 1; opacity: .3; }
.imp-fio--forte { opacity: .7; }
.imp-tira rect { fill: var(--c); }
@media (min-width: 900px) {
    .imp-papel { stroke-width: 1.2; }
    .imp-corte { stroke-width: 1.5; }
    .imp-vinco { stroke-width: 1.1; }
    .imp-marca-vinco { stroke-width: 1.5; }
    .imp-cruz, .imp-canto { stroke-width: 1.3; }
    .imp-registro path { stroke-width: 1.1; }
    .imp-fio { stroke-width: .8; }
}

/* ---------- Faixa de confiança: fatos + logos em loop (igual à /sacolas) ---------- */
.confianca { background: var(--papel-cinza); border-block: 1px solid var(--linha); padding: var(--secao-p) 0; }
.confianca__fatos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.confianca__fatos li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--tinta); }
.confianca__fatos strong { font-weight: 600; }
.confianca__ico { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--azul); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.confianca__ico text { fill: var(--azul); stroke: none; font-family: var(--f-titulo); font-weight: 800; font-size: 8px; }
.confianca__ico .cheio { fill: var(--azul); stroke: none; }
.confianca__logos { margin-top: 24px; }
.confianca__titulo { margin: 0 0 10px; }
.confianca__faixa { display: flex; flex-direction: column; margin-inline: calc(-1 * var(--margem)); }
.confianca__faixa .gb-marquee__pausa { align-self: flex-end; margin: 10px var(--margem) 0 0; }
/* Etiqueta de papel de cada logo */
.gb-marquee__lista li { display: grid; place-items: center; width: 136px; height: 56px; padding: 8px 14px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-papel); }
.gb-marquee__lista img { width: auto; height: auto; max-width: 100%; max-height: 34px; }
@media (min-width: 900px) {
    .confianca__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
    .confianca__fatos { grid-column: 1 / span 4; gap: 14px; }
    .confianca__fatos li { font-size: 16px; }
    .confianca__logos { grid-column: 5 / span 8; margin-top: 0; }
    .confianca__faixa { flex-direction: row; align-items: center; gap: 12px; margin-inline: 0; }
    .confianca__faixa .gb-marquee { flex: 1; min-width: 0; }
    .confianca__faixa .gb-marquee__pausa { align-self: auto; margin: 0; }
    .gb-marquee__lista li { width: 168px; height: 64px; padding: 10px 18px; }
    .gb-marquee__lista img { max-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .confianca__faixa { margin-inline: 0; }
    .gb-marquee__lista { gap: 8px; }
    .gb-marquee__lista li { flex: 1 1 30%; width: auto; }
}

/* ==========================================================================
   PRODUTOS: uma folha dividida por fios (sem cards, sem sombra).
   Celular: sacolas em cima, os outros 4 em linhas (desenho à esquerda).
   600+: os 4 em 2 × 2. 900+: sacolas ocupam 2 colunas × 2 linhas.
   ========================================================================== */
.produtos .gb-h2 { margin-bottom: 28px; }
.produtos__folha {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
    border-radius: var(--r-papel);
}
.produto {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 20px 16px;
    background: var(--papel);
}
.produto__desenho { --esc: .5; display: flex; align-items: center; justify-content: center; height: 96px; padding: 6px; }
.produto__desenho img { width: 100%; height: 100%; object-fit: contain; }
.produto__nome { margin: 0 0 4px; }
.produto__texto { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
.produto__link { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; font-size: 15px; }

/* Sacolas: o trio das ofertas na mesma escala, numa prancheta milimetrada */
.produto--sacolas { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 24px; }
.produto--sacolas .produto__desenho { height: auto; align-items: flex-end; gap: 14px; padding: 18px 8px 8px; margin-bottom: 20px; }
.produto--sacolas .produto__nome { font-size: clamp(1.375rem, 1.25rem + .5vw, 1.75rem); line-height: 1.15; letter-spacing: var(--tr-h2); margin-bottom: 8px; }
.produto--sacolas .produto__texto { font-size: 16px; line-height: 1.55; margin-bottom: 0; }
.produto__btn { margin-top: 20px; }
/* Celular: cabe o trio + 2 vãos de 14px (a cota da sacola do meio não encosta na da esquerda) */
.trio { --esc: .27; }
@media (min-width: 400px) { .trio { --esc: .3; } }

@media (min-width: 600px) {
    .produtos__folha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .produto--sacolas { grid-column: 1 / -1; }
    .produto { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    .produto__desenho { height: 150px; margin-bottom: 18px; }
    .trio { --esc: .5; }
}
@media (min-width: 900px) {
    .produtos .gb-h2 { margin-bottom: 40px; }
    .produtos__folha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .produto { grid-template-rows: auto 1fr; padding: 28px; }
    .produto--sacolas { grid-column: 1 / span 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
    .produto--sacolas .produto__desenho { flex: 1; min-height: 0; gap: 20px; padding: 24px 12px 12px; margin-bottom: 24px; }
    .produto--sacolas .produto__corpo { height: auto; }
    .produto__corpo { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
    .produto__link { margin-top: auto; }
    .trio { --esc: .36; }
}
@media (min-width: 1100px) { .trio { --esc: .44; } }
@media (min-width: 1280px) { .trio { --esc: .54; } }

/* Desenho das sacolas (o mesmo das ofertas da /sacolas): viewBox em mm; largura = viewBox × --esc.
   Traços em px de tela (divididos pela escala), sem vector-effect (quebra o pathLength em alguns motores). */
.saco { width: calc(var(--vbw) * var(--esc) * 1px); height: auto; max-width: none; overflow: visible; }
.trio .saco:nth-child(2) { --i: 1; }
.trio .saco:nth-child(3) { --i: 2; }
.trio .contorno { fill: none; stroke: var(--tinta); stroke-width: calc(1.5px / var(--esc)); stroke-linejoin: round; }
.trio .construcao { fill: none; stroke: var(--tinta); stroke-opacity: .45; stroke-width: calc(.75px / var(--esc)); stroke-dasharray: calc(3px / var(--esc)); }
.trio .construcao--clara { stroke: #FFFFFF; stroke-opacity: .35; }
.trio .alca { fill: none; stroke-linecap: round; }
.saco__marca { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.02em; }
.trio .cotas { opacity: .75; }
.trio .cota, .trio .cota-ch { fill: none; stroke: var(--azul); stroke-width: calc(1px / var(--esc)); }
.trio .cota-ch { opacity: .55; }
.trio .cota-num { fill: var(--azul); font-family: var(--f-texto); font-weight: 500; font-size: calc(12px / var(--esc)); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   COMO FUNCIONA: ordem de produção. Marcadores = marcas de registro que recebem C, M, Y e K.
   A régua acompanha a rolagem; sem suporte, entra ao aparecer. (igual à /sacolas)
   ========================================================================== */
.linha-tempo { list-style: none; margin: 36px 0 0; padding: 0; view-timeline: --passos block; }
.linha-tempo__passo { position: relative; padding: 0 0 32px 56px; }
.linha-tempo__passo:last-child { padding-bottom: 0; }
.linha-tempo__passo:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: -18px; width: 2px; background: var(--azul); transform-origin: 50% 0; }
.marcador { position: absolute; left: 0; top: 0; z-index: 1; width: 36px; height: 36px; }
.marcador svg { width: 100%; height: 100%; overflow: visible; }
.marcador__fundo { fill: var(--papel); }
.marcador .tinta { fill: var(--cor); transform-box: fill-box; transform-origin: center; }
.marcador__alvo { fill: none; stroke: var(--tinta); stroke-width: 1.5; }
.marcador__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-titulo); font-weight: 700; font-size: 15px; line-height: 1; color: var(--num); }
.linha-tempo__passo .gb-h3 { padding-top: 6px; margin-bottom: 6px; }
.linha-tempo__passo p { font-size: 16px; }
.linha-tempo__passo strong { font-weight: 600; color: var(--tinta); }
@media (min-width: 900px) {
    .linha-tempo { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
    .linha-tempo__passo { padding: 64px 0 0; }
    .marcador { width: 40px; height: 40px; }
    .marcador__num { font-size: 16px; }
    .linha-tempo__passo:not(:last-child)::before { left: 20px; top: 19px; bottom: auto; width: calc(100% + 32px); height: 2px; transform-origin: 0 50%; }
    .linha-tempo__passo .gb-h3 { padding-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .linha-tempo__passo::before { animation: gb-regua-y linear both; animation-timeline: --passos; }
        .linha-tempo__passo .tinta { animation: gb-tinta linear both; animation-timeline: --passos; }
        .linha-tempo__passo .marcador__num { animation: gb-num linear both; animation-timeline: --passos; }
        .linha-tempo__passo:nth-child(1) .tinta, .linha-tempo__passo:nth-child(1) .marcador__num { animation-range: cover 15% cover 20%; }
        .linha-tempo__passo:nth-child(2) .tinta, .linha-tempo__passo:nth-child(2) .marcador__num { animation-range: cover 26% cover 31%; }
        .linha-tempo__passo:nth-child(3) .tinta, .linha-tempo__passo:nth-child(3) .marcador__num { animation-range: cover 38% cover 43%; }
        .linha-tempo__passo:nth-child(4) .tinta, .linha-tempo__passo:nth-child(4) .marcador__num { animation-range: cover 48% cover 52%; }
        .linha-tempo__passo:nth-child(1)::before { animation-range: cover 18% cover 27%; }
        .linha-tempo__passo:nth-child(2)::before { animation-range: cover 30% cover 39%; }
        .linha-tempo__passo:nth-child(3)::before { animation-range: cover 41% cover 49%; }
        @media (min-width: 900px) { .linha-tempo__passo::before { animation-name: gb-regua-x; } }
    }
    @supports not (animation-timeline: view()) {
        .linha-tempo__passo::before { transition: transform 300ms var(--ease-padrao); transition-delay: calc(var(--i) * 200ms + 120ms); }
        .linha-tempo__passo .tinta { transition: transform 240ms var(--ease-sai), opacity 240ms ease; transition-delay: calc(var(--i) * 200ms); }
        .linha-tempo__passo .marcador__num { transition: color 240ms ease; transition-delay: calc(var(--i) * 200ms); }
        .motion .passos:not(.is-visto) .linha-tempo__passo::before { transform: scaleY(0); }
        .motion .passos:not(.is-visto) .tinta { transform: scale(0); opacity: 0; }
        .motion .passos:not(.is-visto) .marcador__num { color: var(--tinta); }
        @media (min-width: 900px) { .motion .passos:not(.is-visto) .linha-tempo__passo::before { transform: scaleX(0); } }
    }
}
@keyframes gb-regua-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gb-regua-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gb-tinta { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gb-num { from { color: var(--tinta); } to { color: var(--num); } }

/* Canhoto do pagamento */
.passos__canhoto { --furo: var(--nevoa); margin-top: 40px; max-width: 560px; }
.canhoto__celula { padding: 16px 20px; }
.canhoto__rotulo { margin: 0 0 4px; }
.canhoto__valor { margin: 0; font-size: 16px; line-height: 1.45; color: var(--tinta); }
.canhoto__valor strong { font-weight: 600; }
@media (min-width: 900px) {
    .passos__canhoto { margin-top: 56px; }
    .canhoto__celula { padding: 20px 28px; }
}

/* ==========================================================================
   PRÉVIA E AMOSTRA (ve): prévia em papel com carimbo | amostra em kraft com o envelope
   ========================================================================== */
.ve__titulo { margin-bottom: 28px; max-width: 20ch; }
.ve__grade { display: grid; gap: 32px; }
.ve__folha { margin-right: 6px; }
.ve__papel { padding: 14px; }
.ve__papel img { width: 100%; border-radius: var(--r-papel); }
.ve__carimbo { position: absolute; top: 26px; right: 22px; background: rgba(255, 255, 255, .82); }
.ve__legenda { margin-top: 18px; }
.ve__texto { margin: 16px 0 0; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--tinta); max-width: 34ch; }
.ve__amostra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 20px 32px;
    background: var(--kraft-claro) url(../assets/images/sacolas-nova/textura-kraft.webp) 0 0 / 160px 160px;
    border-radius: var(--r-papel);
    color: var(--tinta);
}
/* Envelope e texto numa coluna só, centrada no painel; o texto continua alinhado à esquerda */
.ve__amostra { align-items: center; }
.ve__amostra > * { width: 100%; max-width: 400px; }
.ve__amostra .amostra__cena { max-width: 300px; }
.ve__amostra .ve__texto { margin-top: 24px; }
@media (min-width: 900px) {
    .ve__titulo { margin-bottom: 40px; }
    .ve__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(2 * var(--gutter)); align-items: stretch; }
    .ve__folha { max-width: 470px; }
    .ve__papel { padding: 18px; }
    .ve__amostra { justify-content: center; padding: 48px; }
    .ve__amostra .amostra__cena { width: 100%; max-width: 400px; }
}

/* Envelope (SVG inline, o mesmo da /sacolas) */
.amostra__cena { width: min(100%, 300px); aspect-ratio: 4 / 3; }
.amostra__cena svg { width: 100%; height: auto; overflow: visible; }
.amostra__env { fill: #C9A574; stroke: var(--kraft-escuro); stroke-width: 1.5; stroke-linejoin: round; }
.amostra__env--dentro { fill: #B48F5E; }
.amostra__dobra { fill: none; stroke: var(--kraft-escuro); stroke-width: 1; opacity: .45; }
.amostra__postal { fill: none; stroke: var(--kraft-escuro); }
.amostra__postal-texto { fill: var(--kraft-escuro); font-family: var(--f-texto); font-weight: 600; font-size: 8px; }
.amostra__postal-meio { fill: var(--kraft-escuro); font-family: var(--f-titulo); font-weight: 800; font-size: 10px; }
.amostra__marca { fill: var(--azul); font-family: var(--f-titulo); font-weight: 800; font-size: 15px; letter-spacing: -.02em; }

/* ---------- Quem somos (igual à /sacolas) ---------- */
.quem__grade { row-gap: var(--e-6); }
.quem__corpo .gb-h2 { margin-bottom: var(--e-4); }
.quem__rotulo { margin: 0 0 var(--e-2); }
.quem__folha { position: relative; margin: 20px; }
.quem__logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
}
.quem__logos li { display: grid; place-items: center; height: 84px; padding: 12px 14px; background: var(--papel); }
.quem__logos img { width: auto; height: auto; max-width: 100%; max-height: var(--h, 40px); }
.quem__cruz { position: absolute; width: 11px; height: 11px; overflow: visible; transform: translate(-50%, -50%); pointer-events: none; }
.quem__cruz path { fill: none; stroke: var(--azul); stroke-width: 1.4; }
.quem__cruz--a { left: 50%; top: 33.333%; }
.quem__cruz--b { left: 50%; top: 66.667%; }
@media (min-width: 900px) {
    .quem__grade { align-items: start; }
    .quem__corpo { grid-column: 1 / span 5; }
    .quem__clientes { grid-column: 7 / span 6; }
    .quem__rotulo { margin-left: 30px; }
    .quem__folha { margin: 30px; }
    .quem__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quem__logos li { height: 104px; }
    .quem__cruz--a { left: 33.333%; top: 50%; }
    .quem__cruz--b { left: 66.667%; top: 50%; }
}

/* ---------- Dúvidas frequentes (igual à /sacolas) ---------- */
.duvidas__grade { row-gap: var(--e-5); }
.duvidas__item { border-top: 1px solid var(--linha); }
.duvidas__item:last-child { border-bottom: 1px solid var(--linha); }
.duvidas__item summary {
    position: relative;
    display: block;
    min-height: 48px;
    padding: var(--e-4) 44px var(--e-4) 0;
    list-style: none;
    font-weight: 600;
    line-height: 1.45;
    color: var(--tinta);
    cursor: pointer;
}
.duvidas__item summary::-webkit-details-marker { display: none; }
.duvidas__item summary::before, .duvidas__item summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: calc(var(--e-4) + .725em);
    width: 14px;
    height: 1.5px;
    background: var(--azul);
    transition: transform var(--dur-curta) var(--ease-padrao);
}
.duvidas__item summary::after { transform: rotate(90deg); }
.duvidas__item[open] summary::after { transform: rotate(0deg); }
.duvidas__resposta p { padding: 0 0 18px; font-size: 16px; max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
        .duvidas__lista { interpolate-size: allow-keywords; }
        .duvidas__item::details-content {
            block-size: 0;
            overflow: hidden;
            transition: block-size 250ms var(--ease-padrao), content-visibility 250ms allow-discrete;
        }
        .duvidas__item[open]::details-content { block-size: auto; }
    }
}
@media (min-width: 900px) {
    .duvidas__grade { align-items: start; }
    .duvidas__lado { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--e-5)); }
    .duvidas__lista { grid-column: 6 / span 7; }
}

/* ---------- Chamada final (azul tinta + cartões impostos 3 × 3) ---------- */
.final__grade { row-gap: var(--e-7); }
.final__lead { margin: var(--e-4) 0 var(--e-5); }
.final__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.final__whats { background: transparent; border-color: rgba(255, 255, 255, .6); color: #FFFFFF; }
.final__whats:hover, .final__whats:active { background: rgba(255, 255, 255, .1); border-color: #FFFFFF; color: #FFFFFF; }
.final__nota { margin: var(--e-4) 0 0; }
.final__arte { max-width: 420px; }
.final__cartoes { display: block; width: 100%; height: auto; overflow: visible; }
.final__fundo { fill: rgba(255, 255, 255, .05); }
.final__linhas { fill: rgba(255, 255, 255, .35); }
.final__marca text { fill: rgba(255, 255, 255, .9); font-family: var(--f-titulo); font-weight: 800; font-size: 10.5px; letter-spacing: -.02em; }
.final__corte { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.4; }
.final__cruz { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; }
@media (min-width: 900px) {
    .final__grade { align-items: center; }
    .final__corpo { grid-column: 1 / span 6; }
    .final__arte { grid-column: 8 / span 5; max-width: none; }
    .final__corte { stroke-width: 1.1; }
    .final__cruz { stroke-width: 1; }
}

/* ==========================================================================
   Movimento (só com no-preference; sem JS, tudo fica no estado final). Texto nunca anima.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Hero, ao carregar (CSS puro): os cortes se riscam, depois vincos; marcas e registro; a tira "imprime" */
    .imposicao .imp-corte, .imposicao .imp-cruz {
        stroke-dasharray: 1;
        animation: gb-traco 900ms var(--ease-traco) both;
        animation-delay: calc(300ms + var(--i, 0) * 150ms);
    }
    .imposicao .imp-canto, .imposicao .imp-registro path {
        stroke-dasharray: 1;
        animation: gb-traco var(--dur-traco) var(--ease-traco) both;
        animation-delay: calc(120ms + var(--i, 0) * 80ms);
    }
    .imposicao .imp-registro circle { animation: gb-aparece 200ms var(--ease-sai) 650ms both; }
    .imposicao .imp-vinco, .imposicao .imp-marca-vinco { animation: gb-aparece 400ms var(--ease-sai) 1000ms both; }
    .imposicao .imp-tira rect { transform-box: fill-box; transform-origin: 50% 100%; animation: gb-imprime 160ms var(--ease-sai) both; animation-delay: calc(520ms + var(--n, 0) * 45ms); }

    /* Trio de sacolas: contorno se desenha, cor entra, alça por último (M7 da /sacolas) */
    .motion .trio .contorno { transition-duration: 600ms; }
    .motion .trio .alca { transition-duration: 300ms; }
    /* Ilustrações dos 4 produtos: sobem 8px e aparecem, uma depois da outra */
    .motion .produto[data-anima]:not(.is-visto) .produto__desenho img { transform: translateY(8px); }

    /* Envelope: a sacolinha sobe e o carimbo postal bate depois (M18 da /sacolas) */
    .motion .amostra__sacola { transform-box: fill-box; transition: transform 600ms var(--ease-sai); }
    .motion .amostra__carimbo { transform-box: fill-box; transform-origin: center; transition: opacity 300ms var(--ease-sai) 450ms, rotate 300ms var(--ease-sai) 450ms; }
    .motion .amostra__cena:not(.is-visto) .amostra__sacola { transform: translateY(38%); }
    .motion .amostra__cena:not(.is-visto) .amostra__carimbo { opacity: 0; rotate: -8deg; }

    /* Chamada final: os cortes dos cartões se riscam, depois as marcas */
    .motion .final__arte .final__corte { transition-duration: 1000ms; }
}