/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: sans-serif;
    position: relative;
    background-color: #1a0b59; /* Cor de segurança */
}

/* Wrapper fixo na tela para cobrir todo o site independentemente do tamanho */
.background-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; 
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bg-fundo {
    z-index: 1;
    background: url('img/Fundo.png') center/cover no-repeat; /* Fundo contínuo */
}

.bg-particulas {
    z-index: 2;
    mix-blend-mode: screen; 
    background: url('img/particulas.png') repeat; /* Repete sem dar zoom */
    background-size: auto;
    animation: particulasDrift 60s ease-in-out infinite alternate;
}

.bg-baloes {
    z-index: 3;
    background: url('img/baloes.png') repeat; /* Repete os balões sem dar zoom */
    background-size: auto;
    animation: baloesDrift 45s ease-in-out infinite alternate;
}

/* Animações de movimento contínuo (efeito vento/flutuação) */
@keyframes baloesDrift {
    0% { background-position: 0px 0px; }
    100% { background-position: -250px -500px; } /* Balões flutuam suavemente para o alto e esquerda */
}

@keyframes particulasDrift {
    0% { background-position: 0px 0px; }
    100% { background-position: 300px 200px; } /* Partículas derivam para o lado oposto para criar profundidade 3D */
}

/* Área de conteúdo que ficará por cima */
.conteudo {
    position: relative;
    z-index: 10;
    width: 100%;
}

.conteudo > section {
    margin-top: 80px;
}

.conteudo > section:first-child {
    margin-top: 0;
}

/* Seção Topo (Hero) */
.hero {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0 80px;
}

/* O container agora tem uma proporção fixa para as imagens não saírem do lugar */
.hero-container {
    width: 100%;
    max-width: 1300px;
    position: relative;
    aspect-ratio: 16 / 8; /* Mantém a tela retangular igual ao design original */
    margin: 0 auto;
}

.hero-carro {
    position: absolute;
    bottom: -510%; /* Roda um pouco acima da roda do carro */
    left: 45%; /* Bem ao lado do carro */
    transform: translateX(-50%);
    width: 135%; 
    height: auto;
    z-index: 3;
    filter: drop-shadow(0px 15px 15px rgba(0,0,0,0.7)); 
}

.hero-carrinho {
    position: absolute;
    bottom: -510%; /* Roda um pouco acima da roda do carro */
    left: 51%; /* Bem ao lado do carro */
    transform: translateX(-50%);
    width: 135%; 
    height: auto;
    z-index: 3;
    filter: drop-shadow(0px 15px 15px rgba(0,0,0,0.7)); 
}

.hero-logo {
    position: absolute;
    top: 6%;
    left: -2%;
    width: 28%; 
    height: auto;
    z-index: 4;
}

.hero-escrita {
    position: absolute;
    top: 5%;
    left: 58%;
    transform: translateX(-50%);
    width: 32%;
    height: auto;
    z-index: 4;
}

.hero-car-background {
    position: absolute;
    left: 50%;
    bottom: -30%;
    transform: translateX(-50%);
    width: 140%;
    max-width: 2500px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(162, 102, 255, 1) 0%, rgba(140, 82, 235, 0.95) 15%, rgba(112, 54, 210, 0.75) 30%, rgba(86, 38, 180, 0.55) 45%, rgba(64, 28, 150, 0.45) 60%, rgba(44, 18, 115, 0.32) 75%, rgba(27, 10, 80, 0.22) 88%, rgba(15, 6, 55, 0.18) 95%, rgba(12, 4, 45, 0.16) 100%);
    z-index: 1;
    filter: blur(20px);
    box-shadow: 0 200px 500px rgba(20, 0, 60, 0.45);
}

.hero-sorteio {
    position: absolute;
    bottom: -18%; 
    width: 40%; 
    height: auto;
    z-index: 3;
}

.hero-qrcode {
    position: absolute;
    bottom: -10%; 
    right: 0%; 
    width: 20%; 
    height: auto;
    z-index: 5;
}

/* --- Seção Como Participar --- */
.como-participar {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 350px 20px 120px; /* Espaço do topo (para não grudar no hero) e embaixo */
    position: relative;
    z-index: 4; /* Fica acima do fundo de balões */
}

.participar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Zerei o gap para usar margem */
    width: 100%;
    max-width: 1200px;
}

.img-titulo {
    width: 100%;
    max-width: 450px; 
    height: auto;
    margin-bottom: -40px; /* Puxa o título bem para baixo (ignorando bordas transparentes da imagem) */
    position: relative;
    z-index: 3;
}

.mecanica-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 100px;
}

.img-mecanica {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
}

.marcas-aceleradoras {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 70px 10px 10px;
    position: relative;
    z-index: 4;
}

.marcas-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 900px;
}

.img-marcas-titulo,
.img-descricao-marcas {
    width: 100%;
    max-width: 760px;
    height: auto;
}

.img-marcas-titulo {
    margin-bottom: 0;
    max-width: 620px;
}

.logos-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 20px 120px;
    position: relative;
    z-index: 4;
}

.logos-container {
    width: 100%;
    max-width: 1200px;
    background: #ffffff;
    border-radius: 30px;
    padding: 36px 30px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
}

.logos-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 26px 24px;
    align-items: center;
    justify-items: center;
}

.logo-item {
    width: 100%;
    max-width: 180px;
    max-height: 80px;
    height: auto;
    object-fit: contain;
    opacity: 0.98;
}

.celulares-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    position: relative;
}

.img-zigzag {
    opacity: 0.8; /* Deixando a imagem transparente (ajuste esse valor entre 0.1 e 0.9) */
}

.celulares-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-download-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px; /* Mais espaço para não sobrepor a coluna direita */
    width: 98%;
    max-width: 1400px; /* Aumentei o espaço total para 1400px */
}

.img-phone {
    width: 55%; /* Um pouco maior que antes */
    max-width: 650px; /* O meio-termo perfeito que estávamos procurando */
    height: auto;
    /* Sem scale agressivo para manter a proporção limpa */
}

.app-info-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha o conteúdo à esquerda como no print */
    justify-content: center;
    gap: 20px;
    width: 40%;
    max-width: 450px;
}

.img-qrcode {
    width: 100%;
    max-width: 380px; /* QRCode maior para acompanhar a proporção do celular */
    height: auto;
}

.app-stores {
    display: flex;
    justify-content: flex-start; /* Lojas alinhadas à esquerda também */
    gap: 15px;
    width: 100%;
}

.img-store {
    width: 100%;
    max-width: 190px; /* Aumentado de 150px para 190px para dar mais leitura */
    height: auto;
    transition: transform 0.2s ease;
}

.img-store:hover {
    transform: scale(1.05);
}

.oferta-regionais-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 80px 20px 120px;
    position: relative;
    z-index: 4;
}

.oferta-regionais-container {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.img-confira-promocao {
    width: 100%;
    max-width: 920px;
    height: auto;
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}

.regiao-selector {
    width: 100%;
    max-width: 920px;
    background: #172449; /* Nova cor do input */
    border: none; /* Removido a borda para ficar mais limpo com a nova cor sólida */
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.toggle-regions {
    display: none;
}

.toggle-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 20px;
    cursor: pointer;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.toggle-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: transform 0.25s ease;
}

.toggle-regions:checked + .toggle-label .toggle-icon {
    transform: rotate(45deg);
}

.region-options {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

.toggle-regions:checked + .toggle-label + .region-options {
    max-height: 520px;
    opacity: 1;
    margin-top: 18px;
}

.region-note {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    margin-bottom: 16px;
}

.region-list {
    display: grid;
    gap: 12px;
}

.region-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.region-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(2px);
}

.region-item input {
    width: 18px;
    height: 18px;
    accent-color: #a266ff;
}

.pdf-preview {
    width: 100%;
    max-width: 920px;
    min-height: 720px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
    padding: 20px; /* Adicionado padding para as páginas renderizadas respirarem */
}

.preview-empty {
    width: 100%;
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.18));
}

.pdf-page-canvas {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 25px; /* Espaço entre as páginas */
    border-radius: 15px; /* Deixa as bordas da folha suavemente arredondadas */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* --- Seção Regulamento --- */
.regulamento-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 20px 100px;
    position: relative;
    z-index: 4;
}

.regulamento-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px; /* Espaçamento maior entre o título e a descrição */
    width: 100%;
    max-width: 800px;
}

.img-titulo-regulamento {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.img-subtitulo-regulamento {
    width: 100%;
    max-width: 420px;
    height: auto;
    margin-bottom: 25px; /* Mais distância entre a descrição e o botão */
}

.cta-regulamento {
    display: inline-block;
    transition: transform 0.2s ease;
}

.cta-regulamento:hover {
    transform: scale(1.05); /* Pequeno efeito de zoom ao passar o mouse */
}

.img-cta-regulamento {
    width: 100%;
    max-width: 320px; /* Aumentei o limite do botão */
    height: auto;
}

/* --- Footer --- */
.site-footer {
    width: 100%;
    position: relative;
    z-index: 5;
    background-color: #172449; /* Fundo azul marinho */
    margin-top: 100px;
}

/* Cria as pontas de zigzag (dentes) na parte de cima usando CSS Puro */
.site-footer::before {
    content: "";
    position: absolute;
    top: -64px; /* Sobe o zigzag para fora do footer, sobrepondo 1px para evitar falhas visuais */
    left: 0;
    width: 100%;
    height: 65px; /* Altura de cada ponta (ainda maior) */
    /* Desenha um triângulo e repete ele horizontalmente */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23172449' points='0,100 50,0 100,100'/%3E%3C/svg%3E");
    background-size: 250px 100%; /* Largura de 250px reduz drasticamente a quantidade de pontas */
    background-repeat: repeat-x;
    z-index: 1;
}

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

.footer-left p {
    color: #e5e7eb;
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 300;
}

.footer-right p {
    color: #e5e7eb;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 12px;
    font-weight: 300;
    text-align: right;
}

.social-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.social-handle {
    color: #ffca40;
    font-size: 1.05rem;
    font-weight: 600;
}

.social-icon svg {
    width: 24px;
    height: 24px;
    fill: #ffca40;
    transition: transform 0.2s ease;
}

.social-icon:hover svg {
    transform: scale(1.15); /* Efeito de hover nos ícones das redes */
}

/* =========================================
   ANIMAÇÕES DE ENTRADA (AO CARREGAR O SITE)
========================================= */

@keyframes entradaPop {
    0% { opacity: 0; scale: 0.85; translate: 0px 30px; }
    100% { opacity: 1; scale: 1; translate: 0px 0px; }
}

@keyframes entradaEsquerda {
    0% { opacity: 0; translate: -100px 0px; }
    100% { opacity: 1; translate: 0px 0px; }
}

@keyframes entradaDireita {
    0% { opacity: 0; translate: 100px 0px; }
    100% { opacity: 1; translate: 0px 0px; }
}

/* --- APLICANDO AS ANIMAÇÕES NAS IMAGENS DO TOPO --- */
/* Deixa todos os elementos do hero transparentes inicialmente para a animação ocorrer de forma limpa */
.hero-logo, .hero-escrita, .hero-carro, .hero-carrinho, .hero-sorteio, .hero-qrcode {
    opacity: 0; 
}

/* Sequência de montagem da tela */
.hero-logo { animation: entradaPop 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.hero-escrita { animation: entradaPop 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.2s; }

/* Carro vem deslizando da esquerda e carrinho da direita com atraso */
.hero-carro { animation: entradaEsquerda 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.4s; }
.hero-carrinho { animation: entradaDireita 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.6s; }

.hero-sorteio { animation: entradaPop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.9s; }
.hero-qrcode { animation: entradaPop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 1.1s; }

/* Micro-interação para as marcas (acontece APENAS quando passa o mouse por cima, sem movimento infinito) */
.logo-item { transition: scale 0.3s ease, rotate 0.3s ease, filter 0.3s ease; }
.logo-item:hover { scale: 1.15; rotate: 4deg; filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.15)); }

@media (max-width: 900px) {
    /* --- HERO MOBILE REDESIGN (Formato Poster Vertical) --- */
    .hero {
        padding: 20px 0 0px;
    }
    
    .hero-container {
        aspect-ratio: 3 / 6; /* Mais alto para caber o carro gigante e as badges embaixo */
        width: 100%;
        position: relative;
    }

    .hero-logo {
        top: 2%;
        left: 50%;
        transform: translateX(-50%);
        width: 55%; /* Aumentado para dar mais destaque ao logo da campanha */
    }

    .hero-escrita {
        top: 30%; /* Desceu bem mais para dar muito espaço do logo */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; 
    }

    .hero-car-background {
        top: 55%;
        bottom: auto;
        width: 150vw;
        height: 350px;
    }

    .hero-carro {
        top: 42%; 
        bottom: auto;
        left: 38%; /* Empurrado de volta e com força para a ESQUERDA */
        width: 145%; 
    }

    .hero-carrinho {
        top: 42%;
        bottom: auto;
        left: 44%; /* Acompanha o carro para a esquerda */
        width: 145%;
    }

    .hero-sorteio {
        top: auto;
        bottom: 5%; 
        left: 2%; /* Margem mínima para caber ele gigante */
        transform: none; 
        width: 53%; /* Aumentado consideravelmente */
    }

    .hero-qrcode {
        top: auto;
        bottom: 5%; 
        left: auto;
        right: 2%; /* Margem mínima */
        transform: none; 
        width: 40%; /* Mantido igual para não brigar com o Sorteio */
    }

    /* Ajustes Gerais de Espaçamento entre Seções no Mobile */
    .como-participar {
        padding: 50px 20px 30px; /* Reduzido drasticamente para juntar as seções */
    }

    .img-titulo {
        margin-bottom: 0; /* Remove a margem negativa agressiva do desktop para não sobrepor */
    }

    .mecanica-wrapper {
        margin-top: 10px; /* Dá apenas um pequeno respiro */
    }

    .marcas-aceleradoras {
        padding: 20px 10px 10px;
    }

    .logos-section {
        padding: 10px 20px 30px; /* Cortando o fundo gigante de 120px do desktop */
    }

    /* Grade de Logos */
    .logos-container {
        padding: 20px;
    }

    .logos-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas de logos no celular */
        gap: 20px 15px;
    }

    /* Seção Celulares / App Responsivo */
    .celulares-section {
        padding: 30px 20px;
    }

    .celulares-wrapper {
        padding: 50px 20px; 
        background-color: rgba(23, 36, 73, 0.7); /* Fundo limpo azul escuro semi-transparente substituindo o zigzag no mobile */
        border-radius: 35px; /* Bordas arredondadas suaves */
    }

    .img-zigzag {
        display: none; /* Remove a imagem que estava ficando distorcida (esticada) no celular */
    }

    .app-download-container {
        position: relative; /* Volta ao fluxo normal da página para empurrar as próximas seções */
        transform: none;
        top: auto;
        left: auto;
        flex-direction: column;
        gap: 30px;
        z-index: 2;
        width: 100%;
    }

    .img-phone {
        width: 100%; /* Aumenta bastante o celular no mobile */
        max-width: 450px;
        transform: scale(1.1); /* Dá um pequeno efeito 3D vazando o fundo novo */
    }

    .app-info-col {
        width: 100%;
        align-items: center; /* Centraliza tudo no celular */
        margin-top: 15px; /* Compensa o scale do celular para não sobrepor */
    }

    .img-qrcode {
        width: 75%; /* Diminui a imagem do "Baixe Aqui" (QRCode) no mobile */
        max-width: 240px;
    }

    .app-stores {
        justify-content: center;
    }

    /* Ofertas Regionais e PDF */
    .oferta-regionais-section {
        padding: 40px 20px 40px; /* Reduzindo espaço gigante de 120px que vinha do desktop */
    }

    .oferta-regionais-container {
        gap: 18px;
    }

    .img-confira-promocao,
    .regiao-selector,
    .pdf-preview {
        max-width: 100%;
    }

    .pdf-preview {
        min-height: 400px;
        padding: 10px;
    }

    .preview-empty {
        min-height: 300px;
        font-size: 0.9rem;
        padding: 20px;
    }

    .pdf-page-canvas {
        margin-bottom: 15px;
    }

    /* Regulamento */
    .regulamento-section {
        padding: 20px 20px 40px; /* Reduzindo de 100px para 40px no mobile */
    }

    .regulamento-container {
        gap: 20px;
    }
    
    .img-subtitulo-regulamento {
        margin-bottom: 10px;
    }

    /* Footer Responsivo */
    .site-footer {
        margin-top: 20px; /* Mais colado à última seção */
    }
    
    .site-footer::before {
        top: -40px;
        height: 41px;
        background-size: 150px 100%; /* Dentes do zigzag menores para a tela estreita do celular */
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        padding: 40px 20px;
    }
    
    .footer-left p, .footer-right p {
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}