body{

		  
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    /*background:linear-gradient(rgba(31,77,54,0.7),rgba(10,10,10,0.8)) !important;     /* tire isso que o fundo aparece*/
    color:white;
    text-align:center;
    overflow-x:hidden;
	

}
body::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5); /* ajusta aqui */
	
}

/* FUNDO */
body::before{
    content:"";
    position:fixed;
    width:300px;
    height:300px;
    background:rgba(255,204,0,0.08);
    filter:blur(120px);
    top:10%;
    left:50%;
    transform:translateX(-50%);
    z-index:0;
}

.container{
    max-width:300px;
    margin:auto;
    padding:20px;
    position:relative;
    z-index:1;

    display:flex;
    flex-direction:column;
    align-items:center;
}

/* LOGO */
.logo{
    width:80%;
    max-width:340px;
    margin:5px;
    display:block;
    animation: brilho 3s infinite alternate;
}

.logo-redonda{
    border-radius:50%;
}

@keyframes brilho{
    from{ filter: drop-shadow(0 0 5px rgba(255,204,0,0.3)); }
    to{ filter: drop-shadow(0 0 20px rgba(255,204,0,1)); }
}

h4{
    color:#cfcfcf;
    margin-bottom:20px;

	
}


.btn{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
    margin:0px;
    border-radius:10px;
    background: linear-gradient(145deg,#1f4d36,#0a0a0a);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    color:white;
    text-decoration:none; 
    font-size:16px;
    width:100%;
    gap: 10px;
    height: 40px;
}


/* ÍCONE */
.btn i{
    font-size:14px;
}

/* TEXTO */
.btn span{
}

/* HOVER */
.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 15px rgba(255,204,0,0.4);
}

/* CLICK */
.btn:active{
    transform:scale(0.97);
}

/* BOTÕES GRANDES (igual topo do primeiro layout) */
.btn-site,
.btn-compartilhar
{
    height:60px;
}

/* DESTAQUE AMARELO */
.btn.btn-site,
.btn.btn-compartilhar,
.btn.btn-como-chegar,
.btn.btn-whatsapp,
.btn.btn-agendamento,
.btn.btn-pix,
.btn-dados-de-seu-negocio

{
    border:1px solid #ffcc00;
    box-shadow:0 0 10px rgba(255,204,0,0.5);
}
.btn.btn-site,
.btn.btn-compartilhar{
    position:fixed;
    top:15px;
    width:45px;
    height:45px;
	display:flex;
    align-items:center;
    justify-content:center;
	border-radius:50%;
	background:linear-gradient(145deg,#3a6b4b,#0a0a0a);
	border:1px solid #ffcc00;
	box-shadow:0 0 10px rgba(255,204,0,0.5);
	font-size:18px;
	z-index:999;
	transition:0.3s;
	gap:0;
}

.btn.btn-site{left:15px;}
.btn.btn-compartilhar{right:15px;}
/* aqui vc escolhe tira o texto do  button*/
.btn.btn-site span, .btn.btn-compartilhar span,.btn-avaliar span,.btn-ligar span  {display:none}





/* GRID */
.grid-botoes{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
    width:100%;
}

/* padrão */
.grid-botoes form{
    grid-column:1 / -1;
}

/* quando EXISTIREM OS 2 */
.grid-botoes:has(.btn-avaliar):has(.btn-ligar) form:has(.btn-avaliar),
.grid-botoes:has(.btn-avaliar):has(.btn-ligar) form:has(.btn-ligar){
    grid-column:span 1;
}

/* botão */
.grid-botoes form .btn-ligar{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}

/* ORDEM */
.grid-botoes form:has(.btn-como-chegar){order:1;}
.grid-botoes form:has(.btn-whatsapp){order:2;}
.grid-botoes form:has(.btn-agendamento){order:3;}
.grid-botoes form:has(.btn-instagram){order:4;}
.grid-botoes form:has(.btn-avaliar){order:5;}
.grid-botoes form:has(.btn-ligar){order:6;}
.grid-botoes form:has(.btn-pix){order:7;}
.grid-botoes form:has(.btn-wi-fi){order:8;}


.grid-botoes form:has(.btn-perguntas){order:9;}
.grid-botoes form:has(.btn-facebook){order:10;}
.grid-botoes form:has(.btn-contato){order:11;}



.grid-botoes form:has(.btn-youtube){order:12;}

.grid-botoes form:has(.btn-telegram){order:13;}
.grid-botoes form:has(.btn-tiktok){order:14;}

.grid-botoes form:has(.btn-orçamento){order:15;}
.grid-botoes form:has(.btn-cardápio){order:16;}

.grid-botoes form:has(.btn-telefone){order:17;}

.grid-botoes form:has(.btn-qrcode){order:18;}

.grid-botoes form:has(.btn-notificação){order:19;}
.grid-botoes form:has(.btn-mensagem){order:20;}

.grid-botoes form:has(.btn-e-mail){order:21;}

.grid-botoes form:has(.btn-fotos){order:22;}

.grid-botoes form:has(.btn-dados-de-seu-negocio){order:999;}



/* aqui c controla os objetos dentro do button*/
.btn-dados-de-seu-negocio i {
    display: none;
}
.btn-dados-de-seu-negocio {
    min-height: 100px;
	color: rgb(255, 204, 0);
	
}
.btn-dados-de-seu-negocio span{
	font-size:15px;
    white-space: pre-line;
}