/* ============================================
   paleta-fija.css – Solo Lexend (peso 560)
   ============================================ */

/* 1. Cargar Lexend desde Google Fonts (versión variable) */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

/* 2. Forzar esquema de color oscuro para evitar inversiones */
html {
  color-scheme: dark !important;
}

/* 3. Variables globales (sobrescriben las de Material) */
:root {
  /* Fondo (60%) */
  --md-default-bg-color: #0b0d14 !important;
  --md-default-bg-color--light: #0b0d14 !important;
  --md-default-bg-color--dark: #0b0d14 !important;

  /* Encabezados y nav (azul nav) */
  --md-primary-fg-color: #264AA7 !important;
  --md-primary-fg-color--light: #3b6bc4 !important;
  --md-primary-fg-color--dark: #1a3575 !important;

  /* Bordes y detalles (azul navy) */
  --navy-color: #1E3A8A !important;

  /* Acento (enlaces, botones) – celeste */
  --md-accent-fg-color: #6CB4EE !important;
  --md-accent-fg-color--light: #93C9F2 !important;
  --md-accent-fg-color--dark: #4A8FC7 !important;

  /* Texto siempre blanco */
  --md-default-fg-color: #ffffff !important;
  --md-default-fg-color--light: #e2e8f0 !important;
  --md-default-fg-color--lighter: rgba(255,255,255,0.12) !important;
  --md-typeset-color: #ffffff !important;
  --md-typeset-a-color: var(--md-accent-fg-color) !important;

  /* Código */
  --md-code-bg-color: #1e293b !important;
  --md-code-fg-color: #e2e8f0 !important;

  /* Fuente base: solo Lexend con peso 560 */
  --md-text-font: 'Lexend', sans-serif !important;

  /* Fondo de tarjetas y secciones */
  --card-bg: #1a2332 !important;
  --border-color: var(--navy-color) !important;
}

/* 4. Aplicación directa a elementos */
body {
  background-color: #0b0d14 !important;
  color: #ffffff !important;
  font-family: var(--md-text-font) !important;
  font-weight: 450 !important; /* <-- Aquí fijamos el grosor */
}

/* 5. Todos los elementos heredan la fuente y el peso */
* {
  font-family: var(--md-text-font) !important;
  font-weight: 450 !important;
}

/* 6. Encabezados y nav */
.md-header, .md-tabs, .md-nav--primary .md-nav__title,
.card-header, .feature-card .card-header, .doc-card .card-header,
.service-card .card-header {
  background-color: var(--md-primary-fg-color) !important;
  border-bottom: 2px solid var(--border-color) !important;
}

/* 7. Tarjetas, secciones, contenedores */
.hero, .copy-box, .instructions, .cta-section, .intro-box,
.pgp-block, .feature-card, .service-card, .doc-card, .card,
.soon-item, .footer-quote, .quote-footer,
.donation-header, .pgp-block, .home-container .hero {
  background-color: var(--card-bg) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 16px !important;
}

/* 8. Bordes específicos */
.section-title, .footer-note, .instructions {
  border-bottom-color: var(--border-color) !important;
}
.intro-box, .alert {
  border-left: 4px solid var(--md-accent-fg-color) !important;
}

/* 9. Botones y enlaces destacados (acento) */
.md-button, .md-typeset .md-button,
.pay-button, .pgp-button, .read-button, .copy-button,
button.pay-button {
  background-color: var(--md-accent-fg-color) !important;
  color: #ffffff !important;
  border: 2px solid var(--md-accent-fg-color) !important;
  font-family: var(--md-text-font) !important;
  font-weight: 500 !important;
}
.md-button:hover, .md-typeset .md-button:hover,
.pay-button:hover, .pgp-button:hover, .read-button:hover, .copy-button:hover,
button.pay-button:hover {
  background-color: var(--md-accent-fg-color--dark) !important;
  border-color: var(--md-accent-fg-color--dark) !important;
}

/* 10. Enlaces */
a {
  color: var(--md-accent-fg-color) !important;
}
a:hover {
  color: var(--md-accent-fg-color--light) !important;
}

/* 11. Ajuste para el toggle de modo (aunque lo forzamos a oscuro) */
[data-md-color-scheme="slate"],
[data-md-color-scheme="default"] {
  --md-default-bg-color: #0b0d14 !important;
  --md-primary-fg-color: #264AA7 !important;
  --md-accent-fg-color: #6CB4EE !important;
  --md-text-font: 'Lexend', sans-serif !important;
  --card-bg: #1a2332 !important;
  --border-color: #1E3A8A !important;
}

/* 12. Efectos hover (como en tu bio) */
.md-button, .pay-button, .pgp-button, .read-button, .copy-button,
button.pay-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.md-button::before, .pay-button::before, .pgp-button::before,
.read-button::before, .copy-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 40%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0.15) 60%,
    transparent 100%);
  transition: left 0.6s ease;
  z-index: 0;
}
.md-button:hover::before, .pay-button:hover::before,
.pgp-button:hover::before, .read-button:hover::before,
.copy-button:hover::before {
  left: 100%;
}
.md-button:hover, .pay-button:hover, .pgp-button:hover,
.read-button:hover, .copy-button:hover,
button.pay-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(108, 180, 238, 0.4);
}
/* ============================================
   FORZAR COLOR BLANCO EN TODOS LOS ENCABEZADOS
   ============================================ */

/* Todos los h1-h6, dentro y fuera de .md-typeset */
h1, h2, h3, h4, h5, h6,
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6,
article h1, article h2, article h3, article h4, article h5, article h6,
section h1, section h2, section h3, section h4, section h5, section h6,
div h1, div h2, div h3, div h4, div h5, div h6,
main h1, main h2, main h3, main h4, main h5, main h6,
header h1, header h2, header h3, header h4, header h5, header h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6,
.md-content h1, .md-content h2, .md-content h3, .md-content h4, .md-content h5, .md-content h6,
.md-main h1, .md-main h2, .md-main h3, .md-main h4, .md-main h5, .md-main h6 {
  color: #ffffff !important;
}

/* Enlaces dentro de encabezados: heredan el color */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.md-typeset h1 a, .md-typeset h2 a, .md-typeset h3 a,
.md-typeset h4 a, .md-typeset h5 a, .md-typeset h6 a,
article h1 a, article h2 a, article h3 a, article h4 a, article h5 a, article h6 a,
section h1 a, section h2 a, section h3 a, section h4 a, section h5 a, section h6 a {
  color: inherit !important;
}