/* =========================
   STYLE.CSS — HOUSE DOOR
   ========================= */

/* RESET */

* {
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins, sans-serif;
}

html {
scroll-behavior:smooth;
}

body {
background:#111118;
color:white;
line-height:1.6;
padding-top:90px;
padding-bottom:100px; /* espaço pro cookie */
min-height:100vh;
display:flex;
flex-direction:column;
}


/* =========================
   BANNER
   ========================= */

.banner-home {
width:100%;
overflow:hidden;
position:relative;
}

.slider-banner {
position:relative;
width:100%;
height:420px;
}

.slide {
position:absolute;
width:100%;
height:100%;
background-size:cover;
background-position:center;
opacity:0;
transition:opacity 1s ease-in-out;
display:flex;
align-items:center;
justify-content:center;
}

.slide.ativo {
opacity:1;
z-index:1;
}


/* TEXTO DO BANNER */

.banner-overlay {
background:rgba(0,0,0,0.55);
padding:40px;
border-radius:10px;
text-align:center;
color:white;
max-width:500px;
box-shadow:0 20px 60px rgba(0,0,0,0.6);
}

.banner-overlay h1 {
font-size:48px;
margin-bottom:10px;
color:#ff3b00;
text-shadow:
0 0 20px #ff0000,
0 0 40px #ff3b00;
}

.banner-overlay p {
font-size:20px;
margin-bottom:20px;
}

.banner-botoes {
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}

.btn-pedir {
background:#ff3b00;
color:white;
padding:12px 25px;
border-radius:6px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.btn-pedir:hover {
background:#ff0000;
transform:scale(1.05);
box-shadow:
0 0 15px #ff3b00,
0 0 30px #ff0000;
}

.btn-franquia {
background:#ffaa00;
color:black;
padding:12px 25px;
border-radius:6px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.btn-franquia:hover {
transform:scale(1.05);
box-shadow:
0 0 15px #ffaa00,
0 0 30px #ff9900;
}


/* =========================
   FAIXA MARCA
   ========================= */

.faixa-marca {
width:100%;
background:#000;
padding:50px 0;
display:flex;
justify-content:center;
align-items:center;
}

.faixa-marca h2 {
color:#ff3b00;
font-size:72px;
font-weight:900;
letter-spacing:6px;
text-shadow:
0 0 20px #ff3b00,
0 0 40px #ff3b00,
0 0 80px #ff0000;
}


/* =========================
   MENU
   ========================= */

header {
position:fixed;
top:0;
width:100%;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(10px);
padding:20px;
z-index:1000;
}

.menu {
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}

.logo img {
height:60px;
filter:
drop-shadow(0 0 10px #ff3b00)
drop-shadow(0 0 30px #ff0000);
}

nav a {
margin:0 15px;
text-decoration:none;
color:white;
font-weight:500;
transition:0.3s;
}

nav a:hover {
color:#ff3b00;
}

.btn-menu {
background:#ff3b00;
padding:10px 20px;
border-radius:6px;
text-decoration:none;
color:white;
transition:0.3s;
}

.btn-menu:hover {
background:#ff0000;
}


/* =========================
   BENEFÍCIOS
   ========================= */

.beneficios {
padding:100px 20px;
text-align:center;
}

.beneficios h2 {
color:#ff3b00;
font-size:34px;
margin-bottom:10px;
text-shadow:0 0 10px #ff3b00;
}

.cards {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:35px;
max-width:1200px;
margin:auto;
margin-top:40px;
}

.card {
background:#151515;
border-radius:12px;
overflow:hidden;
text-align:center;
padding:25px;
transition:0.4s;
border:1px solid #1f1f1f;
}

.card:hover {
transform:translateY(-8px) scale(1.05);
box-shadow:
0 0 25px #ff3b00,
0 0 50px #ff3b00,
0 0 80px #ff0000;
}

.card h3 {
margin-top:10px;
font-size:22px;
}

.card p {
font-size:20px;
color:#ff3b00;
font-weight:700;
}


/* =========================
   KIT EMPREENDEDOR
   ========================= */

.meu-kit {
padding:100px 20px;
text-align:center;
background:#0c0c0c;
}

.meu-kit h2 {
color:#ff3b00;
font-size:34px;
}

.slider {
display:flex;
gap:20px;
overflow-x:auto;
max-width:1100px;
margin:auto;
padding:20px;
scroll-behavior:smooth;
scroll-snap-type:x mandatory;
}

.slider img {
width:260px;
height:180px;
object-fit:cover;
border-radius:10px;
flex-shrink:0;
transition:0.3s;
cursor:pointer;
scroll-snap-align:center;
}

.slider img:hover {
transform:scale(1.1);
box-shadow:
0 0 25px #ff3b00,
0 0 50px #ff3b00,
0 0 90px #ff0000;
}


/* =========================
   IMPACTO SOCIAL
   ========================= */

.impacto {
padding:100px 20px;
text-align:center;
background:#0e0e14;
}

.impacto h2 {
color:#ff3b00;
font-size:34px;
margin-bottom:30px;
}

.numeros {
display:flex;
justify-content:center;
gap:80px;
flex-wrap:wrap;
}

.numeros h3 {
font-size:56px;
color:#ff3b00;
text-shadow:
0 0 15px #ff3b00,
0 0 35px #ff0000;
}

.numeros p {
font-size:18px;
margin-top:5px;
}


/* =========================
   GALERIA
   ========================= */

.galeria-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
max-width:1200px;
margin:auto;
margin-top:40px;
padding:0 20px;
}

.galeria-grid img {
width:100%;
height:230px;
object-fit:cover;
border-radius:12px;
transition:0.3s;
}


/* =========================
   AJUSTE DE PÁGINAS INTERNAS
   ========================= */

section.pagina {
padding-top:140px;
margin-top:120px;
text-align:center;
}

section.pagina h1 {
font-size:36px;
font-weight:700;
color:#ff3b00;
margin-bottom:10px;
}

section.pagina p {
font-size:18px;
color:#ccc;
max-width:700px;
margin:0 auto 30px;
}


/* =========================
   FORMULÁRIO
   ========================= */

.formulario {
padding:100px 20px;
text-align:center;
}

form {
max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}

form input,
form textarea {
padding:12px;
border:none;
border-radius:6px;
}

form textarea {
height:120px;
}

form button {
padding:12px;
background:#ff3b00;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
}


/* =========================
   FOOTER
   ========================= */

footer {
padding:40px;
text-align:center;
background:#000;
margin-top:auto;
}


/* =========================
   WHATSAPP
   ========================= */

.whatsapp-fixo {
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
padding:14px 20px;
border-radius:30px;
text-decoration:none;
font-weight:bold;
z-index:999;
}


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

@media(max-width:900px){

.menu {
flex-direction:column;
gap:10px;
}

nav {
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.cards {
grid-template-columns:1fr;
}

.slider-banner {
height:260px;
}

.banner-overlay {
padding:25px;
}

.banner-overlay h1 {
font-size:32px;
}

.faixa-marca h2 {
font-size:42px;
}

.numeros {
flex-direction:column;
gap:35px;
}

}


/* =========================
   COOKIES BANNER
   ========================= */

#cookie-banner {
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
width:95%;
max-width:900px;
background:#111;
color:#fff;
padding:15px;
z-index:99999;
border-radius:10px;
box-shadow:0 0 15px rgba(0,0,0,0.5);
}

.cookie-box {
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
}

.cookie-buttons button {
padding:10px 15px;
border:none;
cursor:pointer;
border-radius:5px;
}

#acceptCookies {
background:#ff3c00;
color:#fff;
}

#configCookies {
background:#444;
color:#fff;
}