:root {
  --fondo: #0C2F55;
  --fondo-profundo: #081D36;
  --superficie: #123E6B;
  --acento: #FFC93C;
  --rojo: #EF4B3F;
  --azul: #2F7BE0;
  --texto: #FFFFFF;
  --texto-suave: #BFD7F2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at 50% 0%, #16508A 0%, var(--fondo) 45%, var(--fondo-profundo) 100%) fixed;
  color: var(--texto);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

.franja {
  display: flex;
  width: 180px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 24px;
}
.franja span:nth-child(1) { flex: 2; background: var(--acento); }
.franja span:nth-child(2) { flex: 1; background: var(--azul); }
.franja span:nth-child(3) { flex: 1; background: var(--rojo); }

h1 { font-size: 2.1rem; line-height: 1.15; margin: 0; }
h1 small { display: block; color: var(--acento); font-size: 0.6em; }
h2 { color: var(--acento); font-size: 1.25rem; margin: 32px 0 8px; }

p, li { color: var(--texto); }
.suave { color: var(--texto-suave); }

.tarjeta {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 16px 20px;
  margin: 16px 0;
}

a { color: var(--acento); }

.boton {
  display: inline-block;
  background: var(--acento);
  color: var(--fondo);
  font-weight: 700;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: 0 4px 0 #C7901A;
  margin: 4px 8px 4px 0;
}

footer { margin-top: 48px; font-size: 0.9rem; }