:root {
    --purple: #55489D;
    --orange: #F37053;
    --gray-0: #FFFFFF;
    --gray-100: #F9F9F9;
    --gray-200: #F2F2F2;
    --gray-300: #DADADA;
    --gray-400: #B6B6B6;
    --gray-500: #969696;
    --gray-600: #6E6E6E;
    --gray-900: #1B1B1B;
}

body{
    padding-top:93px;
}

p{
    padding: 0;
}

/* ============ BASE ============ */
#bp-mirante-miolo {
    font-family: 'allerregular', Arial, sans-serif;
    color: var(--gray-900);
    overflow-x: hidden;
    background: var(--gray-0);
}

    #bp-mirante-miolo * {
        box-sizing: border-box;
    }

    #bp-mirante-miolo img {
        max-width: 100%;
    }
    /* The decorative bleed vectors (hero ellipses/heart, especialidades bg,
     tecnologia arc, pronto/hub/fechamento grafismos) are intentionally
     larger than their section and meant to overflow/crop via the wrapper's
     overflow:hidden - the generic max-width:100% rule above was clamping
     them down to the container's width (very visible at the 375px mobile
     breakpoint, where it silently crushed/hid every one of them). */
    #bp-mirante-miolo .hero-decor img,
    #bp-mirante-miolo .esp-decor img,
    #bp-mirante-miolo .tec-decor img,
    #bp-mirante-miolo .pronto-decor img,
    #bp-mirante-miolo .hub-decor img,
    #bp-mirante-miolo .fech-decor img {
        max-width: none;
    }

    #bp-mirante-miolo b, #bp-mirante-miolo strong {
        font-family: 'allerbold';
        font-weight: normal;
    }

    #bp-mirante-miolo a {
        cursor: pointer;
    }

    #bp-mirante-miolo .container-narrow {
        max-width: 1280px;
        margin: 0 auto;
        padding-left: 92px;
        padding-right: 92px;
    }

    #bp-mirante-miolo section {
        position: relative;
        overflow: hidden;
    }

.bp-eyebrow {
    font-family: 'allerbold';
    font-size: 12px;
    letter-spacing: -0.1px;
    text-transform: uppercase;
    color: var(--gray-500);
    display: block;
    margin-bottom: 10px;
}

    .bp-eyebrow.light {
        color: #B6B6B6;
    }

.bp-heading {
    font-family: 'allerregular';
    font-size: 28px;
    line-height: 1.3;
    margin: 0 0 14px;
    background: linear-gradient(90deg,var(--purple) 0%, var(--orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--purple);
}

    .bp-heading.hero {
        font-size: 36px;
    }

    .bp-heading.on-color {
        background: none;
        -webkit-text-fill-color: initial;
        color: var(--gray-100);
    }

    .bp-heading.bold-white {
        font-family: 'allerbold';
        color: var(--gray-100);
        background: none;
        -webkit-text-fill-color: initial;
    }

.bp-text {
    font-family: 'allerregular';
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-600);
}

    .bp-text.on-color {
        color: #f1efff;
    }

.bp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'allerbold';
    font-size: 14px;
    border-radius: 8px;
    padding: 12px 26px;
    border: none;
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
}

    .bp-btn img {
        width: 16px;
        height: 16px;
    }

.bp-btn-primary {
    background: var(--purple);
    color: #fff;
}

    .bp-btn-primary:hover, .bp-btn-primary:focus {
        background: #473c85;
        color: #fff;
        text-decoration: none;
    }

.bp-btn-secondary {
    background: var(--orange);
    color: #fff;
}

    .bp-btn-secondary:hover, .bp-btn-secondary:focus {
        background: #da5b3c;
        color: #fff;
        text-decoration: none;
    }

.bp-btn-block {
    width: 100%;
}

.bp-link {
    font-family: 'allerregular';
    font-size: 12px;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-300);
    padding-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

    .bp-link:hover {
        color: var(--purple);
        text-decoration: none;
        border-color: var(--purple);
    }

#bp-fechamento .bp-link {
    border-bottom-color: var(--gray-500);
}

.bp-link .chev {
    width: 8px;
    height: 8px;
}

.bp-card-shadow {
    box-shadow: 0 4px 24px rgba(104,104,110,0.10);
}

/* ============ HERO ============ */
#bp-hero {
    background: var(--gray-100);
}
    /* The Figma banner is a fixed 400px-tall box with its content vertically
     centered inside it — `.hero-slide` reproduces that box (instead of
     relying on section padding, which put the decor's 400px band and the
     text/photo content in two different coordinate spaces and left a stray
     gap at the bottom). All vertical spacing for the banner now lives on
     this element, not on `#bp-hero` (which just holds the slide(s)). */
    #bp-hero .hero-slide {
        position: relative;
        min-height: 400px;
        display: flex;
        align-items: center;
    }
    /* Figma keeps the decorative background and text/button static (no
     carousel) - only the photo on the right becomes a 3-photo slider, in
     the exact same rounded box that used to hold a single static image.
     `.hero-photo-slider` reuses the project's generic `data-fade-carousel`
     cross-fade pattern (see `.fc-slide`/`.fc-dots`/`.fc-arrow-btn`, already
     used by Tecnologia/Qualidade) rather than inventing a new mechanism. */
    #bp-hero .hero-photo-wrap {
        text-align: right;
    }

.hero-photo-slider {
    position: relative;
    height: 323px;
}

.hero-photo-slider-clip {
    position: absolute;
    inset: 0;
    border-radius: 150px 8px 150px 8px;
    overflow: hidden;
}

.hero-photo-slider .fc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

    .hero-photo-slider .fc-slide.active {
        opacity: 1;
    }

    .hero-photo-slider .fc-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
/* Unlike the other sliders, the hero box's big 150px cut corner sits at
     the BOTTOM-RIGHT (not top-right), so the generic right:24px control row
     would land the "next" arrow right at the edge of that curve. Figma
     keeps the whole controls row at a fixed 381px width from the left
     instead of stretching to the right edge, clearing the cut - scoped to
     >=992px since that width was measured against the desktop box's exact
     537px size (at narrower breakpoints the box is a different width and
     the generic right:24px is a safe enough fallback). */
@media (min-width:992px) {
    body{
        padding:0;
    }
    .hero-photo-slider .fc-controls {
        left: 24px;
        right: auto;
        width: 381px;
        bottom: 15px;
    }
}
/* Decorative vectors exported from Figma (real assets, not CSS-simulated shapes):
     hero-ellipse-purple/-gray = the two soft radial ellipses bleeding from the
     banner corners; hero-heart-vector = the heart+cross outline near the photo.
     `.hero-decor` used to be capped at max-width:1280px (the Figma frame's own
     width), so on any viewport wider than that the clip box stopped short of
     the screen edges and left flat, undecorated background on both sides.
     It now spans the full viewport and clips there instead, while
     `.hero-decor-inner` reproduces the old 1280px-centered box as the
     positioning anchor - so the ellipses/heart keep the exact coordinates
     Figma gives them (relative to that 1280px frame) but are free to bleed
     into the wider margins instead of being hard-cropped at 1280px. */
#bp-hero .hero-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

#bp-hero .hero-decor-inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1280px;
    height: 100%;
}

#bp-hero .hero-ellipse-purple {
    position: absolute;
    width: 959px;
    height: 923px;
    left: 640px;
    top: 146px;
}

#bp-hero .hero-ellipse-gray {
    position: absolute;
    width: 959px;
    height: 923px;
    left: -387px;
    top: -400px;
}

#bp-hero .hero-heart {
    position: absolute;
    width: 737px;
    height: 570px;
    left: 458px;
    top: 1px;
    transform: scaleX(-1);
}

#bp-hero .hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ============ SERVIÇOS ============ */
#bp-servicos {
    background: #fff;
    padding: 0 0 56px;
    margin-top: -1px;
}

    #bp-servicos .servicos-box {
        background: #fff;
        border-radius: 8px;
        padding: 50px 48px;
        text-align: center;
    }

.bp-service-card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 11px rgba(104,104,110,0.08);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 94px;
    margin-bottom: 14px;
    text-decoration: none;
    color: inherit;
    transition: background .2s ease;
}
    /* Hover: the whole card fills with the brand purple and its icon swaps
     to a pre-recolored asset (orange circle, white glyph) - a plain CSS
     filter can't reliably turn an arbitrary purple SVG white, so this
     swaps in a dedicated hover SVG per icon instead (same shapes, just
     recolored, matching the reference screenshot the user supplied). */
    .bp-service-card:hover, .bp-service-card:focus {
        background: var(--purple);
        text-decoration: none;
    }

        .bp-service-card:hover h3, .bp-service-card:focus h3,
        .bp-service-card:hover p, .bp-service-card:focus p {
            color: #fff;
        }

    .bp-service-card img {
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
    }

    .bp-service-card h3 {
        font-family: 'allerbold';
        font-size: 13px;
        color: var(--purple);
        margin: 0 0 6px;
        line-height: 1.4;
    }

    .bp-service-card p {
        font-family: 'allerregular';
        font-size: 11px;
        color: var(--gray-600);
        margin: 0;
        line-height: 1.4;
    }

/* ============ PROPOSTA DE VALOR ============ */
#bp-proposta {
    background: #f6f6fb;
    padding: 56px 0;
}
    /* Figma gap between the photo and the text column is 70px. */
    #bp-proposta .proposta-text-col {
        padding-right: 35px;
    }

    #bp-proposta .proposta-media-col {
        padding-left: 35px;
    }
/* Figma replaced the 3-photo fade carousel here with a single static
     "humanized" photo (no dots/arrows) - same rounded-corner treatment
     (8px 150px 8px 8px) as before, just no carousel machinery. */
.proposta-photo {
    position: relative;
    border-radius: 8px 150px 8px 8px;
    overflow: hidden;
    height: 400px;
}

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

.bp-fade-carousel {
    position: relative;
    border-radius: 8px 150px 8px 8px;
    overflow: hidden;
    height: 340px;
    background: #d9d9d9;
}

    .bp-fade-carousel .fc-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity .5s ease;
    }

        .bp-fade-carousel .fc-slide.active {
            opacity: 1;
        }

        .bp-fade-carousel .fc-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: bottom;
        }

    .bp-fade-carousel .fc-controls,
    .acomo-main-wrap .fc-controls,
    .hero-photo-slider .fc-controls {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 18px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .bp-fade-carousel .fc-dots span,
    .acomo-main-wrap .fc-dots span,
    .hero-photo-slider .fc-dots span {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255,255,255,.55);
        margin-right: 6px;
        cursor: pointer;
    }

        .bp-fade-carousel .fc-dots span.active,
        .acomo-main-wrap .fc-dots span.active,
        .hero-photo-slider .fc-dots span.active {
            background: #fff;
        }

    .bp-fade-carousel .fc-arrows,
    .acomo-main-wrap .fc-arrows,
    .hero-photo-slider .fc-arrows {
        display: flex;
        gap: 10px;
    }

.fc-arrow-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    font-family: 'allerbold';
    color: var(--purple);
    font-size: 14px;
    cursor: pointer;
}

/* ============ ESPECIALIDADES ============ */
/* Real Figma background: solid orange base + a purple->orange gradient
     ellipse bleeding from the right, plus a faint heart/cross line-art vector
     near the bottom (both exported straight from Figma, not CSS-simulated). */
#bp-especialidades {
    background: var(--orange);
    padding: 60px 0;
}
    /* `.esp-decor` used to cap at max-width:1280px (the Figma frame's own
     width) itself, so on wider screens (fullHD and up) the clip box fell
     short of the viewport edges, cutting the ellipse/vector's bleed off
     early instead of letting it reach the edge - same issue the hero decor
     had. It now spans the full viewport, while `.esp-decor-inner`
     reproduces the old 1280px-centered box as the anchor so the vectors
     keep Figma's exact coordinates. */
    #bp-especialidades .esp-decor {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    #bp-especialidades .esp-decor-inner {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1280px;
        height: 100%;
    }

    #bp-especialidades .esp-bg-ellipse {
        position: absolute;
        width: 724px;
        height: 930px;
        left: 642px;
        top: 50%;
        transform: translateY(-50%);
    }

    #bp-especialidades .esp-bg-vector {
        position: absolute;
        width: 870px;
        height: 679px;
        left: 499px;
        bottom: -170px;
        opacity: .9;
    }

    #bp-especialidades .container-narrow {
        position: relative;
        z-index: 1;
    }

    #bp-especialidades .esp-heading {
        color: var(--gray-100);
        font-family: 'allerbold';
        font-size: 28px;
        line-height: 1.3;
        margin: 0 0 32px;
    }

    #bp-especialidades .esp-eyebrow {
        color: #fce6df;
    }

.esp-slider-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}
/* Figma shows exactly 2 cards per page, with the next/prev arrows sitting
     right after the second card - not a sliver of a third card peeking in.
     flex:1 alone stretched this viewport to fill the whole col-md-8 column
     (wider than 2 cards need), which let a third card's edge show through.
     Capping it at exactly 2 cards + the gap between them (matches the
     médicos slider's .med-track-viewport, which already does this) fixes it. */
.esp-track-viewport {
    overflow: hidden;
    flex: 1;
    max-width: 568px;
}

.esp-track {
    display: flex;
    gap: 16px;
    transition: transform .4s ease;
}

.esp-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    width: 276px;
    flex: 0 0 276px;
    display: flex;
    flex-direction: column;
}

    .esp-card .esp-photo {
        height: 181px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

        .esp-card .esp-photo:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(243,112,83,.2), rgba(56,46,127,.2));
        }

    .esp-card .esp-body {
        padding: 24px;
        border: 1px solid var(--gray-200);
        border-top: none;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .esp-card h3 {
        font-family: 'allerbold';
        font-size: 16px;
        color: var(--purple);
        margin: 0 0 12px;
    }

    .esp-card p {
        font-family: 'allerregular';
        font-size: 14px;
        color: var(--gray-600);
        line-height: 1.5;
        margin: 0;
        flex: 1;
    }

.esp-arrow-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.esp-card .esp-arrow-link {
    margin-top: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    text-decoration: none;
    font-size: 16px;
}

#bp-especialidades .esp-dots {
    text-align: center;
    margin-top: 24px;
}

    #bp-especialidades .esp-dots span {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,.4);
        margin: 0 4px;
        cursor: pointer;
    }

        #bp-especialidades .esp-dots span.active {
            background: #fff;
        }

/* ============ JORNADA ============ */
#bp-jornada {
    background: #fff;
    padding: 60px 0;
}

.jornada-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.jornada-track {
    height: 3px;
    background: #eaeafa;
    position: relative;
    margin-bottom: 24px;
}

    .jornada-track .dot {
        position: absolute;
        top: -5.5px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--purple);
    }

.jornada-step {
    width: 20%;
    float: left;
    padding-right: 16px;
}

    .jornada-step .num {
        font-family: 'allerlight';
        font-size: 28px;
        color: var(--purple);
        display: block;
    }

    .jornada-step .title {
        font-family: 'allerregular';
        font-size: 16px;
        color: var(--purple);
        margin: 6px 0;
        display: block;
    }

    .jornada-step .desc {
        font-family: 'allerregular';
        font-size: 12.5px;
        color: var(--gray-600);
        line-height: 1.5;
    }

/* ============ MÉDICOS ============ */
/* Figma left-aligns the eyebrow/heading/intro here (unlike the "Conheça os
     serviços" block above, which IS centered) - only the pills row and the
     card carousel below are centered as their own groups. text-align:center
     used to sit on the section itself, which also centered (and, via
     .med-intro's max-width:800px, force-wrapped to 2 lines) the intro text
     that Figma shows left-aligned on a single line. */
#bp-medicos {
    background: var(--gray-100);
    padding: 60px 0;
}

    #bp-medicos .med-intro {
        margin: 0 0 28px;
    }

    #bp-medicos .med-pills {
        text-align: center;
    }

.med-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    border-radius: 200px;
    background: #eaeafa;
    color: var(--purple);
    font-family: 'allerbold';
    font-size: 14px;
    margin: 0 6px 10px;
    border: none;
    cursor: pointer;
}

    .med-pill.active {
        background: var(--purple);
        color: #fff;
    }

.med-slider-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    margin-top: 20px;
}

.med-track-viewport {
    overflow: hidden;
    max-width: 1065px;
}

.med-track {
    display: flex;
    gap: 16px;
    transition: transform .4s ease;
}
/* Figma (checked against the new Figma file) removed the doctor photo
     from these cards entirely - each card is now a plain white box (no
     shadow) that just holds the name/CRM/specialty/link, sized to fit that
     content instead of stacking under a 306px-tall photo. */
.med-card {
    width: 254px;
    flex: 0 0 254px;
    text-align: left;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 130px;
}

    .med-card .med-name {
        font-family: 'allerbold';
        font-size: 14px;
        color: var(--purple);
        margin: 0 0 6px;
    }

    .med-card .med-crm {
        font-family: 'allerregular';
        font-size: 12px;
        color: var(--gray-900);
        margin: 0 0 6px;
    }

    .med-card .med-spec {
        font-family: 'allerregular';
        font-size: 10.5px;
        color: var(--gray-600);
        margin: 0 0 6px;
    }

    .med-card .med-cv {
        font-family: 'allerregular';
        font-size: 12px;
        color: var(--orange);
        text-decoration: underline;
    }

#bp-medicos .med-dots {
    text-align: center;
    margin-top: 22px;
}

    #bp-medicos .med-dots span {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gray-300);
        margin: 0 4px;
        cursor: pointer;
    }

        #bp-medicos .med-dots span.active {
            background: var(--purple);
        }

#bp-medicos .med-empty {
    display: none;
    max-width: 520px;
    margin: 12px auto 0;
    font-family: 'allerregular';
    font-size: 13px;
    color: var(--gray-600);
    background: #fff;
    border-radius: 8px;
    padding: 20px 24px;
}

    #bp-medicos .med-empty.show {
        display: block;
    }

/* ============ TECNOLOGIA ============ */
/* Figma (node 20197:5618, desktop): a freely absolute-positioned 1280x544
     stage - text top-left, a FIXED 668px card row also anchored left (NOT
     full-width/flex:1), and two 537px photos anchored right that visually
     overlap/sit in FRONT of the card row's top-right corner. That overlap
     can't be faked with a single-column Bootstrap row, so >=992px uses real
     absolute positioning (below); <992px (no dedicated Figma frame for this
     range) falls back to the old stacked flow, and <=575px is the real
     Figma mobile frame (see the MOBILE media query further down). */
#bp-tecnologia {
    background: var(--purple);
    padding: 60px 0;
}
    /* Real Figma decorative vector (heart/cross arc line-art), not a CSS circle.
     Same fullHD fix as the hero: `.tec-decor` spans the full viewport and
     clips there, `.tec-decor-inner` reproduces the old 1280px-centered
     anchor so the arc keeps Figma's exact coordinates but can bleed past
     1280px instead of being hard-cropped there. */
    #bp-tecnologia .tec-decor {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    #bp-tecnologia .tec-decor-inner {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1280px;
        height: 100%;
    }

    #bp-tecnologia .tec-arc {
        position: absolute;
        width: 816px;
        height: 631px;
        left: 594px;
        top: -9.52px;
    }

.tec-text {
    position: relative;
    z-index: 1;
    max-width: 423px;
}

/* Card row: fixed 668px box (3 fixed-220px cards + thin dividers), large
     60px top-right corner, standard 8px on the other three. Stacked/full
     width below 992px (no dedicated card-row corner there), fixed-width row
     with the Figma corner treatment from 992px up. */
.tec-cards-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.tec-card {
    background: #fff;
    padding: 24px;
    width: 100%;
    border-bottom: 1px solid var(--gray-200);
}

    .tec-card:last-child {
        border-bottom: none;
    }

    .tec-card h3 {
        font-family: 'allerregular';
        font-size: 18px;
        line-height: 1.4;
        margin: 0 0 12px;
        background: linear-gradient(90deg,var(--purple) 0%, var(--orange) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--purple);
    }

    .tec-card p {
        font-family: 'allerregular';
        font-size: 12px;
        color: var(--gray-600);
        line-height: 1.4;
        margin: 0;
    }
/* Real Figma divider (Line 5 SVG, rotated 90deg) between desktop cards -
     hidden below 992px, where .tec-card's border-bottom is used instead. */
.tec-card-line {
    display: none;
}

/* Single-photo cross-fade carousel, used below 992px (and, with radius/
     height overrides further down, at the true Figma mobile breakpoint). */
.tec-fade {
    position: relative;
    border-radius: 150px 8px 8px 8px;
    overflow: hidden;
    height: 400px;
}

    .tec-fade .fc-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Desktop two-photo horizontal track (Figma "Frame 1000006669") - hidden
     below 992px in favor of the single-photo .tec-fade above. */
.tec-photos-d {
    display: none;
}

/* ---- Desktop stage (Figma node 20197:5618, >=992px) ----
     The frame is 1280x544.35 with every element absolutely placed; since
     .container-narrow's own 92px side padding already matches the frame's
     x=92 inset, "left" offsets below are Figma-x minus 92 (i.e. relative to
     the padding edge, which is where position:absolute offsets are measured
     from). */
@media (min-width:992px) {
    #bp-tecnologia {
        padding: 0;
    }

        #bp-tecnologia .container-narrow {
            position: relative;
            height: 545px;
            z-index: 1;
        }

    .tec-text {
        position: absolute;
        left: 0;
        top: 65px;
        width: 423px;
    }

    .tec-fade.bp-fade-carousel {
        display: none;
    }

    .tec-photos-d {
        display: block;
        position: absolute;
        left: 549px;
        top: 83px;
        width: 537px;
        height: 400px;
        overflow: hidden;
        z-index: 1;
    }

    .tec-photos-track {
        display: flex;
        width: 1073.78px;
        height: 400px;
        transition: transform .4s ease;
    }

    .tec-mosaic {
        position: relative;
        width: 536.89px;
        height: 400px;
        flex: 0 0 536.89px;
        overflow: hidden;
    }

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

    .tec-mosaic-1 {
        border-radius: 150px 8px 8px 8px;
    }

    .tec-mosaic-2 {
        border-radius: 60px 4px 60px 4px;
    }

        .tec-mosaic-2:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(224deg, rgba(243,112,83,.25) 13%, rgba(56,46,127,.25) 85%);
        }

    .tec-photos-d .fc-controls {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 18px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tec-photos-d .fc-dots span {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255,255,255,.55);
        margin-right: 6px;
        cursor: pointer;
    }

        .tec-photos-d .fc-dots span.active {
            background: #fff;
        }

    .tec-photos-d .fc-arrows {
        display: flex;
        gap: 10px;
    }

    .tec-cards-row {
        flex-direction: row;
        gap: 2px;
        position: absolute;
        left: 0;
        top: 264px;
        width: 668px;
        height: 218px;
        border-radius: 8px 60px 8px 8px;
        margin-top: 0;
        z-index: 2;
    }

    .tec-card {
        width: 220px;
        flex: 0 0 220px;
        border-bottom: none;
    }

    .tec-card-line {
        display: block;
        position: relative;
        width: 0;
        flex: 0 0 auto;
        align-self: center;
    }

        .tec-card-line img {
            position: absolute;
            top: 50%;
            left: 0;
            width: 183px;
            height: 1px;
            transform: translate(-50%,-50%) rotate(90deg);
            display: block;
        }
}

/* ============ ACOMODAÇÕES ============ */
#bp-acomodacoes {
    background: #fff;
    padding: 56px 0;
}
    /* Figma gap between the photo column and the text column is 78.22px -
     Bootstrap's default 30px row gutter is too tight, so it's widened here. */
    #bp-acomodacoes .acomo-media-col {
        padding-right: 39px;
    }

    #bp-acomodacoes .acomo-text-col {
        padding-left: 39px;
    }

.acomo-main-wrap {
    position: relative;
    border-radius: 8px 150px 8px 8px;
    overflow: hidden;
    height: 400px;
}

    .acomo-main-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.acomo-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

    .acomo-thumbs img {
        width: 31%;
        height: 100px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        opacity: .7;
    }

        .acomo-thumbs img.active {
            opacity: 1;
            outline: 2px solid var(--purple);
        }

.amenity-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    width: 50%;
    float: left;
}

    .amenity-chip img {
        width: 21px;
        height: 21px;
    }

    .amenity-chip span {
        font-family: 'allerbold';
        font-size: 12.5px;
        color: var(--gray-600);
    }

.amenities-wrap {
    overflow: hidden;
    margin: 28px 0;
}

.acomo-cta-row {
    display: flex;
    gap: 8px;
}

    .acomo-cta-row > a {
        flex: 1 1 0;
    }

/* ============ PRONTO ATENDIMENTO ============ */
#bp-pronto {
    background: var(--gray-200);
    padding: 60px 0;
}
    /* Real Figma decorative vector (bottom-right line-art), desktop only.
     Same fullHD fix as the hero: `.pronto-decor` spans the full viewport
     and clips there, `.pronto-decor-inner` reproduces the old 1280px-
     centered anchor so the line-art keeps Figma's exact coordinates but
     can bleed past 1280px instead of being hard-cropped there. */
    #bp-pronto .pronto-decor {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    #bp-pronto .pronto-decor-inner {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1280px;
        height: 100%;
    }

    #bp-pronto .pronto-grafismo {
        position: absolute;
        width: 986px;
        height: 763px;
        left: 823px;
        bottom: -31px;
    }

    #bp-pronto .container-narrow {
        position: relative;
        z-index: 1;
    }
/* Badges: icon + bold label directly on the section background - Figma has
     no white box/shadow behind them here (unlike the Serviços cards). */
.pronto-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    margin: 0 24px 0 0;
    float: left;
}

    .pronto-badge img {
        width: 20px;
        height: 20px;
    }

    .pronto-badge span {
        font-family: 'allerbold';
        font-size: 12.5px;
        color: var(--gray-600);
        white-space: nowrap;
    }

.pronto-badges-wrap {
    overflow: hidden;
    margin: 20px 0;
}

.pronto-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

    .pronto-card img {
        width: 100%;
        height: 222px;
        object-fit: cover;
    }

    .pronto-card .pc-body {
        padding: 20px;
    }

    .pronto-card .pc-title {
        font-family: 'allerbold';
        font-size: 13px;
        color: var(--purple);
        margin: 0 0 10px;
    }

    .pronto-card .pc-address {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }

        .pronto-card .pc-address img {
            width: 20px;
            height: 20px;
            flex: 0 0 auto;
        }

        .pronto-card .pc-address .street {
            font-family: 'allerregular';
            font-size: 11px;
            color: var(--orange);
            display: block;
        }

        .pronto-card .pc-address .comp {
            font-family: 'allerregular';
            font-size: 11px;
            color: var(--gray-600);
        }

    .pronto-card .pc-actions {
        display: flex;
        gap: 10px;
    }

.btn-pronto-fill {
    background: var(--orange);
    color: #fff;
    border-radius: 256px;
    padding: 7px 16px;
    font-family: 'allerregular';
    font-size: 10px;
    text-decoration: none;
}

.btn-pronto-outline {
    border: 1px solid var(--orange);
    color: var(--orange);
    border-radius: 256px;
    padding: 7px 16px;
    font-family: 'allerregular';
    font-size: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-pronto-outline img {
        width: 14px;
        height: 14px;
    }

/* ============ QUALIDADE ============ */
#bp-qualidade {
    background: linear-gradient(90deg, var(--purple) 0%, var(--orange) 100%);
    padding: 60px 0;
}

    #bp-qualidade .qual-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 24px;
    }

.cert-card {
    background: var(--gray-200);
    border-radius: 8px;
    padding: 24px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    flex: 1 1 200px;
}

    .cert-card .cert-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .cert-card .cert-name {
        font-family: 'allerregular';
        font-size: 15px;
        color: var(--gray-600);
    }

    .cert-card .cert-arrow {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--gray-100);
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
    }
    /* align-items:flex-start above stops flexbox's default cross-axis stretch
     from distorting these logos sideways; each keeps its own natural aspect
     ratio (object-fit:contain as a safety net) instead of a uniform height. */
    .cert-card img.seal {
        width: auto;
        max-width: 100%;
        object-fit: contain;
        opacity: .7;
        mix-blend-mode: multiply;
        flex: 0 0 auto;
    }
/* Figma replaces the single static photo here with a 2-mosaic sliding
     track + dots/arrows - the same pattern used by Tecnologia's desktop
     photo track further down (`.tec-photos-d`/`.tec-mosaic`), just using
     percentage-based flex slides (instead of a fixed 536.89px stage) so the
     same markup works at every breakpoint (no separate mobile fallback
     needed) even though, like Tecnologia, it becomes an absolutely
     positioned overlap stage at >=992px (see that media query below) so
     the certification cards can overlap its left edge as Figma shows. */
#bp-qualidade .qual-track-viewport {
    position: relative;
    overflow: hidden;
    height: 340px;
}

#bp-qualidade .qual-track {
    display: flex;
    height: 100%;
    transition: transform .4s ease;
}

#bp-qualidade .qual-mosaic {
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
}

    #bp-qualidade .qual-mosaic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

#bp-qualidade .qual-mosaic-1 {
    border-radius: 150px 8px 8px 8px;
}

#bp-qualidade .qual-mosaic-2 {
    border-radius: 60px 4px 60px 4px;
}

    #bp-qualidade .qual-mosaic-2:after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(224deg, rgba(243,112,83,.25) 13%, rgba(56,46,127,.25) 85%);
    }

#bp-qualidade .qual-track-viewport .fc-controls {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#bp-qualidade .qual-track-viewport .fc-dots span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    margin-right: 6px;
    cursor: pointer;
}

    #bp-qualidade .qual-track-viewport .fc-dots span.active {
        background: #fff;
    }

#bp-qualidade .qual-track-viewport .fc-arrows {
    display: flex;
    gap: 10px;
}
/* >=992px: reproduce Figma's overlap exactly via absolute positioning
     (same technique as Tecnologia's `.tec-text`/`.tec-photos-d` further
     down) - the certification badges row is wider than the text column and
     deliberately bleeds over the photo's left edge, so it needs a z-index
     above the photo and can't be constrained inside a normal Bootstrap
     column. Numbers are Figma's own coordinates minus the container's
     92px side padding. */
@media (min-width:992px) {
    #bp-qualidade .container-narrow {
        position: relative;
        height: 400px;
    }
    /* `.qual-text` is still a Bootstrap column (col-md-6) underneath, so it
       keeps Bootstrap's own 15px column padding even once absolutely
       positioned - left uncleared, that padding shifted its text 15px to
       the right of `.qual-badges` below it (a plain div, no such padding),
       breaking the left edge alignment Figma has between the two. */
    #bp-qualidade .qual-text {
        position: absolute;
        left: 24px;
        top: 55px;
        width: 454px;
        margin-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    /* Bootstrap's grid mixin puts position:relative on every .col-xs-*, so
       `.qual-badges-col` (col-xs-12) was its own positioning context -
       `.qual-badges` (position:absolute) was anchoring to THAT column
       instead of bubbling up to `.container-narrow`, landing well right of
       where left:24px was supposed to put it. Neutralizing it here restores
       `.container-narrow` as the containing block for both. */
    #bp-qualidade .qual-badges-col {
        position: static;
    }

    #bp-qualidade .qual-badges {
        position: absolute;
        left: 24px;
        top: 196px;
        width: 676px;
        z-index: 2;
        flex-wrap: nowrap;
        margin-top: 0;
    }

        #bp-qualidade .qual-badges .cert-card {
            width: 220px;
            flex: 0 0 220px;
        }

    #bp-qualidade .qual-photo-col {
        position: absolute;
        left: 535px;
        top: 0;
        width: 537px;
        margin-top: 0;
    }

    #bp-qualidade .qual-track-viewport {
        height: 400px;
    }
}

/* ============ CONVÊNIOS ============ */
#bp-convenios {
    background: #f2f1f9;
    padding: 60px 0;
}
    /* Figma gap between the text column and the cards column is 84px. */
    #bp-convenios .conv-text-col {
        padding-right: 42px;
    }

    #bp-convenios .conv-cards-col {
        padding-left: 42px;
    }

.conv-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(104,104,110,0.08);
}

    .conv-card .conv-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .conv-card .conv-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

        .conv-card .conv-left img {
            width: 24px;
            height: 24px;
        }

        .conv-card .conv-left span {
            font-family: 'allerregular';
            font-size: 16px;
            color: var(--purple);
        }

    .conv-card p {
        font-family: 'allerregular';
        font-size: 14px;
        color: var(--gray-500);
        margin: 12px 0 0;
    }

/* ============ HUB SAÚDE (stats) ============ */
#bp-hub {
    background: #fff;
    padding: 60px 0;
}
    /* Real Figma decorative vector (the same heart/cross line-art "grafismo BP
     MIRANTE" used elsewhere on the page) - it was previously approximated
     with a plain CSS circle outline; replaced with the actual exported asset. */
    /* Same fullHD fix as the hero: `.hub-decor` spans the full viewport and
     clips there, `.hub-decor-inner` reproduces the old 1280px-centered
     anchor so the arc keeps Figma's exact coordinates but can bleed past
     1280px instead of being hard-cropped there. */
    #bp-hub .hub-decor {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    #bp-hub .hub-decor-inner {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1280px;
        height: 100%;
    }

    #bp-hub .hub-arc {
        position: absolute;
        width: 795px;
        height: 615px;
        right: -450px;
        top: -147px;
    }

    #bp-hub .container-narrow {
        position: relative;
        z-index: 1;
    }

.hub-stats {
    border-left: 1px solid var(--gray-300);
    padding-left: 40px;
}

.hub-stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 0;
    color: var(--purple);
}

    .hub-stat .stat-num {
        font-family: 'allerbold';
        font-size: 28px;
        white-space: nowrap;
    }

    .hub-stat .stat-desc {
        font-family: 'allerregular';
        font-size: 14px;
    }

/* ============ ESCOLHA SEGURA ============ */
#bp-fechamento {
    background: var(--gray-100);
    padding: 60px 0;
}
    /* Real Figma decorative vectors (two soft radial ellipses), not a plain
     CSS radial-gradient circle. */
    /* Same fullHD fix as the hero: `.fech-decor` spans the full viewport and
     clips there, `.fech-decor-inner` reproduces the old 1280px-centered
     anchor so the ellipses keep Figma's exact coordinates but can bleed
     past 1280px instead of being hard-cropped there. */
    #bp-fechamento .fech-decor {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    #bp-fechamento .fech-decor-inner {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1280px;
        height: 100%;
    }

    #bp-fechamento .fech-blob-large {
        position: absolute;
        width: 1666px;
        height: 1238px;
        left: -339px;
        top: -50px;
    }

    #bp-fechamento .fech-blob-purple {
        position: absolute;
        width: 959px;
        height: 923px;
        left: -405px;
        top: -479px;
    }

    #bp-fechamento .container-narrow {
        position: relative;
        z-index: 1;
    }

.fech-photo {
    border-radius: 8px 150px 8px 8px;
    overflow: hidden;
    height: 401px;
}

    .fech-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ============ FAQ ============ */
#bp-faq {
    background: #fff;
    padding: 60px 0;
}

.faq-item {
    border-bottom: 1px solid var(--gray-300);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}
    /* Figma distinguishes the open question by font WEIGHT (bold vs regular),
     not a darker text color - both states use the same gray-600. */
    .faq-question span {
        font-family: 'allerregular';
        font-size: 16px;
        color: var(--gray-600);
    }

.faq-item.open .faq-question span {
    font-family: 'allerbold';
}

.faq-question img {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.faq-item.open .faq-question img {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 0 0 21px;
}

    .faq-answer p {
        font-family: 'allerregular';
        font-size: 14px;
        color: #505050;
        margin: 0;
    }

.faq-item.open .faq-answer {
    display: block;
}

/* ============ RESPONSIVE ============ */
@media (max-width:991px) {
    #bp-mirante-miolo .container-narrow {
        padding-left: 32px;
        padding-right: 32px;
    }

    #bp-acomodacoes .acomo-media-col, #bp-acomodacoes .acomo-text-col {
        padding-left: 15px;
        padding-right: 15px;
    }

    #bp-hero .hero-photo-wrap {
        text-align: center;
        margin-top: 28px;
    }

    #bp-convenios .conv-text-col, #bp-convenios .conv-cards-col {
        padding-left: 15px;
        padding-right: 15px;
    }

    #bp-convenios .conv-cards-col {
        margin-top: 24px;
    }

    #bp-proposta .proposta-text-col, #bp-proposta .proposta-media-col {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hub-stats {
        border-left: none;
        padding-left: 0;
        margin-top: 28px;
    }

    .jornada-step {
        width: 33.33%;
        margin-bottom: 24px;
    }
}

@media (max-width:767px) {
    #bp-mirante-miolo .container-narrow {
        padding-left: 20px;
        padding-right: 20px;
    }

    .bp-heading {
        font-size: 22px;
    }

        .bp-heading.hero {
            font-size: 26px;
        }

    #bp-especialidades .esp-heading {
        font-size: 22px;
    }

    #bp-hero .hero-slide {
        min-height: 0;
        display: block;
        padding: 36px 0;
    }

    #bp-hero .hero-heart {
        display: none;
    }

    #bp-servicos .servicos-box {
        padding: 28px 16px;
    }

    .bp-service-card {
        flex-direction: row;
    }

    #bp-proposta, #bp-especialidades, #bp-jornada, #bp-medicos, #bp-tecnologia,
    #bp-acomodacoes, #bp-pronto, #bp-qualidade, #bp-convenios, #bp-hub, #bp-fechamento, #bp-faq {
        padding-top: 40px;
        padding-bottom: 40px;
    }

        .bp-fade-carousel, .tec-fade, .proposta-photo, #bp-qualidade .qual-track-viewport, .hero-photo-slider {
            height: 240px;
        }

    .esp-card {
        width: 240px;
        flex: 0 0 240px;
    }

    .esp-track-viewport {
        max-width: 496px;
    }

    .med-card {
        width: 200px;
        flex: 0 0 200px;
    }

    .tec-cards-row {
        box-shadow: none;
    }

    .amenity-chip {
        width: 100%;
        float: none;
    }
    /* Figma stacks the two acomodações CTAs full-width on mobile instead of
       side by side - side-by-side (the desktop layout) overflows the 375px
       frame because the buttons' nowrap text can't shrink below its
       intrinsic width in a flex row. */
    .acomo-cta-row {
        flex-direction: column;
    }

    .pronto-badge {
        float: none;
        margin-right: 0;
    }

    .jornada-head {
        flex-direction: column;
    }

    .jornada-step {
        width: 50%;
        margin-bottom: 24px;
    }

    #bp-fechamento .fech-photo {
        margin-bottom: 24px;
    }
}

@media (max-width:480px) {
    .esp-slider-wrap, .med-slider-wrap {
        gap: 6px;
    }

    .fc-arrow-btn {
        width: 28px;
        height: 28px;
    }
}

/* ============ MOBILE (Figma "Página BP Mirante - Mobile", 375px) ============ */
@media (max-width:575px) {
    #bp-mirante-miolo .container-narrow {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* The `-decor-inner` wrappers (hero/especialidades/fechamento) anchor
       their vectors to a 1280px-wide centered box so they can bleed past it
       on wide screens (see each one's own comment further up). But the
       coordinates these three sections override right below were measured
       directly against the real ~375px mobile frame, not against that
       1280px anchor - left uncentered here, the anchor's own offset
       (roughly -450px at this width) would double up with those numbers
       and push everything off-screen. Resetting the inner wrapper to match
       the outer 1:1 at this breakpoint restores that direct mapping. */
    #bp-hero .hero-decor-inner,
    #bp-especialidades .esp-decor-inner,
    #bp-fechamento .fech-decor-inner {
        left: 0;
        width: 100%;
        transform: none;
    }

    /* ---- Hero ---- */
    #bp-hero .hero-slide {
        padding: 32px 0;
    }

    #bp-hero .bp-eyebrow {
        font-size: 10px;
    }

    #bp-hero .bp-heading.hero {
        font-size: 28px;
    }

    #bp-hero .bp-text {
        font-size: 11px;
    }
    /* Figma mobile banner is 500px tall total (text + photo together, not
       just a top decorative strip) and the heart vector peeks in right at
       the photo's top-left corner - not up near the headline - so the
       decor layer has to reach down that far or the heart gets clipped
       away almost entirely. */
    #bp-hero .hero-decor {
        height: 520px;
    }

    #bp-hero .hero-ellipse-purple {
        width: 667px;
        height: 642px;
        left: auto;
        right: -30px;
        top: 180px;
    }

    #bp-hero .hero-ellipse-gray {
        width: 567px;
        height: 546px;
        left: -160px;
        top: -260px;
    }
    /* display:block re-asserted here: the 767px breakpoint above sets
       display:none on this element and, since that rule never gets
       overridden by width/height/position alone, it would otherwise stay
       hidden at the true 375px mobile frame too. Top is aligned to sit
       right at the photo's top edge (matching Figma, where the heart top
       and the photo top are almost flush) instead of up near the headline. */
    #bp-hero .hero-heart {
        display: block;
        width: 398px;
        height: 308px;
        left: 50%;
        top: 280px;
        transform: translateX(-50%) scaleX(-1);
    }

    #bp-hero .hero-photo-wrap {
        margin-top: 20px;
    }

    .hero-photo-slider-clip {
        border-radius: 70px 6px 70px 6px;
    }

    /* ---- Serviços: cards on plain background, no outer card panel ---- */
    #bp-servicos .servicos-box {
        background: none;
        box-shadow: none;
        padding: 0;
        text-align: center;
    }

        #bp-servicos .servicos-box > .bp-heading {
            font-size: 18px;
        }

        #bp-servicos .servicos-box > p {
            font-size: 12px;
        }

    .bp-service-card {
        border-radius: 4px;
        box-shadow: 0 4px 11px rgba(104,104,110,0.08);
        padding: 12px 16px;
        height: 80px;
    }

        .bp-service-card h3 {
            font-size: 12px;
            text-align: left;
        }

        .bp-service-card p {
            font-size: 10px;
            text-align: left;
        }

    /* ---- Proposta de valor / Tecnologia fade carousels ---- */
    .bp-fade-carousel, .tec-fade, .proposta-photo, #bp-qualidade .qual-track-viewport, .hero-photo-slider {
        height: 220px;
    }

    /* ---- Especialidades: horizontal scroll, compact cards ---- */
    #bp-especialidades .esp-decor {
        max-width: 375px;
    }
    /* left/top solved so that, after the 90deg rotation around the image's
       own center, the resulting (rotated) bounding box lands exactly where
       Figma's mobile frame places it: a 930x724 box at left:-277px,
       top:292px relative to the section. */
    #bp-especialidades .esp-bg-ellipse {
        width: 724px;
        height: 930px;
        left: -174px;
        top: 189px;
        transform: rotate(90deg);
    }

    #bp-especialidades .esp-bg-vector {
        width: 509px;
        height: 409px;
        left: 8px;
        bottom: auto;
        top: 300px;
    }

    .esp-slider-wrap {
        gap: 0;
    }

        .esp-slider-wrap .fc-arrow-btn {
            display: none;
        }

    .esp-track-viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: none;
    }

    .esp-card {
        width: 163px;
        flex: 0 0 163px;
        border-radius: 5px;
    }

        .esp-card .esp-photo {
            height: 109px;
        }

        .esp-card .esp-body {
            padding: 12px;
        }

        .esp-card h3 {
            font-size: 12px;
            margin-bottom: 8px;
        }

        .esp-card p {
            font-size: 11px;
        }

        .esp-card .esp-arrow-link {
            width: 34px;
            height: 34px;
            margin-top: 12px;
        }

    #bp-especialidades .esp-heading {
        font-size: 20px;
    }

    /* ---- Jornada: vertical timeline, CTA moves to the bottom ---- */
    .jornada-track {
        display: none;
    }

    .jornada-head {
        margin-bottom: 24px;
    }

    .jornada-step {
        width: 100%;
        float: none;
        padding-right: 0;
        padding-left: 26px;
        position: relative;
        margin-bottom: 22px;
        border-left: 2px solid #eaeafa;
    }

        .jornada-step:last-child {
            border-left-color: transparent;
            margin-bottom: 0;
        }

        .jornada-step:before {
            content: '';
            position: absolute;
            left: -7px;
            top: 2px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--purple);
        }

        .jornada-step .num {
            display: inline-block;
            vertical-align: middle;
            font-size: 24px;
        }

        .jornada-step .title {
            display: inline-block;
            vertical-align: middle;
            margin: 0 0 0 8px;
            font-size: 15px;
        }

        .jornada-step .desc {
            display: block;
            margin-top: 6px;
        }

    /* ---- Médicos: horizontal scroll pills + cards, no arrows ---- */
    #bp-medicos .med-pills {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        text-align: left;
        padding-bottom: 4px;
    }

        #bp-medicos .med-pills .med-pill {
            display: inline-flex;
            width: 130px;
            height: 40px;
            margin: 0 8px 0 0;
            padding: 0;
        }

    .med-slider-wrap {
        gap: 0;
    }

        .med-slider-wrap .fc-arrow-btn {
            display: none;
        }

    .med-track-viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: none;
    }

    .med-card {
        width: 254px;
        flex: 0 0 254px;
    }

    /* ---- Tecnologia: no raised card row, subtle accent corners ---- */
    /* Figma's mobile "Tecnologia" frame has no background arc vector. */
    #bp-tecnologia .tec-decor {
        display: none;
    }

    .tec-fade {
        border-radius: 60px 0 0 0;
    }

    .tec-cards-row {
        border-radius: 0 0 60px 0;
        overflow: hidden;
    }

    /* ---- Pronto Atendimento: plain icon rows, full-width CTA ---- */
    .pronto-badge {
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 8px 0;
        float: none;
        width: 100%;
        margin: 0;
    }

    #bp-pronto .pronto-badges-wrap {
        margin: 16px 0;
    }

    #bp-pronto .pronto-cta {
        width: 100%;
    }

    /* ---- Fechamento: photo now sits below the CTA/links ---- */
    #bp-fechamento .fech-photo {
        margin-bottom: 0;
    }
    /* Mobile coordinates confirmed via Figma node 20397:31598: same two
       ellipse assets as desktop (identical width/height), just repositioned
       - no rotation needed here (unlike the hero/especialidades vectors). */
    #bp-fechamento .fech-blob-large {
        left: -187px;
        top: 190px;
    }

    #bp-fechamento .fech-blob-purple {
        left: -667px;
        top: -412px;
    }

    /* ---- Convênios: link now sits below the description, matching Figma mobile order ---- */
    .conv-card {
        display: flex;
        flex-direction: column;
    }

        .conv-card .conv-top {
            display: contents;
        }

        .conv-card .conv-left {
            order: 1;
        }

        .conv-card p {
            order: 2;
            margin-top: 8px;
        }

        .conv-card .bp-link {
            order: 3;
            margin-top: 4px;
        }

    /* ---- Hub: horizontal divider between text and stats, per Figma mobile ---- */
    .hub-stats {
        border-top: 1px solid var(--gray-300);
        padding-top: 24px;
        margin-top: 24px;
    }
    /* Figma's mobile "sobre a bp" frame has no background grafismo vector. */
    #bp-hub .hub-decor {
        display: none;
    }
}