*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;}
body{background:#121212;color:#fff;overflow-x:hidden;transition:0.5s;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
section{opacity:0;transform:translateY(30px);transition:all 1s ease; padding:60px 20px; display:flex;flex-direction:column;align-items:center;}
section.show{opacity:1;transform:translateY(0);}

/* HEADINGS */
h1,h2,h3{margin-bottom:15px;}
p{line-height:1.6;color:#ccc;margin-bottom:20px;text-align:center;}

/* HEADER */
header{display:flex;flex-direction:column;align-items:center;text-align:center;padding:80px 20px;position:relative;overflow:hidden;}
header img{width:160px;margin-bottom:20px;animation:slideDown 1s ease-out;}
header h1{font-size:3.2em;animation:fadeIn 1.5s ease-out;}
header p{max-width:900px;font-size:1.3em;animation:fadeIn 2s ease-out;opacity:0;animation-fill-mode:forwards;animation-delay:0.5s;}

/* MENU HAMBURGUER */
.menu-btn{position:absolute;top:20px;left:20px;cursor:pointer;display:flex;flex-direction:column;gap:5px;z-index:1001;}
.menu-btn div{width:30px;height:3px;background:#fff;border-radius:2px;transition:.3s;}

/* SIDEMENU */
.side-menu{position:fixed;top:0;left:-260px;width:260px;height:100%;background:#1a1a1a;box-shadow:2px 0 10px rgba(0,0,0,.5);transition:.3s;z-index:1000;padding-top:70px;}
.side-menu.active{left:0;}
.side-menu a,.submenu-btn{display:block;padding:12px 20px;color:#fff;text-decoration:none;transition:.3s;cursor:pointer;}
.side-menu a:hover,.submenu-btn:hover{background:#333;}
.submenu{display:none;padding-left:15px;}
.submenu a{font-size:0.9rem;}
.arrow{float:right;transition:.3s;}
.arrow.open{transform:rotate(90deg);}

/* REDES SOCIAIS */
.socials{display:flex;gap:30px;margin-bottom:80px;}
.socials a img{
  width:55px;
  transition:transform .6s cubic-bezier(.17,.67,.83,.67), filter .6s;
}
.socials a:hover img{
  transform:scale(1.25) rotate(5deg);
  filter:brightness(1.3) drop-shadow(0 0 10px #fff);
}

/* PLANOS */
.plans{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;max-width:1200px;}
.plan{
  background:linear-gradient(145deg,#1e1e1e,#222);
  padding:25px;
  border-radius:20px;
  width:300px;
  text-align:center;
  box-shadow:0 10px 20px rgba(0,0,0,.5);
  border:2px solid transparent;
  transition:.6s ease;
  position:relative;
  transform:translateY(0);
}
.plan.popular{border-color:#fff;box-shadow:0 12px 30px rgba(255,255,255,.3);}
.plan:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 20px 40px rgba(255,255,255,.2),0 0 25px rgba(255,255,255,.1);
}
.plan img{border-radius:15px;margin-bottom:20px;transition:.5s ease;}
.plan img:hover{transform:scale(1.05) rotate(-2deg);}
.plan h3{color:#fff;font-size:1.7em;margin-bottom:10px;transition:.5s;}
.plan .price{
  color:#fff;
  font-size:2em;
  font-weight:bold;
  margin-bottom:15px;
  animation:pulse 2.5s infinite;
}
.plan p{margin-bottom:20px;color:#aaa;line-height:1.5;}
.plan button{
  padding:12px 25px;
  background:#fff;
  color:#121212;
  font-weight:bold;
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:.4s ease;
}
.plan button:hover{
  background:#121212;
  color:#fff;
  transform:scale(1.1) rotate(-1deg);
}
.plan .badge{
  position:absolute;top:-10px;right:-10px;
  background:#fff;color:#121212;
  padding:5px 12px;
  border-radius:50px;font-weight:bold;font-size:0.9em;
  box-shadow:0 4px 15px rgba(255,255,255,.3);
  animation:badgePulse 2s infinite;
}

/* SOBRE NÓS */
.about {
  max-width: 1000px;
  margin: 0 auto;          
  text-align: center;      
  display: flex;
  flex-direction: column;
  align-items: center;     
}
.about-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  margin-top: 20px;
}
.about-content img {
  width: 220px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  transition: transform .6s ease, box-shadow .6s ease;
}
.about-content img:hover{
  transform:scale(1.05) translateY(-5px);
  box-shadow:0 15px 30px rgba(0,0,0,.7);
}

/* CLIENT AREA - Ajustada */
.client-area iframe {
  width:95%;          /* ocupa quase toda a largura */
  max-width:1400px;   /* para telas muito grandes */
  min-width:300px;    /* para telas pequenas não quebrar */
  height:800px;       /* maior no desktop */
  max-height:90vh;    /* não ultrapassa 90% da altura da tela */
  border-radius:20px;
  border:none;
  margin-top:30px;
  transition:all 1s ease;
  box-shadow:0 15px 40px rgba(0,0,0,.7);
}

/* RESPONSIVO CLIENT AREA */
@media(max-width:1100px){
  .client-area iframe{
    height:600px;     /* ajusta altura para telas médias */
  }
}

@media(max-width:768px){
  .client-area iframe{
    width:98%;        /* quase toda largura da tela */
    height:500px;     /* altura menor para celular */
  }
}

@media(max-width:480px){
  .client-area iframe{
    width:100%;       /* ocupa 100% da tela */
    height:400px;     /* altura compacta para celular */
    border-radius:15px;
  }
}

/* ANIMAÇÕES */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes badgePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
@keyframes floatUp{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* RESPONSIVO */
@media(max-width:1100px){.plans{flex-direction:column;align-items:center;}}
@media(max-width:600px){header h1{font-size:2.2em;}header p{font-size:1em;}}