/* ============================================================
   MRC CONSULTORIA — Estilos exclusivos de mrc_index.html
   ============================================================ */

/* ── Banner / Chamada principal ── */
.banner {
    text-align: center;
    padding: 40px 5% 30px;
    background-color: var(--azul-petroleo);
}

.banner h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 900;
    color: var(--branco-gelo);
    margin-bottom: 18px;
}

.cte-button {
    background: none;
    border: 1px solid var(--dourado);
    border-radius: 5px;
    padding: 11px 28px;
    color: var(--dourado);
    font-size: 15px;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.cte-button:hover {
    background-color: var(--dourado);
    color: var(--azul-petroleo);
}

/* ── Imagem hero full-width com texto sobreposto ── */
.imagem-com-texto {
    position: relative;
    width: 100%;
    max-height: 380px;
    overflow: hidden;
}

.imagem-com-texto img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.texto-sobreposto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(38, 70, 83, 0.72);
    padding: 28px 44px;
    border-radius: 10px;
    border: 1px solid rgba(179, 139, 109, 0.5);
    white-space: nowrap;
}

.texto-sobreposto h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: var(--dourado);
    margin-bottom: 10px;
}

.texto-sobreposto p {
    font-size: 22px;
    color: var(--branco-gelo);
}

/* ── Seções (Quem Somos / Serviços) ── */
section {
    padding: 60px 5%;
    text-align: center;
}

section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: var(--dourado);
    margin-bottom: 30px;
}

.quem-somos-texto {
    max-width: 700px;
    margin: 0 auto;
    background-color: rgba(44, 53, 57, 0.6);
    border: 1px solid var(--dourado);
    border-radius: 8px;
    padding: 24px 30px;
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
}

/* ── Cards de Serviços ── */
.servicos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.card {
    width: 30%;
    min-width: 240px;
    padding: 24px;
    border: 1px solid var(--dourado);
    border-radius: 10px;
    background-color: var(--grafite);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.25s, padding 0.2s;
}

.card:hover {
    background-color: var(--dourado);
    padding: 36px 24px;
}

.card:hover .card-front {
    display: none;
}

.card:hover .card-hover-content {
    display: block;
}

.card-front {
    display: block;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.card-header img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.card-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--dourado);
    margin: 0;
}

.card p {
    font-size: 13px;
    line-height: 1.7;
    color: #ccc;
}

.card-hover-content {
    display: none;
    text-align: center;
}

.card-hover-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: var(--azul-petroleo);
    margin-bottom: 14px;
}

.card-hover-content p {
    font-size: 14px;
    color: var(--azul-petroleo);
    line-height: 1.6;
    margin-bottom: 20px;
}

.card-hover-content a {
    display: inline-block;
    background-color: var(--azul-petroleo);
    color: var(--branco-gelo);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 13px;
    transition: background-color 0.2s;
}

.card-hover-content a:hover {
    background-color: var(--black-piano);
}

/* ── Depoimentos (reutiliza .card — só estilos exclusivos aqui) ── */
.depoimento-avatar {
    width: 36px;
    height: 36px;
    background-color: var(--azul-petroleo);
    border: 2px solid var(--dourado);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 900;
    color: var(--dourado);
    flex-shrink: 0;
}

.depoimento-cargo {
    display: block;
    font-size: 11px;
    color: #999;
    margin-bottom: 4px;
}

.depoimento-estrelas {
    color: var(--dourado);
    font-size: 15px;
    letter-spacing: 2px;
    margin: 10px 0;
}

.depoimento-aspas {
    font-family: 'Montserrat', sans-serif;
    font-size: 64px;
    font-weight: 900;
    color: var(--azul-petroleo);
    line-height: 1;
    margin-bottom: 12px;
}

/* ── Responsivo exclusivo da index ── */
@media screen and (max-width: 1005px) {

    .banner h1 {
        font-size: 24px;
    }

    .imagem-com-texto img {
        height: 240px;
    }

    .texto-sobreposto {
        white-space: normal;
        width: 85%;
        padding: 18px 20px;
    }

    .texto-sobreposto h1 {
        font-size: 22px;
    }

    .texto-sobreposto p {
        font-size: 15px;
    }

    section {
        padding: 40px 5%;
    }

    section h2 {
        font-size: 24px;
    }

    .card {
        width: 100%;
        min-width: unset;
    }

}