/* -------------------------------------------------------------------------
   beneficios.css — faixa roxa "Você viaja e a gente cuida de tudo".

   Conferido no mockup 1920:
     onda ........ roxo-organico2.svg, 1920x400, topo em y=1290
     faixa sólida  começa em 1690 e termina em 2265
     título ...... ink 1736..1770
     cards ....... 1871..2097, 273px de largura com gap de 16px
     ícone ....... círculo de 48x48, 32px abaixo do topo do card
     botão ....... 2138..2185 (48px de altura)
   ------------------------------------------------------------------------- */

.beneficios-section {
    position: relative;
    z-index: 1;
    background: var(--roxo);
    color: #fff;
    padding-bottom: 80px;
}

.beneficios-conteudo {
    position: relative;
    padding-top: 42px;
}

/* ------------------------------------------------------------- cabeçalho -- */

.beneficios-header {
    text-align: center;
    margin-bottom: 40px;
}

.beneficios-titulo {
    font-family: var(--fonte-titulo);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}

.beneficios-subtitulo {
    font-family: var(--fonte-titulo);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, .92);
}

/* ----------------------------------------------------------------- cards -- */

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.beneficio {
    background: #fff;
    border-radius: var(--raio-card);
    padding: 32px 24px 30px;
    text-align: center;
    color: var(--texto);
}

.beneficio-icone {
    width: 48px;
    height: 48px;
    margin: 0 auto 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #d7c8e8;
}

.beneficio-icone img { display: block; width: 24px; height: 24px; }

.beneficio-titulo {
    font-family: var(--fonte-titulo);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--roxo-tinta);
    margin-bottom: 8px;
}

.beneficio-texto {
    font-family: var(--fonte-lista);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #615d65;
}

.beneficios-actions {
    display: flex;
    justify-content: center;
    margin-top: 41px;
}

/* ------------------------------------------------------------- responsivo -- */

@media (max-width: 1100px) {
    .beneficios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .beneficios-titulo { font-size: 30px; }
    .beneficios-subtitulo { font-size: 18px; }
    .beneficios-subtitulo br { display: none; }
}

@media (max-width: 560px) {
    .beneficios-grid { grid-template-columns: 1fr; }
}