/* Sobrescribe todos los colores rosas con dorados */

/* Variables raíz - reemplaza colores rosas con dorados */
:root {
  --pink: #D4AF37 !important;        /* Dorado medio */
  --pink2: #FFD46A !important;       /* Dorado claro */
  --pink-dark: #8C6A2E !important;   /* Dorado oscuro */
  --pink-deep: #5A3E1A !important;   /* Dorado profundo */
}

/* Reemplaza gradientes rosas con gradientes dorados */
body {
  background: radial-gradient(65% 40% at 50% -10%, rgba(212, 175, 55, .16), transparent 60%),
              linear-gradient(180deg,#0b0a0f 0%,#0a090d 100%) !important;
}

/* Reemplaza gradientes de texto rosas */
.title em {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Reemplaza puntos rosas */
.dot {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
}

/* Reemplaza enlaces hover rosas */
.nav-links a:hover {
  background: rgba(212, 175, 55, .12) !important;
}

.nav-links a.active:not(.btn-primary) {
  background: rgba(212, 175, 55, .18) !important;
  border: 1px solid rgba(212, 175, 55, .35) !important;
}
/* Garantiza el estilo brillante del CTA activo en la nav */
.nav-links a.btn-primary.active {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
  color: var(--text-on-gold) !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, .25) !important;
  border: none !important;
}

/* Reemplaza botones primarios rosas */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, .25) !important;
  color: var(--text-on-gold) !important;
}

/* Reemplaza gradientes del hero */
.bg-gradient {
  background: radial-gradient(60% 60% at 50% 10%,rgba(255, 212, 106, .18),transparent 55%) !important;
}

/* Reemplaza otros gradientes rosas */
.hero .bg-gradient {
  background: radial-gradient(60% 60% at 50% 10%,rgba(255, 212, 106, .18),transparent 55%) !important;
}

/* Actualiza cualquier otro gradiente rosa */
[data-route="home"] .bg-gradient {
  background: radial-gradient(60% 60% at 50% 10%,rgba(255, 212, 106, .18),transparent 55%) !important;
}

/* Reemplaza barras de progreso rosas */
[data-route="home"] .bar > i {
  background: linear-gradient(90deg, var(--gold-light), rgba(255, 255, 255, .6)) !important;
}

/* Reemplaza colores de acento en tarjetas y otros elementos */
.chip {
  border: 1px solid rgba(212, 175, 55, .14) !important;
  color: #c2c8d1 !important;
}

/* Reemplaza sombras rosas */
.btn-primary {
  box-shadow: 0 8px 24px rgba(212, 175, 55, .25) !important;
}

/* Asegura que el texto sobre fondos dorados tenga buen contraste */
.btn-primary {
  color: var(--text-on-gold) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Reemplaza cualquier otro color rosa que pueda existir */
* {
  --pink: #D4AF37 !important;
  --pink2: #FFD46A !important;
}

/* Reemplaza gradientes de fondo rosas */
body {
  background: radial-gradient(65% 40% at 50% -10%, rgba(212, 175, 55, .16), transparent 60%),
              linear-gradient(180deg,#0b0a0f 0%,#0a090d 100%) !important;
}

/* Reemplaza gradientes del hero */
.bg-gradient {
  background: radial-gradient(60% 60% at 50% 10%,rgba(255, 212, 106, .18),transparent 55%) !important;
}

.hero .bg-gradient {
  background: radial-gradient(60% 60% at 50% 10%,rgba(255, 212, 106, .18),transparent 55%) !important;
}

[data-route="home"] .bg-gradient {
  background: radial-gradient(60% 60% at 50% 10%,rgba(255, 212, 106, .18),transparent 55%) !important;
}

/* Reemplaza barras de progreso rosas */
[data-route="home"] .bar > i {
  background: linear-gradient(90deg, var(--gold-light), rgba(255, 255, 255, .6)) !important;
}

/* Reemplaza colores de acento en tarjetas y otros elementos */
.chip {
  border: 1px solid rgba(212, 175, 55, .14) !important;
  color: #c2c8d1 !important;
}

/* Reemplaza sombras rosas */
.btn-primary {
  box-shadow: 0 8px 24px rgba(212, 175, 55, .25) !important;
}

/* Reemplaza colores de focus rosas */
:focus-visible {
  outline: 2px solid var(--gold-medium) !important;
}

.nav-links a:focus-visible,
.btn:focus-visible,
.nav .hamburger:focus-visible {
  outline: 2px solid var(--gold-medium) !important;
}

/* Asegurar que la sección de opiniones use colores dorados */
[data-route="opiniones"] {
  --accent: var(--gold-medium) !important;
  --accent2: var(--gold-light) !important;
}

[data-route="opiniones"] .avatar {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
}

[data-route="opiniones"] .chip {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-medium)) !important;
}

#opinionesGrid .avatar {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
}

/* Override any remaining pink/purple colors in opiniones section */
[data-route="opiniones"] .stars svg {
  fill: url(#gstar-op) !important;
}

/* Ensure all gradients in opiniones use gold colors */
[data-route="opiniones"] * {
  --accent: var(--gold-medium) !important;
  --accent2: var(--gold-light) !important;
}