/* ==== HERO SECTION ÉPICA - TUDO DA MONA (Light Pink Theme) ==== */

.epic-hero {
  background: linear-gradient(135deg, var(--surface) 0%, var(--primary-light) 100%);
  min-height: 80vh;
  padding: 2rem 0;
  position: relative;
  overflow: hidden;
}

.epic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(232,108,174,0.10) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(232,108,174,0.12) 0%, transparent 50%);
  pointer-events: none;
}

/* Top Offers Bar */
.top-offers-bar {
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.top-offers-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 3s infinite;
}

.offer-item { display: flex; align-items: center; gap: .5rem; color: #222; font-weight: 600; font-size: .9rem; }
.offer-icon { font-size: 1.2rem; filter: drop-shadow(0 0 8px rgba(255,255,255,.5)); }

/* Hero Main */
.hero-main { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-bottom: 3rem; position: relative; z-index: 1; }

/* Left banners */
.hero-banners { display: flex; flex-direction: column; gap: 1rem; }

.main-banner {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 20px;
  padding: 3rem;
  color: rgb(0, 0, 0);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
}

.main-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: .3;
}

.banner-content { position: relative; z-index: 2; flex: 1; }
.banner-badge { background: rgba(255,255,255,.2); color: rgb(0, 0, 0); padding: .5rem 1rem; border-radius: 20px; font-size: .8rem; font-weight: 700; display: inline-block; margin-bottom: 1rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.3); }
.banner-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.1; }
.banner-title .highlight { background: linear-gradient(90deg, #ffffff, var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.banner-subtitle { font-size: 1.2rem; margin-bottom: 1.5rem; opacity: .9; }

.banner-timer { margin-bottom: 2rem; }
.timer-label { display: block; font-size: .9rem; margin-bottom: .5rem; opacity: .8; }
.timer-display { display: flex; gap: 1rem; }
.timer-item { background: rgba(255,255,255,.2); padding: .8rem 1rem; border-radius: 12px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.3); }
.timer-number { display: block; font-size: 1.8rem; font-weight: 700; }
.timer-unit { font-size: .8rem; opacity: .8; }

.banner-cta { background: white; color: var(--primary); padding: 1rem 2rem; border-radius: 12px; font-weight: 700; font-size: 1.1rem; text-decoration: none; display: inline-block; transition: all .3s ease; box-shadow: 0 8px 25px rgba(0,0,0,.15); }
.banner-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0,0,0,.2); }

.banner-decoration { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); }
.decoration-circle { width: 150px; height: 150px; border-radius: 50%; position: absolute; opacity: .1; background: white; }
.circle-1 { top: -50px; right: 0; }
.circle-2 { top: 20px; right: 50px; width: 100px; height: 100px; }
.circle-3 { top: 80px; right: 20px; width: 75px; height: 75px; }

/* Secondary banners */
.secondary-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.small-banner { padding: 2rem; border-radius: 16px; color: rgb(0, 0, 0); display: flex; align-items: center; min-height: 120px; position: relative; overflow: hidden; }
.banner-1 { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
.banner-2 { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
.small-banner-content { position: relative; z-index: 2; }
.small-banner-icon { font-size: 2rem; display: block; margin-bottom: .5rem; filter: drop-shadow(0 0 10px rgba(255,255,255,.3)); }
.small-banner h4 { font-size: 1.2rem; font-weight: 600; margin-bottom: .3rem; }
.small-banner p { font-size: .9rem; opacity: .9; }

/* Deals (right) */
.hero-deals { background: linear-gradient(135deg, var(--surface-alt) 0%, var(--primary-light) 100%); color: var(--gray-800); border-radius: 20px; padding: 1.5rem; box-shadow: 0 10px 40px rgba(232,108,174,.1); border: 1px solid rgba(232,108,174,.12); }
.deals-header { text-align: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid #fce4ec; }
.deals-header h3 { color: var(--primary); font-size: 1.3rem; font-weight: 700; margin-bottom: .5rem; }
.deals-timer { color: #666; font-size: .8rem; background: var(--primary-light); padding: .3rem .8rem; border-radius: 20px; display: inline-block; }
.deals-grid { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.deal-card { background: var(--surface-alt); border-radius: 12px; padding: 1rem; position: relative; transition: all .3s ease; border: 1px solid rgba(232,108,174,.12); }
.deal-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(232,108,174,.15); }
.deal-discount { position: absolute; top: -5px; right: -5px; background: var(--primary); color: rgb(0, 0, 0); font-size: .7rem; font-weight: 700; padding: .3rem .6rem; border-radius: 12px; z-index: 2; }
.deal-image { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; margin-bottom: .8rem; background: white; border: 1px solid #e0e0e0; }
.deal-image img { width: 100%; height: 100%; object-fit: cover; }
.deal-title { font-size: .8rem; font-weight: 600; color: #333; margin-bottom: .5rem; line-height: 1.2; }
.deal-price { margin-bottom: .8rem; }
.price-current { color: var(--primary); font-size: 1rem; font-weight: 700; }
.price-current sup { font-size: .7rem; }
.price-old { color: #999; font-size: .7rem; text-decoration: line-through; margin-left: .3rem; }
.deal-progress { margin-top: .5rem; }
.progress-bar { background: #f0f0f0; height: 4px; border-radius: 2px; overflow: hidden; margin-bottom: .3rem; }
.progress-fill { background: linear-gradient(90deg, var(--primary), var(--primary-light)); height: 100%; border-radius: 2px; transition: width .3s ease; }
.progress-text { font-size: .65rem; color: #666; }
.deals-view-all { display: block; text-align: center; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: rgb(0, 0, 0); padding: .8rem; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: .9rem; transition: all .3s ease; }
.deals-view-all:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,108,174,.3); }

/* Categories quick access */
.hero-categories { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 40px rgba(232,108,174,.1); border: 1px solid rgba(232,108,174,.12); text-align: center; }
.hero-categories h3 { color: var(--primary); font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.category-item { background: linear-gradient(135deg, #fce4ec, var(--primary-light)); border-radius: 16px; padding: 1.5rem 1rem; text-decoration: none; color: var(--primary); transition: all .3s ease; border: 1px solid rgba(232,108,174,.12); }
.category-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(232,108,174,.2); background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: rgb(0, 0, 0); }
.category-icon { font-size: 2rem; display: block; margin-bottom: .8rem; filter: drop-shadow(0 2px 8px rgba(233,30,99,.3)); }

/* Animations */
@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }

/* Responsive */
@media (max-width: 1024px) {
  .hero-main { grid-template-columns: 1fr; gap: 2rem; }
  .secondary-banners { grid-template-columns: 1fr; }
  .banner-title { font-size: 2rem; }
}

@media (max-width: 768px) {
  .top-offers-bar { flex-direction: column; gap: .5rem; padding: .8rem 0; }
  .offer-item { font-size: .8rem; }
  .main-banner { padding: 2rem; min-height: 250px; }
  .banner-title { font-size: 1.8rem; }
  .timer-display { gap: .5rem; }
  .timer-item { padding: .5rem .8rem; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .decoration-circle { display: none; }
}

@media (max-width: 480px) {
  .hero { padding: 2rem 0; }
  .hero h1 { font-size: 1.875rem; }
  .hero p { font-size: 1rem; }
}