/* Atacado Recargas visual identity for compreroupasporatacado.com.br */
:root {
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;
  --color-accent-400: #fb7185;
  --color-accent-500: #f43f5e;
  --color-accent-600: #e11d48;
  --brand-primary: #059669;
  --brand-secondary: #0f766e;
  --brand-accent: #f43f5e;
}

body {
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0 1px, transparent 1px 36px),
    linear-gradient(180deg, #f7fffb 0%, #ffffff 38%, #fff1f4 100%) !important;
}

.header {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.22) !important;
  box-shadow: 0 18px 44px rgba(6, 95, 70, 0.1) !important;
}

.brand span span,
.nav-link:hover,
.nav-link--active {
  color: #047857 !important;
}

.nav-link:hover,
.nav-link--active {
  background: linear-gradient(135deg, #ecfdf5, #fff1f4) !important;
}

.header-cta,
.btn--primary,
.btn--accent,
.plan-button--featured,
.subpage-cta--featured,
.annual-cta,
.monthly-cta,
.plans-choice-action--featured,
.plans-table-actions a:last-child,
.plans-final-actions .btn--primary {
  background: linear-gradient(135deg, #059669, #0f766e 58%, #f43f5e) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(5, 150, 105, 0.24), 0 8px 18px rgba(244, 63, 94, 0.16) !important;
}

.header-cta:hover,
.btn--primary:hover,
.btn--accent:hover,
.plan-button--featured:hover,
.subpage-cta--featured:hover,
.annual-cta:hover,
.monthly-cta:hover {
  background: linear-gradient(135deg, #10b981, #059669 56%, #e11d48) !important;
}

.btn--outline,
.btn--light-outline,
.plan-button--muted,
.plans-choice-action,
.plans-table-actions a:first-child,
.plans-table-actions a:nth-child(2),
.plans-final-actions .btn--outline,
.iptv-buy--monthly {
  background: #ecfdf5 !important;
  border: 1px solid rgba(16, 185, 129, 0.34) !important;
  color: #047857 !important;
  box-shadow: 0 14px 28px rgba(6, 95, 70, 0.08) !important;
}

.plan-button--muted:hover,
.plans-choice-action:hover,
.plans-table-actions a:first-child:hover,
.plans-table-actions a:nth-child(2):hover,
.plans-final-actions .btn--outline:hover,
.iptv-buy--monthly:hover {
  background: #d1fae5 !important;
  border-color: rgba(5, 150, 105, 0.46) !important;
  color: #065f46 !important;
  box-shadow: 0 18px 34px rgba(6, 95, 70, 0.12) !important;
}

.hero,
.subpage-hero,
.product-hero,
.legal-hero,
.blog-hero,
.blog-article-hero,
.plans-page-hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(16, 185, 129, 0.24) 0 11%, transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(244, 63, 94, 0.18) 0 13%, transparent 32%),
    linear-gradient(135deg, #ecfdf5 0%, #ffffff 48%, #fff1f4 100%) !important;
}

.hero-image-frame {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.42), rgba(244, 63, 94, 0.28));
  border-radius: 28px 10px 28px 10px;
  box-shadow: 0 34px 86px rgba(6, 95, 70, 0.18);
}

.text-gradient,
.plan-price,
.price-hero,
.plans-choice-price strong {
  background: linear-gradient(90deg, #047857, #10b981, #f43f5e) !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.hero-kicker,
.section-eyebrow,
.testimonial-badge,
.blog-tag,
.blog-tag-filter-item--active,
.blog-tag-filter-item:hover,
.plan-badge,
.plans-choice-badge,
.product-kicker,
.annual-product-ribbon {
  background: #ecfdf5 !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  color: #047857 !important;
}

.plan-card,
.plans-choice-card,
.timeline-card,
.info-card,
.step-card,
.faq-item,
.blog-card,
.blog-spotlight-primary,
.plans-feature-item,
.featured-testimonial,
.testimonial-card,
.price-panel {
  border-color: rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 22px 52px rgba(6, 95, 70, 0.1) !important;
}

.plan-card--featured,
.plans-choice-card--featured {
  background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 50%, #fff1f4 100%) !important;
  border-color: #10b981 !important;
  box-shadow: 0 30px 76px rgba(5, 150, 105, 0.18) !important;
}

.plan-card--featured .plan-ribbon,
.plan-card--no-saving .plan-ribbon,
.plans-choice-card--featured::before {
  background: linear-gradient(90deg, #10b981, #059669, #f43f5e) !important;
}

.plan-saving,
.price-badge,
.annual-saving-badge,
.plans-choice-saving,
.plans-note-centered {
  background: #ecfdf5 !important;
  border-color: rgba(16, 185, 129, 0.32) !important;
  color: #047857 !important;
}

.feature-icon,
.timeline-icon,
.info-card-icon,
.plans-feature-icon,
.download-icon,
.compatibility-icon,
.benefit-icon {
  background: linear-gradient(135deg, #d1fae5, #fff1f4) !important;
  color: #047857 !important;
}

.section--soft,
.monthly-faq,
.annual-faq,
.plans-intro,
.plans-comparison,
.plans-features,
.home-blog-section,
.blog-cover-section,
.blog-article-content-section {
  background:
    linear-gradient(120deg, rgba(6, 95, 70, 0.06) 0 1px, transparent 1px 36px),
    linear-gradient(135deg, #f7fffb 0%, #fff1f4 100%) !important;
}

.final-cta,
.annual-annual-cta,
.monthly-annual-cta,
.plans-final,
.footer {
  background: linear-gradient(135deg, #064e3b 0%, #0f766e 58%, #be123c 120%) !important;
}

.footer {
  color: #d1fae5;
}

.footer h3 {
  color: #ffffff !important;
}

.footer a:hover {
  color: #fecdd3 !important;
}