*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  background-color: #2d2b2b;
  color: white;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { text-decoration: none; color: white; cursor: pointer; transition: color 0.3s ease; }
a:hover, a:focus { color: #28a745; outline: none; }

header {
  background-color: #2d2b2b;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #383838;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.logo img { height: 40px; }

nav { 
 position: absolute; 
 top: 60px; right: 20px; 
 background: #2d2b2b; 
 border-radius: 8px; 
 padding: 10px 20px; 
 display: none; 
 flex-direction: column; 
 gap: 16px; 
}
nav.active { 
 display: flex; 
}
nav ul { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 display: flex; 
 flex-direction: column; 
 gap: 16px; 
}
nav ul li a { 
 padding: 6px 4px; 
}
nav ul li a:hover { 
 color: #28a745; 
}

.hamburger { 
 display: none; 
 flex-direction: column; 
 gap: 5px; 
 cursor: pointer; 
 margin-left: auto; 
 margin-right: 20px;
}
.hamburger span { 
 width: 25px; 
 height: 3px; 
 background: white; 
 border-radius: 5px; 
 transition: 0.3s;
}
.hamburger.active 
 span:nth-child(1) { 
   transform: rotate(45deg) translate(5px, 5px); 
 }
.hamburger.active 
 span:nth-child(2) {
    opacity: 0;
   }
.hamburger.active 
 span:nth-child(3) { 
   transform: rotate(-45deg) translate(5px, -5px); }

.btn-planos {
  background-color: #28a745;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-left: 10px;
}
.btn-planos:hover { background-color: #1e7e34; }

@media (min-width: 768px) {
  nav { position: static; display: flex !important; flex-direction: row; background: none; padding: 0; }
  nav ul { flex-direction: row; gap: 32px; }
  .hamburger { display: none; }
}
@media (max-width: 767px) { .hamburger { display: flex; } }

.plan-tabs { 
 flex-wrap: wrap; 
 display: grid;
 gap: 2rem;
 margin: 2rem auto 3rem;
 max-width: 960px;
 justify-content: center;
 grid-template-columns: repeat(4, 1fr); 
}
.plan-tab { 
 cursor: pointer; 
 padding: 1rem 1.8rem; 
 border-radius: 1.5rem; 
 font-size: 1.25rem; 
 font-weight: 500; 
 color: #ccc; 
 text-align: center; 
 min-width: 140px; 
 outline: none; 
}
.plan-tab .subtitle { 
 font-weight: 400; 
 font-size: 1rem; 
 color: #888; 
 margin-top: 0.25rem; 
}
.plan-tab.active {
  background-color: #2e4b36; 
  color: #d1e9d5; 
 }

.slider-wrapper { 
 margin: 0 auto; 
 max-width: 960px; 
 overflow: hidden; 
}
.slider { 
 display: flex; 
 will-change: transform; 
 transform: translateX(0); 
 transition: transform 0.5s ease; 
}
.panel {
 flex: 0 0 100%;
 display: flex;
 gap: 2rem;
 justify-content: center;
 align-items: flex-start;
 padding: 0.5rem 0.75rem 2rem;
 flex-wrap: wrap;
}
.plan-card {
 width: 280px;         
 min-height: 380px;     
 background-color: #151515; 
 border-radius: 0.8rem; 
 padding: 2rem 1.8rem 2.2rem 2.4rem; 
 box-shadow: 0 0 18px 2px #00f87f66; 
 border-left: 0.8rem solid #00f87f; 
 display: flex; 
 flex-direction: column; 
 justify-content: flex-start; 
 color: white; 
 transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.plan-card:hover { 
   transform: translateY(-8px);
   box-shadow: 0 0 24px 4px #00f87f99; 
 }
.plan-card h2 { 
   font-weight: 700;
   font-size: 1.85rem;
   color: #3cd07b;
   margin-bottom: 0.6rem;
   display: flex;       
   align-items: baseline; 
   gap: 6px;           
}
.plan-card h2 .unidade {
 font-size: 1rem;      
 font-weight: 400;  
 color: #bdbdbd;      
 margin-left: 4px;    
 }
.plan-card .lessons { 
   font-weight: 600; 
   font-size: 1.2rem; 
   margin-bottom: 0.5rem; 
}
.plan-card .description { 
   font-weight: 400; 
   font-size: 1rem; 
   color: #bdbdbd;
   line-height: 1.5; 
}

@media (max-width: 767px) {
  .plan-tabs { 
   grid-template-columns: repeat(2, 1fr); 
   gap: 2rem;
  }
  .plan-tab { 
   font-size: 1.1rem; 
   padding: 0.75rem 1.5rem;
    min-width: 120px; 
   }
  .plan-card { 
     width: 230px;      
     min-height: 220px; 
     padding: 1.6rem 1.2rem 2rem 1.6rem; 
 }
 .plan-card h2 {
   font-size: 1.5rem;
 }

 .plan-card .lessons {
   font-size: 1.05rem;
 }

 .plan-card .description {
   font-size: 0.9rem;
 }
}