/* === PÁGINA HUB: estilos específicos === */
.hero{background:linear-gradient(135deg,var(--dark-bg) 0%,#1a1a2e 50%,#16213e 100%);color:var(--white);padding:80px 0 100px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-30%;width:80%;height:200%;background:radial-gradient(ellipse,rgba(254,238,0,.06) 0%,transparent 70%);pointer-events:none}
.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(254,238,0,.12);border:1px solid rgba(254,238,0,.25);padding:6px 16px;border-radius:50px;font-size:.82rem;color:var(--yellow);margin-bottom:20px;font-weight:500}
.hero h1{font-size:2.8rem;font-weight:700;line-height:1.15;margin-bottom:20px;color:var(--white)}
.hero-text{font-size:1.1rem;color:var(--gray-300);line-height:1.7;margin-bottom:32px;max-width:520px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn-primary{background:var(--yellow);color:var(--dark);font-weight:700;padding:16px 32px;border-radius:var(--radius);font-size:1rem;display:inline-flex;align-items:center;gap:8px;transition:all .25s;border:none;cursor:pointer}
.btn-primary:hover{background:var(--yellow-dark);transform:translateY(-2px);box-shadow:0 8px 32px rgba(254,238,0,.3)}
.btn-secondary{border:2px solid var(--gray-500);color:var(--white);padding:14px 28px;border-radius:var(--radius);font-weight:600;font-size:.95rem;transition:all .25s}
.btn-secondary:hover{border-color:var(--yellow);color:var(--yellow)}
.hero-visual{display:flex;justify-content:center;align-items:center}
.hero-card{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px;width:100%;max-width:440px}
.hero-card h3{font-size:1.1rem;margin-bottom:20px;color:var(--white)}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat{background:rgba(255,255,255,.06);border-radius:12px;padding:20px 16px;text-align:center}
.stat-number{font-size:2rem;font-weight:700;color:var(--yellow);display:block}
.stat-label{font-size:.8rem;color:var(--gray-300);margin-top:4px}

.hero-featured-list{width:100%;max-width:560px}
.hero-featured-item{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.05);border-radius:14px;padding:12px;transition:background .2s;margin-bottom:12px}
.hero-featured-item:hover{background:rgba(255,255,255,.09)}
.hero-featured-img{width:110px;height:80px;background:rgba(255,255,255,.92);border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-featured-img img{width:85%;height:85%;object-fit:contain}
.hero-featured-name{color:var(--white);font-weight:600;font-size:1rem}
.hero-featured-tag{color:rgba(255,255,255,.6);font-size:.85rem}
.hero-featured-price{color:var(--yellow);font-weight:700;font-size:1.05rem;white-space:nowrap}
.hero-featured-price small{font-size:.72rem;font-weight:400;color:rgba(255,255,255,.5)}
.hero-featured-more{display:block;text-align:center;margin-top:18px;color:var(--yellow);font-size:.92rem;font-weight:600}

.about{padding:80px 0;background:var(--white)}
.about .container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-content h2{font-size:2rem;font-weight:700;margin-bottom:16px}
.about-content p{color:var(--gray-500);line-height:1.7;margin-bottom:16px}
.about-benefits{background:var(--gray-100);border-radius:16px;padding:40px}
.about-benefit{display:flex;gap:16px;align-items:flex-start}
.about-benefit + .about-benefit{margin-top:24px}
.about-benefit strong{display:block}
.about-benefit p{margin:4px 0 0;color:var(--gray-500);font-size:.95rem}

@media(max-width:960px){
  .hero .container{grid-template-columns:1fr;text-align:center}
  .hero h1{font-size:2rem}
  .hero-text{margin:0 auto 32px}
  .hero-actions{justify-content:center}
  .hero-visual{order:-1}
  .hero-card{max-width:360px;margin:0 auto}
  .about .container{grid-template-columns:1fr}
}
@media(max-width:600px){
  .hero h1{font-size:1.6rem}
  .hero-stats{grid-template-columns:1fr 1fr}
}