@media (min-width: 430px) and (max-width: 480px) {

}



@media (max-width: 767.98px) {

    .blw-bg-menu {
        border-radius: 8px;
        background: var(--color-FFFFFF-10);
        border: solid 1px var(--color-FFFFFF-10);
    }

    p {
        font-size: 10px !important;
    }

    h2 {
        font-size: 12px;
    }


    .hero {
        background-image: url("/assets/img/banner-principal-vision-mobile.jpg") !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        min-height: auto !important;
        height: auto !important;
        aspect-ratio: 1080 / 1350 !important;
        width: 100%;
    }

    .hero-container {
        padding: 2% 3% 5%;

    }

    /* Mantém o navbar como referência */
    .navbar {
        position: relative;
    }

    .navigation-container nav {
        flex-direction: column;
        width: 45%;
        height: auto;
        border-radius: 8px;
        background: #cdbbabe3;
        border: solid 1px var(--color-FFFFFF-10);
    }

    .navigation-container nav a {
        width: 100%;
        font-size: 16px;
        color: #6C3921 !important;
        font-weight: 600;
        border-bottom: solid 1px #6C3921;
        border-radius: 0;
    }

    .navigation-container nav a:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    /* Menu aberto fica fora do fluxo da página */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    /* Remove o deslocamento durante a animação */
    .navbar-collapse.collapsing {
        height: auto !important;
        transition: none !important;
    }

    .hero-info {
        padding-top: 5%;
        padding-left: 5%;
    }

    .hero-title {
        font-size: 26px;

    }

    .hero-subtitle {
        /* width: 614px;  */
        max-width: 100%;
        font-family: Cardo;
        font-size: 32px;
        font-weight: 700;
        font-style: normal;
        line-height: 130%;
        color: var(--color-F9F5EB-100)
    }

    .hero h2 {
        width: 166px;
        padding-left: 0;
        padding-top: 0;
        font-size: 12px;
    }

    .hero-btn-enroll {
        width: 150px;
        height: 30px;
        padding: 0;
        margin-top: 10%;
        margin-left: 20px;
        font-size: 12px;
        border-radius: 10px;

    }

    /* Section About-us */
    .about-us {
        position: relative;
        min-height: 380px;
    }

    .card-no-vision {

        margin-left: 20px;
        max-width: 214px;
        height: 195px;
        border-radius: 15px;
    }



    .card-no-vision>article>h3 {
        width: 149.65px;
        height: 31.51px;
        font-size: 15px;
    }

    .card-no-vision>article>ul>li {
        width: 90%;
        height: 18px;
        font-size: 10px;
        border-radius: 4px;


    }

    .card-vision {
        position: absolute;
        max-width: 243px;
        height: 211px;
        transform: none;
        border-radius: 15px;
        left: 25%;
        top: 48%;


    }

    .card-vision>article>h3 {
        width: 155px;
        height: 40px;
        font-size: 17px;
    }

    .card-vision>article>ul>li {
        width: 90%;
        height: 23.6px;
        font-size: 12.28px;
        border-radius: 4px;
    }

    /* End Section About-us */

    /* Section problem */
    .problem {
        padding-top: 60px;
        max-height: 400px;
    }

    .problem-card-title {
        font-size: 10px;
        padding-inline: 20px;
    }

    .problem-card-title strong {
        font-size: 12px;
    }

    .problem-article-content {
        margin-top: 10px;
        margin-bottom: 80px;
        padding: 10px 20px;
        border-radius: 14px;
    }

    problem-image-area {
        position: relative;
        z-index: 1;
        max-width: 180px;
        /* 542 */
        height: 275px;


    }

    .problem-image-area::before {
        content: "";
        position: absolute;
        width: 80%;
        height: 45%;
        left: 20%;
        border-radius: 14px 0 0 14px;

    }

    .problem-image {
        /* position: absolute;     */
        /* right: 1px; */
        transform: translateY(75px);
        width: 615px;
        /* 609 */
        height: auto;
        /* aspect-ratio: none; */
        /* background: url(<path-to-image>) lightgray 50% / cover no-repeat; */
        /* box-shadow: 59px 42px 29.5px 0 rgba(0, 0, 0, 0.18); */
    }

    /* End Section problem */

    /* Section details */
    .details {
        padding-top: 50px;
        padding-bottom: 0;
    }

    .details-title>h3 {
        font-size: 14.43px;
    }

    .details-grid {
        width: 90% !important;
        padding: 10px;
        border-radius: 14px !important;
    }

    .details-grid-item {
        padding: 30px 24px;
        border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    .details-grid-item:nth-child(2),
    .details-grid-item:nth-child(4),
    .details-grid-item:nth-child(6) {
        border-right: none !important;
    }

    .details-grid-item:nth-child(5),
    .details-grid-item:nth-child(6) {
        border-bottom: none !important;
    }

    .details-card-number {
        font-size: 24px;
    }

    .details-card-text {
        font-size: 9px;
    }


    .details-footer-text {
        font-size: 9px;
    }

    .details-btn {
        max-width: 350px;
        height: 40px;
        padding: 3.5px 5.5px;
        font-size: 7px;
        border-radius: 5.411px;
        background: #7397AA;
        box-shadow: 1.804px 2.525px 3.608px 0 rgba(0, 0, 0, 0.25);
    }

    .div-footer {
        width: 90% !important;
    }

    /* End Section details */


    /* Section for-you */

    .for-you {
        padding-bottom: 40px;
    }

    .for-you-content {
        position: relative;
        /* max-width: 1344px; */
        /* height: auto; */
        /* height: 645px; */
        width: 90%;
        margin-top: 15%;
    }

    .for-you-content::before {
        content: "";
        position: absolute;

        bottom: 0;
        left: 0;
        right: 0;

        height: 100%;

        border-radius: 18px;

    }

    .for-you-image {
        position: relative;
        height: 400px;
        overflow: visible;
        /* deixa a imagem vazar pra fora */
    }

    .for-you-image>img {
        position: absolute;
        top: 0;
        right: -10px;
        /* left: -90vw; */

        width: 150vw;
        height: 100%;
        object-fit: contain;
        object-position: right center;
    }

    .for-you-title {
        max-width: 531.75px;
        font-size: 15px;
    }

    .for-you-subtitle {
        max-width: 705.209px;
        font-size: 9px;
    }

    .for-you-card>img {
        width: 24px;
        height: 12px;

    }

    .for-you-card>p {
        font-size: 9px;

    }

    /* End Section for-you */

    /* Section cta */
    .cta {
        padding-bottom: 30px;
        padding-top: 30px;
        background-color: #F8F4EE;
        z-index: -2;

    }

    .cta-content {
        width: 95% !important;
        position: relative;
        padding-right: 20px;

        /* background: linear-gradient(180deg, #7F502A 0%, #472E11 100%);
    filter: drop-shadow(10px 18px 21px rgba(0, 0, 0, 0.29)); */
    }

    .cta-content::before {

        height: 100%;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;

        border-radius: 18px;

        z-index: 1;
        pointer-events: none;
    }

    .cta-content * {
        z-index: 2;
    }

    .cta-content-title-mobile {
        padding-top: 10px;
        color: #FFF;
        font-family: Mulish;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        /* 31.2px */
        letter-spacing: -1.68px;
        text-align: center;
    }

    .cta-content-title-mobile strong {
        font-family: Cardo;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.56px;
    }

    .cta-info-title {
        color: #FFF;
        font-family: Mulish;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 130%;
        /* 52px */
    }

    .cta-info-title strong {
        font-family: Cardo;
        font-weight: 700;
    }

    .cta-info-text {

        padding-right: 10px;
        text-align: justify;
        color: #FFF;
        font-family: Mulish;
        font-size: 8px;
        font-style: normal;
        font-weight: 300;
        line-height: 10px;
        /* 150% */
    }

    .cta-info-text strong {
        font-weight: 700;
    }

    /* End Section cta */

    /* Section course */
    .course {
        /* padding-top: 5%; */
        padding-top: clamp(2rem, 5vw, 5rem);
        background-color: #F8F4EE;
        background-image: url("/assets/img/forma-fundo-branco.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        background-attachment: fixed;
        /* background-color: #690704; */
    }

    .course-content {
        width: 90% !important;
        padding: 2%;
        border-radius: 14px;

    }

    .course-header {
        padding-top: 5px !important;

    }

    .course-header-title {
        font-size: 32px;
    }

    .course-header-title strong {
        font-family: Cardo;
        font-weight: 700;
    }

    .course-header-text {
        font-size: 9px;
    }

    .course-header-text strong {
        font-weight: 700;

    }

    .course-number {
        font-size: 7px;
    }

    .course-title {
        font-size: 10px;
    }

    .course-icon::before {
        width: 7px;
        height: .5px;
    }

    /* barra vertical */
    .course-icon::after {
        width: .5px;
        height: 7px;
    }

    /* icon before ( + ) */
    .course-icon {
        width: 20px;
        height: 20px;

    }

    .course-badge {
        padding: 0.35rem 1rem;
        font-size: 6px;
    }

    .course-body {
        padding-inline: 1rem;
    }

    .course-detail-title {
        font-size: 9px !important;
    }

    .course-detail-text {
        font-size: 8px !important;
    }

    .course-topics {
        border-radius: 10px;
        background: #DFD0C2;
    }

    .course-topics-title {
        font-size: 8px !important;

    }

    .course-topics-text {
        font-size: 7px !important;
    }

    /* End Section course */

    /* Section pricing */
    .pricing {
        padding-bottom: 30px;
        background-image: url("/assets/img/fundo-pricing.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .pricing-content {
        width: 90% !important;

    }

    .pricing-title {
        font-size: 17px;
    }

    .pricing-text {
        font-size: 7px;
    }

    .pricing-card {
        background-image: url("/assets/img/card-de-venda.png");
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 14px;
    }

    .pricing-card-label {
        margin-top: 15px;
        width: 100%;
        max-width: 250px;
        height: 14px;
        border-radius: 7.2px;
    }

    .pricing-card-label p {
        font-size: 6px;
    }

    .pricing-original-value {
        margin-bottom: 2px;
        font-size: 7px;
    }

    .pricing-current-value {
        margin-right: 0;
        margin-bottom: 2px;
        font-size: 46px !important;
        font-family: Poppins !important;
    }

    .pricing-current-value>span {
        /* padding: 0;     */
        font-size: 7px;
        line-height: 50%;
    }

    .pricing-card>hr {
        border: none;
        border-top: 1px solid #fff;
        width: 100%;
        /* height: 10px;     */
        opacity: 0.43;
    }

    .pricing-item-icon {
        width: 5.5px !important;
        height: 5.5px !important;
    }

    .pricing-item-info-title {
        font-size: 9px;
    }

    .pricing-item-info-text {
        font-size: 8px;
    }

    .pricing-item-info-text>strong {
        font-weight: 700;
    }

    .pricing-button {
        min-width: auto;
        display: flex;
        width: 100px !important;
        height: 25px;
        padding: 0;
        justify-content: center;
        align-items: center;
        gap: 0;
        border-radius: 4px;
        background: #FFF;

        color: #6C3921;
        font-family: Mulish;
        font-size: 8px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

    }

    /* End Section pricing */

    /* Section enroll */
    .enroll {
        padding: 40px 10px;
    }

    /* ---------- Card principal ---------- */
    .enroll-content {
        position: relative;
        width: 100%;
        max-width: 1100px;
        min-height: 350px;
        padding: 5px;
        border-radius: 14px;


    }

    /* ---------- Texto (ocupa só a esquerda) ---------- */
    .enroll-detail {
        margin-left: 10px;
        position: relative;
        z-index: 2;
        max-width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    .enroll-detail>h2 {
        color: #F8F4EE;
        font-family: Cardo, serif;
        font-size: 17px;
        font-weight: 400;
        line-height: 1.3;
        margin-bottom: 24px;
    }

    .enroll-detail>h2>span {
        font-weight: 700;
    }

    .enroll-detail>p {
        font-size: 9px;
    }

    .enroll-detail>p>strong {
        font-weight: 700;
    }

    .enroll-detail .pricing-button {
        margin-top: 40px;
        align-self: flex-start;
        /* estilos do botão que você já tem... */
    }

    /* ---------- Imagem + painel de fundo ---------- */
    .enroll-image {
        position: absolute;
        top: 0;
        bottom: -11.5%;
        right: -20%;
        /* vaza pra fora do card */
        width: 95%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        pointer-events: none;
        z-index: 1;
    }

    /* Painel arredondado atrás da modelo */
    .enroll-image::before {
        content: "";
        position: absolute;
        /* top: 15%; */
        bottom: 10%;
        right: -10%;
        width: 40%;
        height: 50%;
        border-radius: 32px;

        /* 🪟 efeito de vidro */
        background: rgba(255, 255, 255, 0.06);
        /* leve tom claro */
        backdrop-filter: blur(5px);
        /* desfoca o fundo */
        -webkit-backdrop-filter: blur(12px);
        /* Safari */

        /* bordas iluminadas (vidro real) */
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.25),
            /* brilho topo */
            inset 0 -1px 0 rgba(255, 255, 255, 0.05),
            /* brilho base */
            0 8px 32px rgba(0, 0, 0, 0.15);
        /* sombra suave */
        z-index: 11;
    }

    /* Imagem da modelo por cima do painel */
    .enroll-image img {
        position: relative;
        width: 90%;
        z-index: 1;
        /* height: 100%; */
        /* width: auto; */
        max-width: none;
        object-fit: contain;
        object-position: bottom right;
        display: block;
    }

    /* End Section enroll */

    /* faq */
    .faq-carousel {
        width: 300px;
        height: auto;
    }

    .faq-content {
        margin-bottom: 50px;
    }

    .carousel-item>img {
        width: 300px;
    }

    /* footer */
    .footer-content {
        min-height: 60dvh;
    }

    .footer-contact h4,
    .footer-contact p {
        margin-inline: auto;
    }

    .footer-logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }

}