/* ==========================================================
   INSCRIPCIONES - Premium V2 (negro + dorado)
   Objetivo:
   - Arreglar contraste (header estaba negro sobre negro)
   - Segmentar beneficios vs formulario
   - Responsive PC/tablet/móvil
   ========================================================== */

#inscripciones.inscripciones-section{
  background: #000 !important;
  position: relative;
  overflow: hidden;
}

#inscripciones.inscripciones-section::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #000 0%, #070707 45%, #000 100%),
    radial-gradient(1100px 620px at 50% -18%, rgba(212,175,55,0.20) 0%, rgba(0,0,0,0) 70%),
    radial-gradient(1600px 980px at 50% 74%, rgba(255,215,0,0.10) 0%, rgba(0,0,0,0) 76%),
    linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(212,175,55,0.07) 50%, rgba(0,0,0,0) 100%),
    radial-gradient(1400px 700px at 50% 120%, rgba(0,0,0,0.92), rgba(0,0,0,1));
  opacity: 1;
}

#inscripciones.inscripciones-section > *{ position: relative; z-index: 1; }

/* Header: corregir contraste */
#inscripciones .section-header{ text-align: center; }
#inscripciones .section-header .section-tag{
  background: rgba(212,175,55,0.12) !important;
  color: #D4AF37 !important;
  border-color: rgba(212,175,55,0.32) !important;
}
#inscripciones .section-header .section-title{
  color: #FFF !important;
}
#inscripciones .section-header .section-description{
  color: rgba(255,255,255,0.72) !important;
}

/* Layout: beneficios + formulario */
#inscripciones .inscripciones-grid{
  display: grid;
  grid-template-columns: 1fr; /* vertical: beneficios arriba, form abajo */
  gap: 2rem;
  align-items: start;
}

/* Paneles */
#inscripciones .ins-panel{
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(212,175,55,0.28);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

#inscripciones .ins-panel.ins-panel--beneficios{ padding: 1.8rem; }
#inscripciones .ins-panel.ins-panel--form{ padding: 1.7rem; }

/* Títulos internos */
#inscripciones .ins-panel h3,
#inscripciones .ins-panel h4{
  color: #FFD700;
}

/* Beneficios: cards más sobrias */
#inscripciones .beneficios-grid{
  display: grid;
  grid-template-columns: 1fr; /* vertical */
  gap: 0.9rem;
}

#inscripciones .beneficio-card{
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(212,175,55,0.24);
  border-radius: 12px;
  padding: 1rem;
}

#inscripciones .beneficio-card .beneficio-icon{
  display: none !important; /* sin emoticones */
}

#inscripciones .beneficio-card p{ color: rgba(255,255,255,0.75) !important; }

/* Form: inputs */
#inscripciones input,
#inscripciones select{
  background: rgba(255,255,255,0.96) !important;
  border: 2.5px solid rgba(212,175,55,0.28) !important;
  border-radius: 10px !important;
}

#inscripciones input:focus,
#inscripciones select:focus{
  outline: none !important;
  border-color: rgba(255,215,0,0.70) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18) !important;
}

/* Mini resumen */
#inscripciones .ins-mini{
  background: rgba(212,175,55,0.10) !important;
  border: 2px solid rgba(212,175,55,0.30) !important;
  color: rgba(255,255,255,0.86) !important;
}

#inscripciones .ins-mini *{ color: inherit !important; }

/* Botón submit si existe dentro del form */
#inscripciones button,
#inscripciones .btn-primary{
  border-radius: 12px;
}