:root {
  --primary: #0f1436;
  --accent: #d4af37;
  --accent-hover: #b8942f;
  --text-light: #fff;
  --shadow: 0 15px 40px rgba(0,0,0,0.6);
  --radius: 16px;
  --gradient-btn: linear-gradient(45deg, #d4af37, #ffd700);
  --gradient-btn-hover: linear-gradient(45deg, #ffd700, #d4af37);
}

/* RESET */
* { box-sizing:border-box; margin:0; padding:0; font-family:'bree-serif', Arial; scroll-behavior:smooth; }
body { background: linear-gradient(180deg, #0f1436 0%, #131842 100%); color: var(--text-light); line-height:1.6; overflow-x:hidden; }
a { text-decoration:none; transition:0.4s; }
a:hover { color: var(--accent-hover); }

/* PARTICULAS - canvas */
#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }

/* MENU INTERATIVO */
.menu {
  position: sticky;
  top:0;
  width:100%;
  background: rgba(15,20,54,0.95);
  z-index:1000;
  box-shadow:0 4px 15px rgba(0,0,0,0.5);
}
.menu ul {
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
  gap:40px;
  padding:15px 0;
  margin:0;
}
.menu ul li a {
  color: var(--text-light);
  font-weight:bold;
  font-size:1.1rem;
  position: relative;
}
.menu ul li a::after {
  content:'';
  position:absolute;
  width:0;
  height:3px;
  background: var(--accent);
  left:0; bottom:-5px;
  transition: width 0.3s;
}
.menu ul li a:hover::after { width:100%; }

/* HEADER */
header {
  display:flex; justify-content:center; align-items:center;
  flex-direction:column; text-align:center;
  padding:100px 20px;
}
.header-wrapper { display:flex; flex-direction:column; align-items:center; }
.team-photo {
  width:300px; height:300px;
  border-radius:50%;
  border:5px solid var(--accent);
  object-fit:cover;
  box-shadow:0 15px 50px rgba(0,0,0,0.6);
  margin-bottom:20px;
  transition: transform 0.6s;
}
.team-photo:hover { transform: scale(1.08) rotate(2deg); }
.header-text h1 { font-size:3rem; color: var(--accent); animation: fadeInDown 1s ease forwards; }
.header-text p { font-size:1.4rem; opacity:0.9; margin-top:10px; animation: fadeInDown 1.2s ease forwards; }

/* SEÇÕES */
section { padding:80px 20px; max-width:1200px; margin:0 auto; opacity:0; transform: translateY(40px); transition: all 0.8s ease; }
section.visible { opacity:1; transform: translateY(0); }
h2 { font-size:2.5rem; color: var(--accent); margin-bottom:40px; text-align:center; }

/* ABOUT */
.about { display:flex; flex-wrap:wrap; align-items:center; gap:50px; justify-content:center; margin-top:40px; }
.about-text { max-width:650px; font-size:1.1rem; line-height:1.8; }

/* MÉTODO */
.method-wrapper {
  display:flex; flex-wrap:wrap; gap:30px; justify-content:center; align-items:center;
  background: rgba(15,20,54,0.95);
  padding:40px; border-radius:16px; box-shadow:0 15px 50px rgba(0,0,0,0.6);
  transition: transform 0.6s;
}
.method-wrapper:hover { transform: translateY(-5px); }
.method-wrapper img.method-photo {
  width:250px; height:250px;
  border-radius:16px;
  border:5px solid var(--accent);
  object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  transition: transform 0.6s;
}
.method-wrapper img.method-photo:hover { transform: scale(1.05); }
.method-wrapper p { max-width:600px; font-size:1.1rem; line-height:1.7; text-align:justify; margin:10px 0; }
.method-cta { text-align:center; margin-top:30px; }

/* =================== BOTÕES =================== */
.button, .unlock-card a.button, .cta a.button {
  background: #FAC900;
  color: #0F1436 !important;
  border-radius: 50px;
  font-weight: bold;
  padding: 12px 25px;
  display: inline-block;
  text-align: center;
  transition: transform 0.3s, background 0.3s;
}
.button:hover, .unlock-card a.button:hover, .cta a.button:hover {
  transform: scale(1.05);
  background: #e5c100;
}

/* =================== MENU HAMBURGUER =================== */
.menu {
  position: sticky;
  top: 0;
  background: rgba(15,20,54,0.95);
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 40px;
  padding: 15px 0;
  margin: 0;
}
.menu ul li a {
  color: var(--text-light);
  font-weight: bold;
  font-size: 1.1rem;
}

/* HAMBURGUER ICON */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  position: absolute;
  right: 20px;
  top: 18px;
  z-index: 1100;
}
.hamburger div {
  width: 30px;
  height: 3px;
  background-color: #FAC900;
  border-radius: 2px;
}

/* MENU MOBILE */
@media (max-width: 768px) {
  .menu ul {
    position: fixed;
    top: 60px;
    right: -100%;
    flex-direction: column;
    background: rgba(15,20,54,0.95);
    width: 60%;
    height: calc(100% - 60px);
    gap: 30px;
    padding: 50px 20px;
    transition: right 0.3s;
  }
  .menu ul.active {
    right: 0;
  }
  .hamburger {
    display: flex;
  }

  /* Unlock cards e videos responsivos */
  .unlocks {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .videos {
    flex-direction: column;
    gap: 20px;
  }
}


/* FOTO TALITA */
.talita-wrapper { display:flex; justify-content:center; margin-top:20px; }
.talita-photo { width:200px; height:200px; background: var(--primary); border:5px solid var(--accent); border-radius:16px; object-fit:cover; box-shadow:0 10px 30px rgba(0,0,0,0.6); transition: transform 0.6s; }
.talita-photo:hover { transform: scale(1.05); }
.talita-text { text-align:center; max-width:600px; margin:20px auto; }
.talita-text p { margin-bottom:15px; }

/* DESBLOQUEIOS */
.unlocks { display:grid; grid-template-columns:repeat(3, 1fr); gap:25px; margin-top:40px; perspective:1000px; }
.unlock-card {
  background: var(--primary);
  border:2px solid var(--accent);
  padding:25px; border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.6s, box-shadow 0.6s, background 0.5s;
  transform-style: preserve-3d;
}
.unlock-card:hover {
  transform: rotateY(5deg) rotateX(5deg) translateY(-10px);
  box-shadow:0 25px 60px rgba(0,0,0,0.8);
  background:#1b1e4a;
}
.unlock-card img { width:100%; height:150px; object-fit:cover; border-radius:12px; margin-bottom:12px; box-shadow:0 5px 20px rgba(0,0,0,0.4); transition: transform 0.5s; }
.unlock-card img:hover { transform: scale(1.05); }
.unlock-card h3 { margin-bottom:15px; color: var(--accent); }
.unlock-card p { margin-bottom:15px; }
.unlock-card a.button { display:inline-block; padding:12px 25px; background: var(--gradient-btn); color: var(--primary); border-radius: var(--radius); font-weight:bold; transition:0.5s; background-size:200% 200%; }
.unlock-card a.button:hover { background: var(--gradient-btn-hover); color:#fff; transform: scale(1.05); }

/* DEPOIMENTOS */
.videos { display:flex; gap:25px; justify-content:center; flex-wrap:wrap; margin-top:50px; }
.video-wrapper { width:320px; height:180px; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); transition: transform 0.5s; }
.video-wrapper:hover { transform: scale(1.05); }

/* GARANTIA */
.guarantee { background:#111; padding:50px; border-radius: var(--radius); text-align:center; margin-top:70px; box-shadow: var(--shadow); }
.guarantee h3 { font-size:2rem; color: var(--accent); animation: pulse 2s infinite; margin-bottom:20px; }
.guarantee p { font-size:1.15rem; line-height:1.7; }

/* CTA PRINCIPAL */
.cta { text-align:center; margin-top:70px; }
.cta a.button { padding:18px 45px; font-size:1.2rem; font-weight:bold; border-radius: var(--radius); display:inline-block; background: var(--gradient-btn); background-size:200% 200%; transition:0.6s; color: var(--primary); }
.cta a.button:hover { background: var(--gradient-btn-hover); color:#fff; transform: scale(1.08) rotate(-1deg); }

/* RODAPÉ */
footer { background:#0a0c28; padding:50px; display:flex; justify-content:center; gap:50px; align-items:center; flex-wrap:wrap; }
footer p { text-align:center; width:100%; }
.social a { font-size:2rem; color: var(--accent); transition:0.5s; }
.social a:hover { color: var(--accent-hover); transform: scale(1.3) rotate(10deg); }

/* ANIMAÇÕES */
@keyframes pulse { 0%,100%{transform:scale(1);}50%{transform:scale(1.05);} }
@keyframes fadeInDown { from{opacity:0; transform:translateY(-50px);} to{opacity:1; transform:translateY(0);} }

/* RESPONSIVIDADE */
@media(max-width:1024px) { .unlocks { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px) { .unlocks { grid-template-columns:1fr; } .team-photo, .method-photo { width:200px; height:200px; } .header-text h1 { font-size:2.2rem; } .header-text p { font-size:1.1rem; } }



  
  
  
  
  