/* ==========================================================================
   GARANTIA — cartão de satisfação entre os depoimentos e o especialista
   ========================================================================== */

/* Cartão sobre fundo branco, entre produtos e especialista — as três seções
   compartilham a cor, então não há emenda para ondular. */
/* Respiro de bloco (--secao-y-bloco) e IGUAL nas duas pontas. As vizinhas
   somam --secao-y de cada lado, então o total acima e abaixo fica em
   2,5 × --secao-y (250px em 1440) — a mesma escala do vão mídia → produtos.
   Menos que isso, o cartão lia como amontoado entre produtos e depoimentos. */
.garantia {
    padding: var(--secao-y-bloco) var(--gutter);
    background: var(--branco);
    /* Posicionada e acima da vizinha de baixo. Sem isso a sombra do cartão
       era FATIADA: .depoimentos é relative e, como elemento posicionado, pinta
       o próprio fundo por cima de uma seção estática — o corte reto que
       aparecia logo abaixo do cartão era esse fundo, não a sombra acabando. */
    position: relative;
    z-index: 1;
}


.garantia__cartao {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(34px, 3.8vw, 56px) clamp(26px, 3vw, 48px);
    border-radius: clamp(20px, 2.4vw, 34px);
    background: var(--sage);
    color: var(--offwhite);
    /* Sombra própria, mais densa que a --sombra-cartao: aquela foi calibrada
       para cartão claro, e sob uma superfície escura ela some. Raio curto de
       propósito — com 52px de desfoque ela descia 76px, mais do que a folga
       até a seção seguinte, e virava um borrão sem fim definido. */
    box-shadow: 0 2px 5px rgba(46, 50, 39, 0.10),
                0 9px 20px rgba(46, 50, 39, 0.20);
}

/* Marca no canto, como a referência assina o bloco. Discreta de propósito:
   ela identifica quem dá a garantia, não disputa com o título. */
.garantia__marca {
    position: absolute;
    top: clamp(24px, 2.6vw, 38px);
    right: clamp(26px, 3vw, 48px);
    height: clamp(18px, 1.7vw, 26px);
    width: auto;
    opacity: 0.7;
}

/* O filete é o acento do bloco — o único ponto quente sobre o sálvia. */
.garantia__titulo {
    padding-left: clamp(16px, 1.8vw, 26px);
    border-left: 4px solid var(--terra-claro);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.06;
    letter-spacing: 0.005em;
    color: var(--offwhite);
    /* Sempre três linhas: as quebras estão no HTML e nada aqui pode reagrupar.
       O tamanho da fonte, fluido, é quem garante que cada linha caiba. */
    white-space: nowrap;
}

/* Recuo à direita do tamanho da marca mais folga: sem ele as primeiras linhas
   passavam por baixo do logotipo. O texto ganha linhas, que é o preço certo. */
.garantia__texto {
    padding-right: clamp(86px, 8.6vw, 130px);
}

.garantia__texto p {
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.6;
    color: rgba(245, 241, 236, 0.86);
}

.garantia__texto b { font-weight: 800; color: var(--offwhite); }

/* Complemento, não corpo: menor, mais leve e mais apagado. O seletor repete
   .garantia__texto porque `.garantia__texto p` (0,1,1) vencia `.garantia__nota`
   (0,1,0) e a nota saía no tamanho do parágrafo. */
.garantia__texto .garantia__nota {
    margin-top: clamp(14px, 1.5vw, 20px);
    font-size: clamp(12px, 0.9vw, 13px);
    line-height: 1.5;
    color: rgba(245, 241, 236, 0.5);
}

.garantia__nota a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(245, 241, 236, 0.35);
    text-underline-offset: 3px;
}

.garantia__nota a:hover { color: var(--offwhite); }