/* ==========================================================================
   WHATSAPP — convite para o grupo, entre a oferta e o rodapé
   ========================================================================== */

/* Respiro nas duas pontas: a seção acima mudou e o cartão passou a encostar na
   borda de cor dela. Antes o branco vinha do padding da oferta. */
.zap {
    padding: var(--secao-y) var(--gutter);
    background: var(--branco);
}

/* Faixa chapada, sem degradê nem glifo de fundo: é um aviso de serviço, não
   uma seção de venda. A seção precisa manter fundo de cor sólida porque a onda
   do rodapé é pintada com ele. */
.zap__cartao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(14px, 2vw, 28px);
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(18px, 1.9vw, 26px) clamp(20px, 2.2vw, 32px);
    border-radius: clamp(6px, 0.6vw, 10px);
    background: var(--zap);
    color: var(--branco);
}

.zap__texto {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.35;
}

/* Pílula clara sobre o verde: o mesmo tom da faixa, só que lavado — é o que a
   referência faz, e evita introduzir uma terceira cor. */
.zap__cta {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 0.9vw, 12px);
    flex: none;
    padding: clamp(11px, 1.1vw, 15px) clamp(18px, 1.9vw, 26px);
    border-radius: clamp(5px, 0.5vw, 8px);
    background: rgba(255, 255, 255, 0.22);
    color: var(--branco);
    font-size: clamp(13px, 1.05vw, 15px);
    font-weight: 700;
    transition: background 200ms ease;
}

.zap__cta:hover { background: rgba(255, 255, 255, 0.32); }
.zap__cta svg { width: 1.25em; height: 1.25em; flex: none; }