:root {
            --unimed-green: #00995c;
            --unimed-dark: #006b3f;
            --unimed-light: #e6f5ef;
            --unimed-red: #e50046;
            --unimed-cinza: #e8e9eb;
            --unimed-verdeescuro: #003e1b;
            --unimed-verdelimao: #bcd034;
            --pl-uniredeRe: #21955d;
            --pl-uniredePe: #339cbe;
            --pl-unisaude: #be4b66;
            --pl-prataextra: #46195f;
            --pl-diamante: #035e53;
            --pl-unisaudeflx: #88b248;
            --pl-uniflexRe: #a58227;
            --pl-uniflexPe: #cb6b1e;
            --bg-footer: #003e1b;
        }


        .logomarca {
            /* aspect-ratio: 500 / 600;*/
            width: 20vh;
            min-height: 60px;
            background-image: url('imagens/logomarca-55anos.png');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            /* transform: translateY(0px); */
        }

        footer {
            background-color: var(--bg-footer);
        }

        /* ============================================
   TELAS GRANDES (1440px+)
   ============================================ */
        /* @media (min-width: 1440px) {
    .parallax-container {
        height: 75vh;
        max-height: 900px;
    }
} */

        /* ============================================
   BASE (Mobile First - telas pequenas)
   ============================================ */
        /* .parallax-container {
    position: relative;
    width: 100%;
    height: 55vh; 
    overflow: hidden;    
} */

        .parallax-container {
            position: relative;
            width: 100%;
        }

        .layer {
            position: absolute;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
        }

        .layer1 {
            aspect-ratio: 500 / 600;
            background-image: url('imagens/bg_estadio.png');
            transform: translateY(0px);
        }

        .layer2 {
            background-image: url('imagens/img-personagens01.png');
            z-index: 1;
        }

        .layer3 {
            background-image: url('imagens/img-titulo.png');
            z-index: 2;
            /* Atrás do título */
        }

        .layer4 {
            background-image: url('imagens/img-personagens02.png');
            z-index: 1;
            /* À frente de tudo */
        }

        .layer5 {
            background-image: url('imagens/img-confetes.png');
            /* Ex: Gramado próximo ou jogador */
            /* À frente de tudo */
        }

        @media (min-width: 1440px) {
            .parallax-container {

                height: 71vh;
                /* max-height: 720px; */
                overflow: hidden;
            }

            .layer {
                position: absolute;
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
            }

            .layer1 {
                aspect-ratio: 500 / 600;
                width: 100%;
                background-size: 100%;
                background-position: bottom;
                transform: translateY(0px);
            }

            .layer2 {
                background-size: 34vh;
                background-position: left 50%;
                z-index: 1;
            }

            .layer3 {
                background-size: 34vw auto;
                background-position: center 25%;
                z-index: 2;
                /* Atrás do título */
            }

            .layer4 {
                /* Ex: Gramado próximo ou jogador */
                background-size: 42vh auto;
                /* Um pouco maior para cobrir as bordas no movimento */
                background-position: bottom right;
                z-index: 1;
                /* À frente de tudo */
            }

            .layer5 {
                /* Ex: Gramado próximo ou jogador */
                background-size: 100%;
                /* Um pouco maior para cobrir as bordas no movimento */
                background-position: top bottom;
                z-index: 1;
                /* À frente de tudo */
            }

            /* Isso faz com que as imagens deslizem suavemente para 
           as posições definidas no JS assim que a página carrega */
            .layer1,
            .layer2,
            .layer3,
            .layer4,
            .layer5 {
                transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
                will-change: transform;
                background-repeat: no-repeat;
            }

            .layer2,
            .layer3,
            .layer4,
            .layer5 {
                position: absolute;
                /* ou fixed, dependendo do layout */
                top: 0;
                left: 0;
            }

            /* mobile */
        }

        /* ============================================
   TABLET (768px+)
   ============================================ */
        /* @media (min-width: 768px) { */
        @media (min-width: 768px) and (max-width: 1439px) {
            .parallax-container {
                height: 46vh;
                overflow: hidden;
                position: relative;
                /* border: red solid 1px; */
            }

            .layer1 {
                background-size: cover;
                background-position: center;
            }

            .layer2 {
                background-size: 18vh auto;
                background-position: left 55%;
                left: 3%;
            }

            .layer3 {
                background-size: 47vw auto;
                background-position: center 22%;
            }

            .layer4 {
                background-size: 23vh auto;
                background-position: bottom right;
                /* border: red solid 1px; */
            }

            .layer5 {
                background-size: cover;
                background-position: center;
            }

        }

        /* ============================================
   DESKTOP (1024px+)
   ============================================ */
        /* @media (min-width: 1024px) {
            .parallax-container {
                height: 55vh;
                position: relative;
            }

            .layer1 {
                aspect-ratio: 500 / 600;
                background-position: bottom;
            }

            .layer2 {
                background-size: 24vh auto;
                background-position: left 55%;
            }

            .layer3 {
                background-size: 44vw auto;
                background-position: center 25%;
            }

            .layer4 {
                background-size: 29vh auto;
                background-position: bottom right;
            }
        } */

        /* ============================================
   MOBILE (menor que 768px)
   ============================================ */
        @media (max-width: 767px) {
            .parallax-container {
                height: 42vh;
                /* Altura reduzida para caber bem em telas pequenas */
                overflow: hidden;
                position: relative;
            }

            .layer1 {
                background-size: cover;
                /* Zoom maior no estádio para preencher sem bordas vazias */
                background-position: center center;
                z-index: 1;
            }

            .layer2 {
                background-size: 14vh auto;
                background-position: left 75%;
                left: 1%;
                /* Pequeno afastamento da borda */
            }

            .layer3 {
                background-size: 60vw auto;
                /* Título maior para manter legibilidade */
                background-position: center 20%;
                z-index: 3;
            }

            .layer4 {
                background-size: 18vh auto;
                background-position: bottom right;
                /* right: 2%; */
                /* Pequeno afastamento da borda */
                z-index: 1;
            }

            .layer5 {
                background-size: cover;
                background-position: center center;
                z-index: 2;
            }

            .w-10e.h-10e {
                width: 14vw;
                height: 14vw;
            }
        }

        /* /mobile */


        .bg-unimed {
            background-color: var(--unimed-green);
        }

        .bg-ur-red {
            background-color: var(--unimed-red);
        }

        .bg-ur-cinza {
            background-color: var(--unimed-cinza);
        }

        .text-unimed {
            color: var(--unimed-green);
        }

        .text-verdeescuro {
            color: var(--unimed-verdeescuro);
        }

        .text-verdelimao {
            color: var(--unimed-verdelimao);
        }

        .text-ur-cinza {
            color: var(--unimed-cinza);
        }

        .border-unimed {
            border-color: var(--unimed-green);
        }

        /* Efeitos da Figurinha */
        /* Container de Perspectiva */
        .sticker-container {
            /* position: relative;
            width: 100%;
            height: 100%;
            cursor: pointer; */

            /* ESSENCIAL para o 3D funcionar */
            perspective: 1200px;
        }

        /* O Card que gira */
        .sticker-card {
            position: relative;
            width: 100%;
            height: 100%;

            text-align: center;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;

            aspect-ratio: 3/4;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #e2e8f0;
            /* background: white; */
            /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            /* overflow: hidden; */
        }

        /* Efeito de Giro ao passar o mouse */
        .sticker-container:hover .sticker-card {
            transform: rotateY(180deg);
        }

        /* ===== FRENTE ===== */
        .sticker-front {
            position: absolute;
            inset: 0;
            /* top:0; right:0; bottom:0; left:0 */
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform: rotateY(0deg) translateZ(1px);
            /* ESSENCIAL para alguns navegadores */
            background: #f1c929;
            background-image: url("imagens/bg-card-frente.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            border-radius: 0.5rem;
            border: 2px solid rgba(0, 153, 93, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
            padding: 0;
            margin: 0.5em;
            overflow: hidden;
            /* Impede que filhos vazem */
            z-index: 2;
        }

        /* ===== VERSO ===== */
        .sticker-back {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform: rotateY(180deg) translateZ(1px);
            ;
            /* Começa de costas */
            /* background: linear-gradient(60deg, #f1cb30 0%, #268c55 100%); */
            /*background: #ffffff; */
            background-image: url("imagens/bg-card-verso.png"), linear-gradient(60deg, #f1cb30 0%, #268c55 100%);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            border-radius: 1rem;
            border: 2px solid #00995D;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5em;
            margin: 0.5em;
            /* Garante que fique POR TRÁS inicialmente */
            z-index: 1;
        }

        /* Força o container a ser um círculo perfeito */
        .w-10e.h-10e {
            width: 8vw;
            /* 48px */
            height: 8vw;
            /* 48px */
            border-radius: 50% !important;
            /* Força o formato de círculo */
            overflow: hidden !important;
            /* Corta tudo o que estiver fora do círculo */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #fff;
            margin: 0.6em 0.2em 0.2em 0.2em;
            /* Cor de fundo cinza claro */
        }

        /* Brilho (Sticker Shine) - Aplicado apenas na frente */
        .sticker-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-25deg);
            transition: all 0.75s ease;
            pointer-events: none;
            z-index: 10;
        }

        .sticker-container:hover .sticker-shine {
            left: 200%;
        }

        /* Ajuste de escala no container para não quebrar o 3D */
        .sticker-container:hover {
            transform: scale(1.05);
            transition: transform 0.3s ease;
        }

        .plan-card {
            border-top: 10px solid var(--unimed-green);
        }

        .plan-card.uniredeRe {
            border-top-color: var(--pl-uniredeRe);
        }

        .plan-card.uniredePe {
            border-top-color: var(--pl-uniredePe);
        }

        .plan-card.unisaude {
            border-top-color: var(--pl-unisaude);
        }

        .plan-card.prataextra {
            border-top-color: var(--pl-prataextra);
        }

        .plan-card.diamante {
            border-top-color: var(--pl-diamante);
        }

        .plan-card.unisaudeflx {
            border-top-color: var(--pl-unisaudeflx);
        }

        .plan-card.uniflexRe {
            border-top-color: var(--pl-uniflexRe);
        }

        .plan-card.uniflexPe {
            border-top-color: var(--pl-uniflexPe);
        }

        /* buttons */
        button.uniredeRe {
            background-color: var(--pl-uniredeRe);
        }

        button.uniredePe {
            background-color: var(--pl-uniredePe);
        }

        button.unisaude {
            background-color: var(--pl-unisaude);
        }

        button.prataextra {
            background-color: var(--pl-prataextra);
        }

        button.diamante {
            background-color: var(--pl-diamante);
        }

        button.unisaudeflx {
            background-color: var(--pl-unisaudeflx);
        }

        button.uniflexRe {
            background-color: var(--pl-uniflexRe);
        }

        button.uniflexPe {
            background-color: var(--pl-uniflexPe);
        }

        /* Drawer and Modal Animations */
        #drawer {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #drawer.translate-x-full {
            transform: translateX(100%);
        }

        .drag-over-zone {
            background-color: rgba(0, 153, 93, 0.15) !important;
            border: 3px dashed #00995D !important;
            transform: scale(1.05);
        }

        .dragging-card {
            opacity: 0.4;
            transform: scale(0.9);
        }

        @keyframes pulse-slot {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 153, 93, 0.4);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(0, 153, 93, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(0, 153, 93, 0);
            }
        }

        .slot-highlight {
            animation: pulse-slot 2s infinite;
        }

        :root {
            --gap: 12px;
            --radius: 10px;
        }

        .mosaic-container {
            display: grid;
            /* Criamos 10 colunas pequenas para ter precisão no desalinhamento */
            grid-template-columns: repeat(10, 1fr);
            grid-auto-rows: 250px;
            gap: var(--gap);
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 var(--gap);
        }

        .item {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius);
        }

        .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* --- DISTRIBUIÇÃO BASEADA NA SUA IMAGEM --- */

        /* Superior Esquerdo */
        .item-1 {
            grid-column: 1 / 4;
            grid-row: 1;
        }

        /* Superior Meio (Mais largo) */
        .item-2 {
            grid-column: 4 / 8;
            grid-row: 1;
        }

        /* Inferior Esquerdo (Avança um pouco mais para a direita que o de cima) */
        .item-3 {
            grid-column: 1 / 5;
            grid-row: 2;
        }

        /* Inferior Meio (Encaixa no espaço que sobrou) */
        .item-4 {
            grid-column: 5 / 8;
            grid-row: 2;
        }

        /* Bloco Vertical Direita (Ocupa as duas linhas) */
        .item-5 {
            grid-column: 8 / 11;
            grid-row: 1 / 3;
        }

        /* Hover Effect */
        .item:hover img {
            transform: scale(1.08);
        }

        /* RESPONSIVIDADE */
        @media (max-width: 900px) {
            .mosaic-container {
                grid-template-columns: repeat(2, 1fr);
                /* 2 colunas no tablet */
                grid-auto-rows: 200px;
            }

            .item-1,
            .item-2,
            .item-3,
            .item-4 {
                grid-column: span 1;
            }

            .item-5 {
                grid-column: span 2;
                grid-row: span 2;
            }

            /* Destaque para a vertical */
        }

        @media (max-width: 500px) {
            .mosaic-container {
                display: flex;
                flex-direction: column;
                /* Pilha única no celular */
            }

            .item {
                height: 250px;
            }
        }