/* ==========================================================================
   1. IMPORTAÇÃO DE FONTES LOCAIS E VARIÁVEIS
   ========================================================================== */
@font-face {
    font-family: 'Vosage';
    src: url('../assets/Fonts/Vosage.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Paleta Poder Feminino */
    --cor-fundo-escuro: #161616;
    --cor-preto: #000000;
    --cor-cinza: #595959;
    
    /* Tons de Vinho/Vermelho */
    --cor-vinho-principal: #600A18;
    --cor-vinho-escuro: #500B15;
    --cor-vinho-claro: #851728;
    
    /* Tons Claros e Dourados/Pêssego */
    --cor-base-clara: #EFE2D6;
    --cor-dourado-1: #D8C1AA;
    --cor-dourado-2: #C9AD92;
    --cor-dourado-3: #CFBDAC;

    /* Fontes */
    --fonte-principal: 'Poppins', sans-serif;
    --fonte-destaque: 'Vosage', serif; 
}

/* ==========================================================================
   2. RESET BÁSICO E BODY (Nível de Aplicação Nativa)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Suaviza o toque e o scroll em dispositivos mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--cor-preto); 
    font-family: var(--fonte-principal);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; /* Trava o fundo do desktop, isolando a Linkpage */
}

/* ==========================================================================
   3. ESTRUTURA DA LINKPAGE (Responsividade Perfeita)
   ========================================================================== */
#conteudo-pagina {
    width: 100%;
    max-width: 480px; 
    height: 100vh; 
    position: relative;
    overflow-y: auto; 
    overflow-x: hidden;
    /* Sombra elegante que separa o card do fundo preto no desktop */
    box-shadow: 0 0 60px rgba(216, 193, 170, 0.08); 
    display: flex;
    flex-direction: column;
    background-color: var(--cor-fundo-escuro);
    
    /* Esconde a barra de rolagem nativa para um visual limpo */
    scrollbar-width: none; 
}

#conteudo-pagina::-webkit-scrollbar {
    display: none; 
}

/* ==========================================================================
   4. CABEÇALHO (Logo Topo)
   ========================================================================== */
.cabecalho-topo {
    position: absolute;
    top: 35px;
    width: 100%;
    text-align: center;
    z-index: 4; /* Fica acima da máscara escura */
}

.logo-cabecalho {
    width: 30px; /* Tamanho delicado e proporcional */
    height: auto;
    /* Contorna o PNG exato com uma sombra para dar leitura sobre a foto */
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}

/* ==========================================================================
   5. IMAGENS DE FUNDO ALTERNADAS E MÁSCARA (Crossfade Triplo)
   ========================================================================== */
.container-fundo {
    position: fixed; 
    width: 100%;
    max-width: 480px; 
    height: 100vh;
    top: 0;
    z-index: 1;
}

.imagem-fundo {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center top; 
    opacity: 0.85; 
}

/* Lógica Sênior do Crossfade (12 segundos totais):
   - Ativo 7 (Fixo no fundo, sempre visível)
   - Ativo 8 (.img-animada) cobre o 7 no meio do ciclo
   - Ativo 9 (.img-animada-2) cobre ambos no final do ciclo
*/
.img-animada {
    opacity: 0;
    animation: crossfade1 12s ease-in-out infinite;
}

.img-animada-2 {
    opacity: 0;
    animation: crossfade2 12s ease-in-out infinite;
}

@keyframes crossfade1 {
    0%, 20% { opacity: 0; }
    30%, 50% { opacity: 0.85; } /* Tempo de tela exclusivo da Imagem 2 */
    60%, 100% { opacity: 0; }
}

@keyframes crossfade2 {
    0%, 55% { opacity: 0; }
    65%, 85% { opacity: 0.85; } /* Tempo de tela exclusivo da Imagem 3 */
    95%, 100% { opacity: 0; }
}

.mascara-escura {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%; 
    /* Degradê suave que protege a leitura de todos os elementos sobrepostos */
    background: linear-gradient(to top, var(--cor-fundo-escuro) 25%, rgba(22, 22, 22, 0.8) 55%, rgba(22, 22, 22, 0) 100%);
    z-index: 2; 
}

/* ==========================================================================
   6. ÁREA PRINCIPAL E HEADLINE (Imagem)
   ========================================================================== */
.principal {
    position: relative;
    z-index: 3; 
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: center;
    /* O padding bottom é alto para não sobrepor o footer ao rolar até o fim */
    padding: 140px 24px 110px 24px; 
}

.imagem-headline {
    width: 90%;
    max-width: 320px;
    height: auto;
    margin-bottom: 45px;
    /* O drop-shadow garante que a tipografia em imagem se destaque */
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.7));
}

/* ==========================================================================
   7. GRUPO DE BOTÕES (Alta Conversão, Zero Fricção)
   ========================================================================== */
.grupo-botoes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    align-items: center;
}

.botao-link {
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; 
    text-decoration: none;
    font-size: 14px; /* Levemente ajustado para padrão mobile premium */
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    width: 100%;
    max-width: 340px;
    padding: 18px 24px;
    border-radius: 5px; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* Botão Primário: WhatsApp */
.botao-whatsapp {
    background-color: var(--cor-vinho-principal); 
    color: var(--cor-base-clara); 
    border: 1px solid var(--cor-vinho-claro);
    box-shadow: 0 8px 25px rgba(96, 10, 24, 0.3);
}

.botao-whatsapp:hover {
    transform: translateY(-2px); 
    background-color: var(--cor-vinho-claro);
    box-shadow: 0 12px 30px rgba(96, 10, 24, 0.5);
}

/* Botão Secundário: Instagram */
.botao-instagram {
    background-color: transparent; 
    color: var(--cor-dourado-1); 
    border: 1px solid var(--cor-dourado-1);
}

.botao-instagram:hover {
    transform: translateY(-2px); 
    background-color: rgba(216, 193, 170, 0.08); 
}

/* Microinterações dos Ícones */
.icone-botao {
    width: 18px;
    height: 18px;
    transition: transform 0.4s ease;
}

.botao-link:hover .icone-botao {
    transform: scale(1.08);
}

.botao-link:active {
    transform: translateY(1px) scale(0.98); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.1s ease; 
}

/* ==========================================================================
   8. RODAPÉ (Footer com Logo)
   ========================================================================== */
.rodape {
    position: absolute;
    bottom: 25px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--cor-cinza); 
    z-index: 3;
    letter-spacing: 1px;
}

.logo-rodape {
    width: 20px;
    height: auto;
    opacity: 0.6; /* Subtil e elegante no final da página */
    transition: opacity 0.3s ease;
}

.logo-rodape:hover {
    opacity: 1;
}

/* ==========================================================================
   9. PRE-LOADER (Performance Preservada)
   ========================================================================== */
#preloader {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--cor-fundo-escuro); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; 
    transition: opacity 0.8s ease, visibility 0.8s ease; 
}

.escondido {
    opacity: 0;
    visibility: hidden;
}

.logo-animada svg {
    width: 160px; 
    height: auto;
}

.logo-animada svg .cls-1 {
    fill: transparent; 
    stroke: var(--cor-dourado-1); 
    stroke-width: 0.5; 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    animation: desenharLogo 2.5s ease-in-out forwards; 
}

@keyframes desenharLogo {
    0% {
        stroke-dashoffset: 1000; 
        fill: transparent;
    }
    80% {
        stroke-dashoffset: 0; 
        fill: transparent; 
    }
    100% {
        stroke-dashoffset: 0; 
        fill: var(--cor-dourado-1); 
        stroke: transparent;
    }
}

/* ==========================================================================
   10. EFEITOS DO MOSAICO DINÂMICO E LOGO AUMENTADA
   ========================================================================== */
.logo-animada svg {
    width: 160px !important; /* Ajustado para um tamanho elegante e proporcional */
    max-width: 70vw; /* Proteção responsiva para telas pequenas */
    position: relative;
    z-index: 2; /* Garante que a logo fique sempre acima do mosaico */
    filter: drop-shadow(0 0 15px rgba(216, 193, 170, 0.2)); /* Leve glow na própria logo */
}

/* Base matemática para os ícones que o JS vai criar */
.icone-mosaico {
    position: absolute;
    opacity: 0;
    z-index: 1; /* Atrás da logo */
    pointer-events: none; /* Impede que o usuário clique neles acidentalmente */
    /* A animação 'dancaSedutora' vai usar variáveis criadas pelo JS */
    animation: dancaSedutora ease-in-out infinite alternate;
}

/* A coreografia da dança. O JS define para onde cada ícone vai! */
@keyframes dancaSedutora {
    0% {
        transform: translate(0, 0) scale(0.8) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: var(--opacidade-max); /* Brilho suave */
    }
    100% {
        transform: translate(var(--mov-x), var(--mov-y)) scale(1.2) rotate(var(--rotacao));
        opacity: 0;
    }
}