/*
 * Identidad visual global — Versículo de Bendición
 * Esta capa se carga al final para que todas las superficies públicas compartan
 * la paleta del home: índigo profundo, ámbar y violeta sobrio.
 */
:root {
  --site-bg: #0B0A11;
  --site-bg-soft: #12101B;
  --site-surface: rgba(255, 255, 255, 0.045);
  --site-surface-strong: rgba(255, 255, 255, 0.08);
  --site-border: rgba(255, 255, 255, 0.11);
  --site-gold: #E8B86D;
  --site-gold-soft: #EAC98A;
  --site-violet: #7C6FD0;
  --site-violet-deep: #2A2350;
  --site-text: #ECEAF3;
  --site-muted: #A29DB5;
  --site-error: #C97B6B;
  --site-success: #6FAE8C;
  --site-gradient: radial-gradient(1200px 820px at 50% -12%, #1B1828 0%, #100E18 55%, #0B0A11 100%);

  /* La sección Mujer conserva sus nombres de variable, pero usa la misma
     identidad cromática para que toda la web se perciba como un solo producto. */
  --mp-bg: #0B0A11;
  --mp-card: rgba(255, 255, 255, 0.045);
  --mp-card-solid: #12101B;
  --mp-card-glass: rgba(255, 255, 255, 0.08);
  --mp-purple: #7C6FD0;
  --mp-purple-deep: #2A2350;
  --mp-purple-md: #8F84E0;
  --mp-purple-pale: rgba(124, 111, 208, 0.15);
  --mp-rose: #E8B86D;
  --mp-rose-dark: #B6854A;
  --mp-rose-pale: rgba(232, 184, 109, 0.12);
  --mp-rose-gold: #EAC98A;
  --mp-gold: #E8B86D;
  --mp-gold-soft: #EAC98A;
  --mp-text: #ECEAF3;
  --mp-body: #D4D0DF;
  --mp-muted: #A29DB5;
  --mp-border: rgba(255, 255, 255, 0.11);
  --mp-border-glow: rgba(232, 184, 109, 0.35);
  --mp-grad: linear-gradient(135deg, #7C6FD0 0%, #2A2350 100%);
  --mp-grad-rose: linear-gradient(135deg, #E8B86D 0%, #B6854A 100%);
  --mp-grad-soft: var(--site-gradient);
  --mp-grad-gold: linear-gradient(135deg, #E8B86D 0%, #7C6FD0 100%);
  --rose: #E8B86D;
  --rose-dark: #B6854A;
  --purple: #7C6FD0;
  --lavender: #C9C2E8;
  --pink: #EAC98A;
  --grad: var(--mp-grad);
  --text: #ECEAF3;
  --text-muted: #A29DB5;
  --body-bg: #0B0A11;
}

html {
  background: var(--site-bg) !important;
}

body {
  background: var(--site-gradient) !important;
  background-color: var(--site-bg) !important;
  color: var(--site-text) !important;
}

body::before {
  background-image:
    radial-gradient(circle at 12.5% 7.5%, rgba(124, 111, 208, 0.12) 0%, transparent 85%),
    radial-gradient(circle at 92.5% 100%, rgba(232, 184, 109, 0.07) 0%, transparent 85%) !important;
}

a {
  color: var(--site-gold);
}

a:hover {
  color: var(--site-gold-soft);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
.btn,
.button,
[class*="btn-primary"],
[class*="btn-warning"] {
  color: var(--site-text);
  background: linear-gradient(135deg, var(--site-violet), var(--site-violet-deep));
  border-color: transparent;
}

button:hover,
.btn:hover,
.button:hover,
[class*="btn-primary"]:hover,
[class*="btn-warning"]:hover {
  filter: brightness(1.08);
}

input,
select,
textarea,
.form-control {
  color: var(--site-text);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--site-border);
}

input::placeholder,
textarea::placeholder {
  color: rgba(236, 234, 243, 0.52);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: rgba(232, 184, 109, 0.65);
  box-shadow: 0 0 0 3px rgba(232, 184, 109, 0.12);
  outline: none;
}

/* Superficies de las páginas secundarias y los juegos. */
.card,
.juego-card,
.game-card,
.modal-content,
.panel,
.box,
.section-card,
.app-card,
.verify-card,
.steps-card {
  color: var(--site-text);
  background: var(--site-surface);
  border-color: var(--site-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--site-text);
}

.text-warning,
.text-gold,
.accent,
.section-title,
.event-card,
.app-badge {
  color: var(--site-gold) !important;
}

::selection {
  color: var(--site-bg);
  background: rgba(232, 184, 109, 0.45);
}

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