/*
 * Imagens dos bentos da home: seção "Amplitude para cuidar" (.v3-bento-img-scope)
 * e seção #atores. Todas as regras são escopadas a essas duas seções.
 */

/* ---------- Base comum ---------- */
.v3-bento-img-scope .v3-bimg,
#atores .v3-bimg {
    position: relative;
    overflow: hidden;
    border: 0;
    background: none;
    padding: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.v3-bento-img-scope .v3-bimg img,
#atores .v3-bimg img {
    position: absolute;
    max-width: none;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none
}

/* ---------- Tipografia ---------- */
.v3-bento-img-scope .v3-h2,
.v3-bento-img-scope .v3-h2 strong,
#atores .v3-h2 {
    font-weight: 500
}

.v3-bento-img-scope .v3-h3,
#atores .v3-h3 {
    font-weight: 500;
    letter-spacing: -0.01em
}

/* ---------- Seção 1: Amplitude para cuidar ---------- */
.v3-bento-img-scope .v3-bento-card {
    position: relative;
    overflow: hidden
}

/* Fundos amostrados do pixel (8,8) de cada imagem */
.v3-bento-img-scope .v3-bento-a { background: #ebf8fd }
.v3-bento-img-scope .v3-bento-b { background: #051e36 }
.v3-bento-img-scope .v3-bento-c { background: #fefefe }
.v3-bento-img-scope .v3-bento-d { background: #f5fafd }

/* A — Especialidades: texto à esquerda, imagem à direita sangrando direita/base */
.v3-bento-img-scope .v3-bento-a > div:first-child {
    position: relative;
    z-index: 1;
    margin-right: 360px
}

.v3-bento-img-scope .v3-bento-a {
    min-height: 330px
}

.v3-bento-img-scope .v3-bimg-a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 385px
}

.v3-bento-img-scope .v3-bimg-a img {
    top: -2px;
    left: 0;
    width: 380px
}

/* B — Concierge: largura total do card, ancorada na base */
.v3-bento-img-scope .v3-bimg-b {
    margin: auto -32px -32px
}

.v3-bento-img-scope .v3-bimg-b img {
    position: static;
    display: block;
    width: 100%
}

/* C — Plano de cuidado: sangra direita/base, fade embaixo */
.v3-bento-img-scope .v3-bimg-c {
    flex: 1;
    min-height: 210px;
    margin: 0 -32px -32px;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%)
}

.v3-bento-img-scope .v3-bimg-c img {
    top: -32px;
    left: -12px;
    width: 420px
}

/* D — Perfil do médico: ponta a ponta, ancorada na base */
.v3-bento-img-scope .v3-bimg-d {
    flex: 1;
    min-height: 290px;
    margin: 0 -32px -32px
}

.v3-bento-img-scope .v3-bimg-d img {
    bottom: -7px;
    left: 50%;
    width: 314px;
    transform: translateX(-50%)
}

@media (width<=640px) {
    .v3-bento-img-scope .v3-bento-a > div:first-child {
        margin-right: 0
    }

    .v3-bento-img-scope .v3-bimg-a {
        position: relative;
        align-self: stretch;
        width: auto;
        height: 300px;
        margin: 0 -32px -32px
    }

    .v3-bento-img-scope .v3-bimg-a img {
        left: 20px
    }
}

/* ---------- Seção 2: #atores ---------- */
#atores .v3-actor:has(.v3-bimg) {
    background: #fefefe
}

#atores .v3-bimg {
    flex: none;
    margin: auto -28px -28px
}

/* Linha 1 (Empresa, Médico & Clínica) */
#atores .v3-bimg-emp,
#atores .v3-bimg-med {
    height: 170px
}

/* Linha 2 (Paciente, Parceiro, Setor público) */
#atores .v3-bimg-pac,
#atores .v3-bimg-par {
    height: 200px
}

#atores .v3-bimg-emp img {
    top: 50%;
    left: 13px;
    width: 600px;
    transform: translateY(-50%)
}

#atores .v3-bimg-med img {
    top: calc(50% - 4px);
    left: 14px;
    width: 510px;
    transform: translateY(-50%)
}

#atores .v3-bimg-pac img {
    top: -49px;
    left: 14px;
    width: 280px
}

#atores .v3-bimg-par img {
    top: 50%;
    left: 16px;
    width: 400px;
    transform: translateY(-50%)
}