/* ==========================================================================
   PALETTE GLOBAL - Capa final de armonia visual
   Mantiene coherencia sin pelear con los componentes principales.
   ========================================================================== */

html {
  background: var(--bg, #FFF8F1);
}

body {
  background: var(--bg, #FFF8F1) !important;
  color: var(--text, #221A16);
}

main,
.index-main,
.main-content,
.page-wrapper,
.container-main {
  background-color: transparent;
}

/* Superficies */
.product-container,
.product-specs,
.recommended-products,
.sidebar-card,
.help-card,
.product-card,
.producto-card,
.card-producto,
.testimonial-card,
.faq-item,
.contact-form,
.cart-drawer,
.cart-modal,
.bank-card {
  background: var(--surface, #FFFFFF);
  border-color: var(--border, #E8D8CF);
}

/* Titulos y texto */
.product-title,
.section-title,
h1.titulo,
.titulo-seccion {
  color: var(--primary, #6B1B00);
}

.section-description,
.product-description,
.product-description-box,
.muted,
.text-muted {
  color: var(--muted, #6F5D55);
}

/* CTAs principales */
button.btn-primary,
a.btn-primary,
.btn-comprar,
.btn-reservar,
.btn-cotizar,
.btn-agregar,
.btn-add,
.add-to-cart,
.btn-add-to-cart,
.cta-button,
.boton-principal,
.producto-cta,
input[type="submit"],
button[type="submit"] {
  background: var(--naranja-cta, #FF6B00) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: var(--naranja-cta, #FF6B00) !important;
}

button.btn-primary:hover,
a.btn-primary:hover,
.btn-comprar:hover,
.btn-reservar:hover,
.btn-cotizar:hover,
.btn-agregar:hover,
.btn-add:hover,
.add-to-cart:hover,
.btn-add-to-cart:hover,
.cta-button:hover,
.boton-principal:hover {
  background: var(--secondary-dark, #D94E00) !important;
  border-color: var(--secondary-dark, #D94E00) !important;
}

/* WhatsApp conserva identidad, pero con radio y sombra del sistema */
.btn-whatsapp,
.btn-wa,
.whatsapp-btn,
.btn-whatsapp-quote {
  background: #20B85A !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #20B85A !important;
}

/* Precios y promos */
.precio,
.price,
.product-price,
.precio-actual,
.price-final {
  color: var(--primary, #6B1B00) !important;
}

.descuento,
.promo-badge,
.badge-promo,
.oferta-badge,
.discount-badge {
  background: var(--rojo-promo, #E0311F) !important;
  color: #FFFFFF !important;
}

/* Inputs */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--naranja-cta, #FF6B00) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.14) !important;
  outline: none !important;
}

/* Thumbnails y carruseles */
.thumbnail.active {
  border-color: var(--naranja-cta, #FF6B00) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12) !important;
}

.thumbnail:hover {
  border-color: var(--naranja-cta, #FF6B00) !important;
}

.carousel-dot.active,
.carousel-progress-bar {
  background: var(--naranja-cta, #FF6B00) !important;
}

/* Secciones de cierre y footer mantienen el cafe profundo */
.cta-section,
.reservar-section,
.contact-cta,
.seccion-cta {
  background: var(--primary-dark, #3A1207) !important;
  color: #FFFFFF !important;
}