:root{ 
  --purple: #9b009b;
  --orange: #ff6600;
  --white: #ffffff;
  --text: #333333;
  --max-width: 1100px;
}

/* Reset & basics */
*{box-sizing:border-box}
body{margin:0;font-family:Inter, Arial, Helvetica, sans-serif;color:var(--text);background:#fff;scroll-behavior:smooth}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:relative;
  top:0;
  left:0;
  right:0;
  background:var(--white);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  z-index:1200;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 20px;
}
.brand-img{height:78px;display:block}

/* Nav */
.site-nav{
  display:flex;
  gap:28px;
  align-items:center
}
.site-nav .nav-link{
  text-decoration:none;
  color:var(--purple);
  font-weight:700;
  font-size:18px;
  padding:8px
}
.site-nav .nav-link:hover{color:var(--orange)}

/* Nav toggle (mobile) */
.nav-toggle{
  display:none;
  background:none;
  border:0;
  font-size:28px;
  cursor:pointer
}

/* Sections */
.section{
  padding:20px 0;
  text-align:center;
  scroll-margin-top:70px;   /* <<< EVITA MENU CORTAR A FOTO */
}

/* --- Ajuste distancia da foto --- */
.section-about {
  padding-top: 40px;  /* Desktop */
}

@media (max-width: 700px) {
  .section-about {
    padding-top: 200px;  /* Mobile */
  }
}

@media (max-width: 420px) {
  .section-about {
    padding-top: 220px;  /* Telas menores */
  }
}
/* --- Fim do ajuste --- */

/* Quem Somos */
.section-about .about-grid{
  display:flex;
  gap:40px;
  align-items:center;
  justify-content:center
}
.section-about .about-text{text-align:center}
.about-text h1{
  color:var(--purple);
  font-size:36px;
  margin:0 0 18px
}
.about-text p{
  font-size:18px;
  line-height:1.6;
  margin:0
}
.about-photo img{
  width:360px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  display:block
}

/* Courses */
.section-courses h2{
  color:var(--purple);
  font-size:30px;
  margin-bottom:10px
}
.section-contact h2 {
  color: var(--purple); 
  font-size:30px;
  margin-bottom:10px
}
.course-name{font-size:20px}
.buttons{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center
}
.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700
}
.btn-buy{background:var(--orange);color:#fff}
.btn-free{background:var(--purple);color:#fff}
.btn-whats{background:#25D366;color:#fff}

/* Footer */
.site-footer{
  background:#f7f7f7;
  padding:26px 0;
  text-align:center;
  color:#666;
  font-size:14px
}

/* Responsive behavior */
@media (max-width: 900px){
  .brand-img{height:72px}
  .about-photo img{width:320px}
  .site-nav .nav-link{font-size:17px}
}

@media (max-width: 700px){
  .header-inner{padding:10px 14px}
  .brand-img{height:68px}
  .nav-toggle{display:block}

  .site-nav{
    position:absolute;
    top:88px;
    left:0;
    right:0;
    flex-direction:column;
    background:#fff;
    padding:14px 20px;
    gap:8px;
    display:none;
    border-top:1px solid rgba(0,0,0,0.04)
  }
  .site-nav.show{display:flex}
  
  .section{padding:30px 0}

  .section-about .about-grid{
    flex-direction:column-reverse;
    text-align:center
  }

  .about-photo img{
    width:260px;
    margin:0 auto
  }

  .about-text h1{font-size:28px}
}

@media (max-width:420px){
  .brand-img{height:60px}
  .about-photo img{width:220px}
  .about-text p{font-size:16px}
  .site-nav{top:78px}
}
.whatsapp-float {
    position: fixed;
    overflow: visible !important;
    bottom: 20px;      /* distância do fundo */
    right: 20px;       /* distância da direita */
    z-index: 9999;     /* garante que fica por cima de tudo */
}

.whatsapp-float img {
    width: 60px;       /* tamanho do ícone */
    height: auto;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s;
}

.whatsapp-float img:hover {
    transform: scale(1.1);
}