:root {
 --laranja: #ff7a00;
 --preto: #0d0d0d;
 --cinza: #1f1f1f;
 --branco: #ffffff;
 --cinza-claro: #bfbfbf;
 --cinza-metalico:#3B3B3B;
}

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

html {
 scroll-behavior: smooth;
}

body {
 top:10px;
 font-family: "Poppins", sans-serif;
 background-color: var(--preto);
 color: var(--branco);
 display: grid;
 grid-template-rows: auto 1fr auto;
 min-height: 100vh;
}

/* HEADER */
.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: var(--cinza);
 padding: 1rem 2rem;
 position: sticky;
 top: 0;
 z-index: 10;
 box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}


.logo {
 display: flex;
 width: 80px;
 height: 80px;
 border-radius: 10px;
 
}

.logo span {
 color: var(--laranja);
}

.nav-list {
 display: flex;
 list-style: none;
 gap: 2rem;
}

.nav-list a {
 text-decoration: none;
 color: var(--branco);
 transition: color 0.3s;
}

.nav-list a:hover {
 color: var(--laranja);
}

.btn-header {
 background: var(--laranja);
 color: var(--branco);
 padding: 0.6rem 1.2rem;
 border-radius: 5px;
 text-decoration: none;
 font-weight: 600;
 transition: background 0.3s;
}

.btn-header:hover {
 background: #ff9933;
}

/* MENU MOBILE */

.menu-toggle {
 display: none;
 flex-direction: column;
 gap: 5px;
 cursor: pointer;
}

.bar {
 width: 25px;
 height: 3px;
 background: var(--branco);
}

/* HERO */
.hero {
 
display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 8rem 18rem 5rem 5rem;
 background: linear-gradient(135deg, var(--cinza) 0%, var(--preto) 100%);
 flex-wrap: wrap;
}

.hero-text {
 max-width: 500px;
 animation: fadeInLeft 1s ease-in-out;
}

.hero-text h1 {
 color: var(--laranja);
 font-size: 2.5rem;
 margin-bottom: 1rem;
}

.hero-text p {
 font-size: 1.2rem;
 margin-bottom: 2rem;
}


.btn {
 background: var(--laranja);
 color: var(--branco);
 padding: 0.5rem 2rem;
 border-radius: 30px;
 font-weight: 600;
 text-decoration: none;
 margin-top: 10px;
 transition: all 0.3s;
}

.btn:hover {
 background: transparent;
 border: 2px solid var(--laranja);
}

.hero-image img {
 width: 350px;
 animation: fadeInRight 1s ease-in-out;
}

/* BENEFÍCIOS */
/* .beneficios { */
 /* text-align: center; */
 /* padding: 4rem 2rem; */
/* } */

.beneficios h2 {
 color: var(--laranja);
 font-size: 2rem;
 margin-bottom: 2rem;
}

.grid-beneficios {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 2rem;
}

.card {
 background: #141414;
 border-radius: 10px;
 padding: 2rem;
 transition: transform 0.3s ease, background 0.3s;
}

.card:hover {
 transform: translateY(-5px);
 background: #1c1c1c;
}

.card span {
 font-size: 2rem;
 display: block;
 margin-bottom: 1rem;
 color: var(--laranja);
}

/* FOOTER */
.footer {
 background: #0a0a0a;
 text-align: center;
 padding: 2rem;
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
}

.social-links {
 display: flex;
 justify-content: center;
 gap: 1.5rem;
}

.social-btn {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
 color: white;
 text-decoration: none;
 transition: transform 0.3s ease, background 0.3s ease;
}

/* Cores das redes sociais */
.whatsapp {
 background-color: #25d366;
}

.instagram {
 background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.social-btn:hover {
 transform: translateY(-5px);
 filter: brightness(1.2);
}

.footer-phones {
 color: var(--cinza-claro);
 font-size: 0.9rem;
}

/* ANIMAÇÕES */
@keyframes fadeInLeft {
 from { opacity: 0; transform: translateX(-50px); }
 to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
 from { opacity: 0; transform: translateX(50px); }
 to { opacity: 1; transform: translateX(0); }
}

/* Botão Flutuante */
.whatsapp-float {
 position: fixed;
 width: 60px;
 height: 60px;
 bottom: 20px;
 right: 20px;
 background-color: #25d366;
 color: #fff;
 border-radius: 50px;
 text-align: center;
 font-size: 30px;
 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 transition: transform 0.3s ease;

}

.whatsapp-float:hover {
 transform: scale(1.1);
 color: #fff;
}

/* Tooltip (Legenda que aparece ao passar o mouse) */
.tooltip-whatsapp {
 position: absolute;
 right: 70px;
 background-color: #333;
 color: #fff;
 padding: 5px 10px;
 border-radius: 5px;
 font-size: 14px;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s;
 white-space: nowrap;
}

.whatsapp-float:hover .tooltip-whatsapp {
 opacity: 1;
 visibility: visible;
}