/* Estilo B — Vibrante: dinámico, global, usa todo el rango de la paleta con más energía visual. */
:root{
  --accent:var(--orange);
  --accent-2:var(--red);
  --hero-bg:var(--charcoal);
  --hero-text:#FFFFFF;
}
.site-header{border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--red),var(--orange),var(--yellow)) 1}
.logo span{background:linear-gradient(135deg,var(--red),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.main-nav a:hover,.main-nav a.active{color:var(--orange);border-color:var(--orange)}

.hero{background:linear-gradient(120deg,var(--red) 0%,var(--orange) 55%,var(--yellow) 100%)}
.hero-visual{background:
  linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.05)),
  repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 2px,transparent 2px 16px);
  border:1px solid rgba(255,255,255,.4);
}
.diag-divider{
  background:var(--bg);
  clip-path:polygon(0 100%,100% 0,100% 100%);
  margin-top:-2px;
}

.eyebrow{background:linear-gradient(135deg,var(--red),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}

.cat-card{border-top:3px solid var(--red)}
.cat-card:nth-child(4n+1){border-color:var(--red)}
.cat-card:nth-child(4n+2){border-color:var(--orange)}
.cat-card:nth-child(4n+3){border-color:var(--yellow)}
.cat-card:nth-child(4n){border-color:var(--blue)}
.cat-card:nth-child(4n+1) .cat-icon{background:var(--red)}
.cat-card:nth-child(4n+2) .cat-icon{background:var(--orange)}
.cat-card:nth-child(4n+3) .cat-icon{background:var(--yellow)}
.cat-card:nth-child(4n) .cat-icon{background:var(--blue)}

.benefit-card:nth-child(3n+1) .b-icon{background:rgba(255,0,0,.12);color:var(--red)}
.benefit-card:nth-child(3n+2) .b-icon{background:rgba(251,176,52,.12);color:var(--orange)}
.benefit-card:nth-child(3n) .b-icon{background:rgba(0,164,228,.12);color:var(--blue)}

.btn-primary{background:linear-gradient(135deg,var(--red),var(--orange));box-shadow:0 6px 18px rgba(251,176,52,.35)}
.testi-card .stars{color:var(--yellow)}
.badge-promo{background:linear-gradient(135deg,var(--orange),var(--yellow))}
.badge-new{background:linear-gradient(135deg,var(--red),var(--blue))}
.product-card:hover{border-color:var(--orange)}
.contact-info-card{background:linear-gradient(160deg,var(--black),var(--charcoal))}
.site-footer{background:var(--charcoal)}