/* Products pages - modern responsive styles */
:root {
  --ww-primary: #0a7abf;
  --ww-primary-700: #075a8e;
  --ww-bg: #ffffff;
  --ww-text: #0b1e3a;
  --ww-muted: #5b6b7a;
  --ww-card-bg: rgba(255,255,255,0.9);
  --ww-shadow: 0 10px 25px rgba(0,0,0,0.15);
  --ww-radius: 16px;
}

.section-products {
  padding: 64px 24px 80px;
  /* Gradient background variables */
  --y-0: 63%;
  --x-0: 93%;
  --c-0: hsla(197.4857142857143, 90%, 37%, 1);
  --y-1: -7%;
  --x-1: 33%;
  --c-1: hsla(184.71204188481676, 79%, 46%, 1);
  --y-2: 7%;
  --x-2: 84%;
  --c-2: hsla(184.71204188481676, 79%, 46%, 1);
  --y-3: 5%;
  --x-3: 14%;
  --c-3: hsla(184.71204188481676, 79%, 46%, 1);
  --x-4: 7%;
  --c-4: hsla(184.71204188481676, 79%, 46%, 1);
  --y-4: 96%;
  --y-5: 90%;
  --x-5: 93%;
  --c-5: hsla(184.71204188481676, 79%, 46%, 1);
  --c-6: hsla(197.4857142857143, 90%, 37%, 1);
  --x-6: 3%;
  --y-6: 61%;
  --y-7: 59%;
  --c-7: hsla(197.4857142857143, 90%, 37%, 1);
  --x-7: 94%;
  --y-8: 63%;
  --c-8: hsla(197.4857142857143, 92%, 31%, 1);
  --x-8: 48%;
  --c-9: hsla(197.4857142857143, 90%, 37%, 1);
  --y-9: 78%;
  --x-9: 96%;
  /* fallback sizes for circle stops if not defined globally */
  --s-start-0: 0%; --s-end-0: 60%;
  --s-start-1: 0%; --s-end-1: 55%;
  --s-start-2: 0%; --s-end-2: 50%;
  --s-start-3: 0%; --s-end-3: 50%;
  --s-start-4: 0%; --s-end-4: 55%;
  --s-start-5: 0%; --s-end-5: 60%;
  --s-start-6: 0%; --s-end-6: 55%;
  --s-start-7: 0%; --s-end-7: 60%;
  --s-start-8: 0%; --s-end-8: 55%;
  --s-start-9: 0%; --s-end-9: 60%;

  background-color: hsla(184.71204188481676, 79%, 46%, 1);
  background-image:
    radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
    radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
    radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
    radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),
    radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)),
    radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)),
    radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)),
    radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)),
    radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)),
    radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9));
  background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
  animation: hero-gradient-animation 10s linear infinite alternate;
  height: auto;
}

/* Safe no-op keyframes in case not defined globally */
@keyframes hero-gradient-animation {
  0% { opacity: 1; }
  100% { opacity: 1; }
}

.section-products h1 {
  font-size: 3rem;
  line-height: 1.1;
  text-align: center;
  color: var(--ww-text);
  margin: 0 0 8px;
}

.section-products .txt-page {
  max-width: 1000px;
  margin: 0 auto 32px;
  text-align: center;
  font-size: 1.1rem;
  color: var(--ww-muted);
}

.section-products .container { max-width: 1200px; margin: 0 auto; }

.section-products h2 {
  font-size: 2rem;
  color: var(--ww-text);
  margin: 32px 0 20px;
  text-align: center;
}

.productos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.productos .producto {
  grid-column: span 6;
  background: var(--ww-card-bg);
  border-radius: var(--ww-radius);
  box-shadow: var(--ww-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.productos .producto:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(10,122,191,0.2);
}

.productos .producto h3 {
  font-size: 1.25rem;
  color: var(--ww-primary);
  margin: 8px 0 8px;
}

.productos .producto p { color: var(--ww-muted); margin: 0 0 12px; }

.productos .producto img {
  width: 220px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0 8px 14px rgba(7,90,142,0.25));
}

@media (max-width: 1024px) {
  .productos .producto { grid-column: span 12; }
}

/* Interactive category menu */
.catalog-nav .category-btn {
  background: var(--ww-bg);
  color: var(--ww-text);
  border: 0;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--ww-shadow);
  transition: background .2s ease, transform .2s ease;
  cursor: pointer;
}
.catalog-nav .category-btn:hover { color: var(--ww-primary-700); transform: translateY(-2px); }

.catalog-nav .subcategories a {
  display: inline-block;
  margin: 6px 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ww-text);
  background: rgba(10,122,191,0.08);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}


.catalog-nav .subcategories a:hover { 
  background: rgba(10,122,191,0.18); 
  color: var(--ww-primary-700); }