/*
 * ECOCLICK COMPONENTS
 * Equivalente a: assets/css/components.css (WP theme asset)
 * Incluye: header, footer, product cards, catalog, hero sections
 */

/* ══════════════════════════════════════════════
   HEADER  (≡ header.php)
══════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Top info bar */
.header-topbar {
  background: var(--c-primary);
  color: var(--c-text-inverse-muted);
  font-size: var(--fs-xs);
  padding: 0.35rem 0;
}
.header-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.header-topbar a { color: inherit; }
.header-topbar a:hover { color: var(--c-accent-mid); }
.header-topbar__right { display: flex; align-items: center; gap: var(--sp-4); }
.topbar-divider { width: 1px; height: 12px; background: rgba(255,255,255,0.2); }

/* Main header row */
.header-main {
  height: var(--header-height);
  display: flex;
  align-items: center;
}
.header-main__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: 100%;
}

/* Logo wordmark */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo__img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 768px) { .site-logo__img { height: 34px; } }
.logo-mark {
  width: 38px;
  height: 38px;
  background: var(--c-primary);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-mark span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--c-accent);
  letter-spacing: -0.05em;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-text__main {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--c-primary);
}
.logo-text__main em {
  font-style: normal;
  color: var(--c-accent);
}
.logo-text__sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-light);
  margin-top: 1px;
}

/* Cobrand */
.header-cobrand {
  display: flex;
  flex-direction: column;
  padding-left: var(--sp-6);
  border-left: 1px solid var(--c-border);
  line-height: 1.2;
}
.header-cobrand__tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-light);
}
.header-cobrand__brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--c-primary);
  text-transform: uppercase;
}

/* Main navigation */
.main-nav { flex: 1; }
.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.main-nav__list > li > a {
  display: block;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast);
}
.main-nav__list > li > a:hover {
  color: var(--c-primary);
  background: var(--c-surface-alt);
}
.main-nav__list > li.active > a,
.main-nav__list > li > a.active {
  color: var(--c-accent-dark);
  background: var(--c-accent-light);
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}

.header-wa-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 1rem;
  background: var(--c-wa);
  color: #fff;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background var(--t-fast), transform var(--t-fast);
}
.header-wa-btn:hover { background: var(--c-wa-hover); transform: scale(1.03); }

.header-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--t-fast);
}
.header-cart-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--c-accent);
  color: #fff;
  border-radius: var(--r-full);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
}

.header-b2b-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 1rem;
  background: var(--c-primary-muted);
  border: 1.5px solid var(--c-primary-muted);
  color: var(--c-primary);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all var(--t-fast);
}
.header-b2b-btn:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* Hamburger */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  border-radius: var(--r-md);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast);
}
.hamburger-btn:hover { background: var(--c-surface-dark); }
.hamburger-btn span {
  display: block;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: all var(--t-base);
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu Drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.mobile-menu.is-open { pointer-events: all; }

.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity var(--t-slow);
  backdrop-filter: blur(2px);
}
.mobile-menu.is-open .mobile-menu__overlay { opacity: 1; }

.mobile-menu__drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 90vw);
  background: var(--c-surface);
  transform: translateX(100%);
  transition: transform var(--t-slow);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}
.mobile-menu.is-open .mobile-menu__drawer { transform: translateX(0); }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border-light);
}
.mobile-menu__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  font-size: 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
}
.mobile-menu__close:hover { background: var(--c-surface-dark); }

.mobile-nav { padding: var(--sp-4); flex: 1; }
.mobile-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.85rem var(--sp-4);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--c-text);
  border-radius: var(--r-lg);
  transition: background var(--t-fast), color var(--t-fast);
}
.mobile-nav a:hover { background: var(--c-surface-alt); color: var(--c-primary); }
.mobile-nav a svg { flex-shrink: 0; color: var(--c-text-light); }
.mobile-nav .nav-divider { height: 1px; background: var(--c-border-light); margin: var(--sp-2) 0; }

.mobile-menu__foot {
  padding: var(--sp-5);
  border-top: 1px solid var(--c-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ══════════════════════════════════════════════
   FOOTER  (≡ footer.php)
══════════════════════════════════════════════ */
.site-footer {
  background: var(--c-primary);
  color: var(--c-text-inverse-muted);
  padding-top: var(--sp-20);
  margin-top: var(--sp-20);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--sp-10);
  padding-bottom: var(--sp-16);
}
.footer-logo-area { max-width: 280px; }
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--sp-1);
}
.footer-wordmark em { font-style: normal; color: var(--c-accent); }
.footer-tagline {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-mid);
  margin-bottom: var(--sp-4);
}
.footer-desc {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-inverse-muted);
}
.footer-col-title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-accent);
  display: inline-block;
}
.footer-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-links a {
  font-size: var(--fs-sm);
  color: var(--c-text-inverse-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--c-accent-mid); }
.footer-links a svg { flex-shrink: 0; }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-inverse-muted);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.footer-contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--c-accent); }
.footer-contact-item a { color: inherit; }
.footer-contact-item a:hover { color: var(--c-accent-mid); }

.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: all var(--t-fast);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.footer-social a:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--sp-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.4);
}
.footer-legal-links { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer-legal-links a { color: inherit; }
.footer-legal-links a:hover { color: rgba(255,255,255,0.7); }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ══════════════════════════════════════════════
   CONTRAST — HEADINGS ON DARK BACKGROUNDS
   Global h1-h6 rule sets color:var(--c-text) which overrides inherited color:#fff.
   These rules restore white for all headings inside known dark sections.
══════════════════════════════════════════════ */
.hero-pellets h1, .hero-pellets h2, .hero-pellets h3,
.hero-ferreteria h1, .hero-ferreteria h2, .hero-ferreteria h3,
.hero-hoja h1, .hero-hoja h2, .hero-hoja h3,
.hero-altuna h1, .hero-altuna h2, .hero-altuna h3,
.hero-distribuidores h1, .hero-distribuidores h2, .hero-distribuidores h3 { color: #fff; }
.hero-dist__title { color: #fff; }

/* B2B header button: hidden at mid viewports to prevent header overflow/partial render */
@media (max-width: 1024px) {
  .header-b2b-btn { display: none !important; }
}

/* ══════════════════════════════════════════════
   HERO SECTIONS
══════════════════════════════════════════════ */
.hero-home {
  background: linear-gradient(135deg, #081b3a 0%, #0e2954 50%, #0f3366 100%);
  position: relative;
  overflow: hidden;
  min-height: 580px;
  display: flex;
  align-items: center;
}
.hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(130,195,65,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.hero-home__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 30px,
    rgba(255,255,255,1) 30px,
    rgba(255,255,255,1) 31px
  );
  pointer-events: none;
}
.hero-home__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
  padding-block: var(--sp-20);
  width: 100%;
}
.hero-home__content { max-width: 580px; }
.hero-home__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-mid);
  margin-bottom: var(--sp-4);
}
.hero-home__eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
}
.hero-home h1 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
}
.hero-home h1 em {
  font-style: normal;
  color: var(--c-accent);
}
.hero-home__lead {
  font-size: var(--fs-md);
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin-bottom: var(--sp-8);
  max-width: 48ch;
}
.hero-home__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.hero-home__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-product-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  backdrop-filter: blur(10px);
  text-align: center;
  position: relative;
}
.hero-product-card img {
  height: 260px;
  width: 100%;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}
.hero-product-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: var(--r-full);
  box-shadow: 0 4px 12px rgba(130,195,65,0.4);
}
.hero-stats {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.hero-stat__num em { font-style: normal; color: var(--c-accent); }
.hero-stat__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: var(--sp-1);
}

@media (max-width: 900px) {
  .hero-home__inner { grid-template-columns: 1fr; }
  .hero-home__visual { display: none; }
  .hero-home { min-height: auto; }
}

/* Altuna hero */
.hero-altuna {
  background: linear-gradient(135deg, #0c2040 0%, #0e2954 60%, #1a3d7a 100%);
  position: relative;
  overflow: hidden;
  padding: var(--sp-20) 0;
}
.hero-altuna::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(130,195,65,0.05));
  pointer-events: none;
}
.hero-altuna__cobrand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.altuna-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(130,195,65,0.12);
  border: 1px solid rgba(130,195,65,0.3);
  border-radius: var(--r-md);
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-mid);
}
.altuna-wordmark {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  color: #fff;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════
   BUSINESS LINE CARDS
══════════════════════════════════════════════ */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.biz-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: all var(--t-base);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.biz-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.biz-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--c-border); }
.biz-card:hover::before { transform: scaleX(1); }

.biz-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  background: var(--c-primary-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
}
.biz-card--altuna .biz-card__icon { background: var(--c-accent-light); color: var(--c-accent-dark); }

.biz-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
.biz-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: 1.6;
  flex: 1;
}
.biz-card__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-accent-dark);
  transition: gap var(--t-fast);
}
.biz-card:hover .biz-card__cta { gap: var(--sp-3); }

@media (max-width: 900px) {
  .biz-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .biz-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   PRODUCT CARDS  (≡ content-product.php)
══════════════════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
}
.product-grid--dense {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
}

.product-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--t-base);
  position: relative;
  text-decoration: none;
  color: var(--c-text);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-accent);
}
.product-card__img-wrap {
  aspect-ratio: 1 / 1;
  background: #fff;
  border-bottom: 1px solid var(--c-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  overflow: hidden;
  position: relative;
}
.product-card__img-wrap img {
  max-height: 160px;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--t-slow);
}
.product-card:hover .product-card__img-wrap img { transform: scale(1.05); }

.product-card__badge-row {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.product-card__actions-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  transform: translateY(100%);
  transition: transform var(--t-base);
}
.product-card:hover .product-card__actions-overlay { transform: translateY(0); }

.overlay-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 0.45rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
}
.overlay-btn--cart {
  background: var(--c-accent);
  color: #fff;
}
.overlay-btn--wa {
  background: var(--c-wa);
  color: #fff;
}
.overlay-btn--cart:hover { background: var(--c-accent-hover); }
.overlay-btn--wa:hover { background: var(--c-wa-hover); }

.product-card__body {
  padding: var(--sp-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.product-card__cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}
.product-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
.product-card__sku {
  font-size: var(--fs-xs);
  color: var(--c-text-light);
  font-family: monospace;
}
.product-card__short-desc {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.product-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--c-primary);
  letter-spacing: -0.02em;
}
.product-card__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: var(--c-accent);
  color: #fff;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
.product-card__add-btn:hover { background: var(--c-accent-hover); transform: scale(1.1); }

/* ══════════════════════════════════════════════
   CATEGORY PILLS / FILTER BAR
══════════════════════════════════════════════ */
.cat-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-full);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.cat-pill:hover { border-color: var(--c-primary); color: var(--c-primary); }
.cat-pill.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.cat-pill__count {
  background: rgba(255,255,255,0.2);
  border-radius: var(--r-full);
  padding: 0 5px;
  font-size: 0.65rem;
  font-weight: 700;
}
.cat-pill:not(.active) .cat-pill__count {
  background: var(--c-surface-dark);
  color: var(--c-text-light);
}

/* ══════════════════════════════════════════════
   SINGLE PRODUCT  (≡ content-single-product.php)
══════════════════════════════════════════════ */
.product-single {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
  padding-block: var(--sp-8);
}

/* Gallery */
.product-gallery { position: sticky; top: calc(var(--header-height) + var(--sp-6)); }
.product-gallery__main {
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.product-gallery__main img {
  max-height: 400px;
  max-width: 100%;
  object-fit: contain;
  transition: opacity var(--t-base);
}
.product-gallery__thumbs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 72px; height: 72px;
  border: 2px solid var(--c-border-light);
  border-radius: var(--r-md);
  background: #fff;
  padding: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-thumb img { max-height: 100%; max-width: 100%; object-fit: contain; }
.gallery-thumb.active { border-color: var(--c-accent); }
.gallery-thumb:hover { border-color: var(--c-primary); }

/* Product info panel */
.product-info-panel {}
.product-info__category {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-bottom: var(--sp-2);
}
.product-info__name {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.product-info__sku {
  font-family: monospace;
  font-size: var(--fs-sm);
  color: var(--c-text-light);
  margin-bottom: var(--sp-4);
}
.product-info__price-box {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.product-info__price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--c-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}
.product-info__price-iva {
  font-size: var(--fs-xs);
  color: var(--c-text-light);
  margin-top: var(--sp-2);
}
.product-info__short-desc {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}
.product-info__stock {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-success);
  margin-bottom: var(--sp-4);
}
.stock-dot {
  width: 8px; height: 8px;
  background: var(--c-success);
  border-radius: 50%;
}

.product-buy-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Specs table */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-top: var(--sp-4);
}
.specs-table tr {
  border-bottom: 1px solid var(--c-border-light);
}
.specs-table tr:last-child { border-bottom: none; }
.specs-table th, .specs-table td {
  padding: 0.6rem var(--sp-4);
  text-align: left;
}
.specs-table th {
  font-weight: 600;
  color: var(--c-text-muted);
  background: var(--c-surface-alt);
  width: 38%;
}
.specs-table td {
  font-weight: 500;
  color: var(--c-text);
}
.specs-table tr:nth-child(even) td { background: var(--c-surface-alt); }

@media (max-width: 768px) {
  .product-single { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
}

/* ══════════════════════════════════════════════
   CART / SOLICITUD  (≡ cart.php)
══════════════════════════════════════════════ */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-8);
  align-items: start;
  padding-block: var(--sp-8);
}
.cart-table-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.cart-table {
  width: 100%;
  border-collapse: collapse;
}
.cart-table th {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border-light);
}
.cart-table td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border-light);
  vertical-align: middle;
}
.cart-table tr:last-child td { border-bottom: none; }
.cart-item__img {
  width: 64px; height: 64px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-md);
  padding: 4px;
}
.cart-item__name {
  font-weight: 600;
  color: var(--c-text);
  font-size: var(--fs-sm);
}
.cart-item__sku {
  font-size: var(--fs-xs);
  color: var(--c-text-light);
  font-family: monospace;
}
.cart-item__remove {
  color: var(--c-text-light);
  cursor: pointer;
  font-size: 1.2rem;
  background: none;
  border: none;
  line-height: 1;
  padding: 4px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.cart-item__remove:hover { color: var(--c-error); background: var(--c-error-light); }

.cart-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cart-summary-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}
.cart-summary-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border-light);
}

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   CATEGORY HERO BANDS
══════════════════════════════════════════════ */
.cat-hero-band {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border-light);
  padding-block: var(--sp-8);
}
.cat-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.cat-item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-surface-alt);
  border: 1.5px solid var(--c-border-light);
  border-radius: var(--r-xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
  color: var(--c-text);
}
.cat-item-card:hover {
  background: var(--c-accent-light);
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.cat-item-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  background: var(--c-primary-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: background var(--t-fast);
}
.cat-item-card:hover .cat-item-card__icon { background: var(--c-accent-mid); }
.cat-item-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.cat-item-card__count {
  font-size: var(--fs-xs);
  color: var(--c-text-light);
}

@media (max-width: 768px) {
  .cat-cards-row { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   DISTRIBUTOR PAGE
══════════════════════════════════════════════ */
.distrib-hero {
  background: linear-gradient(135deg, #081b3a, #0e2954 60%, #163a6e);
  padding: var(--sp-20) 0;
  position: relative;
  overflow: hidden;
}
.distrib-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(130,195,65,0.1) 0%, transparent 50%);
}
.benefit-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.benefit-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  transition: all var(--t-base);
}
.benefit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.benefit-card__icon {
  width: 48px; height: 48px;
  background: var(--c-primary-muted);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
}
.benefit-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}
.benefit-card__desc { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.6; }

@media (max-width: 768px) {
  .benefit-cards { grid-template-columns: 1fr; }
  .cat-cards-row { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   TRUST STRIP
══════════════════════════════════════════════ */
.trust-strip {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border-light);
  border-bottom: 1px solid var(--c-border-light);
  padding-block: var(--sp-6);
}
.trust-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-muted);
}
.trust-item svg { color: var(--c-accent); flex-shrink: 0; }

/* ══════════════════════════════════════════════
   B2B CTA BLOCK
══════════════════════════════════════════════ */
.b2b-cta-block {
  background: linear-gradient(135deg, #0e2954, #1a3d7a);
  border-radius: var(--r-2xl);
  padding: var(--sp-12);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  align-items: center;
}
.b2b-cta-block__actions { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
@media (max-width: 640px) {
  .b2b-cta-block { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--sp-20);
}
.empty-state__icon { font-size: 3rem; margin-bottom: var(--sp-4); }
.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}
.empty-state__desc { color: var(--c-text-muted); margin-bottom: var(--sp-6); }

/* ══════════════════════════════════════════════
   LOADING SKELETON
══════════════════════════════════════════════ */
@keyframes skeleton-shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--c-surface-dark) 25%, var(--c-surface-alt) 50%, var(--c-surface-dark) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.5s infinite;
  border-radius: var(--r-md);
}

/* ══════════════════════════════════════════════
   RELATED PRODUCTS SECTION
══════════════════════════════════════════════ */
.related-products {
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--c-border-light);
}
.related-products__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--sp-6);
  color: var(--c-text);
}

/* ══════════════════════════════════════════════
   PRODUCT TABS
══════════════════════════════════════════════ */
.product-tabs {
  margin-top: var(--sp-8);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-surface);
}
.product-tabs__nav {
  display: flex;
  border-bottom: 1px solid var(--c-border-light);
  background: var(--c-surface-alt);
}
.product-tabs__btn {
  padding: 0.85rem var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.product-tabs__btn.active { color: var(--c-primary); border-bottom-color: var(--c-accent); }
.product-tabs__btn:hover { color: var(--c-primary); }
.product-tabs__pane { padding: var(--sp-6); display: none; }
.product-tabs__pane.active { display: block; }

/* =============================================================
   ESTILOS POR PAGINA (extraidos de los <style> de la maqueta
   ecoclick-theme/ — fuente visual canonica)
   ============================================================= */

/* ---- Pagina: PELLETS ---- */
.hero-pellets {
      background: linear-gradient(135deg, #1a1008 0%, #2d1f0a 45%, #0e2954 100%);
      color: #fff;
      padding: var(--sp-20) 0 var(--sp-16);
      position: relative;
      overflow: hidden;
    }
    .hero-pellets::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 50% at 80% 50%, rgba(255,120,30,.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-pellets__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-12);
      align-items: center;
    }
    @media (max-width: 768px) { .hero-pellets__inner { grid-template-columns: 1fr; } }

    .flame-badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: rgba(255,120,30,.15);
      border: 1px solid rgba(255,120,30,.35);
      color: #ff9650;
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .35rem .9rem;
      border-radius: 999px;
      margin-bottom: var(--sp-4);
    }

    /* Product format cards */
    .format-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
    }
    @media (max-width: 640px) { .format-cards { grid-template-columns: 1fr; } }
    .format-card {
      background: var(--c-surface);
      border: 2px solid var(--c-border-light);
      border-radius: var(--radius-xl);
      padding: var(--sp-6);
      text-align: center;
      transition: var(--transition-base);
      cursor: default;
    }
    .format-card:hover {
      border-color: #ff9650;
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .format-card--featured { border-color: #ff7a20; background: linear-gradient(to bottom, #fff9f5, var(--c-surface)); }
    .format-card__icon { font-size: 2.8rem; margin-bottom: var(--sp-3); }
    .format-card__label {
      font-family: var(--font-display);
      font-size: .85rem;
      font-weight: 700;
      color: #ff7a20;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: var(--sp-1);
    }
    .format-card__name {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--c-primary);
      margin-bottom: var(--sp-2);
    }
    .format-card__weight { font-size: 1.6rem; font-weight: 800; color: var(--c-primary); }
    .format-card__weight-unit { font-size: .8rem; color: var(--c-text-muted); font-weight: 600; }
    .format-card__desc { font-size: var(--fs-xs); color: var(--c-text-muted); margin: var(--sp-3) 0; line-height: 1.45; }
    .format-card__tag {
      display: inline-block;
      background: rgba(255,120,30,.1);
      color: #bf5a10;
      font-size: .7rem;
      font-weight: 700;
      padding: .2rem .55rem;
      border-radius: 999px;
    }

    /* Calculator */
    .calc-box {
      background: var(--c-surface);
      border-radius: var(--radius-2xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      border: 1px solid var(--c-border-light);
    }
    .calc-header {
      background: linear-gradient(135deg, #2d1f0a 0%, var(--c-primary) 100%);
      color: #fff;
      padding: var(--sp-6) var(--sp-8);
    }
    .calc-header h3 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 800;
      margin: 0 0 .25rem;
      color: #fff;
    }
    .calc-header p { font-size: var(--fs-xs); color: rgba(255,255,255,.7); margin: 0; }
    .calc-body { padding: var(--sp-8); }
    .calc-inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-5);
      margin-bottom: var(--sp-6);
    }
    @media (max-width: 640px) { .calc-inputs { grid-template-columns: 1fr; } }
    .calc-result {
      background: linear-gradient(135deg, #1a0f04 0%, var(--c-primary) 100%);
      color: #fff;
      border-radius: var(--radius-xl);
      padding: var(--sp-6);
    }
    .calc-result__title {
      font-size: var(--fs-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: rgba(255,255,255,.55);
      margin-bottom: var(--sp-4);
    }
    .calc-results-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-4);
      text-align: center;
    }
    @media (max-width: 640px) { .calc-results-grid { grid-template-columns: 1fr 1fr; } }
    .calc-stat { }
    .calc-stat__num {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 800;
      color: #ff9650;
      line-height: 1;
      margin-bottom: .3rem;
    }
    .calc-stat__label { font-size: .7rem; color: rgba(255,255,255,.65); line-height: 1.3; }
    .calc-cta {
      margin-top: var(--sp-5);
      display: flex;
      gap: var(--sp-3);
      flex-wrap: wrap;
    }

    /* Specs */
    .specs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
    }
    @media (max-width: 640px) { .specs-grid { grid-template-columns: 1fr; } }
    .spec-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border-light);
      border-radius: var(--radius-xl);
      padding: var(--sp-6);
      border-top: 4px solid #ff7a20;
    }
    .spec-card__icon { font-size: 1.8rem; margin-bottom: var(--sp-3); }
    .spec-card__title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--c-primary); margin-bottom: var(--sp-2); }
    .spec-card__value { font-size: 1.3rem; font-weight: 800; color: #bf5a10; margin-bottom: var(--sp-1); }
    .spec-card__desc { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.45; }

/* ---- Pagina: FERRETERIA ---- */
.hero-ferreteria {
      background: linear-gradient(135deg, #1a2e1a 0%, #0e2954 60%, var(--c-primary) 100%);
      color: #fff;
      padding: var(--sp-20) 0 var(--sp-14);
      position: relative;
      overflow: hidden;
    }
    .hero-ferreteria::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0; right: 0;
      height: 60px;
      background: var(--c-surface-alt);
      clip-path: polygon(0 100%, 100% 100%, 100% 0);
    }
    .cat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-5);
    }
    @media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
    .cat-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border-light);
      border-radius: var(--radius-xl);
      padding: var(--sp-6) var(--sp-5);
      text-align: center;
      cursor: default;
      transition: var(--transition-base);
      border-bottom: 3px solid transparent;
    }
    .cat-card:hover {
      border-bottom-color: var(--c-accent);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .cat-card__icon { font-size: 2.4rem; margin-bottom: var(--sp-3); }
    .cat-card__name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .95rem;
      color: var(--c-primary);
      margin-bottom: var(--sp-1);
    }
    .cat-card__desc { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.45; }

    .feature-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-12);
      align-items: center;
    }
    @media (max-width: 768px) { .feature-row { grid-template-columns: 1fr; } }
    .feature-visual {
      background: var(--c-primary);
      border-radius: var(--radius-2xl);
      padding: var(--sp-10);
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
    }
    .feature-stat {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      padding: var(--sp-4);
      background: rgba(255,255,255,.07);
      border-radius: var(--radius-lg);
    }
    .feature-stat__num {
      font-family: var(--font-display);
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--c-accent);
      min-width: 60px;
    }
    .feature-stat__label { font-size: var(--fs-sm); color: rgba(255,255,255,.8); }

    .store-strip {
      background: var(--c-primary);
      color: #fff;
      padding: var(--sp-10) 0;
    }
    .store-info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-8);
      text-align: center;
    }
    @media (max-width: 640px) { .store-info-grid { grid-template-columns: 1fr; } }
    .store-info-item__icon { font-size: 2rem; margin-bottom: var(--sp-2); }
    .store-info-item__title {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: var(--sp-1);
    }
    .store-info-item__text { font-size: var(--fs-sm); color: rgba(255,255,255,.72); }

/* ---- Pagina: HOJALATERIA ---- */
.hero-hoja {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, var(--c-primary) 100%);
      color: #fff;
      padding: var(--sp-20) 0 var(--sp-14);
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-6);
    }
    @media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }
    .service-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border-light);
      border-radius: var(--radius-xl);
      padding: var(--sp-8);
      transition: var(--transition-base);
    }
    .service-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--c-accent);
    }
    .service-card__icon { font-size: 2.5rem; margin-bottom: var(--sp-4); }
    .service-card__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--c-primary);
      margin-bottom: var(--sp-2);
    }
    .service-card__desc { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.55; margin-bottom: var(--sp-4); }
    .service-card__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
    .service-tag {
      background: rgba(14,41,84,.08);
      color: var(--c-primary);
      font-size: .7rem;
      font-weight: 600;
      padding: .2rem .55rem;
      border-radius: 999px;
      letter-spacing: .02em;
    }

    .process-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-1);
      counter-reset: step;
    }
    @media (max-width: 640px) { .process-bar { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
    .process-bar__step {
      background: var(--c-surface);
      border: 1px solid var(--c-border-light);
      border-radius: var(--radius-lg);
      padding: var(--sp-6);
      text-align: center;
      position: relative;
    }
    .process-bar__step::before {
      content: counter(step);
      counter-increment: step;
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 24px;
      background: var(--c-primary);
      color: #fff;
      border-radius: 50%;
      font-size: .7rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
    }
    .process-bar__icon { font-size: 1.8rem; margin: var(--sp-2) 0 var(--sp-2); }
    .process-bar__title { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--c-primary); margin-bottom: var(--sp-1); }
    .process-bar__desc { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.45; }

    .gallery-ph {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-4);
    }
    @media (max-width: 640px) { .gallery-ph { grid-template-columns: 1fr 1fr; } }
    .gallery-ph__item {
      background: linear-gradient(135deg, var(--c-surface-alt) 0%, var(--c-border-light) 100%);
      border-radius: var(--radius-lg);
      aspect-ratio: 4/3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
      border: 1px solid var(--c-border-light);
    }
    .gallery-ph__item-icon { font-size: 2rem; }
    .gallery-ph__item-label { font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: 600; text-align: center; padding: 0 var(--sp-2); }

/* ---- Pagina: CONTACTO ---- */
.contact-grid {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: var(--sp-10);
      align-items: start;
    }
    @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

    .contact-info-card {
      background: var(--c-primary);
      color: #fff;
      border-radius: var(--radius-2xl);
      padding: var(--sp-8);
    }
    .contact-info-card__title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: var(--sp-5);
      color: var(--c-accent);
    }
    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-3);
      padding: var(--sp-4);
      border-radius: var(--radius-lg);
      margin-bottom: var(--sp-3);
      background: rgba(255,255,255,.06);
      transition: background .2s;
    }
    .contact-item:hover { background: rgba(255,255,255,.1); }
    .contact-item__icon {
      width: 36px;
      height: 36px;
      background: var(--c-accent);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .contact-item__content { flex: 1; }
    .contact-item__label { font-size: var(--fs-xs); font-weight: 700; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
    .contact-item__value { font-size: var(--fs-sm); color: rgba(255,255,255,.92); line-height: 1.4; }
    .contact-item__value a { color: rgba(255,255,255,.92); text-decoration: none; }
    .contact-item__value a:hover { color: var(--c-accent); }

    .dept-tabs {
      display: flex;
      gap: var(--sp-2);
      flex-wrap: wrap;
      margin-bottom: var(--sp-6);
    }
    .dept-tab {
      padding: .4rem .9rem;
      border-radius: 999px;
      border: 1.5px solid var(--c-border);
      background: none;
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--c-text-muted);
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .dept-tab.active, .dept-tab:hover {
      background: var(--c-primary);
      border-color: var(--c-primary);
      color: #fff;
    }

    .map-placeholder {
      background: linear-gradient(135deg, #dde4f0 0%, #c9d5e8 100%);
      border-radius: var(--radius-xl);
      height: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-3);
      border: 1px solid var(--c-border-light);
      margin-top: var(--sp-5);
      text-align: center;
      padding: var(--sp-4);
    }
    .map-placeholder__icon { font-size: 2.5rem; }
    .map-placeholder__addr {
      font-family: var(--font-display);
      font-size: .95rem;
      font-weight: 700;
      color: var(--c-primary);
    }
    .map-placeholder__ref { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* ---- Pagina: DISTRIBUIDORES ---- */
/* ── Distribuidores page styles ── */
    .hero-distribuidores {
      background: linear-gradient(135deg, var(--c-primary) 0%, #0a1d3a 60%, #0d2248 100%);
      color: #fff;
      padding: var(--sp-20) 0 var(--sp-16);
      position: relative;
      overflow: hidden;
    }
    .hero-distribuidores::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2382c341' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }
    .hero-dist__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-12);
      align-items: center;
    }
    @media (max-width: 768px) {
      .hero-dist__inner { grid-template-columns: 1fr; }
    }
    .hero-dist__badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: rgba(130,195,65,.15);
      border: 1px solid rgba(130,195,65,.35);
      color: var(--c-accent);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 999px;
      margin-bottom: var(--sp-4);
    }
    .hero-dist__title {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-family: var(--font-display);
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: var(--sp-4);
      color: #fff;
    }
    .hero-dist__title em {
      font-style: normal;
      color: var(--c-accent);
    }
    .hero-dist__subtitle {
      font-size: var(--fs-base);
      color: rgba(255,255,255,.75);
      max-width: 48ch;
      margin-bottom: var(--sp-8);
    }
    .hero-dist__actions {
      display: flex;
      gap: var(--sp-3);
      flex-wrap: wrap;
    }
    .hero-dist__card {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius-xl);
      padding: var(--sp-8);
      backdrop-filter: blur(8px);
    }
    .hero-dist__card-title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--c-accent);
      margin-bottom: var(--sp-4);
    }
    .hero-dist__card ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: .75rem;
    }
    .hero-dist__card li {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      font-size: var(--fs-sm);
      color: rgba(255,255,255,.85);
      line-height: 1.4;
    }
    .hero-dist__card li::before {
      content: '✓';
      color: var(--c-accent);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: .05rem;
    }

    /* Benefit cards */
    .benefit-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-6);
    }
    @media (max-width: 900px) { .benefit-cards { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 540px) { .benefit-cards { grid-template-columns: 1fr; } }

    .benefit-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border-light);
      border-radius: var(--radius-xl);
      padding: var(--sp-8);
      transition: var(--transition-base);
      border-top: 4px solid transparent;
    }
    .benefit-card:hover {
      border-top-color: var(--c-accent);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .benefit-card__icon {
      font-size: 2.4rem;
      margin-bottom: var(--sp-4);
    }
    .benefit-card__title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--c-primary);
      margin-bottom: var(--sp-2);
    }
    .benefit-card__desc {
      font-size: var(--fs-sm);
      color: var(--c-text-muted);
      line-height: 1.55;
    }

    /* Who can distribute */
    .who-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-5);
    }
    @media (max-width: 900px) { .who-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .who-grid { grid-template-columns: 1fr; } }
    .who-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border-light);
      border-radius: var(--radius-lg);
      padding: var(--sp-6);
      text-align: center;
    }
    .who-card__icon {
      font-size: 2.2rem;
      margin-bottom: var(--sp-3);
    }
    .who-card__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .95rem;
      color: var(--c-primary);
      margin-bottom: var(--sp-2);
    }
    .who-card__desc {
      font-size: var(--fs-xs);
      color: var(--c-text-muted);
      line-height: 1.5;
    }

    /* Requirements checklist */
    .requirements-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-4);
    }
    @media (max-width: 640px) { .requirements-list { grid-template-columns: 1fr; } }
    .req-item {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-3);
      padding: var(--sp-4);
      background: var(--c-surface);
      border: 1px solid var(--c-border-light);
      border-radius: var(--radius-md);
    }
    .req-item__num {
      width: 28px;
      height: 28px;
      background: var(--c-primary);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      font-weight: 800;
      flex-shrink: 0;
    }
    .req-item__text {
      font-size: var(--fs-sm);
      color: var(--c-text);
      line-height: 1.4;
      padding-top: .2rem;
    }

    /* CTA section */
    .cta-dist {
      background: linear-gradient(135deg, var(--c-primary) 0%, #0a2040 100%);
      border-radius: var(--radius-2xl);
      padding: var(--sp-12) var(--sp-10);
      color: #fff;
      text-align: center;
    }
    .cta-dist__title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 800;
      margin-bottom: var(--sp-3);
    }
    .cta-dist__subtitle {
      color: rgba(255,255,255,.72);
      font-size: var(--fs-sm);
      margin-bottom: var(--sp-8);
      max-width: 50ch;
      margin-inline: auto;
    }
    .cta-dist__actions {
      display: flex;
      gap: var(--sp-4);
      justify-content: center;
      flex-wrap: wrap;
    }

    /* Login teaser box */
    .login-teaser {
      background: var(--c-surface);
      border: 2px solid var(--c-border-light);
      border-radius: var(--radius-xl);
      padding: var(--sp-8);
      text-align: center;
    }
    .login-teaser__lock {
      font-size: 2.5rem;
      margin-bottom: var(--sp-3);
    }
    .login-teaser__title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--c-primary);
      margin-bottom: var(--sp-2);
    }
    .login-teaser__desc {
      font-size: var(--fs-sm);
      color: var(--c-text-muted);
      margin-bottom: var(--sp-5);
      max-width: 30ch;
      margin-inline: auto;
    }
    .login-form {
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      max-width: 320px;
      margin: 0 auto;
    }
    .login-note {
      font-size: var(--fs-xs);
      color: var(--c-text-light);
      margin-top: var(--sp-3);
    }

    /* Process steps */
    .process-steps {
      display: flex;
      gap: 0;
      position: relative;
    }
    .process-steps::before {
      content: '';
      position: absolute;
      top: 24px;
      left: calc(12.5% + 12px);
      right: calc(12.5% + 12px);
      height: 2px;
      background: var(--c-border-light);
      z-index: 0;
    }
    @media (max-width: 640px) {
      .process-steps { flex-direction: column; gap: var(--sp-4); }
      .process-steps::before { display: none; }
    }
    .process-step {
      flex: 1;
      text-align: center;
      padding: 0 var(--sp-3);
      position: relative;
      z-index: 1;
    }
    .process-step__num {
      width: 48px;
      height: 48px;
      background: var(--c-primary);
      color: #fff;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.1rem;
      margin-bottom: var(--sp-3);
      box-shadow: 0 0 0 4px var(--c-surface);
    }
    .process-step__title {
      font-family: var(--font-display);
      font-size: .9rem;
      font-weight: 700;
      color: var(--c-primary);
      margin-bottom: var(--sp-1);
    }
    .process-step__desc {
      font-size: var(--fs-xs);
      color: var(--c-text-muted);
      line-height: 1.4;
    }

/* ---- Pagina: CATALOGO ---- */
.catalog-layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: var(--sp-8);
      align-items: start;
      padding-block: var(--sp-8);
    }
    .catalog-sidebar {
      position: sticky;
      top: calc(var(--header-height) + var(--sp-4));
      background: var(--c-surface);
      border: 1px solid var(--c-border-light);
      border-radius: var(--r-xl);
      overflow: hidden;
    }
    .sidebar-head {
      padding: var(--sp-4) var(--sp-5);
      background: var(--c-surface-alt);
      border-bottom: 1px solid var(--c-border-light);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--c-text-muted);
    }
    .sidebar-filter-list { padding: var(--sp-3); }
    .sidebar-filter-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .55rem var(--sp-3);
      border-radius: var(--r-md);
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--c-text-muted);
      cursor: pointer;
      transition: all var(--t-fast);
    }
    .sidebar-filter-item:hover { background: var(--c-surface-alt); color: var(--c-primary); }
    .sidebar-filter-item.active { background: var(--c-primary-muted); color: var(--c-primary); }
    .sidebar-filter-item .count {
      font-size: .65rem;
      font-weight: 700;
      background: var(--c-surface-dark);
      color: var(--c-text-light);
      border-radius: var(--r-full);
      padding: .1rem .5rem;
    }
    .sidebar-filter-item.active .count { background: var(--c-primary); color: #fff; }

    .catalog-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      padding: var(--sp-4) 0;
      border-bottom: 1px solid var(--c-border-light);
      margin-bottom: var(--sp-6);
      flex-wrap: wrap;
    }
    .toolbar-count { font-size: var(--fs-sm); color: var(--c-text-muted); }
    .toolbar-count strong { color: var(--c-text); font-weight: 700; }
    .toolbar-sort {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      font-size: var(--fs-sm);
      color: var(--c-text-muted);
    }
    .toolbar-sort select {
      font-size: var(--fs-sm);
      color: var(--c-text);
      border: 1.5px solid var(--c-border);
      border-radius: var(--r-md);
      padding: .4rem .8rem;
      outline: none;
      background: var(--c-surface);
    }
    @media (max-width: 768px) {
      .catalog-layout { grid-template-columns: 1fr; }
      .catalog-sidebar { position: static; }
    }

/* ---- Pagina: PRODUCTO-SINGLE ---- */
.product-info__price-tax {
      font-size: var(--fs-xs);
      color: var(--c-text-light);
      margin-top: var(--sp-1);
    }
    .stock-indicator {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--c-success);
    }
    .stock-dot { width: 8px; height: 8px; background: var(--c-success); border-radius: 50%; animation: pulse 2s infinite; }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: .4; }
    }
    .attr-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
    .attr-chip {
      display: inline-flex;
      flex-direction: column;
      padding: var(--sp-2) var(--sp-3);
      background: var(--c-surface-alt);
      border: 1px solid var(--c-border-light);
      border-radius: var(--r-md);
      font-size: var(--fs-xs);
    }
    .attr-chip__label { color: var(--c-text-light); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .62rem; }
    .attr-chip__val { color: var(--c-text); font-weight: 700; margin-top: 2px; }