:root{
  /* Brand Colors from Manual */
  --brand-purple:#7538A0; --brand-pink:#E91E63; --brand-orange:#FF6A00; --brand-black:#0B0B0D; --brand-white:#FFFFFF;

  /* Site Colors */
  --bg:#0B0B0D; --text:#FFFFFF; --muted:#B9BBCE; --card:#1a1a1a; --border:#333;
  --primary:#7538A0; --secondary:#E91E63; --accent:#FF6A00;
  --radius:18px; --shadow:0 12px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}

/* ====== GLOBAL ANIMATED BACKGROUNDS ====== */
.bg-wrap{position:fixed;inset:0;z-index:-2;overflow:hidden}
.blob{position:absolute;filter:blur(60px);opacity:.45;mix-blend-mode:screen;border-radius:50%;animation:float 24s ease-in-out infinite alternate}
.blob.b1{background:radial-gradient(closest-side,rgba(117,56,160,.7),transparent 70%);width:60vmax;height:60vmax;left:-20vmax;top:-10vmax;animation-duration:30s}
.blob.b2{background:radial-gradient(closest-side,rgba(233,30,99,.6),transparent 70%);width:46vmax;height:46vmax;right:-14vmax;top:-8vmax}
.blob.b3{background:radial-gradient(closest-side,rgba(255,106,0,.6),transparent 70%);width:40vmax;height:40vmax;left:10vmax;bottom:-12vmax;animation-duration:28s}
@keyframes float{to{transform:translate3d(6vw, -3vh,0) scale(1.07)}}

/* STARFIELD CANVAS */
canvas#stars{position:fixed;inset:0;z-index:-1;opacity:.35;}

/* NAV */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);background:rgba(10,10,12,.6);}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;gap:12px;align-items:center}
.brand img {
    width: 86px;
    height: auto;
}


.brand h1{font-family:Pacifico,cursive;font-size:18px;margin:0;font-weight:400;letter-spacing:.3px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.menu{display:flex;gap:22px;align-items:center}
.menu a{color:var(--text);text-decoration:none;font-weight:600;font-size:14px;opacity:.9}
.menu a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px; font-weight:700;letter-spacing:.2px;text-decoration:none;transform:translateZ(0)}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));color:var(--brand-white)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.hamb{display:none}

/* HERO */
.hero{position:relative;padding:90px 0 50px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--border);padding:6px 10px;border-radius:999px}
.eyebrow .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.title{font-family:Montserrat,sans-serif;font-size:42px;line-height:1.1;margin:14px 0 10px;font-weight:700}
.title .gradient{background:linear-gradient(90deg,var(--primary), var(--secondary), var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{font-size:18px;color:var(--muted);max-width:52ch}
.hero-ctas{display:flex;gap:14px;margin-top:22px}
.hero-art{position:relative;display:grid;place-items:center;perspective:800px}
.hero-logo {
    width: 100%;
    max-width: 600px;
    filter: drop-shadow(0 0 50px rgba(0, 236, 250, .25)) drop-shadow(0 0 80px rgba(250, 87, 193, .18));
    transition: transform .35s ease;
}


.orbit{position:absolute;inset:auto;top:10%;width:86%;height:86%;border:1px dashed rgba(255,255,255,.18);border-radius:50%;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.badge{position:absolute;bottom:-10px;right:6px;background:rgba(255,255,255,.06);border:1px solid var(--border);padding:10px 14px;border-radius:12px;font-size:12px;box-shadow:var(--shadow)}
.badge b{background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* SECTION */
section{padding:80px 0;position:relative;}
section h2{font-family:Montserrat,sans-serif;font-size:30px;margin:0 0 10px;font-weight:700}
section p.lead{color:var(--muted);max-width:62ch}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:var(--radius);padding:0;box-shadow:var(--shadow);position:relative;overflow:hidden;transform:translateZ(0)}
.card:before{content:"";position:absolute;inset:-1px -1px auto -1px;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent))}
.thumb{display:grid;place-items:center; }
.thumb span{font-size:12px;color:var(--muted);}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:0; border-radius:10px;}
.card-body{padding:22px}
.card h3{font-family:Montserrat,sans-serif;margin:0 0 6px;font-weight:600}
.price{font-weight:800;font-size:24px}
.features{margin:10px 0 16px;display:grid;gap:8px;color:var(--muted)}
.features li{list-style:none;display:flex;gap:8px;align-items:flex-start}
.features li:before{content:"✔";font-size:14px;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* HOW IT WORKS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.step{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.step figure{aspect-ratio:16/9;background:linear-gradient(135deg,rgba(255,178,77,.25),rgba(250,87,193,.18));margin:0;border-bottom:1px solid var(--border);display:grid;place-items:center;color:#111;font-weight:800}
.step .content{padding:18px}
.step .n{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(90deg,var(--primary),var(--secondary));font-weight:800;color:#111}

/* AUDIO GALLERY */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.sample{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.cover{aspect-ratio:1/1;background:linear-gradient(135deg,rgba(117,56,160,.25),rgba(233,30,99,.18));display:grid;place-items:center}
.sample .body{padding:16px}
.sample h4{margin:0 0 6px}
audio{width:100%}

/* TESTIMONIOS */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.testi{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:14px;display:grid;gap:10px}
.who{font-weight:700}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(117,56,160,.3),rgba(233,30,99,.25));border:1px solid var(--border)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.faq-art{aspect-ratio:4/3;background:radial-gradient(closest-side,rgba(117,56,160,.25),transparent 70%),linear-gradient(135deg,rgba(255,106,0,.2),rgba(233,30,99,.2));border:1px solid var(--border);border-radius:14px}
details{background:var(--card);border:1px solid var(--border);padding:16px;border-radius:14px}
details+details{margin-top:12px}
summary{cursor:pointer;font-weight:700}

/* FORM */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.field{display:grid;gap:8px}
.input, textarea{background:#0f0f15;border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);outline:none}
textarea{min-height:120px}
.note{color:var(--muted);font-size:13px}

/* REVEAL ANIMATIONS */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
.tilt:hover{transform:perspective(700px) rotateX(2deg) rotateY(-2deg)}

/* FOOTER */
footer{padding:30px 0;color:var(--muted);text-align:center;border-top:1px solid var(--border)}

/* FLOATING WHATSAPP */
.wa{position:fixed;right:18px;bottom:18px;z-index:60}
.wa a{display:grid;place-items:center;width:56px;height:56px;border-radius:999px;background:linear-gradient(135deg,#25D366,#128C7E);box-shadow:0 12px 35px rgba(18,140,126,.45);border:1px solid rgba(255,255,255,.25)}
.wa svg{width:28px;fill:#fff}

/* MOBILE MENU */
.mobile-menu{
  display:none;
  position:fixed;
  top:70px;
  left:0;
  right:0;
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:20px;
  flex-direction:column;
  gap:16px;
  z-index:40;
  backdrop-filter:saturate(140%) blur(10px);
}
.mobile-menu.active{display:flex}
.mobile-menu a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.mobile-menu a:last-child{border-bottom:none}

/* LEGAL PAGES */
.legal-page{
  padding:120px 0 80px;
  min-height:100vh;
}
.legal-header{
  text-align:center;
  margin-bottom:60px;
}
.legal-header h1{
  font-family:Montserrat,sans-serif;
  font-size:48px;
  font-weight:700;
  margin:0 0 20px;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.legal-intro{
  font-size:18px;
  color:var(--muted);
  margin:0;
}
.legal-content{
  max-width:900px;
  margin:0 auto;
  line-height:1.7;
}
.legal-content h2{
  font-family:Montserrat,sans-serif;
  font-size:24px;
  font-weight:700;
  margin:40px 0 20px;
  color:var(--secondary);
  border-bottom:2px solid var(--primary);
  padding-bottom:8px;
}
.legal-content h3{
  font-family:Montserrat,sans-serif;
  font-size:18px;
  font-weight:600;
  margin:30px 0 15px;
  color:var(--accent);
}
.legal-content p{
  margin:0 0 16px;
  font-size:16px;
}
.legal-content ul,.legal-content ol{
  margin:0 0 20px;
  padding-left:24px;
}
.legal-content li{
  margin:8px 0;
  font-size:16px;
}
.legal-content strong{
  color:var(--text);
  font-weight:600;
}
.legal-content a{
  color:var(--secondary);
  text-decoration:underline;
}
.legal-content a:hover{
  color:var(--accent);
}
.responsible-info,.contact-info{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  margin:20px 0;
  border-left:4px solid var(--primary);
}
.legal-footer{
  background:rgba(117,56,160,.1);
  border:1px solid var(--primary);
  border-radius:12px;
  padding:20px;
  margin:40px 0 20px;
  font-size:14px;
  font-style:italic;
}
.legal-content hr{
  border:none;
  height:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  margin:40px 0;
  border-radius:2px;
}

/* SERVICE PAGES */
.service-page{
  padding:120px 0 80px;
  min-height:100vh;
}

.service-header{
  text-align:center;
  margin-bottom:60px;
}

.service-badge{
  display:inline-block;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  color:var(--brand-white);
  padding:8px 16px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  margin-bottom:20px;
}

.service-header h1{
  font-family:Montserrat,sans-serif;
  font-size:48px;
  font-weight:700;
  margin:0 0 20px;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.service-intro{
  font-size:20px;
  color:var(--muted);
  margin:0 0 30px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}

.service-price{
  font-size:36px;
  font-weight:800;
  color:var(--accent);
  margin:0;
}

.service-details{
  margin-bottom:80px;
}

.details-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:40px;
}

.detail-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  text-align:center;
}

.detail-card h3{
  font-size:18px;
  margin:0 0 12px;
  color:var(--secondary);
}

.detail-card p{
  margin:0;
  color:var(--muted);
}

/* FORM SECTION */
.form-section{
  max-width:900px;
  margin:0 auto;
}

.form-section h2{
  font-family:Montserrat,sans-serif;
  font-size:32px;
  font-weight:700;
  text-align:center;
  margin:0 0 10px;
  color:var(--text);
}

.form-intro{
  text-align:center;
  color:var(--muted);
  margin:0 0 40px;
  font-size:18px;
}

.form-step{
  display:none;
}

.form-step.active{
  display:block;
}

.service-form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:40px;
  box-shadow:var(--shadow);
}

.form-group{
  margin-bottom:40px;
}

.form-group h3{
  font-family:Montserrat,sans-serif;
  font-size:20px;
  font-weight:600;
  margin:0 0 20px;
  color:var(--secondary);
  border-bottom:2px solid var(--primary);
  padding-bottom:8px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}

.field{
  display:grid;
  gap:8px;
}

.field label{
  font-weight:600;
  color:var(--text);
  font-size:14px;
}

.field input,
.field select,
.field textarea{
  background:#0f0f15;
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  color:var(--text);
  outline:none;
  font-size:16px;
  transition:border-color 0.3s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--primary);
}

.field textarea{
  resize:vertical;
  min-height:120px;
  font-family:inherit;
}

.checkbox-group{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:16px;
}

.checkbox-group input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--primary);
}

.checkbox-group label{
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
}

.checkbox-group label a{
  color:var(--secondary);
  text-decoration:underline;
}

/* PAYMENT SECTION */
.payment-section{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:40px;
  box-shadow:var(--shadow);
  text-align:center;
}

.payment-section h3{
  font-family:Montserrat,sans-serif;
  font-size:24px;
  font-weight:700;
  margin:0 0 30px;
  color:var(--text);
}

.payment-summary{
  background:rgba(117,56,160,.1);
  border:1px solid var(--primary);
  border-radius:12px;
  padding:24px;
  margin:0 0 40px;
}

.summary-item{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
  color:var(--muted);
}

.summary-total{
  display:flex;
  justify-content:space-between;
  font-weight:700;
  font-size:20px;
  color:var(--text);
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:12px;
}

.payment-buttons{
  display:grid;
  gap:24px;
  margin-bottom:30px;
}

.payment-option{
  background:#0f0f15;
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
}

.payment-option h4{
  margin:0 0 16px;
  color:var(--secondary);
  font-weight:600;
}

.payment-placeholder{
  color:var(--muted);
  font-style:italic;
  margin:0;
}

/* RESPONSIVE */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .testis{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .menu{display:none}
  .hamb{display:block}
  .legal-page{padding:100px 0 60px}
  .legal-header h1{font-size:36px}
  .legal-content{padding:0 10px}

  /* Service pages responsive */
  .service-page{padding:100px 0 60px}
  .service-header h1{font-size:36px}
  .details-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .service-form{padding:24px}
  .payment-section{padding:24px}
}