/* Reset básico para todos os elementos */
* {
    margin: 0; /* Remove margens padrão */
    padding: 0; /* Remove paddings padrão */
    box-sizing: border-box; /* Inclui padding e borda no cálculo das dimensões */
    font-family: "Poppins"; /* Define a fonte padrão como Poppins */
}

/* Configurações do HTML e Body */
html, body {
    width: 100vw; /* Largura igual à largura da viewport */
    height: 500vh; /* Altura igual a 500% da altura da viewport (página longa) */
    overflow-x: hidden; /* Esconde a barra de rolagem horizontal */
}

/* Estilos para imagens */
img {
    width: 80%; /* Largura igual à largura do contêiner */
    height: 80%; /* Altura igual à altura do contêiner */
    object-fit: cover; /* Cobrir o contêiner mantendo a proporção */
}

/* Estilos para o canvas do Three.js */
canvas {
    position: fixed; /* Fixa o canvas na tela */
    top: 0; /* Posiciona no topo */
    left: 0; /* Posiciona à esquerda */
}


/* Estilos para títulos e parágrafos 
h1 {
    text-align: center; Centraliza o texto
    font-size: 30px;  Tamanho da fonte 
    position: relative;  Permite ajustar a posição 
    top: -90px; Move o título para cima 
}*/

/*
h2 {
    font-size: 30px; Tamanho da fonte 
    font-weight: 50;  Peso da fonte 
    line-height: 100%;  Altura da linha 
    position: relative;  Permite ajustar a posição 
    top: 130px;  Move o subtítulo para baixo 
    text-align: center; Centraliza o texto 
}*/

/*
p {
    font-size: 20px; Tamanho da fonte 
    font-weight: 500;  Peso da fonte 
    line-height: 100%; Altura da linha 
    position: relative; Permite ajustar a posição 
    top: 130px;  Move o parágrafo para baixo 
}*/

/* Estilos para o contêiner do modelo 3D */
.model {
    height: 100vh; /* Usa a altura dinâmica da viewport */
    width: 100vw; /* Largura igual à largura da viewport */
    position: fixed; /* Fixa o contêiner na tela */
    top: 00px; /* Posiciona no topo */
    left: 0; /* Posiciona à esquerda */
    background: #0f0e10; /* Cor de fundo */
}

/* Estilos para as seções */
section {
    position: relative; /* Permite posicionar elementos filhos */
    width: 100vw; /* Largura igual à largura da viewport */
    height: 100vh; /* Altura igual à altura da viewport */
    display: flex; /* Usa flexbox para alinhar elementos */
    flex-direction: column; /* Alinha os elementos verticalmente */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    gap: 1em; /* Espaçamento entre os elementos */
    z-index: 2; /* Define a ordem de empilhamento */
}

/* Estilos para a seção Hero */
.hero h1 {
    color: #fd8f0e;
    position: absolute; /* Posiciona o título de forma absoluta */
    text-align: center; /* Centraliza o texto */
    padding-bottom: 100px; /* Espaçamento inferior */
    top: 250px; /* Posiciona o título a 250px do topo */
}

.hero h2 {
    color: #fd8f0e;
    text-align: center; /* Centraliza o texto */
    position: absolute; /* Posiciona o subtítulo de forma absoluta */
    top: 650px; /* Posiciona o subtítulo a 650px do topo */
    font-size: 28px; /* Tamanho da fonte */
}

.hero p {
    color: #fd8f0e;
    position: absolute; /* Posiciona o parágrafo de forma absoluta */
    top: 700px; /* Posiciona o parágrafo a 700px do topo */
    width: 60%; /* Largura do parágrafo */
    font-size: 18px; /* Tamanho da fonte */
    margin: 0px 0px; /* Remove margens */
    text-align: center; /* Centraliza o texto */
    padding-top: 10px; /* Espaçamento superior */
}

/* Media Queries para responsividade */
@media (max-width: 1280px) {
    .hero h1 {
        top: 180px; /* Ajusta a posição do título */
    }
    
    .hero h2 {
        font-size: 30px; /* Ajusta o tamanho da fonte */
        top: 500px; /* Ajusta a posição do subtítulo */
        width: 95%; /* Ajusta a largura */
    }

    .hero p {
        font-size: 15px; /* Ajusta o tamanho da fonte */
        top: 550px; /* Ajusta a posição do parágrafo */
        width: 60%; /* Ajusta a largura */
    }
}

@media (max-width: 500px) {
    .hero h1 {
        top: 190px; /* Ajusta a posição do título */
    }
    
    .hero h2 {
        font-size: 30px; /* Ajusta o tamanho da fonte */
        top: 565px; /* Ajusta a posição do subtítulo */
        width: 95%; /* Ajusta a largura */
    }

    .hero p {
        font-size: 15px; /* Ajusta o tamanho da fonte */
        top: 660px; /* Ajusta a posição do parágrafo */
        width: 95%; /* Ajusta a largura */
    }
}

@media (max-width: 420px) {
    .hero h1 {
        top: 250px; /* Ajusta a posição do título */
    }
    
    .hero h2 {
        font-size: 30px; /* Ajusta o tamanho da fonte */
        top: 545px; /* Ajusta a posição do subtítulo */
        width: 95%; /* Ajusta a largura */
    }

    .hero p {
        font-size: 15px; /* Ajusta o tamanho da fonte */
        top: 640px; /* Ajusta a posição do parágrafo */
        width: 95%; /* Ajusta a largura */
    }
}

@media (max-width: 400px) {
    .hero h1 {
        top: 200px; /* Ajusta a posição do título */
    }
    
    .hero h2 {
        font-size: 30px; /* Ajusta o tamanho da fonte */
        top: 500px; /* Ajusta a posição do subtítulo */
        width: 95%; /* Ajusta a largura */
    }

    .hero p {
        font-size: 15px; /* Ajusta o tamanho da fonte */
        top: 590px; /* Ajusta a posição do parágrafo */
        width: 95%; /* Ajusta a largura */
    }
}

@media (max-width: 380px) {
    .hero h1 {
        top: 150px; /* Ajusta a posição do título */
    }
    
    .hero h2 {
        font-size: 30px; /* Ajusta o tamanho da fonte */
        top: 400px; /* Ajusta a posição do subtítulo */
        width: 95%; /* Ajusta a largura */
    }

    .hero p {
        font-size: 15px; /* Ajusta o tamanho da fonte */
        top: 480px; /* Ajusta a posição do parágrafo */
        width: 95%; /* Ajusta a largura */
    }
}

@media (max-width: 370px) {
    .hero h1 {
        top: 180px; /* Ajusta a posição do título */
    }
    
    .hero h2 {
        font-size: 25px; /* Ajusta o tamanho da fonte */
        top: 450px; /* Ajusta a posição do subtítulo */
        width: 95%; /* Ajusta a largura */
    }

    .hero p {
        font-size: 15px; /* Ajusta o tamanho da fonte */
        top: 530px; /* Ajusta a posição do parágrafo */
        width: 95%; /* Ajusta a largura */
    }
}

@media (max-width: 350px) {
    .hero h1 {
        top: 250px; /* Ajusta a posição do título */
    }
    
    .hero h2 {
        font-size: 25px; /* Ajusta o tamanho da fonte */
        top: 540px; /* Ajusta a posição do subtítulo */
        width: 95%; /* Ajusta a largura */
    }

    .hero p {
        font-size: 15px; /* Ajusta o tamanho da fonte */
        top: 620px; /* Ajusta a posição do parágrafo */
        width: 95%; /* Ajusta a largura */
    }
}

/* Estilos para o scanner */

.product-id {
    color: #fd8f0e;
}

.product-description {
    color: #fd8f0e;
}
.scan-info {
    position: absolute; /* Posiciona de forma absoluta */
    top: 0; /* Posiciona no topo */
    width: 100vw; /* Largura igual à largura da viewport */
    display: flex; /* Usa flexbox para alinhar elementos */
    justify-content: space-between; /* Espaçamento entre os elementos */
    padding: 2em; /* Espaçamento interno */
}

.scan-container {
    width: 360px; /* Largura do contêiner do scanner */
    height: 500px; /* Altura do contêiner do scanner */
    border: 1px solid #fd8f0e; /* Borda preta */
    border-radius: 0.5em; /* Bordas arredondadas */
}

.barcode {
    position: absolute; /* Posiciona de forma absoluta */
    bottom: 0.1em; /* Posiciona no fundo */
    left: 2em; /* Posiciona à esquerda */
    width: 150px; /* Largura do código de barras */
    height: 150px; /* Altura do código de barras */
}

.purchased {
    position: absolute; /* Posiciona de forma absoluta */
    bottom: 2em; /* Posiciona no fundo */
    right: 2em; /* Posiciona à direita */
    padding: 0.5em 4em; /* Espaçamento interno */
    color: red; /* Cor do texto */
    border: 1px solid red; /* Borda vermelha */
    border-radius: 1em; /* Bordas arredondadas */
}

/* Media Queries para o scanner em telas menores */
@media (max-width: 500px) {
    .scan-info {
        position: absolute; /* Posiciona de forma absoluta */
        top: 0; /* Posiciona no topo */
        width: 100vw; /* Largura igual à largura da viewport */
        display: flex; /* Usa flexbox para alinhar elementos */
        justify-content: space-between; /* Espaçamento entre os elementos */
        padding: 2em; /* Espaçamento interno */
    }
    
    .scan-container {
        width: 360px; /* Largura do contêiner do scanner */
        height: 500px; /* Altura do contêiner do scanner */
        border: 1px solid #000; /* Borda preta */
        border-radius: 0.5em; /* Bordas arredondadas */
    }
    
    .barcode {
        position: absolute; /* Posiciona de forma absoluta */
        bottom: 1em; /* Posiciona no fundo */
        left: 2em; /* Posiciona à esquerda */
        width: 100px; /* Largura do código de barras */
        height: 100px; /* Altura do código de barras */
    }
    
    .purchased {
        font-size: 12px; /* Tamanho da fonte */
        position: absolute; /* Posiciona de forma absoluta */
        bottom: 4.2em; /* Posiciona no fundo */
        right: 2em; /* Posiciona à direita */
        padding: 0.5em 4em; /* Espaçamento interno */
        color: red; /* Cor do texto */
        border: 1px solid red; /* Borda vermelha */
        border-radius: 1em; /* Bordas arredondadas */
    }
}

/* Estilos para o perfil */
.perfil {
    opacity: 0; /* Inicialmente invisível */
    transform: scale(0); /* Inicialmente sem escala */
    position: absolute; /* Posiciona de forma absoluta */
    background-color: rgba(1, 1, 1, 0.6); /* Cor de fundo com transparência */
    padding: 40px; /* Espaçamento interno */
    align-items: center; /* Centraliza os elementos */
    border-radius: 30px; /* Bordas arredondadas */
}

.perfil p {
    color: aliceblue;
    font-size: 40px; /* Tamanho da fonte */
}


.buttoncall {
    font-size: 20px; /* Tamanho da fonte */
    padding: 10px; /* Espaçamento interno */
    border-radius: 20px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de ponteiro */
    position: relative; /* Permite ajustar a posição */
}

.buttoncall:hover {
    background-color: aqua; /* Cor de fundo ao passar o mouse */
}

.fotoperfil {
    width: 500px; /* Largura da foto de perfil */
    height: auto; /* Altura automática */
}

/* Estilos para a seção Outro */
.outro h2 {
    color: #fd8f0e;
    width: 70%; /* Largura do título */
    text-align: center; /* Centraliza o texto */
}

/* Estilos para a biblioteca Lenis */
.lenis.lenis-smooth {
    scroll-behavior: auto !important; /* Desativa a rolagem suave padrão */
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain; /* Controla o comportamento de rolagem */
}

.lenis.lenis-stopped {
    overflow: clip; /* Esconde o conteúdo que ultrapassa o contêiner */
}

.lenis.lenis-smooth iframe {
    pointer-events: none; /* Desativa interações com iframes */
}