/* ==========================================================================
   Página de Sacolas v3 — estilos específicos (depende de gb-base.css)
   Celular primeiro. Quebras: 600 e 900 px.
   Seções: 1 cabeçalho (base) · 2 hero · faixa de confiança · vitrine · 3 ofertas · 4 por que importa ·
   6 prévia · 7 como funciona · 8–13 · barra fixa · formulário
   ========================================================================== */

:root { --borda-campo: #8A95A1; }

/* ---------- Chips (hero e formulário) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    min-height: 48px;
    padding: 10px 18px;
    border: 1.5px solid var(--linha);
    border-radius: var(--r-pilula);
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--f-texto);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform var(--dur-micro) var(--ease-padrao);
    -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--azul); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }

/* ==========================================================================
   1. CABEÇALHO com menu (o menu em si vem do gb-base.css). Abaixo de 600 px não cabem marca, "Pedir
   orçamento" e "Menu" lado a lado (360 px: 388 de 320 px): a marca quebra em duas linhas e o "Menu"
   vira só o ícone (o texto continua para o leitor de tela).
   ========================================================================== */
@media (max-width: 599px) {
    .gb-header .gb-marca { gap: 8px; }
    .gb-header .gb-marca > span:last-child { max-width: min-content; white-space: normal; font-size: 15px; line-height: 1; }
    .gb-header__acoes { gap: 6px; }
    .gb-menu-btn { justify-content: center; width: 40px; height: 40px; padding: 0; }
    .gb-menu-btn__txt {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}
@media (max-width: 379px) {
    .gb-header__inner { gap: 10px; }
}

/* ==========================================================================
   2. HERO com os banners do Lucas (pasta "_fontes-imagens/banner sacolas").
   - Celular: banner 4:3 de ponta a ponta; o texto vem numa "folha" branca que sobe um pouco sobre a foto.
   - Telas médias (900 a 1199 px): texto à esquerda e o banner 4:3 como painel até a borda direita.
   - PC (1200 px ou mais): o banner 16:9 inteiro de fundo; título, subtítulo e ramos ficam no lado esquerdo,
     que no banner é parede lisa. O texto nunca passa de ~43% da largura (as sacolas começam em 45%).
   Ajustes se o banner mudar: --hero-foco (celular), --hero-prop-d e --hero-foco-d (PC).
   ========================================================================== */
.hero { --hero-foco: 50% 62%; position: relative; }
.hero__banner { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #D5D5D2; }
.hero__banner img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-foco); }
.hero__grid {
    position: relative;
    margin-top: -22px;                 /* a folha de texto sobe sobre a foto (e esconde a mesa espelhada do respiro) */
    padding-block: 24px 32px;
    background: var(--papel);
    border-radius: 20px 20px 0 0;
}
.hero__sub { margin: 12px 0 0; }
.hero__inicio { margin-top: 22px; }
.hero__pergunta { margin: 0 0 12px; font-weight: 600; color: var(--tinta); }
.hero__nota { margin: 14px 0 0; }
.hero__nota strong { font-weight: 600; color: var(--tinta); }
/* Celular: primeira tela mais leve. Título e subtítulo um pouco menores e os ramos curtos ("Moda"),
   em 2 fileiras de 3 do mesmo tamanho. O nome completo do ramo continua para o leitor de tela. */
@media (max-width: 599px) {
    .hero__titulo { font-size: clamp(1.75rem, 1rem + 3.4vw, 2rem); }
    .hero__sub { margin-top: 10px; font-size: 1rem; line-height: 1.55; }
    .hero__inicio { margin-top: 20px; }
    .hero__pergunta { margin-bottom: 10px; font-size: .9375rem; }
    .hero .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hero .chip { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 6px; border-radius: 12px; font-size: 15px; line-height: 1.2; text-align: center; }
    .chip__resto {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .hero__nota { margin-top: 12px; font-size: .8125rem; }
}
@media (min-width: 350px) and (max-width: 379px) {
    .hero .chip { font-size: 14px; }   /* "Cosméticos" folgado na coluna de 104 px */
}
@media (max-width: 349px) {
    .hero .chips { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .hero { display: flex; align-items: center; }
    .hero__banner { position: absolute; top: 0; bottom: 0; right: 0; aspect-ratio: auto; }
    .hero__grid { flex: 1; margin-top: 0; border-radius: 0; background: none; }
    .hero__sub { margin-top: 20px; }
    .hero__inicio { margin-top: 32px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
    /* Telas médias: painel do meio da tela até a borda direita */
    .hero { min-height: min(720px, calc(100svh - var(--header-h))); }
    .hero__banner { left: 56%; }
    .hero__grid { padding-block: 64px 80px; }
    .hero__texto { width: calc(56vw - var(--margem) - 40px); }
}
@media (min-width: 1200px) {
    /* PC: banner largo (16:9 + parede esticada à esquerda pelo script = 2,54:1). O hero tem a altura da janela
       (sem passar da proporção 16:9 original) e a foto cobre pela altura: as sacolas aparecem inteiras, com parede
       em cima e mesa embaixo, e o que sobra é só parede à esquerda, onde fica o texto.
       --hero-sacolas = onde a sacola azul começa na tela (a 61,6% da foto): largura − 0,384 × 2,54 × altura.
       Banner novo: mudar --hero-prop-d, o 0.976 e o 2.54 do sizes no HTML (o script informa a proporção). */
    .hero {
        --hero-prop-d: 2.54;
        --hero-h: clamp(560px, calc(100svh - var(--header-h)), calc(100vw / 1.792));
        --hero-esq: max(var(--margem), (100vw - var(--container)) / 2);
        --hero-sacolas: calc(100vw - 0.976 * var(--hero-h));
        min-height: var(--hero-h);
        background: #D5D5D2;            /* cor da parede do banner, enquanto a foto carrega */
    }
    .hero__banner { left: 0; }
    .hero__banner img { object-position: 100% 50%; }
    .hero__grid { padding-block: 40px 48px; }
    .hero__inicio { margin-top: 28px; }
    .hero__texto { width: min(600px, calc(var(--hero-sacolas) - var(--hero-esq) - 64px)); }
    .hero__titulo { font-size: clamp(2.5rem, 3.3vw, 3.75rem); }
    .hero__sub { color: var(--tinta); }
    .hero .chip { border-color: rgba(19, 32, 47, .18); }
    .hero .chip:hover { border-color: var(--azul); }
    .hero__nota { color: var(--tinta); }
}

/* ---------- Faixa de confiança: fatos + logos em loop ---------- */
.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) {
    /* parada: 3 logos por linha */
    .confianca__faixa { margin-inline: 0; }
    .gb-marquee__lista { gap: 8px; }
    .gb-marquee__lista li { flex: 1 1 30%; width: auto; }
}

/* ==========================================================================
   VITRINE: faixa de sacolas de ponta a ponta. Aqui só o layout e a faixa com rolagem lateral (vale sem JS).
   O andar sozinho, o arrasto e os estados (.is-auto / .is-parado / .is-arrastando no [data-vitrine])
   são do js/gb-vitrine.js + css/gb-interacoes.css (carregada depois desta, pode sobrepor).
   Estrutura: .vitrine__palco = contêiner de rolagem (overflow-x) · .vitrine__trilho = fileira de cards.
   ========================================================================== */
.vitrine { --vitrine-card: clamp(232px, 68vw, 288px); --vitrine-vao: 16px; }
.vitrine__sub { margin: 12px 0 0; }
.vitrine__palco {
    margin-top: 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--margem), calc((100% - var(--container)) / 2));
    scrollbar-width: none;
}
.vitrine__palco::-webkit-scrollbar { display: none; }
.vitrine__trilho {
    display: flex;
    gap: var(--vitrine-vao);
    width: max-content;
    margin: 0;
    /* o 1º card alinha com o texto da página; o resto corre até a borda da tela */
    padding: 4px max(var(--margem), calc((100% - var(--container)) / 2)) 6px;
    list-style: none;
}
.vitrine__item {
    flex: none;
    display: flex;
    flex-direction: column;
    width: var(--vitrine-card);
    scroll-snap-align: start;
}
.vitrine__figura { display: flex; flex-direction: column; }
.vitrine__figura img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-papel);
    background: var(--papel-cinza);
    -webkit-user-drag: none;
    user-select: none;
}
.vitrine__figura figcaption {
    min-height: calc(2 * 1.35em);
    margin-top: 12px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    color: var(--tinta);
    text-wrap: pretty;
}
.vitrine__cta { width: 100%; margin-top: 12px; }

/* Rodapé da vitrine: pausa discreta logo abaixo da faixa + chamada para quem não achou o estilo */
.vitrine__rodape { display: flex; flex-direction: column; }
.vitrine__pausa {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 8px;
    padding: 0 14px;
    border: 1px solid var(--linha);
    border-radius: var(--r-pilula);
    background: var(--papel);
    color: var(--grafite);
    font-family: var(--f-texto);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}
.vitrine__pausa:hover { border-color: var(--grafite); color: var(--tinta); }
/* Ícone em CSS (duas barras). Alternador: o nome fica sempre "Pausar"; parada (aria-pressed="true", posto pelo
   gb-vitrine.js na pausa ou em qualquer interação), o botão fica preenchido. Tocar de novo faz andar. */
.vitrine__pausa::before { content: ""; flex: none; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.vitrine__pausa[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); color: #FFFFFF; }
.vitrine__pausa[aria-pressed="true"]:hover { border-color: #000000; background: #000000; color: #FFFFFF; }
/* Sem JS ou com "reduzir movimento" a faixa não anda sozinha: a pausa não tem função */
html:not(.motion) .vitrine__pausa { display: none; }
.vitrine__chamada {
    display: grid;
    gap: 16px;
    margin-top: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--linha);
}
html:not(.motion) .vitrine__chamada { margin-top: 32px; }
.vitrine__chamada-texto { margin: 0; max-width: 46ch; font-size: var(--t-corpo); line-height: 1.5; color: var(--grafite); }
.vitrine__chamada-texto strong { display: block; margin-bottom: 2px; font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--tinta); }
@media (min-width: 600px) {
    .vitrine__chamada { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
    .vitrine__btn { padding-inline: 28px; }
}
@media (min-width: 900px) {
    .vitrine { --vitrine-vao: 24px; }
    .vitrine__sub { margin-top: 16px; }
    .vitrine__palco { margin-top: 40px; }
    .vitrine__chamada { margin-top: 24px; padding-top: 32px; }
    html:not(.motion) .vitrine__chamada { margin-top: 40px; }
}

/* ==========================================================================
   3. OFERTAS (logo abaixo da faixa de logos). Fundo branco: a faixa de cima e a vitrine de baixo são cinza.
   Celular e tablet (até 899 px): carrossel de arrastar, um cartão por vez com a ponta do próximo aparecendo,
   foto grande em cima e pontos embaixo (gb-form.js, iniciarOfertas). Não anda sozinho: oferta é para ler.
   Desktop: prancheta única dividida por fios (sem cards, sem sombra), 3 colunas, foto em cima.
   ========================================================================== */
.ofertas__sub { margin: 12px 0 24px; }
.ofertas__lista { list-style: none; margin: 0; padding: 0; }
.oferta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foto" "nome" "medidas" "texto" "btn";
    grid-template-rows: auto auto auto 1fr auto;
}
.oferta__foto { grid-area: foto; overflow: hidden; border-radius: var(--r-papel); background: var(--papel-cinza); }
.oferta__foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.oferta__nome { grid-area: nome; margin: 0 0 2px; font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; letter-spacing: var(--tr-h3); color: var(--tinta); }
.oferta__medidas { grid-area: medidas; margin: 0 0 6px; font-weight: 600; font-size: 15px; color: var(--azul); font-variant-numeric: tabular-nums; }
.oferta__texto { grid-area: texto; margin: 0; font-size: 15px; line-height: 1.45; }
.oferta__btn { grid-area: btn; margin-top: 16px; }
.ofertas__pontos { display: none; }
.ofertas__legenda { margin: 14px 0 0; }
.ofertas__mais { margin: 8px 0 0; }
.ofertas__mais a { font-weight: 600; }
@media (max-width: 899px) {
    /* a faixa vai de ponta a ponta da tela; o 1º cartão alinha com o texto */
    .ofertas .prancheta { margin-inline: calc(-1 * var(--margem)); }
    .ofertas__lista {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--margem);
        padding: 2px var(--margem) 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ofertas__lista::-webkit-scrollbar { display: none; }
    .oferta {
        flex: none;
        width: min(78vw, 312px);
        padding: 12px 12px 16px;
        border: 1px solid var(--linha);
        border-radius: var(--r-papel);
        background: var(--papel);
        scroll-snap-align: start;
    }
    .oferta__foto { margin-bottom: 14px; }
    .oferta__nome { font-size: 1.25rem; }
    .ofertas__pontos { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
    .ofertas__ponto { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .ofertas__ponto::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #B9C1CB; transition: background-color var(--dur-curta) var(--ease-sai); }
    .ofertas__ponto[aria-current="true"]::before { width: 24px; background: var(--azul); }
    .ofertas__legenda { text-align: center; }
    .ofertas__mais { text-align: center; }
}
@media (min-width: 900px) {
    .ofertas__sub { margin-bottom: 36px; }
    .prancheta { border: 1px solid var(--linha); border-radius: var(--r-papel); background: var(--papel); }
    .ofertas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .oferta {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "foto" "nome" "medidas" "texto" "btn";
        grid-template-rows: auto auto auto 1fr auto;
        padding: 28px;
        border-top: 0;
        border-left: 1px solid var(--linha);
    }
    .oferta:first-child { border-left: 0; }
    .oferta__foto { margin-bottom: 20px; }
    .oferta__btn { margin-top: 22px; }
    /* Linhas alinhadas entre as 3 colunas */
    @supports (grid-template-rows: subgrid) {
        .ofertas__lista { grid-template-rows: repeat(5, auto); }
        .oferta { grid-row: span 5; grid-template-rows: subgrid; }
    }
}
/* A foto sobe de leve quando o bloco aparece (uma vez; escalonada por --i) */
@media (prefers-reduced-motion: no-preference) {
    .oferta__foto img { transition: opacity var(--dur-longa) var(--ease-sai), transform var(--dur-longa) var(--ease-sai); transition-delay: calc(var(--i, 0) * 120ms); }
    .motion .oferta[data-anima]:not(.is-visto) .oferta__foto img { opacity: 0; transform: scale(1.04); }
}

/* ==========================================================================
   4. POR QUE A SACOLA IMPORTA (azul tinta): retícula do dado + mostruário
   ========================================================================== */
.importa .gb-h2 { margin-bottom: 20px; }
.importa__texto > p { color: var(--texto-claro); }
.dado { display: flex; align-items: center; gap: 20px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--linha-escura); }
.dado__texto { margin: 0; max-width: 30ch; color: #FFFFFF; font-weight: 600; font-size: 16px; line-height: 1.45; }
.dado__num { display: block; margin: 2px 0 6px; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(3rem, 2.8rem + .8vw, 3.5rem); line-height: 1; letter-spacing: -.02em; }
/* Retícula 10 × 10: anéis vazios + 72 pontos impressos em ciano (zero DOM; o dado está na frase ao lado) */
.reticula { --ret: 120px; flex: none; position: relative; width: var(--ret); height: var(--ret); }
.reticula::before, .reticula::after { content: ""; position: absolute; inset: 0; background-size: 10% 10%; }
.reticula::before { background-image: radial-gradient(circle, transparent 0 calc(var(--ret) * .025), rgba(255, 255, 255, .28) calc(var(--ret) * .027) calc(var(--ret) * .034), transparent calc(var(--ret) * .037)); }
.reticula::after { background-image: radial-gradient(circle, var(--cmyk-c) 0 calc(var(--ret) * .034), transparent calc(var(--ret) * .037)); clip-path: polygon(0 0, 100% 0, 100% 70%, 20% 70%, 20% 80%, 0 80%); }
@media (min-width: 900px) {
    .reticula { --ret: 160px; }
    .dado { gap: 28px; margin-top: 40px; }
}
/* M11: imprime linha por linha */
@media (prefers-reduced-motion: no-preference) {
    .motion .dado:not(.is-visto) .reticula::after { clip-path: polygon(0 0, 100% 0, 100% 0, 20% 0, 20% 0, 0 0); }
    .motion .dado.is-entrou .reticula::after { animation: gb-reticula 900ms step-end 150ms both; }
}
@keyframes gb-reticula {
    0% { clip-path: polygon(0 0, 100% 0, 100% 0, 20% 0, 20% 0, 0 0); }
    12.5% { clip-path: polygon(0 0, 100% 0, 100% 10%, 20% 10%, 20% 10%, 0 10%); }
    25% { clip-path: polygon(0 0, 100% 0, 100% 20%, 20% 20%, 20% 20%, 0 20%); }
    37.5% { clip-path: polygon(0 0, 100% 0, 100% 30%, 20% 30%, 20% 30%, 0 30%); }
    50% { clip-path: polygon(0 0, 100% 0, 100% 40%, 20% 40%, 20% 40%, 0 40%); }
    62.5% { clip-path: polygon(0 0, 100% 0, 100% 50%, 20% 50%, 20% 50%, 0 50%); }
    75% { clip-path: polygon(0 0, 100% 0, 100% 60%, 20% 60%, 20% 60%, 0 60%); }
    87.5% { clip-path: polygon(0 0, 100% 0, 100% 70%, 20% 70%, 20% 70%, 0 70%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 70%, 20% 70%, 20% 80%, 0 80%); }
}

/* Mostruário: palco 16:10 + legenda; a figura nova entra como laminação passando (M9) */
.mostruario { margin-top: 40px; }
.mostruario__palco { position: relative; display: grid; overflow: hidden; contain: paint; }
.mostruario__foto { grid-area: 1 / 1; visibility: hidden; }
.mostruario__foto.is-ativa, .mostruario__foto.saindo { visibility: visible; }
.mostruario__foto.entrando { z-index: 1; }
.mostruario__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-papel); background: #0A1F36; }
.mostruario__img img { width: 100%; height: 100%; object-fit: cover; }
.mostruario__foto figcaption { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--texto-claro); }
.mostruario__rolo { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; aspect-ratio: 16 / 10; border-right: 2px solid rgba(255, 255, 255, .85); transform: translateX(-100%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .is-trocando .mostruario__foto.entrando { animation: gb-lamina 560ms var(--ease-padrao) both; }
    .is-trocando .mostruario__rolo { animation: gb-rolo 560ms var(--ease-padrao); }
}
@keyframes gb-lamina { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gb-rolo { from { transform: translateX(-100%); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(0); opacity: 0; } }

/* Amostras de papel (abas do mostruário) */
.mostruario__amostras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.mostruario__amostra {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--linha-escura);
    border-radius: var(--r-papel);
    background: var(--tinta-2);
    color: #AFC0D3;
    font-family: var(--f-texto);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: transform 520ms var(--ease-sai), border-color var(--dur-curta) ease, color var(--dur-curta) ease;
    transition-delay: calc(var(--i, 0) * 60ms), 0s, 0s;
    -webkit-tap-highlight-color: transparent;
}
.mostruario__amostra img { width: 100%; height: auto; aspect-ratio: 7 / 6; object-fit: cover; }
.mostruario__amostra span { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; }
.mostruario__amostra:hover { color: #FFFFFF; }
.mostruario__amostra[aria-selected="true"] { border-color: #FFFFFF; box-shadow: 0 0 0 1px #FFFFFF; color: #FFFFFF; }
.mostruario__amostra:focus-visible { outline-color: #FFFFFF; }
@media (min-width: 900px) {
    .importa__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
    .importa__texto { grid-column: 1 / span 5; }
    .mostruario { grid-column: 7 / span 6; margin-top: 0; }
    /* Leque de 3 amostras: −3°, 0°, 3°, sobrepostas 8px; a escolhida sobe */
    .mostruario__amostras { display: flex; gap: 0; margin-top: 28px; padding-left: 8px; }
    .mostruario__amostra { flex: none; width: 112px; margin-left: -8px; transform: rotate(var(--rot)); }
    .mostruario__amostra:nth-child(1) { --rot: -3deg; }
    .mostruario__amostra:nth-child(2) { --rot: 0deg; }
    .mostruario__amostra:nth-child(3) { --rot: 3deg; }
    .mostruario__amostra img { aspect-ratio: auto; height: 96px; }
    .mostruario__amostra[aria-selected="true"] { z-index: 1; transform: translateY(-8px) rotate(0deg); }
}
/* M10: as amostras chegam empilhadas e abrem em leque */
@media (prefers-reduced-motion: no-preference) {
    .motion .mostruario__amostras:not(.is-visto) .mostruario__amostra { transform: translateX(calc(var(--i) * (-100% - 10px))); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .motion .mostruario__amostras:not(.is-visto) .mostruario__amostra { transform: translateX(calc(var(--i) * (-100% + 8px))) rotate(0deg); }
}

/* ==========================================================================
   6. PRÉVIA: folha de aprovação com carimbo e lista conferida
   ========================================================================== */
.previa__texto .gb-h2 { margin-bottom: 20px; }
.previa__nota { margin-top: 24px; padding-left: 16px; border-left: 3px solid var(--azul); font-weight: 600; color: var(--tinta); }
.previa__folha { margin-top: 36px; }
.previa__papel { margin-right: 6px; padding: 16px; }
.previa__papel img { width: 100%; border-radius: var(--r-papel); }
.previa__carimbo { position: absolute; top: 30px; right: 26px; background: rgba(255, 255, 255, .82); }
.previa__lista { --atraso: 380ms; list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.previa__lista li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--tinta); }
.previa__lista svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.previa__legenda { margin-top: 20px; }
@media (min-width: 900px) {
    .previa__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
    .previa__folha { grid-column: 1 / span 6; grid-row: 1; max-width: 520px; margin: 0; }
    .previa__texto { grid-column: 8 / span 5; grid-row: 1; }
    .previa__papel { padding: 20px; }
    .previa__lista { grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px 24px; }
}

/* ==========================================================================
   7. COMO FUNCIONA: ordem de produção. Marcadores = marcas de registro que recebem C, M, Y e K.
   A régua (segmentos entre marcadores) acompanha a rolagem; sem suporte, entra ao aparecer.
   ========================================================================== */
.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: prazo, pagamento e o botão */
.passos__canhoto { --furo: var(--nevoa); display: grid; margin-top: 40px; }
.canhoto__celula { padding: 16px 20px; border-top: 1px solid var(--linha); }
.canhoto__celula:first-child { border-top: 0; }
.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; }
.canhoto__acao .gb-btn { width: 100%; }
@media (min-width: 900px) {
    .passos__canhoto { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; align-items: stretch; margin-top: 56px; }
    .canhoto__celula { display: flex; flex-direction: column; justify-content: center; padding: 22px 28px; border-top: 0; border-left: 1px solid var(--linha); }
    .canhoto__celula:first-child { border-left: 0; }
    .canhoto__acao .gb-btn { width: auto; }
}

/* ==========================================================================
   /sacolas v3: SEÇÕES 8 A 13 (peça para colar no fim de css/sacolas-nova.css)
   Depende de css/gb-base.css (tokens, .gb-*, .gb-milimetrado, .gb-faca, .gb-corte,
   .gb-ficha, .gb-tira-cor, rodapé e movimento [data-anima]/.traco/.surge).
   Celular primeiro. Quebras: 600, 900 e 1200 (escala dos desenhos).
   Prefixos: .opcoes .tamanhos .acabamentos .alcas (8), .amostra (9), .quem (10),
   .duvidas (11), .final (12). O rodapé (13) é todo da base.
   ========================================================================== */

/* ---------- 8. Tamanhos, acabamentos e alças ---------- */
.opcoes__lead { margin: var(--e-3) 0 var(--e-6); }

/* Abas: sublinhado de 3px que cresce (transform, não box-shadow) */
.opcoes__abas { display: flex; gap: var(--e-5); border-bottom: 1px solid var(--linha); }
.opcoes__aba {
    position: relative;
    min-height: 48px;
    padding: 10px 2px;
    border: 0;
    background: none;
    color: var(--grafite);
    font-family: var(--f-texto);
    font-weight: 600;
    font-size: var(--t-ui);
    cursor: pointer;
    transition: color var(--dur-curta) var(--ease-padrao);
}
.opcoes__aba::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--azul);
    transform: scaleX(0);
    transition: transform var(--dur-curta) var(--ease-padrao);
}
.opcoes__aba:hover, .opcoes__aba[aria-selected="true"] { color: var(--tinta); }
.opcoes__aba[aria-selected="true"]::after { transform: scaleX(1); }
.opcoes__painel { padding-top: var(--e-6); }
.opcoes__painel:focus-visible { outline-offset: 8px; }
.opcoes__ajuda { margin: var(--e-6) 0 0; }
.opcoes__ajuda .gb-link-btn { min-height: 44px; }

/* Tamanhos. --esc = px por mm do desenho (mesma escala nas 5) */
.tamanhos { --esc: .30; --cm: calc(var(--esc) * 10px); }
.tamanhos__mesa { display: none; }
.tamanhos__lista { list-style: none; margin: 0; padding: 0; }
/* Celular: ficha por linha. Desenho à esquerda, nome + medidas à direita, uso embaixo */
.tamanhos__item {
    display: grid;
    grid-template-columns: calc(501.3px * var(--esc) + 18px) minmax(0, 1fr);
    grid-template-areas: "desenho nome" "desenho medidas" "uso uso";
    grid-template-rows: auto 1fr auto;
    column-gap: var(--e-4);
    padding: var(--e-5) 0;
    border-top: 1px solid var(--linha);
}
.tamanhos__item:first-child { padding-top: 0; border-top: 0; }
.tamanhos__info { display: contents; }
.tamanhos__desenho {
    grid-area: desenho;
    height: calc(452.8px * var(--esc) + 18px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
}
.tamanhos__svg { display: block; flex: none; width: calc(var(--vbw) * var(--esc) * 1px); max-width: none; height: auto; overflow: visible; }
.tamanhos__svg .cota-num { font-family: var(--f-texto); font-weight: 500; font-size: calc(11.5px / var(--esc)); font-variant-numeric: tabular-nums; }
/* Cotas que se desenham: traço fino na tela em qualquer escala (sem vector-effect, por causa do pathLength) */
.tamanhos__svg .traco { stroke-width: calc(1px / var(--esc)); }
.tamanhos__nome {
    grid-area: nome;
    margin: 0 0 6px;
    font-family: var(--f-titulo);
    font-weight: 700;
    font-size: 18px;
    line-height: var(--lh-h3);
    color: var(--tinta);
}
.tamanhos__resumo { display: none; }
.tamanhos__medidas {
    grid-area: medidas;
    align-self: start;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin: 0;
    font-size: 15px;
}
.tamanhos__medidas div { display: contents; }
.tamanhos__medidas dt { color: var(--grafite); }
.tamanhos__medidas dd { margin: 0; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tamanhos__uso { grid-area: uso; margin: var(--e-3) 0 0; font-size: 15px; line-height: 1.45; }
.tamanhos__rodape { margin-top: var(--e-4); }
.tamanhos__escala { display: none; }

/* Acabamentos e alças: lista com miniatura no celular */
.acabamentos, .alcas__lista { list-style: none; margin: 0; padding: 0; }
.acabamentos__item, .alcas__item {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--e-4);
    align-items: start;
    padding: var(--e-5) 0;
    border-top: 1px solid var(--linha);
}
.acabamentos__item:first-child, .alcas__item:first-child { padding-top: 0; border-top: 0; }
.acabamentos__foto, .alcas__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-papel); background: var(--papel-cinza); }
.acabamentos__nome, .alcas__nome {
    margin: 0 0 4px;
    font-family: var(--f-titulo);
    font-weight: 700;
    font-size: 18px;
    line-height: var(--lh-h3);
    color: var(--tinta);
}
.acabamentos__texto p, .alcas__texto p { font-size: 16px; line-height: 1.5; }
.alcas__intro { margin: 0 0 var(--e-5); font-weight: 600; color: var(--tinta); }

@media (min-width: 900px) {
    /* Prancheta: milimetrado atrás só dos desenhos, régua na base; o texto fica fora, embaixo */
    .tamanhos { --esc: .35; --pad: 28px; --alto: calc(452.8px * var(--esc)); --regua: 16px; position: relative; }
    .tamanhos__mesa {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: calc(var(--alto) + 2 * var(--pad) + var(--regua));
    }
    .tamanhos__mesa::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--regua);
        border-top: 1px solid var(--linha);
        background:
            repeating-linear-gradient(90deg, var(--grafite) 0 1px, transparent 1px calc(var(--cm) * 5)) var(--pad) 0 / 100% 9px no-repeat,
            repeating-linear-gradient(90deg, rgba(63, 74, 87, .55) 0 1px, transparent 1px var(--cm)) var(--pad) 0 / 100% 5px no-repeat,
            var(--papel);
    }
    .tamanhos__lista { position: relative; display: flex; gap: var(--e-5); padding: var(--pad) var(--pad) 0; }
    .tamanhos__item {
        display: flex;
        flex-direction: column;
        flex: 1 1 calc(var(--vbw) * var(--esc) * 1px);
        min-width: 0;
        padding: 0;
        border: 0;
    }
    .tamanhos__desenho.gb-milimetrado { height: var(--alto); padding: 0; justify-content: flex-start; background: none; border: 0; }
    .tamanhos__svg .cota-num { font-size: calc(12.5px / var(--esc)); }
    .tamanhos__info { display: block; margin-top: calc(var(--pad) + var(--regua) + 20px); }
    .tamanhos__nome { margin-bottom: 2px; }
    .tamanhos__resumo { display: block; margin: 0 0 6px; }
    .tamanhos__medidas { display: none; }
    .tamanhos__uso { margin: 0; }
    .tamanhos__rodape { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-4) var(--e-6); margin-top: var(--e-5); }
    .tamanhos__nota { margin: 0; }
    /* Barra de escala (0 a 20 cm, número a cada 5) na escala dos desenhos */
    .tamanhos__escala {
        display: block;
        position: relative;
        flex: none;
        width: calc(var(--cm) * 20 + 1px);
        height: 28px;
        margin: 2px 32px 0 0;
        color: var(--grafite);
        background:
            linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
            repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px calc(var(--cm) * 5)) 0 0 / 100% 9px no-repeat,
            repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px var(--cm)) 0 0 / 100% 5px no-repeat;
    }
    .tamanhos__escala-num, .tamanhos__escala-un {
        position: absolute;
        top: 12px;
        font-size: var(--t-tecnico);
        font-weight: 500;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }
    .tamanhos__escala-num { left: calc(var(--cm) * 5 * var(--n)); transform: translateX(-50%); }
    .tamanhos__escala-un { left: calc(100% + 12px); }

    .acabamentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--e-5); }
    .acabamentos__item { display: block; padding: 0; border: 0; }
    .acabamentos__foto { margin-bottom: var(--e-4); }
    .acabamentos__texto p { font-size: 15px; }

    .alcas__intro { font-size: var(--t-lead); line-height: var(--lh-lead); }
    .alcas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7); }
    .alcas__item { grid-template-columns: 240px minmax(0, 1fr); gap: var(--e-5); padding: 0; border: 0; }
}
@media (min-width: 1100px) { .tamanhos { --esc: .45; } }
@media (min-width: 1200px) {
    .tamanhos { --esc: .51; }
    .acabamentos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- 9. Amostra física (kraft) ---------- */
.amostra__grade { row-gap: var(--e-6); }
.amostra__cena { order: -1; width: min(100%, 300px); aspect-ratio: 4 / 3; }
.amostra__cena svg { width: 100%; height: auto; overflow: visible; }
.amostra__titulo { margin-bottom: var(--e-4); max-width: 16ch; }
.amostra__btn { margin-top: var(--e-2); }
.amostra__nota { margin: var(--e-3) 0 0; color: var(--tinta); }
/* Peças do envelope (SVG inline da própria seção) */
.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; }
@media (min-width: 900px) {
    .amostra { padding: var(--secao-g) 0; }
    .amostra__grade { align-items: center; }
    .amostra__corpo { grid-column: 1 / span 6; }
    .amostra__cena { order: 0; grid-column: 8 / span 5; width: 100%; max-width: 420px; }
}

/* ---------- 10. Quem somos ---------- */
.quem__grade { row-gap: var(--e-6); }
.quem__corpo .gb-h2 { margin-bottom: var(--e-4); }
.quem__rotulo { margin: 0 0 var(--e-2); }
/* Folha de contato: células brancas separadas por fios de 1px; marcas fora da folha */
.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%; }
}

/* ---------- 11. Dúvidas frequentes ---------- */
.duvidas__grade { row-gap: var(--e-6); }
.duvidas__lado .gb-h2 { margin-bottom: 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) {
    /* M20: abre com altura animada só onde há suporte; no resto, abre seco */
    @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; }
}

/* ---------- 12. Chamada final (azul tinta + faca) ---------- */
.final__grade { row-gap: var(--e-7); }
.final__lead { margin: var(--e-4) 0 var(--e-5); }
.final__nota { margin: var(--e-3) 0 0; }
.final .gb-faca { display: block; width: 100%; height: auto; overflow: visible; color: rgba(255, 255, 255, .85); }
/* Faca menor no celular: traço mais grosso para continuar visível */
.final .gb-faca .corte { stroke-width: 1.6; }
.final .gb-faca .vinco { stroke-width: 1.2; }
.final .gb-faca .marca-vinco { stroke-width: 2; }
@media (min-width: 900px) {
    .final__grade { align-items: center; }
    .final__corpo { grid-column: 1 / span 5; }
    .final__faca { grid-column: 7 / span 6; }
    .final .gb-faca .corte { stroke-width: 1.25; }
    .final .gb-faca .vinco { stroke-width: 1; }
    .final .gb-faca .marca-vinco { stroke-width: 1.5; }
}

/* ---------- Movimento das seções 8 a 12 (só com no-preference; sem JS fica tudo no estado final) ---------- */
@media (prefers-reduced-motion: no-preference) {
    /* M16: painel que sai do hidden entra com fade + 8px */
    .motion .opcoes__painel:not([hidden]) { animation: opcoes-entra 240ms var(--ease-sai) both; }
    /* M17: cotas das 5 sacolas se desenham, 80ms entre elas (.traco e .surge da base) */
    .tamanhos__item { --atraso: calc(var(--n, 0) * 80ms); }
    /* M18: a sacolinha sobe do envelope; o carimbo postal bate depois */
    .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; }
    /* M19: a faca se risca (cortes), depois vincos e marcas de vinco */
    .motion .final__faca .corte { stroke-dasharray: 1; transition: stroke-dashoffset 1000ms var(--ease-traco); transition-delay: calc(var(--i, 0) * 200ms); }
    .motion .final__faca .vinco { transition: opacity 400ms var(--ease-sai) 700ms; }
    .motion .final__faca .marca-vinco { transition: opacity 300ms var(--ease-sai) 900ms; }
    .motion .final__faca:not(.is-visto) .corte { stroke-dashoffset: 1; }
    .motion .final__faca:not(.is-visto) .vinco, .motion .final__faca:not(.is-visto) .marca-vinco { opacity: 0; }
}
@keyframes opcoes-entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Desempenho: seções longe da primeira tela ----------
   Só calculam estilo, layout e pintura quando chegam perto da tela (a página é longa e o "Style & Layout"
   do carregamento pesava). "auto" no contain-intrinsic-size guarda a altura real depois da 1ª vez, para a
   rolagem não pular. A vitrine fica fora (o gb-vitrine.js mede os cards ao iniciar). Atenção: content-visibility
   recorta o que vazar da seção (contain: paint); nada destas seções vaza hoje. */
.ofertas, .importa, .previa, .passos, .opcoes, .amostra, .quem, .duvidas, .final {
    content-visibility: auto;
    contain-intrinsic-size: auto 1000px;
}

/* ==========================================================================
   Formulário em etapas (folha). Única sombra da página.
   ========================================================================== */
body.form-aberto { overflow: hidden; }
.folha {
    padding: 0;
    border: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    background: var(--papel);
    color: var(--grafite);
}
.folha::backdrop { background: rgba(14, 42, 71, .55); }
.folha[open] { display: flex; }
@media (min-width: 900px) {
    .folha {
        margin: auto;
        width: 560px;
        height: fit-content;
        min-height: 440px;
        max-height: min(720px, calc(100vh - 64px));
        border-radius: var(--r-folha);
        box-shadow: 0 24px 64px rgba(14, 42, 71, .28);
    }
}
.form { display: flex; flex-direction: column; width: 100%; min-height: 100%; }
.form__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 4px 8px; }
.form__voltar {
    min-height: 48px;
    min-width: 72px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--azul);
    font-weight: 600;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}
.form__voltar[aria-hidden="true"] { visibility: hidden; }
.form__progresso { margin: 0; font-size: 14px; color: var(--grafite); font-variant-numeric: tabular-nums; }
.form__fechar { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; color: var(--tinta); cursor: pointer; border-radius: var(--r-campo); }
/* Barra de progresso: scaleX (o JS define o transform), nunca width */
.form__barra { height: 3px; background: var(--linha); overflow: hidden; }
.form__barra span { display: block; height: 100%; width: 100%; background: var(--azul); transform: scaleX(.1); transform-origin: 0 50%; transition: transform 180ms ease-out; }
.form__corpo { flex: 1; overflow-y: auto; padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
    .form__topo { padding: 8px 12px; }
    .form__corpo { padding: 32px 40px 40px; }
}
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__oferta {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 12px;
    border-radius: var(--r-pilula);
    background: var(--nevoa);
    color: var(--azul-escuro);
    font-size: 14px;
    font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
    .etapa.entrando { animation: etapa-entra 180ms ease-out; }
    .etapa.entrando-volta { animation: etapa-volta 180ms ease-out; }
}
@keyframes etapa-entra { from { opacity: 0; transform: translateX(16px); } }
@keyframes etapa-volta { from { opacity: 0; transform: translateX(-16px); } }
.etapa__titulo {
    margin: 0 0 20px;
    font-family: var(--f-titulo);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--tinta);
    text-wrap: balance;
}
.etapa__titulo:focus { outline: none; }
.etapa__titulo label { cursor: text; }
.etapa__ajuda { margin: -8px 0 16px; font-size: 15px; color: var(--grafite); }
.campo .etapa__ajuda { margin: 10px 0 0; }
.etapa__ajuda--final { margin-top: 14px; font-size: 14px; }
.chips--form { gap: 10px; }
.chips--coluna { flex-direction: column; }
.chips--coluna .chip { border-radius: 14px; min-height: 56px; padding: 14px 18px; }
.chip--link { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; }
.chip--link span { font-size: 14px; color: var(--grafite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip--link:hover { color: var(--tinta); }
/* Etapa do valor de referência (21/10/2026) e a saída de quem achou o valor alto */
.etapa__valor { color: var(--azul); white-space: nowrap; font-variant-numeric: tabular-nums; }
.etapa__pergunta { margin: 0 0 12px; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--tinta); }
.form__fora .gb-btn { margin-top: 8px; }
.form__fora-voltar { display: block; min-height: 44px; margin: 12px auto 0; }
/* Etapa do tamanho: quem ainda não tem um tamanho em mente escolhe pelo modelo.
   Celular/tablet: os modelos da vitrine aqui dentro, parados, numa faixa de arrastar (o JS copia da vitrine).
   PC (o formulário é uma janela por cima da página): um botão que fecha a janela e desce até a vitrine. */
.etapa__modelos { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linha); }
.etapa__modelos-titulo { margin: 0 0 12px; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--tinta); }
.etapa__modelos-titulo span { font-weight: 500; color: var(--grafite); }
.form__modelos {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    padding: 2px 20px 8px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
}
.form__modelos::-webkit-scrollbar { display: none; }
.form__modelo { flex: none; display: flex; flex-direction: column; width: min(56vw, 220px); scroll-snap-align: start; }
.form__modelo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-papel); background: var(--papel-cinza); }
.form__modelo-nome { flex: 1; margin: 10px 0 0; font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--tinta); }
.form__modelo-btn { min-height: 44px; margin-top: 10px; font-size: 15px; }
.form__modelo-btn[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: #FFFFFF; }
.form__ver-modelos { display: none; }
@media (min-width: 900px) {
    .form__modelos { display: none; }
    .form__ver-modelos { display: flex; }
}
.campo input {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 12px 14px;
    border: 1.5px solid var(--borda-campo);
    border-radius: var(--r-campo);
    background: var(--papel);
    color: var(--tinta);
    font-size: 18px;
    line-height: 1.3;
}
.campo input:focus { border-color: var(--azul); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.campo input[aria-invalid="true"]:focus-visible { outline-color: var(--erro); }
.campo--extra { margin-top: 20px; }
.campo--extra label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--tinta); }
/* E-mail logo abaixo do Instagram (mesma etapa) */
.campo--email { margin-top: 24px; }
.campo--email label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 17px; color: var(--tinta); }
.campo__prefixo { display: flex; align-items: stretch; border: 1.5px solid var(--borda-campo); border-radius: var(--r-campo); background: var(--papel); }
.campo__prefixo:focus-within { border-color: var(--azul); outline: 3px solid var(--azul); outline-offset: 3px; }
.campo__prefixo span { display: grid; place-items: center; padding-left: 14px; font-size: 18px; color: var(--grafite); }
.campo__prefixo input { border: 0; padding-left: 4px; }
.campo__prefixo input:focus-visible { outline: none; }
.campo__prefixo.is-invalido { border-color: var(--erro); }
.campo__erro { margin: 8px 0 0; font-size: 15px; font-weight: 500; color: var(--erro); }
.campo__erro:empty { display: none; }
.campo .gb-btn { margin-top: 18px; min-height: 54px; }