/* ==========================================================================
   BRAND TOKENS — Algodón Todo Evento
   Paleta cálida del PDF de diseño. Este archivo se carga PRIMERO en todos
   los HTML para que los var(--*) estén disponibles en el resto de hojas.
   Guía: Rojo promo 5% | Naranja CTA 10% | Mostaza 8% | Dorado 12%
         Beige 50% | Café oscuro 15%
   ========================================================================== */

:root {
  /* Paleta oficial — sin degradados */
  --rojo-promo:   #FD2102;   /* promociones, urgencia, etiquetas */
  --naranja-cta:  #FE7700;   /* botones principales CTA */
  --mostaza:      #AA8700;   /* detalles, acentos, separadores, iconos */
  --dorado:       #E19100;   /* subrayados, badges secundarios */
  --beige:        #E1CEC7;   /* fondos amplios, descanso visual */
  --cafe-oscuro:  #6B1B00;   /* header, nav, footer, contraste premium */

  /* Aliases semánticos usados por otros archivos */
  --primary:            var(--cafe-oscuro);   /* #6B1B00 */
  --primary-dark:       #4A1200;
  --primary-light:      #8B2500;
  --secondary:          var(--naranja-cta);   /* #FE7700 */
  --secondary-dark:     #D96400;
  --accent:             var(--dorado);        /* #E19100 */
  --warning:            var(--rojo-promo);    /* #FD2102 */

  /* Superficies y fondos */
  --bg:           var(--beige);              /* #E1CEC7 fondo general */
  --surface:      #FFFFFF;
  --surface-soft: #F5EDE8;                   /* beige claro para secciones */

  /* Texto */
  --text:             #2C1000;
  --muted:            #6B4A3A;
  --text-on-primary:  #FFFFFF;
  --text-on-secondary:#FFFFFF;

  /* Bordes cálidos */
  --border:       #C4A89A;
  --border-soft:  #D4B8AC;

  /* Sombras con tono cálido */
  --shadow-sm: 0 2px 8px rgba(107, 27, 0, 0.06);
  --shadow-md: 0 8px 20px rgba(107, 27, 0, 0.08);
  --shadow-lg: 0 12px 24px rgba(107, 27, 0, 0.10);

  /* Radios y transición estándar */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --transition: 180ms ease;

  /* Variables de "gradiente" ahora son colores sólidos */
  --gradient-hero:    var(--beige);
  --gradient-soft:    var(--surface-soft);
  --hero-solid:       var(--cafe-oscuro);
  --hero-solid-alt:   var(--naranja-cta);
}

/* Aplicación global base */
body {
  background: var(--bg);
  color: var(--text);
}

/* Primitivos reutilizables */
.section-soft { background: var(--surface-soft); }

.card-base {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card-base:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-brand-primary {
  background: var(--naranja-cta);
  color: #FFFFFF;
  border: 0;
  transition: background var(--transition), transform var(--transition);
}
.btn-brand-primary:hover { background: var(--secondary-dark); transform: translateY(-1px); }

.btn-brand-secondary {
  background: var(--cafe-oscuro);
  color: #FFFFFF;
  border: 0;
  transition: background var(--transition), transform var(--transition);
}
.btn-brand-secondary:hover { background: var(--primary-dark); transform: translateY(-1px); }

.badge-brand {
  background: var(--dorado);
  color: #FFFFFF;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-promo {
  background: var(--rojo-promo);
  color: #FFFFFF;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Neutralizar animaciones infinitas */
.animated-bg, .pulse, .bounce, .float, .parallax,
.marquee, .infinite-anim {
  animation: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}