.elementor-3351 .elementor-element.elementor-element-703e10d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.89;--padding-top:100px;--padding-bottom:300px;--padding-left:0px;--padding-right:0px;}.elementor-3351 .elementor-element.elementor-element-703e10d:not(.elementor-motion-effects-element-type-background), .elementor-3351 .elementor-element.elementor-element-703e10d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#020101;}.elementor-3351 .elementor-element.elementor-element-703e10d::before, .elementor-3351 .elementor-element.elementor-element-703e10d > .elementor-background-video-container::before, .elementor-3351 .elementor-element.elementor-element-703e10d > .e-con-inner > .elementor-background-video-container::before, .elementor-3351 .elementor-element.elementor-element-703e10d > .elementor-background-slideshow::before, .elementor-3351 .elementor-element.elementor-element-703e10d > .e-con-inner > .elementor-background-slideshow::before, .elementor-3351 .elementor-element.elementor-element-703e10d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-3351 .elementor-element.elementor-element-a53fecb > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-3351 .elementor-element.elementor-element-a53fecb.elementor-element{--align-self:center;}:root{--page-title-display:none;}/* Start custom CSS *//* Cabeçalho dos planos */
.plans-header {
  text-align: center;
  margin: 40px 0 20px 0;
}

.plans-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #ff00ff; /* rosa neon */
  font-family: 'Montserrat', sans-serif;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.4); /* brilho suave */
}

/* Responsivo */
@media (max-width: 768px) {
  .plans-header h2 {
    font-size: 22px;
  }
}




/* Bloco geral */
.hero-text {
  text-align: center;
  padding: 50px 20px;
  background: transparent; /* fundo transparente */
  max-width: 900px;
  margin: 0 auto;
}

/* Título */
.hero-title {
  font-size: 36px;
  font-weight: 700;
  color: #ff00ff; /* rosa neon */
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.4); /* glow leve */
  font-family: 'Montserrat', sans-serif;
}

/* Subtítulos / texto */
.hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: #f1f1f1;
  margin: 8px 0;
  font-family: 'Montserrat', sans-serif;
}

/* Responsivo - tablets */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 28px;
  }
  .hero-subtitle {
    font-size: 16px;
  }
}

/* Responsivo - celulares */
@media (max-width: 768px) {
  .hero-title {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .hero-subtitle {
    font-size: 15px;
    line-height: 1.4;
  }
}




















.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 50px auto;
  max-width: 1200px;
}

.plan-card {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 0, 255, 0.3);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  box-shadow: 0 0 25px rgba(255, 0, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 35px rgba(255, 0, 255, 0.6);
}

.plan-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #ff00ff;
  text-shadow: 0 0 8px #ff00ff;
}

.plan-card .old-price {
  text-decoration: line-through;
  color: #888;
}

.plan-card .new-price {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 10px 0;
  color: #ff5ce1;
  text-shadow: 0 0 8px #ff00ff;
}

.plan-card button {
  margin-top: 15px;
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(90deg, #ff00ff, #8000ff);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #ff00ff;
}

<!-- ===== GRID DE PLANOS ===== -->
<div class="plans-grid">

  <!-- Plano Saindo do Zero -->
  <div class="plan-card">
    <h3>PLANO MONK – "SAINDO DO ZERO"</h3>
    <p class="old-price">De R$35,00</p>
    <p class="new-price">Por R$25,00</p>
    <p>+5 curadores<br>500 a 1.000 streamings</p>
    <button class="js-open-popup" 
            data-product="1883" 
            data-title="Plano Monk – Saindo do Zero" 
            data-price="R$25,00" 
            data-benefits="+5 curadores • 500 a 1.000 streamings">
      Selecionar Plano
    </button>
  </div>

  <!-- Plano No Jogo -->
  <div class="plan-card">
    <h3>PLANO MONK – "NO JOGO"</h3>
    <p class="old-price">De R$79,00</p>
    <p class="new-price">Por R$59,00</p>
    <p>+12 curadores<br>2.000 a 3.000 streamings</p>
    <button class="js-open-popup" 
            data-product="1884" 
            data-title="Plano Monk – No Jogo" 
            data-price="R$59,00" 
            data-benefits="+12 curadores • 2.000 a 3.000 streamings">
      Selecionar Plano
    </button>
  </div>

  <!-- Plano Decolando -->
  <div class="plan-card">
    <h3>PLANO MONK – "DECOLANDO"</h3>
    <p class="old-price">De R$129,00</p>
    <p class="new-price">Por R$98,00</p>
    <p>+20 curadores<br>5.000 a 6.000 streamings</p>
    <button class="js-open-popup" 
            data-product="1885" 
            data-title="Plano Monk – Decolando" 
            data-price="R$98,00" 
            data-benefits="+20 curadores • 5.000 a 6.000 streamings">
      Selecionar Plano
    </button>
  </div>

  <!-- Plano Explosão -->
  <div class="plan-card">
    <h3>PLANO MONK – "EXPLOSÃO"</h3>
    <p class="old-price">De R$197,00</p>
    <p class="new-price">Por R$157,00</p>
    <p>+30 curadores<br>7.000 a 12.000 streamings</p>
    <button class="js-open-popup" 
            data-product="1886" 
            data-title="Plano Monk – Explosão" 
            data-price="R$157,00" 
            data-benefits="+30 curadores • 7.000 a 12.000 streamings">
      Selecionar Plano
    </button>
  </div>

  <!-- Plano Em Busca do Hit -->
  <div class="plan-card">
    <h3>PLANO MONK – "EM BUSCA DO HIT"</h3>
    <p class="old-price">De R$989,00</p>
    <p class="new-price">Por R$789,00</p>
    <p>+50 curadores<br>30.000 a 50.000 streamings</p>
    <button class="js-open-popup" 
            data-product="1887" 
            data-title="Plano Monk – Em Busca do Hit" 
            data-price="R$789,00" 
            data-benefits="+50 curadores • 30.000 a 50.000 streamings">
      Selecionar Plano
    </button>
  </div>

  <!-- Plano Holofotes -->
  <div class="plan-card">
    <h3>PLANO MONK – "HOLOFOTES"</h3>
    <p class="old-price">De R$1.860,00</p>
    <p class="new-price">Por R$1.560,00</p>
    <p>+80 curadores<br>100.000 a 150.000 streamings</p>
    <button class="js-open-popup" 
            data-product="1888" 
            data-title="Plano Monk – Holofotes" 
            data-price="R$1.560,00" 
            data-benefits="+80 curadores • 100.000 a 150.000 streamings">
      Selecionar Plano
    </button>
  </div>

</div>

<!-- ===== POPUP ===== -->
<div class="popup-overlay" id="popup">
  <div class="popup-content">
    <span class="close-popup">&times;</span>
    <h2 id="popup-title">Plano Selecionado</h2>
    <p id="popup-price"></p>
    <small id="popup-benefits"></small>

    <form id="popup-form">
      <label>Link da sua música no Spotify*</label>
      <input type="url" name="spotify_link" required>

      <label>Nome da Música*</label>
      <input type="text" name="music_name" required>

      <label>Seu Nome no Spotify*</label>
      <input type="text" name="artist_name" required>

      <label>Gênero Musical*</label>
      <input type="text" name="genre" required>

      <input type="hidden" name="product_id" id="popup-product">

      <button type="submit" class="finalizar-btn">Finalizar Pedido</button>
    </form>
  </div>
</div>/* End custom CSS */