/* =========================================================
   ROOT
========================================================= */

:root {

    --blue: #01395E;
    --blue-dark: #022B47;
    --blue-deep: #01293F;

    --green: #015E47;
    --green-dark: #014635;
    --green-light: #E6F0EC;

    --cream: #F1EEE7;
    --cream-2: #E8E3DA;

    --paper: #FAF9F6;

    --white: #FFFFFF;

    --text: #182229;
    --muted: #69747B;

    --line: rgba(1, 57, 94, .10);

    --whatsapp: #25D366;
    --whatsapp-dark: #1DBE5C;

    --radius: 28px;

    --shadow:
        0 24px 70px rgba(1, 57, 94, .12);

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: 'Nunito', sans-serif;

    background:
        var(--paper);

    color:
        var(--text);

    overflow-x: hidden;

}


body.menu-open {
    overflow: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


img {
    display: block;
    max-width: 100%;
}


svg {
    display: block;
}


.container {

    width:
        min(1180px, calc(100% - 40px));

    margin:
        0 auto;

}


.section-pad {
    padding:
        110px 0;
}


/* =========================================================
   LOADER
========================================================= */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 50% 45%,
            #015E47 0%,
            #01395E 55%,
            #012D4B 100%
        );

    transition:
        opacity .7s ease,
        visibility .7s ease;

}


.page-loader.hidden {

    opacity: 0;

    visibility: hidden;

}


.loader-content {

    width: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    animation:
        loaderBreath 1.9s ease-in-out infinite;

}


.loader-logo {

    width: 100%;

    max-height: 105px;

    object-fit: contain;

    filter:
        brightness(0) invert(1);

}


.loader-line {

    display: block;

    width: 0;

    height: 1px;

    margin-top: 24px;

    background:
        rgba(255, 255, 255, .65);

    animation:
        loaderLine 1.3s .2s ease forwards;

}


@keyframes loaderBreath {

    0%,
    100% {

        opacity: .82;

        transform:
            scale(1);

    }

    50% {

        opacity: 1;

        transform:
            scale(1.04);

    }

}


@keyframes loaderLine {

    to {
        width: 92px;
    }

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position: fixed;

    inset:
        0 0 auto 0;

    z-index: 1000;

    padding:
        20px 0;

    transition:
        background .35s ease,
        padding .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease;

}


.site-header.scrolled {

    padding:
        10px 0;

    background:
        rgba(250, 249, 246, .94);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 10px 35px rgba(1, 57, 94, .09);

}


.nav-wrap {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* LOGO */

.brand {

    display: inline-flex;

    align-items: center;

    position: relative;

    z-index: 1100;

}


.header-logo {

    width: 165px;

    max-height: 65px;

    object-fit: contain;

    filter:
        brightness(0) invert(1);

    transition:
        width .3s ease,
        transform .3s ease,
        filter .3s ease;

}


.brand:hover .header-logo {

    transform:
        scale(1.025);

}


.site-header.scrolled
.header-logo {

    width: 145px;

    filter:
        none;

}


/* NAV */

.main-nav {

    display: flex;

    align-items: center;

    gap: 28px;

}


.main-nav > a:not(.nav-cta) {

    position: relative;

    color:
        rgba(255, 255, 255, .92);

    font-size: .88rem;

    font-weight: 600;

    transition:
        color .25s ease;

}


.site-header.scrolled
.main-nav > a:not(.nav-cta) {

    color:
        #40505A;

}


.main-nav > a:not(.nav-cta)::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 100%;

    height: 1px;

    background:
        var(--green);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform .3s ease;

}


.main-nav > a:not(.nav-cta):hover::after {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.nav-cta {

    min-height: 46px;

    padding:
        0 19px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    border-radius:
        999px;

    background:
        var(--whatsapp);

    color:
        var(--white);

    font-size:
        .84rem;

    font-weight:
        700;

    box-shadow:
        0 10px 25px rgba(37, 211, 102, .22);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.nav-cta:hover {

    transform:
        translateY(-2px);

    background:
        var(--whatsapp-dark);

    box-shadow:
        0 14px 30px rgba(37, 211, 102, .3);

}


/* MOBILE MENU BUTTON */

.menu-toggle {

    display: none;

    width: 44px;

    height: 44px;

    border: 0;

    background:
        transparent;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    cursor: pointer;

}


.menu-toggle span {

    width: 25px;

    height: 1.5px;

    background:
        #fff;

    transition:
        transform .3s ease,
        background .3s ease;

}


.site-header.scrolled
.menu-toggle span {

    background:
        var(--blue);

}


/* =========================================================
   ELEMENTOS GERAIS
========================================================= */

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        var(--green);

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .19em;

    text-transform:
        uppercase;

}


.eyebrow::before {

    content: '';

    width: 32px;

    height: 1px;

    background:
        currentColor;

}


.section-heading h2 {

    margin-top:
        20px;

    font-family: 'Nunito', sans-serif;

    font-size:
        clamp(2.8rem, 5vw, 4.7rem);

    line-height:
        1.04;

    letter-spacing:
        -.035em;

    font-weight:
        500;

}


.section-heading > p {

    margin-top:
        20px;

    max-width:
        620px;

    color:
        var(--muted);

    line-height:
        1.85;

}


.section-heading.centered {

    max-width:
        780px;

    margin:
        0 auto 60px;

    text-align:
        center;

}


.section-heading.centered
.eyebrow {

    justify-content:
        center;

}


.section-heading.centered p {

    margin:
        20px auto 0;

}


/* BUTTON */

.btn {

    min-height:
        55px;

    padding:
        0 24px;

    border-radius:
        999px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    font-size:
        .9rem;

    font-weight:
        700;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;

}


.btn svg:not(.whatsapp-icon) {

    width:
        18px;

    height:
        18px;

}


/* WhatsApp */

.whatsapp-icon {

    width:
        20px;

    height:
        20px;

    flex:
        0 0 auto;

    fill:
        currentColor !important;

    stroke:
        none !important;

}


.btn-whatsapp {

    color:
        #fff;

    background:
        var(--whatsapp);

    box-shadow:
        0 15px 35px rgba(37, 211, 102, .25);

}


.btn-whatsapp:hover {

    background:
        var(--whatsapp-dark);

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 42px rgba(37, 211, 102, .32);

}


.btn-primary {

    background:
        var(--green);

    color:
        #fff;

    box-shadow:
        0 14px 30px rgba(1, 94, 71, .18);

}


.btn-primary:hover {

    background:
        var(--blue);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 38px rgba(1, 57, 94, .20);

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height:
        100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    color:
        #fff;

}


.hero-background {

    position: absolute;

    inset:
        -25px;

    z-index:
        0;

    background-image:
        url("./images/hero.jpg");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center 48%;

    transform:
        scale(1.05);

    animation:
        heroZoom 9s ease forwards;

}


@keyframes heroZoom {

    to {
        transform:
            scale(1);
    }

}


.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        90deg,
        rgb(0, 36, 27) 0%,
        rgba(0, 56, 42, 0.86) 35%,
        rgba(1, 94, 71, 0.275) 65%,
        rgba(1, 94, 71, 0.049) 100%
    );
}


.hero-overlay::after {

    content: '';

    position: absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .18),
            transparent 25%,
            transparent 70%,
            rgba(0, 0, 0, .28)
        );

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    padding:
        150px 0 95px;

}


.hero-copy {

    max-width:
        760px;

}


.hero-eyebrow {

    color:
        rgba(255, 255, 255, .82);

}


.hero h1 {

    max-width:
        760px;

    margin:
        28px 0 26px;

    font-family: 'Nunito', sans-serif;

    font-size:
        clamp(4rem, 7vw, 7.2rem);

    font-weight:
        500;

    line-height:
        .93;

    letter-spacing:
        -.045em;

}


.hero h1 em {

    display:
        block;

    color:
        #fff;

    font-weight:
        500;

}


.hero-lead {

    max-width:
        625px;

    color:
        rgba(255, 255, 255, .76);

    font-size:
        1.08rem;

    line-height:
        1.85;

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        36px;

}


.btn-outline-light {

    color:
        #fff;

    border:
        1px solid rgba(255, 255, 255, .38);

    background:
        rgba(255, 255, 255, .06);

    backdrop-filter:
        blur(12px);

}


.btn-outline-light:hover {

    background:
        rgba(255, 255, 255, .14);

    transform:
        translateY(-3px);

}


.btn-outline-light svg {

    transition:
        transform .25s ease;

}


.btn-outline-light:hover svg {

    transform:
        translateX(4px);

}


.hero-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        26px;

    margin-top:
        46px;

    padding-top:
        27px;

    max-width:
        600px;

    border-top:
        1px solid rgba(255, 255, 255, .18);

}


.hero-meta div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.hero-meta strong {

    font-size:
        .86rem;

}


.hero-meta div span {

    color:
        rgba(255, 255, 255, .6);

    font-size:
        .73rem;

}


.hero-divider {

    width:
        1px;

    height:
        39px;

    background:
        rgba(255, 255, 255, .25);

}


.hero-scroll {

    position:
        absolute;

    z-index:
        3;

    left:
        50%;

    bottom:
        25px;

    width:
        28px;

    height:
        46px;

    border:
        1px solid rgba(255, 255, 255, .38);

    border-radius:
        20px;

    transform:
        translateX(-50%);

}


.hero-scroll span {

    position:
        absolute;

    top:
        9px;

    left:
        50%;

    width:
        3px;

    height:
        7px;

    background:
        #fff;

    border-radius:
        10px;

    animation:
        scrollMove 1.8s infinite;

}


@keyframes scrollMove {

    0% {

        opacity:
            0;

        transform:
            translate(-50%, 0);

    }

    30% {

        opacity:
            1;

    }

    100% {

        opacity:
            0;

        transform:
            translate(-50%, 17px);

    }

}


/* =========================================================
   MARQUEE
========================================================= */

.marquee {

    overflow:
        hidden;

    padding:
        18px 0;

    background:
        var(--blue);

    color:
        rgba(255, 255, 255, .88);

}


.marquee-track {

    width:
        max-content;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    animation:
        marquee 30s linear infinite;

}


.marquee span {

    font-family: 'Nunito', sans-serif;

    font-size:
        1rem;

    white-space:
        nowrap;

}


.marquee i {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #fff;

    opacity:
        .45;

}


@keyframes marquee {

    to {
        transform:
            translateX(-50%);
    }

}


/* =========================================================
   SOBRE
========================================================= */

.about {

    background:
        var(--paper);

}


.about-layout {

    display:
        grid;

    grid-template-columns:
        .92fr 1.08fr;

    align-items:
        center;

    gap:
        95px;

}


.about-image-inner {

    position:
        relative;

    height:
        660px;

    overflow:
        hidden;

    border-radius:
        190px 190px 32px 32px;

    box-shadow:
        var(--shadow);

}


.about-image-inner::after {

    content:
        '';

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(1, 57, 94, .2) 100%
        );

    pointer-events:
        none;

}


.about-image-inner img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .8s cubic-bezier(.2, .65, .25, 1);

}


.about-image-inner:hover img {

    transform:
        scale(1.035);

}


.about-image-info {

    position:
        absolute;

    z-index:
        2;

    left:
        25px;

    right:
        25px;

    bottom:
        25px;

    padding:
        19px 22px;

    display:
        flex;

    flex-direction:
        column;

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, .9);

    backdrop-filter:
        blur(14px);

}


.about-image-info span {

    color:
        var(--blue);

    font-family: 'Nunito', sans-serif;

    font-size:
        1.35rem;

}


.about-image-info small {

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        .62rem;

    font-weight:
        700;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.about-content h2 {

    margin-top:
        20px;

    max-width:
        670px;

    font-family: 'Nunito', sans-serif;

    font-size:
        clamp(3rem, 5vw, 4.9rem);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.04em;

}


.about-content h2 em {

    display:
        block;

    color:
        var(--green);

    font-weight:
        500;

}


.about-content > p {

    max-width:
        620px;

    margin-top:
        22px;

    color:
        var(--muted);

    font-size:
        1rem;

    line-height:
        1.95;

}


.about-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        28px;

}


.about-tags span {

    padding:
        9px 15px;

    border-radius:
        999px;

    background:
        var(--green-light);

    color:
        var(--green-dark);

    font-size:
        .73rem;

    font-weight:
        700;

}


.about-button {

    margin-top:
        32px;

}


/* =========================================================
   CTA RÁPIDO
========================================================= */

.quick-cta {

    padding:
        0 0 30px;

}


.quick-cta-inner {

    min-height:
        160px;

    padding:
        36px 42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

    border-radius:
        28px;

    background:
        linear-gradient(
            110deg,
            var(--blue),
            var(--green)
        );

    color:
        #fff;

    box-shadow:
        var(--shadow);

}


.quick-cta-inner > div > span {

    display:
        block;

    margin-bottom:
        9px;

    color:
        rgba(255, 255, 255, .64);

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.quick-cta h2 {

    font-family: 'Nunito', sans-serif;

    font-size:
        clamp(1.8rem, 3vw, 2.7rem);

    font-weight:
        500;

}


.quick-cta-button {

    flex:
        0 0 auto;

    background:
        #fff;

    color:
        var(--blue);

}


.quick-cta-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .15);

}


/* =========================================================
   TERAPIAS
========================================================= */

.therapies {

    background:
        var(--cream);

}


.therapy-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

}


.therapy-card {

    position:
        relative;

    min-height:
        405px;

    padding:
        34px;

    overflow:
        hidden;

    border:
        1px solid rgba(1, 57, 94, .08);

    border-radius:
        26px;

    background:
        rgba(255, 255, 255, .72);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}


.therapy-card::before {

    content:
        '';

    position:
        absolute;

    right:
        -80px;

    top:
        -80px;

    width:
        185px;

    height:
        185px;

    border-radius:
        50%;

    background:
        rgba(1, 94, 71, .055);

    transition:
        transform .4s ease;

}


.therapy-card:hover {

    transform:
        translateY(-8px);

    background:
        #fff;

    box-shadow:
        var(--shadow);

}


.therapy-card:hover::before {

    transform:
        scale(1.3);

}


.card-index {

    position:
        absolute;

    right:
        28px;

    top:
        28px;

    color:
        rgba(1, 57, 94, .25);

    font-size:
        .73rem;

    font-weight:
        700;

    letter-spacing:
        .14em;

}


.therapy-line {

    display:
        block;

    width:
        40px;

    height:
        2px;

    margin-top:
        20px;

    background:
        var(--green);

    transition:
        width .35s ease;

}


.therapy-card:hover
.therapy-line {

    width:
        68px;

}


.therapy-card h3 {

    margin-top:
        43px;

    font-family: 'Nunito', sans-serif;

    font-size:
        1.72rem;

    font-weight:
        500;

    color:
        var(--blue);

}


.therapy-card p {

    margin-top:
        15px;

    color:
        var(--muted);

    font-size:
        .9rem;

    line-height:
        1.76;

}


.card-meta {

    position:
        absolute;

    left:
        34px;

    right:
        34px;

    bottom:
        72px;

    padding-top:
        17px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    align-items:
        flex-end;

    border-top:
        1px solid var(--line);

}


.card-meta span {

    color:
        var(--muted);

    font-size:
        .72rem;

}


.card-meta strong {

    color:
        var(--green);

    font-size:
        .78rem;

    text-align:
        right;

}


.card-link {

    position:
        absolute;

    left:
        34px;

    bottom:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--green);

    font-size:
        .76rem;

    font-weight:
        700;

}


.card-link svg {

    width:
        17px;

    height:
        17px;

    transition:
        transform .25s ease;

}


.card-link:hover {

    color:
        var(--blue);

}


.card-link:hover svg {

    transform:
        translateX(4px);

}


/* =========================================================
   EXPERIENCE CTA
========================================================= */

.experience {

    padding:
        35px 0 55px;

    background:
        var(--cream);

}


.experience-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        360px;

    padding:
        62px;

    border-radius:
        34px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    color:
        #fff;

    background:
        linear-gradient(
            125deg,
            var(--blue-dark),
            var(--blue) 55%,
            var(--green)
        );

    box-shadow:
        var(--shadow);

}


.experience-card::before {

    content:
        '';

    position:
        absolute;

    top:
        -160px;

    right:
        -120px;

    width:
        420px;

    height:
        420px;

    border:
        1px solid rgba(255, 255, 255, .12);

    border-radius:
        50%;

    box-shadow:
        0 0 0 50px rgba(255, 255, 255, .025),
        0 0 0 100px rgba(255, 255, 255, .02);

}


.experience-card > * {

    position:
        relative;

    z-index:
        1;

}


.experience-label {

    display:
        block;

    margin-bottom:
        15px;

    color:
        rgba(255, 255, 255, .62);

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


.experience-card h2 {

    max-width:
        720px;

    font-family: 'Nunito', sans-serif;

    font-size:
        clamp(2.7rem, 5vw, 4.7rem);

    font-weight:
        500;

    line-height:
        1;

}


.experience-card p {

    max-width:
        630px;

    margin-top:
        20px;

    color:
        rgba(255, 255, 255, .66);

    line-height:
        1.8;

}


.experience-button {

    flex:
        0 0 auto;

    background:
        #fff;

    color:
        var(--blue);

}


.experience-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .16);

}


/* =========================================================
   VALORES
========================================================= */

.prices {

    background:
        var(--paper);

}


.section-heading.split {

    display:
        grid;

    grid-template-columns:
        1.2fr .8fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        46px;

}


.section-heading.split p {

    padding-bottom:
        7px;

}


.price-tabs {

    display:
        inline-flex;

    gap:
        7px;

    padding:
        6px;

    margin-bottom:
        26px;

    border-radius:
        999px;

    background:
        var(--cream);

}


.price-tab {

    padding:
        13px 20px;

    border:
        0;

    border-radius:
        999px;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        .85rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .25s ease;

}


.price-tab:hover {

    color:
        var(--blue);

}


.price-tab.active {

    background:
        var(--blue);

    color:
        #fff;

    box-shadow:
        0 8px 22px rgba(1, 57, 94, .16);

}


.price-panels {

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #fff;

    box-shadow:
        var(--shadow);

}


.price-panel {

    display:
        none;

}


.price-panel.active {

    display:
        block;

    animation:
        panelIn .35s ease;

}


@keyframes panelIn {

    from {

        opacity:
            0;

        transform:
            translateY(8px);

    }

    to {

        opacity:
            1;

        transform:
            none;

    }

}


/* TABELA */

.price-table-head,
.price-row {

    display:
        grid;

    grid-template-columns:
        1.5fr .7fr .7fr;

    gap:
        16px;

    align-items:
        center;

}


.price-table-head {

    padding:
        20px 28px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );

    color:
        rgba(255, 255, 255, .74);

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


.price-row {

    padding:
        22px 28px;

    border-bottom:
        1px solid var(--line);

    transition:
        background .25s ease;

}


.price-row:hover {

    background:
        #F8FAF9;

}


.price-row div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.price-row strong {

    color:
        var(--text);

}


.price-row small {

    color:
        var(--muted);

    font-size:
        .74rem;

}


.price-row > span {

    color:
        var(--green);

    font-family: 'Nunito', sans-serif;

    font-size:
        1.25rem;

}


.price-note {

    padding:
        22px 28px;

    background:
        #F3F6F5;

    color:
        var(--muted);

    font-size:
        .84rem;

    line-height:
        1.75;

}


.price-note strong {

    color:
        var(--green);

}


.price-note span {

    font-weight:
        700;

}


/* LISTA */

.simple-list {

    padding:
        10px 28px;

}


.simple-price {

    padding:
        20px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid var(--line);

}


.simple-price:last-child {

    border-bottom:
        0;

}


.simple-price div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.simple-price small {

    color:
        var(--muted);

}


.simple-price > span {

    color:
        var(--green);

    font-family: 'Nunito', sans-serif;

    font-size:
        1.35rem;

    white-space:
        nowrap;

}


.simple-price.featured strong::before {

    content:
        'COMBO';

    margin-right:
        10px;

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        var(--green);

    color:
        #fff;

    font-family: 'Nunito', sans-serif;

    font-size:
        .56rem;

    letter-spacing:
        .1em;

    vertical-align:
        2px;

}


/* DEPILAÇÃO */

.wax-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        0 36px;

    padding:
        18px 28px;

}


.wax-item {

    padding:
        15px 0;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        18px;

    border-bottom:
        1px solid var(--line);

}


.wax-item strong {

    color:
        var(--green);

    white-space:
        nowrap;

}


/* CTA ABAIXO DOS VALORES */

.price-whatsapp {

    margin-top:
        24px;

    padding:
        25px 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    border:
        1px solid rgba(1, 94, 71, .12);

    border-radius:
        22px;

    background:
        var(--green-light);

}


.price-whatsapp > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.price-whatsapp strong {

    color:
        var(--green-dark);

}


.price-whatsapp span {

    color:
        var(--muted);

    font-size:
        .82rem;

}


.price-whatsapp > a {

    min-height:
        45px;

    padding:
        0 17px;

    border-radius:
        999px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    background:
        var(--whatsapp);

    color:
        #fff;

    font-size:
        .77rem;

    font-weight:
        700;

    transition:
        transform .25s ease,
        background .25s ease;

}


.price-whatsapp > a:hover {

    transform:
        translateY(-2px);

    background:
        var(--whatsapp-dark);

}


/* =========================================================
   LOCALIZAÇÕES
========================================================= */

.locations {

    background:
        var(--cream);

}


.location-grid {

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        75px;

    align-items:
        center;

}


/* =========================================================
   BOTÃO WHATSAPP - LOCALIZAÇÃO
========================================================= */

.location-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 56px;
    margin-top: 28px;
    padding: 0 27px;

    border: 2px solid var(--green);
    border-radius: 999px;

    background: var(--green);
    color: #fff;

    font-size: .92rem;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(1, 94, 71, .16);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.location-whatsapp .whatsapp-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;

    color: #fff;
    fill: currentColor !important;

    transition:
        transform .25s ease;
}

.location-whatsapp:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px rgba(1, 94, 71, .24);
}

.location-whatsapp:hover .whatsapp-icon {
    transform:
        scale(1.06);
}

.location-cards {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        16px;

}


.location-card {

    position:
        relative;

    min-height:
        310px;

    padding:
        31px;

    overflow:
        hidden;

    border:
        1px solid rgba(1, 57, 94, .08);

    border-radius:
        26px;

    background:
        var(--paper);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.location-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow);

}


.location-card::before {

    content:
        '';

    position:
        absolute;

    right:
        -85px;

    bottom:
        -85px;

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    background:
        rgba(1, 94, 71, .05);

}


.location-number {

    display:
        block;

    color:
        rgba(1, 57, 94, .28);

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


.location-label {

    display:
        block;

    margin-top:
        70px;

    color:
        var(--green);

    font-size:
        .66rem;

    font-weight:
        700;

    letter-spacing:
        .17em;

    text-transform:
        uppercase;

}


.location-card h3 {

    margin-top:
        11px;

    color:
        var(--blue);

    font-family: 'Nunito', sans-serif;

    font-size:
        1.6rem;

    font-weight:
        500;

}


.location-card p {

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        .88rem;

    line-height:
        1.7;

}


/* =========================================================
   CTA FINAL
========================================================= */

.final-cta {

    position:
        relative;

    min-height:
        630px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    color:
        #fff;

    text-align:
        center;

}


.final-cta-bg {

    position:
        absolute;

    inset:
        0;

    background-image:
        url("./images/hero.jpg");

    background-size:
        cover;

    background-position:
        center 45%;

    transform:
        scale(1.02);

}


.final-cta-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            110deg,
            rgba(1, 57, 94, .92),
            rgba(1, 94, 71, .80)
        );

}


.final-cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        900px;

}


.final-cta .eyebrow {

    color:
        rgba(255, 255, 255, .75);

    justify-content:
        center;

}


.final-cta h2 {

    margin:
        20px auto 0;

    max-width:
        850px;

    font-family: 'Nunito', sans-serif;

    font-size:
        clamp(3rem, 6vw, 5.7rem);

    font-weight:
        500;

    line-height:
        .98;

    letter-spacing:
        -.04em;

}


.final-cta p {

    max-width:
        650px;

    margin:
        24px auto 30px;

    color:
        rgba(255, 255, 255, .72);

    line-height:
        1.85;

}


.final-cta-button {

    background:
        var(--whatsapp);

    color:
        #fff;

    box-shadow:
        0 15px 38px rgba(0, 0, 0, .18);

}


.final-cta-button:hover {

    background:
        var(--whatsapp-dark);

    transform:
        translateY(-3px);

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    padding:
        70px 0 27px;

    background:
        var(--blue-deep);

    color:
        rgba(255, 255, 255, .76);

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.3fr .65fr .85fr;

    gap:
        70px;

}


.footer-logo {

    width:
        190px;

    max-height:
        90px;

    object-fit:
        contain;

    filter:
        brightness(0) invert(1);

}


.footer-about p {

    max-width:
        420px;

    margin-top:
        21px;

    color:
        rgba(255, 255, 255, .52);

    font-size:
        .87rem;

    line-height:
        1.8;

}


.footer-title {

    display:
        block;

    margin-bottom:
        17px;

    color:
        rgba(255, 255, 255, .42);

    font-size:
        .65rem;

    font-weight:
        700;

    letter-spacing:
        .17em;

    text-transform:
        uppercase;

}


.footer-links {

    display:
        flex;

    flex-direction:
        column;

}


.footer-links a {

    width:
        fit-content;

    margin-bottom:
        11px;

    font-size:
        .86rem;

    transition:
        color .25s ease;

}


.footer-links a:hover {

    color:
        #fff;

}


.footer-contact {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.footer-phone {

    color:
        #fff;

    font-family: 'Nunito', sans-serif;

    font-size:
        1.4rem;

}


.footer-whatsapp {

    margin-top:
        15px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--whatsapp);

    font-size:
        .78rem;

    font-weight:
        700;

}


.footer-bottom {

    margin-top:
        57px;

    padding-top:
        24px;

    border-top:
        1px solid rgba(255, 255, 255, .08);

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        rgba(255, 255, 255, .33);

    font-size:
        .7rem;

}


/* =========================================================
   WHATSAPP FLUTUANTE
========================================================= */

.floating-whatsapp {

    position:
        fixed;

    z-index:
        900;

    right:
        22px;

    bottom:
        22px;

    min-height:
        54px;

    padding:
        0 19px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border-radius:
        999px;

    background:
        var(--whatsapp);

    color:
        #fff;

    box-shadow:
        0 15px 36px rgba(37, 211, 102, .32);

    font-size:
        .8rem;

    font-weight:
        700;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.floating-whatsapp:hover {

    transform:
        translateY(-4px);

    background:
        var(--whatsapp-dark);

    box-shadow:
        0 20px 42px rgba(37, 211, 102, .4);

}


.floating-whatsapp
.whatsapp-icon {

    width:
        22px;

    height:
        22px;

}


/* =========================================================
   ANIMAÇÕES DE SCROLL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(32px);

    transition:
        opacity .8s cubic-bezier(.2, .65, .25, 1),
        transform .8s cubic-bezier(.2, .65, .25, 1);

}


.reveal.show {

    opacity:
        1;

    transform:
        none;

}


.delay-1 {

    transition-delay:
        .12s;

}


.delay-2 {

    transition-delay:
        .22s;

}


/* =========================================================
   RESPONSIVO - TABLET
========================================================= */

@media (max-width: 980px) {


    .section-pad {

        padding:
            85px 0;

    }


    /* MENU */

    .menu-toggle {

        display:
            flex;

        position:
            relative;

        z-index:
            1100;

    }


    .main-nav {

        position:
            fixed;

        inset:
            0;

        z-index:
            1050;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            28px;

        background:
            var(--paper);

        opacity:
            0;

        pointer-events:
            none;

        transform:
            translateY(-12px);

        transition:
            .3s ease;

    }


    .main-nav.open {

        opacity:
            1;

        pointer-events:
            auto;

        transform:
            none;

    }


    .main-nav > a:not(.nav-cta),
    .site-header.scrolled
    .main-nav > a:not(.nav-cta) {

        color:
            var(--blue);

        font-family: 'Nunito', sans-serif;

        font-size:
            2rem;

        font-weight:
            500;

    }


    .main-nav .nav-cta {

        font-family: 'Nunito', sans-serif;

    }


    .menu-toggle.active span {

        background:
            var(--blue);

    }


    .menu-toggle.active
    span:first-child {

        transform:
            translateY(4px)
            rotate(45deg);

    }


    .menu-toggle.active
    span:last-child {

        transform:
            translateY(-4px)
            rotate(-45deg);

    }


    .about-layout,
    .location-grid {

        grid-template-columns:
            1fr;

    }


    .about-layout {

        gap:
            55px;

    }


    .about-image-inner {

        max-width:
            650px;

        margin:
            0 auto;

    }


    .therapy-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .section-heading.split {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .experience-card {

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            flex-end;

    }


    .location-grid {

        gap:
            48px;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-grid
    > div:first-child {

        grid-column:
            1 / -1;

    }

}


/* =========================================================
   RESPONSIVO - MOBILE
========================================================= */

@media (max-width: 680px) {


    .container {

        width:
            min(100% - 28px, 1180px);

    }


    .section-pad {

        padding:
            72px 0;

    }


    /* HEADER */

    .site-header {

        padding:
            13px 0;

    }


    .header-logo {

        width:
            130px;

    }


    .site-header.scrolled
    .header-logo {

        width:
            122px;

    }


    /* HERO */

    .hero {

        min-height:
            100svh;

    }


    .hero-background {

        background-position:
            59% center;

    }


    .hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgb(0, 36, 27) 0%,
            rgba(0, 56, 42, 0.86) 35%,
            rgba(1, 94, 71, 0.275) 65%,
            rgba(1, 94, 71, 0.049) 100%
        );
}


    .hero-content {

        padding:
            130px 0 85px;

    }


    .hero h1 {

        font-size:
            clamp(3.3rem, 15vw, 5rem);

    }


    .hero-lead {

        font-size:
            .97rem;

    }


    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .hero-actions .btn {

        width:
            100%;

    }


    .hero-meta {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            14px;

    }


    .hero-divider {

        width:
            45px;

        height:
            1px;

    }


    .hero-scroll {

        display:
            none;

    }


    /* LOADER */

    .loader-content {

        width:
            150px;

    }


    /* ABOUT */

    .about-layout {

        gap:
            40px;

    }


    .about-image-inner {

        height:
            510px;

        border-radius:
            120px 120px 25px 25px;

    }


    .about-content h2 {

        font-size:
            clamp(2.8rem, 13vw, 4rem);

    }


    .about-button {

        width:
            100%;

    }


    /* QUICK CTA */

    .quick-cta {

        padding-bottom:
            10px;

    }


    .quick-cta-inner {

        padding:
            31px 25px;

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .quick-cta-button {

        width:
            100%;

    }


    /* TERAPIAS */

    .therapy-grid {

        grid-template-columns:
            1fr;

    }


    .therapy-card {

        min-height:
            390px;

        padding:
            29px;

    }


    .card-meta {

        left:
            29px;

        right:
            29px;

    }


    .card-link {

        left:
            29px;

    }


    /* EXPERIENCE */

    .experience-card {

        min-height:
            480px;

        padding:
            35px 27px;

    }


    .experience-card h2 {

        font-size:
            clamp(2.7rem, 13vw, 4rem);

    }


    .experience-button {

        width:
            100%;

    }


    /* PREÇOS */

    .price-tabs {

        width:
            100%;

        display:
            grid;

        grid-template-columns:
            1fr;

        border-radius:
            22px;

    }


    .price-tab {

        width:
            100%;

    }


    .price-table-head {

        display:
            none;

    }


    .price-row {

        grid-template-columns:
            1fr 1fr;

        padding:
            20px;

    }


    .price-row div {

        grid-column:
            1 / -1;

    }


    .price-row
    > span::before {

        display:
            block;

        margin-bottom:
            4px;

        color:
            var(--muted);

        font-family: 'Nunito', sans-serif;

        font-size:
            .59rem;

        letter-spacing:
            .08em;

        text-transform:
            uppercase;

    }


    .price-row
    > span:nth-child(2)::before {

        content:
            'Ribeirão Pires';

    }


    .price-row
    > span:nth-child(3)::before {

        content:
            'São Paulo';

    }


    .price-note {

        padding:
            20px;

    }


    .simple-list {

        padding:
            7px 20px;

    }


    .simple-price {

        align-items:
            flex-end;

    }


    .simple-price strong {

        font-size:
            .88rem;

    }


    .simple-price small {

        font-size:
            .7rem;

    }


    .simple-price.featured
    strong::before {

        display:
            block;

        width:
            fit-content;

        margin:
            0 0 7px 0;

    }


    .wax-grid {

        grid-template-columns:
            1fr;

        padding:
            8px 20px;

    }


    .price-whatsapp {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .price-whatsapp > a {

        width:
            100%;

        justify-content:
            center;

    }


    /* LOCALIZAÇÕES */

    .location-cards {

        grid-template-columns:
            1fr;

    }


    .location-card {

        min-height:
            255px;

    }


    .location-label {

        margin-top:
            46px;

    }


    /* CTA FINAL */

    .final-cta {

        min-height:
            580px;

    }


    .final-cta-bg {

        background-position:
            60% center;

    }


    .final-cta h2 {

        font-size:
            clamp(2.9rem, 13vw, 4.4rem);

    }


    .final-cta-button {

        width:
            100%;

    }


    /* FOOTER */

    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .footer-grid
    > div:first-child {

        grid-column:
            auto;

    }


    .footer-bottom {

        flex-direction:
            column;

    }


    /* WHATSAPP FLOAT */

    .floating-whatsapp {

        width:
            56px;

        height:
            56px;

        min-height:
            56px;

        padding:
            0;

        border-radius:
            50%;

    }


    .floating-whatsapp span {

        display:
            none;

    }

}


/* =========================================================
   ACESSIBILIDADE - MENOS MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* =========================================================
   AJUSTES FINAIS — NUNITO, HERO E WHATSAPP
========================================================= */

body,
button,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
p,
strong,
small,
em {
    font-family: 'Nunito', sans-serif;
}

em {
    font-style: normal;
}

/* ---------------------------------------------------------
   HEADER / CTA
--------------------------------------------------------- */

.nav-cta {
    background: var(--green);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 12px 30px rgba(1, 94, 71, .22);
}

.nav-cta:hover {
    background: var(--blue);
    box-shadow: 0 16px 34px rgba(1, 57, 94, .24);
}

/* ---------------------------------------------------------
   HERO
   Mantém o conteúdo dentro do mesmo container do header.
--------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.hero-content {
    position: relative;
    z-index: 2;

    /* importante: não deixar width:100% sobrescrever .container */
    width: min(1180px, calc(100% - 40px));
    min-height: 100vh;
    margin: 0 auto;

    display: flex;
    align-items: center;

    padding: 108px 0 58px;
}

.hero-copy {
    width: 100%;
    max-width: 690px;
    margin: 0;
}

.hero-eyebrow {
    color: rgba(255, 255, 255, .82);
}

.hero h1 {
    max-width: 690px;
    margin: 22px 0 20px;

    font-family: 'Nunito', sans-serif;
    font-size: clamp(3.35rem, 5.1vw, 5.65rem);
    font-weight: 700;
    line-height: .97;
    letter-spacing: -.045em;
}

.hero h1 em {
    display: block;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.01;
}

.hero-lead {
    max-width: 590px;
    font-size: 1rem;
    line-height: 1.72;
}

.hero-actions {
    margin-top: 28px;
}

.hero-meta {
    margin-top: 32px;
    padding-top: 21px;
}

/* ---------------------------------------------------------
   BOTÕES WHATSAPP
--------------------------------------------------------- */

.btn-whatsapp {
    background: var(--green);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 14px 32px rgba(1, 94, 71, .24);
}

.btn-whatsapp:hover {
    background: var(--blue);
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(1, 57, 94, .28);
}

.final-cta-button {
    background: var(--green);
}

.final-cta-button:hover {
    background: var(--blue);
}

/* Todos os ícones do WhatsApp */
.whatsapp-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor !important;
    stroke: none !important;
}

/* ---------------------------------------------------------
   WHATSAPP FLUTUANTE
--------------------------------------------------------- */

.floating-whatsapp {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 900;

    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    padding: 0;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: #25D366;
    color: #fff;

    box-shadow: 0 14px 34px rgba(37, 211, 102, .32);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.floating-whatsapp:hover {
    background: #20C55A;
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 18px 40px rgba(37, 211, 102, .40);
}

.floating-whatsapp .whatsapp-icon {
    width: 28px;
    height: 28px;
    flex: none;

    /* pequeno ajuste óptico do símbolo oficial */
    transform: translate(-.5px, .5px);
    transform-origin: center;
}

.floating-whatsapp-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 13px);

    width: max-content;
    max-width: 220px;
    padding: 9px 13px;

    border-radius: 10px;

    background: var(--blue-dark);
    color: #fff;

    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-50%) translateX(8px);

    box-shadow: 0 10px 25px rgba(1, 41, 63, .22);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}

.floating-whatsapp-tooltip::after {
    content: '';

    position: absolute;
    top: 50%;
    left: 100%;

    transform: translateY(-50%);

    border: 6px solid transparent;
    border-left-color: var(--blue-dark);
}

.floating-whatsapp:hover .floating-whatsapp-tooltip,
.floating-whatsapp:focus-visible .floating-whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* ---------------------------------------------------------
   TIPOGRAFIA
--------------------------------------------------------- */

.section-heading h2,
.about-content h2,
.quick-cta h2,
.therapy-card h3,
.experience-card h2,
.location-card h3,
.final-cta h2,
.about-image-info span,
.footer-phone,
.price-row > span,
.simple-price > span,
.marquee span {
    font-family: 'Nunito', sans-serif;
}

.section-heading h2,
.about-content h2,
.experience-card h2,
.final-cta h2 {
    font-weight: 600;
}

.therapy-card h3,
.location-card h3 {
    font-weight: 700;
}

/* ---------------------------------------------------------
   NOTEBOOK / TELAS BAIXAS
--------------------------------------------------------- */

@media (max-height: 760px) and (min-width: 681px) {

    .hero-content {
        width: min(1180px, calc(100% - 40px));
        min-height: 100vh;
        margin: 0 auto;
        padding-top: 92px;
        padding-bottom: 34px;
    }

    .hero-copy {
        margin: 0;
    }

    .hero h1 {
        font-size: clamp(3rem, 4.55vw, 4.75rem);
        margin: 18px 0 16px;
    }

    .hero-lead {
        font-size: .94rem;
        line-height: 1.58;
    }

    .hero-actions {
        margin-top: 22px;
    }

    .hero-meta {
        margin-top: 23px;
        padding-top: 17px;
    }

    .hero-scroll {
        bottom: 14px;
    }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 680px) {

    .hero {
        min-height: 100svh;
    }

    .hero-content {
        width: calc(100% - 36px);
        min-height: 100svh;
        margin: 0 auto;

        padding: 108px 0 48px;

        display: flex;
        align-items: center;
    }

    .hero-copy {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .hero h1 {
        max-width: 100%;
        margin: 18px 0;

        font-size: clamp(2.8rem, 12.2vw, 4rem);
        line-height: .98;
    }

    .hero-lead {
        max-width: 100%;
        font-size: .94rem;
        line-height: 1.62;
    }

    .hero-actions {
        margin-top: 24px;
    }

    .hero-meta {
        margin-top: 27px;
        padding-top: 18px;
    }

    .floating-whatsapp {
        right: 18px;
        bottom: 18px;

        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
    }

    .floating-whatsapp .whatsapp-icon {
        width: 26px;
        height: 26px;
    }

    .floating-whatsapp-tooltip {
        display: none;
    }
}

/* =========================================================
   CORREÇÃO DEFINITIVA — WHATSAPP
   Este bloco fica no final para sobrescrever regras antigas.
========================================================= */

.whatsapp-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
    fill: currentColor !important;
    stroke: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
}

/* Botão flutuante: círculo perfeito e ícone exatamente centralizado */
.floating-whatsapp {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    z-index: 900 !important;

    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #25D366 !important;
    color: #fff !important;

    line-height: 1 !important;
    text-align: center !important;

    box-shadow: 0 14px 34px rgba(37, 211, 102, .32) !important;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}

.floating-whatsapp:hover {
    background: #20C55A !important;
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow: 0 18px 40px rgba(37, 211, 102, .40) !important;
}

/* O SVG usa toda a área e não recebe deslocamento óptico */
.floating-whatsapp > .whatsapp-icon {
    position: static !important;
    display: block !important;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;

    flex: 0 0 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    transform-origin: center !important;
}

.floating-whatsapp > .whatsapp-icon path {
    fill: currentColor !important;
}

/* Tooltip aparece apenas no hover, sem alterar o tamanho do círculo */
.floating-whatsapp-tooltip {
    position: absolute !important;
    top: 50% !important;
    right: calc(100% + 13px) !important;

    width: max-content !important;
    max-width: 220px !important;

    padding: 9px 13px !important;

    border-radius: 10px !important;

    background: var(--blue-dark) !important;
    color: #fff !important;

    font-size: .76rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-50%) translateX(8px) !important;

    box-shadow: 0 10px 25px rgba(1, 41, 63, .22) !important;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease !important;
}

.floating-whatsapp-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 100% !important;
    transform: translateY(-50%) !important;

    border: 6px solid transparent !important;
    border-left-color: var(--blue-dark) !important;
}

.floating-whatsapp:hover .floating-whatsapp-tooltip,
.floating-whatsapp:focus-visible .floating-whatsapp-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
}

@media (max-width: 680px) {
    .floating-whatsapp {
        right: 18px !important;
        bottom: 18px !important;

        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }

    .floating-whatsapp > .whatsapp-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
    }

    .floating-whatsapp-tooltip {
        display: none !important;
    }
}


.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    transform: scale(1.06);
    animation: heroImageEntrance 8s ease forwards;
}

@keyframes heroImageEntrance {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}

/* =========================================================
   EXPERIÊNCIA / CARROSSEL
========================================================= */

.experience-showcase {
    position: relative;

    /* sobrescreve o .section-pad global */
    padding: 55px 0 !important;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--paper) 0%,
            #F4F7F6 100%
        );
}


/* detalhe decorativo */

.experience-showcase::before {
    content: '';

    position: absolute;

    top: -160px;
    left: -160px;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(1, 94, 71, .07) 0%,
            rgba(1, 94, 71, 0) 72%
        );

    pointer-events: none;
}


/* =========================================================
   GRID
========================================================= */

.experience-showcase-grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap: 65px;

    align-items: center;
}


/* =========================================================
   TEXTO
========================================================= */

.experience-showcase-copy {
    max-width: 510px;
}


.experience-showcase-copy .eyebrow {
    font-size: .67rem;
}


.experience-showcase-copy h2 {
    margin-top: 14px;

    font-family:
        'Nunito',
        sans-serif;

    font-size:
        clamp(
            2.15rem,
            3.4vw,
            3.35rem
        );

    font-weight: 600;

    line-height: 1.03;

    letter-spacing: -.04em;

    color:
        var(--blue);
}


.experience-showcase-copy p {
    margin-top: 15px;

    color:
        var(--muted);

    font-size: .91rem;

    line-height: 1.65;
}


.experience-showcase-button {
    margin-top: 22px;

    min-height: 49px;

    padding:
        0 21px;

    font-size: .82rem;
}


/* =========================================================
   CARROSSEL
========================================================= */

.experience-carousel {
    position: relative;

    width: 100%;
}


.experience-carousel-viewport {
    position: relative;

    width: 100%;

    /* menor para aparecer inteiro na tela */
    height: 410px;

    overflow: hidden;

    border-radius:
        26px 95px 26px 26px;

    background:
        var(--cream);

    box-shadow:
        0 18px 48px
        rgba(1, 57, 94, .12);
}


.experience-carousel-track {
    position: relative;

    width: 100%;
    height: 100%;
}


.experience-carousel-slide {
    position: absolute;

    inset: 0;

    opacity: 0;

    transform:
        scale(1.035);

    transition:
        opacity .7s ease,
        transform 1s
        cubic-bezier(
            .2,
            .65,
            .25,
            1
        );

    pointer-events: none;
}


.experience-carousel-slide.active {
    opacity: 1;

    transform:
        scale(1);

    pointer-events: auto;
}


.experience-carousel-slide::after {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 58%,
            rgba(1, 57, 94, .12) 100%
        );

    pointer-events: none;
}


.experience-carousel-viewport {
    position: relative;

    width: 100%;
    height: 410px;

    overflow: hidden;

    border-radius:
        26px 95px 26px 26px;

    background:
        #F1EEE7;

    box-shadow:
        0 18px 48px
        rgba(1, 57, 94, .12);
}

.experience-carousel-slide {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;

    transform: scale(1);

    transition:
        opacity .7s ease;

    pointer-events: none;
}

.experience-carousel-slide.active {
    opacity: 1;

    pointer-events: auto;
}

.experience-carousel-slide img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    background:
        #F1EEE7;

    transform: none;

    transition:
        none;
}

.experience-carousel-slide.active img {
    transform: none;
}


.experience-carousel-slide.active img {
    transform:
        scale(1.025);
}


/* =========================================================
   CONTROLES
========================================================= */

.experience-carousel-controls {
    margin-top: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;
}


.experience-carousel-arrow {
    width: 42px;
    height: 42px;

    padding: 0;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(1, 57, 94, .12);

    border-radius: 50%;

    background:
        #fff;

    color:
        var(--blue);

    cursor: pointer;

    box-shadow:
        0 7px 20px
        rgba(1, 57, 94, .07);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.experience-carousel-arrow:hover {
    transform:
        translateY(-2px);

    background:
        var(--blue);

    color:
        #fff;

    border-color:
        var(--blue);
}


.experience-carousel-arrow svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   DOTS
========================================================= */

.experience-carousel-dots {
    display: flex;

    align-items: center;

    gap: 7px;
}


.experience-carousel-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(1, 57, 94, .2);

    cursor: pointer;

    transition:
        width .25s ease,
        border-radius .25s ease,
        background .25s ease,
        transform .25s ease;
}


.experience-carousel-dot:hover {
    transform:
        scale(1.15);
}


.experience-carousel-dot.active {
    width: 23px;

    border-radius:
        999px;

    background:
        var(--green);
}


/* =========================================================
   TELAS MAIS BAIXAS
========================================================= */

/*
   Importante para notebooks com pouca altura.
   Se a tela tiver 800px ou menos,
   reduz ainda mais a seção.
*/

@media (min-width: 981px) and (max-height: 800px) {

    .experience-showcase {
        padding:
            40px 0 !important;
    }


    .experience-showcase-grid {
        gap: 55px;
    }


    .experience-showcase-copy h2 {
        margin-top: 11px;

        font-size:
            clamp(
                2rem,
                3.1vw,
                3rem
            );
    }


    .experience-showcase-copy p {
        margin-top: 12px;

        font-size: .87rem;

        line-height: 1.55;
    }


    .experience-showcase-button {
        margin-top: 18px;

        min-height: 46px;
    }


    .experience-carousel-viewport {
        height: 360px;
    }


    .experience-carousel-controls {
        margin-top: 13px;
    }


    .experience-carousel-arrow {
        width: 39px;
        height: 39px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .experience-showcase {
        padding:
            65px 0 !important;
    }


    .experience-showcase-grid {
        grid-template-columns:
            1fr;

        gap: 36px;
    }


    .experience-showcase-copy {
        max-width: 720px;
    }


    .experience-showcase-copy h2 {
        font-size:
            clamp(
                2.4rem,
                6vw,
                3.5rem
            );
    }


    .experience-carousel {
        max-width: 680px;
    }


    .experience-carousel-viewport {
        height: 420px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .experience-showcase {
        padding:
            55px 0 !important;
    }


    .experience-showcase-grid {
        gap: 28px;
    }


    .experience-showcase-copy h2 {
        margin-top: 13px;

        font-size:
            clamp(
                2.05rem,
                9.5vw,
                2.9rem
            );

        line-height: 1.05;
    }


    .experience-showcase-copy p {
        margin-top: 13px;

        font-size: .89rem;

        line-height: 1.6;
    }


    .experience-showcase-button {
        width: 100%;

        margin-top: 19px;

        min-height: 48px;
    }


    .experience-carousel-viewport {
        height: 350px;

        border-radius:
            22px 65px 22px 22px;
    }


    .experience-carousel-controls {
        margin-top: 14px;
    }


    .experience-carousel-arrow {
        width: 39px;
        height: 39px;
    }


    .experience-carousel-arrow svg {
        width: 17px;
        height: 17px;
    }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 420px) {

    .experience-showcase {
        padding:
            48px 0 !important;
    }


    .experience-showcase-grid {
        gap: 24px;
    }


    .experience-showcase-copy h2 {
        font-size:
            clamp(
                1.95rem,
                9vw,
                2.5rem
            );
    }


    .experience-showcase-copy p {
        font-size: .86rem;

        line-height: 1.55;
    }


    .experience-carousel-viewport {
        height: 315px;
    }


    .experience-carousel-controls {
        margin-top: 12px;
    }

}


/* =========================================================
   HERO — MOBILE
   Mostra o massoterapeuta aplicando a massagem
========================================================= */

@media (max-width: 680px) {

    .hero-background-image {
        width: 100%;
        height: 100%;

        object-fit: cover;

        /* enquadramento no massoterapeuta */
        object-position: 63% center;
    }

}


/* =========================================================
   CRÉDITO — A. FÉLIX
========================================================= */

.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: rgba(255, 255, 255, .48);

    font-size: .72rem;
    font-weight: 500;

    white-space: nowrap;
}


.footer-credit a {
    position: relative;

    display: inline-block;

    color: rgba(255, 255, 255, .78);

    font-weight: 700;

    letter-spacing: .02em;

    transition:
        color .3s ease,
        transform .3s ease,
        text-shadow .3s ease;
}


/* linha animada */

.footer-credit a::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;

    border-radius: 999px;

    background: #25D366;

    transform: scaleX(0);

    transform-origin: right;

    transition:
        transform .35s
        cubic-bezier(.4, 0, .2, 1);
}


/* HOVER */

.footer-credit a:hover {
    color: #ffffff;

    transform: translateY(-2px);

    text-shadow:
        0 0 16px
        rgba(255, 255, 255, .25);
}


.footer-credit a:hover::after {
    transform: scaleX(1);

    transform-origin: left;
}


/* =========================================================
   FOOTER — MOBILE
========================================================= */

@media (max-width: 680px) {

    .footer-bottom {
        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 10px;

        text-align: center;
    }


    .footer-credit {
        justify-content: center;

        margin-top: 3px;
    }

}


/* =========================================================
   NAVBAR MOBILE — CORREÇÃO FINAL
========================================================= */

@media (max-width: 980px) {

    /* Permite continuar vendo e rolando o site com o menu aberto */
    body.menu-open {
        overflow-y: auto;
        overflow-x: hidden;
    }


    /* HEADER SEMPRE BRANCO NO MOBILE */
    .site-header,
    .site-header.scrolled {
        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        z-index: 1200;

        padding: 10px 0;

        background: #ffffff;

        box-shadow:
            0 8px 30px
            rgba(1, 57, 94, .08);

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    /* =====================================================
       CONTAINER
    ===================================================== */

    .nav-wrap {
        position: relative;

        min-height: 58px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 20px;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .header-logo,
    .site-header.scrolled .header-logo {
        position: relative;

        z-index: 1300;

        width: 115px;

        max-height: 55px;

        object-fit: contain;

        filter: none !important;
    }


    /* =====================================================
       BOTÃO MENU
    ===================================================== */

    .menu-toggle {
        position: relative;

        z-index: 1300;

        width: 44px;
        height: 44px;

        padding: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 6px;

        border: 0;

        border-radius: 50%;

        background:
            rgba(1, 57, 94, .05);

        cursor: pointer;
    }


    .menu-toggle span,
    .site-header.scrolled .menu-toggle span,
    .menu-toggle.active span {
        width: 22px;
        height: 2px;

        display: block;

        border-radius: 999px;

        background:
            var(--blue) !important;

        transition:
            transform .3s ease,
            opacity .3s ease;
    }


    /* X QUANDO ABERTO */

    .menu-toggle.active span:first-child {
        transform:
            translateY(4px)
            rotate(45deg);
    }


    .menu-toggle.active span:last-child {
        transform:
            translateY(-4px)
            rotate(-45deg);
    }


    /* =====================================================
       MENU MOBILE
       Abre apenas até o fim dos botões
    ===================================================== */

    .main-nav {
        position: absolute;

        top: calc(100% + 8px);
        left: 0;
        right: 0;
        inset: auto 0 auto 0;

        z-index: 1250;

        width: 100%;
        min-height: 0;
        height: auto;

        padding: 14px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 9px;

        overflow: visible;

        border:
            1px solid
            rgba(1, 57, 94, .07);

        border-radius:
            0 0 22px 22px;

        background:
            rgba(255, 255, 255, .98);

        box-shadow:
            0 18px 45px
            rgba(1, 57, 94, .16);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-10px)
            scale(.985);

        transform-origin:
            top center;

        transition:
            opacity .28s ease,
            visibility .28s ease,
            transform .28s ease;
    }


    .main-nav.open {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0)
            scale(1);
    }


    /* =====================================================
       LINKS
    ===================================================== */

    .main-nav > a:not(.nav-cta),
    .site-header.scrolled
    .main-nav > a:not(.nav-cta) {

        position: relative;

        width: 100%;

        min-height: 52px;

        padding:
            0 17px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        border:
            1px solid
            rgba(1, 57, 94, .08);

        border-radius: 14px;

        background:
            #ffffff;

        color:
            var(--blue);

        font-family:
            'Nunito',
            sans-serif;

        font-size: .94rem;

        font-weight: 700;

        box-shadow:
            0 5px 16px
            rgba(1, 57, 94, .035);

        transition:
            background .25s ease,
            color .25s ease,
            transform .25s ease,
            border-color .25s ease;
    }


    /* SETINHA NOS LINKS */

    .main-nav > a:not(.nav-cta)::before {
        content: '→';

        order: 2;

        color:
            var(--green);

        font-size: .95rem;

        transition:
            transform .25s ease;
    }


    /* REMOVE LINHA ANTIGA DO DESKTOP */

    .main-nav > a:not(.nav-cta)::after {
        display: none;
    }


    .main-nav > a:not(.nav-cta):hover {
        background:
            rgba(1, 94, 71, .055);

        color:
            var(--green);

        border-color:
            rgba(1, 94, 71, .15);

        transform:
            translateX(2px);
    }


    .main-nav > a:not(.nav-cta):hover::before {
        transform:
            translateX(3px);
    }


    /* =====================================================
       BOTÃO AGENDAR
    ===================================================== */

    .main-nav .nav-cta {
        width: 100%;

        min-height: 52px;

        margin-top: 3px;

        padding:
            0 18px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 9px;

        border: 0;

        border-radius: 14px;

        background:
            var(--whatsapp);

        color:
            #ffffff;

        font-family:
            'Nunito',
            sans-serif;

        font-size: .91rem;

        font-weight: 800;

        box-shadow:
            0 10px 24px
            rgba(37, 211, 102, .20);
    }


    .main-nav .nav-cta:hover {
        background:
            var(--whatsapp-dark);

        transform:
            translateY(-2px);
    }


    .main-nav .nav-cta .whatsapp-icon {
        width: 20px !important;
        height: 20px !important;

        color: #ffffff;
    }

}


/* =========================================================
   NAVBAR MOBILE — CELULARES PEQUENOS
========================================================= */

@media (max-width: 680px) {

    .site-header,
    .site-header.scrolled {
        padding:
            8px 0;
    }


    .nav-wrap {
        min-height:
            54px;
    }


    .header-logo,
    .site-header.scrolled .header-logo {
        width:
            105px;

        max-height:
            50px;
    }


    .menu-toggle {
        width:
            42px;

        height:
            42px;
    }


    .main-nav {
        top:
            calc(100% + 6px);

        padding:
            11px;

        gap:
            7px;

        border-radius:
            0 0 18px 18px;
    }


    .main-nav > a:not(.nav-cta),
    .site-header.scrolled
    .main-nav > a:not(.nav-cta),
    .main-nav .nav-cta {
        min-height:
            48px;

        border-radius:
            12px;

        font-size:
            .88rem;
    }

}



.about-content .about-title {
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.1;
    margin: 0 0 24px;
}

@media (max-width: 768px) {
    .about-content .about-title {
        font-size: 1.8rem;
        margin-bottom: 18px;
    }

    .about-content p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}


/* =========================================================
   EXPERIENCE - ORDEM MOBILE
   Texto -> Carrossel -> Botão "Quero agendar"
   ========================================================= */

@media (max-width: 768px) {

    .experience-showcase-grid {
        display: flex;
        flex-direction: column;
    }

    /*
     * Faz os elementos internos do bloco de texto participarem
     * diretamente da ordenação do container principal.
     */
    .experience-showcase-copy {
        display: contents;
    }

    /* Texto primeiro */
    .experience-showcase-copy .eyebrow {
        order: 1;
    }

    .experience-showcase-copy h2 {
        order: 2;
    }

    .experience-showcase-copy p {
        order: 3;
    }

    /* Carrossel depois dos textos */
    .experience-carousel {
        order: 4;
        width: 100%;
        margin-top: 24px;
    }

    /* Botão somente depois do carrossel */
    .experience-showcase-button {
        order: 5;
        margin-top: 24px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}


/* =========================================================
   ONDE ATENDO - FOTO + CARDS
   ========================================================= */

.location-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(50px, 7vw, 100px);
    align-items: center;
}

/* LADO DIREITO */

.location-showcase {
    min-width: 0;
    width: 100%;
}

/* FOTO */

.location-image {
    position: relative;
    width: 100%;
    height: 330px;
    overflow: hidden;
    border-radius: 24px;
    margin-bottom: 18px;
}

.location-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.location-image:hover img {
    transform: scale(1.025);
}

/* Pequena informação sobre a foto */

.location-image-caption {
    position: absolute;
    left: 18px;
    bottom: 18px;

    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 11px 15px;

    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 12px;
}

.location-image-caption span {
    font-size: 0.88rem;
    font-weight: 700;
}

.location-image-caption small {
    font-size: 0.72rem;
    opacity: 0.7;
}

/* CARDS */

.location-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.location-card {
    min-width: 0;
}

/* Garantia de que os números antigos não apareçam */

.location-number {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    .location-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .location-image {
        height: 300px;
    }

    .location-cards {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .location-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: stretch;
    }

    .location-showcase {
        width: 100%;
    }

    /* Foto antes dos endereços */

    .location-image {
        width: 100%;
        height: 260px;
        margin-bottom: 18px;
        border-radius: 18px;
    }

    .location-image-caption {
        left: 14px;
        bottom: 14px;
        padding: 9px 12px;
    }

    .location-image-caption span {
        font-size: 0.82rem;
    }

    .location-image-caption small {
        font-size: 0.68rem;
    }

    /* Cards um embaixo do outro */

    .location-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 0;
    }

    .location-card {
        width: 100%;
    }
}

/* =========================================================
   ONDE ATENDO - LAYOUT
   ========================================================= */

.location-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(50px, 7vw, 100px);
    align-items: center;
}

.location-showcase {
    min-width: 0;
    width: 100%;
}


/* =========================================================
   CARROSSEL DO ESPAÇO
   ========================================================= */

.location-carousel {
    width: 100%;
    margin-bottom: 22px;
}

.location-carousel-viewport {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    border-radius: 24px;
}

.location-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.location-carousel-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.location-carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

.location-carousel-slide img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* SETAS */

.location-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);
    color: #111;

    cursor: pointer;

    transform: translateY(-50%);
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.location-carousel-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.06);
}

.location-carousel-arrow svg {
    width: 21px;
    height: 21px;
}

.location-carousel-prev {
    left: 16px;
}

.location-carousel-next {
    right: 16px;
}


/* LEGENDA */

.location-image-caption {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 4;

    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 11px 15px;

    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 12px;
}

.location-image-caption span {
    font-size: 0.88rem;
    font-weight: 700;
}

.location-image-caption small {
    font-size: 0.72rem;
    opacity: 0.7;
}


/* BOLINHAS */

.location-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 14px;
}

.location-carousel-dot {
    width: 7px;
    height: 7px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.2);

    cursor: pointer;

    transition:
        width 0.25s ease,
        border-radius 0.25s ease,
        background 0.25s ease;
}

.location-carousel-dot.active {
    width: 22px;
    border-radius: 20px;
    background: currentColor;
}


/* =========================================================
   CARDS
   ========================================================= */

.location-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.location-card {
    min-width: 0;
}

.location-number {
    display: none !important;
}


/* =========================================================
   ONDE ATENDO - DESKTOP
   Texto + cards à esquerda | Carrossel à direita
   NÃO ALTERA O MOBILE
   ========================================================= */

@media (min-width: 769px) {

    /* ESTRUTURA PRINCIPAL */
    .location-grid {
        display: grid;
        grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
        grid-template-rows: auto auto;

        column-gap: clamp(45px, 5vw, 75px);
        row-gap: 24px;

        align-items: start;
    }


    /* =====================================================
       TEXTO - LADO ESQUERDO
       ===================================================== */

    .locations .section-heading {
        grid-column: 1;
        grid-row: 1;

        width: 100%;
        max-width: none;
        margin: 0;
    }


    /* Permite posicionar carrossel e cards no grid principal */
    .location-showcase {
        display: contents;
    }


    /* =====================================================
       CARROSSEL - LADO DIREITO
       Começa na MESMA ALTURA do texto
       ===================================================== */

    .location-carousel {
        grid-column: 2;
        grid-row: 1 / span 2;

        width: 100%;
        min-width: 0;

        margin: 0;
        align-self: start;
    }

    .location-carousel-viewport {
        width: 100%;
        height: auto;

        aspect-ratio: 4 / 3;

        overflow: hidden;
        border-radius: 24px;

        background: #f2f2f2;
    }

    .location-carousel-track,
    .location-carousel-slide {
        width: 100%;
        height: 100%;
    }

    .location-carousel-slide img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;
    }


    /* =====================================================
       CARDS - MENORES E LADO A LADO
       ===================================================== */

    .location-cards {
        grid-column: 1;
        grid-row: 2;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;

        width: 100%;
        max-width: none;

        margin: 0;
    }

    .location-card {
        width: 100%;
        min-width: 0;

        padding: 18px 17px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }


    /* Título pequeno do card */
    .location-card .location-label {
        font-size: 0.72rem;
        line-height: 1.2;

        margin-bottom: 8px;
    }


    /* Endereço */
    .location-card h3 {
        font-size: 1rem;
        line-height: 1.3;

        margin: 0 0 7px;
    }


    /* Complemento */
    .location-card p {
        font-size: 0.82rem;
        line-height: 1.45;

        margin: 0;
    }


    /* Remove 01 e 02 */
    .location-number {
        display: none !important;
    }


    /* =====================================================
       INDICADORES DO CARROSSEL
       ===================================================== */

    .location-carousel-dots {
        margin-top: 14px;
    }
}


/* =========================================================
   MOBILE - ONDE ATENDO
   Texto -> Carrossel -> WhatsApp -> Endereços
   ALTERA SOMENTE A VERSÃO MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .location-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        align-items: stretch;
    }

    /*
     * Faz o conteúdo do texto e do showcase participar
     * diretamente da ordenação do container principal.
     * Isso permite mover o botão sem duplicá-lo no HTML.
     */
    .locations .section-heading,
    .location-showcase {
        display: contents;
    }

    /* TEXTO */
    .locations .section-heading .eyebrow {
        order: 1;
    }

    .locations .section-heading h2 {
        order: 2;
        margin-top: 18px;
    }

    .locations .section-heading > p {
        order: 3;
        margin-top: 18px;
        margin-bottom: 28px;
    }

    /* CARROSSEL */
    .location-carousel {
        order: 4;
        width: 100%;
        margin: 0 0 24px;
    }

    .location-carousel-viewport {
        width: 100%;
        height: 280px;
        border-radius: 18px;
    }

    .location-carousel-arrow {
        width: 40px;
        height: 40px;
    }

    .location-carousel-prev {
        left: 10px;
    }

    .location-carousel-next {
        right: 10px;
    }

    .location-image-caption {
        left: 12px;
        bottom: 12px;
        padding: 9px 12px;
    }

    .location-image-caption span {
        font-size: .8rem;
    }

    .location-image-caption small {
        font-size: .67rem;
    }

    .location-carousel-dots {
        gap: 6px;
        margin-top: 12px;
    }

    /* WHATSAPP - SOMENTE AQUI VAI PARA BAIXO DO CARROSSEL */
    .location-whatsapp {
        order: 5;

        width: 100%;
        min-height: 58px;

        margin: 0 0 28px;
        padding: 0 24px;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11px;

        border: 2px solid var(--green);
        border-radius: 999px;

        background: var(--green);
        color: #fff;

        font-size: .92rem;
        font-weight: 800;
        line-height: 1;

        box-shadow:
            0 10px 25px rgba(1, 94, 71, .18);
    }

    .location-whatsapp .whatsapp-icon {
        width: 23px;
        height: 23px;
        flex: 0 0 auto;
        color: #fff;
    }

    .location-whatsapp:hover {
        background: var(--green);
        border-color: var(--green);
        color: #fff;

        transform: none;

        box-shadow:
            0 10px 25px rgba(1, 94, 71, .18);
    }

    /* ENDEREÇOS */
    .location-cards {
        order: 6;

        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
        gap: 14px;
        margin: 0;
    }
}


/* =========================================================
   CATÁLOGO DE MASSAGENS
========================================================= */

.massage-catalog {
    position: relative;
    overflow: hidden;
    background: var(--paper);
}


/* GRID */

.massage-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


/* CARD */

.massage-catalog-card {
    position: relative;

    height: 520px;

    overflow: hidden;
    border-radius: 26px;

    background: var(--blue);
    box-shadow: 0 18px 50px rgba(1, 57, 94, .10);

    isolation: isolate;
}


/* IMAGEM */

.massage-catalog-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .7s cubic-bezier(.2, .65, .25, 1);
}


/* GRADIENTE */

.massage-catalog-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 38%,
            rgba(1, 41, 63, .15) 55%,
            rgba(1, 41, 63, .88) 100%
        );

    pointer-events: none;
}


/* TEXTO */

.massage-catalog-info {
    position: absolute;

    z-index: 2;

    left: 28px;
    right: 28px;
    bottom: 28px;

    color: #fff;

    transition:
        transform .35s ease;
}


.massage-catalog-info span {
    display: block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, .7);

    font-size: .68rem;
    font-weight: 700;

    letter-spacing: .15em;
    text-transform: uppercase;
}


.massage-catalog-info h3 {
    font-family: 'Nunito', sans-serif;

    font-size: 1.65rem;
    font-weight: 600;

    line-height: 1.15;
}


/* HOVER */

.massage-catalog-card:hover img {
    transform: scale(1.045);
}


.massage-catalog-card:hover .massage-catalog-info {
    transform: translateY(-5px);
}


/* CTA */

.massage-catalog-cta {
    margin-top: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;
}


.massage-catalog-cta p {
    color: var(--muted);

    font-size: .95rem;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .massage-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .massage-catalog-card {
        height: 480px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .massage-catalog {
        overflow: hidden;
    }


    /*
     * No mobile vira uma galeria horizontal.
     * A próxima imagem fica aparecendo um pouco,
     * indicando que dá para arrastar.
     */
    .massage-catalog-grid {
        display: flex;

        width: calc(100% + 20px);

        gap: 14px;

        overflow-x: auto;
        overflow-y: hidden;

        margin-right: -20px;
        padding-right: 40px;
        padding-bottom: 8px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .massage-catalog-grid::-webkit-scrollbar {
        display: none;
    }


    .massage-catalog-card {
        flex: 0 0 82%;

        height: 500px;

        border-radius: 22px;

        scroll-snap-align: start;
    }


    .massage-catalog-info {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }


    .massage-catalog-info h3 {
        font-size: 1.45rem;
    }


    /* CTA abaixo */

    .massage-catalog-cta {
        margin-top: 30px;

        flex-direction: column;

        gap: 14px;

        text-align: center;
    }


    .massage-catalog-cta .btn {
        width: 100%;
    }

}

/* =========================================================
   CORREÇÃO DE ESPAÇAMENTO - ONDE ATENDO MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* Espaçamento lateral geral da seção */
    .locations .container {
        width: 100%;
        max-width: 100%;

        padding-left: 20px;
        padding-right: 20px;

        box-sizing: border-box;
    }

    /* Garante que nenhum elemento escape do container */
    .location-grid {
        width: 100%;
        max-width: 100%;
    }

    /* Título */
    .locations .section-heading h2 {
        width: 100%;

        font-size: clamp(2.15rem, 10vw, 3rem);
        line-height: 1.08;

        margin-top: 18px;
    }

    /* Texto */
    .locations .section-heading > p {
        width: 100%;

        margin-top: 20px;
        margin-bottom: 28px;

        line-height: 1.75;
    }

    /* Carrossel */
    .location-carousel {
        width: 100%;
        max-width: 100%;

        margin-left: 0;
        margin-right: 0;
        margin-bottom: 24px;
    }

    .location-carousel-viewport {
        width: 100%;
        max-width: 100%;

        border-radius: 18px;
    }

    /* Botão */
    .location-whatsapp {
        width: 100%;
        max-width: 100%;

        margin-left: 0;
        margin-right: 0;
        margin-bottom: 28px;

        box-sizing: border-box;
    }

    /* Endereços */
    .location-cards {
        width: 100%;
        max-width: 100%;
    }
}

/* =========================================================
   CARDS DE ATENDIMENTOS COM IMAGEM
========================================================= */

.therapy-card {
    display: flex;
    flex-direction: column;

    height: auto !important;
    min-height: 0;

    padding: 0 34px 32px;

    overflow: hidden;

    border-radius: 28px;
}


/* =========================================================
   IMAGEM
   Mostra a imagem INTEIRA, sem recortar
========================================================= */

.therapy-card-image {
    width: calc(100% + 68px);

    height: 290px;

    margin:
        0
        -34px
        30px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #f4f1eb;
}


.therapy-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    transition:
        transform .5s ease;
}


/* Hover bem leve */

.therapy-card:hover .therapy-card-image img {
    transform: scale(1.015);
}


/* =========================================================
   LINHA VERDE
========================================================= */

.therapy-card .therapy-line {
    display: block;

    width: 48px;
    height: 2px;

    flex-shrink: 0;

    margin:
        0
        0
        26px;
}


/* =========================================================
   TÍTULO
========================================================= */

.therapy-card h3 {
    margin:
        0
        0
        20px;

    font-size: clamp(1.45rem, 2vw, 1.85rem);
    line-height: 1.15;
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.therapy-card > p {
    position: static !important;

    width: 100%;

    margin:
        0
        0
        24px;

    font-size: .95rem;
    line-height: 1.7;

    flex: 1;
}


/* =========================================================
   DURAÇÃO + VALOR
========================================================= */

.therapy-card .card-meta {
    position: static !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    gap: 18px;

    margin:
        0
        0
        22px;

    padding-top: 18px;

    border-top: 1px solid rgba(1, 57, 94, .12);
}


.therapy-card .card-meta span {
    position: static !important;

    margin: 0;

    font-size: .82rem;
    line-height: 1.3;
}


.therapy-card .card-meta strong {
    position: static !important;

    margin: 0;

    font-size: .88rem;
    line-height: 1.3;

    text-align: right;

    white-space: nowrap;
}


/* =========================================================
   LINK
========================================================= */

.therapy-card .card-link {
    position: static !important;

    display: inline-flex;
    align-items: center;

    width: fit-content;

    gap: 10px;

    margin: 0;

    font-size: .86rem;
    font-weight: 800;
}


.therapy-card .card-link svg {
    width: 18px;
    height: 18px;

    flex-shrink: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .therapy-card {
        padding:
            0
            28px
            30px;
    }


    .therapy-card-image {
        width: calc(100% + 56px);

        height: 270px;

        margin:
            0
            -28px
            26px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .therapy-card {
        height: auto !important;

        padding:
            0
            22px
            26px;

        border-radius: 22px;
    }


    /* imagem inteira também no celular */

    .therapy-card-image {
        width: calc(100% + 44px);

        height: 250px;

        margin:
            0
            -22px
            24px;

        background: #f4f1eb;
    }


    .therapy-card-image img {
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;
    }


    .therapy-card .therapy-line {
        margin-bottom: 20px;
    }


    .therapy-card h3 {
        margin-bottom: 16px;

        font-size: 1.45rem;
        line-height: 1.2;
    }


    .therapy-card > p {
        margin-bottom: 22px;

        font-size: .92rem;
        line-height: 1.65;
    }


    .therapy-card .card-meta {
        gap: 12px;

        margin-bottom: 20px;

        padding-top: 16px;
    }


    .therapy-card .card-meta span,
    .therapy-card .card-meta strong {
        font-size: .8rem;
    }


    .therapy-card .card-link {
        font-size: .85rem;
    }

}

/* =========================================================
   CORREÇÃO FINAL — ONDE ATENDO SEM CARROSSEL
   Desktop: conteúdo à esquerda | 2 cards à direita
   Mobile: conteúdo -> botão -> cards
   ========================================================= */

.locations {
    position: relative;
    overflow: hidden;
    background: var(--cream);
}

.location-grid {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
    gap: clamp(50px, 6vw, 90px);
    align-items: center;
}

.location-content,
.locations .section-heading {
    width: 100%;
    max-width: 520px;
    margin: 0;
}

.location-content h2,
.locations .section-heading h2 {
    margin-top: 20px;
    color: var(--blue);
    font-size: clamp(2.6rem, 4.2vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.location-content > p,
.locations .section-heading > p {
    max-width: 490px;
    margin-top: 22px;
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.8;
}

.location-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 56px;
    margin-top: 28px;
    padding: 0 27px;
    border: 2px solid var(--green);
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(1, 94, 71, .16);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.location-whatsapp:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(1, 94, 71, .24);
}

.location-whatsapp .whatsapp-icon {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    flex: 0 0 23px !important;
    color: #fff;
}

.location-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    margin: 0;
}

.location-card {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 220px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(1, 57, 94, .08);
    border-radius: 24px;
    background: var(--paper);
    box-shadow: 0 14px 38px rgba(1, 57, 94, .055);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.location-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    border-radius: 24px 24px 0 0;
    background: var(--green);
}

.location-card:hover {
    transform: translateY(-5px);
    border-color: rgba(1, 94, 71, .16);
    box-shadow: 0 20px 48px rgba(1, 57, 94, .10);
}

.location-number {
    display: none !important;
}

.location-card .location-label,
.location-label {
    display: block;
    margin: 0 0 16px;
    color: var(--green);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.location-card h3 {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}

.location-card p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.6;
}

/* Esconde qualquer resquício do antigo carrossel de localização */
.location-showcase > .location-carousel,
.location-image {
    display: none !important;
}

@media (max-width: 980px) {
    .location-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .location-content,
    .locations .section-heading {
        max-width: 680px;
    }

    .location-cards {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .locations .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .location-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
        width: 100%;
        max-width: 100%;
    }

    .location-content,
    .locations .section-heading {
        display: block;
        width: 100%;
        max-width: none;
    }

    .location-content h2,
    .locations .section-heading h2 {
        margin-top: 18px;
        font-size: clamp(2.15rem, 10vw, 3rem);
        line-height: 1.08;
    }

    .location-content > p,
    .locations .section-heading > p {
        width: 100%;
        max-width: none;
        margin-top: 20px;
        margin-bottom: 0;
        font-size: .94rem;
        line-height: 1.72;
    }

    .location-whatsapp {
        width: 100%;
        min-height: 58px;
        margin: 26px 0 0;
        padding: 0 22px;
        box-sizing: border-box;
        font-size: .9rem;
    }

    .location-whatsapp:hover {
        background: var(--green);
        border-color: var(--green);
        transform: none;
        box-shadow: 0 10px 25px rgba(1, 94, 71, .18);
    }

    .location-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
    }

    .location-card {
        min-height: 0;
        padding: 25px 23px;
        border-radius: 20px;
    }

    .location-card .location-label,
    .location-label {
        margin: 0 0 13px;
    }

    .location-card h3 {
        margin: 0 0 8px;
        font-size: 1.18rem;
    }

    .location-card p {
        font-size: .86rem;
    }
}

/* =========================================================
   HERO — ENQUADRAMENTO APENAS NO MOBILE
   Desktop permanece exatamente como já estava.
   ========================================================= */

@media (max-width: 680px) {
    .hero-background-image {
        object-fit: cover;
        object-position: 70% center;
    }
}


/* =========================================================
   ONDE ATENDO — CORREÇÃO FINAL
   DESKTOP: TEXTO ESQUERDA | 2 CARDS DIREITA
   MOBILE: TEXTO | CARDS | WHATSAPP
========================================================= */


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 769px) {

    .locations .location-grid {
        display: grid;

        grid-template-columns:
            minmax(330px, 0.78fr)
            minmax(0, 1.22fr);

        gap: clamp(50px, 6vw, 90px);

        align-items: center;
    }


    /* =========================
       LADO ESQUERDO
    ========================= */

    .locations .location-content {
        width: 100%;
        max-width: 470px;
    }


    .locations .location-content h2 {
        margin-top: 18px;

        font-size:
            clamp(2.7rem, 4vw, 4.4rem);

        line-height: 1.03;
        letter-spacing: -.04em;

        color: var(--blue);
    }


    .locations .location-content > p {
        max-width: 430px;

        margin-top: 22px;

        color: var(--muted);

        font-size: .96rem;
        line-height: 1.75;
    }


    /* WHATSAPP */

    .locations .location-whatsapp {
        width: fit-content;

        min-height: 54px;

        margin-top: 28px;
        padding: 0 24px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 10px;

        border:
            2px solid
            var(--green);

        border-radius: 999px;

        background:
            var(--green);

        color: #ffffff;

        font-size: .88rem;
        font-weight: 800;

        box-shadow:
            0 12px 28px
            rgba(1, 94, 71, .17);

        transition:
            transform .25s ease,
            background .25s ease,
            box-shadow .25s ease;
    }


    .locations .location-whatsapp:hover {
        background:
            var(--blue);

        border-color:
            var(--blue);

        color: #ffffff;

        transform:
            translateY(-3px);

        box-shadow:
            0 17px 34px
            rgba(1, 57, 94, .20);
    }


    .locations
    .location-whatsapp
    .whatsapp-icon {

        width: 21px !important;
        height: 21px !important;

        min-width: 21px !important;
        min-height: 21px !important;

        flex:
            0 0 21px !important;

        color: #ffffff;
    }


    /* =========================
       LADO DIREITO — CARDS
    ========================= */

    .locations .location-cards {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;

        margin: 0;
    }


    .locations .location-card {
        position: relative;

        width: 100%;
        min-width: 0;
        min-height: 270px;

        padding: 32px 28px;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        overflow: hidden;

        border:
            1px solid
            rgba(1, 57, 94, .08);

        border-radius: 24px;

        background:
            #ffffff;

        box-shadow:
            0 18px 45px
            rgba(1, 57, 94, .07);

        transition:
            transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;
    }


    .locations .location-card:hover {
        transform:
            translateY(-5px);

        border-color:
            rgba(1, 94, 71, .18);

        box-shadow:
            0 24px 55px
            rgba(1, 57, 94, .11);
    }


    .locations .location-card::before {
        content: '';

        position: absolute;

        top: 28px;
        left: 28px;

        width: 42px;
        height: 2px;

        border-radius: 999px;

        background:
            var(--green);
    }


    .locations .location-label {
        margin:
            0 0 13px;

        color:
            var(--green);

        font-size: .7rem;
        font-weight: 800;

        letter-spacing: .1em;
        text-transform: uppercase;
    }


    .locations .location-card h3 {
        margin:
            0 0 10px;

        color:
            var(--blue);

        font-size:
            clamp(1.2rem, 1.5vw, 1.55rem);

        line-height: 1.2;
    }


    .locations .location-card p {
        margin: 0;

        color:
            var(--muted);

        font-size: .88rem;
        line-height: 1.6;
    }
}



/* =========================================================
   MOBILE
   MANTÉM O VISUAL E MUDA SOMENTE A ORDEM:
   TEXTO -> CARDS -> WHATSAPP
========================================================= */

@media (max-width: 768px) {

    .locations .location-grid {
        display: flex;

        flex-direction: column;

        width: 100%;

        gap: 0;

        align-items: stretch;
    }


    /*
     * display: contents permite que o botão do WhatsApp
     * seja colocado depois dos cards sem duplicar o HTML.
     */

    .locations .location-content {
        display: contents;
    }


    /* =========================
       TEXTO
    ========================= */

    .locations
    .location-content
    .eyebrow {

        order: 1;
    }


    .locations
    .location-content
    h2 {

        order: 2;

        width: 100%;

        margin-top: 18px;
    }


    .locations
    .location-content
    > p {

        order: 3;

        width: 100%;

        margin-top: 20px;
        margin-bottom: 28px;

        line-height: 1.75;
    }


    /* =========================
       CARDS PRIMEIRO
    ========================= */

    .locations .location-cards {
        order: 4;

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        gap: 14px;

        margin: 0 0 24px;
    }


    /* =========================
       WHATSAPP DEPOIS DOS CARDS
    ========================= */

    .locations .location-whatsapp {
        order: 5;

        width: 100%;
        max-width: 100%;

        min-height: 58px;

        margin:
            0 0 10px;

        padding:
            0 24px;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 11px;

        box-sizing: border-box;

        border:
            2px solid
            var(--green);

        border-radius:
            999px;

        background:
            var(--green);

        color:
            #ffffff;

        font-size:
            .92rem;

        font-weight:
            800;

        line-height: 1;

        box-shadow:
            0 10px 25px
            rgba(1, 94, 71, .18);
    }


    .locations
    .location-whatsapp
    .whatsapp-icon {

        width:
            23px !important;

        height:
            23px !important;

        min-width:
            23px !important;

        min-height:
            23px !important;

        flex:
            0 0 23px !important;

        color:
            #ffffff;
    }


    .locations
    .location-whatsapp:hover {

        background:
            var(--green);

        border-color:
            var(--green);

        color:
            #ffffff;

        transform:
            none;

        box-shadow:
            0 10px 25px
            rgba(1, 94, 71, .18);
    }
}

/* =========================================================
   ONDE ATENDO — AJUSTE FINAL APENAS DESKTOP

   ESQUERDA:
   título + texto + WhatsApp

   DIREITA:
   2 cards de endereço lado a lado
========================================================= */

@media (min-width: 769px) {

    /* =====================================================
       GRID PRINCIPAL
    ===================================================== */

    .locations .location-grid {
        display: grid !important;

        grid-template-columns:
            minmax(380px, 0.82fr)
            minmax(600px, 1.18fr) !important;

        gap: clamp(70px, 8vw, 140px) !important;

        align-items: center !important;

        width: 100%;
    }


    /* =====================================================
       LADO ESQUERDO
    ===================================================== */

    .locations .location-content {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: 520px !important;

        margin: 0 !important;
    }


    .locations .location-content h2 {
        max-width: 520px;

        margin-top: 20px;

        font-size: clamp(3rem, 4.2vw, 4.6rem);
        line-height: 1.02;
        letter-spacing: -0.045em;
    }


    .locations .location-content > p {
        max-width: 470px;

        margin-top: 25px;

        line-height: 1.75;
    }


    /* =====================================================
       BOTÃO WHATSAPP
    ===================================================== */

    .locations .location-whatsapp {
        width: fit-content !important;

        margin-top: 30px !important;
    }


    /* =====================================================
       LADO DIREITO
       FORÇA OS CARDS PARA A SEGUNDA COLUNA
    ===================================================== */

    .locations .location-cards {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;

        align-items: stretch !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        justify-self: stretch !important;
        align-self: center !important;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .locations .location-card {
        width: 100% !important;
        max-width: none !important;

        min-height: 300px !important;

        padding: 36px 32px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;

        box-sizing: border-box;

        border-radius: 26px;

        background: #fff;

        box-shadow:
            0 20px 50px rgba(1, 57, 94, 0.08);
    }


    /* detalhe verde superior */

    .locations .location-card::before {
        top: 34px;
        left: 32px;

        width: 44px;
    }


    /* =====================================================
       CONTEÚDO DOS CARDS
    ===================================================== */

    .locations .location-label {
        margin-bottom: 14px;

        font-size: 0.72rem;
        line-height: 1.3;
    }


    .locations .location-card h3 {
        max-width: 280px;

        margin-bottom: 12px;

        font-size: clamp(1.35rem, 1.5vw, 1.65rem);
        line-height: 1.2;
    }


    .locations .location-card p {
        max-width: 280px;

        font-size: 0.9rem;
        line-height: 1.6;
    }

}


/* =========================================================
   DESKTOP GRANDE
========================================================= */

@media (min-width: 1200px) {

    .locations .location-grid {
        grid-template-columns:
            minmax(420px, 0.8fr)
            minmax(650px, 1.2fr) !important;

        gap: clamp(90px, 9vw, 160px) !important;
    }


    .locations .location-card {
        min-height: 320px !important;

        padding: 40px 36px !important;
    }

}


/* =========================================================
   ONDE ATENDO — RESPIRO LATERAL APENAS DESKTOP
========================================================= */

@media (min-width: 769px) {

    .locations .container {
        width: 100%;
        max-width: 1500px;

        margin-left: auto;
        margin-right: auto;

        padding-left: 48px;
        padding-right: 48px;

        box-sizing: border-box;
    }

    .locations .location-grid {
        width: 100%;

        grid-template-columns:
            minmax(360px, 0.82fr)
            minmax(600px, 1.18fr) !important;

        gap: clamp(60px, 6vw, 100px) !important;
    }

}


/* TELAS DESKTOP MENORES */

@media (min-width: 769px) and (max-width: 1200px) {

    .locations .container {
        padding-left: 32px;
        padding-right: 32px;
    }

}

/* =========================================================
   ONDE ATENDO — REFINAMENTO FINAL DESKTOP
   Não altera o mobile
========================================================= */

@media (min-width: 769px) {

    /* =====================================================
       MAIS RESPIRO NAS LATERAIS
    ===================================================== */

    .locations .container {
        width: 100%;
        max-width: 1640px;

        margin-left: auto;
        margin-right: auto;

        padding-left: 70px;
        padding-right: 70px;

        box-sizing: border-box;
    }


    .locations .location-grid {
        width: 100%;

        grid-template-columns:
            minmax(380px, .82fr)
            minmax(620px, 1.18fr) !important;

        gap: clamp(75px, 7vw, 125px) !important;

        align-items: center !important;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .locations .location-card {
        position: relative;

        min-height: 320px !important;

        padding:
            38px
            36px
            36px !important;

        justify-content: flex-end !important;
    }


    /*
     * Mantém a pequena linha verde que você já tem
     */

    .locations .location-card::before {
        top: 35px;
        left: 36px;

        width: 46px;
        height: 2px;
    }


    /* =====================================================
       ÍCONE DECORATIVO
    ===================================================== */

    .locations .location-card::after {
        position: absolute;

        top: 50px;
        right: 34px;

        width: 74px;
        height: 74px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background:
            rgba(1, 94, 71, .07);

        color:
            var(--green);

        font-size: 32px;
        line-height: 1;

        pointer-events: none;
    }


    /* PIN DE LOCALIZAÇÃO — RIBEIRÃO PIRES */

    .locations .location-card:nth-child(1)::after {
        content: "⌖";

        font-family:
            Arial,
            sans-serif;

        font-size: 38px;
        font-weight: 400;
    }


   

    /* =====================================================
       CONTEÚDO
    ===================================================== */

    .locations .location-label {
        margin-bottom: 14px;
    }


    .locations .location-card h3 {
        margin-bottom: 12px;
    }


    .locations .location-card p {
        line-height: 1.65;
    }

}


/* =========================================================
   DESKTOP MUITO GRANDE
========================================================= */

@media (min-width: 1500px) {

    .locations .container {
        padding-left: 90px;
        padding-right: 90px;
    }

}

/* =========================================================
   CARDS DE LOCALIZAÇÃO — DESKTOP REFINADO
   NÃO ALTERA O MOBILE
========================================================= */

@media (min-width: 769px) {

    /* Mais respiro geral nas bordas */
    .locations .container {
        width: 100%;
        max-width: 1640px;

        margin-inline: auto;

        padding-left: 80px;
        padding-right: 80px;

        box-sizing: border-box;
    }


    /* Cards */
    .locations .location-card {
        position: relative;

        min-height: 320px !important;

        padding: 34px 36px 36px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: flex-start !important;

        border-radius: 26px;

        background: #fff;

        overflow: hidden;
    }


    /* Remove os ícones antigos */
    .locations .location-card::after {
        content: none !important;
        display: none !important;
    }


    /* Mantém detalhe verde */
    .locations .location-card::before {
        top: 34px;
        left: 36px;

        width: 44px;
        height: 2px;
    }


    /* =====================================================
       ÍCONE
    ===================================================== */

    .locations .location-card-icon {
        width: 64px;
        height: 64px;

        margin-top: 34px;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 1px solid rgba(1, 94, 71, .12);
        border-radius: 18px;

        background:
            rgba(1, 94, 71, .055);

        color:
            var(--green);

        flex-shrink: 0;
    }


    .locations .location-card-icon svg {
        width: 29px;
        height: 29px;

        display: block;
    }


    /* =====================================================
       PARTE INFERIOR
    ===================================================== */

    .locations .location-card-content {
        width: 100%;

        margin-top: 38px;
    }


    .locations .location-label {
        display: block;

        margin-bottom: 13px;

        color: var(--green);

        font-size: .7rem;
        font-weight: 800;

        letter-spacing: .11em;
        text-transform: uppercase;
    }


    .locations .location-card h3 {
        max-width: 310px;

        margin: 0 0 12px;

        color: var(--blue);

        font-size: clamp(1.35rem, 1.45vw, 1.65rem);
        line-height: 1.2;
    }


    .locations .location-card p {
        max-width: 320px;

        margin: 0;

        color: var(--muted);

        font-size: .9rem;
        line-height: 1.6;
    }


    /* Hover discreto */

    .locations .location-card-icon {
        transition:
            background .3s ease,
            color .3s ease,
            transform .3s ease;
    }


    .locations .location-card:hover .location-card-icon {
        background: var(--green);
        color: #fff;

        transform: translateY(-3px);
    }

}


/* TELAS GRANDES */

@media (min-width: 1500px) {

    .locations .container {
        padding-left: 95px;
        padding-right: 95px;
    }

}

/* =========================================================
   ÍCONES DOS CARDS DE LOCALIZAÇÃO
   AJUSTE APENAS MOBILE
========================================================= */

@media (max-width: 768px) {

    /* Card mais compacto */
    .locations .location-card {
        min-height: 0 !important;
        padding: 24px !important;
    }


    /* Ícone pequeno e elegante */
    .locations .location-card-icon {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;

        margin: 0 0 22px 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 1px solid rgba(1, 94, 71, 0.12) !important;
        border-radius: 14px !important;

        background: rgba(1, 94, 71, 0.06) !important;
        color: var(--green) !important;

        box-sizing: border-box !important;
    }


    /* SVG bem menor */
    .locations .location-card-icon svg {
        display: block !important;

        width: 23px !important;
        height: 23px !important;

        max-width: 23px !important;
        max-height: 23px !important;
    }


    /* Evita alguma regra antiga esticando o SVG */
    .locations .location-card-icon svg path,
    .locations .location-card-icon svg circle,
    .locations .location-card-icon svg rect {
        vector-effect: non-scaling-stroke;
    }


    /* Conteúdo abaixo do ícone */
    .locations .location-card-content {
        width: 100% !important;
        margin: 0 !important;
    }


    .locations .location-label {
        margin-bottom: 10px !important;
    }


    .locations .location-card h3 {
        margin-bottom: 8px !important;
    }

}


/* =========================================================
   CARROSSEL EXPERIÊNCIA - FOTOS VERTICAIS
   DESKTOP
========================================================= */

@media (min-width: 769px) {

    .experience-showcase-grid {
        grid-template-columns: minmax(0, 1fr) 430px;
        gap: clamp(50px, 6vw, 90px);
        align-items: center;
    }

    .experience-carousel {
        width: 100%;
        max-width: 430px;
        margin-left: auto;
        margin-right: auto;
    }

    .experience-carousel-viewport {
        width: 100%;

        /* Moldura vertical */
        height: auto;
        aspect-ratio: 4 / 5;

        overflow: hidden;

        border-radius: 28px 70px 28px 28px;

        background: transparent;
    }

    .experience-carousel-track {
        width: 100%;
        height: 100%;
    }

    .experience-carousel-slide {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden;

        background: transparent;
    }

    .experience-carousel-slide::before,
    .experience-carousel-slide::after {
        display: none !important;
    }

    .experience-carousel-slide img {
        display: block;

        width: 100%;
        height: 100%;

        /* preenche a moldura vertical */
        object-fit: cover !important;
        object-position: center !important;

        background: transparent !important;

        transform: none !important;
    }

    .experience-carousel-slide.active img {
        transform: none !important;
    }
}


/* =========================================================
   CARDS DE ATENDIMENTOS
   FOTOS VERTICAIS INTEIRAS - SEM RECORTE E SEM BORDAS
========================================================= */

.therapy-card {
    overflow: hidden;
}


/* =========================================================
   ÁREA DA IMAGEM
========================================================= */

.therapy-card-image {
    width: calc(100% + 68px) !important;

    height: auto !important;
    min-height: 0 !important;

    margin:
        -34px
        -34px
        30px !important;

    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    background: transparent !important;
}


/* =========================================================
   IMAGEM
========================================================= */

.therapy-card-image img {
    display: block !important;

    width: 100% !important;

    /* ESSENCIAL:
       deixa a altura acompanhar a proporção da foto */
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: initial !important;
    object-position: initial !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    transform: none !important;

    border: 0 !important;
}


/* Hover extremamente discreto */

.therapy-card:hover .therapy-card-image img {
    transform: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .therapy-card-image {
        width: calc(100% + 44px) !important;

        height: auto !important;

        margin:
            -22px
            -22px
            24px !important;
    }


    .therapy-card-image img {
        width: 100% !important;
        height: auto !important;

        object-fit: initial !important;

        transform: none !important;
    }

}

/* =========================================================
   EXPERIÊNCIA — AJUSTE APENAS MOBILE
   NÃO ALTERA O DESKTOP
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       ESTRUTURA DA SECTION
    ===================================================== */

    .experience-showcase-grid {
        display: flex !important;
        flex-direction: column !important;

        width: 100%;

        gap: 0 !important;
    }


    /*
     * Faz os elementos internos do bloco de texto
     * participarem da ordenação.
     */
    .experience-showcase-copy {
        display: contents !important;
    }


    /* =====================================================
       ORDEM MOBILE

       1 - eyebrow
       2 - título
       3/4 - textos
       5 - carrossel
       6 - botão
    ===================================================== */

    .experience-showcase-copy .eyebrow {
        order: 1;
    }

    .experience-showcase-copy h2 {
        order: 2;

        margin-top: 18px;
    }

    .experience-showcase-copy p {
        order: 3;
    }

    .experience-showcase-copy p + p {
        order: 4;
    }


    /* =====================================================
       CARROSSEL
    ===================================================== */

    .experience-carousel {
        order: 5;

        width: 100% !important;
        max-width: 100% !important;

        margin:
            28px
            0
            0 !important;
    }


    /* Moldura VERTICAL */
    .experience-carousel-viewport {
        position: relative;

        width: 100% !important;

        height: auto !important;

        /* proporção ideal para as fotos verticais */
        aspect-ratio: 4 / 5 !important;

        overflow: hidden !important;

        border-radius: 22px !important;

        background: transparent !important;
    }


    .experience-carousel-track {
        position: relative;

        width: 100% !important;
        height: 100% !important;
    }


    /* =====================================================
       SLIDES
    ===================================================== */

    .experience-carousel-slide {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;

        background: transparent !important;
    }


    /* Remove qualquer fundo antigo */
    .experience-carousel-slide::before,
    .experience-carousel-slide::after {
        display: none !important;
        content: none !important;
    }


    /* =====================================================
       FOTO
    ===================================================== */

    .experience-carousel-slide img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        /*
         * A moldura agora também é vertical,
         * então a imagem consegue preencher muito melhor.
         */
        object-fit: cover !important;
        object-position: center !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        transform: none !important;
    }


    .experience-carousel-slide.active img {
        transform: none !important;
    }


    /* =====================================================
       CONTROLES
    ===================================================== */

    .experience-carousel-controls {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 15px;

        margin-top: 16px;
    }


    /* Setas */

    .experience-carousel-arrow {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border-radius: 50%;
    }


    .experience-carousel-arrow svg {
        width: 19px;
        height: 19px;
    }


    /* =====================================================
       BOLINHAS
    ===================================================== */

    .experience-carousel-dots {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 7px;

        margin: 0 !important;
    }


    .experience-carousel-dot {
        width: 7px;
        height: 7px;

        min-width: 7px;

        padding: 0;

        border-radius: 50%;
    }


    .experience-carousel-dot.active {
        width: 22px;

        border-radius: 20px;
    }


    /* =====================================================
       BOTÃO WHATSAPP
       ABAIXO DO CARROSSEL
    ===================================================== */

    .experience-showcase-button {
        order: 6;

        width: 100% !important;

        min-height: 54px;

        margin:
            24px
            0
            0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 10px;

        text-align: center;

        border-radius: 999px !important;
    }


    .experience-showcase-button .whatsapp-icon {
        width: 21px;
        height: 21px;

        flex-shrink: 0;
    }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 420px) {

    .experience-carousel-viewport {
        /*
         * Um pouco mais vertical em telas estreitas
         */
        aspect-ratio: 3 / 4 !important;

        border-radius: 18px !important;
    }


    .experience-carousel {
        margin-top: 24px !important;
    }


    .experience-carousel-controls {
        gap: 11px;
        margin-top: 14px;
    }


    .experience-carousel-arrow {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px;
    }


    .experience-showcase-button {
        min-height: 56px;

        padding-left: 18px !important;
        padding-right: 18px !important;

        font-size: 0.9rem;
    }

}


/* =========================================================
   EXPERIÊNCIA - ESPAÇAMENTO LATERAL MOBILE
   NÃO ALTERA O DESKTOP
========================================================= */

@media (max-width: 768px) {

    /* Espaçamento geral da section */
    .experience-showcase .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        box-sizing: border-box !important;
    }


    /* Garante que textos respeitem as laterais */
    .experience-showcase-copy,
    .experience-showcase-copy h2,
    .experience-showcase-copy p,
    .experience-showcase-copy .eyebrow {
        max-width: 100%;
        box-sizing: border-box;
    }


    /* Carrossel respeitando o mesmo alinhamento */
    .experience-carousel {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    .experience-carousel-viewport {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* Botão também alinhado */
    .experience-showcase-button {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }
}


/* Um pouco menos de margem em celulares bem pequenos */
@media (max-width: 380px) {

    .experience-showcase .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

}