/* MC Mentoría · Version 2 — tema oscuro cálido */
:root {
  color-scheme: dark;
  --page: #111513;
  --surface: #181e1b;
  --surface-raised: #202723;
  --surface-deep: #0b0f0d;
  --text: #f2eee7;
  --text-soft: #d4dad5;
  --text-muted: #aeb8b2;
  --dark-line: #354039;
  --brand-red: #e50813;
  --brand-red-dark: #96010f;
  --button: var(--brand-red);
  --button-hover: var(--brand-red-dark);

  /* Variables de la portada */
  --white: var(--page);
  --cream: var(--surface);
  --section: #151b18;
  --ink: var(--text);
  --ink2: var(--text-soft);
  --ink3: var(--text-muted);
  --subtle: #98a49d;
  --line: var(--dark-line);
  --red: #ff6269;
  --red-mid: var(--brand-red);
  --red-bg: #35090d;
  --gold: #d8b86b;

  /* Variables de las páginas legales */
  --paper: var(--page);
  --ink-2: var(--text-soft);
  --ink-3: var(--text-muted);
  --red-dark: #ff7379;
}

html,
body {
  background: var(--page);
}

body {
  color: var(--text);
}

/* Navegación y superficies principales */
#nav,
.site-header {
  background: rgba(17, 21, 19, 0.96);
  border-color: var(--dark-line);
}

#nav.scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

#nav-logo,
.brand,
.footer-logo,
.footer-logo-img,
.footer-logo img {
  border-radius: 5px;
}

.brand img,
.footer-logo-img {
  background: #f2eee7;
  padding: 5px 9px;
}

.brand img {
  width: 76px;
  height: auto;
  padding: 0;
  background: transparent;
}

.footer-logo img {
  width: 76px;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

#nav-logo img {
  width: auto;
  height: 44px;
  padding: 0;
  background: transparent;
}

.hero-photo-wrap,
.montse-img-wrap img {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

.hero-photo-badge,
.card,
.testi-card,
.step,
.malaga-point,
.data-card {
  background: var(--surface-raised);
}

.card:hover,
.testi-card:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
}

.step:hover,
.btn-outline:hover {
  background: #252d29;
}

#proceso {
  background: #1b211e;
}

#proceso .step {
  background: #252d29;
}

#montse,
.hero-strip,
footer,
.site-footer {
  background: var(--surface-deep);
}

#metricas {
  background: var(--brand-red-dark);
}

/* Franja clara para que los logotipos negros conserven su identidad */
#logos {
  background: #e8e8e5;
  border-color: #cfd1cd;
}

.logos-label {
  color: #252a27;
}

.logo-item {
  flex: 0 1 180px;
  height: 82px;
  padding: 10px 20px;
  border: 1px solid #d1d3cf;
  border-radius: 8px;
  background: #fff;
  opacity: 1;
}

.logo-item img {
  width: auto;
  height: auto;
  max-width: 140px;
  max-height: 44px;
  opacity: 0.72;
  transform-origin: center;
}

.logo-item--ayuntamiento img {
  transform: scale(1.55);
}

.logo-item--buchinger img {
  transform: scale(1.45);
}

.logo-item:hover img {
  opacity: 1;
}

@media (max-width: 640px) {
  .logo-item {
    flex-basis: 140px;
    padding: 10px 16px;
  }
}

.legal-hero,
#cta,
#malaga {
  background: var(--surface);
}

.legal-note {
  background: var(--surface-raised);
}

/* Enlaces, botones y foco visibles sin resplandor excesivo */
a {
  text-decoration-thickness: 1px;
}

.btn-red,
.nav-cta,
.error-home {
  background: var(--button);
}

.btn-red:hover,
.nav-cta:hover,
.error-home:hover {
  background: var(--button-hover);
}

:focus-visible {
  outline-color: #ff7379;
}

/* El menú móvil también conserva el tema oscuro */
@media (max-width: 900px) {
  #nav-links {
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 420px) {
  #nav-logo img {
    height: 38px;
  }
}

/* Contraste reforzado para quien lo solicite en el sistema */
@media (prefers-contrast: more) {
  :root {
    --text: #ffffff;
    --text-soft: #f1f4f2;
    --text-muted: #d4dbd7;
    --dark-line: #718078;
    --red: #ff8085;
  }
}