/* Paleta propia de Soy Desarrollador sobre la base de Lumbre. */
:root {
  --navy: #3a4bb5;
  --navy-hi: #2b3a8f;
  --navy-lo: #1b2566;
  --accent: #0f9f9f;
  --accent-hi: #0a8080;
  --ink: #1c2233;
  --muted: #5c6577;
  --line: #e1e4ee;
  --bg: #f5f6fa;
  --bg-alt: #fafbfe;
  --bg-alt2: #eef0f8;
  --bg-alt3: #e5e8f4;
}

html.tema-oscuro {
  --navy: #7d8ce8;
  --navy-hi: #9aa7f2;
  --navy-lo: #12173a;
  --accent: #2ec4c4;
  --accent-hi: #25a8a8;
  --ink: #e8eaf2;
  --muted: #a6adc0;
  --line: #353c55;
  --bg: #141824;
  --card: #1d2233;
  --bg-alt: #222839;
  --bg-alt2: #272d40;
  --bg-alt3: #2d3449;
}

.cabera { background: var(--navy-lo); }
.marca small { color: #b9c1ea; }

/* La tarjeta del formulario necesita fondo claro sobre el héroe. */
.hero__tarjeta--app {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

html.tema-oscuro .hero__tarjeta--app { background: var(--card); }

/* Capturas de escritorio de la PWA. */
.captura-pc {
  border: 6px solid #22303f;
  border-radius: 14px;
  overflow: hidden;
  background: #22303f;
  box-shadow: 0 18px 38px rgba(10, 25, 42, .20);
}

.captura-pc img { display: block; width: 100%; height: auto; border-radius: 8px; }

html.tema-oscuro .captura-pc { border-color: #0d1319; background: #0d1319; }

.capturas--anchas figure { width: min(560px, 84vw); }

@media (max-width: 720px) {
  .capturas--anchas figure { width: 84vw; }
}