/* ===================================
   ESTILOS ESPECÍFICOS - PARA SUA CASA
   =================================== */

/* Controle de banner mobile/desktop */
.hero-banner-mobile {
  display: none !important;
}

.hero-banner-desktop {
  display: block !important;
}

@media (max-width: 1024px) {
  .hero-banner-mobile {
    display: block !important;
  }

  .hero-banner-desktop {
    display: none !important;
  }
}

/* Ajuste do grid para 4 planos */
.plans-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* Ajuste no plano featured para não crescer tanto */
.plan-card.featured {
  border: 2px solid var(--brand);
  transform: scale(1.03);
}

.plan-card.featured:hover {
  transform: scale(1.05) translateY(-5px);
}

/* Responsividade ajustada para 4 cards */
@media (max-width: 1200px) {
  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px !important;
  }
}

/* ===================================
   MELHORIAS MOBILE - PLANOS
   =================================== */
@media (max-width: 1024px) {
  /* Seção de planos */
  .plans-section {
    padding: 40px 0 !important;
  }

  .section-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 25px !important;
    padding: 0 15px !important;
    text-align: center !important;
  }

  .plans-grid {
    padding: 0 10px !important;
    gap: 12px !important;
  }

  .plan-card {
    padding: 18px 12px !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .plan-card.featured {
    transform: scale(1) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
  }

  .plan-badge {
    font-size: 9px !important;
    padding: 5px 10px !important;
    letter-spacing: 0.5px !important;
  }

  .plan-speed {
    margin: 15px 0 !important;
  }

  .speed-num {
    font-size: 42px !important;
    line-height: 1 !important;
  }

  .speed-unit {
    font-size: 18px !important;
  }

  .plan-features {
    margin: 15px 0 !important;
    font-size: 12px !important;
  }

  .plan-features li {
    padding: 5px 0 !important;
    line-height: 1.3 !important;
  }

  .plan-features .check {
    font-size: 11px !important;
  }

  .btn-plan {
    padding: 11px 16px !important;
    font-size: 13px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px auto 0 !important;
    display: block !important;
  }

  .ribbon {
    font-size: 9px !important;
    padding: 5px 20px !important;
    right: -28px !important;
  }
}

/* ===================================
   MELHORIAS MOBILE - FORMULÁRIO
   =================================== */
@media (max-width: 1024px) {
  .faixa-form {
    padding: 40px 20px !important;
  }

  .faixa-form h3 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
    text-align: center !important;
  }

  .faixa-form p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    text-align: center !important;
  }

  .form-wrap {
    max-width: 100% !important;
  }

  .inputs {
    gap: 15px !important;
  }

  .input {
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }

  .input::placeholder {
    font-size: 15px !important;
  }

  .select-wrapper label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .submit {
    margin-top: 20px !important;
  }

  .submit button,
  .submit .btn {
    width: 100% !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
}