/*
 * Reversible product showcase layer.
 * This file deliberately preserves the original card geometry and copy.
 */

#productos > div > div:first-child {
  position: relative;
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem) !important;
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 1px solid rgba(145, 187, 48, 0.44);
}

#productos > div > div:first-child > div:first-child {
  max-width: 820px;
}

#productos > div > div:first-child a[href='/products'] {
  position: relative;
  min-width: max-content;
  border-color: rgba(213, 255, 100, 0.76) !important;
  box-shadow: 0 10px 24px rgba(0, 20, 40, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

#productos > div > div:first-child a[href='/products']:hover {
  box-shadow: 0 15px 28px rgba(0, 20, 40, 0.34);
  transform: translateY(-3px);
}

#productos .product-grid {
  position: relative;
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(145, 187, 48, 0.18);
}

#productos .category-title {
  display: block !important;
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.1rem !important;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(145, 187, 48, 0.38) !important;
  border-left: 3px solid #91bb30 !important;
  border-radius: 7px !important;
  background: linear-gradient(90deg, rgba(7, 27, 45, 0.94), rgba(6, 47, 73, 0.62)) !important;
  color: #f3f8ff !important;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.1;
  box-shadow: 0 10px 24px rgba(0, 20, 40, 0.13);
}

#productos .category-title::before {
  content: none;
}

#productos .category-title::after {
  content: none;
}

#productos .product-card {
  border-color: rgba(145, 187, 48, 0.34) !important;
  box-shadow: 0 12px 26px rgba(0, 20, 40, 0.14);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

#productos .product-img-wrap {
  overflow: hidden;
}

#productos .product-img-wrap img {
  transition: transform 300ms ease, filter 300ms ease;
}

#productos .product-cta {
  border-color: rgba(145, 187, 48, 0.5) !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
  #productos .product-card:hover {
    z-index: 1;
    border-color: rgba(213, 255, 100, 0.86) !important;
    box-shadow: 0 20px 34px rgba(0, 20, 40, 0.28);
    transform: translateY(-5px);
  }

  #productos .product-card:hover .product-img-wrap img {
    filter: saturate(1.06) contrast(1.02);
    transform: scale(1.035);
  }

  #productos .product-card:hover .product-cta {
    border-color: #d5ff64 !important;
    background: rgba(145, 187, 48, 0.16) !important;
  }
}

html:not(.dark):not([data-theme='dark']) #productos .product-card {
  box-shadow: 0 12px 26px rgba(0, 51, 102, 0.1);
}

html:not(.dark):not([data-theme='dark']) #productos .category-title {
  background: linear-gradient(90deg, rgba(233, 246, 239, 0.96), rgba(233, 244, 250, 0.9)) !important;
  border-color: rgba(0, 93, 133, 0.2) !important;
  border-left-color: #91bb30 !important;
  color: #003366 !important;
  box-shadow: 0 8px 20px rgba(0, 51, 102, 0.08);
}

@media (max-width: 640px) {
  #productos > div > div:first-child a[href='/products'] {
    width: 100%;
    justify-content: center;
  }

  #productos .category-title {
    padding-right: 0.8rem;
  }

  #productos .category-title::after {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #productos > div > div:first-child a[href='/products'],
  #productos .product-card,
  #productos .product-img-wrap img,
  #productos .product-cta {
    transition: none;
  }
}