/*
 * Ajustes móveis para as fotos verticais dos tratamentos.
 * As regras de desktop permanecem definidas nos próprios HTMLs.
 */
.hero-shell .hero-image {
    background: #0b0b0b;
}

.hero-shell .hero-image img {
    object-fit: contain;
    object-position: center;
}

@media (max-width: 700px) {
    .service-section .service-card {
        min-height: 0;
    }

    .service-section .service-card .box {
        height: auto;
    }

    .service-section .service-card .img-box {
        position: relative;
        inset: auto;
        transform: none !important;
    }

    .service-section .service-card img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .service-section .service-card .content {
        position: relative;
        inset: auto;
        min-height: 0;
        background: #000;
    }

    .hero-shell .hero-media {
        grid-template-rows: auto auto;
        min-width: 0;
        width: 100%;
    }

    .hero-shell .hero-grid,
    .hero-shell .hero-copy {
        min-width: 0;
        width: 100%;
    }

    .hero-shell .hero-copy h1 {
        max-width: 100%;
        font-size: clamp(32px, 9vw, 40px);
        overflow-wrap: break-word;
    }

    .hero-shell .hero-copy .lead {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .hero-shell .hero-image {
        min-height: 0;
    }

    .hero-shell .hero-image img,
    .related-card img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}