:root {
  --color-brand-primary: #735236;
  --color-brand-secondary: #F2C1B6;
  --color-brand-accent: #0F9F8E;
  --color-page-bg: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-card-bg: #FFFFFF;
  --color-border: #D9E2E8;
  --color-text: #17202A;
  --color-text-muted: #6A7A86;
  --button-primary-bg: #165A72;
  --button-primary-text: #FFFFFF;
  --button-secondary-bg: #F2C1B6;
  --button-secondary-text: #FFFFFF;
  --cta-bg: #165A72;
  --cta-text: #FFFFFF;
  --nav-underline-color: #0F9F8E;
  --hero-bg: #F6F8FB;
  --badge-bg: #EAF4F6;
  --badge-text: #165A72;
  --header-bg: #17202A;
  --header-text: #F6F8FB;
  --footer-bg: #17202A;
  --footer-text: #F6F8FB;
  --color-success: #0F9F8E;
  --color-warning: #E7B64F;
  --color-danger: #DC2626;
  --color-info: #165A72;
  --bg-color: var(--color-page-bg);
  --page-background: var(--color-page-bg);
  --section-background: var(--color-page-bg);
  --body-background: var(--color-page-bg);
  --card-bg: var(--color-card-bg);
  --panel-bg: var(--color-card-bg);
  --box-bg: var(--color-card-bg);
  --surface-elevated: var(--color-surface);
  --surface-warm: var(--color-page-bg);
  --demo-page-bg: var(--color-page-bg);
  --demo-admin-bg: var(--color-page-bg);
  --demo-surface: var(--color-surface);
  --demo-surface-soft: var(--color-page-bg);
  --accent-warm: var(--color-brand-accent);
  --primary-gradient: var(--button-primary-bg);
  --gradient-primary: var(--button-primary-bg);
  --gradient-secondary: var(--button-secondary-bg);
  --primary-color: var(--color-brand-primary);
  --primary-hover: #10465A;
  --secondary-color: var(--color-brand-secondary);
  --accent-color: var(--color-brand-accent);
  --background-color: var(--color-page-bg);
  --surface-color: var(--color-surface);
  --text-color: var(--color-text);
  --muted-text-color: var(--color-text-muted);
  --border-color: var(--color-border);
  --button-text-color: var(--button-primary-text);
  --header-background: var(--header-bg);
  --header-text-color: var(--header-text);
  --nav-link-color: #EAF4F6;
  --nav-link-hover: #FFFFFF;
  --footer-background: var(--footer-bg);
  --footer-text-color: var(--footer-text);
  --hero-background: var(--hero-bg);
  --hero-title-color: #165A72;
  --hero-subtitle-color: #17202A;
  --badge-background: var(--badge-bg);
  --badge-text-color: var(--badge-text);
  --cta-background: var(--cta-bg);
  --cta-text-color: var(--cta-text);
  --card-background: var(--color-card-bg);
  --input-background: #FFFFFF;
  --input-border-color: #D9E2E8;
  --success-color: var(--color-success);
  --warning-color: var(--color-warning);
  --danger-color: var(--color-danger);
  --info-color: var(--color-info);
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --border-radius: 12px;
  --card-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

/* CAPA DE APLICACIÓN FINAL */
html, body, main, .wrapper, .site-wrapper, .home-section, .catalog-section, .store-section, .product-section, .combo-section, .cart-section, .checkout-section, section, .section {
  background-color: var(--color-page-bg) !important;
  color: var(--color-text) !important;
}
.card, .panel, .box, .product-card, .combo-card, .category-card, .checkout-card, .cart-card, .summary-card, .checkout-step, .forms, .form-control, .input-control, input, select, textarea, .combo-component-card, .combo-selection-item {
  background-color: var(--color-card-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
.btn-primary, .add-to-cart, .add-combo-to-cart, .checkout-btn, .place-order-btn, button[type="submit"], .btn-save-full {
  background-color: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  border-color: var(--button-primary-bg) !important;
  background-image: none !important;
}
.btn-secondary, button.secondary {
  background-color: var(--button-secondary-bg) !important;
  color: var(--button-secondary-text) !important;
  border-color: var(--button-secondary-bg) !important;
  background-image: none !important;
}
.main-nav a::after {
  background-color: var(--nav-underline-color) !important;
}
.announcement-bar {
  background: var(--header-bg) !important;
  background-image: none !important;
  color: var(--header-text) !important;
}
.hero-section, .hero, .promo-card {
  background-color: var(--hero-bg) !important;
}
.badge-primary, .badge-rank, .category-tag, .hero-badge, .discount-badge, .cart-count {
  background-color: var(--badge-bg) !important;
  color: var(--badge-text) !important;
}
.main-header {
  background-color: var(--header-bg) !important;
  color: var(--header-text) !important;
}
.main-footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
}