/* ======================================
   CUPULA SELECTOR – LAYOUT DEFINITIVO
   Opciones 30% | Imagen 70%
   ====================================== */

.cupula-selector{
  display: grid !important;
  grid-template-columns: 0.3fr 0.7fr !important; /* 30% | 70% */
  gap: 40px !important;
  align-items: center !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 10px;
}

/* ======================
   OPCIONES (IZQUIERDA)
   ====================== */

.cupula-selector .cupula-options{
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.cupula-selector .cupula-option{
  width: 100% !important;
  text-align: left !important;
  padding: 20px 22px !important;
  border-radius: 18px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #111827 !important;
  transition: all .25s ease !important;
}

.cupula-selector .cupula-option small{
  display: block !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  line-height: 1.45 !important;
}

.cupula-selector .cupula-option:hover{
  border-color: #dc2626 !important;
  transform: translateX(4px) !important;
}

.cupula-selector .cupula-option.is-active{
  border-color: #dc2626 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.10) !important;
}

/* ======================
   IMAGEN (DERECHA)
   ====================== */

.cupula-selector .cupula-preview{
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 22px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.08) !important;
}

.cupula-selector .cupula-preview__img,
.cupula-selector .cupula-preview img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 18px !important;
  object-fit: contain !important;
}

/* ======================
   MOBILE
   ====================== */

@media (max-width: 992px){
  .cupula-selector{
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .cupula-selector .cupula-preview{
    order: -1 !important; /* imagen arriba */
  }
}

.cupula-selector{
  display: grid !important;
  grid-template-columns: 0.3fr 0.7fr !important; /* 30% opciones | 70% imagen */
  gap: 40px !important;
  align-items: center !important;
}

/* Orden correcto */
.cupula-selector .cupula-options{ order: 1 !important; }
.cupula-selector .cupula-preview{ order: 2 !important; }

/* Mobile: imagen arriba */
@media (max-width: 992px){
  .cupula-selector{ grid-template-columns: 1fr !important; gap: 26px !important; }
  .cupula-selector .cupula-preview{ order: -1 !important; }
}
/* Ocultar subtítulos en botones de cúpulas */
.cupula-selector .cupula-option small {
  display: none !important;
}

/* ======================================
   CUPULA SELECTOR – IMAGEN SIN FONDO
   ====================================== */

/* Elimina fondo, borde y sombra del contenedor */
.cupula-selector .cupula-preview{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Asegura que la imagen mantenga transparencia */
.cupula-selector .cupula-preview__img,
.cupula-selector .cupula-preview img{
  background: transparent !important;
  box-shadow: none !important;
}


/* ===============================
   REDUCIR IMAGEN AL 75%
   =============================== */

.cupula-selector .cupula-preview__img,
.cupula-selector .cupula-preview img{
  width: 75% !important;
  margin: 0 auto !important;
}