:root{
    --azul-900:#002A4E;
    --azul-700:#003D6B;
    --azul-500:#055F93;
    --vermelho-live:#B91617;
    --dourado:#E1C47C;
    --bg:#F0F4F5;
    --texto:#0D1927;
    --card:#ffffff;
    --shadow:0 12px 30px rgba(0,0,0,.10);
  }
  
  *{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,Arial,sans-serif;}
  body{background:var(--bg);color:var(--texto);}
  
  html{
    scroll-behavior:smooth;
    scroll-snap-type:y mandatory; /* cada seção "encaixa" */
  }
  
  .snap{
    scroll-snap-align:start;
  }
  
  /* Como o topo é sticky, isso evita que a seção fique escondida atrás do menu */
  #home, #vantagens, #video, #planos{
    scroll-margin-top:80px;
  }
  
  /* ---------- TOPBAR ---------- */
  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(0,42,78,.95);
    backdrop-filter: blur(6px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  
  .topbar-inner{
    max-width:1100px;
    margin:0 auto;
    padding:10px 18px;
    display:flex;
    align-items:center;
    gap:16px;
    justify-content:space-between;
  }
  
  /* Brand com ícone + título (pra você usar no base.html) */
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#fff;
    font-weight:900;
    letter-spacing:.2px;
  }
  
  .brand-icon{
    height:45px;
    width:auto;
    display:block;
  }
    
  .brand-title{
    font-size:22px;
    line-height:1;
    font-weight:900;
  }
    
  .nav{
    display:flex;
    gap:18px;
    align-items:center;
  }
  
  .nav a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    opacity:.95;
  }
  
  .nav a:hover{opacity:1;}
  
  .nav-cta{
    background:var(--vermelho-live);
    padding:10px 14px;
    border-radius:10px;
  }
  
  .nav-toggle{
    display:none;
    background:transparent;
    border:0;
    color:#fff;
    font-size:22px;
    cursor:pointer;
  }
  
  /* ---------- PAGE ---------- */
  .page{min-height:70vh;}
  
  /* ---------- HERO (HOME) ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--azul-900),var(--azul-700));
    color:#fff;
    padding:46px 18px 60px;
  }
  
  .hero-inner{
    max-width:1100px;
    margin:0 auto;
    text-align:center;
  }
  
  /* AQUI você ajusta o tamanho da logo (desktop) */
  .hero-logo{
    height:450px; /* 👈 ajuste livre (160, 180...) */
    max-width:90vw;
    margin:10px auto 18px;
    display:block;
  }
  
  .hero h1{
    font-size:40px;
    line-height:1.1;
    margin-bottom:10px;
  }
  
  .hero p{
    opacity:.92;
    max-width:760px;
    margin:0 auto;
  }
  
  .hero-actions{
    margin-top:18px;
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
  }
  
  .btn{
    background:var(--vermelho-live);
    color:#fff;
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    display:inline-block;
  }
  
  .btn-outline{
    background:transparent;
    border:1px solid rgba(255,255,255,.45);
  }
  
  /* ---------- SECTIONS ---------- */
  .section{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:56px 18px;
  }
  
  .section-alt{
    background:#fff;
  }
  
  .container{
    max-width:1100px;
    margin:0 auto;
  }
  
  .section-top{
    align-items:flex-start;    /* joga o conteúdo para o topo */
    padding-top:28px;          /* dá um respiro acima */
  }
  .video-area{
    margin-top:28px;
    text-align:center;
  }
  
  .video-title{
    color:var(--azul-900);
    font-size:22px;
    font-weight:900;
    margin-bottom:6px;
  }
  
  .video-subtitle{
    opacity:.9;
    margin-bottom:14px;
  }
  
  /* Títulos centralizados */
  .section-title{
    font-size:30px;
    color:var(--azul-900);
    text-align:center;
    margin-bottom:10px;
  }
  
  .section-subtitle{
    text-align:center;
    max-width:820px;
    margin:0 auto 26px;
    opacity:.9;
  }
  
  /* Espaço pra não ficar por baixo das redes na esquerda */
  .section .container{
    padding-left:72px;
    padding-right:18px;
  }
  
  /* ---------- FEATURES (VANTAGENS) ---------- */
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    max-width:1100px;
    margin:0 auto;
  }
    
  .feature-box{
    background:var(--card);
    box-shadow:var(--shadow);
    padding:14px;
    border-radius:14px;
  }
  
  .feature-box h3{
    color:var(--azul-900);
    margin-bottom:8px;
  }
  
  .feature-box p{
    opacity:.92;
  }
  
  /* ---------- VIDEO ---------- */
  .video-wrap{
    background:var(--card);
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow);
    max-width:680px;
    margin:20px auto 0;
  }
  
  .video-wrap iframe{
    width:100%;
    height:380px;
    display:block;
  }
  
  /* ---------- BILLING TABS ---------- */
  .billing-tabs{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin:18px 0 22px;
  }
  
  .tab-btn{
    border:1px solid rgba(0,0,0,.10);
    background:#fff;
    padding:10px 14px;
    border-radius:999px;
    cursor:pointer;
    font-weight:800;
    color:var(--azul-900);
  }
  
  .tab-btn.active{
    background:var(--azul-900);
    color:#fff;
    border-color:transparent;
  }
  
  /* ---------- PLANS ---------- */
  .plan-group{display:none;}
  .plan-group.active{display:block;}
  
  .plan-grid{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  
  .plan-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid rgba(0,0,0,.06);
  }
  
  .plan-top{
    background:#f1f1f1;
    padding:22px;
    text-align:center;
  }
  
  .plan-name{
    font-weight:900;
    letter-spacing:.3px;
    text-transform:uppercase;
    color:var(--azul-900);
  }
  
  .plan-price{
    font-size:44px; /* maior */
    font-weight:900;
    margin-top:8px;
    color:#111;
  }
  
  .plan-price span{
    font-size:14px;
    font-weight:700;
    opacity:.75;
  }
  
  .plan-body{
    padding:22px;
    text-align:center;
  }
  
  .plan-body ul{
    list-style:none;
    display:grid;
    gap:10px;
    margin:12px 0 18px;
  }
  
  .plan-body li{
    opacity:.92;
    font-size:16px;
  }
  
  .plan-cta{
    display:inline-block;
    padding:14px 22px;
    border-radius:999px;
    border:2px solid var(--azul-900);
    text-decoration:none;
    font-weight:900;
    color:var(--azul-900);
  }
  
  .featured{transform:translateY(-6px);}
  .featured-top{background:#ffd6dc;}
  
  .plan-badge{
    margin-top:10px;
    display:inline-block;
    background:var(--vermelho-live);
    color:#fff;
    padding:6px 10px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
  }
  
  .featured-cta{
    background:var(--vermelho-live);
    border-color:transparent;
    color:#fff;
  }
  
  /* ---------- FOOTER ---------- */
  .footer{
    background:var(--azul-900);
    color:#fff;
    text-align:center;
    padding:20px;
    margin-top:30px;
  }
  
  /* ---------- FLOATING SOCIALS (LEFT) ---------- */
  .social-float{
    position:fixed;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:60;
  }
  
  .social-float a{
    width:46px;
    height:46px;
    border-radius:14px;
    background:#fff;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  
  .social-float a img{
    width:22px;
    height:22px;
  }
  
  .social-float a:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 35px rgba(0,0,0,.18);
  }
  
  /* ---------- WHATSAPP FLOAT (RIGHT-BOTTOM) ---------- */
  .whats-float{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:60;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    font-weight:900;
    padding:12px 16px;
    border-radius:999px;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    gap:10px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  
  .whats-float img{
    width:22px;
    height:22px;
  }
  
  .whats-float:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 35px rgba(0,0,0,.25);
  }
  
  /* ---------- RESPONSIVO ---------- */
  @media (max-width: 980px){
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .plan-grid{grid-template-columns:1fr; max-width:560px; margin:0 auto;}
    .video-wrap iframe{height:360px;}
    .hero h1{font-size:34px;}
    .section .container{padding-left:72px;} /* ainda deixa espaço das redes */
  }
  
  @media (max-width: 640px){
    /* Menu mobile */
    .nav{display:none;}
    .nav-toggle{display:block;}
  
    body.nav-open .nav{
      display:flex;
      position:absolute;
      right:18px;
      top:58px;
      background:rgba(0,42,78,.98);
      padding:12px;
      border-radius:14px;
      flex-direction:column;
      gap:12px;
      width:220px;
    }
  
    /* Logo menor no celular (ajuste aqui também) */
    .hero-logo{height:125px;}
  
    /* No celular, tira o espaço extra (as redes não devem atrapalhar) */
    .section .container{
        padding-left:62px;
        padding-right:18px;
      }
      
      @media (max-width: 640px){
        .section .container{
          padding-left:18px;
          padding-right:18px;
        }
      }
      
    .video-wrap iframe{height:220px;}
  }

  @media (max-width: 640px){

    /* Espaço extra para nada ficar escondido */
    .hero,
    .section{
      padding-bottom:160px;
    }
  
    /* Cards sempre acima dos flutuantes */
    .vantagens-grid,
    .planos-grid{
      position:relative;
      z-index:1;
    }
  
    /* Redes sociais: descer bem e afastar do conteúdo */
    @media (max-width: 640px){
        .social-float{
          display:none;
        }
      }
        
    /* WhatsApp: menor e colado no canto */
    .whats-float{
      right:10px;
      bottom:10px;
      padding:12px;
      border-radius:999px;
      z-index:2;
    }
  
    .whats-float span{
      display:none; /* só ícone no celular */
    }
  
    .whats-float img{
      width:22px;
      height:22px;
    }
  
  }

  /* Redes sociais somente no rodapé (mobile) */
.footer-mobile-social{
  display:none;
}

@media (max-width: 640px){

  .footer-mobile-social{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:32px 16px 24px;
    background:#f3f6f8;
    border-top:1px solid rgba(0,0,0,0.05);
    text-align:center;
  }

  .footer-mobile-social p{
    font-size:16px;
    font-weight:800;
    color:#0a2e4e;
    margin:0;
  }

  .footer-social-icons{
    display:flex;
    gap:18px;
  }

  .footer-social-icons a{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    transition:transform 0.2s ease;
  }

  .footer-social-icons a:active{
    transform:scale(0.92);
  }

  .footer-social-icons img{
    width:22px;
    height:22px;
  }

}

@media (max-width: 640px){
    html{
      scroll-snap-type: none !important;
    }
  }
  
  .form-card{
    background:#fff;
    box-shadow:var(--shadow);
    border-radius:16px;
    padding:18px;
    max-width:820px;
    margin:0 auto;
    display:grid;
    gap:12px;
  }
  .form-card input{
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    outline:none;
  }
  .form-card label{font-weight:800;color:var(--azul-900);}
  
  .grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .row{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
  }
  .pay-badges{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:12px 0 18px;
  }
  .pay-badges span{
    background:#fff;
    border:1px solid rgba(0,0,0,.12);
    padding:8px 12px;
    border-radius:999px;
    font-weight:900;
    color:var(--azul-900);
  }
  @media (max-width:640px){
    .grid2{grid-template-columns:1fr;}
  }