/* ==========================================================================
   RETRATO EM ARCO — SUBSTITUI A ÓRBITA DA PÁGINA INICIAL
   Retângulo com topo arredondado em meia-oval, com moldura decorativa
   deslocada e um selo de texto sobreposto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ESTRUTURA DO RETRATO
   -------------------------------------------------------------------------- */

/* Posiciona o bloco do retrato */
.retrato {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin-left: auto;
}

/* Camada que desenha a moldura deslocada atrás da imagem */
.retrato::before {
    content: '';
    position: absolute;
    left: -22px;
    top: -22px;
    right: 22px;
    bottom: 22px;
    border: 1px solid var(--terracota);
    border-radius: 260px 260px 3px 3px;
    opacity: 0.55;
    pointer-events: none;
}

/* Recorte em arco da imagem */
.retrato-moldura {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 260px 260px 3px 3px;
    background: var(--verde-neblina);
    box-shadow: 0 24px 60px rgba(34, 49, 43, 0.16);
}

/* Ajusta a imagem dentro do recorte */
.retrato-moldura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: transform 1.4s var(--curva);
}

/* Desloca levemente a imagem no estado de foco do mouse */
.retrato:hover .retrato-moldura img {
    transform: scale(1.04);
}

/* Selo de texto sobreposto no canto inferior do retrato */
.retrato-selo {
    position: absolute;
    left: -34px;
    bottom: 30px;
    max-width: 190px;
    padding: 18px 20px;
    background: var(--areia);
    border-left: 2px solid var(--terracota);
    box-shadow: 0 14px 34px rgba(34, 49, 43, 0.12);
}

/* Texto do selo */
.retrato-selo p {
    font-family: var(--fonte-display);
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--verde);
}

/* Assinatura da profissional abaixo do retrato */
.heroi-assinatura {
    margin-top: 26px;
    padding-left: 2px;
    font-family: var(--fonte-display);
    font-size: 1.3rem;
    color: var(--verde);
}

/* --------------------------------------------------------------------------
   RESPONSIVO — RETRATO
   -------------------------------------------------------------------------- */

/* Ajusta o retrato nas telas menores */
@media (max-width: 960px) {
    .retrato {
        margin: 0 auto;
        max-width: 380px;
    }

    .retrato::before {
        left: -14px;
        top: -14px;
        right: 14px;
        bottom: 14px;
    }

    .retrato-selo {
        left: -12px;
        bottom: 18px;
        padding: 14px 16px;
        max-width: 165px;
    }
}

/* Ajusta o selo no celular */
@media (max-width: 520px) {
    .retrato {
        max-width: 320px;
    }

    .retrato-selo {
        left: 0;
        bottom: 14px;
        padding: 12px 14px;
        max-width: 150px;
    }

    .retrato-selo p {
        font-size: 0.95rem;
    }
}