/* ============================================================
   RESÍDUOS SÓLIDOS
   ============================================================ */

.rs-img-placeholder {
    width: 100%;
    height: 100%;
    background-color: #bfbfc2;
    border-radius: 24px;
}

/* ---- HERO ---- */
#rs-hero-section {
    padding: 40px 0 0;
}

.rs-hero {
    position: relative;
    background: #66589e;
    border-radius: 24px;
    padding: 48px 64px;
    min-height: 358px;
    overflow: hidden;
}

.rs-hero-kicker {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #b2c3dd;
    margin: 0 0 12px;
}

.rs-hero-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #fff;
    margin: 0 0 16px;
}

.rs-hero-texto,
.rs-hero-texto p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.62;
    color: #fff;
    max-width: 736px;
    margin: 0 0 1em;
}
.rs-hero-texto p:last-child { margin-bottom: 0; }

.rs-hero-img-col {
    position: absolute;
    top: 19px;
    right: 64px;
    width: 450px;
    height: 320px;
    border-radius: 24px;
    overflow: hidden;
}

.rs-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rs-intro-texto,
.rs-intro-texto p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.6;
    color: #58536f;
    text-align: center;
    max-width: 740px;
    margin: 0 auto 1em;
}
.rs-intro-texto p:last-child { margin-bottom: 0; }
.rs-intro-texto { margin-top: 40px; }

/* ---- AÇÕES (faixa clara + checklist) ---- */
#rs-acoes-section {
    background: #ecf1f6;
    padding: 40px 0;
    margin-top: 40px;
}

.rs-acoes-row {
    display: flex;
    align-items: center;
    gap: 40px;
}

.rs-acoes-img-col {
    flex: 0 0 450px;
    max-width: 450px;
    height: 352px;
    border-radius: 24px;
    overflow: hidden;
}

.rs-acoes-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rs-acoes-content {
    flex: 1 1 0;
    min-width: 0;
}

.rs-acoes-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #66589e;
    margin: 0 0 24px;
}

.rs-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rs-checklist-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rs-checklist-badge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: #66589e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.rs-checklist-texto {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.45;
    color: #58536f;
}

/* ---- TÍTULO DE SEÇÃO ---- */
.rs-section-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 12px;
}

.rs-section-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #5a738d;
    flex-shrink: 0;
    position: relative;
    top: -3px;
}

.rs-section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #5a738d;
    letter-spacing: -0.32px;
    margin: 0;
}

/* ---- RESPONSABILIDADE COMPARTILHADA / OBRIGAÇÃO GERAL ---- */
#rs-resp-section,
#rs-obrigacao-section {
    padding: 40px 0;
}

.rs-citacao {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.rs-citacao-bar {
    flex-shrink: 0;
    width: 4px;
    align-self: stretch;
    background: #66589e;
    border-radius: 2px;
}

.rs-citacao-texto,
.rs-citacao-texto p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #58536f;
    margin: 0;
}

.rs-paragrafo,
.rs-paragrafo p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #58536f;
    margin: 0 0 1em;
}
.rs-paragrafo:last-child,
.rs-paragrafo p:last-child { margin-bottom: 0; }

.rs-btn-row {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.rs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    border: 2px solid #66589e;
    background: transparent;
    color: #66589e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.32px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.rs-btn:hover {
    background: #66589e;
    color: #fff;
}

/* ---- RESPONSIVO ---- */
@media (max-width: 992px) {
    .rs-hero { padding: 40px; }
    .rs-hero-img-col { position: static; width: 100%; height: 260px; margin-top: 24px; }
    .rs-acoes-row { flex-direction: column; }
    .rs-acoes-img-col { flex-basis: 100%; max-width: 100%; height: 260px; }
}

@media (max-width: 768px) {
    .rs-hero { padding: 24px; }
    .rs-hero-titulo { font-size: 22px; }
    .rs-hero-texto, .rs-hero-texto p { font-size: 15px; }
    .rs-section-title { font-size: 22px; }
    .rs-intro-texto, .rs-intro-texto p { font-size: 16px; }
    .rs-btn { width: 100%; }
}

/* Ajustes específicos para notebooks (1366x768) */
@media (max-width: 1366px) and (min-width: 993px) {
    /* Entre 993px e 1366px o container fica estreito o suficiente para a
       imagem absoluta (450px, encostada à direita — mantida do mesmo
       tamanho) invadir a área do texto do hero (max-width: 736px). Reduz só
       o max-width do texto pelo espaço que sobra: 100% (largura do conteúdo
       do .rs-hero, já sem o padding) menos o que a imagem + padding direito
       + uma margem de respiro ocupam (450 + 64 + 24 = 538px), menos o
       padding-left (64px) que o texto já descontou do 100% = 474px.
       Abaixo de 992px a imagem já empilha (regra existente), então essa
       faixa fica de fora — o texto não precisa de nenhum ajuste ali.
       Só o max-width vai na div externa: o <p> é filho dela, então "100%"
       nele já seria relativo à div (já reduzida) — aplicar o mesmo calc()
       nos dois compunha a redução em dobro e deixava o valor negativo. */
    .rs-hero-texto {
        max-width: calc(100% - 474px);
    }
    .rs-hero-texto p {
        max-width: 100%;
    }
}

/* Espaçamento entre seções reduzido pela metade em notebook (1366x768) e
   telas médias (1024px–1280px). */
@media screen and (max-width: 1366px) and (max-height: 768px),
       screen and (min-width: 1024px) and (max-width: 1280px) {
    #rs-hero-section {
        padding-top: 20px;
    }

    #rs-acoes-section {
        padding: 20px 0;
        margin-top: 20px;
    }

    #rs-resp-section,
    #rs-obrigacao-section {
        padding: 20px 0;
    }
}