:root {
  --accent-blue:#38bdf8;
  --bg-card:#1e293b;
  --border:#2f2f2f;
  --text-light:#f5f5f5;
  --text-muted:#94a3b8;
  --gradient-btn:linear-gradient(135deg,#00c853,#00a8ff);
  --whatsapp:#25D366;
  --green:#00c853;
}

*{box-sizing:border-box;}
body {font-family:Arial,sans-serif;background:#121212;color:#f5f5f5;margin:0;}

/* HEADER */
header {
  background:linear-gradient(135deg,#1e293b,#0f172a);
  padding:20px 30px; position:sticky; top:0; z-index:900;
  border-bottom:2px solid #4a90e2;
}
.wrap {display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto;}
header img {height:55px; margin-left:10px;}
.menu-toggle {display:none;}
nav {position:relative;}
.menu-overlay {position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:800;}
.menu-overlay.show {display:block;}
ul.menu {list-style:none; display:flex; gap:10px; margin:0; padding:0;}
ul.menu > li {position:relative;}
ul.menu li a {
  display:inline-block; padding:6px 12px; background:var(--gradient-btn);
  color:#fff; font-weight:600; border-radius:6px; text-decoration:none; font-size:14px; line-height:1.2;
  transition:background .3s;
}
ul.menu li a:hover {background:linear-gradient(135deg,#00a8ff,#00c853);}

/* Submenus desktop */
ul.submenu {
  list-style:none; position:absolute; top:100%; left:0; background:#1e293b;
  border:1px solid var(--border); border-radius:6px; padding:6px 0; min-width:200px;
  display:none; z-index:850;
}
ul.submenu li a {display:block; padding:6px 10px; background:none; color:#f5f5f5; text-decoration:none; font-size:14px;}
ul.submenu li a:hover {background:#2b3a4e; color:var(--accent-blue);}
@media (min-width:769px){ ul.menu > li:hover > ul.submenu{display:block;} }

/* Mobile */
@media (max-width:768px){
  .menu-toggle {
    display:block; position:fixed; top:20px; right:20px; z-index:1100;
    background:#0072ff; color:#fff; border:none; border-radius:8px;
    padding:10px 14px; font-size:22px; cursor:pointer;
  }
  ul.menu {
    position:fixed; top:0; right:-100%; height:100vh; width:72vw; max-width:340px;
    padding:20px 16px; flex-direction:column; gap:10px; background:#1e293b;
    border-left:2px solid var(--border); z-index:1000; transition:right .3s;
  }
  ul.menu.show {right:0;}
  ul.menu.hide {right:-100%;}
  ul.menu > li > a {width:100%; text-align:center;}
  ul.submenu {
    position:static; background:#0f172a; border:1px solid var(--border);
    margin:6px 0 10px; border-radius:6px; padding:0; max-height:0; overflow:hidden;
    transition:max-height .3s, padding .3s; display:block;
  }
  ul.menu li.open > .submenu {max-height:500px; padding:6px 0;}
}

/* SLIDER DE BANNERS */
.banner-carrossel {
  position: relative;
  max-width: 2000px;
  height: 500px;
  margin: 18px auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.6);
  border: 1px solid #2f2f2f;
}
.slides {
  display: flex;
  flex-direction: row;   /* alinhamento horizontal */
  flex-wrap: nowrap;     /* impede quebra para baixo */
  transition: transform .6s ease;
  width: 100%;
  height: 100%;
}
.slide {
  flex: 0 0 100%;        /* cada slide ocupa 100% da largura do carrossel */
  height: 100%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.controles {
  position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
  display:flex; justify-content:space-between; padding:0 16px; z-index:2;
}
.controles span {
  background:rgba(0,0,0,.55); color:#fff; border-radius:50%; width:42px; height:42px;
  display:grid; place-items:center; font-size:26px; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.indicadores {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
.indicadores span {width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.6); cursor:pointer;}
.indicadores .ativo {background:var(--accent-blue);}
@media (max-width:1024px){ .banner-carrossel{height:500px;} }
@media (max-width:768px){
  .banner-carrossel{height:280px; border-radius:0; max-width:100%;}
  .controles span{width:34px; height:34px; font-size:20px;}
}

/* PLANOS */
.section-title {
  max-width:1200px; margin:24px auto 0; padding:0 20px;
  font-size:1.6rem; font-weight:800; color:var(--accent-blue); text-align:center;
}
.planos {
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem;
  padding:2rem 1rem; max-width:1100px; margin:0 auto;
}
.plano {
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.6); width:300px; padding:1.2rem;
  background:#1e1e1e; border:1px solid #2f2f2f; transition:transform .25s ease, box-shadow .25s ease;
}
.plano:hover {transform:translateY(-6px); box-shadow:0 10px 24px rgba(0,0,0,.75);}
.plano h2 {margin:0 0 6px; color:gold; font-size:1.15rem; font-weight:700;}
.preco {font-size:1.35rem; font-weight:800; margin:.6rem 0 .9rem; color:#00c853;}
.plano ul {list-style:none; padding:0; margin:.6rem 0 .8rem;}
.plano ul li {margin:.45rem 0; color:#ddd; display:flex; align-items:center; gap:8px; line-height:1.35;}
.plano ul li i {color:#38bdf8; min-width:18px;}
.btn-contratar {
  display:block; text-align:center; background:#0072ff; color:white; padding:.7rem; border-radius:8px;
  text-decoration:none; font-weight:700; margin-top:.9rem;
}
.btn-contratar:hover {background:#0056cc;}

/* Rodapé */
footer {
  text-align:center; padding:30px 20px; background:#1e293b; color:var(--text-muted);
  margin-top:50px; font-size:.92rem; border-top:1px solid var(--border);
}
footer ul {
  list-style:none; padding:0; margin:12px 0 20px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}
footer ul li a {color:var(--text-muted); text-decoration:none; font-weight:600; transition:color .3s;}
footer ul li a:hover {color:var(--accent-blue); text-decoration:underline;}

/* WhatsApp */
.whatsapp-flutuante {
  position:fixed; bottom:20px; right:20px; background-color:var(--whatsapp); color:#fff;
  padding:14px 18px; border-radius:50px; font-size:16px; font-weight:700; text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.3); z-index:1200; cursor:pointer;
}
.whatsapp-flutuante i {margin-right:8px;}
.whatsapp-chatbox {
  position:fixed; bottom:80px; right:20px; background-color:#1a1a1a; border:1px solid #333; border-radius:10px;
  padding:15px; width:280px; opacity:0; transform:translateY(20px); transition:all .3s ease; pointer-events:none; z-index:1200;
}
.whatsapp-chatbox.ativo {opacity:1; transform:translateY(0); pointer-events:auto;}
.whatsapp-chatbox textarea {
  width:100%; height:80px; border-radius:8px; border:1px solid #444; padding:8px; background:#0f0f0f; color:#fff; resize:none;
}
.whatsapp-chatbox button {
  display:block; width:100%; margin-top:10px; padding:10px 14px; background-color:#25D366; color:#fff; font-weight:700; border:none;
  border-radius:8px; cursor:pointer; transition:background .3s ease; box-shadow:0 3px 6px rgba(0,0,0,0.35);
}
.whatsapp-chatbox button:hover {background-color:#1ebe5d;}

/* Botão voltar ao topo (lado esquerdo) */
#btnTopo {
  position:fixed; bottom:30px; left:30px; z-index:1200; background:#0072ff; color:#fff; border:none; border-radius:50%;
  width:50px; height:50px; font-size:20px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.3); display:none;
  transition:opacity .3s ease, transform .2s ease;
}
#btnTopo:hover {background:#00c853; transform:translateY(-3px);}
#btnTopo .fa-solid {font-family:"Font Awesome 6 Free","Font Awesome 5 Free",sans-serif; font-weight:900;}