/* style.css - Vertical Final Revisado e Corrigido */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600;700&display=swap');

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

:root {
    --cor-fundo-principal: #D90404;
    --cor-fundo-secundario: #F7B500;
    --cor-texto-descricao: #FFFFFF;
    --cor-texto-preco: #FFFFFF;
    --cor-seta-qr: #00A300;
    /* Variável extra para garantir consistência no texto do footer se necessário */
    --cor-texto-footer: #FFFFFF; 
}

html, body {
    height: 100vh; width: 100vw; overflow: hidden;
    font-family: 'Oswald', sans-serif;
    background-color: #000;
}

#app { position: relative; width: 100%; height: 100%; }

/* Fundos */
#fundo-principal {
    background-color: var(--cor-fundo-principal);
    background-image: linear-gradient(180deg, var(--cor-fundo-principal) 0%, #1a0000 120%);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}
#fundo-secundario {
    background-color: var(--cor-fundo-secundario);
    position: absolute; bottom: 0; left: 0; width: 100%; height: 24%;
    clip-path: ellipse(160% 100% at 50% 100%);
    z-index: 2; opacity: 0.95; box-shadow: 0 -10px 20px rgba(0,0,0,0.3);
}

/* Elementos */
.elemento-animado { position: absolute; opacity: 0; z-index: 10; }

/* Logo */
#logo-container {
    top: 2vh; left: 0; width: 100%; height: 12vh;
    display: flex; justify-content: center; align-items: center; z-index: 20;
}
#logo-img { max-height: 100%; max-width: 80%; object-fit: contain; }

/* Produto */
#produto-container {
    top: 16vh; width: 100%; height: 50vh;
    display: flex; justify-content: center; align-items: center; z-index: 10;
}
#produto-img {
    max-width: 80%; max-height: 100%; object-fit: contain;
    filter: drop-shadow(10px 15px 20px rgba(0,0,0,0.4)); z-index: 2; position: relative;
}
#produto-img-ghost {
    position: absolute; top: 0; left: 10%; width: 80%; height: 100%;
    object-fit: contain; z-index: 1; opacity: 0.3; filter: blur(8px); transform: scale(0.9);
}

/* Selo */
#selo-container {
    top: 20vh; left: 5vw; width: 35vw; height: 35vw; z-index: 15;
    display: flex; justify-content: center; align-items: center;
}
#selo-img { width: 100%; height: 100%; object-fit: contain; }

/* Descrição */
#descricao-container {
    top: 66vh; width: 100%; height: 8vh;
    display: flex; justify-content: center; align-items: center; z-index: 12;
}
#descricao-texto {
    font-size: 4vh; color: var(--cor-texto-descricao); font-weight: 600;
    text-align: center; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Preço */
#preco-container {
    top: 74vh; width: 100%; height: 15vh;
    display: flex; justify-content: center; align-items: baseline;
    color: var(--cor-texto-preco); font-weight: 700; z-index: 12;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}
.simbolo-real { font-size: 5vh; margin-right: 1vh; }
#preco-texto { font-size: 13vh; line-height: 1; }

/* Rodapé */
#info-inferior-wrapper {
    bottom: 3vh; right: 5vw; height: 10vh;
    display: flex; align-items: center; justify-content: flex-end; gap: 2vh; z-index: 12;
}
#qr-texto-container {
    background-color: var(--cor-seta-qr); padding: 1vh 2vh; border-radius: 20px;
}
#qr-texto { color: white; font-size: 2.2vh; font-weight: 700; text-transform: uppercase; }
#qrcode-container {
    background-color: white; padding: 0.5vh; border-radius: 1vh;
    width: 9vh; height: 9vh; display: flex; justify-content: center; align-items: center;
}
#qrcode-img { width: 100%; height: 100%; object-fit: contain; }

/* --- ANIMAÇÕES (Sincronizadas com o JS) --- */

.fadeIn { animation: fadeIn 1s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.slideInUp { animation: slideInUp 0.8s forwards; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

/* ADICIONADO: Faltava esta animação que o JS chamava para o Selo */
.slideInDown { animation: slideInDown 0.8s forwards; }
@keyframes slideInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }

.slideInLeft { animation: slideInLeft 0.8s forwards; }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }

.popIn { animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

.slideOutDown { animation: slideOutDown 0.5s forwards; }
@keyframes slideOutDown { to { opacity: 0; transform: translateY(50px); } }