:root{
  --brand:#00bfff;          /* azul capri */
  --brand-2:#33ccff;
  --ink:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --alt:#eef9ff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#f8fcff;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:.2s}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.row{display:flex;gap:16px}
.space-between{justify-content:space-between}
.center{align-items:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .nav{display:none}
}
h1{font-size:40px;margin-bottom:12px}
h2{font-size:28px;margin-bottom:12px}
h3{font-size:20px;margin-bottom:8px}
p{margin-bottom:12px;color:#111827}
.section{padding:56px 0}
.section.alt{background:var(--alt)}

/* ===== BOTÕES ===== */
.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:10px;
  border:1px solid #d1d5db;
  font-weight:600;
  transition:.2s;
}
.btn:hover{opacity:.9}
.btn-primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  border-radius:40px;
}
.btn-ghost{
  border:2px solid #fff;
  border-radius:40px;
  color:#fff;
  background:transparent;
}
.btn-ghost:hover{background:#fff;color:#003366}
.btn-outline{
  background:#fff;
  border-radius:40px;
  border:2px solid var(--brand);
  color:var(--brand);
}
.btn-outline:hover{background:var(--brand);color:#fff}

/* ===== HEADER ===== */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:70px;                 /* altura da faixa */
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,0.1);
  display:flex;
  align-items:center;          /* centraliza menu verticalmente */
  justify-content:center;      /* centraliza menu horizontalmente */
  z-index:20;
}

/* LOGO 200px NO CANTO ESQUERDO SEM AFETAR A FAIXA */
.brand{
  position:absolute;
  left:100px;            /* canto esquerdo */
  top:60%;              /* meio da faixa */
  transform:translateY(-50%);   /* centraliza verticalmente */
  height:60px;
  display:flex;
  align-items:center;
}

.brand img{
  height:200px;
  width:auto;
}


/* MENU */
.site-header .nav a{
  margin:0 30px;
  font-weight:600;
  color:#003366;
}
.site-header .nav a:hover{color:var(--brand)}

/* ===== HERO COM VÍDEO ===== */
.video-hero{
  position:relative;
  height:60vh;          /* menor */
  min-height:360px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  margin-top:70px;      /* compensar header fixo */
}
.video-hero video{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(55%);
  z-index:1;
}
.video-hero .overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0.4),rgba(0,0,0,0.8));
  z-index:2;
}
.video-hero .hero-content{
  position:relative;
  z-index:3;
  max-width:800px;
  padding:0 16px;
  animation:fadeIn 1.2s ease;
}
.video-hero h1{
  font-size:46px;
  line-height:1.1;
  font-weight:700;
  margin-bottom:14px;
}
.video-hero p{
  font-size:18px;
  margin-bottom:28px;
  color:#e0f7ff;
}
.video-hero .cta{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(30px);}
  to{opacity:1; transform:translateY(0);}
}

/* ===== SLIDER ===== */
.slider{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid #e5e7eb;
  background:#000;
  max-height:300px;
}
.slides{display:flex;transition:transform .6s ease}
.slide{min-width:100%;display:flex;align-items:center;justify-content:center;background:#021e33}
.slide img{width:100%;height:300px;object-fit:contain;background:#021e33}
.slide.invert{background:#fff}
.ctrl{
  position:absolute;
  top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.8);
  border:none;border-radius:50%;
  width:36px;height:36px;cursor:pointer
}
.prev{left:10px}
.next{right:10px}
.dots{
  position:absolute;bottom:8px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:8px
}
.dots button{
  width:10px;height:10px;border-radius:50%;
  border:none;background:rgba(255,255,255,.6);cursor:pointer
}
.dots button.active{background:#fff}

/* ===== CARDS, FEATURES, PLANOS ===== */
.card{
  background:var(--card);
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.badge{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#bdeeff;color:#045c6e;font-weight:700;margin-bottom:8px;
}
.features .card{min-height:130px}
.plans{margin-top:8px}
.plan{position:relative;text-align:center}
.plan .plan-name{font-weight:700;margin-bottom:6px}
.plan .price{font-size:32px;font-weight:700;margin:6px 0}
.plan .price span{font-size:16px;font-weight:600}
.plan.popular{outline:3px solid var(--brand)}
.plan .ribbon{
  position:absolute;top:-10px;right:-10px;
  background:var(--brand);color:#fff;
  padding:6px 10px;border-radius:10px
}
.note{color:var(--muted);margin-top:12px;font-size:14px}

/* ===== IMAGEM ATENDENTE ===== */
.card img[alt*="Atendente"]{
  width:80%;
  max-width:280px;
  display:block;
  margin:0 auto;
  border-radius:12px;
}

/* ===== FORMULÁRIO ===== */
form label{display:block;margin-top:12px;font-weight:600;color:var(--ink)}
input,textarea{
  width:100%;
  padding:10px;
  border:1px solid #d1d5db;
  border-radius:8px;
  margin-top:4px;
  font-family:inherit;
}
textarea{min-height:100px;resize:vertical;}
button#enviar{margin-top:14px;cursor:pointer}

/* ===== FOOTER ===== */
.site-footer{
  padding:24px 0;
  border-top:1px solid #e5e7eb;
  background:#fff;
  text-align:center;
  color:#555;
  font-size:14px;
}

/* ===== UTILITÁRIOS ===== */
/* ===== GLASSMORPHISM GLOBAL ===== */
:root{
  --glass-bg: rgba(255,255,255,0.12);
  --glass-stroke: rgba(255,255,255,0.35);
  --glass-shadow: 0 8px 24px rgba(0,0,0,.18);
  --glass-blur: 12px;
}

/* Fundo sutil com gradiente + ruído leve */
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,191,255,.10), transparent 50%),
    radial-gradient(1000px 600px at 110% 10%, rgba(51,204,255,.10), transparent 50%),
    linear-gradient(180deg, #eef7ff 0%, #f6fbff 100%);
}

/* Utilitário para aplicar glass onde quiser */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* Header com glass */
.site-header{
  background: rgba(255,255,255,0.26);
  border-bottom: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* Cards com glass */
.card{
  background: rgba(255,255,255,0.18);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}

/* Seções alternadas com glass claro */
.section.alt{
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(calc(var(--glass-blur) - 2px));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px));
  border-top: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

/* Hero overlay com glass para legibilidade */
.video-hero .overlay{
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* Slider com moldura glass */
.slider{
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
.ctrl{
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.8);
}

/* Botão do header com efeito glass */
.btn-header{
  background: rgba(0,191,255,0.65);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 6px 16px rgba(0,191,255,.35);
}

/* Rodapé com glass leve */
.site-footer{
  background: rgba(255,255,255,0.28);
  border-top: 1px solid var(--glass-stroke);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Opção: aplique glass em blocos específicos adicionando a classe .glass no HTML
   Ex.: <div class="card glass"> ... </div> ou <section class="section glass"> ... </section> */

/* Acessibilidade/performance: reduz efeito se preferido pelo usuário */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  :root{ --glass-blur: 6px; }
  .glass, .site-header, .card, .slider, .site-footer, .video-hero .overlay{
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(255,255,255,0.9);
  }
}

ul{list-style:none;padding:0;margin:0}
ul li{margin:6px 0}


/* ===== UPGRADE COMERCIAL 2026-03-07 ===== */
.site-header{height:76px;justify-content:initial}
.site-header .container{width:100%;display:flex;justify-content:space-between;align-items:center}
.brand{position:static;transform:none;height:auto}
.brand img{height:58px;width:auto}
.nav{display:flex;align-items:center;gap:2px}
.site-header .nav a{margin:0 10px}
.btn-header{background:#003366;color:#fff;border-color:#003366;border-radius:999px;padding:9px 16px}
.btn-header:hover{background:#0a4f94;color:#fff}

.sales-hero{height:72vh;min-height:420px}
.kicker{display:inline-block;background:rgba(0,0,0,.35);padding:8px 12px;border-radius:999px;font-weight:700;color:#d8f4ff;margin-bottom:12px}
.sales-cards .card h3{color:#03396c}
.sales-strip{text-align:center;max-width:900px;margin:0 auto}
.sales-strip p{font-size:18px}

.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:99;
  background:#25d366;
  color:#fff;
  border-radius:999px;
  padding:12px 18px;
  font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  border:2px solid rgba(255,255,255,.3);
}
.whatsapp-float:hover{background:#1fab54;color:#fff;transform:translateY(-1px)}

@media(max-width:900px){
  .site-header{height:auto;padding:10px 0}
  .brand img{height:48px}
  .nav{display:none}
  .sales-hero{height:66vh;min-height:380px}
  .video-hero h1{font-size:34px}
  .whatsapp-float{left:12px;right:12px;bottom:12px;text-align:center}
}

/* ===== AJUSTES FINAIS COMERCIAIS 2026-03-07 ===== */
.site-header{height:88px !important}
.video-hero{margin-top:88px !important}
.brand img{height:300px !important;width:auto;max-height:none}
.site-header .nav a.btn-header{color:#fff !important;background:#003f7d;border:1px solid #003f7d}
.site-header .nav a.btn-header:hover{color:#fff !important;background:#0a4f94}

/* ===== CORRECAO TOPO 2026-03-07 ===== */
body{padding-top:112px !important}
.site-header{height:112px !important}
.video-hero{margin-top:0 !important}
@media(max-width:900px){
  body{padding-top:63px !important}
  .site-header{height:63px !important}
  .brand img{height:140px !important}
}