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

        body {
            background: #f5f5f5;
            color: #222;
            overflow-x: hidden;
            height: 100%;
            font-family: 'Montserrat';
            margin: 0;
        }

        body.preload {
            visibility: hidden;
        }

        body.loaded {
            visibility: visible;
        }

        header {
            background: #fff;
            border-bottom: 1px solid #ddd;
        }

        /* imagem centralizada no topo */

        /* menu */
        nav {
            display: flex;
            gap: 24px;
        }

        nav a {
            text-decoration: none;
            color: #000;
            font-weight: 600;
            white-space: nowrap;
        }

        /* container dos botões */
        .acoes-topo {
            display: flex;
            gap: 12px;
            align-items: center;
        }



        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }


        main {

            flex: 1;

            display: flex;

            flex-direction: column;

            align-items: stretch;

            padding-top: 5px;

            padding-bottom: 5px;

            gap: 5px;

            position: relative;

            z-index: 1;

            overflow: hidden;

        }

        /* logo */
        .logo img {
            height: 35px;
            width: auto;
        }

        .imagem-wrapper {
            padding: 0 16px;
        }

        .imagem-container {

            position: relative;

            width: min(62vw, 1900px);

            max-height: calc(100dvh - 47px);

            margin: 0 auto;

            transition:
                transform .45s cubic-bezier(.22,
                    1,
                    .36,
                    1);

        }

        /* imagem */
        .imagem-container img {

            width: 100%;

            height: auto;

            max-height: calc(100dvh - 47px);

            object-fit: contain;

        }

        main.menu-aberto .imagem-container {

            transform: translateX(-29%);

        }



        .item-menu:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0);
        }

        .item-menu {
            text-align: left;
            cursor: pointer;
        }

        .titulo {
            position: relative;
            width: 100%;
            margin-top: 0px;
            text-align: center;
            font-size: 2.5em;
            color: #646262;
        }

        .subtitulo {
            position: relative;
            width: 100%;
            margin-bottom: 5px;
            text-align: center;
            font-size: 1.5em;
            font-family: system-ui;
            font-style: italic;
            color: #646262;
        }

        .infotitulo {
            position: relative;
            width: 100%;
            margin-bottom: 10px;
            text-align: center;
            font-size: 1.0em;
            font-family: system-ui;
            color: #646262;
        }

        /* imagem base */
        .imagem-base {
            width: 100%;
            display: block;
        }

        /* imagem que fica por cima */
        .imagem-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.5s ease-in-out;
        }

        .fundoMenu {
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 14px;
        }

        body.loading {
            cursor: wait;
        }

        .capture-overlay {
            position: fixed;
            inset: 0;

            background: rgba(255, 255, 255, 0.9);

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

            font-family: 'Montserrat';
            font-size: 18px;
            font-weight: 600;
            color: #333;

            opacity: 0;
            visibility: hidden;

            transition: 0.2s;

            z-index: 99999;
        }

        .capture-overlay.ativo {
            opacity: 1;
            visibility: visible;
        }

        /* back começa visível */
        .imagem-overlay.back {
            opacity: 1;
            z-index: 1;
        }

        /* front começa invisível */
        .imagem-overlay.front {
            z-index: 2;
        }


        footer {
            width: 100%;
            background: #505050;
            color: #ddd;
            font-family: 'Montserrat';
            padding: 20px 20px;
            text-align: center;
            font-size: 14px;
            line-height: 1.8;
        }

        .footer-links {
            margin-bottom: 20px;
        }

        .footer-links a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        .link-nwm{
            color:#1e88e5;
            text-decoration:none;
            font-weight:700;
            position:relative;
        }

        .link-nwm::after{
            content:'';
            position:absolute;
            left:0;
            bottom:-2px;
            width:0;
            height:2px;
            background:#1e88e5;
            transition:.3s;
        }

        .link-nwm:hover::after{
            width:100%;
        }

        header {
            background: #fff;
            box-shadow: 0px 2px 20PX 2px #DDD9CE;
        }

        .header-container {
            max-width: 100vw;
            margin: 0 auto;
            padding: 5px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .hotspot {
            position: absolute;
            z-index: 9999;

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

            opacity: 1 !important;
            visibility: visible !important;
        }

        .thumb-label {

            position: relative;
            color: #FFF;
            width: auto;
            padding-left: 10px;
            padding-right: 10px;
            font-family: "Montserrat";
            font-size: 14px;
            display: flex;
            flex-direction: column;
            /* 🔥 quebra linha */
            line-height: 1.1;

        }

        .menu-overlay {

            position: absolute;

            top: 0;

            right: 0;

            width: 34%;

            height: 100%;

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

            z-index: 9999;

            overflow: hidden;

            transform: translateX(110%);

            transition: transform .45s ease;

            will-change: transform;

            box-shadow:
                -10px 0 30px rgba(0, 0, 0, .08);

        }

        /* =========================
   MENU ABERTO
========================= */

        .menu-overlay.ativo {

            transform: translateX(0);

        }

        /* =========================
   AREA SCROLL
========================= */

        .menu-scroll {

            position: absolute;

            inset: 0;

            overflow-y: auto;

            overflow-x: hidden;

            padding:

                130px 20px 80px 30px;

            display: grid;

            gap: 16px;

            align-content: start;

            scroll-behavior: smooth;

            background: #fff;

        }

        /* =========================
   REMOVE SCROLLBAR
========================= */

        .menu-scroll::-webkit-scrollbar {

            display: none;

        }

        .menu-scroll {

            -ms-overflow-style: none;

            scrollbar-width: none;

        }

        /* =========================
   BOTÕES SETAS
========================= */

        .menu-arrow {

            position: absolute;

            left: 50%;

            transform: translateX(-50%);

            width: 50px;

            height: 18px;

            border: none;

            background:
                #beb9b3;

            color: #fff;

            cursor: pointer;

            z-index: 30;

            display: flex;

            align-items: center;

            justify-content: center;

            backdrop-filter: blur(10px);

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

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

        }

        /* =========================
   HOVER
========================= */

        .menu-arrow:hover {

            background:
                #D4CCBF;

            transform:
                translateX(-50%) scale(1.08);

        }

        /* =========================
   CLICK
========================= */

        .menu-arrow:active {

            transform:
                translateX(-50%) scale(.95);

        }

        /* =========================
   SETA CIMA
========================= */

        .menu-arrow.up {

            top: 50px;
            border-radius: 0px 0px 10px 10px;

        }

        /* =========================
   SETA BAIXO
========================= */

        .menu-arrow.down {

            bottom: 0px;
            border-radius: 10px 10px 0px 0px;

        }

        /* =========================
   BOTÃO FECHAR
========================= */

        .menu-close {
            position: absolute;
            top: 50%;
            left: 0px;
            width: 18px;
            height: 50px;
            border: none;
            border-radius: 0px 10px 10px 0px;
            background: #BEB9B5;
            color: #fff;
            cursor: pointer;
            z-index: 40;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
            transition: .3s ease;

        }

        /* =========================
   HOVER CLOSE
========================= */

        .menu-close:hover {

            background:
                #D4CCBF;

            transform: scale(1.08);

        }

        /* =========================
   ICONES
========================= */

        .menu-arrow i,
        .menu-close i {

            font-size: 16px;

            pointer-events: none;

        }


        .menu-header {
            position: sticky;
            top: 0;
            background: #ffffff;
            padding: 15px 20px;
            text-align: center;
            z-index: 10;
            border-bottom: 1px solid #ddd;
        }

        .menu-header h2 {
            font-size: 1.0em;
            font-family: "Montserrat";
            color: #444;
            margin: 0;
        }


        .menuTitulo {
            font-style: "MOntserrat";
        }

        .btn-fechar-menu {
            position: fixed;
            top: 12px;
            right: 10px;
            width: 25px;
            height: 25px;
            border: none;
            border-radius: 15%;
            color: #000;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10000;
            transition: 0.2s;
        }

        .btn-fechar-menu:hover {
            background: #6f7b91;
            transform: scale(1.05);
            color: #FFF;
        }

        .menu-conteudo {

            display: grid;

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

            gap: 18px;

            width: 100%;

        }

        .item-menu:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0);
        }

        .item-menu {

            cursor: pointer;

            transition: .25s ease;

        }


        .thumb-box {

            width: 100%;

            aspect-ratio: 1/1;

            border-radius: 16px;

            border: 1px solid #00000026;

            overflow: hidden;

            background: #f3f3f3;

            box-shadow:
                0 4px 14px rgba(0, 0, 0, .08);

        }

        .thumb {

            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

            transition:
                transform .35s ease;

        }

        .item-menu:hover .thumb {

            transform: scale(1.05);

        }

        .label-menu {

            margin-top: 8px;
            font-family: "Montserrat";
            text-align: center;

        }

        .label-menu .nome {

            color: #fff;

            font-size: 13px;

            font-weight: 600;

            text-align: center;

            letter-spacing: .4px;

        }

        .label-menu .nome {

            color: #4b4b4b;

            font-size: 14px;

            font-weight: 500;

            letter-spacing: .3px;

            line-height: 1.3;

        }

        .thumb-label .linha {
            font-size: 12px;
            font-family: 'Montserrat';
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            height: 36px;
            padding: 0 10px;
            border: none;
            border-radius: 7px;
            background: #505050;
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.3px;
            cursor: pointer;
            white-space: nowrap;
            transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(4px);

        }

        .btn i {

            font-size: 14px;

            transition: transform 0.2s ease;

        }

        .btn:hover {

            transform: translateY(-2px);

            background: linear-gradient(135deg,
                    rgb(82, 76, 77),
                    rgb(58, 54, 55));

            box-shadow:
                0 10px 24px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);

        }

        .btn:hover i {

            transform: rotate(-8deg);

        }

        .btn:active {

            transform: scale(0.97);

            box-shadow:
                0 4px 10px rgba(0, 0, 0, 0.18);

        }

        .btn:focus {

            outline: none;

            box-shadow:
                0 0 0 4px rgba(120, 120, 120, 0.18),
                0 8px 20px rgba(0, 0, 0, 0.2);

        }

        .btn-cards {
            padding: 20px;
            font-size: 15px;
        }

        .card:hover .btn {
            background: rgb(82, 81, 81);
        }

        .mobile-text {
            display: none;
        }

        .btn-troca {

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

            width: 40px;

            height: 40px;

            border: none;

            border-radius: 50%;

            background: rgba(255, 255, 255, 0.15);

            backdrop-filter: blur(6px);

            color: #fff;

            font-size: 20px;

            cursor: pointer;

            z-index: 50;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: 0.3s;

            animation: pulsar 1.8s infinite;

            box-shadow:
                0 0 10px rgba(255, 255, 255, 0.15);

        }

        .btn-troca:hover {

            transform:
                translate(-50%, -50%) scale(1.08);

            background: rgba(255, 255, 255, 0.25);

        }

        @keyframes pulsar {

            0% {

                transform:
                    translate(-50%, -50%) scale(1);

                box-shadow:
                    0 0 0 0 rgba(255, 255, 255, 0.5);

            }

            70% {

                transform:
                    translate(-50%, -50%) scale(1.02);

                box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);

            }

            100% {

                transform:
                    translate(-50%, -50%) scale(1);

                box-shadow:
                    0 0 0 0 rgba(255, 255, 255, 0);

            }

        }

        .fullscreen-mode #btnDownloadDesktop {

            display: none;

        }

        .fullscreen-mode .ou-separador {

            display: none;

        }

        .fullscreen-mode footer {

            display: none;

        }

        .fullscreen-mode .imagem-container {

            width: min(80vw, 2600px);

            max-height: calc(100dvh - 10px);


        }

        .fullscreen-mode main {

            justify-content: center;

            margin-top: 5px;

            flex-direction: row;

            align-items: flex-start;

            height: 92dvh;

            padding: 0;

        }

        .fullscreen-mode .menu-conteudo {

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

        }

        .fullscreen-mode .menu-overlay {

            height: 92vh;
            width: 17%;

        }

        .fullscreen-mode main.menu-aberto .imagem-container {

            transform: translateX(-10%);

        }

        .fullscreen-mode .thumb-label {
            font-size: 18px;
        }

        .fullscreen-mode .thumb-label .linha {
            font-size: 14px;
        }

        .download-mode .hotspot{

            transform:scale(.72);


        }
        .modal-qr{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

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

    z-index:99999;

    backdrop-filter:blur(4px);

}

.modal-qr-content{

    position:relative;

    width:90%;
    max-width:450px;

    background:#fff;

    border-radius:24px;

    padding:35px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

    animation:qrShow .3s ease;

}

.modal-qr-content h2{

    color:#1e40af;

    margin-bottom:15px;

}

.modal-qr-content p{

    color:#666;

    line-height:1.6;

    margin-bottom:25px;

}

#qrcode{

    display:flex;

    justify-content:center;

    margin:25px 0;

}

.qr-info{

    color:#555;

    font-size:15px;

}

.fechar-qr{

    position:absolute;

    right:15px;

    top:15px;

    width:35px;
    height:35px;

    border:none;

    border-radius:50%;

    background:#f3f4f6;

    cursor:pointer;

    font-size:12px;

}

.fechar-qr:hover{

    background:#e5e7eb;

}


@keyframes qrShow{

    from{

        opacity:0;

        transform:translateY(20px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

.qr-texto{
    color:#666;
    line-height:1.6;
    margin-bottom:20px;
}

.ou-separador{
    margin:25px 0 15px;
    color:#999;
    font-size:14px;
    position:relative;
}

.ou-separador::before,
.ou-separador::after{
    content:'';
    position:absolute;
    top:50%;
    width:35%;
    height:1px;
    background:#ddd;
}

.ou-separador::before{
    left:0;
}

.ou-separador::after{
    right:0;
}

.btn-download-desktop{
display: inline-block;
    padding: 12px 25px;
    border-radius: 10px;
    border: 1px solid #CCC;
    background: #ffffff;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
    cursor: pointer;
}

.btn-download-desktop:hover{
    background:#e5e7eb;
    transform:translateY(-2px);
}

        @media (max-width: 768px) {

            /* =========================
       LAYOUT
    ========================= */

            main {

                flex-direction: column;

                align-items: center;

                gap: 10px;

                padding:

                    5px 5px 20px 5px;

                height: calc(100dvh - 160px);

            }

            main.menu-aberto .imagem-container {

                transform: none;

            }

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

            .header-container {

                padding: 14px 12px;

            }

            .desktop-text {

                display: none;

            }

            .mobile-text {

                display: inline;

            }

            .logo img {

                width: 140px;

                height: auto;

            }

            /* =========================
       BOTÕES HEADER
    ========================= */

            .btn {

                height: 34px;

                font-size: 11px;

                padding: 0 12px;

                border-radius: 10px;

            }

            .btn-cards {

                padding: 16px;

                font-size: 14px;

            }

            /* =========================
       IMAGEM
    ========================= */

            .imagem-container {

                width: min(100vw, 420px);

            }

            .imagem-wrapper {

                padding-left: 14px;

            }

            /* =========================
       HOTSPOTS
    ========================= */

            .thumb-label .nome {

                font-size: 7px;

            }

            .thumb-label .linha {

                font-size: 5px;

            }

            .btn-troca {

                width: 15px;
                height: 15px;
                font-size: 7px;

            }

            /* =========================
       MENU OVERLAY
    ========================= */
            .menu-overlay {

                position: relative;

                width: 100%;

                height: 40vh;

                margin-top: 0px;

                overflow: hidden;

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

                box-shadow: 0px 27px 23px #ccc;

                display: flex;

                flex-direction: column;

                transform: translateY(-20px);

                opacity: 0;

                visibility: hidden;

                pointer-events: none;

                transition:

                    opacity .3s ease,
                    transform .35s ease;

            }

            .menu-overlay.ativo {

                transform: translatey(0);

                opacity: 1;

                visibility: visible;

                pointer-events: auto;

            }

            .menu-overlay,
            .menu-overlay * {

                -webkit-tap-highlight-color: transparent;

            }

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

            .menu-header {

                padding:

                    16px 14px 12px 14px;

                flex-shrink: 0;


            }

            .menu-header h2 {

                font-size: .8em;

                text-align: center;

            }

            /* =========================
       ÁREA SCROLL
    ========================= */

            .menu-scroll {

                position: relative;
                height: calc(100%);

                overflow-y: auto;

                overflow-x: hidden;

                padding:

                    10px 12px 50px 12px;

            }

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

            .menu-conteudo {

                display: grid;

                grid-template-columns:

                    repeat(3, 1fr);

                gap: 14px;

                padding: 0;

                width: 100%;

            }

            /* =========================
       ITEM MENU
    ========================= */

            .item-menu {

                width: 100%;

            }

            /* =========================
       THUMB BOX
    ========================= */

            .thumb-box {

                width: 100%;

                aspect-ratio: 1 / 1;

                border-radius: 14px;

                overflow: hidden;

            }

            /* =========================
       THUMB
    ========================= */

            .thumb {

                width: 100% !important;

                height: 100%;

                object-fit: cover;

                display: block;

            }

            /* =========================
       LABEL MENU
    ========================= */

            .label-menu {
                margin-top: 0px;
                padding:
                    5px 0px;

            }

            .label-menu .nome {

                font-size: 10px;

            }

            /* =========================
       BOTÕES MENU
    ========================= */

            .menu-arrow,
            .menu-close {

                width: 30px;
                height: 30px;

            }

            .menu-arrow i,
            .menu-close i {

                font-size: 12px;

            }

            .menu-arrow.up,
            .menu-arrow.down {

                display: none;

            }


            .menu-close {
                display: none;
                top: 6px;
                right: 10px;

            }

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

            .hero {

                padding: 20px 12px;

            }

            .hero p {

                font-size: 13px;

            }

            .hero h1 {

                font-size: 26px;

            }

            /* =========================
       CARD CONTENT
    ========================= */

            .card-content p {

                font-size: 12px;

            }

            .card-content h2 {

                font-size: 20px;

            }

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

            footer {

                text-align: center;

                font-size: 10px;

                line-height: 1.7;

                padding: 15px;

            }

            .img_footer img {

                width: 100px;

            }

        }