/* ==========================================
   EFECTOS Y TRANSICIONES - MADERAS MURILLO
   Inspirados en madera y resina epóxica
   ========================================== */

/* ===== TRANSICIONES GLOBALES ===== */
* {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== EFECTOS DE HOVER EN TARJETAS ===== */
.glide-card,
.admin-card,
.card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.glide-card:hover,
.admin-card:hover,
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 40px rgba(139, 69, 19, 0.15),
    0 0 0 1px rgba(32, 178, 170, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Efecto de brillo tipo resina epóxica */
.glide-card::before,
.admin-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(32, 178, 170, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.glide-card:hover::before,
.admin-card:hover::before {
  transform: rotate(45deg) translateX(100%);
}

/* ===== BOTONES CON EFECTO MADERA Y RESINA ===== */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.2);
}

/* Efecto de onda tipo resina líquida */
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(32, 178, 170, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::after {
  width: 300px;
  height: 300px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(139, 69, 19, 0.3),
    0 0 0 2px rgba(32, 178, 170, 0.2);
}

.btn:active {
  transform: translateY(0);
}

/* Botones primarios - efecto madera */
.btn-dark,
.btn-primary {
  background: linear-gradient(135deg, #8B4513 0%, #6B4423 100%);
  border: none;
  position: relative;
}

.btn-dark::before,
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 2px,
      transparent 4px
    );
  pointer-events: none;
}

/* ===== ICONOS CON EFECTO MADERA Y RESINA ===== */
.material-icons {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Contenedor de ícono con efecto de resina */
.icon-wood {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #D4A574 0%, #8B4513 100%);
  box-shadow: 
    0 4px 12px rgba(139, 69, 19, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-wood::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  background: 
    repeating-linear-gradient(
      25deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(139, 69, 19, 0.1) 2px,
      transparent 4px,
      transparent 8px
    );
  pointer-events: none;
}

.icon-wood:hover {
  transform: rotate(5deg) scale(1.1);
  box-shadow: 
    0 8px 24px rgba(139, 69, 19, 0.4),
    0 0 0 3px rgba(32, 178, 170, 0.3);
}

/* Ícono con efecto de resina epóxica */
.icon-resin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #20B2AA 0%, #1A8A83 100%);
  box-shadow: 
    0 4px 12px rgba(32, 178, 170, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.4s ease;
}

/* Efecto de burbujas de resina */
.icon-resin::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  top: 10px;
  right: 10px;
  box-shadow: 
    -6px 6px 0 -2px rgba(255, 255, 255, 0.3),
    4px -4px 0 -3px rgba(255, 255, 255, 0.2);
  animation: bubble-float 3s ease-in-out infinite;
}

@keyframes bubble-float {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-4px);
    opacity: 0.7;
  }
}

.icon-resin:hover {
  transform: scale(1.15);
  box-shadow: 
    0 8px 24px rgba(32, 178, 170, 0.5),
    0 0 0 3px rgba(139, 69, 19, 0.2);
}

/* ===== NAVEGACIÓN CON EFECTO DE VETAS DE MADERA ===== */
.jm-nav {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 240, 0.95));
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 20px rgba(139, 69, 19, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.jm-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(139, 69, 19, 0.02) 1px,
      transparent 2px,
      transparent 100px
    );
  pointer-events: none;
}

/* Enlaces de navegación con efecto hover */
.nav-link {
  position: relative;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #8B4513, #20B2AA);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 80%;
}

.nav-link:hover {
  color: var(--brand);
  transform: translateY(-2px);
}

/* ===== HERO SECTION CON ANIMACIONES ===== */
.aero-hero {
  position: relative;
  overflow: hidden;
}

/* Animación de partículas flotantes (polvo de madera) */
.aero-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle, rgba(212, 165, 116, 0.3) 1px, transparent 1px),
    radial-gradient(circle, rgba(139, 69, 19, 0.2) 1px, transparent 1px);
  background-size: 50px 50px, 80px 80px;
  background-position: 0 0, 40px 40px;
  animation: wood-dust 20s linear infinite;
  pointer-events: none;
  opacity: 0.3;
}

@keyframes wood-dust {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
  }
}

/* Tarjeta glass con efecto de resina */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(139, 69, 19, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.4s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.02);
  box-shadow: 
    0 12px 48px rgba(139, 69, 19, 0.3),
    0 0 0 2px rgba(32, 178, 170, 0.2);
}

/* ===== CHIPS CON EFECTO MADERA ===== */
.glass-chip {
  position: relative;
  background: linear-gradient(135deg, #D4A574 0%, #C19A6B 100%);
  color: #2C1810;
  border: 1px solid rgba(139, 69, 19, 0.3);
  box-shadow: 
    0 2px 8px rgba(139, 69, 19, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.glass-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: 
    repeating-linear-gradient(
      20deg,
      transparent 0px,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 2px,
      transparent 4px
    );
  pointer-events: none;
}

.glass-chip:hover {
  transform: scale(1.05);
  box-shadow: 
    0 4px 16px rgba(139, 69, 19, 0.3),
    0 0 0 2px rgba(32, 178, 170, 0.3);
}

/* ===== INPUTS CON EFECTO DE RESINA ===== */
.form-control,
input[type="text"],
input[type="email"],
textarea {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(139, 69, 19, 0.2);
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(139, 69, 19, 0.05);
}

.form-control:focus,
input:focus,
textarea:focus {
  border-color: rgba(32, 178, 170, 0.5);
  box-shadow: 
    0 0 0 4px rgba(32, 178, 170, 0.1),
    inset 0 2px 4px rgba(32, 178, 170, 0.05);
  transform: scale(1.01);
}

/* ===== ANIMACIÓN DE CARGA TIPO RESINA ===== */
@keyframes resin-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.loading-resin {
  background: linear-gradient(
    90deg,
    #8B4513 0%,
    #20B2AA 25%,
    #8B4513 50%,
    #20B2AA 75%,
    #8B4513 100%
  );
  background-size: 200% 100%;
  animation: resin-flow 3s ease infinite;
}

/* ===== EFECTOS EN IMÁGENES DE PRODUCTOS ===== */
.product-image {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: all 0.4s ease;
}

.product-image img {
  transition: transform 0.6s ease;
}

.product-image:hover img {
  transform: scale(1.1);
}

/* Marco tipo madera */
.product-image::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-image: 
    linear-gradient(
      135deg,
      #D4A574 0%,
      #8B4513 25%,
      #20B2AA 50%,
      #8B4513 75%,
      #D4A574 100%
    ) 1;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.product-image:hover::before {
  opacity: 1;
}

/* ===== SCROLL SMOOTH ===== */
html {
  scroll-behavior: smooth;
}

/* ===== BADGE CON PULSO ===== */
#cart-badge {
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(139, 69, 19, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(139, 69, 19, 0);
  }
}

/* ===== FOOTER CON TEXTURA DE MADERA ===== */
.jm-footer {
  position: relative;
  background: linear-gradient(180deg, #2C1810 0%, #1A0F0A 100%);
}

.jm-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(212, 165, 116, 0.03) 1px,
      transparent 2px,
      transparent 8px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(212, 165, 116, 0.02) 1px,
      transparent 2px,
      transparent 12px
    );
  pointer-events: none;
}

/* ===== MODO OSCURO - AJUSTES ===== */
.theme-dark .icon-wood {
  background: linear-gradient(135deg, #8B4513 0%, #6B4423 100%);
  box-shadow: 
    0 4px 12px rgba(32, 178, 170, 0.3),
    inset 0 1px 0 rgba(32, 178, 170, 0.2);
}

.theme-dark .icon-resin {
  background: linear-gradient(135deg, #2DD4CA 0%, #20B2AA 100%);
  box-shadow: 
    0 4px 12px rgba(45, 212, 202, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.theme-dark .glass-card {
  background: rgba(44, 24, 16, 0.7);
  border-color: rgba(32, 178, 170, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(32, 178, 170, 0.1);
}

.theme-dark .jm-nav {
  background: linear-gradient(180deg, rgba(26, 15, 10, 0.98), rgba(44, 24, 16, 0.95));
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(32, 178, 170, 0.1);
}