/* ==========================================================================
   LUDOMATICS - ESTILOS Y COMPONENTES NEUMÓRFICOS (SOFT UI)
   ========================================================================== */

/* Elevación Plana / Tarjetas Convexas (Elevación suave) */
.neu-flat {
  background-color: var(--color-surface);
  box-shadow: -6px -6px 14px #ffffff, 
              6px 6px 14px rgba(166, 180, 200, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), 
              box-shadow 0.25s cubic-bezier(0.2, 0, 0.2, 1);
}

.neu-flat:hover {
  box-shadow: -8px -8px 18px #ffffff, 
              8px 8px 18px rgba(166, 180, 200, 0.55);
}

/* Efecto Hundido (Inset Shadow para Inputs, Contenedores y Cavidades) */
.neu-pressed {
  background-color: var(--color-surface);
  box-shadow: inset 3px 3px 6px rgba(166, 180, 200, 0.5), 
              inset -3px -3px 6px #ffffff;
  border: 1px solid rgba(166, 180, 200, 0.2);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.neu-pressed:focus-within {
  border-color: var(--color-secondary);
  box-shadow: inset 4px 4px 8px rgba(0, 160, 219, 0.25), 
              inset -4px -4px 8px #ffffff;
}

/* Botón Principal Tactil Tridimensional (Magenta #E40F7C) */
.neu-btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(228, 15, 124, 0.35), 
              -4px -4px 10px #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.neu-btn-primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 8px 22px rgba(228, 15, 124, 0.45), 
              -6px -6px 14px #ffffff;
  transform: translateY(-2px);
}

.neu-btn-primary:active {
  transform: scale(0.96) translateY(0);
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), 
              0 2px 8px rgba(228, 15, 124, 0.3);
}

/* Botón Secundario Tactil (Cyan #00A0DB o Superficie) */
.neu-btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-secondary-dark);
  font-weight: 700;
  box-shadow: -5px -5px 12px #ffffff, 
              5px 5px 12px rgba(166, 180, 200, 0.4);
  border: 1px solid rgba(0, 160, 219, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.neu-btn-secondary:hover {
  color: var(--color-secondary);
  background-color: var(--color-surface-low);
  box-shadow: -7px -7px 16px #ffffff, 
              7px 7px 16px rgba(166, 180, 200, 0.5);
  transform: translateY(-2px);
}

.neu-btn-secondary:active {
  transform: scale(0.96);
  box-shadow: inset 3px 3px 6px rgba(166, 180, 200, 0.5), 
              inset -3px -3px 6px #ffffff;
}

/* Badge Neumórfico Recubierto */
.neu-badge {
  background-color: var(--color-surface);
  box-shadow: -3px -3px 7px #ffffff, 
              3px 3px 7px rgba(166, 180, 200, 0.35);
  border-radius: var(--radius-full);
}

/* Estilos Neumórficos para Swiper.js Navigation & Pagination */
.hero-swiper-container {
  position: relative;
  width: 100%;
}

.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: -4px -4px 10px #ffffff, 
              4px 4px 10px rgba(166, 180, 200, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 30;
}

.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary);
}

.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
  color: var(--color-primary);
  transform: scale(1.08);
  box-shadow: -6px -6px 14px #ffffff, 
              6px 6px 14px rgba(166, 180, 200, 0.55);
}

.hero-swiper .swiper-button-prev:active,
.hero-swiper .swiper-button-next:active {
  transform: scale(0.94);
  box-shadow: inset 2px 2px 5px rgba(166, 180, 200, 0.5), 
              inset -2px -2px 5px #ffffff;
}

/* Paginación / Bullets Neumórficos */
.hero-swiper .swiper-pagination {
  bottom: 0.5rem !important;
  z-index: 30;
}

.hero-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--color-surface);
  box-shadow: inset 2px 2px 4px rgba(166, 180, 200, 0.5), 
              inset -2px -2px 4px #ffffff;
  opacity: 0.85;
  transition: all 0.3s ease;
  margin: 0 6px !important;
}

.hero-swiper .swiper-pagination-bullet-active {
  width: 32px;
  border-radius: 8px;
  background-color: var(--color-primary);
  box-shadow: 0 4px 10px rgba(228, 15, 124, 0.4), 
              -2px -2px 6px #ffffff;
  opacity: 1;
}