/* style.css - Layout Hortifruti Final para GitHub */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;700&display=swap');

* {
    box-sizing: border-box;
}

:root {
    /* Cores Placeholder (Serão substituídas pela API via JS) */
    --cor-fundo-principal: #009640;      /* cor_01 */
    --cor-bg-preco: #009640;             /* cor_01 */
    --cor-faixas: #FFC700;               /* cor_03 */
    --cor-destaque-luz-borda: #006825;   /* cor_02 */
    --cor-texto-placa: #000000;          /* cor_texto_01 */
    --cor-texto-preco: #FFFFFF;          /* cor_texto_02 */
    --cor-texto-footer: #FFFFFF;         /* cor_texto_02 */
    --cor-seta-qr: #006825;              /* cor_02 */
}

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

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

/* --- 1. FUNDOS --- */
#fundo-principal {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 50% 30%, 
        var(--cor-fundo-principal) 20%, 
        #000000 130%
    );
    z-index: 1;
}

#fundo-efeito {
    position: absolute;
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
    
    background: 
        /* PONTO DE LUZ (Usa cor_02 bem clara) */
        radial-gradient(circle at 50% 40%, var(--cor-destaque-luz-borda) 0%, transparent 35%),
        /* RAIOS BRANCOS SUTIS */
        repeating-conic-gradient(rgba(255,255,255,0.1) 0 15deg, transparent 15deg 30deg);
    
    z-index: 1;
    opacity: 0.6; 
    
    /* MÁSCARA PARA ESCONDER RAIOS NO CENTRO DA LUZ */
    -webkit-mask-image: radial-gradient(circle at 50% 40%, transparent 5%, black 60%);
    mask-image: radial-gradient(circle at 50% 40%, transparent 5%, black 60%);
    
    mix-blend-mode: screen; 
}

/* --- 2. LOGO --- */
#logo-container {
    top: 3vh;
    left: 0;
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}
#logo-img {
    max-height: 100%;
    max-width: 60%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* --- 3. SELO --- */
#selo-container {
    top: 14vh;
    left: 50%;
    transform: translateX(-50%); 
    width: 50vw; 
    height: 35vh; 
    z-index: 5; 
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#selo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
    animation: pulse 3s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* --- 4. PRODUTO --- */
#produto-container {
    bottom: 14vh; 
    left: 0;
    width: 100%;
    height: 55vh; 
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 10;
    position: absolute;
}

#produto-img {
    max-width: 85%;
    max-height: 100%;
    object-fit: contain;
    z-index: 3;
    position: relative;
    
    /* EFEITO ADESIVO (Borda Branca + Sombras) */
    filter: 
        drop-shadow(0 0.4vh 0 rgba(0,0,0,0.35))
        drop-shadow(0.5vh 0 0 white) 
        drop-shadow(-0.5vh 0 0 white) 
        drop-shadow(0 0.5vh 0 white) 
        drop-shadow(0 -0.5vh 0 white)
        drop-shadow(0.3vh 0.3vh 0 white)
        drop-shadow(-0.3vh -0.3vh 0 white)
        drop-shadow(1vh 1.5vh 2vh rgba(0,0,0,0.5));
}

#produto-img-ghost {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    opacity: 0.3;
    filter: blur(15px) brightness(1.5);
    transform: translateX(-50%) scale(0.9); 
}

/* --- 5. PLACA DO NOME --- */
#descricao-container {
    top: 45vh;
    left: 5vw;
    width: 40vw; 
    min-height: 12vh; 
    background: #f0f0f0; 
    padding: 0; 
    border-radius: 1vh;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 15;
    transform: rotate(-3deg);
    overflow: hidden; 
}

.placa-header {
    width: 100%;
    background-color: var(--cor-faixas);
    color: #ffffff; /* Branco fixo para contraste */
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    text-align: center;
    font-weight: 700;
    font-size: 2.0vh;
    padding: 0.5vh 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#descricao-texto {
    font-size: 2.4vh; 
    color: var(--cor-texto-placa);
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 1vh 1vh; 
    line-height: 1.1;
    text-transform: uppercase;
    font-style: italic;
    flex-grow: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 6. PREÇO --- */
#preco-container {
    top: 58vh; 
    right: 5vw;
    width: 32vw;
    height: 32vw; 
    background-color: var(--cor-bg-preco);
    border-radius: 50%;
    border: 0.6vh solid var(--cor-destaque-luz-borda); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    z-index: 20;
    transform: rotate(3deg);
}

.label-apenas {
    color: var(--cor-destaque-luz-borda); 
    font-size: 2.6vh;
    font-weight: 700;
    margin-top: -1.5vh; 
    margin-bottom: 0.5vh;
    text-transform: uppercase;
}

.label-unidade {
    color: var(--cor-destaque-luz-borda);
    font-size: 2.2vh;
    font-weight: 700;
    margin-top: 0.5vh; 
    margin-bottom: -1vh;
    text-transform: lowercase;
}

.preco-wrapper {
    display: flex;
    align-items: flex-start; 
    justify-content: center;
    line-height: 1;
}

.simbolo-real {
    color: var(--cor-texto-preco);
    font-size: 3.5vh;
    margin-right: 0.5vh;
    font-weight: 500;
    margin-top: 1vh; 
    text-shadow: 
        -0.2vh -0.2vh 0 var(--cor-destaque-luz-borda),
         0.2vh -0.2vh 0 var(--cor-destaque-luz-borda),
        -0.2vh  0.2vh 0 var(--cor-destaque-luz-borda),
         0.2vh  0.2vh 0 var(--cor-destaque-luz-borda);
}

#preco-texto {
    color: var(--cor-texto-preco);
    font-size: 8.5vh; 
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: -2px;
    text-shadow: 
        -0.3vh -0.3vh 0 var(--cor-destaque-luz-borda),
         0.3vh -0.3vh 0 var(--cor-destaque-luz-borda),
        -0.3vh  0.3vh 0 var(--cor-destaque-luz-borda),
         0.3vh  0.3vh 0 var(--cor-destaque-luz-borda);
}

/* --- 7. RODAPÉ --- */
#footer-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8vh; 
    background-color: var(--cor-faixas);
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    padding-left: 5vw; 
    z-index: 30;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
}

#footer-text {
    color: var(--cor-texto-footer);
    font-size: 2.5vh;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}
#footer-text i {
    margin-right: 1vh;
    font-size: 3vh;
    color: inherit;
}

/* --- 8. QR CODE --- */
#qrcode-container {
    position: absolute;
    bottom: 2vh; 
    right: 5vw; 
    width: 11vh;
    height: 11vh;
    background-color: white;
    padding: 0.8vh;
    border-radius: 1vh;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 40; 
}
#qrcode-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- ANIMAÇÕES --- */
.elemento-animado { position: absolute; opacity: 0; }

.slideInLeft { animation: slideInLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes slideInLeft { 
    from { opacity: 0; transform: translateX(-100px) rotate(-10deg); } 
    to { opacity: 1; transform: translateX(0) rotate(-3deg); } 
}

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

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

.slideInDown { animation: slideInDown 0.8s ease-out forwards; }
@keyframes slideInDown { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } }

.fadeIn { animation: fadeIn 1s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

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