/* ==========================================================
   🌿 OSA INSUMOS – SPLASH / LOADER OVERLAY
   ========================================================== */

#splashOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5979a 0%, #f9c4c5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.6s ease;
}


.splash-content {
  text-align: center;
  animation: fadeIn 1s ease forwards;
}

.logo-container {
  margin-bottom: 20px;
}

.logo-osa {
  width: 140px;
  height: auto;
  animation: floatLogo 3s ease-in-out infinite;
}

/* 🌀 Spinner moderno */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #ccc;
  border-top-color: #04764E;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 10px auto 15px auto;
}

.loading-text {
  color: #dee9e5;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* ✨ Animaciones */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes floatLogo {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* ============================
   🏷️ Estilo de precios múltiples
   ============================ */
.card-overlay .dz-meta .price {
  font-size: 0.82rem !important;             /* texto más pequeño */
  font-weight: 500 !important;               /* ligera presencia */
  color: #fff !important;                    /* blanco sobre fondo primario */
  opacity: 0.9 !important;                   /* tono más suave */
  line-height: 1.4 !important;
  white-space: normal !important;            /* permite salto de línea si es largo */
  text-align: center !important;
  display: block !important;
  padding: 4px 6px !important;
}

/* Si el texto es muy largo, limitar ancho y cortar con puntos suspensivos */
.card-overlay .dz-meta .price {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Ajuste de los separadores " | " */
.card-overlay .dz-meta .price::after {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Ajuste general del contenedor */
.card-overlay .dz-info {
  padding: 10px 12px !important;
}

/* Nombre del producto más equilibrado */
.card-overlay .item-title.title {
  font-size: 1rem !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  text-transform: capitalize !important;
  color: #fff !important;
}

/* Imagen con bordes suaves */
.card-overlay .dz-media img {
  border-radius: 8px !important;
  object-fit: cover !important;
}

/* ===========================
   🎯 Botones sobre imagen
   =========================== */
.overlay-acciones {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  z-index: 10 !important;
}

.overlay-acciones button {
  background-color: rgba(0, 0, 0, 0.6) !important;
  border: none !important;
  color: #fff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease !important;
}

.overlay-acciones button:hover {
  background-color: var(--colorPrincipalOsa, #04764E);
}

.overlay-acciones i {
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* Ajuste de la tarjeta */
.card-overlay.style-1.bg-primary {
  position: relative !important;
  overflow: hidden !important;
}
/* ===============================
   🖼️ Imagen completa de destacado
   =============================== */
.dz-media {
  position: relative !important;
  cursor: pointer !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  background-color: transparent !important;
}

.dz-media:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25) !important;
}

.dz-media img.img-destacado {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.dz-media img.img-destacado:hover {
  transform: scale(1.03) !important;
}

/* 🔹 Espaciado entre slides del swiper */
.main-swiper.overlay-swiper1 swiper-slide {
  padding: 5px !important;
  box-sizing: border-box !important;
}

/* 🔹 Ajuste visual general del contenedor */
.main-swiper.overlay-swiper1 {
  overflow: visible !important;
  padding-bottom: 10px !important;
}
.paginaOsa{
  width: 100% !important;
  padding-bottom: 150px !important;
}