@media screen and (max-width: 900px) {

            header .menu-desktop,
            header .btn-contato {
                display: none;

            }

            header .btn-menu-mob {
                display: block;
            }

            section.na-tapuio {
                text-align: center;
                padding: 80px 0;

                section.sobre-tapuio {
                    padding: 80px 0;
                    background: linear-gradient(135deg, #0a0f3c, #000000, #000c67);
                }

            }

            header {
                width: 90%;
                /* Não ocupa a tela toda para parecer que flutua */
                max-width: 1200px;
                padding: 15px 2%;
                position: fixed;
                top: 20px;
                /* Afastado do topo */
                left: 50%;
                transform: translateX(-50%);
                /* Centraliza a pílula */
                transition: .5s;
                z-index: 1000;

                background: rgba(14, 14, 14, 0);
                /* Um pouco mais escuro para ler melhor */
                backdrop-filter: blur(1px);
                -webkit-backdrop-filter: blur(1px);

                border: 1px solid rgba(255, 255, 255, 0);
                /* Borda fina para dar profundidade */
                border-radius: 50px;
            }

            header.rolar {
                top: 0;
                width: 100%;
                border-radius: 50px;
                background: rgba(0, 0, 0, 0);
                padding: 10px 4%;
                margin-top: 12px;
            }

            @media screen and (max-width: 900px) {
                .assinatura .planos {
                    gap: 20px;
                    text-align: center;
                }

                .img-planos {
                    max-width: 100%;
                }

            }

            .hero-site .txt-hero button {
                padding: 15px 35px;
                /* Reduz um pouco o tamanho no celular */
                font-size: 15px;
                width: 100%;
                /* Opcional: faz o botão ocupar a largura toda no mobile */
                max-width: 300px;
            }


            footer .top-footer button:hover {
                background-color: #fff;
                color: #000;
            }

            footer .middle-footer {
                margin: 10px;
            }

            footer .middle-footer a {
                color: #fff;
                margin: 0 20px;
            }

            footer .bottom-footer {
                border-top: 2px solid #fff;
            }

            footer .bottom-footer p {
                color: #fff;
                margin-top: 10px;
            }


            .hero-site button {
                margin: -1px;
                width: 200px;
                height: 60px;
                font-size: 20px;
                border-radius: 12px;
            }


            body {
                background-color: rgb(0, 0, 0);
                margin: 0;
                padding: 0;
                width: 100%;
                overflow-x: hidden;
                height: auto;
                scroll-behavior: auto;
            }

            section.sobre-tapuio {
                padding: 80px 0;
                background: linear-gradient(135deg, #0a0f3c, #000000, #000c67);
            }

            section.contato {
                background-color: #4d515f;
                padding: 3px 0;
            }


            .na-tapuio .itens-container {
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: center;
                gap: 40px;
                text-align: center;
            }

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

            .na-tapuio .itens-container .img-itens img {
                width: 100%;
            }

            .na-tapuio .itens-container .item-1 {
                order: 1;
            }

            .na-tapuio .itens-container .item-2 {
                order: 0;
            }

            .txt-contato,
            .icons-contato {
                display: block;
                width: 100%;
            }

            .contato .txt-contato h3 {
                font-size: 2em;
                line-height: 40px;
                text-align: center;
            }

            .contato .txt-contato p {
                text-align: center;
                padding: 40px;
            }

            .contato .icons-contato button {
                width: 100%;
            }

            .assinatura h3 {
                text-align: center;
                font-size: 2.5em;
                line-height: 40px;
                font-weight: 200;
            }

            section.hero-site {
                height: 100;
                background-image: url(img-atualizada/fundo.wbp.webp);
                background-repeat: no-repeat;
                background-size: cover;
                background-attachment: fixed;
                position: relative;
                background-position: center;
                color: #fff;
            }


            .txt-sobre,
            .sobre-texto {
                display: block;
                width: 100%;
                font-size: 15px;
                text-align: center;
            }

            .sobre-tapuio .txt-sobre {
                position: static;
                text-align: center;
                padding: 20px;
                top: 50%;
            }

            header .logo img {
                width: 100%;
                height: 70px;
                border-radius: 12px;
                box-shadow: 0px 0px 30px rgb(0, 0, 0);
                cursor: pointer;
            }

            .sobre-texto .sobre-box {
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 40px;
                border: 2px solid #000;
                padding: 20px;
                flex-direction: column;
                text-align: center;
            }

            footer .middle-footer a {
                color: #fff;
                margin: 15px 0;
                display: block;
            }


            footer .bottom-footer p {
                color: #fff;
                margin-top: 10px;
            }


            .interface {
                max-width: 100%;
                padding: 0 5%;
            }

            section.sobre-tapuio {
                padding: 80px 0;
                background: linear-gradient(135deg, #0a0f3c, #000000, #000c67);
            }

            .zoom-container img {
                width: 100%;
                max-width: 400px;
                height: auto;
            }

            html,
            body {
                overflow-x: hidden;
            }

            .zoom-container img,
            .na-tapuio .itens-container .img-itens img {
                width: 100%;
                height: auto;
                max-width: 400px;
            }

            /* Badge Flutuante */
            .experiencia-badge {
                position: absolute;
                top: -20px;
                left: -32px;
            }

            section.sobre {
                background-color: #0f0f0f;
                /* Um tom levemente mais claro que o preto puro */
                color: #fff;
                padding: 60px 0;
                /* Ajusta o respiro no mobile */
                height: auto !important;
                /* Força a altura automática */

            }

            .sobre .flex {
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.534), rgba(0, 0, 0, 0.377));
                /* Um tom levemente mais claro que o preto puro */
                display: flex;
                align-items: center;
                gap: 80px;
                padding: 10px;
                 border-radius: 40px;
                margin: 60px 0;
                flex-direction: column;
                /* Empilha o conteúdo */
            }


            .hero-stats {
                display: flex;
                justify-content: center;
                background-color: #0000007e;
                width: 270px;
                margin: auto;
                border-radius: 30px;
                box-shadow: 12px 12px 500px blue;
            }

            .stat {
                padding: 16px;
                background: rgba(0, 0, 0, 0);
                text-align: center;
                color: rgb(255, 255, 255);
            }

            .stat strong {
                font-size: 22px
            }

            .stat span {
                display: block;
                color: var(--muted);
                font-size: 12px
            }

            /* Container de Imagens */

            /* Badge Flutuante */
            .experiencia-badge {
                position: absolute;
                top: 2px;
                left: 100px;
                background-color: #000000;
                /* Um tom levemente mais claro que o preto puro */
                padding: 10px;
                border-radius: 15px;
                text-align: center;
            }

            .experiencia-badge .anos {
                display: block;
                font-size: 1em;
                font-weight: 900;
                color: #fff;
            }

            .experiencia-badge .texto {
                font-size: 0.8em;
                color: #fff;
                text-transform: uppercase;
            }

            /* Tipografia do Texto */
            .txt-sobre h2 {
                font-size: 3em;
                line-height: 1.1;
                margin-bottom: 30px;
            }

            .txt-sobre p {
                margin-bottom: 20px;
                font-size: 1.1em;
                color: #ccc;
            }


            .hero-site .txt-hero h1 {
                font-size: 3em;
                /* tamanho ideal para celular */
                line-height: 1.2em;
                /* espaçamento proporcional */
                font-weight: 900;
                /* centraliza o título */
                padding: 10px 0;
                text-align: center;
            }

            .hero-site .txt-hero h1 span {
                display: block;
                text-align: center;
            }

            .hero-site .txt-hero h1 {
                padding: 20px;
                font-size: 3em;
                line-height: 70px;
                font-weight: 900;
                text-align: center;
                margin-top: 2px;
                color: #ffffff;
                animation: slideInFromLeft 1s ease-out forwards;
            }

            .hero a {
                display: flex;
                /* Faz o link também se comportar como flex */
                justify-content: center;
                text-decoration: none;
                width: 100%;
                /* Garante que o link ocupe a largura para centralizar o botão */
            }

            .hero button {
                margin: 0 auto;
                /* O "auto" nas laterais força a centralização */
                width: auto;
                /* O botão terá o tamanho apenas do texto */
                min-width: 200px;
                /* Mas com um tamanho mínimo para ficar bonito */
                cursor: pointer;
            }

            /* Impede que a página balance para os lados */
            html,
            body {
                overflow-x: hidden;
                width: 100%;
                position: relative;
            }

            .hero-site .flex {
                display: flex;
                flex-direction: column;
                align-items: center;
                /* Centraliza o conteúdo no eixo horizontal */
                text-align: center;
                /* Garante que o texto fique no meio */
                width: 100%;
                padding: 0 20px;
                /* Margem de segurança nas laterais */
            }

            .hero-site .txt-hero {
                width: 100%;
                max-width: 100%;
                /* Impede que o bloco de texto seja maior que a tela */
            }

            /* Impede que a página balance para os lados */
            html,
            body {
                overflow-x: hidden;
                width: 100%;
                position: relative;
            }

            .hero-site .flex {
                display: flex;
                flex-direction: column;
                align-items: center;
                /* Centraliza o conteúdo no eixo horizontal */
                text-align: center;
                /* Garante que o texto fique no meio */
                width: 100%;
                padding: 0 20px;
                /* Margem de segurança nas laterais */
            }

            .hero-site .txt-hero {
                width: 100%;
                max-width: 100%;
                /* Impede que o bloco de texto seja maior que a tela */
            }

            .na-tapuio {
                padding: 100px 0;
                background-color: #000;
            }

            /* Centraliza o container do texto no card */
            .bento-text {
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                /* Garante que os itens internos alinhem ao centro */
            }

            /* Ajusta a linha (after) do h3 */
            .bento-text h3::after {
                margin: 10px auto;
                /* 'auto' centraliza a barrinha */
                width: 90px;
                /* Opcional: um pouco menor no mobile para delicadeza */
            }

            .sobre .flex .txt-sobre h2 {
                text-align: center;
                /* Garante que o título esteja no meio */
                display: flex;
                flex-direction: column;
                align-items: center;
                /* Alinha o conteúdo interno (incluindo o after) ao centro */
            }

            .sobre .flex .txt-sobre h2::after {
                margin: 15px auto;
                /* O 'auto' nas laterais centraliza a linha */
                width: 60px;
                /* Opcional: diminuir um pouco a linha no celular fica mais elegante */
            }

            .bento-text p {
                color: #ccc;
                margin-top: 10px;
                font-size: 1em;
            }

            /* Título com degradê */
            .na-tapuio h2.titulo {
                font-size: 3.5em;
                margin-bottom: 50px;
                text-transform: uppercase;
            }

            /* A Mágica do Grid */
            .bento-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: 300px 300px;
                gap: 20px;
            }

            .bento-item {
                position: relative;
                border-radius: 20px;
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.1);
                transition: 0.5s ease;
            }

            /* Faz o primeiro item ocupar 2 linhas */
            .bento-item.grande {
                grid-row: span 2;
                grid-column: span 2;
            }


            .hero-site .txt-hero button {
                display: inline-flex;
                /* Alinha o conteúdo interno */
                align-items: center;
                /* Centraliza verticalmente */
                justify-content: center;
                /* Centraliza horizontalmente */

                width: 100%;
                /* No celular, botões largos são melhores */
                max-width: 300px;
                /* Mas não largo demais */
                margin: 0 auto;
                /* Centraliza o bloco do botão na tela */

                padding: 15px 0;
                /* Remova padding lateral fixo se o texto estiver torto */
                text-align: center;
            }

            .sobre-texto .sobre-box {
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 40px;
                border: 2px solid #f7f7f7;
                padding: 20px;
                border-radius: 12px;
                transition: .7s;
            }


            .sobre-tapuio,
            .sobre-texto,
            .txt-sobre {
                max-width: 100%;
                overflow-x: hidden;
            }

            @media screen and (max-width: 900px) {
                header {
                    background: rgba(70, 70, 70, 0);
                    padding: 1px 20px;
                    box-shadow: var(--shadow-soft);
                }
            }

            section.agendar {
                background-color: #001146;
                justify-content: space-between;
                text-align: center;
                padding: 30px 0;
                box-shadow: 10px 12px 0 rgb(231, 231, 231);
                height: 100%;
            }

            .agendar p {
                font-size: 20px;
                font-weight: 500;
                color: #ffffff;
                margin-top: 2px;
            }

            .agendar h2 {
                color: #ffffff;
                font-size: 2em;
                line-height: 50px;
                font-weight: 700;
                margin-bottom: 20px;
            }

            .agendar-cte button {
                background-color: #000;
                position: relative;
                font-size: 20px;
                background-color: #000;
                border: 2px solid #ffffff;
                color: #fff;
                cursor: pointer;
                transition: .5s;
                border-radius: 100px;
                padding: 20px;
                margin-top: 2px;
                width: 100%;
            }

            .agendar-cte button:hover {
                background: linear-gradient(to right, #003372, #00447c, #003f86);
                color: #ffffff;
            }

            .sobre-texto .sobre-box:hover {
                background-color: #004c94fd;
                cursor: pointer;
            }

            section.sobre-tapuio {
                padding: 80px 0;

                background: linear-gradient(100deg,
                        #005272,
                        #050036);
                background-size: 400% 400%;
                animation: gradientBG 10s ease infinite;
            }

            @keyframes gradientBG {
                0% {
                    background-position: 0% 50%;
                }

                50% {
                    background-position: 100% 50%;
                }

                100% {
                    background-position: 0% 50%;
                }
            }

            .bento-grid {
                grid-template-columns: 1fr;
                /* Uma coluna só no celular */
                grid-template-rows: auto;
            }

            .bento-item.grande {
                grid-row: auto;
                grid-column: auto;
                height: 400px;
            }

            .bento-item {
                height: 250px;
            }

            .sobre .flex {
                flex-direction: column-reverse;
                /* Imagem embaixo do texto ou vice-versa */
                text-align: center;
                /* Centraliza o texto no mobile */
            }

            /* Ajuste das imagens sobrepostas para não sumirem da tela */
            .img-sobre-container {
                width: 100%;
                display: flex;
                justify-content: center;
                margin-top: 50px;
            }

            .img-principal {
                width: 90%;
                /* Ocupa quase a tela toda */
            }

            .img-detalhe {
                width: 150px;
                /* Diminui a foto menor no celular */
                bottom: -20px;
                right: 10px;
            }

            /* Diminuir o tamanho da fonte do título para não quebrar feio */
            .txt-sobre h2 {
                font-size: 2.2em;
            }
        }

        @media screen and (max-width: 878px) {}