:root {
	--navy: #0b1620;
	--navy-2: #13222f;
	--navy-3: #1c3040;
	--naranja: #ff7a2f;
	--turquesa: #1fc8b4;
	--blanco: #ffffff;
	--tinta: #0b1620;
	--gris: #8fa3b3;
	--rojo: #ff5d5d;
	--op0: #ff7a2f;
	--op1: #1fc8b4;
	--op2: #ffc145;
	--op3: #6ea8ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
	background: var(--navy);
	color: var(--blanco);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .sora { font-family: "Sora", "Inter", sans-serif; letter-spacing: -0.02em; }
button { font: inherit; cursor: pointer; border: 0; }
.oculto { display: none !important; }
.marca { display: flex; align-items: center; gap: 10px; font-family: "Sora", sans-serif; font-weight: 700; }
.marca .punto { width: 12px; height: 12px; border-radius: 50%; background: var(--naranja); box-shadow: 18px 0 0 var(--turquesa); margin-right: 18px; }
.marca small { color: var(--gris); font-weight: 500; font-family: "Inter", sans-serif; }
.btn {
	background: var(--naranja); color: var(--tinta); font-weight: 700; border-radius: 14px;
	padding: 16px 28px; font-size: 18px; transition: transform .08s, filter .15s;
}
.btn:active { transform: scale(.97); }
.btn:hover { filter: brightness(1.06); }
.btn.sec { background: transparent; color: var(--blanco); border: 2px solid var(--navy-3); }
.btn:disabled { opacity: .5; cursor: default; }
.tarjeta { background: var(--blanco); color: var(--tinta); border-radius: 20px; }
.letra {
	flex: none; display: inline-grid; place-items: center; border-radius: 12px;
	font-family: "Sora", sans-serif; font-weight: 800; color: var(--tinta);
}
.l0 { background: var(--op0); } .l1 { background: var(--op1); } .l2 { background: var(--op2); } .l3 { background: var(--op3); }