/* Estilos para o contêiner de formulários */
#form-container {
display: flex;
flex-direction: column;
align-items: center; /* Centraliza horizontalmente */
justify-content: center; /* Centraliza verticalmente */
position: relative;
z-index: 1;
width: 100%; /* Garante que ocupe toda a largura disponível */
max-width: 800px; /* Limita a largura máxima do contêiner */
margin: 0 auto; /* Centraliza o contêiner horizontalmente */
padding: 20px 10px; /* Adiciona 10px de padding nas laterais (esquerda e direita) */
box-sizing: border-box; /* Garante que o padding seja considerado na largura */
margin-bottom: 100px; /* Adiciona um espaço abaixo do formulário */
}

/* Espaço entre Container de Ayla e o buscador do navegador */
#leo-avatar {
    margin-top: 25px;
}

@media (max-width: 600px) {
    #leo-avatar {
        margin-top: calc(env(safe-area-inset-top, 0px) + 55px);
    }
}

/* Espaço entre video e Ayla */
.video-column{
    margin-top: 20vh;
}	

/* Estilo para o campo de entrada de texto */
#pergunta {
font-family: 'Arial', sans-serif;
font-size: 18px; /* Ajuste no tamanho da fonte */
color: #fff;
width: 90%; /* Ocupa no máximo 90% da largura disponível */
max-width: 500px; /* Impede que fique muito grande em telas grandes */
padding: 15px; /* Reduz o espaçamento interno */
border-radius: 10px; /* Bordas arredondadas */
background-color: #333; /* Cor de fundo */
border: 1px solid #ccc; /* Cor da borda */
box-sizing: border-box; /* Mantém o tamanho correto */
margin: 0px auto; /* Centraliza horizontalmente */
display: block; /* Garante que o elemento ocupe uma linha inteira */
}

/* Ajuste para telas menores */
@media (max-width: 600px) {
#pergunta {
font-size: 16px;
padding: 12px;
width: 95%;
max-width: 350px;
}
#botaoReconhecimentoVoz, #botaoEnviar {
font-size: 16px;
padding: 12px;
width: 95%;
max-width: 350px;
}
}

/* Ajuste para telas muito pequenas (smartphones compactos) */
@media (max-width: 400px) {
#pergunta {
font-size: 14px;
padding: 10px;
max-width: 300px;
}
#botaoReconhecimentoVoz, #botaoEnviar {
font-size: 14px;
padding: 10px;
max-width: 300px;
}
}

/* Estilo para os botões */
#botaoReconhecimentoVoz, #botaoEnviar {
background-color: #008000; /* Cor verde */
color: white; /* Texto branco */
font-weight: bold; /* Texto em negrito */
border: 2px solid white; /* Borda branca */
border-radius: 8px; /* Bordas arredondadas */
padding: 15px; /* Mantém o mesmo espaçamento do campo de entrada */
font-size: 18px; /* Tamanho da fonte igual ao do campo de entrada */
cursor: pointer; /* Cursor de ponteiro */
transition: background-color 0.3s ease; /* Animação suave */
width: 90%; /* Mesma largura do campo de entrada */
max-width: 500px; /* Mesmo limite do campo de entrada */
margin: 5px auto; /* Centraliza horizontalmente e adiciona espaçamento */
display: block; /* Garante que os botões ocupem uma linha inteira */
text-align: center; /* Garante que o texto fique centralizado */
}

/* Hover para os botões */
#botaoReconhecimentoVoz:hover, #botaoEnviar:hover {
background-color: #005700;
}

/* Centralizando o contêiner do avatar */
#avatar-container {
display: flex;
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Centraliza verticalmente */
height: 100%; /* Garante que o contêiner ocupe toda a altura disponível */
margin-bottom: 1px; /* Espaço entre o avatar e o conteúdo abaixo */
}

/* Estilo para o avatar */
#leo-avatar {
width: 600px; /* Tamanho do avatar */
height: 400px; /* Tamanho do avatar */
}

/* Estilos para o Shop */
#shop-container {
display: none;
width: 100%;
height: 90vh; /* Por exemplo, ocupa 80% da altura da tela */
position: absolute;
top: 100%; /* Fica logo abaixo da página Li */
left: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
overflow-y: auto;
}


/* Estilo para quando o campo está focado */
#pergunta:focus {
border-color: #4CAF50; /* Cor da borda quando o campo estiver em foco */
outline: none; /* Remove o contorno padrão do navegador */
}

/* Hover para os botões */
#botaoReconhecimentoVoz:hover, #pergunta:hover {
background-color: #151912;
}

#botaoReconhecimentoVoz:hover {
background-color: #005700;
}




/* Aplicativo */

body {
background-color: #151912;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 0;
margin: 0;
min-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
}



h1 {
color: #00ff99;
}

ul {
list-style: none;
padding: 0;
}

li {
background: #222;
margin: 10px;
padding: 15px;
border-radius: 10px;
}

li a {
color: #00ff99;
text-decoration: none;
font-size: 18px;
}

li a i {
margin-right: 8px;
}

li:hover {
background: #333;
}



/* ==========================================
WEBSITE A BAIXO XE AYLA
========================================== */


/* ==========================================
VIDEO
========================================== */

.video-column{
position:relative;
width:100%;
height:auto;
}

.video-column video{
width:100%;
display:block;
}


/* ==========================================
LOGO
========================================== */

.bloco-logo-titulo{
display:flex;
justify-content:center;
align-items:center;
margin:40px 0;
}

#logo-centralizado{
width:120px;
height:120px;
border-radius:50%;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
animation:pulse-multi-scale 1.5s infinite;
}

#logo-centralizado img{
width:100%;
height:100%;
object-fit:contain;
}

@keyframes pulse-multi-scale{

0%{
transform:scale(1);
box-shadow:0 0 0 rgba(173,58,173,.6);
}

33%{
transform:scale(1.05);
box-shadow:0 0 12px rgba(242,126,39,.4);
}

66%{
transform:scale(1.08);
box-shadow:0 0 24px rgba(253,158,21,.3);
}

100%{
transform:scale(1);
box-shadow:0 0 0 rgba(173,58,173,0);
}

}


/* ==========================================
APRESENTAÇÃO
========================================== */

.bloco-ganhos{

display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;

gap:40px;

padding:60px 20px;

}

.ganhos-imagem{

flex:1;
min-width:280px;
max-width:500px;

}

.ganhos-imagem img{

width:100%;
display:block;
border-radius:20px;

}

.ganhos-conteudo{

flex:1;
min-width:280px;
max-width:700px;
text-align:left;

}

.ganhos-titulo{

color:#39ff14;
margin-bottom:20px;
font-size:2rem;

}

.ganhos-descricao{

line-height:1.8;
color:#ddd;
font-size:1.05rem;

}


/* ==========================================
PORTFOLIO
========================================== */

.bloco-portfolio{

width:100%;
padding:50px 10px;
box-sizing:border-box;

}

.portfolio-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

max-width:1500px;

width:100%;

margin:auto;

padding:0;

box-sizing:border-box;

}

.portfolio-card{

width:100%;

box-sizing:border-box;

overflow:hidden;

background:rgba(255,255,255,.05);

border:1px solid rgba(57,255,20,.15);

backdrop-filter:blur(10px);

border-radius:18px;

padding:22px;

transition:.3s;

}

.portfolio-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(0,255,120,.15);

}

.portfolio-card img{

width:100%;

border-radius:14px;

margin-bottom:15px;

}

.portfolio-card h3{

color:#39ff14;

margin-bottom:10px;

}

.portfolio-card p{

color:#ddd;

line-height:1.6;

}


/* ==========================================
BOTÃO
========================================== */

.btn-lex{

display:inline-block;

margin-top:15px;

padding:14px 24px;

background:#39ff14;

color:#000;

border-radius:10px;

font-weight:bold;

text-decoration:none;

transition:.3s;

}

.btn-lex:hover{

background:#28d80f;

transform:translateY(-2px);

}


/* ==========================================
CTA
========================================== */

.portfolio-cta{

text-align:center;

padding:70px 20px;

}

.portfolio-cta h2{

color:#39ff14;

margin-bottom:20px;

}

.portfolio-cta p{

max-width:700px;

margin:0 auto 25px;

line-height:1.7;

color:#ddd;

}


/* ==========================================
RESPONSIVO
========================================== */

@media(max-width:768px){

.bloco-ganhos{

flex-direction:column;

text-align:center;

}

.ganhos-conteudo{

text-align:center;

}

}

@media(min-width:1400px){

.portfolio-container{

grid-template-columns:repeat(4,1fr);

}

}

/* CORREÇÃO MOBILE AYLA */
@media(max-width:600px){
html,body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.bloco-ganhos, .bloco-portfolio, .portfolio-container{
width:100%;
max-width:100%;
overflow:hidden;
box-sizing:border-box;
}
.portfolio-container{
grid-template-columns:1fr;
padding:10px;
gap:20px;
}
.portfolio-card{
width:100%;
padding:15px;
}
.ganhos-imagem img, .portfolio-card img{
max-width:100%;
height:auto;
}

/* Alinha os textos longos para a esquerda, deixando a leitura organizada */
p, .hero-lede, .highlight-box p {
  text-align: left !important;
  text-align-last: left; /* Força a última linha a também alinhar à esquerda */
}

/* Mantém apenas os títulos e cabeçalhos bonitos e centralizados */
.hero, .section-head, .final-cta, h1, h2 {
  text-align: center !important;
}
}

/* ==========================
   BOTÃO FLUTUANTE WHATSAPP
========================== */

.whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 90px; /* sobe acima do rodapé */

    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    z-index: 99999;

    animation: whatsappPulse 2s infinite;
    transition: transform .25s ease;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}

.whatsapp-icon {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    object-fit: contain;
}

/* Pulso */

@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37,211,102,.7);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(37,211,102,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37,211,102,0);
    }
}

/* Celulares */

@media (max-width:768px){

    .whatsapp-button{
        width:56px;
        height:56px;
        right:16px;
        bottom:70px;
    }

    .whatsapp-icon{
        width:56px !important;
        height:56px !important;
        max-width:56px !important;
        max-height:56px !important;
        min-width:56px !important;
        min-height:56px !important;
    }

}

/* Celular deitado */

@media (orientation: landscape){

    .whatsapp-button{
        width:52px;
        height:52px;
        right:15px;
        bottom:60px;
    }

    .whatsapp-icon{
        width:52px !important;
        height:52px !important;
        max-width:52px !important;
        max-height:52px !important;
        min-width:52px !important;
        min-height:52px !important;
    }

}

/* Esconde o botão quando o menu/overlay estiver aberto */
.overlay-cortina.active ~ .whatsapp-button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px);
    transition: .25s;
}

.whatsapp-button {
    opacity: 1;
    visibility: visible;
    transition: .25s;
}

/* Dica feixar painel de login */
.dica-fechar{
    position: fixed;
    top: 120px;
    right: 18px;
    color:#39ff14;
    text-align:center;
    font-size:15px;
    animation:pulsar 1.5s infinite;
}

.seta{
    display:block;
    font-size:28px;
}

@keyframes pulsar{
    0%{opacity:.4;transform:translateY(0);}
    50%{opacity:1;transform:translateY(-6px);}
    100%{opacity:.4;transform:translateY(0);}
}