/* ==========================================================================
   Gráfica Batista — modelo único das páginas de produto (Blocos, Pastas, Panfletos, Cartões)
   Usa a base (css/gb-base.css). Celular primeiro; quebras só em 600 e 900 px.
   Ordem (02-direcao-visual 7.2): hero com desenho técnico, modelos, para quem, como funciona,
   dúvidas, chamada final com a imposição do produto, rodapé.
   Desenho do hero: trabalho-redesign/ferramentas/gerar-ilustra-produtos.cjs (não editar à mão no HTML).
   ========================================================================== */

/* ---------- Cabeçalho: no celular o botão do WhatsApp não cabe ao lado do Menu.
   Ele fica no hero (logo abaixo) e na chamada final; volta ao cabeçalho a partir de 600 px. ---------- */
.gb-header__whats { display: none; }
@media (min-width: 600px) { .gb-header__whats { display: inline-flex; } }

/* ==========================================================================
   HERO: título, subtítulo, botão | desenho técnico na prancheta (milimetrado + cotas)
   ========================================================================== */
.hero-produto { padding: 24px 0 48px; }
.hero-produto__grade { row-gap: 32px; }
.hero-produto__sub { margin: 16px 0 24px; }
.hero-produto__nota { margin: 12px 0 0; }

/* Prancheta: o desenho fica sobre o papel milimetrado (--esc = px por mm, só visual) */
.ilustra { --esc: .5; margin: 0; padding: 20px 16px; }
.ilustra__svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
.ilustra__svg text { font-family: var(--f-titulo); }
.ilustra__svg .rotulo { font-family: var(--f-texto); }

@media (min-width: 600px) {
    .ilustra { padding: 28px 32px; }
}
@media (min-width: 900px) {
    .hero-produto { padding: 64px 0 88px; }
    .hero-produto__grade { align-items: center; }
    .hero-produto__texto { grid-column: 1 / span 6; }
    .ilustra { grid-column: 7 / span 6; padding: 40px 36px; }
}

/* O desenho se risca ao carregar (só CSS, como a .gb-prova--entrada da base):
   contorno, depois a cor do papel, os detalhes, a construção e por último as cotas. Texto não anima. */
@media (prefers-reduced-motion: no-preference) {
    .ilustra .traco {
        stroke-dasharray: 1;
        animation: gb-traco var(--dur, 900ms) var(--ease-traco) both;
        animation-delay: calc(var(--atraso, 150ms) + var(--i, 0) * 120ms);
    }
    .ilustra .cotas .traco { --dur: 520ms; }
    .ilustra .surge {
        animation: gb-aparece 360ms var(--ease-sai) both;
        animation-delay: calc(var(--atraso, 150ms) + var(--i, 0) * 120ms);
    }
}

/* ==========================================================================
   MODELOS: ficha (etiqueta de caixa), nome à esquerda e uma linha de descrição
   ========================================================================== */
.modelos__ficha { margin: 28px 0 0; border: 1px solid var(--tinta); border-radius: var(--r-papel); background: var(--papel); }
.modelo { padding: 16px 18px; border-top: 1px solid var(--linha); }
.modelo:first-child { border-top: 0; }
.modelo__nome {
    margin: 0 0 4px;
    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);
}
.modelo__texto { margin: 0; font-size: 16px; line-height: 1.5; color: var(--grafite); max-width: 52ch; }
@media (min-width: 900px) {
    .modelos__grade { align-items: start; }
    .modelos__topo { grid-column: 1 / span 4; }
    .modelos__ficha { grid-column: 5 / span 8; margin-top: 0; }
    .modelo { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 20px 24px; }
    .modelo__nome { margin: 0; }
}

/* ==========================================================================
   PARA QUEM: título e um bloco de texto curto (sem ícone)
   ========================================================================== */
.para-quem__grade { row-gap: 16px; }
.para-quem__texto { margin: 0; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--grafite); max-width: 52ch; }
@media (min-width: 900px) {
    .para-quem__grade { align-items: start; }
    .para-quem .gb-h2 { grid-column: 1 / span 5; }
    .para-quem__texto { grid-column: 7 / span 6; padding-top: 6px; }
}

/* ==========================================================================
   COMO FUNCIONA: mesma linha do tempo da /sacolas (marcas de registro que recebem C, M e Y)
   + canhoto com prazo e pagamento. Entra ao aparecer (data-anima na seção).
   ========================================================================== */
.linha-tempo { list-style: none; margin: 32px 0 0; padding: 0; }
.linha-tempo__passo { position: relative; padding: 0 0 28px 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; }
@media (min-width: 900px) {
    .linha-tempo { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
    .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% + 40px); height: 2px; transform-origin: 0 50%; }
    .linha-tempo__passo .gb-h3 { padding-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .linha-tempo__passo::before { transition: transform 300ms var(--ease-padrao); transition-delay: calc(var(--i) * 220ms + 140ms); }
    .linha-tempo__passo .tinta { transition: transform 240ms var(--ease-sai), opacity 240ms ease; transition-delay: calc(var(--i) * 220ms); }
    .linha-tempo__passo .marcador__num { transition: color 240ms ease; transition-delay: calc(var(--i) * 220ms); }
    .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); } }
}

.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; }
@media (min-width: 900px) {
    .passos__canhoto { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; }
    .canhoto__celula { padding: 22px 28px; border-top: 0; border-left: 1px solid var(--linha); }
    .canhoto__celula:first-child { border-left: 0; }
}

/* ==========================================================================
   DÚVIDAS: acordeão nativo (<details>), título fixo ao lado no desktop
   ========================================================================== */
.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) com a faca ou a imposição do produto
   ========================================================================== */
.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%; max-width: 520px; height: auto; margin: 0 auto; overflow: visible; color: rgba(255, 255, 255, .85); }
.final .gb-faca .corte { stroke-width: 1.6; }
.final .gb-faca .vinco { stroke-width: 1.2; }
.final .gb-faca .marca-vinco { stroke-width: 2; }
.gb-faca .folha { fill: none; stroke: currentColor; stroke-width: 1; opacity: .22; }
@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; }
}
/* A imposição se risca ao aparecer: cortes, depois vincos, marcas e a tira de cor */
@media (prefers-reduced-motion: no-preference) {
    .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, .motion .final__faca .tira { 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,
    .motion .final__faca:not(.is-visto) .tira { opacity: 0; }
}